单航司单机场

src/views/monitoringlarge/components/echart/commonChartsBar.js

@@ -0,0 +1,84 @@
+/*
+ * @Author: zk
+ * @Date: 2021-09-16 16:20:11
+ * @LastEditTime: 2021-10-15 12:00:29
+ * @LastEditors: Please set LastEditors
+ * @Description: 柱状图初始数据
+ * @FilePath: \vue-admin-template-master\src\layout\mixin\commonChartsLine.js
+ */
+export default {
+  data () {
+    return {
+      options: {
+        color: ['#7569BE'],
+        tooltip: {
+            trigger:"axis",
+        },
+        grid: {
+          // top: "10%",
+          // left: "10%",
+          // right: "10%",
+          bottom: "10%", //也可设置left和right设置距离来控制图表的大小
+        },
+        xAxis: {
+          type: 'category',
+          axisTick: {
+            show: false
+          },
+          axisLine: {
+            show: false,
+            lineStyle: {
+              color: '#698dc3'
+            }
+          },
+          splitLine: {
+            lineStyle: {
+              type: 'solid',
+              color: '#000'
+            }
+          },
+          axisLabel: {
+            color: '#ffff'
+          }
+        },
+        // color:['#ccc','red'],
+        yAxis: {
+          type: 'value',
+          axisTick: {
+            show: false
+          },
+          axisLine: {
+            show: false,
+            lineStyle: {
+              color: '#698dc3'
+            }
+          },
+          splitLine: {
+            lineStyle: {
+              type: 'solid',
+              color: '#DCDFE6'
+            }
+          },
+          axisLabel: {
+            color: '#ffff'
+          }
+        },
+        series: [
+          {
+            name: '',
+            type: 'bar',
+            z:"-1",
+            barGap: '-100%',
+            barWidth: 10,
+            data: []
+        },
+        {
+            name: '',
+            type: 'bar',
+            barWidth: 10,
+            data: []
+        }]
+      }
+    }
+  }
+}

src/views/monitoringlarge/components/echart/commonChartsBar.vue

@@ -0,0 +1,107 @@
+<!--
+ * @Author: zk
+ * @Date: 2021-09-16 16:24:53
+ * @LastEditTime: 2021-11-02 15:45:25
+ * @LastEditors: Please set LastEditors
+ * @Description: 柱状图
+ * @FilePath: \vue-admin-template-master\src\layout\components\Echarts\commonChartsBar.vue
+-->
+<template>
+  <div class="ChartsBar" :id="id"></div>
+</template>
+
+<script>
+// 柱状图初始数据
+import ChartsBar from './commonChartsBar'
+export default {
+  name: 'ChartsBar',
+  props: {
+    // 柱状图生成所需id
+    id: {
+      type: String,
+      default: ''
+    },
+    // 柱状图额外的数据
+    option: {
+      type: Object,
+      default: () => { }
+    }
+  },
+  mixins: [ChartsBar],
+  data () {
+    return {
+      myChart: null, //柱状图实例
+      desc: 300 // 防抖时间
+    }
+  },
+  mounted () {
+    // 生成图形
+    this.initEcharts()
+    // 监听页面缩放 防止dom重复渲染
+    window.addEventListener('resize', _.debounce(this.handle, this.desc))
+  },
+  beforeDestroy () {
+    // 销毁实例和移除监听
+    if (this.myChart) {
+      this.myChart.dispose()
+      window.removeEventListener('resize', this.handle)
+      this.myChart = null
+    }
+  },
+  watch: {
+    // 监听数据变化 重绘图形
+    option: {
+      handler (obj) {
+        // 初始数据和额外的配置数据耦合
+        const objData = _.cloneDeep(this.options)
+        _.merge(objData, obj)
+        // 生成柱状图
+        this.myChart.setOption(objData)
+      },
+      deep: true
+    }
+  },
+  methods: {
+    /**
+     * @description: 图形缩放
+     * @param {*}
+     * @return {*}
+     */
+    handle () {
+      if (this.myChart) {
+        this.myChart.resize()
+      }
+    },
+    /**
+     * @description: 初始化echarts
+     * @param {*}
+     * @return {*}
+     */
+    initEcharts () {
+      // 初始数据和额外的配置数据耦合
+      const objData = _.cloneDeep(this.options)
+      _.merge(objData, this.option)
+      // dom
+      const chartDom = document.getElementById(this.id)
+      // 初始化
+      this.myChart = this.$echarts.init(chartDom)
+      // 生成柱状图
+      this.myChart.setOption(objData)
+      // 事件
+      this.myChart.on('click', params => {
+        this.$emit('getChartData', params)
+      })
+    }
+  }
+}
+</script>
+
+<style lang="scss" scoped>
+.ChartsBar {
+  height: 100%;
+  width: 100%;
+  position: absolute;
+  left: 0;
+  top: 0;
+}
+</style>

