雷达图

public/config.js

@@ -77,14 +77,15 @@ const DATACONTENT_ID = {
   bagTableId: 55, //基础数据-特殊行李维护-表格-id
 
   // 数据统计
-  inOrOutId:246,//获取进离岗下拉ID
-  AirlineId:247,//获取航线下拉ID
-  AreaId:248,//获取大区下拉ID
-  AirportId:249,//获取航站下拉ID
-  TerminalId:250,//获取航站楼下拉ID
-  byAreaId:244,//根据大区统计ID
-  byOtherId:243,//获取大区以外统计ID
-
+  inOrOutId:52,//获取进离岗下拉ID
+  AirlineId:53,//获取航线下拉ID
+  AreaId:54,//获取大区下拉ID
+  AirportId:55,//获取航站下拉ID
+  TerminalId:56,//获取航站楼下拉ID
+  byAreaId:50,//根据大区统计ID
+  byOtherId:49,//获取大区以外统计ID
+  baggageStatistics: 251, // 获取行李统计
+  nodeStatistics: 252 // 获取节点统计
 };
 
 const SERVICE_ID = {

src/layout/components/Sidebar/SidebarItem.vue

@@ -328,7 +328,6 @@ export default {
       no-repeat;
   }
 }
-.flightStatistics,
 .arrival {
   background: url("../../../assets/nav/ic_list_nav_arrive_default.png")
     no-repeat;

src/layout/components/Sidebar/index.vue

@@ -151,7 +151,6 @@ export default {
       background: url("../../../assets/nav/ic_list_nav_transit_check.png")
         no-repeat;
     }
-    .flightStatistics,
     .arrival {
       background: url("../../../assets/nav/ic_list_nav_arrive_check.png")
         no-repeat;

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

@@ -1,28 +1,44 @@
 import Layout from '@/layout'
 
-const filghtCountRoutes = {
-  path: '/flightStatistics',
+const statisticsChartsRoutes = {
+  path: '/statisticsCharts',
   component: Layout,
   children: [
     {
-      path: '/flightStatistics',
-      redirect: 'charts',
-      component: () => import('@/views/flightStatistics'),
+      path: '/statisticsCharts',
+      name: 'StatisticsCharts',
+      redirect: 'flight',
+      component: () => import('@/views/statisticsCharts'),
       meta: {
-        title: '航班统计',
+        title: '统计图表',
         imgstyle: 'ic_list_nav_arrive_default.png',
         imgstyleup: 'ic_list_nav_arrive_check.png'
       },
       children: [
         {
-          path: 'charts',
+          path: 'flight',
           name: 'FlightStatisticsCharts',
-          component: () => import('@/views/flightStatistics/views/flightStatisticsCharts'),
+          hidden: true,
+          component: () => import('@/views/statisticsCharts/views/flightStatisticsCharts'),
           meta: { title: '航班量统计' }
+        },
+        {
+          path: '/statisticsCharts/node',
+          name: 'NodeStatisticsCharts',
+          hidden: true,
+          component: () => import('@/views/statisticsCharts/views/nodeStatisticsCharts'),
+          meta: { title: '扫描节点与位置分析' }
+        },
+        {
+          path: '/statisticsCharts/baggage',
+          name: 'BaggageStatisticsCharts',
+          hidden: true,
+          component: () => import('@/views/statisticsCharts/views/baggageStatisticsCharts'),
+          meta: { title: '行李统计' }
         }
       ]
     }
   ]
 }
 
-export default [filghtCountRoutes]
+export default [statisticsChartsRoutes]

src/views/baggageManagement/components/baggage/index.vue

@@ -707,7 +707,10 @@ export default {
       const dataContent = [FlightNO, FlightDate, BagSN]
       try {
         const result = await this.queryMessage(dataContent)
-        this.messageList = result
+        this.messageList = result.map(message => {
+          message.dataContent = JSON.parse(message.dataContent).dataContent
+          return message
+        })
       } catch (error) {
         console.log('出错了', error)
       }

src/views/flightStatistics/components/flightStatisticsHeader.vue

@@ -1,473 +0,0 @@
-<template>
-  <div class="flight-statistics-header">
-    <template v-if="title">
-      <div class="title">{{ title }}</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"
-      >
-        <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"
-            :size="item.size || 'small'"
-            :placeholder="item.placeholder || '请选择'"
-            :clearable="item.clearable"
-            :disabled="item.disabled"
-            @change="
-              (value) => {
-                item.changeHandler && 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
-            v-model="formData[item.prop]"
-            :size="item.size || 'small'"
-            type="daterange"
-            value-format="yyyy-MM-dd"
-            range-separator="至"
-            start-placeholder="开始日期"
-            end-placeholder="结束日期">
-          </el-date-picker>
-        </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"
-          />
-        </template>
-      </el-form-item>
-      <el-button size="small" style="height:33px;border-radius:4px" @click="getData()">查询</el-button>
-    </el-form>
-  </div>
-</template>
-
-<script>
-import { Query, GeneralDataReception } from "@/api/dataIntegration";
-export default {
-  name: "FlightStatisticsHeader",
-  props: {
-    title: {
-      type: String,
-      default: "",
-    },
-    items: {
-      type: Array,
-      default: () => [],
-    },
-    data: {
-      type: Object,
-      default: undefined,
-    },
-  },
-  data() {
-    const that = this;
-    return {
-      formData: {
-        range: "",
-        inOrOut: "",
-        interval: "",
-        airline: "",
-        area: "",
-        airport: "",
-        terminal: "",
-        dateTime:""
-      },
-      formItems: [
-        {
-          prop: "range",
-          inputType: "select",
-          placeholder: "请选择统计范围",
-          options: [
-            {
-              value: "全部",
-              label: "全部",
-            },
-            {
-              value: "航线",
-              label: "航线",
-            },
-            {
-              value: "大区",
-              label: "大区",
-            },
-            {
-              value: "航站",
-              label: "航站",
-            },
-            {
-              value: "航站楼",
-              label: "航站楼",
-            },
-          ],
-          changeHandler(value) {
-            that.getInOrOut(value);
-            that.formData.airline = "";
-            that.formData.area = "";
-            that.formData.airport = "";
-            that.formData.terminal = "";
-            that.formData.interval = "";
-            that.formData.inOrOut = "";
-            that.formItems[4].disabled = true;
-            that.formItems[5].disabled = true;
-            that.formItems[6].disabled = true;
-            that.formItems[7].disabled = true;
-            switch (value) {
-              case "全部":
-                that.formItems[4].disabled = false;
-                that.formItems[5].disabled = false;
-                that.formItems[6].disabled = false;
-                that.formItems[7].disabled = false;
-              case "航线":
-                that.formItems[4].disabled = false;
-                break;
-              case "大区":
-                that.formItems[5].disabled = false;
-                break;
-              case "航站":
-                that.formItems[6].disabled = false;
-                break;
-              case "航站楼":
-                that.formItems[7].disabled = false;
-                break;
-              default:
-                break;
-            }
-          },
-        },
-        {
-          prop: "inOrOut",
-          inputType: "select",
-          placeholder: "请选择进离港",
-          clearable: true,
-          options: [],
-        },
-        {
-          prop: "interval",
-          inputType: "select",
-          placeholder: "请选择统计时间维度",
-          clearable: true,
-          options: [
-            {
-              value: "日",
-              label: "按日统计",
-            },
-            {
-              value: "月",
-              label: "按月统计",
-            },
-            {
-              value: "季",
-              label: "按季统计",
-            },
-            {
-              value: "年",
-              label: "按年统计",
-            }
-          ],
-        },
-        {
-          prop: "dateTime",
-          inputType: "datePicker",
-          placeholder: "开始时间",
-          clearable: true,
-          options: [],
-        },
-        {
-          prop: "airline",
-          inputType: "select",
-          placeholder: "航线选择",
-          filterable:true,
-          clearable: true,
-          disabled: true,
-          options: [],
-        },
-        {
-          prop: "area",
-          inputType: "select",
-          placeholder: "大区选择",
-          filterable:true,
-          clearable: true,
-          disabled: true,
-          options: [],
-        },
-        {
-          prop: "airport",
-          inputType: "select",
-          placeholder: "航站选择",
-          filterable:true,
-          clearable: true,
-          // multiple: true,
-          disabled: true,
-          options: [
-          ],
-        },
-        {
-          prop: "terminal",
-          inputType: "select",
-          placeholder: "航站楼选择",
-          filterable:true,
-          props: {
-            multiple: true,
-          },
-          clearable: true,
-          disabled: true,
-          options: [],
-        },
-      ],
-    };
-  },
-  watch: {
-    items: {
-      handler(val) {
-        val?.length && (this.formItems = val);
-      },
-      deep: true,
-      immediate: true,
-    },
-    data: {
-      handler(val) {
-        val && (this.formData = val);
-      },
-      deep: true,
-      immediate: true,
-    },
-  },
-  created(){
-    // this.getInOrOut()
-    // this.getInOrOut('全部');
-    this.getAirline()
-    this.getArea()
-    this.getAirport()
-    this.getTerminal()
-  },
-  methods:{
-    getData(){
-      // console.log(this.formData)
-      this.$emit("getFormData",this.formData)
-    },
-    async getInOrOut(data){
-      try {
-        const res = await Query({
-          id:DATACONTENT_ID.inOrOutId,
-          dataContent:[data]
-        });
-        if (res.code === "0") {
-          let arr = [];
-          for(let i=0;i< res.returnData.listValues.length;i++){
-            arr.push({
-              label:res.returnData.listValues[i].a5,
-              value:res.returnData.listValues[i].a5
-            })
-          }
-          this.formItems[1].options=arr
-        } else {
-          this.$message.error(res.message);
-        }
-      } catch (error) {
-        console.log("出错了", error);
-      }
-    },
-    async getAirline(){
-      try {
-        const res = await Query({
-          id:DATACONTENT_ID.AirlineId,
-          dataContent:[]
-        });
-        if (res.code === "0") {
-          let arr = [];
-          for(let i=0;i< res.returnData.listValues.length;i++){
-            arr.push({
-              label:res.returnData.listValues[i].a2,
-              value:res.returnData.listValues[i].a2
-            })
-          }
-          this.formItems[4].options=arr
-        } else {
-          this.$message.error(res.message);
-        }
-      } catch (error) {
-        console.log("出错了", error);
-      }
-    },
-    async getArea(){
-      try {
-        const res = await Query({
-          id:DATACONTENT_ID.AreaId,
-          dataContent:[]
-        });
-        if (res.code === "0") {
-          let arr = [];
-          for(let i=0;i< res.returnData.listValues.length;i++){
-            arr.push({
-              label:res.returnData.listValues[i].a4,
-              value:res.returnData.listValues[i].a4
-            })
-          }
-          this.formItems[5].options=arr
-        } else {
-          this.$message.error(res.message);
-        }
-      } catch (error) {
-        console.log("出错了", error);
-      }
-    },
-    async getAirport(){
-      try {
-        const res = await Query({
-          id:DATACONTENT_ID.AirportId,
-          dataContent:[]
-        });
-        if (res.code === "0") {
-          let arr = [];
-          for(let i=0;i< res.returnData.listValues.length;i++){
-            arr.push({
-              label:res.returnData.listValues[i].a2,
-              value:res.returnData.listValues[i].a2
-            })
-          }
-          this.formItems[6].options=arr
-        } else {
-          this.$message.error(res.message);
-        }
-      } catch (error) {
-        console.log("出错了", error);
-      }
-    },
-    async getTerminal(){
-      try {
-        const res = await Query({
-          id:DATACONTENT_ID.TerminalId,
-          dataContent:[]
-        });
-        if (res.code === "0") {
-          let arr = [];
-          for(let i=0;i< res.returnData.listValues.length;i++){
-            arr.push({
-              label:res.returnData.listValues[i].a2,
-              value:res.returnData.listValues[i].a2
-            })
-          }
-          this.formItems[7].options=arr
-        } else {
-          this.$message.error(res.message);
-        }
-      } catch (error) {
-        console.log("出错了", error);
-      }
-    }
-
-  }
-};
-</script>
-
-<style lang="scss" scoped>
-.flight-statistics-header {
-  display: flex;
-  justify-content: space-between;
-  align-items: flex-start;
-  .title {
-    // margin-right: 24px;
-    padding-left: 16px;
-    // min-width: 176px;
-    height: 32px;
-    line-height: 32px;
-    font-size: 18px;
-    font-family: Helvetica, "Microsoft YaHei";
-    font-weight: bold;
-    position: relative;
-    &::before {
-      content: "";
-      width: 4px;
-      height: 20px;
-      background: #2d67e3;
-      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;
-      }
-      .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: 230px;
-        }
-        .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;
-              }
-            }
-          }
-        }
-      }
-    }
-  }
-}
-</style>

