提交

src/api/webApi.ts

@@ -1,4 +1,4 @@
-import request from "@/utils/axiosReq2";
+import request from "@/utils/axiosReq";
 import { ObjTy } from "~/common";
 
 export function Query(params) {

src/components/tableColumnSet/index.vue

@@ -1,8 +1,8 @@
 <template>
   <Dialog :flag="dialogVisible" msgTitle="列设置" width="1080px" @submitForm="submitForm" @resetForm="resetForm">
     <div class="columnSet">
-        <el-checkbox v-for="(item,index) in tableHeaderList" :key="index" :label="item.key" v-model="item.isShow" :checked="item.isShow">
-          {{item.label}}
+        <el-checkbox v-for="(item,index) in tableHeaderList" :key="index" :label="item.columnName" v-model="item.needShow" :checked="item.needShow">
+          {{item.columnLabel}}
         </el-checkbox>
     </div>
   </Dialog>

src/components/tableTemp/index.vue

@@ -50,8 +50,8 @@
       </template>
     </el-table-column>
     <!-- label-class-name  可通过 tableHeader中传入class来修改某一个或某一类表头的样式-->
-    <el-table-column class="infinite-list-item" v-for="(items, index) in tableHeaderList" :key="index" :label="items.label" :prop="items.key" :width="items.width?items.width:props.tableColumnProperty.width" :sortable="
-        items.sortable ? items.sortable : props.tableColumnProperty.sortable
+    <el-table-column class="infinite-list-item" v-for="(items, index) in tableHeaderList" :key="index" :label="items.columnLabel" :prop="items.columnName" :width="items.width?items.width:props.tableColumnProperty.width" :sortable="
+        items.needSort ? items.needSort : props.tableColumnProperty.sortable
       " :show-overflow-tooltip="props.tableColumnProperty.showOverflowTooltip" :align="items.align ? items.align : props.tableColumnProperty.align" :header-align="
         items.headerAlign
           ? items.headerAlign
@@ -59,14 +59,14 @@
       " :label-class-name="items.lableClass ? items.lableClass : ''" :class-name="items.columnClassName">
       <template #default="scope">
         <!-- 枚举值则为 items.key+'-enum' -->
-        <template v-if="isChild(scope.row[items.key])">
-          <div class="child-list" v-for="(newItem,ni) in childDatas(scope.row[items.key])" :key="ni">{{newItem}}</div>
+        <template v-if="isChild(scope.row[items.columnName])">
+          <div class="child-list" v-for="(newItem,ni) in childDatas(scope.row[items.columnName])" :key="ni">{{newItem}}</div>
         </template>
         <template v-else>
           {{
-          scope.row[items.key + "-enum"]
-            ? scope.row[items.key + "-enum"]
-            : scope.row[items.key]
+          scope.row[items.columnName + "-enum"]
+            ? scope.row[items.columnName + "-enum"]
+            : scope.row[items.columnName]
         }}
         </template>
       </template>
@@ -170,7 +170,7 @@ watchEffect(() => {
   let newArray = []
   console.log(props.tableHeader)
   props.tableHeader.map(item => {
-      if(item.isShow != false){
+      if(item.needShow != false){
         newArray.push(item)
       }
   })

src/router/routes/routes-file-one.ts

@@ -10,37 +10,37 @@ const HomeRoutes = {
       name: 'Dashboard',
       component: () => import('@/views/dashboard/index.vue'),
       //using el svg icon, the elSvgIcon first when at the same time using elSvgIcon and icon
-      meta: { title: 'Dashboard', elSvgIcon: 'Fold' }
+      meta: { title: '决策管理驾驶舱', elSvgIcon: 'Fold' }
     }
   ]
 }
 
-const DemoRoutes = {
-  path: '/example',
-  component: Layout,
-  redirect: '/example/table',
-  name: 'Example',
-  meta: { title: 'Example', icon: 'example' },
-  children: [
-    {
-      path: 'table',
-      name: 'Table',
-      component: () => import('@/views/table/index.vue'),
-      meta: { title: 'Table', icon: 'table' }
-    },
-    {
-      path: 'tree',
-      name: 'Tree',
-      component: () => import('@/views/tree/index.vue'),
-      meta: { title: 'Tree', icon: 'tree' }
-    },
-    {
-      path: 'worker-Demo',
-      name: 'WorkerDemo',
-      component: () => import('@/views/example/worker'),
-      meta: { title: 'Worker Demo', icon: 'nested' }
-    }
-  ]
-}
+// const DemoRoutes = {
+//   path: '/example',
+//   component: Layout,
+//   redirect: '/example/table',
+//   name: 'Example',
+//   meta: { title: 'Example', icon: 'example' },
+//   children: [
+//     {
+//       path: 'table',
+//       name: 'Table',
+//       component: () => import('@/views/table/index.vue'),
+//       meta: { title: 'Table', icon: 'table' }
+//     },
+//     {
+//       path: 'tree',
+//       name: 'Tree',
+//       component: () => import('@/views/tree/index.vue'),
+//       meta: { title: 'Tree', icon: 'tree' }
+//     },
+//     {
+//       path: 'worker-Demo',
+//       name: 'WorkerDemo',
+//       component: () => import('@/views/example/worker'),
+//       meta: { title: 'Worker Demo', icon: 'nested' }
+//     }
+//   ]
+// }
 
 export default [HomeRoutes]

src/views/dashboard/index.vue

@@ -1,29 +1,168 @@
 <template>
   <div class="dashboard">
     <div class="dashboard-head flex">
-      <div class="dashboard-head-title">{{title}}</div>
+      <!-- <div class="dashboard-head-title">{{title}}</div> -->
       <div class="dashboard-head-tabs flex-wrap">
         <div class="dashboard-head-tabs-list" :class="tabsIndex == index ? 'active' : ''" @click="tabClick(item,index)" v-for="(item,index) in tabs" :key="index">{{item.label}}</div>
       </div>
-      <div class="dashboard-head-zw"></div>
+      <!-- <div class="dashboard-head-zw"></div> -->
     </div>
     <div class="dashboard-content">
-      <div v-if="false" class="dashboard-content-top flex">
+      <div class="dashboard-content-top flex">
         <div class="dashboard-content-top-left">
-          <Echarts id="ww" :option="optionLeft" />
+          <div class="dashboard-content-top-left-item">
+            <div class="dashboard-content-top-left-item-top">
+              <div class="dashboard-content-top-left-item-top-title">小时峰值分布</div>
+              <div class="dashboard-content-top-left-item-top-time" @click="showDatePicker">
+                <el-icon color="#ffffff" size="18"><Calendar /></el-icon>
+                <el-icon color="#ffffff"><CaretBottom /></el-icon>
+              </div>
+            </div>
+            <div class="dashboard-content-top-left-item-bottom">
+              <Echarts id="ww1" :option="optionLeft" />
+            </div>
+          </div>
+          <div class="dashboard-content-top-left-item">
+            <div class="dashboard-content-top-left-item-top">
+              <div class="dashboard-content-top-left-item-top-title">运单趋势分析</div>
+              <div class="dashboard-content-top-left-item-top-time" @click="showDatePicker">
+                <el-icon color="#ffffff" size="18"><Calendar /></el-icon>
+                <el-icon color="#ffffff"><CaretBottom /></el-icon>
+              </div>
+            </div>
+            <div class="dashboard-content-top-left-item-bottom">
+              <Echarts id="ww12" :option="optionLeft" />
+            </div>
+          </div>
+
+        </div>
+        <div class="dashboard-content-top-center">
+          <div class="dashboard-content-bottom-center-top">
+
+          </div>
+          <div class="dashboard-content-bottom-center-bottom">
+            <Echarts id="ww2" :option="optionLeft" />
+          </div>
+        </div>
+        <div class="dashboard-content-top-right">
+          <div class="dashboard-content-top-right-item">
+            <div class="dashboard-content-top-right-item-top">
+              <div class="dashboard-content-top-right-item-top-title">航班预警报警分析</div>
+              <div class="dashboard-content-top-right-item-top-time" @click="showDatePicker">
+                <el-icon color="#ffffff" size="18"><Calendar /></el-icon>
+                <el-icon color="#ffffff"><CaretBottom /></el-icon>
+              </div>
+            </div>
+            <div class="dashboard-content-top-right-item-bottom">
+              <Echarts id="ww3" :option="optionLeft" />
+            </div>
+          </div>
+          <div class="dashboard-content-top-right-item">
+            <div class="dashboard-content-top-right-item-top">
+              <div class="dashboard-content-top-right-item-top-title">航司运量统计</div>
+              <div class="dashboard-content-top-right-item-top-time" @click="showDatePicker">
+                <el-icon color="#ffffff" size="18"><Calendar /></el-icon>
+                <el-icon color="#ffffff"><CaretBottom /></el-icon>
+              </div>
+            </div>
+            <div class="dashboard-content-top-left-item-bottom">
+              <Echarts id="ww33" :option="optionLeft" />
+            </div>
+          </div>
+        </div>
+      </div>
+      <div class="dashboard-content-bottom flex">
+        <div class="dashboard-content-bottom-left">
+          <div class="dashboard-content-bottom-left-top">
+            <div class="dashboard-content-bottom-left-top-title">节点峰值分布</div>
+            <div class="dashboard-content-bottom-left-top-time" @click="showDatePicker">
+              <el-icon color="#ffffff" size="18"><Calendar /></el-icon>
+              <el-icon color="#ffffff"><CaretBottom /></el-icon>
+            </div>
+          </div>
+          <div class="dashboard-content-bottom-left-bottom">
+            <Echarts id="ww4" :option="optionLeft" />
+          </div>
+        </div>
+        <div class="dashboard-content-bottom-center">
+          <div class="dashboard-content-bottom-center-top">
+            <div class="dashboard-content-bottom-center-top-title">节点效率分析</div>
+            <div class="dashboard-content-bottom-center-top-time" @click="showDatePicker">
+              <el-icon color="#ffffff" size="18"><Calendar /></el-icon>
+              <el-icon color="#ffffff"><CaretBottom /></el-icon>
+            </div>
+          </div>
+          <div class="dashboard-content-bottom-center-bottom">
+            <Echarts id="ww5" :option="optionLeft" />
+          </div>
+        </div>
+        <div class="dashboard-content-bottom-right">
+          <div class="dashboard-content-bottom-right-top">
+            <div class="dashboard-content-bottom-center-top-title">航班动态统计</div>
+          </div>
+          <div class="dashboard-content-bottom-right-bottom">
+            <Echarts id="ww6" :option="optionLeft" />
+          </div>
         </div>
-        <div class="dashboard-content-top-center">2</div>
-        <div class="dashboard-content-top-right">3</div>
       </div>
-      <div class="dashboard-content-bottom"></div>
     </div>
+    <Dialog :flag="flag" @resetForm="resetForm" @submitForm="submitForm">
+      <el-form :model="form" label-width="120px">
+        <el-form-item label="开始日期">
+          <el-date-picker
+          :disabled-date="disabledStartDate"
+            v-model="form.startDate"
+            type="date"
+            placeholder="请选择开始日期"
+            size="default"
+            format="YYYY/MM/DD"
+            value-format="YYYY-MM-DD"
+          />
+        </el-form-item>
+        <el-form-item label="结束日期">
+          <el-date-picker
+            :disabled-date="disabledEndDate"
+            v-model="form.endDate"
+            type="date"
+            placeholder="请选择结束日期"
+            size="default"
+            format="YYYY-MM-DD"
+            value-format="YYYY-MM-DD"
+          />
+        </el-form-item>
+      </el-form>
+    </Dialog>
   </div>
 </template>
 
 <script setup lang="ts">
 import { ref } from "vue";
 import Echarts from "@/components/Echarts/commonChartsBar.vue";
+import {Calendar,CaretBottom} from "@element-plus/icons-vue"
+import  Dialog  from "@/components/dialog/index.vue";
 const title = ref("决策管理驾驶舱");
+const form = ref({
+  startDate:Date.now(),
+  endDate:Date.now()
+})
+
+const disabledStartDate = (time: Date) => {
+  let data = new Date(form.value.endDate)
+  return time.getTime() > data.getTime()
+}
+const disabledEndDate = (time: Date) => {
+  let data = new Date(form.value.startDate)
+  return  data.getTime() > time.getTime()
+}
+
+const flag = ref(false)
+const resetForm = () => {
+  flag.value = false
+}
+
+const submitForm = () => {
+  flag.value = false
+}
 const tabs = [
   {
     id: 1,
@@ -158,6 +297,11 @@ const tabClick = (item, index) => {
   tabsIndex.value = index;
   console.log(item, index);
 };
+
+const showDatePicker = () =>{
+  flag.value = true;
+}
+
 </script>
 
 <style lang="scss" scoped>
@@ -172,9 +316,12 @@ const tabClick = (item, index) => {
   color: #fff;
   &-head {
     padding: 0 32px;
-    height: 48px;
-    line-height: 48px;
+    height: 40px;
+    line-height: 40px;
     background: #1d2948;
+    width: 100%;
+    display: flex;
+    justify-content: center;
     &-title {
       font-size: 24px;
       font-family: Microsoft YaHei;
@@ -212,17 +359,166 @@ const tabClick = (item, index) => {
     }
   }
   &-content {
-    padding: 24px 32px;
+    padding:0 20px;
+    height: calc(100% - 40px);
+    box-sizing: border-box;
+    display: flex;
+    flex-direction: column;
     &-top {
       width: 100%;
-      height: 60vh;
+      height: 65%;
       &-left,
       &-right {
-        width: 25%;
-        position: relative;
+        width: calc(30% - 20px);
+        &-item{
+          width: 100%;
+          height: calc(50% - 20px);
+          margin: 20px 0;
+          display: flex;
+          flex-direction: column;
+          background-image: url("../../assets/home/pic_border.png");
+          background-repeat: no-repeat;
+          background-size: 100% 100%;
+          padding: 13px;
+          box-sizing: border-box;
+        &-top{
+          width: 100%;
+          height: 45px;
+          display: flex;
+          padding-top: 15px;
+          box-sizing: border-box;
+          &-title{
+            font-size: 16px;
+            font-weight: bold;
+            color: #75CEE1;
+            line-height: 1.8;
+            margin-right: 10px;
+          }
+          &-time{
+            display: flex;
+            justify-content: flex-start;
+            align-items: center;
+            cursor: pointer;
+          }
+        }
+        &-bottom{
+          width: 100%;
+          flex: 1;
+          position: relative;
+          // margin-top: 10px;
+        }
+        }
       }
       &-center {
-        width: 50%;
+        width: 40%;
+        box-sizing: border-box;
+        display: flex;
+        flex-direction: column;
+        &-top{
+          width: 100%;
+          height: 55px;
+          display: flex;
+          padding-top: 15px;
+          box-sizing: border-box;
+          &-title{
+            font-size: 16px;
+            font-weight: bold;
+            color: #75CEE1;
+            line-height: 1.8;
+            margin-right: 10px;
+          }
+          &-time{
+            display: flex;
+            justify-content: flex-start;
+            align-items: center;
+            cursor: pointer;
+          }
+        }
+        &-bottom{
+          width: 100%;
+          flex: 1;
+          position: relative;
+          // margin-top: 10px;
+        }
+      }
+    }
+    &-bottom {
+      width: 100%;
+      flex: 1;
+      &-left,
+      &-right {
+        width: calc(30% - 20px);
+        display: flex;
+        flex-direction: column;
+        box-sizing: border-box;
+        background-image: url("../../assets/home/pic_border.png");
+        background-repeat: no-repeat;
+        background-size: 100% 100%;
+        padding: 13px;
+        box-sizing: border-box;
+        margin-top: 20px;
+        margin-bottom: 20px;
+        &-top{
+          width: 100%;
+          height: 45px;
+          display: flex;
+          padding-top: 15px;
+          box-sizing: border-box;
+          &-title{
+            font-size: 16px;
+            font-weight: bold;
+            color: #75CEE1;
+            line-height: 1.8;
+            margin-right: 10px;
+          }
+          &-time{
+            display: flex;
+            justify-content: flex-start;
+            align-items: center;
+            cursor: pointer;
+          }
+        }
+        &-bottom{
+          width: 100%;
+          flex: 1;
+          position: relative;
+          // margin-top: 10px;
+        }
+      }
+      &-center {
+        width: 40%;
+        padding: 13px;
+        margin-top: 20px;
+        margin-bottom: 20px;
+        box-sizing: border-box;
+        display: flex;
+        flex-direction: column;
+        &-top{
+          width: 100%;
+          height: 45px;
+          display: flex;
+          padding-top: 15px;
+          box-sizing: border-box;
+          &-title{
+            font-size: 16px;
+            font-weight: bold;
+            color: #75CEE1;
+            line-height: 1.8;
+            margin-right: 10px;
+          }
+          &-time{
+            display: flex;
+            justify-content: flex-start;
+            align-items: center;
+            cursor: pointer;
+          }
+        }
+        &-bottom{
+          width: 100%;
+          flex: 1;
+          position: relative;
+          // margin-top: 10px;
+        }
       }
     }
     .pBox {
@@ -232,4 +528,4 @@ const tabClick = (item, index) => {
     }
   }
 }
-</style>
+</style>