src/views/monitoringlarge/components/echart/commonChartsLine.js

@@ -0,0 +1,63 @@
+/*
+ * @Author: zk
+ * @Date: 2021-09-16 16:20:11
+ * @LastEditTime: 2021-10-18 09:14:26
+ * @LastEditors: Please set LastEditors
+ * @Description: 折线图初始数据
+ * @FilePath: \vue-admin-template-master\src\layout\mixin\commonChartsLine.js
+ */
+export default {
+  data () {
+    return {
+      options: {
+        title: {
+          text: ''
+        },
+        legend: {
+          data: ['Punch Card'],
+          left: 'right'
+        },
+        tooltip: {
+          position: 'top',
+        },
+        grid: {
+          left: 2,
+          bottom: 10,
+          right: 10,
+          containLabel: true
+        },
+        xAxis: {
+          type: 'category',
+          data: [],
+          boundaryGap: false,
+          splitLine: {
+            show: true
+          },
+          axisLine: {
+            show: false
+          }
+        },
+        yAxis: {
+          type: 'category',
+          data: [],
+          axisLine: {
+            show: false
+          }
+        },
+        series: [
+          {
+            name: 'Punch Card',
+            type: 'scatter',
+            symbolSize: function (val) {
+              return val[2] * 2;
+            },
+            data: [],
+            animationDelay: function (idx) {
+              return idx * 5;
+            }
+          }
+        ]
+      }
+    }
+  }
+}

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

@@ -0,0 +1,107 @@
+<!--
+ * @Author: zk
+ * @Date: 2021-09-16 16:24:53
+ * @LastEditTime: 2021-11-02 15:45:53
+ * @LastEditors: Please set LastEditors
+ * @Description: 折线图
+ * @FilePath: \vue-admin-template-master\src\layout\components\Echarts\commonChartsLine.vue
+-->
+<template>
+  <div class="ChartsLine" :id="id"></div>
+</template>
+
+<script>
+// 折线图初始数据
+import ChartsLine from './commonChartsLine'
+export default {
+  name: 'ChartsLine',
+  props: {
+    // 折线图生成所需id
+    id: {
+      type: String,
+      default: ''
+    },
+    // 折线图额外的数据
+    option: {
+      type: Object,
+      default: () => { }
+    }
+  },
+  mixins: [ChartsLine],
+  data () {
+    return {
+      myChart: null, //折线图实例
+      desc: 300 // 防抖时间
+    }
+  },
+  mounted () {
+    // 生成图形
+    this.initEcharts()
+    // 监听页面缩放 防止dom重复渲染
+    window.addEventListener('resize', _.debounce(this.handle, this.desc))
+  },
+  beforeDestroy () {
+    // 销毁实例和移除监听
+    if (this.myChart) {
+      this.myChart.dispose()
+      window.removeEventListener('resize', this.handle)
+      this.myChart = null
+    }
+  },
+  watch: {
+    // 监听数据变化 重绘图形
+    option: {
+      handler (obj) {
+        // 初始数据和额外的配置数据耦合
+        const objData = _.cloneDeep(this.options)
+        _.merge(objData, obj)
+        // 生成柱状图
+        this.myChart.setOption(objData)
+      },
+      deep: true
+    }
+  },
+  methods: {
+    /**
+     * @description: 图形缩放
+     * @param {*}
+     * @return {*}
+     */
+    handle () {
+      if (this.myChart) {
+        this.myChart.resize()
+      }
+    },
+    /**
+     * @description: 初始化echarts
+     * @param {*}
+     * @return {*}
+     */
+    initEcharts () {
+      // 初始数据和额外的配置数据耦合
+      const objData = _.cloneDeep(this.options)
+      _.merge(objData, this.option)
+      // dom
+      const chartDom = document.getElementById(this.id)
+      // 初始化
+      this.myChart = this.$echarts.init(chartDom)
+      // 生成柱状图
+      this.myChart.setOption(objData)
+      // 事件
+      this.myChart.on('click', params => {
+        this.$emit('getChartData', params)
+      })
+    }
+  }
+}
+</script>
+
+<style lang="scss" scoped>
+.ChartsLine {
+  height: 100%;
+  width: 100%;
+  position: absolute;
+  left: 0;
+  top: 0;
+}
+</style>

src/views/monitoringlarge/components/echart/statisticsHeader.vue