src/views/flightStatistics/index.vue

@@ -1,3 +0,0 @@
-<template>
-  <router-view />
-</template>

src/views/statisticsCharts/components/statisticsHeader.vue

@@ -0,0 +1,498 @@
+<template>
+  <div class="flight-statistics-header">
+    <template v-if="title">
+      <div class="title">{{ title }}</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"
+      >
+        <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"
+            :size="item.size || 'small'"
+            :placeholder="item.placeholder || '请选择'"
+            :clearable="item.clearable"
+            :disabled="item.disabled"
+            @change="
+              (value) => {
+                item.changeHandler && 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
+            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 === '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"
+          />
+        </template>
+      </el-form-item>
+      <el-form-item v-if="formItems.length">
+        <el-button
+          size="small"
+          style="height:33px;border-radius:4px"
+          @click="getData"
+        >查询</el-button>
+      </el-form-item>
+    </el-form>
+  </div>
+</template>
+
+<script>
+import { Query } from '@/api/dataIntegration'
+export default {
+  name: 'StatisticsHeader',
+  props: {
+    title: {
+      type: String,
+      default: ''
+    },
+    items: {
+      type: Array,
+      default: undefined
+    },
+    data: {
+      type: Object,
+      default: undefined
+    }
+  },
+  data() {
+    const that = this
+    return {
+      formData: {
+        range: '',
+        inOrOut: '',
+        interval: '',
+        airline: '',
+        area: '',
+        airport: '',
+        terminal: '',
+        dateTime: ''
+      },
+      formItems: [
+        {
+          prop: 'range',
+          inputType: 'select',
+          placeholder: '请选择统计范围',
+          options: [
+            {
+              value: '全部',
+              label: '全部'
+            },
+            {
+              value: '航线',
+              label: '航线'
+            },
+            {
+              value: '大区',
+              label: '大区'
+            },
+            {
+              value: '航站',
+              label: '航站'
+            },
+            {
+              value: '航站楼',
+              label: '航站楼'
+            }
+          ],
+          changeHandler(value) {
+            that.getInOrOut(value)
+            that.formData.airline = ''
+            that.formData.area = ''
+            that.formData.airport = ''
+            that.formData.terminal = ''
+            that.formData.interval = ''
+            that.formData.inOrOut = ''
+            that.formItems[4].disabled = true
+            that.formItems[5].disabled = true
+            that.formItems[6].disabled = true
+            that.formItems[7].disabled = true
+            switch (value) {
+              case '全部':
+                that.formItems[4].disabled = false
+                that.formItems[5].disabled = false
+                that.formItems[6].disabled = false
+                that.formItems[7].disabled = false
+                break
+              case '航线':
+                that.formItems[4].disabled = false
+                break
+              case '大区':
+                that.formItems[5].disabled = false
+                break
+              case '航站':
+                that.formItems[6].disabled = false
+                break
+              case '航站楼':
+                that.formItems[7].disabled = false
+                break
+              default:
+                break
+            }
+          }
+        },
+        {
+          prop: 'inOrOut',
+          inputType: 'select',
+          placeholder: '请选择进离港',
+          clearable: true,
+          options: []
+        },
+        {
+          prop: 'interval',
+          inputType: 'select',
+          placeholder: '请选择统计时间维度',
+          clearable: true,
+          options: [
+            {
+              value: '日',
+              label: '按日统计'
+            },
+            {
+              value: '月',
+              label: '按月统计'
+            },
+            {
+              value: '季',
+              label: '按季统计'
+            },
+            {
+              value: '年',
+              label: '按年统计'
+            }
+          ]
+        },
+        {
+          prop: 'dateTime',
+          inputType: 'datePicker',
+          clearable: true,
+          options: []
+        },
+        {
+          prop: 'airline',
+          inputType: 'select',
+          placeholder: '航线选择',
+          filterable: true,
+          clearable: true,
+          disabled: true,
+          options: []
+        },
+        {
+          prop: 'area',
+          inputType: 'select',
+          placeholder: '大区选择',
+          filterable: true,
+          clearable: true,
+          disabled: true,
+          options: []
+        },
+        {
+          prop: 'airport',
+          inputType: 'select',
+          placeholder: '航站选择',
+          filterable: true,
+          clearable: true,
+          // multiple: true,
+          disabled: true,
+          options: []
+        },
+        {
+          prop: 'terminal',
+          inputType: 'select',
+          placeholder: '航站楼选择',
+          filterable: true,
+          props: {
+            multiple: true
+          },
+          clearable: true,
+          disabled: true,
+          options: []
+        }
+      ]
+    }
+  },
+  watch: {
+    items: {
+      handler(val) {
+        val && (this.formItems = val)
+      },
+      deep: true,
+      immediate: true
+    },
+    data: {
+      handler(val) {
+        val && (this.formData = val)
+      },
+      deep: true,
+      immediate: true
+    }
+  },
+  created() {
+    if (this.formItems.length) {
+      // this.getInOrOut()
+      // this.getInOrOut('全部')
+      this.getAirline()
+      this.getArea()
+      this.getAirport()
+      this.getTerminal()
+    }
+  },
+  methods: {
+    getData() {
+      // console.log(this.formData)
+      this.$emit('getFormData', this.formData)
+    },
+    async getInOrOut(data) {
+      try {
+        const res = await Query({
+          id: DATACONTENT_ID.inOrOutId,
+          dataContent: [data]
+        })
+        if (res.code === '0') {
+          const arr = []
+          for (let i = 0; i < res.returnData.listValues.length; i++) {
+            arr.push({
+              label: res.returnData.listValues[i].a5,
+              value: res.returnData.listValues[i].a5
+            })
+          }
+          const theItem = this.formItems.find(item => item.prop === 'inOrOut')
+          theItem && (theItem.options = arr)
+        } else {
+          this.$message.error(res.message)
+        }
+      } catch (error) {
+        console.log('出错了', error)
+      }
+    },
+    async getAirline() {
+      try {
+        const res = await Query({
+          id: DATACONTENT_ID.AirlineId,
+          dataContent: []
+        })
+        if (res.code === '0') {
+          const arr = []
+          for (let i = 0; i < res.returnData.listValues.length; i++) {
+            arr.push({
+              label: res.returnData.listValues[i].a2,
+              value: res.returnData.listValues[i].a2
+            })
+          }
+          const theItem = this.formItems.find(item => item.prop === 'airline')
+          theItem && (theItem.options = arr)
+        } else {
+          this.$message.error(res.message)
+        }
+      } catch (error) {
+        console.log('出错了', error)
+      }
+    },
+    async getArea() {
+      try {
+        const res = await Query({
+          id: DATACONTENT_ID.AreaId,
+          dataContent: []
+        })
+        if (res.code === '0') {
+          const arr = []
+          for (let i = 0; i < res.returnData.listValues.length; i++) {
+            arr.push({
+              label: res.returnData.listValues[i].a4,
+              value: res.returnData.listValues[i].a4
+            })
+          }
+          const theItem = this.formItems.find(item => item.prop === 'area')
+          theItem && (theItem.options = arr)
+        } else {
+          this.$message.error(res.message)
+        }
+      } catch (error) {
+        console.log('出错了', error)
+      }
+    },
+    async getAirport() {
+      try {
+        const res = await Query({
+          id: DATACONTENT_ID.AirportId,
+          dataContent: []
+        })
+        if (res.code === '0') {
+          const arr = []
+          for (let i = 0; i < res.returnData.listValues.length; i++) {
+            arr.push({
+              label: res.returnData.listValues[i].a2,
+              value: res.returnData.listValues[i].a2
+            })
+          }
+          const theItem = this.formItems.find(item => item.prop === 'airport')
+          theItem && (theItem.options = arr)
+        } else {
+          this.$message.error(res.message)
+        }
+      } catch (error) {
+        console.log('出错了', error)
+      }
+    },
+    async getTerminal() {
+      try {
+        const res = await Query({
+          id: DATACONTENT_ID.TerminalId,
+          dataContent: []
+        })
+        if (res.code === '0') {
+          const arr = []
+          for (let i = 0; i < res.returnData.listValues.length; i++) {
+            arr.push({
+              label: res.returnData.listValues[i].a2,
+              value: res.returnData.listValues[i].a2
+            })
+          }
+          const theItem = this.formItems.find(item => item.prop === 'terminal')
+          theItem && (theItem.options = arr)
+        } else {
+          this.$message.error(res.message)
+        }
+      } catch (error) {
+        console.log('出错了', error)
+      }
+    }
+  }
+}
+</script>
+
+<style lang="scss" scoped>
+.flight-statistics-header {
+  padding-top: 14px;
+  min-height: 80px;
+  display: flex;
+  justify-content: space-between;
+  align-items: flex-start;
+  .title {
+    // margin-right: 24px;
+    padding-left: 16px;
+    // min-width: 176px;
+    height: 32px;
+    line-height: 32px;
+    font-size: 18px;
+    font-family: Helvetica, 'Microsoft YaHei';
+    font-weight: bold;
+    position: relative;
+    &::before {
+      content: '';
+      width: 4px;
+      height: 20px;
+      background: #2d67e3;
+      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;
+      }
+      .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: 230px;
+          border-radius: 4px;
+          border-color: #ffffff;
+          &:hover {
+            border-color: #c0c4cc;
+          }
+          &.is-active {
+            border-color: #409eff;
+          }
+        }
+        .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;
+              }
+            }
+          }
+        }
+      }
+    }
+  }
+}
+</style>

