中国地图

src/components/mixin/commonChartsChinaMap.js

@@ -125,16 +125,11 @@ var geoCoordMap = {
 };
 
 var BJData = [
-  [{ name: '北京' }, { name: '上海', value: 95 }],
-  [{ name: '北京' }, { name: '广州', value: 90 }],
-  [{ name: '北京' }, { name: '大连', value: 80 }],
-  [{ name: '北京' }, { name: '南宁', value: 70 }],
-  [{ name: '北京' }, { name: '南昌', value: 60 }],
-  [{ name: '北京' }, { name: '拉萨', value: 50 }],
-  [{ name: '北京' }, { name: '长春', value: 40 }],
-  [{ name: '北京' }, { name: '包头', value: 30 }],
-  [{ name: '北京' }, { name: '重庆', value: 20 }],
-  [{ name: '北京' }, { name: '常州', value: 10 }]
+  [{ name: '北京' }, { name: '深圳', value: 95 }],
+  [{ name: '成都' }, { name: '深圳', value: 95 }],
+  [{ name: '重庆' }, { name: '深圳', value: 95 }],
+  [{ name: '西安' }, { name: '深圳', value: 95 }],
+  [{ name: '太原' }, { name: '深圳', value: 95 }],
 ];
 
 var SHData = [
@@ -151,16 +146,16 @@ var SHData = [
 ];
 
 var GZData = [
-  [{ name: '广州' }, { name: '福州', value: 95 }],
-  [{ name: '广州' }, { name: '太原', value: 90 }],
-  [{ name: '广州' }, { name: '长春', value: 80 }],
-  [{ name: '广州' }, { name: '重庆', value: 70 }],
-  [{ name: '广州' }, { name: '西安', value: 60 }],
-  [{ name: '广州' }, { name: '成都', value: 50 }],
-  [{ name: '广州' }, { name: '常州', value: 40 }],
-  [{ name: '广州' }, { name: '北京', value: 30 }],
-  [{ name: '广州' }, { name: '北海', value: 20 }],
-  [{ name: '广州' }, { name: '海口', value: 10 }]
+  [{ name: '深圳' }, { name: '福州', value: 95 }],
+  [{ name: '深圳' }, { name: '太原', value: 90 }],
+  [{ name: '深圳' }, { name: '长春', value: 80 }],
+  [{ name: '深圳' }, { name: '重庆', value: 70 }],
+  [{ name: '深圳' }, { name: '西安', value: 60 }],
+  [{ name: '深圳' }, { name: '成都', value: 50 }],
+  [{ name: '深圳' }, { name: '常州', value: 40 }],
+  [{ name: '深圳' }, { name: '北京', value: 30 }],
+  [{ name: '深圳' }, { name: '北海', value: 20 }],
+  [{ name: '深圳' }, { name: '海口', value: 10 }]
 ];
 
 var planePath = 'path://M1705.06,1318.313v-89.254l-319.9-221.799l0.073-208.063c0.521-84.662-26.629-121.796-63.961-121.491c-37.332-0.305-64.482,36.829-63.961,121.491l0.073,208.063l-319.9,221.799v89.254l330.343-157.288l12.238,241.308l-134.449,92.931l0.531,42.034l175.125-42.917l175.125,42.917l0.531-42.034l-134.449-92.931l12.238-241.308L1705.06,1318.313z';
@@ -185,7 +180,8 @@ var convertData = function (data) {
 
 var color = ['#a6c84c', '#ffa022', '#46bee9'];
 var series = [];
-[['北京', BJData], ['上海', SHData], ['广州', GZData]].forEach(function (item, i) {
+//[['北京', BJData], ['上海', SHData], ['广州', GZData]]
+[['北京', BJData], ['深圳', GZData]].forEach(function (item, i) {
   //console.log(item,i);
   series.push({
     name: item[0] + ' Top10',

src/views/dashboard/index.vue

@@ -3,13 +3,7 @@
     <div class="dashboard-head flex">
       <!-- <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"
-        >
+        <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>
@@ -23,12 +17,13 @@
               <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 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">
@@ -40,12 +35,13 @@
               <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 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">
@@ -60,29 +56,37 @@
             <div class="dashboard-content-top-center-bottom-box1">
               <div class="dashboard-content-top-center-bottom-box1-title">航班数</div>
               <div class="dashboard-content-top-center-bottom-box1-info">
-                  <div>本年：1000</div>
-                  <div>同期：1100</div>
+                <div>本年：1000</div>
+                <div>同期：1100</div>
               </div>
               <div class="dashboard-content-top-center-bottom-box1-info">
-                  <div>本年：1000</div><div>同期：1100</div>
+                <div>本年：1000</div>
+                <div>同期：1100</div>
               </div>
               <div class="dashboard-content-top-center-bottom-box1-info">
-                  <div>本年：1000</div><div>同期：1100</div>
+                <div>本年：1000</div>
+                <div>同期：1100</div>
               </div>
             </div>
             <div class="dashboard-content-top-center-bottom-box2">
               <div class="dashboard-content-top-center-bottom-box2-title">运单数</div>
               <div class="dashboard-content-top-center-bottom-box2-info">
-                  <div>本年：1000</div><div>同期：1100</div><div>重量：1100</div>
+                <div>本年：1000</div>
+                <div>同期：1100</div>
+                <div>重量：1100</div>
               </div>
               <div class="dashboard-content-top-center-bottom-box2-info">
-                  <div>本年：1000</div><div>同期：1100</div><div>重量：1100</div>
+                <div>本年：1000</div>
+                <div>同期：1100</div>
+                <div>重量：1100</div>
               </div>
               <div class="dashboard-content-top-center-bottom-box2-info">
-                  <div>本年：1000</div><div>同期：1100</div><div>重量：1100</div>
+                <div>本年：1000</div>
+                <div>同期：1100</div>
+                <div>重量：1100</div>
               </div>
             </div>
-            <Echarts id="ww2" :option="optionLeft" />
+            <EchartsMap id="ww2" />
           </div>
         </div>
         <div class="dashboard-content-top-right">
@@ -91,12 +95,13 @@
               <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 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">
@@ -109,12 +114,13 @@
               <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 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">
@@ -129,12 +135,13 @@
             <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 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">
@@ -146,12 +153,13 @@
             <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 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">
@@ -173,26 +181,10 @@
     <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-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-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>
@@ -202,6 +194,7 @@
 <script setup lang="ts">
 import { ref, onMounted } from "vue";
 import Echarts from "@/components/Echarts/commonChartsBar.vue";
+import EchartsMap from "@/components/Echarts/commonChartsChinaMap.vue";
 import { Calendar, CaretBottom } from "@element-plus/icons-vue";
 import Dialog from "@/components/dialog/index.vue";
 import axios from "axios";
@@ -286,35 +279,37 @@ const optionLeft = {
       color: "#8897BC",
     },
   },
-  yAxis: [{
-    type: "value",
-    name:"运单/件",
-    axisLabel: {
-      color: "#8897BC",
-      formatter: function (item) {
-        return item / 10000 + "万";
+  yAxis: [
+    {
+      type: "value",
+      name: "运单/件",
+      axisLabel: {
+        color: "#8897BC",
+        formatter: function (item) {
+          return item / 10000 + "万";
+        },
       },
-    },
-    splitLine: {
-      lineStyle: {
-        type: "dashed",
-        color: "rgba(196,194,225, 0.54)",
+      splitLine: {
+        lineStyle: {
+          type: "dashed",
+          color: "rgba(196,194,225, 0.54)",
+        },
       },
     },
-  },
-  {
-    type: "value",
-    name:"重量(吨)",
-    axisLabel: {
-      color: "#8897BC"
-    },
-    splitLine: {
-      lineStyle: {
-        type: "dashed",
-        color: "rgba(196,194,225, 0.54)",
+    {
+      type: "value",
+      name: "重量(吨)",
+      axisLabel: {
+        color: "#8897BC",
+      },
+      splitLine: {
+        lineStyle: {
+          type: "dashed",
+          color: "rgba(196,194,225, 0.54)",
+        },
       },
     },
-  }],
+  ],
   series: [
     {
       name: "运输总数",
@@ -580,7 +575,7 @@ const nodeEfficiency = ref({
         "待运区",
         "货站交接",
         "机下交接",
-        "装机"
+        "装机",
       ],
     },
     series: [
@@ -627,96 +622,73 @@ const nodeEfficiency = ref({
 });
 
 const node = [
-        "收货核单",
-        "安检",
-        "理货",
-        "待运区",
-        "货站交接",
-        "机下交接",
-        "装机"
-]
-
-const hours = Array.from({ length: 24 }, (v, i) => i + 1)
+  "收货核单",
+  "安检",
+  "理货",
+  "待运区",
+  "货站交接",
+  "机下交接",
+  "装机",
+];
 
-const hourPeak = ref( {
-          component: 'commonChartsScatter',
-          option: {
-            title: node.map((month, index) => ({
-              top: ((index + 0.5) * 100) / 7 - 3 + '%',
-              text: month,
-              textStyle: {
-                fontSize: 12,
-                fontWeight: 'normal',
-                color: '#698dc3'
-              }
-            })),
-            singleAxis: node.map((month, index) => ({
-              type: 'category',
-              data: hours,
-              top: ((index + 0.5) * 100) / 7 - 3 + '%',
-              height: 100 / 7 - 5 + '%',
-              left:"12%",
-              right:"1%",
-              axisTick: {
-                show: false
-              },
-              splitLine: {
-                show: false
-              }
-            })),
-            series: node.map((month, index) => ({
-              singleAxisIndex: index,
-              coordinateSystem: 'singleAxis',
-              type: 'scatter',
-              data: [3,
-          6,
-          1,
-          4,
-          0,
-          4,
-          2,
-          5,
-          4,
-          4,
-          6,
-          2,
-          0,
-          3,
-          1,
-          6,
-          6,
-          1,
-          0,
-          3,
-          6,
-          3,
-          0,
-          5],
-              symbolSize: function (dataItem) {
-                return dataItem * 3
-              }
-            }))
-          }
-        })
+const hours = Array.from({ length: 24 }, (v, i) => i + 1);
 
+const hourPeak = ref({
+  component: "commonChartsScatter",
+  option: {
+    title: node.map((month, index) => ({
+      top: ((index + 0.5) * 100) / 7 - 3 + "%",
+      text: month,
+      textStyle: {
+        fontSize: 12,
+        fontWeight: "normal",
+        color: "#698dc3",
+      },
+    })),
+    singleAxis: node.map((month, index) => ({
+      type: "category",
+      data: hours,
+      top: ((index + 0.5) * 100) / 7 - 3 + "%",
+      height: 100 / 7 - 5 + "%",
+      left: "12%",
+      right: "1%",
+      axisTick: {
+        show: false,
+      },
+      splitLine: {
+        show: false,
+      },
+    })),
+    series: node.map((month, index) => ({
+      singleAxisIndex: index,
+      coordinateSystem: "singleAxis",
+      type: "scatter",
+      data: [
+        3, 6, 1, 4, 0, 4, 2, 5, 4, 4, 6, 2, 0, 3, 1, 6, 6, 1, 0, 3, 6, 3, 0, 5,
+      ],
+      symbolSize: function (dataItem) {
+        return dataItem * 3;
+      },
+    })),
+  },
+});
 
-const getHourPeakData = ()=>{
+const getHourPeakData = () => {
   axios
-        .get('./mock/hourPeakData.json')
-        .then(res => {
-          if (res.data.code === 200 || res.data.code === '200') {
-            res.data.data.series.forEach((item, index) => {
-              hourPeak.value.option.series[index].data = item.data
-            })
-
-          } else {
-            // this.$message.error('小时高峰量统计分析-初始化数据失败')
-          }
-        })
-        .catch(err => {
-          // this.$message.error(err)
-        })
-}
+    .get("./mock/hourPeakData.json")
+    .then((res) => {
+      if (res.data.code === 200 || res.data.code === "200") {
+        res.data.data.series.forEach((item, index) => {
+          hourPeak.value.option.series[index].data = item.data;
+        });
+      } else {
+        // this.$message.error('小时高峰量统计分析-初始化数据失败')
+      }
+    })
+    .catch((err) => {
+      // this.$message.error(err)
+    });
+};
 
 const tabClick = (item, index) => {
   tabsIndex.value = index;
@@ -866,54 +838,54 @@ onMounted(() => {
           width: 100%;
           flex: 1;
           position: relative;
-          &-box1{
+          &-box1 {
             z-index: 10;
             width: 205px;
             height: 120px;
-            border: 2px solid #468FC3;
+            border: 2px solid #468fc3;
             position: absolute;
             left: 50px;
             display: flex;
             flex-direction: column;
             padding: 15px 0 15px 15px;
-            &-title{
+            &-title {
               font-size: 16px;
               font-weight: bold;
-              color: #FFFFFF;
+              color: #ffffff;
               margin-bottom: 10px;
             }
-            &-info{
+            &-info {
               font-size: 14px;
               font-weight: 400;
-              color: #C0CBE4;
+              color: #c0cbe4;
               display: flex;
-              div{
+              div {
                 margin-right: 10px;
               }
             }
           }
-          &-box2{
+          &-box2 {
             z-index: 10;
             width: 284px;
             height: 120px;
-            border: 2px solid #468FC3;
+            border: 2px solid #468fc3;
             position: absolute;
             right: 60px;
             display: flex;
             flex-direction: column;
             padding: 15px 0 15px 15px;
-            &-title{
+            &-title {
               font-size: 16px;
               font-weight: bold;
-              color: #FFFFFF;
+              color: #ffffff;
               margin-bottom: 10px;
             }
-            &-info{
+            &-info {
               font-size: 14px;
               font-weight: 400;
-              color: #C0CBE4;
+              color: #c0cbe4;
               display: flex;
-              div{
+              div {
                 margin-right: 10px;
               }
             }