@@ -0,0 +1,626 @@
+<template>
+  <div class="flight-statistics-header">
+    <template v-if="title">
+      <div class="title">{{ title }}</div>
+      <div class="status" v-if="asShow">
+        <div :class="picShow ? 'st_pic' : 'st_pics'" @click="picup"></div>
+        <div :class="!picShow ? 'st_tab' : 'st_tabs'" @click="picups"></div>
+      </div>
+    </template>
+    <el-form ref="form" class="form" :model="formData">
+      <el-form-item v-for="item in formItems" :key="item.prop" :prop="item.prop" :label="item.label" :style="{
+          width: item.width || '120px',
+        }">
+        <template v-if="item.inputType === 'input'">
+          <el-input v-model="formData[item.prop]" :size="item.size || 'small'" :placeholder="item.placeholder || '请输入'" :clearable="item.clearable" />
+        </template>
+        <template v-if="item.inputType === 'select'">
+          <el-select v-model="formData[item.prop]" :filterable="item.filterable" :default-first-option="item.filterable" :size="item.size || 'small'" :placeholder="item.placeholder || '请选择'" :multiple="item.multiple" :collapse-tags="item.multiple" :clearable="item.clearable" :disabled="item.disabled" @change="
+              (value) => {
+                item.changeHandler && call(item.changeHandler, value);
+              }
+            ">
+            <el-option v-for="option in item.options" :key="option.value" :value="option.value" :label="option.label" />
+          </el-select>
+        </template>
+        <template v-if="item.inputType === 'datePicker'">
+          <el-date-picker @change="changes()" v-model="formData[item.prop]" :size="item.size || 'small'" type="daterange" value-format="yyyy-MM-dd"  range-separator="至" start-placeholder="开始日期" end-placeholder="结束日期" />
+        </template>
+        <template v-if="item.inputType === 'datetimerange'">
+          <el-date-picker v-model="formData[item.prop]" type="datetimerange" range-separator="至" value-format="YYYY-MM-DD HH:mm:ss" start-placeholder="开始日期" end-placeholder="结束日期">
+          </el-date-picker>
+        </template>
+        <template v-if="item.inputType === 'erdatime'">
+          <template v-if="item.haveDisabled">
+            <el-date-picker value-format="YYYY-MM-DD" v-model="formData[item.prop]" type="date" :disabled-date="item.disabledDate" placeholder="选择日期">
+            </el-date-picker>
+          </template>
+          <template v-else>
+            <el-date-picker value-format="YYYY-MM-DD" v-model="formData[item.prop]" type="date" placeholder="选择日期">
+            </el-date-picker>
+          </template>
+        </template>
+        <template v-if="item.inputType === 'cascader'">
+          <el-cascader v-model="formData[item.prop]" :size="item.size || 'small'" :placeholder="item.placeholder || '请选择'" :options="item.options" :props="item.props" :clearable="item.clearable" :disabled="item.disabled" @change="
+              (value) => {
+                item.changeHandler && call(item.changeHandler, value);
+              }
+            " />
+        </template>
+      </el-form-item>
+      <el-form-item v-if="formItems.length">
+        <el-button type="primary" size="small" @click="getData">{{
+          buttonText
+        }}</el-button>
+      </el-form-item>
+      <el-form-item v-if="withExport">
+        <img src="@/assets/nav/ic_export.png" title="导出" class="btn-icon-only" @click="exportClickHandler" />
+      </el-form-item>
+      <el-form-item v-if="withSetting">
+        <img src="@/assets/nav/ic_setting.png" title="节点设置" class="btn-icon-only" @click="settingClickHandler" />
+      </el-form-item>
+    </el-form>
+  </div>
+</template>
+
+<script>
+import { Query } from "@/api/webApi";
+import { Format } from "@/utils/validate";
+export default {
+  name: "StatisticsHeader",
+  props: {
+    asShow: {
+      type: Boolean,
+      default: true,
+    },
+    title: {
+      type: String,
+      default: "",
+    },
+    items: {
+      type: Array,
+      default: undefined,
+    },
+    customItems: {
+      type: Array,
+      default: () => [],
+    },
+    data: {
+      type: Object,
+      default: undefined,
+    },
+    buttonText: {
+      type: String,
+      default: "查询",
+    },
+    withExport: {
+      type: Boolean,
+      default: true,
+    },
+    withSetting: {
+      type: Boolean,
+      default: false,
+    },
+    eledata: {
+      type: String,
+      default: "",
+    },
+    action: {
+      type: Number,
+      default: true,
+    },
+  },
+  data () {
+    return {
+      picShow: true,
+      formData: {
+        range: "",
+        inOrOut: "",
+        interval: "",
+        airline: [],
+        area: "",
+        airport: [],
+        terminal: "",
+        dateTime: [ new Date(), new Date()],
+        flightType: "",
+        baggageType: "",
+        passengerType: [],
+      },
+      formItems: [
+        {
+          prop: "range",
+          inputType: "select",
+          placeholder: "统计范围",
+          requiredWarning: "请先选择统计范围",
+          options: [
+            {
+              value: "全部",
+              label: "全部",
+            },
+            {
+              value: "航线",
+              label: "航线",
+            },
+            {
+              value: "基地分公司",
+              label: "基地分公司",
+            },
+            {
+              value: "航站",
+              label: "航站",
+            },
+            {
+              value: "航站楼",
+              label: "航站楼",
+            },
+          ],
+          changeHandler (value) {
+            this.formData.inOrOut = "";
+            // this.formData.interval = ''
+            this.formData.area = "";
+            this.formData.airline = "";
+            this.formData.airport = "";
+            this.formData.terminal = "";
+            this.setInOrOutOptions(value);
+            const airlineItem = this.formItems.find(
+              (item) => item.prop === "airline"
+            );
+            const areaItem = this.formItems.find(
+              (item) => item.prop === "area"
+            );
+            const airportItem = this.formItems.find(
+              (item) => item.prop === "airport"
+            );
+            const terminalItem = this.formItems.find(
+              (item) => item.prop === "terminal"
+            );
+            airlineItem && (airlineItem.disabled = true);
+            areaItem && (areaItem.disabled = true);
+            airportItem && (airportItem.disabled = true);
+            terminalItem && (terminalItem.disabled = true);
+            switch (value) {
+              case "航线":
+                airlineItem && (airlineItem.disabled = false);
+                break;
+              case "基地分公司":
+                areaItem && (areaItem.disabled = false);
+                break;
+              case "航站":
+                airportItem && (airportItem.disabled = false);
+                break;
+              case "航站楼":
+                terminalItem && (terminalItem.disabled = false);
+                break;
+              default:
+                break;
+            }
+          },
+        },
+        {
+          prop: "inOrOut",
+          inputType: "select",
+          placeholder: "进出港",
+          requiredWarning: "请先选择进出港",
+          clearable: true,
+          options: [],
+        },
+        {
+          prop: "interval",
+          inputType: "select",
+          placeholder: "时间维度",
+          requiredWarning: "请先选择统计时间维度",
+          clearable: true,
+          options: [
+            {
+              value: "日",
+              label: "按日统计",
+            },
+            {
+              value: "月",
+              label: "按月统计",
+            },
+            {
+              value: "季",
+              label: "按季统计",
+            },
+            {
+              value: "年",
+              label: "按年统计",
+            },
+          ],
+        },
+        {
+          prop: "dateTime",
+          inputType: "datePicker",
+          width: "240px",
+          requiredWarning: "请先选择统计时间范围",
+        },
+        {
+          prop: "airline",
+          inputType: "select",
+          placeholder: "航线",
+          width: "180px",
+          filterable: true,
+          clearable: true,
+          multiple: true,
+          disabled: true,
+          queryId: '',
+          setKey: "a2",
+          options: [],
+        },
+        {
+          prop: "area",
+          inputType: "select",
+          placeholder: "基地分公司",
+          filterable: true,
+          clearable: true,
+          disabled: true,
+          queryId:'',
+          setKey: "a5",
+          options: [],
+        },
+        {
+          prop: "airport",
+          inputType: "select",
+          placeholder: "航站",
+          width: "150px",
+          filterable: true,
+          clearable: true,
+          multiple: true,
+          disabled: true,
+          queryId: '',
+          setKey: "a2",
+          options: [],
+        },
+        {
+          prop: "terminal",
+          inputType: "select",
+          placeholder: "航站楼",
+          filterable: true,
+          clearable: true,
+          disabled: true,
+          queryId: '',
+          setKey: "a2",
+          options: [],
+        },
+      ],
+    };
+  },
+  watch: {
+    asShow: {
+      handler (val) {
+        // console.log(val);
+      },
+      deep: true,
+      immediate: true,
+    },
+    items: {
+      handler (val) {
+        val && (this.formItems = val);
+        // this.formData.dateTime = [Format("yyyy-MM-dd", new Date()),Format("yyyy-MM-dd", new Date())]
+        // this.formData[val[0].prop] ? this.formData[val[0].prop] : val[0].placeholder
+        // console.log(this.formData,val)
+        // if (!this.formData[val[0].prop]) {
+        //   this.formData[val[0].prop]
+        // }
+        // this.formData.aircompany = val
+      },
+      deep: true,
+      immediate: true,
+    },
+    formData: {
+      handler (val) {
+      },
+      deep: true,
+      immediate: true,
+    },
+    data: {
+      handler (val) {
+        val && (this.formData = val);
+        // this.$set(this.formData,'dateTime',[val.dateTime[0],val.dateTime[1]])
+      },
+      deep: true,
+      immediate: true,
+    },
+    eledata: {
+      handler (val) {
+        this.formData = {};
+      },
+      deep: true,
+      immediate: true,
+    },
+  },
+  created () {
+    this.$set(this.formData,'dateTime',[Format("yyyy-MM-dd", new Date()),Format("yyyy-MM-dd", new Date())])
+    this.customItems.forEach((item) => {
+      if (typeof item.itemIndex === "number") {
+        if (item.prop) {
+          this.formItems.splice(item.itemIndex, item.replaceNum, item);
+        } else {
+          this.formItems.splice(item.itemIndex, item.replaceNum);
+        }
+      } else {
+        this.formItems.push(item);
+      }
+    });
+    this.formItems.forEach((item) => {
+      if (item.queryId && item.setKey) {
+        this.getOptions(item.queryId, item.setKey, item.prop);
+      }
+      if (item.defaultOption) {
+        this.formData[item.prop] = item.defaultOption;
+      }
+    });
+  },
+  mounted () {
+  },
+  methods: {
+    changes (event) {
+      console.log(event)
+    },
+    picup () {
+      this.picShow = false;
+      this.$emit("upset", this.picShow);
+    },
+    picups () {
+      this.picShow = true;
+      this.$emit("upset", this.picShow);
+    },
+    call (func, ...args) {
+      func.call(this, ...args);
+    },
+    getData () {
+      try {
+        this.formItems.forEach((item) => {
+          if (
+            item.requiredWarning &&
+            (!this.formData[item.prop] || this.formData[item.prop].length === 0)
+          ) {
+            throw new Error(item.requiredWarning);
+          }
+        });
+      } catch (error) {
+        this.$message.warning(error.message);
+        return;
+      }
+      if (this.formData.range === "航线" && !this.formData.airline) {
+        this.$message.warning("请先选择航线");
+        return;
+      } else if (this.formData.range === "航站" && !this.formData.airport) {
+        this.$message.warning("请先选择航站");
+        return;
+      } else if (this.formData.range === "基地分公司" && !this.formData.area) {
+        this.$message.warning("请先选择基地分公司");
+        return;
+      }
+      this.$emit("getFormData", this.formData);
+    },
+    exportClickHandler () {
+      this.$emit("export");
+    },
+    settingClickHandler () {
+      this.$emit("setting");
+    },
+    setInOrOutOptions (range) {
+      const theInOrOutItem = this.formItems.find(
+        (item) => item.prop === "inOrOut"
+      );
+      switch (range) {
+        case "全部":
+        case "航线":
+          theInOrOutItem.options = [
+            {
+              label: "全部",
+              value: "全部",
+            },
+          ];
+          this.formData.inOrOut = "全部";
+          this.formItems[1].disabled = true;
+          break;
+        case "基地分公司":
+        case "航站":
+        case "航站楼":
+          theInOrOutItem.options = [
+            {
+              value: "全部",
+              label: "全部",
+            },
+            {
+              value: "进港",
+              label: "进港",
+            },
+            {
+              value: "离港",
+              label: "出港",
+            },
+          ];
+          this.formItems[1].disabled = false;
+          break;
+        default:
+          theInOrOutItem.options = [];
+          this.formItems[1].disabled = false;
+          break;
+      }
+    },
+    async getOptions (queryId, setKey, prop) {
+      try {
+        const { code, returnData, message } = await Query({
+          id: queryId,
+          dataContent: [],
+        });
+        if (Number(code) === 0) {
+          const arr = returnData.listValues.map((element) => ({
+            label: element[setKey],
+            value: element[setKey],
+          }));
+          const theItem = this.formItems.find((item) => item.prop === prop);
+          theItem.options = arr;
+        } else {
+          this.$message.error(message);
+        }
+      } catch (error) {
+        this.$message.error("失败");
+      }
+    },
+  },
+};
+</script>
+
+<style lang="scss" scoped>
+.flight-statistics-header {
+  // padding-top: 24px;
+  // min-height: 80px;
+  display: flex;
+  justify-content: space-between;
+  align-items: flex-start;
+  position: relative;
+  .status {
+    position: absolute;
+    left: 144px;
+    display: flex;
+    align-items: center;
+    > .st_pic {
+      width: 32px;
+      height: 32px;
+      border-radius: 4px;
+      // background: url("../../../../assets/nav/ic_table_default.png") no-repeat;
+      background-size: 100% 100%;
+      margin-right: 8px;
+      cursor: pointer;
+    }
+    > .st_pics {
+      width: 32px;
+      height: 32px;
+      border-radius: 4px;
+      // background: url("../../../../assets/nav/ic_table_check.png") no-repeat;
+      background-size: 100% 100%;
+      margin-right: 8px;
+      cursor: pointer;
+    }
+    > .st_tab {
+      width: 32px;
+      height: 32px;
+      border-radius: 4px;
+      // background: url("../../../../assets/nav/ic_chart_default.png") no-repeat;
+      background-size: 100% 100%;
+      cursor: pointer;
+    }
+    > .st_tabs {
+      width: 32px;
+      height: 32px;
+      border-radius: 4px;
+      // background: url("../../../../assets/nav/ic_chart_check.png") no-repeat;
+      background-size: 100% 100%;
+      cursor: pointer;
+    }
+  }
+  .title {
+    margin-right: 24px;
+    padding-left: 16px;
+    // min-width: 190px;
+    height: 32px;
+    line-height: 32px;
+    font-size: 18px;
+    font-family: Helvetica, "Microsoft YaHei";
+    font-weight: bold;
+    white-space: nowrap;
+    position: relative;
+    color: #fff;
+    &::before {
+      content: "";
+      width: 4px;
+      height: 20px;
+      background: #66b1ff;
+      position: absolute;
+      top: 0;
+      bottom: 0;
+      left: 0;
+      margin: auto;
+    }
+  }
+  ::v-deep .form {
+    display: flex;
+    flex-wrap: wrap;
+    > .el-form-item {
+      margin-bottom: 24px;
+      // width: 185px;
+      &:not(:last-child) {
+        margin-right: 8px;
+      }
+      &:nth-last-child(2),
+      &:nth-last-child(3) {
+        margin-right: 16px;
+      }
+      .el-form-item__content {
+        height: 32px;
+        line-height: 30px;
+        .el-input {
+          &.is-disabled .el-input__inner {
+            border: none;
+          }
+          .el-input__inner {
+            border-radius: 4px;
+            font-family: Helvetica, "Microsoft YaHei";
+            color: #303133;
+            border-color: #ffffff;
+            &:hover {
+              border-color: #c0c4cc;
+            }
+            &:focus {
+              border-color: #409eff;
+            }
+          }
+        }
+        .el-date-editor--daterange.el-input,
+        .el-date-editor--daterange.el-input__inner,
+        .el-date-editor--timerange.el-input,
+        .el-date-editor--timerange.el-input__inner {
+          width: 100%;
+          border-radius: 4px;
+          border-color: #ffffff;
+          color: #303133;
+          font-family: Helvetica, "Microsoft YaHei";
+          &:hover {
+            border-color: #c0c4cc;
+          }
+          &.is-active {
+            border-color: #409eff;
+          }
+          .el-input__icon {
+            color: #303133;
+          }
+          .el-range-separator {
+            line-height: 28px;
+          }
+        }
+        .el-select,
+        .el-cascader {
+          .el-input {
+            .el-icon-arrow-up::before {
+              content: "\e78f";
+            }
+            .el-icon-arrow-down::before {
+              content: "\e790";
+            }
+            &:not(.is-disabled) {
+              .el-input__icon,
+              .el-input__inner::-webkit-input-placeholder {
+                color: #303133;
+              }
+            }
+          }
+        }
+        .el-button {
+          border-radius: 4px;
+          font-family: Helvetica, "Microsoft YaHei";
+        }
+        .btn-icon-only {
+          width: 24px;
+          height: 24px;
+          cursor: pointer;
+        }
+      }
+    }
+  }
+}
+</style>