src/views/statisticsCharts/components/statisticsTabs.vue

@@ -0,0 +1,103 @@
+<template>
+  <div class="statistics-tabs">
+    <div
+      v-for="(tab, index) in tabList"
+      :key="tab.path"
+      :class="['tab-bar', { 'tab-active': activeIndex === index }]"
+      @click="clickHandler(index)"
+    >
+      <img
+        class="tab-icon"
+        :src="activeIndex === index ? tab.activeIcon : tab.icon"
+        :alt="tab.title"
+      >
+      <span class="tab-title">{{ tab.title }}</span>
+    </div>
+  </div>
+</template>
+
+<script>
+export default {
+  name: 'StatisticsTabs',
+  data() {
+    return {
+      tabList: [
+        {
+          path: '/statisticsCharts/flight',
+          icon: require('@/assets/nav/ic_setting_top_default.png'),
+          activeIcon: require('@/assets/nav/ic_setting_top_check.png'),
+          title: '航班量统计'
+        },
+        {
+          path: '/statisticsCharts/node',
+          icon: require('@/assets/nav/ic_setting_top_default.png'),
+          activeIcon: require('@/assets/nav/ic_setting_top_check.png'),
+          title: '扫描节点与位置分析'
+        },
+        {
+          path: '/statisticsCharts/baggage',
+          icon: require('@/assets/nav/ic_setting_top_default.png'),
+          activeIcon: require('@/assets/nav/ic_setting_top_check.png'),
+          title: '行李统计'
+        }
+      ],
+      activeIndex: null
+    }
+  },
+  watch: {
+    '$route.path': {
+      handler(val) {
+        this.activeIndex = this.tabList.findIndex(tab => tab.path === val)
+      },
+      immediate: true
+    },
+    activeIndex(val) {
+      this.$router.push({
+        path: this.tabList[val].path
+      })
+    }
+  },
+  methods: {
+    clickHandler(index) {
+      this.activeIndex = index
+    }
+  }
+}
+</script>
+
+<style lang="scss" scoped>
+.statistics-tabs {
+  display: flex;
+  .tab-bar {
+    min-width: 216px;
+    height: 56px;
+    background-color: #ffffff;
+    padding-left: 24px;
+    display: flex;
+    align-items: center;
+    box-shadow: 0px 6px 7px 0px rgba(0, 0, 0, 0.06);
+    border-radius: 4px;
+    cursor: pointer;
+    &:not(:last-child) {
+      margin-right: 16px;
+    }
+    .tab-icon {
+      width: 16px;
+      height: 16px;
+      margin-right: 15px;
+    }
+    .tab-title {
+      font-size: 16px;
+      font-family: Helvetica 'Microsoft YaHei';
+      font-weight: bold;
+      color: #101116;
+    }
+    &.tab-active {
+      background-color: #2d67e3;
+      .tab-title {
+        color: #ffffff;
+      }
+    }
+  }
+}
+</style>

