大屏地图

src/views/dashboards/components/echart/commonChartsLine.vue

@@ -98,10 +98,10 @@ export default {
 
 <style lang="scss" scoped>
 .ChartsLine {
-  height: 80%;
+  height: 100%;
   width: 100%;
   position: absolute;
   left: 0;
-  top: 45px;
+  top: 0;
 }
 </style>

src/views/dashboards/index.vue

@@ -44,6 +44,20 @@
       <div class="dashboard_bottom_center">
         <dv-border-box-7 :color="colors" v-loading="mapOverviewLoading" element-loading-text="拼命加载中" class="dashboard_bottom_center_box1">
           <div class="box_title">机场行李跟踪系统建设总贤</div>
+          <div class="mapOverview">
+            <div class="mapOverview_list">
+              <span class="mapOverview_list_icon icon1"></span>
+              <span class="mapOverview_list_txt">已建 {{mapOverviewItem.build}}家</span>
+            </div>
+            <div class="mapOverview_list">
+              <span class="mapOverview_list_icon icon2"></span>
+              <span class="mapOverview_list_txt">在建 {{mapOverviewItem.building}}家</span>
+            </div>
+            <div class="mapOverview_list">
+              <span class="mapOverview_list_icon icon3"></span>
+              <span class="mapOverview_list_txt">未建 {{mapOverviewItem.not_build}}家</span>
+            </div>
+          </div>
           <div class="box_content">
             <map-charts id="mapCharts" :option="mapOverview" />
           </div>
@@ -62,8 +76,11 @@
             <pie-charts id="stogCharts" :option="airportStog" />
           </div>
         </dv-border-box-7>
-        <dv-border-box-7 :color="colors" class="dashboard_bottom_left_box">
+        <dv-border-box-7 :color="colors" v-loading="overallAccessLoading" element-loading-text="拼命加载中" class="dashboard_bottom_left_box">
           <div class="box_title">总体接入数据量</div>
+          <div class="box_content">
+            <pie-charts id="stogChartss" :option="overallAccess" />
+          </div>
         </dv-border-box-7>
         <dv-border-box-7 :color="colors" v-loading="luggageStackLoading" element-loading-text="拼命加载中" class="dashboard_bottom_left_box">
           <div class="box_title">行李量</div>
@@ -117,10 +134,17 @@ export default {
       scatterPlotLoading: false,
       airportStog: _.cloneDeep(pieOption),
       airportStogLoading: false,
+      overallAccess: _.cloneDeep(pieOption),
+      overallAccessLoading: false,
       luggageStack: _.cloneDeep(LuggageOption),
       luggageStackLoading: false,
       fligtPlot: _.cloneDeep(scatterOption),
       fligtPlotLoading: false,
+      mapOverviewItem: {
+        build: 0,
+        building: 0,
+        not_build: 0
+      }
     }
   },
   methods: {
@@ -351,7 +375,55 @@ export default {
     formatNumberData (targetNum) {
       return _.floor((Number(targetNum) / 10000), 4)
     },
-    setMapOverview () { },
+    //机场行李跟踪系统建设总览
+    async setMapOverview () {
+      this.mapOverviewLoading = true
+      try {
+        const {
+          code,
+          returnData
+        } = await Query({
+          serviceId: SERVICE_ID.airportTotalId,
+          dataContent: { fd1: this.dateTimes[0], fd2: this.dateTimes[1], area: this.getChecksValue('checkAlls') || '全国' },
+          event: '0',
+        })
+        if (String(code) !== '0') {
+          throw new Error('获取数据失败')
+        }
+        const ndatas = [...returnData]
+        if (!ndatas.length) return
+        ndatas.map(item => {
+          item.name = item.province
+          item.value = item.out_bag
+        })
+        this.mapOverview.series[0].data = ndatas
+      } catch (error) {
+        console.log(error)
+      }
+      this.mapOverviewLoading = false
+    },
+    //机场行李跟踪系统建设总览-建立情况
+    async setMapOverviewTotals () {
+      try {
+        const {
+          code,
+          returnData
+        } = await Query({
+          serviceId: SERVICE_ID.pelestablishId,
+          dataContent: {},
+          event: '0',
+        })
+        if (String(code) !== '0') {
+          throw new Error('获取数据失败')
+        }
+        const ndatas = [...returnData]
+        if (!ndatas.length) return
+        this.mapOverviewItem = ndatas[0]
+        return
+      } catch (error) {
+        console.log(error)
+      }
+    },
     formatPlotData (times, arrs) {
       const ndatas = []
       for (let i = 0; i < times.length; i++) {
@@ -584,15 +656,71 @@ export default {
       }
       this.fligtPlotLoading = false
     },
-    setAirportStog () {
-      this.airportStog.series[0].data = [{ name: '无行李航班量', value: 3000 }, { name: '有行李航班量', value: 1581 }]
-      this.airportStog.series[0].color = ['#660066', '#993399']
-      this.airportStog.series[1].data = [{ name: '正常航班量', value: 2000 }, { name: '延误航班量', value: 2000 }, { name: '取消航班量', value: 581 }]
-      this.airportStog.series[1].color = ['#6666ff', '#3333ff', '#0000ff']
-      this.airportStog.series[2].data = [{ name: '国内航班总量', value: 3000 }, { name: '国际航班总量', value: 1581 }]
-      this.airportStog.series[2].color = ['#00cc33', '#33ff66']
-      this.airportStog.series[3].data = [{ name: '航班总量', value: 4581 }]
-      this.airportStog.series[3].color = ['#041741']
+    //航班量
+    async setAirportStog () {
+      this.airportStogLoading = true
+      try {
+        const {
+          code,
+          returnData
+        } = await Query({
+          serviceId: SERVICE_ID.pelFlightId,
+          dataContent: { fd1: this.dateTimes[0], fd2: this.dateTimes[1], area: this.getChecksValue('checkAlls') || '全国' },
+          event: '0',
+        })
+        if (String(code) !== '0') {
+          throw new Error('获取数据失败')
+        }
+        const ndatas = [...returnData]
+        if (!ndatas.length) return
+        const { canfly, dlyfly, domfly, havebagfly, intfly, nohavebagfly, norfly, totalfly } = ndatas[0]
+        this.airportStog.legend.data = ['国内航班总量', '国际航班总量', '正常航班量', '延误航班量', '取消航班量', '有行李航班量', '无行李航班量']
+        this.airportStog.series[0].data = [{ name: '无行李航班量', value: nohavebagfly }, { name: '有行李航班量', value: havebagfly }]
+        this.airportStog.series[0].color = ['#660066', '#993399']
+        this.airportStog.series[1].data = [{ name: '正常航班量', value: norfly }, { name: '延误航班量', value: dlyfly }, { name: '取消航班量', value: canfly }]
+        this.airportStog.series[1].color = ['#6666ff', '#3333ff', '#0000ff']
+        this.airportStog.series[2].data = [{ name: '国内航班总量', value: domfly }, { name: '国际航班总量', value: intfly }]
+        this.airportStog.series[2].color = ['#00cc33', '#33ff66']
+        this.airportStog.series[3].data = [{ name: '航班总量', value: totalfly }]
+        this.airportStog.series[3].color = ['#fff']
+
+      } catch (error) {
+        console.log(error)
+      }
+      this.airportStogLoading = false
+    },
+    //总体接入数据量
+    async setoverallAccess () {
+      this.overallAccessLoading = true
+      try {
+        const {
+          code,
+          returnData
+        } = await Query({
+          serviceId: SERVICE_ID.pelTotalId,
+          dataContent: { fd1: this.dateTimes[0], fd2: this.dateTimes[1], area: this.getChecksValue('checkAlls') || '全国' },
+          event: '0',
+        })
+        if (String(code) !== '0') {
+          throw new Error('获取数据失败')
+        }
+        const ndatas = [...returnData]
+        if (!ndatas.length) return
+        const { bpm_messages, bsm_messages, flight_messages, total_messages, exception_messages, non_standard_messages_total, standard_messages_total } = ndatas[0]
+        this.overallAccess.legend.data = ['BPM', 'BSM', '航班数据', '异常行李数据', '不符合规范数据', '符合规范数据']
+        this.overallAccess.series[0].data = [{ name: '不符合规范数据', value: non_standard_messages_total }, { name: '符合规范数据', value: standard_messages_total }]
+        this.overallAccess.series[0].color = ['#660066', '#993399']
+        this.overallAccess.series[1].data = [{ name: 'BPM', value: bpm_messages }, { name: 'BSM', value: bsm_messages }, { name: '航班数据', value: flight_messages }, { name: '异常行李数据', value: exception_messages }]
+        this.overallAccess.series[1].color = ['#0000ff', '#6666ff', '#3333ff', '#000066']
+        this.overallAccess.series[2].data = [{ name: '', value: 0 }]
+        this.overallAccess.series[2].color = ['#fff']
+        this.overallAccess.series[3].data = [{ name: '数据总量', value: total_messages }]
+        this.overallAccess.series[3].color = ['#fff']
+
+      } catch (error) {
+        console.log(error)
+      }
+      this.overallAccessLoading = false
     },
     pageInit () {
       this.setAirportAccess()
@@ -602,6 +730,9 @@ export default {
       this.setFligtPlot()
       this.setScatterPlot()
       this.setAirportStog()
+      this.setoverallAccess()
+      this.setMapOverview()
+      this.setMapOverviewTotals()
     }
   },
   mounted () {
@@ -621,6 +752,31 @@ $bg: #074fb8;
   height: calc(100vh - 80px);
   width: $w100;
   background-color: #fff;
+  .mapOverview {
+    position: absolute;
+    left: 7%;
+    top: 10%;
+    font-size: 14px;
+    color: #696969;
+    &_list {
+      margin-top: 5px;
+      &_icon {
+        display: inline-block;
+        width: 11px;
+        height: 11px;
+        margin-right: 6px;
+      }
+      .icon1 {
+        background-color: #4fc267;
+      }
+      .icon2 {
+        background-color: #ffcc80;
+      }
+      .icon3 {
+        background-color: #656565;
+      }
+    }
+  }
   .box_title {
     background-color: $bg;
     color: #fff;

src/views/dashboards/utils/index.js

@@ -148,14 +148,15 @@ const pieOption = {
   },
   legend: {
     orient: 'vertical',
+    top: '20%'
   },
   series: [
     {
       right: '0%',
       name: '',
       type: 'pie',
-      radius: ["85%", "100%"],
-      center: ["70%", "50%"],
+      radius: ["70%", "90%"],
+      center: ["60%", "50%"],
       hoverAnimation: false,
       label: {
         show: false,
@@ -168,8 +169,8 @@ const pieOption = {
       name: "",
       type: "pie",
       hoverAnimation: false,
-      radius: ["65%", "85%"],
-      center: ["70%", "50%"],
+      radius: ["60%", "80%"],
+      center: ["60%", "50%"],
       avoidLabelOverlap: false,
       label: {
         show: false,
@@ -184,8 +185,8 @@ const pieOption = {
       name: "",
       type: "pie",
       // silent:true,
-      center: ["70%", "50%"],
-      radius: ["45%", "65%"],
+      center: ["60%", "50%"],
+      radius: ["65%", "50%"],
       avoidLabelOverlap: false,
       label: {
         show: false,
@@ -201,14 +202,14 @@ const pieOption = {
       name: "总量",
       type: "pie",
       // silent:true,
-      center: ["70%", "50%"],
+      center: ["60%", "50%"],
       radius: ["0%", "40%"],
       avoidLabelOverlap: false,
       label: {
         show: false,
       },
       label: {
-        formatter: `{b}\n{c}`,
+        formatter: `{c}\n{b}`,
         show: true,
         position: 'center'
       },
@@ -221,44 +222,26 @@ const pieOption = {
   ]
 }
 
-function randomData () {
-  return Math.round(Math.random() * 1000)
-}
+
 const mapOption = {
   tooltip: {
     trigger: 'item',
-    // formatter: function (item) {
-    //   if (item.data && item.data.index) {
-    //     const html = `<div>
-    //     <div>机场三字码 ${item.data.index}</div>
-    //     <div>${item.data.name} ${item.data.value}</div>
-    //   </div>`
-    //     return html
-    //   } else {
-    //     return `<div style="width:400px">
-    //       <div>${item.data.airportname}</div>
-    //       <div style='display:flex'><div style='margin-right:20px'>机场三字码:${item.data.airport}</div><div>机场简称:${item.data.airportname}</div></div>
-    //       <div style='display:flex'><div style='margin-right:20px'>国内总量:${item.data.dombag}</div><div>国际总量:${item.data.intbag}</div></div>
-    //       <div style='display:flex'><div style='margin-right:50px'>离港总量:${item.data.outbag}</div><div style='margin-right:50px'>进港总量:${item.data.inbag}</div><div>中转总量:${item.data.transfer}</div></div>
-    //       <div style='display:flex'><div style='margin-right:50px'>正常行李量:${item.data.normal}</div><div style='margin-right:50px'>特殊行李量:${item.data.special}</div><div>异常行李量:${item.data.exception}</div></div>     
-    //   </div>`
-    //   }
-    // },
-  },
-  legend: {
-    orient: 'vertical',
-    left: '6%',
-    top: '8%',
-    itemWidth: 10,
-    itemHeight: 10,
-    textStyle: {
-      color: '#888'
+    formatter: function (item) {
+      if (item.data) {
+        const { airportname, airport, dom_bag, int_bag, out_bag, in_bag, transfer_bag, normal_bag, special_bag, notnormal_bag } = item.data
+        return `<div style="width:400px">
+          <div style="font-size:18px;font-weight:600;">${airportname}</div>
+          <div style='display:flex;margin-top:10px;'><div style='margin-right:20px'>机场三字码:${airport}</div><div>机场简称:${airportname}</div></div>
+          <div style='display:flex;margin-top:10px;'><div style='margin-right:20px'>国内总量:${dom_bag}</div><div>国际总量:${int_bag}</div></div>
+          <div style='display:flex;margin-top:10px;'><div style='margin-right:50px'>离港总量:${out_bag}</div><div style='margin-right:50px'>进港总量:${in_bag}</div><div>中转总量:${transfer_bag}</div></div>
+          <div style='display:flex;margin-top:10px;'><div style='margin-right:50px'>正常行李量:${normal_bag}</div><div style='margin-right:50px'>特殊行李量:${special_bag}</div><div>异常行李量:${notnormal_bag}</div></div>     
+      </div>`
+      }
     },
-    data: ['已建', '在建', '未建']
   },
   visualMap: {
     min: 0,
-    max: 2500,
+    max: 25000,
     left: 'left',
     top: 'bottom',
     text: ['高', '低'],
@@ -280,101 +263,8 @@ const mapOption = {
           show: true
         }
       },
-      data: [
-        { name: '北京', value: randomData() },
-        { name: '天津', value: randomData() },
-        { name: '上海', value: randomData() },
-        { name: '重庆', value: randomData() },
-        { name: '河北', value: randomData() },
-        { name: '河南', value: randomData() },
-        { name: '云南', value: randomData() },
-        { name: '辽宁', value: randomData() },
-        { name: '黑龙江', value: randomData() },
-        { name: '湖南', value: randomData() },
-        { name: '安徽', value: randomData() },
-        { name: '山东', value: randomData() },
-        { name: '新疆', value: randomData() },
-        { name: '江苏', value: randomData() },
-        { name: '浙江', value: randomData() },
-        { name: '江西', value: randomData() },
-        { name: '湖北', value: randomData() },
-        { name: '广西', value: randomData() },
-        { name: '甘肃', value: randomData() },
-        { name: '山西', value: randomData() },
-        { name: '内蒙古', value: randomData() },
-        { name: '陕西', value: randomData() },
-        { name: '吉林', value: randomData() },
-        { name: '福建', value: randomData() },
-        { name: '贵州', value: randomData() },
-        { name: '广东', value: randomData() },
-        { name: '青海', value: randomData() },
-        { name: '西藏', value: randomData() },
-        { name: '四川', value: randomData() },
-        { name: '宁夏', value: randomData() },
-        { name: '海南', value: randomData() },
-        { name: '台湾', value: randomData() },
-        { name: '香港', value: randomData() },
-        { name: '澳门', value: randomData() }
-      ]
-    },
-    {
-      name: '在建',
-      type: 'map',
-      mapType: 'china',
-      color: '#ffcc80',
-      label: {
-        normal: {
-          show: true
-        },
-        emphasis: {
-          show: true
-        }
-      },
-      data: [
-        { name: '北京', value: randomData() },
-        { name: '天津', value: randomData() },
-        { name: '上海', value: randomData() },
-        { name: '重庆', value: randomData() },
-        { name: '河北', value: randomData() },
-        { name: '安徽', value: randomData() },
-        { name: '新疆', value: randomData() },
-        { name: '浙江', value: randomData() },
-        { name: '江西', value: randomData() },
-        { name: '山西', value: randomData() },
-        { name: '内蒙古', value: randomData() },
-        { name: '吉林', value: randomData() },
-        { name: '福建', value: randomData() },
-        { name: '广东', value: randomData() },
-        { name: '西藏', value: randomData() },
-        { name: '四川', value: randomData() },
-        { name: '宁夏', value: randomData() },
-        { name: '香港', value: randomData() },
-        { name: '澳门', value: randomData() }
-      ]
+      data: []
     },
-    {
-      name: '未建',
-      type: 'map',
-      mapType: 'china',
-      color: '#666',
-      label: {
-        normal: {
-          show: true
-        },
-        emphasis: {
-          show: true
-        }
-      },
-      data: [
-        { name: '北京', value: randomData() },
-        { name: '天津', value: randomData() },
-        { name: '上海', value: randomData() },
-        { name: '广东', value: randomData() },
-        { name: '台湾', value: randomData() },
-        { name: '香港', value: randomData() },
-        { name: '澳门', value: randomData() }
-      ]
-    }
   ]
 };