src/views/monitoringlarge/index.vue

@@ -0,0 +1,20 @@
+<template>
+  <div class="dashboard">
+    <!--导航-->
+    <ToolBar />
+  </div>
+</template>
+
+<script>
+import ToolBar from "@/layout/components/ToolBar";
+export default {
+  name: "Dashboard",
+  components: { ToolBar },
+};
+</script>
+
+<style lang="scss" scoped>
+.dashboard {
+  padding: 30px 30px 0 25px;
+}
+</style>

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

@@ -0,0 +1,598 @@
+<template>
+  <div class="dashboard">
+    <div class="variable">
+      <StatisticsHeader
+        :title="titleTop"
+        :items="formItems"
+        :data="formData"
+        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 {Format} from '@/utils/validate'
+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'
+        },
+        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: [
+          {
+            color: 'blue',
+            name: 'Punch Card',
+            type: 'scatter',
+            symbolSize: function (val) {
+              return val[2] / 4;
+            },
+            data: [],
+            animationDelay: function (idx) {
+              return idx /  4;
+            }
+          }
+        ]
+      }
+const barOptioner = {
+title: {
+  text: ''
+},
+legend: {
+  data: ['Punch Card'],
+  left: 'right'
+},
+tooltip: {
+  position: 'top'
+},
+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: [
+  {
+    color: 'blue',
+    name: 'Punch Card',
+    type: 'scatter',
+    symbolSize: function (val) {
+      return val[2] / 100;
+    },
+    data: [],
+    animationDelay: function (idx) {
+      return idx /  100;
+    }
+  }
+]
+}
+export default {
+  name: "Singleairline",
+  data () {
+    return {
+      titleTop: "单航司概览",
+      set: '',
+      formItems: [
+        {
+          prop: "aircompany",
+          inputType: "select",
+          placeholder: "CZ",
+          requiredWarning: "",
+          clearable: true,
+          filterable: true,
+          options: [
+            {
+              value: 0,
+              label: "国内出港",
+            },
+            {
+              value: 1,
+              label: "国内进港",
+            },
+            {
+              value: 2,
+              label: "国际出港",
+            },
+            {
+              value: 3,
+              label: "国际进港",
+            },
+          ],
+        },
+        {
+          prop: "dateTime",
+          inputType: "datePicker",
+          requiredWarning: "请先选择统计时间范围",
+          width: "240px",
+          dateTime:[Format("yyyy-MM-dd", new Date()),Format("yyyy-MM-dd", new Date())]
+        },
+      ],
+      formData: {
+        aircompany: "CZ",
+        dateTime:[Format("yyyy-MM-dd", new Date()),Format("yyyy-MM-dd", new Date())],
+      },
+      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(barOptioner),
+    }
+  },
+  components: {
+    StatisticsHeader,
+    BarCharts,
+    BarChartsr
+  },
+  mounted() {
+    this.getAiportList()
+    let arr = {
+      aircompany:"CZ",
+      dateTime: [Format("yyyy-MM-dd", new Date()),Format("yyyy-MM-dd", new Date())]
+    }
+    this.getMap(arr)
+    this.getMaps(arr)
+  },
+  methods: {
+   // 航站列表
+    async getAiportList() {
+      this.loading = true
+      try {
+        let params = {
+          serviceid: 73,
+          datacontent: [{filter:{1:1}}],
+          event: '0',
+        }
+        if (this.queryId) {
+          params = {
+            ...params,
+            authId: this.authId,
+            serviceId: this.queryId,
+          }
+        }
+        const {
+          code,
+          returnData,
+          message,
+        } = await Query(params)
+        if (String(code) !== '0') {
+          throw new Error(message || '失败')
+        }
+        this.aiportOptions = returnData.map(aiport => ({
+          label: aiport.ITATCode,
+          value: aiport.ITATCode,
+        }))
+        this.currentAirport = 'CAN'
+      } catch (error) {
+        console.error(error)
+      }
+      this.loading = false
+      this.formItems[0].options = this.aiportOptions
+    },
+    //航司大屏接口
+    async getMap(data) {
+      try {
+        const {
+          code,
+          returnData,
+          message,
+        } = await Query({
+          serviceid: 90,
+          datacontent: [
+            {filter: {
+              aircompany: data.aircompany,
+              fd1: data.dateTime[0],
+              fd2: data.dateTime[1],
+            },}
+          ],
+          event: '0',
+        })
+        if (String(code) !== '0') {
+          this.boxMap.series[0].data = []
+          throw new Error(message || '失败')
+        }
+        this.inHourDataOption.series[0].data = [returnData[0].total_source_yes,0,returnData[0].bsm_source_yes,returnData[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 = [returnData[0].fly_total_has,returnData[0].fly_nor_has,returnData[0].fly_dly_has,returnData[0].fly_can_has],
+        this.outHourDataOption.series[1].data = [returnData[0].fly_total_havent,returnData[0].fly_nor_havent,returnData[0].fly_dly_havent,returnData[0].fly_can_havent],
+        this.outHourDataOption.xAxis.data = ['航班总量','正常航班量','延误航班量','取消航班量']
+        this.transHourDataOption.series[0].data = [returnData[0].bag_total_dom,returnData[0].bag_transfer_dom,returnData[0].bag_abnormal_dom,returnData[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 = [returnData[0].checkin,returnData[0].security,returnData[0].sort,returnData[0].loadcar,returnData[0].loadplane,returnData[0].transfer,returnData[0].arrive]
+      } catch (error) {
+        console.error(error)
+      }
+    },
+    async getMaps(data) {
+      try {
+        const {
+          code,
+          returnData,
+          message,
+        } = await Query({
+          serviceid: 91,
+          datacontent: [
+            {filter:{
+              aircompany: data.aircompany,
+              fd1: data.dateTime[0],
+              fd2: data.dateTime[1],
+            },}
+          ],
+          event: '0',
+        })
+        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<returnData.length-1;i++){
+          if (i<5) {
+            top.push(returnData[i])
+          }else {
+            boom.push(returnData[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>

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

@@ -0,0 +1,598 @@
+<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'
+import {Format} from '@/utils/validate'
+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'
+        },
+        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: [
+          {
+            color: 'blue',
+            name: 'Punch Card',
+            type: 'scatter',
+            symbolSize: function (val) {
+              return val[2] / 2;
+            },
+            data: [],
+            animationDelay: function (idx) {
+              return idx /  2;
+            }
+          }
+        ]
+      }
+const barOptioner = {
+  title: {
+    text: ''
+  },
+  legend: {
+    data: ['Punch Card'],
+    left: 'right'
+  },
+  tooltip: {
+    position: 'top'
+  },
+  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: [
+    {
+      color: 'blue',
+      name: 'Punch Card',
+      type: 'scatter',
+      symbolSize: function (val) {
+        return val[2] / 200;
+      },
+      data: [],
+      animationDelay: function (idx) {
+        return idx /  200;
+      }
+    }
+  ]
+}
+export default {
+  name: "Singleairline",
+  data () {
+    return {
+      titleTop: "单机场概览",
+      set: '',
+      formItems: [
+        {
+          prop: "airport",
+          inputType: "select",
+          placeholder: "CAN",
+          requiredWarning: "",
+          clearable: true,
+          filterable: 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(barOptioner),
+    }
+  },
+  components: {
+    StatisticsHeader,
+    BarCharts,
+    BarChartsr
+  },
+  mounted() {
+    this.getAiportList()
+    let arr = {
+      airport:"CAN",
+      dateTime: [Format("yyyy-MM-dd", new Date()),Format("yyyy-MM-dd", new Date())]
+    }
+    this.getMap(arr)
+    this.getMaps(arr)
+  },
+  methods: {
+   // 航站列表
+    async getAiportList() {
+      this.loading = true
+      try {
+        let params = {
+          serviceid: 74,
+          datacontent: [{filter:{1:1}}],
+          event: '0',
+        }
+        if (this.queryId) {
+          params = {
+            ...params,
+            authId: this.authId,
+            serviceId: this.queryId,
+          }
+        }
+        const {
+          code,
+          returnData,
+          message,
+        } = await Query(params)
+        if (String(code) !== '0') {
+          throw new Error(message || '失败')
+        }
+        this.aiportOptions = returnData.map(aiport => ({
+          label: aiport.IATACode,
+          value: aiport.IATACode,
+        }))
+        this.currentAirport = 'CAN'
+      } catch (error) {
+        console.error(error)
+      }
+      this.loading = false
+      this.formItems[0].options = this.aiportOptions
+    },
+    //航司大屏接口
+    async getMap(data) {
+      try {
+        const {
+          code,
+          returnData,
+          message,
+        } = await Query({
+          serviceid: 92,
+          datacontent: [
+            {filter:{
+              airport: data.airport,
+              fd1: data.dateTime[0],
+              fd2: data.dateTime[1],
+            },}
+          ],
+          event: '0',
+        })
+        if (String(code) !== '0') {
+          this.boxMap.series[0].data = []
+          throw new Error(message || '失败')
+        }
+        this.inHourDataOption.series[0].data = [returnData[0].total_source_yes,0,returnData[0].bsm_source_yes,returnData[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 = [returnData[0].fly_total_has_dep,returnData[0].fly_has_arr,returnData[0].fly_nor_has_dep,returnData[0].fly_dly_has_dep,returnData[0].fly_can_has_dep],
+        this.outHourDataOption.series[1].data = [returnData[0].fly_total_havent_dep,returnData[0].fly_havent_arr,returnData[0].fly_nor_havent_dep,returnData[0].fly_dly_havent_dep,returnData[0].fly_can_havent_dep],
+        this.outHourDataOption.xAxis.data = ['离港航班总量','进港航班总量','离港正常航班量','离港延误航班量','离港取消航班量']
+        this.transHourDataOption.series[0].data = [returnData[0].bag_total_dom,returnData[0].bag_dep_dom,returnData[0].bag_arr_dom,returnData[0].bag_transfer_dom,returnData[0].bag_abnormal_dom,returnData[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 = [returnData[0].checkin,returnData[0].security,returnData[0].sort,returnData[0].loadcar,returnData[0].loadplane,returnData[0].transfer,returnData[0].arrive]
+      } catch (error) {
+        console.error(error)
+      }
+    },
+    async getMaps(data) {
+      try {
+        const {
+          code,
+          returnData,
+          message,
+        } = await Query({
+          serviceid: 93,
+          datacontent: [
+            {filter:{
+              airport: data.airport,
+              fd1: data.dateTime[0],
+              fd2: data.dateTime[1],
+            },}
+          ],
+          event: '0',
+        })
+        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<returnData.length-1;i++){
+          if (i<5) {
+            top.push(returnData[i])
+          }else {
+            boom.push(returnData[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>