src/views/statisticsCharts/index.vue

@@ -0,0 +1,22 @@
+<template>
+  <div class="statistics-charts-wrapper">
+    <!--导航-->
+    <StatisticsTabs />
+    <router-view />
+  </div>
+</template>
+
+<script>
+import StatisticsTabs from './components/statisticsTabs.vue'
+
+export default {
+  name: 'Dashboard',
+  components: { StatisticsTabs }
+}
+</script>
+
+<style lang="scss" scoped>
+.statistics-charts-wrapper {
+  padding: 24px 36px 0 24px;
+}
+</style>

src/views/statisticsCharts/views/baggageStatisticsCharts.vue

@@ -0,0 +1,320 @@
+<template>
+  <div class="statstics-wrapper">
+    <div
+      ref="headerWrapper"
+      class="statstics-header"
+    >
+      <StatisticsHeader
+        title="行李统计"
+        :items="[]"
+        @getFormData="getFormData"
+      />
+    </div>
+    <div class="statstics-content">
+      <div
+        id="chart"
+        class="flight-statistics-chart"
+        :style="{ height: chartHeight }"
+      />
+    </div>
+  </div>
+</template>
+
+<script>
+import StatisticsHeader from '../components/statisticsHeader.vue'
+import { Query } from '@/api/dataIntegration'
+import { mapGetters } from 'vuex'
+export default {
+  name: 'FlightStatisticsCharts',
+  components: { StatisticsHeader },
+  data() {
+    return {
+      myChart: null,
+      debounceTime: 300,
+      chartHeight: '70vh',
+      options: {
+        backgroundColor: '#fff',
+        tooltip: {
+          trigger: 'axis',
+          axisPointer: {
+            type: 'cross',
+            crossStyle: {
+              color: '#999'
+            }
+          }
+        },
+        legend: {
+          top: '5%',
+          right: '5%',
+          icon: 'rect',
+          height: 14,
+          itemWidth: 14,
+          itemHeight: 14,
+          itemGap: 30,
+          data: ['航班量数量', '航班量同比', '航班量环比'],
+          textStyle: {
+            fontFamily: 'Helvetica, "Microsoft YaHei"',
+            color: '#101116'
+          }
+        },
+        grid: {
+          top: '10%',
+          left: '5%',
+          right: '5%',
+          bottom: '5%'
+        },
+        xAxis: {
+          data: [],
+          axisLine: {
+            show: true,
+            lineStyle: {
+              color: '#000000'
+            }
+          },
+          axisTick: {
+            show: false // 隐藏X轴刻度
+          },
+          axisLabel: {
+            fontFamily: 'Helvetica, "Microsoft YaHei"',
+            color: '#101116'
+          },
+          axisPointer: {
+            type: 'shadow'
+          }
+        },
+        yAxis: [
+          {
+            min: 0,
+            max: 60000,
+            // interval: 5000,
+            splitLine: {
+              lineStyle: {
+                type: 'dashed',
+                color: '#B0B3C3',
+                opacity: 0.5
+              }
+            },
+            axisPointer: {
+              label: {
+                formatter: ({ value }) => value.toFixed()
+              }
+            },
+            axisLabel: {
+              fontFamily: 'Helvetica, "Microsoft YaHei"',
+              color: '#101116'
+            }
+          },
+          {
+            min: -0.3,
+            max: 0.5,
+            interval: 0.1,
+            axisLabel: {
+              formatter: value => (value * 100).toFixed(2) + '%',
+              fontFamily: 'Helvetica, "Microsoft YaHei"',
+              color: '#101116'
+            },
+            axisPointer: {
+              label: {
+                formatter: ({ value }) => (value * 100).toFixed(2) + '%'
+              }
+            },
+            splitLine: {
+              show: false
+            }
+          }
+        ],
+        series: [
+          {
+            name: '航班量数量',
+            type: 'bar',
+            z: 2,
+            itemStyle: {
+              color: '#6682B5'
+            },
+            barWidth: 40,
+            data: []
+          },
+          {
+            name: '航班量同比',
+            type: 'line',
+            z: 4,
+            yAxisIndex: 1,
+            symbol: 'circle',
+            itemStyle: {
+              color: '#F2B849',
+              borderColor: '#ffffff',
+              borderWidth: 4
+            },
+            lineStyle: {
+              width: 4,
+              color: '#F2B849'
+            },
+            symbolSize: 32,
+            tooltip: {
+              valueFormatter: value => (value * 100).toFixed(2) + '%'
+            },
+            data: []
+          },
+          {
+            name: '航班量环比',
+            type: 'line',
+            z: 3,
+            yAxisIndex: 1,
+            symbol: 'circle',
+            itemStyle: {
+              color: '#E33D3D',
+              borderColor: '#ffffff',
+              borderWidth: 4
+            },
+            lineStyle: {
+              width: 4,
+              color: '#E33D3D'
+            },
+            symbolSize: 32,
+            tooltip: {
+              valueFormatter: value => (value * 100).toFixed(2) + '%'
+            },
+            data: []
+          }
+        ]
+      }
+    }
+  },
+  computed: {
+    ...mapGetters(['sidebar'])
+  },
+  watch: {
+    // 监听数据变化 重绘图形
+    options: {
+      handler(obj) {
+        this.myChart.setOption(obj)
+      },
+      deep: true
+    },
+    'sidebar.expand'() {
+      this.resizeHandler()
+    }
+  },
+  mounted() {
+    this.getData()
+    this.setChartHeight()
+    this.myChart = this.$echarts.init(document.getElementById('chart'))
+    this.myChart.setOption(this.options)
+    // 监听页面缩放
+    window.addEventListener('resize', this.setChartHeight)
+    window.addEventListener('resize', this._.debounce(this.resizeHandler, this.debounceTime))
+    this.$nextTick(() => {
+      this.resizeHandler()
+    })
+  },
+  beforeDestroy() {
+    // 销毁实例和移除监听
+    window.removeEventListener('resize', this.setChartHeight)
+    if (this.myChart) {
+      this.myChart.dispose()
+      window.removeEventListener('resize', this.resizeHandler)
+      this.myChart = null
+    }
+  },
+  methods: {
+    getFormData(data) {
+      this.getData(data)
+    },
+    // 243 时间类型 查询范围 开始时间  结束时间  进离岗  航线/航站/航站楼
+    // 244 时间类型 开始时间  结束时间  进离岗  大区
+    async getData(data) {
+      // let id
+      // let params = []
+      // if (data.range === '') {
+      //   this.$message.warning('请先选择统计范围')
+      //   return
+      // }
+      // if (data.inOrOut === '') {
+      //   this.$message.warning('请先选择进离岗')
+      //   return
+      // }
+      // if (data.interval === '') {
+      //   this.$message.warning('请先选择统计时间维度')
+      //   return
+      // }
+      // if (data.dateTime === '') {
+      //   this.$message.warning('请先选择统计时间范围')
+      //   return
+      // }
+      // if (data.range === '大区') {
+      //   id = DATACONTENT_ID.byAreaId
+      //   params = [data.interval, data.dateTime[0], data.dateTime[1], data.inOrOut, data.area]
+      // } else if (data.range !== '大区' && data.range !== '') {
+      //   id = DATACONTENT_ID.byOtherId
+      //   params = [data.interval, data.range, data.dateTime[0], data.dateTime[1], data.inOrOut]
+      //   if (data.airline === '' && data.airport === '' && data.terminal === '') {
+      //     params.push('全部')
+      //   }
+      //   if (data.airline !== '') {
+      //     params.push(data.airline)
+      //   }
+      //   if (data.airport !== '') {
+      //     params.push(data.airport)
+      //   }
+      //   if (data.terminal !== '') {
+      //     params.push(data.terminal)
+      //   }
+      // }
+      try {
+        const res = await Query({
+          id: DATACONTENT_ID.baggageStatistics,
+          dataContent: []
+        })
+        if (res.code === '0') {
+          const dateArr = []
+          const dataArr = []
+          const chainArr = [0]
+          for (let i = 0; i < res.returnData.listValues.length; i++) {
+            dateArr.push(res.returnData.listValues[i].a3)
+            dataArr.push(res.returnData.listValues[i].count)
+            if (i > 0) {
+              chainArr.push(
+                (res.returnData.listValues[i].count - res.returnData.listValues[i - 1].count) /
+                  res.returnData.listValues[i - 1].count
+              )
+            }
+          }
+          const max = Math.max(...dataArr) + 1000
+          this.options.yAxis[0].max = max
+          this.options.xAxis.data = dateArr
+          this.options.series[0].data = dataArr
+          this.options.series[1].data = chainArr
+          this.resizeHandler()
+        } else {
+          this.$message.error(res.message)
+        }
+      } catch (error) {
+        console.log('出错了', error)
+      }
+    },
+    setChartHeight() {
+      const topBarHeight = 80
+      const headerBlankHeight = 24
+      const tabsWrapperHeight = 62
+      const headerHeight = this.$refs['headerWrapper'].offsetHeight
+      const footerBlankHeight = 24
+      this.chartHeight = `calc(100vh - ${
+        topBarHeight + headerBlankHeight + tabsWrapperHeight + headerHeight + footerBlankHeight
+      }px)`
+    },
+    resizeHandler() {
+      if (this.myChart) {
+        this.myChart.resize()
+      }
+    }
+  }
+}
+</script>
+
+<style lang="scss" scoped>
+.statstics-wrapper {
+  .flight-statistics-chart {
+    width: 100%;
+  }
+}
+</style>

