111111111

src/config/config.js

@@ -37,6 +37,8 @@ window.SERVICE_ID = {
   dashboardHourBaggageTrans: 200305, // 首页-每日小时行李量-中转
   AirlinesDateData: 2003011,//大屏航司
   AirlinesHourDateData: 2003012,//大屏航司小时
+  terminalDateData:2003013,//航站大屏
+  terminalHourDateData: 2003014,//航站大屏小时
 
   /***-----高级查询------***/
   baggageTypeId: 86, //高级查询-特殊行李类型下拉选项查询-id

src/router/routes/routes-file-temp.js

@@ -42,7 +42,7 @@ const singleairline = {
     meta: {
       title: '监控大屏',
     },
-    children: [           {
+    children: [{
       path: '/singleairline',
       name: 'Singleairline',
       hidden: true,
@@ -51,6 +51,15 @@ const singleairline = {
           '@/views/monitoringlarge/views/singleairline/singleairline'
         ),
       meta: { title: '单航司监控' },
+    },{
+      path: '/singleairport',
+      name: 'Singleairport',
+      hidden: true,
+      component: () =>
+        import(
+          '@/views/monitoringlarge/views/singleairport/singleairport'
+        ),
+      meta: { title: '单航司监控' },
     },]
   }]
 }

src/views/monitoringlarge/views/singleairline/singleairline.vue

@@ -390,7 +390,7 @@ export default {
           this.boxMap.series[0].data = []
           throw new Error(message || '失败')
         }
-        console.log(listValues)
+        // console.log(listValues)
         let top = []
         let boom = []
         for (var i=0;i<listValues.length-1;i++){

src/views/monitoringlarge/views/singleairport/singleairport.vue

@@ -0,0 +1,542 @@
+<template>
+  <div class="dashboard">
+    <div class="variable">
+      <StatisticsHeader
+        :title="titleTop"
+        :items="formItems"
+        :data="formData"
+        :eledata="eledata"
+        with-setting
+        :withSetting="false"
+        :withExport="false"
+        :action="0"
+        :set="set"
+        :asShow="true"
+        @getFormData="getFormData"
+      />
+    </div>
+    <!-- <div class="detail">
+      <div class="name">
+        <p>简称:</p>
+        <span>国航</span>
+      </div>
+      <div class="name">
+        <p>二字码:</p>
+        <span>ca</span>
+      </div>
+      <div class="name">
+        <p>三字码:</p>
+        <span>999</span>
+      </div>
+      <div class="name">
+        <p>行李跟踪系统建设情况:</p>
+        <span>已建</span>
+      </div>
+      <div class="name">
+        <p>数据接入途径:</p>
+        <span>航司直接接入</span>
+      </div>
+    </div> -->
+    <div class="cont">
+      <div class="card">
+          <div class="wrapper">
+            <div class="title">接入数据量</div>
+          </div>
+          <div class="content">
+            <BarCharts
+              id="inHour"
+              :option="inHourDataOption"
+            />
+          </div>
+        </div>
+        <div class="card">
+          <div class="wrapper">
+            <div class="title">航班量</div>
+          </div>
+          <div class="content">
+            <BarCharts
+              id="inHour1"
+              :option="outHourDataOption"
+            />
+          </div>
+        </div>
+        <div class="cards">
+          <div class="wrapper">
+            <div class="title">小时航班峰值</div>
+          </div>
+          <div class="content">
+            <BarChartsr
+              id="inHour2"
+              :option="outHourDataOptioneol"
+            />
+          </div>
+        </div>
+        <div class="card">
+          <div class="wrapper">
+            <div class="title">行李量</div>
+          </div>
+          <div class="content">
+            <BarCharts
+              id="inHour3"
+              :option="transHourDataOption"
+            />
+          </div>
+        </div>
+        <div class="card">
+          <div class="wrapper">
+            <div class="title">节点行李量</div>
+          </div>
+          <div class="content">
+            <BarCharts
+              id="inHour4"
+              :option="baggageCountItems"
+            />
+          </div>
+        </div>
+        <div class="cards">
+          <div class="wrapper">
+            <div class="title">小时行李峰值</div>
+          </div>
+          <div class="content">
+            <BarChartsr
+              id="inHour6"
+              :option="outHourDataOptioneols"
+            />
+          </div>
+        </div>
+    </div>
+  </div>
+</template>
+
+<script>
+import StatisticsHeader from "../../components/echart/statisticsHeader.vue";
+import BarCharts from '../../components/echart/commonChartsBar.vue'
+import BarChartsr from '../../components/echart/commonChartsLine.vue'
+import { Query } from '@/api/webApi'
+const barOption = {
+  tooltip: {
+    trigger: 'axis',
+    axisPointer: {
+      type: 'shadow',
+    },
+  },
+  grid: {
+    left: '3%',
+    right: '4%',
+    bottom: '10%',
+    containLabel: true,
+  },
+  legend: {
+    textStyle: {
+      color: '#ffff',
+    },
+  },
+  xAxis: {
+    type: 'category',
+    data: [],
+    axisLabel: {
+      color: '#8897BC',
+    },
+    axisTick: {
+      alignWithLabel: true,
+    },
+  },
+  yAxis: {
+    type: 'value',
+    axisLabel: {
+      color: '#8897BC',
+    },
+  },
+  color:['blue','yellow'],
+  series: [
+    {
+    name: '',
+    type: 'bar',
+    z:"-1",
+    barGap: '-100%',
+    barWidth: 20,
+    data: []
+  },
+  {
+    name: '',
+    type: 'bar',
+    barWidth: 20,
+    data: []
+  }
+]
+}
+const barOptions = {
+        title: {
+          text: ''
+        },
+        legend: {
+          data: ['Punch Card'],
+          left: 'right'
+        },
+        tooltip: {
+          position: 'top',
+          formatter: function (params) {
+            return (
+              params.value[2] +
+              ' commits in ' +
+              hours[params.value[0]] +
+              ' of ' +
+              days[params.value[1]]
+            );
+          }
+        },
+        grid: {
+          left: 2,
+          bottom: 10,
+          right: 10,
+          containLabel: true
+        },
+        xAxis: {
+          axisLabel: {
+            color: '#8897BC',
+          },
+          type: 'category',
+          data: [],
+          boundaryGap: false,
+          splitLine: {
+            show: true
+          },
+          axisLine: {
+            show: false
+          }
+        },
+        yAxis: {
+          type: 'category',
+          axisLabel: {
+            color: '#8897BC',
+          },
+          data: [],
+          axisLine: {
+            show: false
+          }
+        },
+        series: [
+          {
+            name: 'Punch Card',
+            type: 'scatter',
+            symbolSize: function (val) {
+              return val[2] * 4;
+            },
+            data: [],
+            animationDelay: function (idx) {
+              return idx * 10;
+            }
+          }
+        ]
+      }
+export default {
+  name: "Singleairline",
+  data () {
+    return {
+      titleTop: "单机场概览",
+      set: '',
+      formItems: [
+        {
+          prop: "airport",
+          inputType: "select",
+          placeholder: "",
+          requiredWarning: "",
+          clearable: true,
+          options: [
+            {
+              value: 0,
+              label: "国内出港",
+            },
+            {
+              value: 1,
+              label: "国内进港",
+            },
+            {
+              value: 2,
+              label: "国际出港",
+            },
+            {
+              value: 3,
+              label: "国际进港",
+            },
+          ],
+        },
+        {
+          prop: "dateTime",
+          inputType: "datePicker",
+          clearable: true,
+          width: "240px",
+          options: [],
+        },
+      ],
+      formData: {
+        aircompany: "",
+        dateTime: "",
+      },
+      eledata: null,
+      inHourDataOption: this._.cloneDeep(barOption),
+      outHourDataOption:this._.cloneDeep(barOption),
+      transHourDataOption: this._.cloneDeep(barOption),
+      baggageCountItems: this._.cloneDeep(barOption),
+      outHourDataOptioneol: this._.cloneDeep(barOptions),
+      outHourDataOptioneols: this._.cloneDeep(barOptions),
+    }
+  },
+  components: {
+    StatisticsHeader,
+    BarCharts,
+    BarChartsr
+  },
+  mounted() {
+    this.getAiportList()
+  },
+  methods: {
+   // 航站列表
+    async getAiportList() {
+      this.loading = true
+      try {
+        let params = {
+          serviceId: SERVICE_ID.AirportIds,
+          dataContent: [],
+          pageSize: 9999,
+        }
+        if (this.queryId) {
+          params = {
+            ...params,
+            authId: this.authId,
+            serviceId: this.queryId,
+          }
+        }
+        const {
+          code,
+          returnData: { listValues },
+          message,
+        } = await Query(params)
+        if (String(code) !== '0') {
+          throw new Error(message || '失败')
+        }
+        this.aiportOptions = listValues.map(aiport => ({
+          label: aiport.code3,
+          value: aiport.code3,
+        }))
+        this.currentAirport = 'CAN'
+      } catch (error) {
+        console.error(error)
+      }
+      this.loading = false
+      this.formItems[0].options = this.aiportOptions
+    },
+    //航司大屏接口
+    async getMap(data) {
+      try {
+        const {
+          code,
+          returnData: listValues,
+          message,
+        } = await Query({
+          serviceId: SERVICE_ID.terminalDateData,
+          dataContent: [
+            {
+              airport: data.airport,
+              fd1: data.dateTime[0],
+              fd2: data.dateTime[1],
+            },
+          ],
+          pageSize: 9999,
+        })
+        if (String(code) !== '0') {
+          this.boxMap.series[0].data = []
+          throw new Error(message || '失败')
+        }
+        this.inHourDataOption.series[0].data = [listValues[0].total_source_yes,0,listValues[0].bsm_source_yes,listValues[0].bpm_source_yes],
+        this.inHourDataOption.series[1].data = [0,0,0,0],
+        this.inHourDataOption.series[0].name = '符合规范数据'
+        this.inHourDataOption.series[1].name = '不符合规范数据'
+        this.inHourDataOption.xAxis.data = ['总数据条数','航班数据','bsm数据','bpm数据'],
+        this.outHourDataOption.series[0].name = '有行李航班量'
+        this.outHourDataOption.series[1].name = '无行李航班量'
+        this.outHourDataOption.series[0].data = [listValues[0].fly_total_has_dep,listValues[0].fly_has_arr,listValues[0].fly_nor_has_dep,listValues[0].fly_dly_has_dep,listValues[0].fly_can_has_dep],
+        this.outHourDataOption.series[1].data = [listValues[0].fly_total_havent_dep,listValues[0].fly_havent_arr,listValues[0].fly_nor_havent_dep,listValues[0].fly_dly_havent_dep,listValues[0].fly_can_havent_dep],
+        this.outHourDataOption.xAxis.data = ['离港航班总量','进港航班总量','离港正常航班量','离港延误航班量','离港取消航班量']
+        this.transHourDataOption.series[0].data = [listValues[0].bag_total_dom,listValues[0].bag_dep_dom,listValues[0].bag_arr_dom,listValues[0].bag_transfer_dom,listValues[0].bag_abnormal_dom,listValues[0].bag_special_dom],
+        this.transHourDataOption.xAxis.data = ['总量','离港总量','进港总量','中转总量','不正常行李量','特殊行李量']
+        this.transHourDataOption.series[0].name = '国内'
+        this.transHourDataOption.series[1].data = [0,0,0,0],
+        this.transHourDataOption.series[1].name = '国际',
+        this.baggageCountItems.xAxis.data = ['值机','安检','分拣','装车','装机','中转','到达'],
+        this.baggageCountItems.series[0].data = [listValues[0].checkin,listValues[0].security,listValues[0].sort,listValues[0].loadcar,listValues[0].loadplane,listValues[0].transfer,listValues[0].arrive]
+      } catch (error) {
+        console.error(error)
+      }
+    },
+    async getMaps(data) {
+      try {
+        const {
+          code,
+          returnData: listValues,
+          message,
+        } = await Query({
+          serviceId: SERVICE_ID.terminalHourDateData,
+          dataContent: [
+            {
+              airport: data.airport,
+              fd1: data.dateTime[0],
+              fd2: data.dateTime[1],
+            },
+          ],
+          pageSize: 9999,
+        })
+        if (String(code) !== '0') {
+          this.boxMap.series[0].data = []
+          throw new Error(message || '失败')
+        }
+        // console.log(listValues)
+        let top = []
+        let boom = []
+        for (var i=0;i<listValues.length-1;i++){
+          if (i<5) {
+            top.push(listValues[i])
+          }else {
+            boom.push(listValues[i])
+          }
+        }
+        let arr = []
+        let ars = []
+        this.outHourDataOptioneol.yAxis.data = []
+        top.forEach(element => {
+          this.outHourDataOptioneol.yAxis.data.push(element.project)
+          arr.push(Object.keys(element))
+          for (var i=0;i<Object.keys(element).length-2;i++){
+            ars.push([Object.keys(element)[i+2],element.project,Object.values(element)[i+2]])
+          }
+        });
+        arr.forEach(element => {
+          element = element.splice(0,2)
+        });
+        this.outHourDataOptioneol.xAxis.data = arr[0]
+        this.outHourDataOptioneol.series[0].data = ars
+        let arrs = []
+        let arss = []
+        this.outHourDataOptioneols.yAxis.data = []
+        boom.forEach(element => {
+          this.outHourDataOptioneols.yAxis.data.push(element.project)
+          arrs.push(Object.keys(element))
+          for (var i=0;i<Object.keys(element).length-2;i++){
+            arss.push([Object.keys(element)[i+2],element.project,Object.values(element)[i+2]])
+          }
+        });
+        arrs.forEach(element => {
+          element = element.splice(0,2)
+        });
+        this.outHourDataOptioneols.xAxis.data = arrs[0]
+        this.outHourDataOptioneols.series[0].data = arss
+      } catch (error) {
+        console.error(error)
+      }
+    },
+    getFormData (data) {
+      this.getMap(data)
+      this.getMaps(data)
+    }
+  }
+};
+</script>
+
+<style lang="scss" scoped>
+.dashboard {
+  padding: 30px 30px 0 25px;
+  background-color: #081821;
+  height: calc(100vh - 48px - 32px);
+  >.variable {
+    width: 100%;
+    height: 52px;
+  }
+  >.detail{
+    width: 100%;
+    height: 52px;
+    background: #fff;
+    display: flex;
+    align-items: center;
+    >.name{
+      height: 100%;
+      display: flex;
+      align-items: center;
+      margin-right: 24px;
+      >p{
+        font-size: 16px;
+        font-weight: 800;
+        margin: 0;
+      }
+      >span{
+        font-size: 16px;
+        margin-left: 3px;
+      }
+    }
+  }
+  >.cont{
+    width: 100%;
+    height: 94%;
+    display: flex;
+    flex-wrap: wrap;
+    justify-content:space-between;
+    >.card{
+      width: 28%;
+      height: 43%;
+      padding: 25px;
+      background: linear-gradient(270deg, rgba(118, 142, 184, 0.25), transparent);
+      border: 1px solid #3a4456;
+      position: relative;
+      &::before {
+        content: '';
+        display: block;
+        width: 0;
+        height: 0;
+        position: absolute;
+        top: 0;
+        left: 0;
+        border: 12px solid #6d7d98;
+        border-right-color: transparent;
+        border-bottom-color: transparent;
+    }
+      >.wrapper{
+        >.title{
+          color: #fff;
+          line-height: 16px;
+          font-size: 16px;
+          font-family: Helvetica, Microsoft YaHei;
+          font-weight: bold;
+        }
+      }
+    }
+    >.cards{
+      width: 40%;
+      height: 43%;
+      padding: 25px;
+      background: linear-gradient(270deg, rgba(118, 142, 184, 0.25), transparent);
+      border: 1px solid #3a4456;
+      position: relative;
+      &::before {
+        content: '';
+        display: block;
+        width: 0;
+        height: 0;
+        position: absolute;
+        top: 0;
+        left: 0;
+        border: 12px solid #6d7d98;
+        border-right-color: transparent;
+        border-bottom-color: transparent;
+    }
+      >.wrapper{
+        >.title{
+          color: #fff;
+          line-height: 16px;
+          font-size: 16px;
+          font-family: Helvetica, Microsoft YaHei;
+          font-weight: bold;
+        }
+      }
+    }
+  }
+}
+</style>