统计

src/views/flightStatistics/components/flightStatisticsHeader.vue

@@ -3,11 +3,7 @@
     <template v-if="title">
       <div class="title">{{ title }}</div>
     </template>
-    <el-form
-      ref="form"
-      class="form"
-      :model="formData"
-    >
+    <el-form ref="form" class="form" :model="formData">
       <el-form-item
         v-for="item in formItems"
         :key="item.prop"
@@ -25,12 +21,16 @@
         <template v-if="item.inputType === 'select'">
           <el-select
             v-model="formData[item.prop]"
+            :filterable ="item.filterable"
             :size="item.size || 'small'"
             :placeholder="item.placeholder || '请选择'"
-            :multiple="item.multiple"
             :clearable="item.clearable"
             :disabled="item.disabled"
-            @change="value => { item.changeHandler && item.changeHandler(value) }"
+            @change="
+              (value) => {
+                item.changeHandler && item.changeHandler(value);
+              }
+            "
           >
             <el-option
               v-for="option in item.options"
@@ -40,6 +40,17 @@
             />
           </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]"
@@ -52,208 +63,349 @@
           />
         </template>
       </el-form-item>
+      <el-button size="small" @click="getData()">查询</el-button>
     </el-form>
   </div>
 </template>
 
 <script>
+import { Query, GeneralDataReception } from "@/api/dataIntegration";
 export default {
-  name: 'FlightStatisticsHeader',
+  name: "FlightStatisticsHeader",
   props: {
     title: {
       type: String,
-      default: ''
+      default: "",
     },
     items: {
       type: Array,
-      default: () => []
+      default: () => [],
     },
     data: {
       type: Object,
-      default: undefined
-    }
+      default: undefined,
+    },
   },
   data() {
-    const that = this
+    const that = this;
     return {
       formData: {
-        range: 'all',
-        inOrOut: 'all',
-        interval: 'month',
-        airline: '',
-        area: '',
-        airport: '',
-        terminal: ''
+        range: "",
+        inOrOut: "",
+        interval: "",
+        airline: "",
+        area: "",
+        airport: "",
+        terminal: "",
+        dateTime:""
       },
       formItems: [
         {
-          prop: 'range',
-          inputType: 'select',
-          placeholder: '请选择统计范围',
+          prop: "range",
+          inputType: "select",
+          placeholder: "请选择统计范围",
           options: [
             {
-              value: 'all',
-              label: '全部统计范围'
+              value: "全部",
+              label: "全部",
             },
             {
-              value: 'airline',
-              label: '航线'
+              value: "航线",
+              label: "航线",
             },
             {
-              value: 'area',
-              label: '大区'
+              value: "大区",
+              label: "大区",
             },
             {
-              value: 'airport',
-              label: '航站'
+              value: "航站",
+              label: "航站",
             },
             {
-              value: 'terminal',
-              label: '航站楼'
-            }
+              value: "航站楼",
+              label: "航站楼",
+            },
           ],
           changeHandler(value) {
-            that.formData.airline = ''
-            that.formData.area = ''
-            that.formData.airport = ''
-            that.formData.terminal = ''
-            that.formItems[3].disabled = true
-            that.formItems[4].disabled = true
-            that.formItems[5].disabled = true
-            that.formItems[6].disabled = true
+            that.getInOrOut(value);
+            that.formData.airline = "";
+            that.formData.area = "";
+            that.formData.airport = "";
+            that.formData.terminal = "";
+            that.formData.interval = "";
+            that.formItems[4].disabled = true;
+            that.formItems[5].disabled = true;
+            that.formItems[6].disabled = true;
+            that.formItems[7].disabled = true;
             switch (value) {
-              case 'airline':
-                that.formItems[3].disabled = false
-                break
-              case 'area':
-                that.formItems[4].disabled = false
-                break
-              case 'airport':
-                that.formItems[5].disabled = false
-                break
-              case 'terminal':
-                that.formItems[6].disabled = false
-                break
+              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
+                break;
             }
-          }
+          },
         },
         {
-          prop: 'inOrOut',
-          inputType: 'select',
-          placeholder: '请选择进离港',
-          options: [
-            {
-              value: 'all',
-              label: '全部进离港'
-            },
-            {
-              value: 'arrival',
-              label: '进港'
-            },
-            {
-              value: 'departure',
-              label: '离港'
-            },
-            {
-              value: 'transfer',
-              label: '中转'
-            }
-          ]
+          prop: "inOrOut",
+          inputType: "select",
+          placeholder: "请选择进离港",
+          clearable: true,
+          options: [],
         },
         {
-          prop: 'interval',
-          inputType: 'select',
-          placeholder: '',
+          prop: "interval",
+          inputType: "select",
+          placeholder: "请选择时间类型",
+          clearable: true,
           options: [
             {
-              value: 'sevenDays',
-              label: '最近七天'
+              value: "日",
+              label: "按日统计",
             },
             {
-              value: 'month',
-              label: '按月统计'
+              value: "月",
+              label: "按月统计",
             },
             {
-              value: 'quarter',
-              label: '按季统计'
+              value: "季",
+              label: "按季统计",
             },
             {
-              value: 'year',
-              label: '按月统计'
-            },
-            {
-              value: 'custom',
-              label: '自定义时间段'
+              value: "年",
+              label: "按年统计",
             }
-          ]
+          ],
+        },
+        {
+          prop: "dateTime",
+          inputType: "datePicker",
+          placeholder: "开始时间",
+          clearable: true,
+          options: [],
         },
         {
-          prop: 'airline',
-          inputType: 'select',
-          placeholder: '航线选择',
+          prop: "airline",
+          inputType: "select",
+          placeholder: "航线选择",
+          filterable:true,
           clearable: true,
           disabled: true,
-          options: []
+          options: [],
         },
         {
-          prop: 'area',
-          inputType: 'select',
-          placeholder: '大区选择',
+          prop: "area",
+          inputType: "select",
+          placeholder: "大区选择",
+          filterable:true,
           clearable: true,
           disabled: true,
-          options: []
+          options: [],
         },
         {
-          prop: 'airport',
-          inputType: 'select',
-          placeholder: '航站选择',
+          prop: "airport",
+          inputType: "select",
+          placeholder: "航站选择",
+          filterable:true,
           clearable: true,
-          multiple: true,
+          // multiple: true,
           disabled: true,
           options: [
-            {
-              value: 'PEK',
-              label: 'PEK'
-            },
-            {
-              value: 'CTU',
-              label: 'CTU'
-            }
-          ]
+          ],
         },
         {
-          prop: 'terminal',
-          inputType: 'cascader',
-          placeholder: '航站楼选择',
+          prop: "terminal",
+          inputType: "select",
+          placeholder: "航站楼选择",
+          filterable:true,
           props: {
-            multiple: true
+            multiple: true,
           },
           clearable: true,
           disabled: true,
-          options: []
-        }
-      ]
-    }
+          options: [],
+        },
+      ],
+    };
   },
   watch: {
     items: {
       handler(val) {
-        val?.length && (this.formItems = val)
+        val?.length && (this.formItems = val);
       },
       deep: true,
-      immediate: true
+      immediate: true,
     },
     data: {
       handler(val) {
-        val && (this.formData = val)
+        val && (this.formData = val);
       },
       deep: true,
-      immediate: 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:246,
+          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:247,
+          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:248,
+          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:249,
+          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 getAirport(){
+      try {
+        const res = await Query({
+          id:249,
+          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:250,
+          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>
@@ -268,11 +420,11 @@ export default {
     height: 32px;
     line-height: 32px;
     font-size: 20px;
-    font-family: Helvetica, 'Microsoft YaHei';
+    font-family: Helvetica, "Microsoft YaHei";
     font-weight: bold;
     position: relative;
     &::before {
-      content: '';
+      content: "";
       width: 4px;
       height: 20px;
       background: #2d67e3;
@@ -288,6 +440,7 @@ export default {
     flex-wrap: wrap;
     > .el-form-item {
       margin-bottom: 24px;
+      // width: 150px;
       &:not(:last-child) {
         margin-right: 8px;
       }
@@ -300,7 +453,7 @@ export default {
           }
           .el-input__inner {
             border-radius: 4px;
-            font-family: Helvetica, 'Microsoft YaHei';
+            font-family: Helvetica, "Microsoft YaHei";
             color: #303133;
             border-color: #ffffff;
             &:hover {
@@ -311,14 +464,20 @@ export default {
             }
           }
         }
+        .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';
+              content: "\e78f";
             }
             .el-icon-arrow-down::before {
-              content: '\e790';
+              content: "\e790";
             }
             &:not(.is-disabled) {
               .el-input__icon,

src/views/flightStatistics/views/flightStatisticsCharts.vue

@@ -4,7 +4,7 @@
       ref="headerWrapper"
       class="statstics-header"
     >
-      <FlightStatisticsHeader title="航班量统计" />
+      <FlightStatisticsHeader title="航班量统计" @getFormData="getFormData"/>
     </div>
     <div class="statstics-content">
       <div
@@ -18,8 +18,8 @@
 
 <script>
 import FlightStatisticsHeader from '../components/flightStatisticsHeader.vue'
+import { Query, GeneralDataReception } from "@/api/dataIntegration";
 import { mapGetters } from 'vuex'
-
 export default {
   name: 'FlightStatisticsCharts',
   components: { FlightStatisticsHeader },
@@ -60,24 +60,7 @@ export default {
           bottom: '5%'
         },
         xAxis: {
-          data: [
-            '2020.01',
-            '2020.02',
-            '2020.03',
-            '2020.04',
-            '2020.05',
-            '2020.06',
-            '2020.07',
-            '2020.08',
-            '2020.09',
-            '2020.10',
-            '2020.11',
-            '2020.12',
-            '2021.01',
-            '2021.02',
-            '2021.03',
-            '2021.04'
-          ],
+          data: [],
           axisLine: {
             show: true,
             lineStyle: {
@@ -99,7 +82,7 @@ export default {
           {
             min: 0,
             max: 60000,
-            interval: 5000,
+            // interval: 5000,
             splitLine: {
               lineStyle: {
                 type: 'dashed',
@@ -146,52 +129,50 @@ export default {
             },
             barWidth: 40,
             data: [
-              54000, 54000, 54000, 54000, 54000, 54000, 54000, 54000, 54000, 54000, 54000, 54000, 54000, 54000, 54000,
-              54000
             ]
           },
-          {
-            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: [0.3, 0.3, 0.3, 0.3, 0.3, 0.3, 0.3, 0.3, 0.3, 0.3, 0.3, 0.3, 0.3, 0.3, 0.3, 0.3]
-          },
-          {
-            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: [0.2, 0.2, 0.2, 0.2, 0.2, 0.2, 0.2, 0.2, 0.2, 0.2, 0.2, 0.2, 0.2, 0.2, 0.2, 0.2]
-          }
+          // {
+          //   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: []
+          // }
         ]
       }
     }
@@ -232,6 +213,76 @@ export default {
     }
   },
   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 = 244
+        params = [data.interval,data.dateTime[0],data.dateTime[1],data.inOrOut,data.area]
+      }
+      else if(data.range!="大区"&&data.range!=""){
+        id = 243
+        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:id,
+          dataContent:params
+        });
+        if (res.code === "0") {
+          let max
+          let dateArr = []
+          let dataArr = []
+          for(let i = 0; i<res.returnData.listValues.length;i++){
+            dateArr.push(res.returnData.listValues[i].A)
+            dataArr.push(res.returnData.listValues[i].count)
+          }
+          max =  Math.max( ...dataArr )+1000
+          this.options.yAxis[0].max = max
+          this.options.xAxis.data = dateArr;
+          this.options.series[0].data = dataArr
+          this.resizeHandler()
+        } else {
+          this.$message.error(res.message);
+        }
+      } catch (error) {
+        console.log("出错了", error);
+      }
+    },
     setChartHeight() {
       const topBarHeight = 80
       const headerHeight = this.$refs['headerWrapper'].offsetHeight