src/views/flightStatistics/views/flightStatisticsCharts.vue → src/views/statisticsCharts/views/flightStatisticsCharts.vue

@@ -4,7 +4,10 @@
       ref="headerWrapper"
       class="statstics-header"
     >
-      <FlightStatisticsHeader title="航班量统计" @getFormData="getFormData"/>
+      <StatisticsHeader
+        title="航班量统计"
+        @getFormData="getFormData"
+      />
     </div>
     <div class="statstics-content">
       <div
@@ -17,12 +20,12 @@
 </template>
 
 <script>
-import FlightStatisticsHeader from '../components/flightStatisticsHeader.vue'
-import { Query, GeneralDataReception } from "@/api/dataIntegration";
+import StatisticsHeader from '../components/statisticsHeader.vue'
+import { Query } from '@/api/dataIntegration'
 import { mapGetters } from 'vuex'
 export default {
   name: 'FlightStatisticsCharts',
-  components: { FlightStatisticsHeader },
+  components: { StatisticsHeader },
   data() {
     return {
       myChart: null,
@@ -128,30 +131,29 @@ export default {
               color: '#6682B5'
             },
             barWidth: 40,
-            data: [
-            ]
+            data: []
+          },
+          {
+            name: '航班量同比',
+            type: 'line',
+            z: 4,
+            yAxisIndex: 1,
+            symbol: 'circle',
+            itemStyle: {
+              color: '#F2B849',
+              borderColor: '#ffffff',
+              borderWidth: 4
+            },
+            lineStyle: {
+              width: 4,
+              color: '#F2B849'
+            },
+            symbolSize: 32,
+            tooltip: {
+              valueFormatter: value => (value * 100).toFixed(2) + '%'
+            },
+            data: []
           },
-          // {
-          //   name: '航班量同比',
-          //   type: 'line',
-          //   z: 4,
-          //   yAxisIndex: 1,
-          //   symbol: 'circle',
-          //   itemStyle: {
-          //     color: '#F2B849',
-          //     borderColor: '#ffffff',
-          //     borderWidth: 4
-          //   },
-          //   lineStyle: {
-          //     width: 4,
-          //     color: '#F2B849'
-          //   },
-          //   symbolSize: 32,
-          //   tooltip: {
-          //     valueFormatter: value => (value * 100).toFixed(2) + '%'
-          //   },
-          //   data: []
-          // },
           {
             name: '航班量环比',
             type: 'line',
@@ -178,7 +180,7 @@ export default {
     }
   },
   computed: {
-    ...mapGetters(['sidebar'])
+    ...mapGetters(['sidebar', 'permission_routes'])
   },
   watch: {
     // 监听数据变化 重绘图形
@@ -193,6 +195,7 @@ export default {
     }
   },
   mounted() {
+    console.log(this.permission_routes)
     this.setChartHeight()
     this.myChart = this.$echarts.init(document.getElementById('chart'))
     this.myChart.setOption(this.options)
@@ -213,86 +216,90 @@ export default {
     }
   },
   methods: {
-    getFormData(data){
+    getFormData(data) {
       this.getData(data)
     },
-    //243 时间类型 查询范围 开始时间  结束时间  进离岗  航线/航站/航站楼
-    //244 时间类型 开始时间  结束时间  进离岗  大区
-    async getData(data){
-
+    // 243 时间类型 查询范围 开始时间  结束时间  进离岗  航线/航站/航站楼
+    // 244 时间类型 开始时间  结束时间  进离岗  大区
+    async getData(data) {
       let id
       let params = []
-      if(data.range == ""){
-        this.$message.warning("请先选择统计范围");
-        return;
+      if (data.range === '') {
+        this.$message.warning('请先选择统计范围')
+        return
       }
-      if(data.inOrOut == ""){
-        this.$message.warning("请先选择进离岗");
-        return;
+      if (data.inOrOut === '') {
+        this.$message.warning('请先选择进离岗')
+        return
       }
-      if(data.interval == ""){
-        this.$message.warning("请先选择统计时间维度");
-        return;
+      if (data.interval === '') {
+        this.$message.warning('请先选择统计时间维度')
+        return
       }
-      if(data.dateTime == ""){
-        this.$message.warning("请先选择统计时间范围");
-        return;
+      if (data.dateTime === '') {
+        this.$message.warning('请先选择统计时间范围')
+        return
       }
-      if(data.range=="大区"){
+      if (data.range === '大区') {
         id = DATACONTENT_ID.byAreaId
-        params = [data.interval,data.dateTime[0],data.dateTime[1],data.inOrOut,data.area]
-      }
-      else if(data.range!="大区"&&data.range!=""){
+        params = [data.interval, data.dateTime[0], data.dateTime[1], data.inOrOut, data.area]
+      } else if (data.range !== '大区' && data.range !== '') {
         id = DATACONTENT_ID.byOtherId
-        params = [data.interval,data.range,data.dateTime[0],data.dateTime[1],data.inOrOut]
-        if(data.airline==""&&data.airport==""&&data.terminal==""){
-          params.push("全部")
+        params = [data.interval, data.range, data.dateTime[0], data.dateTime[1], data.inOrOut]
+        if (data.airline === '' && data.airport === '' && data.terminal === '') {
+          params.push('全部')
         }
-        if(data.airline!=""){
+        if (data.airline !== '') {
           params.push(data.airline)
         }
-        if(data.airport!=""){
+        if (data.airport !== '') {
           params.push(data.airport)
         }
-        if(data.terminal!=""){
+        if (data.terminal !== '') {
           params.push(data.terminal)
         }
       }
       try {
         const res = await Query({
-          id:id,
-          dataContent:params
-        });
-        if (res.code === "0") {
-          let max
-          let dateArr = []
-          let dataArr = []
-          let chainArr = [0]
-          for(let i = 0; i<res.returnData.listValues.length;i++){
+          id: id,
+          dataContent: params
+        })
+        if (res.code === '0') {
+          const dateArr = []
+          const dataArr = []
+          const chainArr = [0]
+          for (let i = 0; i < res.returnData.listValues.length; i++) {
             dateArr.push(res.returnData.listValues[i].A)
             dataArr.push(res.returnData.listValues[i].count)
-            if(i>0){
-              chainArr.push((res.returnData.listValues[i].count - res.returnData.listValues[i-1].count)/res.returnData.listValues[i-1].count)
+            if (i > 0) {
+              chainArr.push(
+                (res.returnData.listValues[i].count - res.returnData.listValues[i - 1].count) /
+                  res.returnData.listValues[i - 1].count
+              )
             }
           }
-          max =  Math.max( ...dataArr )+1000
+          const max = Math.max(...dataArr) + 1000
           this.options.yAxis[0].max = max
-          this.options.xAxis.data = dateArr;
+          this.options.xAxis.data = dateArr
           this.options.series[0].data = dataArr
-           this.options.series[1].data = chainArr
+          this.options.series[1].data = chainArr
           this.resizeHandler()
         } else {
-          this.$message.error(res.message);
+          this.$message.error(res.message)
         }
       } catch (error) {
-        console.log("出错了", error);
+        console.log('出错了', error)
       }
     },
     setChartHeight() {
       const topBarHeight = 80
+      const headerBlankHeight = 24
+      const tabsWrapperHeight = 62
       const headerHeight = this.$refs['headerWrapper'].offsetHeight
-      const footerBlackHeight = 24
-      this.chartHeight = `calc(100vh - ${topBarHeight + headerHeight + footerBlackHeight}px)`
+      const footerBlankHeight = 24
+      this.chartHeight = `calc(100vh - ${
+        topBarHeight + headerBlankHeight + tabsWrapperHeight + headerHeight + footerBlankHeight
+      }px)`
     },
     resizeHandler() {
       if (this.myChart) {
@@ -305,11 +312,6 @@ export default {
 
 <style lang="scss" scoped>
 .statstics-wrapper {
-  padding-left: 24px;
-  padding-right: 36px;
-  .statstics-header {
-    padding-top: 16px;
-  }
   .flight-statistics-chart {
     width: 100%;
   }

src/views/statisticsCharts/views/nodeStatisticsCharts.vue

@@ -0,0 +1,237 @@
+<template>
+  <div class="statstics-wrapper">
+    <div
+      ref="headerWrapper"
+      class="statstics-header"
+    >
+      <StatisticsHeader
+        title="扫描节点与位置分析"
+        :items="items"
+        @getFormData="getFormData"
+      />
+    </div>
+    <div class="statstics-content">
+      <div
+        id="chart"
+        class="flight-statistics-chart"
+        :style="{ height: chartHeight }"
+      />
+    </div>
+  </div>
+</template>
+
+<script>
+import StatisticsHeader from '../components/statisticsHeader.vue'
+import { Query } from '@/api/dataIntegration'
+import { mapGetters } from 'vuex'
+export default {
+  name: 'FlightStatisticsCharts',
+  components: { StatisticsHeader },
+  data() {
+    return {
+      items: [
+        {
+          prop: 'airport',
+          inputType: 'select',
+          placeholder: '航站选择',
+          filterable: true,
+          clearable: true,
+          // multiple: true,
+          // disabled: true,
+          options: []
+        },
+        {
+          prop: 'inOrOut',
+          inputType: 'select',
+          placeholder: '请选择进离港',
+          clearable: true,
+          options: [
+            {
+              label: '离港',
+              value: 'L'
+            },
+            {
+              label: '进港',
+              value: 'X'
+            },
+            {
+              label: '中转',
+              value: 'T'
+            }
+          ]
+        },
+        {
+          prop: 'dateTime',
+          inputType: 'datePicker',
+          clearable: true,
+          options: []
+        }
+      ],
+      myChart: null,
+      debounceTime: 300,
+      chartHeight: '70vh',
+      options: {
+        legend: {
+          top: 32,
+          right: 32,
+          data: ['离港', '进港', '中转']
+        },
+        label: {
+          show: true,
+          formatter: function (params) {
+            return params.value
+          }
+        },
+        radar: {
+          indicator: [],
+          axisName: {
+            padding: 10,
+            color: '#303133',
+            fontFamily: 'Helvetica, "Microsoft YaHei"'
+          }
+        },
+        series: [
+          {
+            name: '',
+            type: 'radar',
+            areaStyle: {
+              color: '#6897D8'
+            },
+            itemStyle: {
+              color: '#ffffff',
+              borderWidth: 2,
+              borderColor: '#4475B8'
+            },
+            lineStyle: {
+              color: '#4475B8',
+              width: 2
+            },
+            data: []
+          }
+        ]
+      }
+    }
+  },
+  computed: {
+    ...mapGetters(['sidebar', 'permission_routes'])
+  },
+  watch: {
+    // 监听数据变化 重绘图形
+    // options: {
+    //   handler(obj) {
+    //     this.myChart.setOption(obj)
+    //   },
+    //   deep: true
+    // },
+    'sidebar.expand'() {
+      this.resizeHandler()
+    }
+  },
+  mounted() {
+    this.setChartHeight()
+    this.myChart = this.$echarts.init(document.getElementById('chart'))
+    // this.myChart.setOption(this.options)
+    // 监听页面缩放
+    window.addEventListener('resize', this.setChartHeight)
+    window.addEventListener('resize', this._.debounce(this.resizeHandler, this.debounceTime))
+    this.$nextTick(() => {
+      this.resizeHandler()
+    })
+  },
+  beforeDestroy() {
+    // 销毁实例和移除监听
+    window.removeEventListener('resize', this.setChartHeight)
+    if (this.myChart) {
+      this.myChart.dispose()
+      window.removeEventListener('resize', this.resizeHandler)
+      this.myChart = null
+    }
+  },
+  methods: {
+    getFormData(data) {
+      this.getData(data)
+    },
+    // 243 时间类型 查询范围 开始时间  结束时间  进离岗  航线/航站/航站楼
+    // 244 时间类型 开始时间  结束时间  进离岗  大区
+    async getData(data) {
+      let id
+      let params = []
+      if (data.airport === '') {
+        this.$message.warning('请先选择航站')
+        return
+      }
+      if (data.inOrOut === '') {
+        this.$message.warning('请先选择进离港')
+        return
+      }
+      if (data.dateTime === '') {
+        this.$message.warning('请先选择统计时间范围')
+        return
+      }
+      id = DATACONTENT_ID.nodeStatistics
+      params = [data.airport, data.inOrOut, data.dateTime[0], data.dateTime[1]]
+      try {
+        const res = await Query({
+          id: id,
+          dataContent: params
+        })
+        if (res.code === '0') {
+          const map = {
+            L: '离港',
+            X: '进港',
+            T: '中转'
+          }
+          const labels = Object.keys(res.returnData.listValues[0])
+          const datas = Object.values(res.returnData.listValues[0])
+          const max = Math.max(...datas) + 100
+          this.options.legend.data = [map[data.inOrOut]]
+          this.options.radar.indicator = labels.map(item => {
+            return {
+              name: item,
+              max
+            }
+          })
+          this.options.series[0].data = [
+            {
+              value: datas,
+              name: map[data.inOrOut]
+            }
+          ]
+          this.myChart.setOption(this.options)
+          this.resizeHandler()
+        } else {
+          this.$message.error(res.message)
+        }
+      } catch (error) {
+        console.log('出错了', error)
+      }
+    },
+    setChartHeight() {
+      const topBarHeight = 80
+      const headerBlankHeight = 24
+      const tabsWrapperHeight = 62
+      const headerHeight = this.$refs['headerWrapper'].offsetHeight
+      const footerBlankHeight = 24
+      this.chartHeight = `calc(100vh - ${
+        topBarHeight + headerBlankHeight + tabsWrapperHeight + headerHeight + footerBlankHeight
+      }px)`
+    },
+    resizeHandler() {
+      if (this.myChart) {
+        this.myChart.resize()
+      }
+    }
+  }
+}
+</script>
+
+<style lang="scss" scoped>
+.statstics-wrapper {
+  .statstics-content {
+    background-color: #fff;
+  }
+  .flight-statistics-chart {
+    width: 100%;
+  }
+}
+</style>