货机航班计划统计

public/config.js

@@ -314,6 +314,8 @@ var DATACONTENT_ID = {
   modeDomesticentryTable: 1803670, //国内进港
   modeInternationalexportTable: 1803671, //国际出港
   modeInternationaladvanceTable: 1803672, //国际进港
+  modeCargoFlightStatisTable: 1803673, //货机航班计划统计表-汇总
+  modeCargoFlightTimeTable: 1803674, //货机航班计划统计表-小时
 };
 
 var SERVICE_ID = {

src/router/routes/routes-file-seven.ts

@@ -103,6 +103,15 @@ const HomeRoutes = {
       component: () =>
         import("@/views/statisticalanalysis/Internationaladvance/index.vue"),
     },
+    {
+      path: "/statisticalanalysis/cargoflight",
+      name: "Cargoflight",
+      meta: {
+        title: "货机航班计划统计",
+      },
+      component: () =>
+        import("@/views/statisticalanalysis/cargoflight/index.vue"),
+    },
   ],
 };
 

src/views/statisticalanalysis/cargoflight/index.vue

@@ -0,0 +1,427 @@
+<template>
+  <div class="airportInfo">
+    <div class="variable">
+      <StatisticsHeader
+        :title="titleTop"
+        :items="formItems"
+        :data="formData"
+        :eledata="eledata"
+        with-setting
+        :withSetting="false"
+        :withExport="true"
+        :set="set"
+        :action="action"
+        :asShow="asShow"
+        @getFormData="getFormData"
+        @export="Excelto"
+        @upset="upset"
+      />
+    </div>
+    <div class="echart">
+      <Tableformbrs :tableList="tableList" action="10" :set="set" />
+      <Tableformbrs
+        :tableList="tableLister"
+        action="11"
+        :set="set"
+        style="margin-top: 10px"
+      />
+      <div class="imgechatr">
+        <Echarts :id="dataid" :option="echartsData" />
+      </div>
+    </div>
+  </div>
+</template>
+
+<script>
+import Echarts from "../components/echart/echartsgas.vue";
+import Tableformbrs from "../components/echart/tableforms.vue";
+import StatisticsHeader from "../components/echart/statisticsHeader.vue";
+import { export_json_to_excel } from "@/utils/Export2Excel";
+import { Query } from "@/api/webApi";
+export default {
+  name: "ChartsBar",
+  data() {
+    return {
+      asShow: false,
+      optiondata: [],
+      picShow: true, //图片表格切换
+      action: 10,
+      dataid: "collection_ecahrt10",
+      listqueryTemplateID: DATACONTENT_ID.modeCargoFlightStatisTable,
+      listqueryTemplatesID: DATACONTENT_ID.modeCargoFlightTimeTable,
+      eledata: null,
+      set: "",
+      tableList: [],
+      tableListcop: [],
+      listname: "",
+      listHeader: [],
+      listnames: "",
+      listHeaders: [],
+      tableData: {
+        time: [],
+        data1: [],
+        data2: [],
+        kg: "",
+        tyol: "",
+      },
+      formData: {
+        airport: "",
+        dateTime: "",
+      },
+      tableLister: [],
+      echartsData: {
+        time: [
+          "t0",
+          "t1",
+          "t2",
+          "t3",
+          "t4",
+          "t5",
+          "t6",
+          "t7",
+          "t8",
+          "t9",
+          "t10",
+          "t11",
+          "t12",
+          "t13",
+          "t14",
+          "t15",
+          "t16",
+          "t17",
+          "t18",
+          "t19",
+          "t20",
+          "t21",
+          "t22",
+          "t23",
+        ],
+        list: [],
+      },
+      titleTop: "货机航班计划统计",
+      formItems: [
+        {
+          prop: "dateTime",
+          inputType: "datetimerange",
+          clearable: true,
+          width: "240px",
+          options: [],
+        },
+      ],
+    };
+  },
+  mounted() {
+    // this.getQuery([]);
+  },
+  watch: {
+    // 监听数据变化，重绘折线图
+    option: {
+      deep: true,
+      handler(newVal) {},
+    },
+  },
+  destroyed() {},
+  methods: {
+    getFormData(data) {
+      this.tableData.time = [];
+      this.tableData.data1 = [];
+      this.tableData.data2 = [];
+      let option = [
+        {
+          fd1: data.dateTime[0],
+          fd2: data.dateTime[1],
+        },
+      ];
+      this.getQuery(option, null);
+      this.getQuerys(option, null);
+      this.listname =
+        " 货机航班计划统计表-汇总" + data.dateTime[0] + "--" + data.dateTime[1];
+      this.listHeader = [
+        "日期",
+        "汇总",
+        "进港",
+        "出港",
+        "国内",
+        "国际及地区",
+        "国内出港",
+        "国内进港",
+        "国际及地区出港",
+        "国际及地区进港",
+      ];
+      this.listnames =
+        "货机航班计划统计表-小时" + data.dateTime[0] + "--" + data.dateTime[1];
+      this.listHeaders = [
+        "日期",
+        "t0",
+        "t1",
+        "t2",
+        "t3",
+        "t4",
+        "t5",
+        "t6",
+        "t7",
+        "t8",
+        "t9",
+        "t10",
+        "t11",
+        "t12",
+        "t13",
+        "t14",
+        "t15",
+        "t16",
+        "t17",
+        "t18",
+        "t19",
+        "t20",
+        "t21",
+        "t22",
+        "t23",
+      ];
+    },
+    //获取表格数据
+    async getQuery(data, dat) {
+      try {
+        const { code, returnData } = await Query({
+          id: this.listqueryTemplateID,
+          dataContent: data,
+        });
+        if (code == 0) {
+          this.tableData.time = [];
+          this.tableData.data1 = [];
+          this.tableData.data2 = [];
+          this.tableList = JSON.parse(JSON.stringify(returnData.listValues));
+          this.tableListcop = JSON.parse(JSON.stringify(returnData.listValues));
+          this.tableList.forEach((item, index) => {
+            item.indexs = index + 1;
+          });
+          this.tableListcop.forEach((item, index) => {
+            item.indexs = index + 1;
+          });
+          returnData.listValues.forEach((element) => {
+            this.tableData.data1 = [];
+          });
+          this.tableData.data1.push(0);
+          for (let index = 0; index < this.tableData.data2.length; index++) {
+            if (index > 0) {
+              const element =
+                (this.tableData.data2[index] -
+                  this.tableData.data2[index - 1]) /
+                this.tableData.data2[index - 1];
+              this.tableData.data1.push(
+                element.toFixed(2) ? element.toFixed(2) : 0
+              );
+              this.tableData.data1.forEach((element) => {
+                element = Number(element);
+                if (typeof element !== "number") {
+                  element = 0;
+                }
+              });
+            }
+          }
+        }
+      } catch (error) {
+        this.page--;
+      }
+    },
+    //获取表格数据
+    async getQuerys(data, dat) {
+      try {
+        const { code, returnData } = await Query({
+          id: this.listqueryTemplatesID,
+          dataContent: data,
+        });
+        if (code == 0) {
+          this.tableLister = returnData.listValues;
+          for (let index = 0; index < returnData.listValues.length; index++) {
+            this.echartsData.list[index] = new Array(
+              returnData.listValues[index].t0,
+              returnData.listValues[index].t1,
+              returnData.listValues[index].t2,
+              returnData.listValues[index].t3,
+              returnData.listValues[index].t4,
+              returnData.listValues[index].t5,
+              returnData.listValues[index].t6,
+              returnData.listValues[index].t7,
+              returnData.listValues[index].t8,
+              returnData.listValues[index].t9,
+              returnData.listValues[index].t10,
+              returnData.listValues[index].t11,
+              returnData.listValues[index].t12,
+              returnData.listValues[index].t13,
+              returnData.listValues[index].t14,
+              returnData.listValues[index].t15,
+              returnData.listValues[index].t16,
+              returnData.listValues[index].t17,
+              returnData.listValues[index].t18,
+              returnData.listValues[index].t19,
+              returnData.listValues[index].t20,
+              returnData.listValues[index].t21,
+              returnData.listValues[index].t22,
+              returnData.listValues[index].t23
+            );
+          }
+        }
+      } catch (error) {
+        this.page--;
+      }
+    },
+    Excelto() {
+      this.tableToExcel();
+      this.tableToExcels();
+    },
+    //导出
+    tableToExcel() {
+      import("../../../utils/Export2Excel").then((excel) => {
+        // 设置导出表格的头部
+        const tHeader = this.listHeader;
+        // 将要导出的数据进行一个过滤
+        /**
+         * 源数据导入到excel的数据每一条重新拼成一个数组,数组里的每个元素就是filterVal里的每个字段
+         */
+        const data = this.tableListcop.map((item, index) => {
+          return [
+            item.dat,
+            item.total,
+            item.landing,
+            item.departure,
+            item.d,
+            item.i,
+            item.departure_d,
+            item.landing_d,
+            item.departure_i,
+            item.landing_i,
+          ];
+        });
+        data[data.length - 1].indexs = "总计";
+        // 调用我们封装好的方法进行导出Excel
+        excel.export_json_to_excel({
+          // 导出的头部
+          header: tHeader,
+          // 导出的内容
+          data,
+          // 导出的文件名称
+          filename: this.listname,
+          // 导出的表格宽度是否自动
+          autoWidth: true,
+          // 导出文件的后缀类型
+          bookType: "xlsx",
+        });
+      });
+    },
+    tableToExcels() {
+      import("../../../utils/Export2Excel").then((excel) => {
+        // 设置导出表格的头部
+        const tHeader = this.listHeaders;
+        // 将要导出的数据进行一个过滤
+        /**
+         * 源数据导入到excel的数据每一条重新拼成一个数组,数组里的每个元素就是filterVal里的每个字段
+         */
+        const data = this.tableLister.map((item, index) => {
+          return [
+            item.dat,
+            item.t0,
+            item.t1,
+            item.t2,
+            item.t3,
+            item.t4,
+            item.t5,
+            item.t6,
+            item.t7,
+            item.t8,
+            item.t9,
+            item.t10,
+            item.t11,
+            item.t12,
+            item.t13,
+            item.t14,
+            item.t15,
+            item.t16,
+            item.t17,
+            item.t18,
+            item.t19,
+            item.t20,
+            item.t21,
+            item.t22,
+            item.t23,
+          ];
+        });
+        data[data.length - 1].indexs = "总计";
+        // 调用我们封装好的方法进行导出Excel
+        excel.export_json_to_excel({
+          // 导出的头部
+          header: tHeader,
+          // 导出的内容
+          data,
+          // 导出的文件名称
+          filename: this.listnames,
+          // 导出的表格宽度是否自动
+          autoWidth: true,
+          // 导出文件的后缀类型
+          bookType: "xlsx",
+        });
+      });
+    },
+    upset(data) {
+      this.picShow = data;
+    },
+  },
+  components: {
+    Echarts,
+    StatisticsHeader,
+    Tableformbrs,
+  },
+};
+</script>
+<style lang="scss" scoped>
+.airportInfo {
+  position: relative;
+  .header {
+    width: 103%;
+    height: 36px;
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    background: #f7f7f7;
+    position: relative;
+    left: -23px;
+    > .nav {
+      padding: 0 30px 0 30px;
+      cursor: pointer;
+      font-size: 16px;
+      font-family: Microsoft YaHei;
+      font-weight: 400;
+      color: #101116;
+    }
+    > .navs {
+      height: 100%;
+      padding: 0 30px 0 30px;
+      cursor: pointer;
+      display: flex;
+      align-items: center;
+      font-size: 16px;
+      font-family: Microsoft YaHei;
+      font-weight: bold;
+      color: #ac014d;
+      border-bottom: 2px solid #ac014d;
+    }
+  }
+  .variable {
+    width: 100%;
+    height: 64px;
+  }
+  .echart {
+    width: 100%;
+    height: 746px;
+    position: absolute;
+    background: #ffffff;
+    box-shadow: 0px 3px 3px 0px rgba(0, 0, 0, 0.1);
+    border-radius: 4px;
+    > .imgechatr {
+      width: 100%;
+      height: 49%;
+      position: absolute;
+      bottom: 0;
+    }
+  }
+}
+</style>

src/views/statisticalanalysis/components/echart/echarts.js

@@ -661,3 +661,101 @@ export const collectionStatistics = {
     },
   ],
 };
+
+export const collection = {
+  title: {
+    // text: '2019年销售水量和主营业务收入对比',
+    textStyle: {
+      align: "center",
+      color: "#fff",
+      fontSize: 20,
+    },
+    top: "3%",
+    left: "0%",
+  },
+  // backgroundColor: '#F5F7FA',
+  grid: {
+    top: "10%",
+    left: "5%",
+    right: "5%",
+    bottom: "9%", //也可设置left和right设置距离来控制图表的大小
+  },
+  tooltip: {
+    trigger: "axis",
+    axisPointer: {
+      type: "shadow",
+      label: {
+        show: true,
+      },
+    },
+  },
+  // legend: {
+  //   data: ["环比", ""],
+  //   top: "0%",
+  //   right: "10%",
+  //   icon: "rect",
+  //   textStyle: {
+  //     color: "#ffffff",
+  //   },
+  // },
+  // tooltip: {
+  //   trigger: "axis",
+  //   axisPointer: {
+  //     type: "shadow",
+  //   },
+  // },
+  xAxis: {
+    data: [],
+    axisLine: {
+      show: true, //隐藏X轴轴线
+      lineStyle: {
+        color: "#000000",
+      },
+    },
+    axisTick: {
+      show: true, //隐藏X轴刻度
+    },
+    axisLabel: {
+      show: true,
+      textStyle: {
+        color: "#000000", //X轴文字颜色
+      },
+    },
+  },
+  yAxis: [
+    {
+      type: "value",
+      name: "",
+      nameTextStyle: {
+        color: "#000000",
+      },
+      splitLine: {
+        show: false,
+      },
+      axisTick: {
+        show: false,
+      },
+
+      axisLine: {
+        show: true,
+        lineStyle: {
+          color: "#000000",
+        },
+      },
+      axisLabel: {
+        show: true,
+        textStyle: {
+          color: "#000000",
+        },
+      },
+    },
+  ],
+  series: [
+    // {
+    //   name: "",
+    //   type: "bar",
+    //   // barWidth: 18,
+    //   data: [],
+    // },
+  ],
+};

src/views/statisticalanalysis/components/echart/echartsgas.vue

@@ -0,0 +1,94 @@
+<template>
+  <div
+    style="height: 100%; width: 100%; position: absolute; left: 0; top: 0"
+    class="ChartsBar"
+    :id="id"
+  ></div>
+</template>
+
+<script>
+import { markRaw } from "vue";
+import * as echarts from "echarts";
+import * as _ from "lodash";
+import { collection } from "./echarts.js";
+// 柱状图初始数据
+export default {
+  props: {
+    // 柱状图生成所需id
+    id: {
+      type: String,
+      default: "collection_ecahrt",
+    },
+    // 柱状图额外的数据
+    option: {
+      type: Object,
+      default: () => {},
+    },
+  },
+  data() {
+    return {
+      myChart: null, //柱状图实例
+    };
+  },
+  mounted() {
+    // 柱状图dom
+    const chartDom = document.getElementById(this.id);
+    // 柱状图初始化
+    this.myChart = markRaw(echarts.init(chartDom));
+    collection.xAxis.data = this.option.time;
+    // this.option.list.forEach((item, index) => {
+    //   collection.series.push({
+    //     name: "",
+    //     type: "bar",
+    //     // barWidth: 18,
+    //     data: item,
+    //   });
+    // });
+    // collection.series[0].data = this.option.data1;
+    // 生成柱状图
+    this.myChart.setOption(collection);
+    // 监听页面缩放 防止dom重复渲染
+    window.addEventListener("resize", _.debounce(this.handle, this.desc));
+  },
+  watch: {
+    // 监听数据变化，重绘折线图
+    option: {
+      deep: true,
+      handler(newVal) {
+        collection.series = [];
+        const chartDom = document.getElementById(this.id);
+        // 先移除之前的实例，保证重绘的流畅性
+        chartDom.removeAttribute("_echarts_instance_");
+        this.myChart = markRaw(echarts.init(chartDom));
+        collection.xAxis.data = newVal.time;
+        let arr = JSON.parse(JSON.stringify(newVal.list));
+        console.log(arr);
+        for (let index = 0; index < arr.length; index++) {
+          collection.series.push({
+            name: "",
+            type: "bar",
+            // barWidth: 18,
+            data: arr[index],
+          });
+        }
+        this.myChart.setOption(collection);
+      },
+    },
+  },
+  destroyed() {
+    // 销毁实例和移除监听
+    this.myChart.dispose();
+    window.removeEventListener("resize", this.handle);
+  },
+  methods: {
+    /**
+     * @description: 图形缩放
+     * @param {*}
+     * @return {*}
+     */
+    handle() {
+      this.myChart.resize();
+    },
+  },
+};
+</script>

src/views/statisticalanalysis/components/echart/tableforms.vue

@@ -701,6 +701,255 @@
           </el-table-column>
         </el-table>
       </template>
+      <template v-if="tableList.length && action == 10">
+        <el-table
+          :data="tableList"
+          style="width: 100%"
+          :row-style="rowStyle"
+          :style="dataTableContentStyle"
+          height="calc(40vh - 190px)"
+          max-height="calc(40vh - 190px)"
+          :stripe="tableProps.stripe"
+          :border="tableProps.border"
+          :row-key="tableProps.rowKey"
+          :highlight-current-row="tableProps.highlightCurrentRow"
+          :header-cell-class-name="tableProps.headerCellClassName"
+          :tooltip-effect="tableProps.tooltipEffect"
+          :summary-method="totalOutPrice"
+          :show-summary="tableProps.showSummary"
+        >
+          <el-table-column
+            prop="dat"
+            label="日期"
+            :show-overflow-tooltip="tableColumnProperty.showOverflowTooltip"
+          >
+          </el-table-column>
+          <el-table-column
+            prop="total"
+            label="汇总"
+            :show-overflow-tooltip="tableColumnProperty.showOverflowTooltip"
+          >
+          </el-table-column>
+          <el-table-column
+            prop="landing"
+            label="进港"
+            :show-overflow-tooltip="tableColumnProperty.showOverflowTooltip"
+          >
+          </el-table-column>
+          <el-table-column
+            prop="departure"
+            label="出港"
+            :show-overflow-tooltip="tableColumnProperty.showOverflowTooltip"
+          >
+          </el-table-column>
+          <el-table-column
+            prop="d"
+            label="国内"
+            :show-overflow-tooltip="tableColumnProperty.showOverflowTooltip"
+          >
+          </el-table-column>
+          <el-table-column
+            prop="i"
+            label="国际及地区"
+            :show-overflow-tooltip="tableColumnProperty.showOverflowTooltip"
+          >
+          </el-table-column>
+          <el-table-column
+            prop="departure_d"
+            label="国内出港"
+            :show-overflow-tooltip="tableColumnProperty.showOverflowTooltip"
+          >
+          </el-table-column>
+          <el-table-column
+            prop="landing_d"
+            label="国内进港"
+            :show-overflow-tooltip="tableColumnProperty.showOverflowTooltip"
+          >
+          </el-table-column>
+          <el-table-column
+            prop="departure_i"
+            label="国际及地区出港"
+            :show-overflow-tooltip="tableColumnProperty.showOverflowTooltip"
+          >
+          </el-table-column>
+          <el-table-column
+            prop="landing_i"
+            label="国际及地区进港"
+            :show-overflow-tooltip="tableColumnProperty.showOverflowTooltip"
+          >
+          </el-table-column>
+        </el-table>
+      </template>
+      <template v-if="tableList.length && action == 11">
+        <el-table
+          :data="tableList"
+          style="width: 100%"
+          :row-style="rowStyle"
+          :style="dataTableContentStyle"
+          height="calc(40vh - 190px)"
+          max-height="calc(40vh - 190px)"
+          :stripe="tableProps.stripe"
+          :border="tableProps.border"
+          :row-key="tableProps.rowKey"
+          :highlight-current-row="tableProps.highlightCurrentRow"
+          :header-cell-class-name="tableProps.headerCellClassName"
+          :tooltip-effect="tableProps.tooltipEffect"
+          :summary-method="totalOutPrice"
+          :show-summary="tableProps.showSummary"
+        >
+          <el-table-column
+            prop="dat"
+            label="日期"
+            width="100"
+            :show-overflow-tooltip="tableColumnProperty.showOverflowTooltip"
+          >
+          </el-table-column>
+          <el-table-column
+            prop="t0"
+            label="t0"
+            :show-overflow-tooltip="tableColumnProperty.showOverflowTooltip"
+          >
+          </el-table-column>
+          <el-table-column
+            prop="t1"
+            label="t1"
+            :show-overflow-tooltip="tableColumnProperty.showOverflowTooltip"
+          >
+          </el-table-column>
+          <el-table-column
+            prop="t2"
+            label="t2"
+            :show-overflow-tooltip="tableColumnProperty.showOverflowTooltip"
+          >
+          </el-table-column>
+          <el-table-column
+            prop="t3"
+            label="t3"
+            :show-overflow-tooltip="tableColumnProperty.showOverflowTooltip"
+          >
+          </el-table-column>
+          <el-table-column
+            prop="t4"
+            label="t4"
+            :show-overflow-tooltip="tableColumnProperty.showOverflowTooltip"
+          >
+          </el-table-column>
+          <el-table-column
+            prop="t5"
+            label="t5"
+            :show-overflow-tooltip="tableColumnProperty.showOverflowTooltip"
+          >
+          </el-table-column>
+          <el-table-column
+            prop="t6"
+            label="t6"
+            :show-overflow-tooltip="tableColumnProperty.showOverflowTooltip"
+          >
+          </el-table-column>
+          <el-table-column
+            prop="t7"
+            label="t7"
+            :show-overflow-tooltip="tableColumnProperty.showOverflowTooltip"
+          >
+          </el-table-column>
+          <el-table-column
+            prop="t8"
+            label="t8"
+            :show-overflow-tooltip="tableColumnProperty.showOverflowTooltip"
+          >
+          </el-table-column>
+          <el-table-column
+            prop="t9"
+            label="t9"
+            :show-overflow-tooltip="tableColumnProperty.showOverflowTooltip"
+          >
+          </el-table-column>
+          <el-table-column
+            prop="t10"
+            label="t10"
+            :show-overflow-tooltip="tableColumnProperty.showOverflowTooltip"
+          >
+          </el-table-column>
+          <el-table-column
+            prop="t11"
+            label="t11"
+            :show-overflow-tooltip="tableColumnProperty.showOverflowTooltip"
+          >
+          </el-table-column>
+          <el-table-column
+            prop="t12"
+            label="t12"
+            :show-overflow-tooltip="tableColumnProperty.showOverflowTooltip"
+          >
+          </el-table-column>
+          <el-table-column
+            prop="t13"
+            label="t13"
+            :show-overflow-tooltip="tableColumnProperty.showOverflowTooltip"
+          >
+          </el-table-column>
+          <el-table-column
+            prop="t14"
+            label="t14"
+            :show-overflow-tooltip="tableColumnProperty.showOverflowTooltip"
+          >
+          </el-table-column>
+          <el-table-column
+            prop="t15"
+            label="t15"
+            :show-overflow-tooltip="tableColumnProperty.showOverflowTooltip"
+          >
+          </el-table-column>
+          <el-table-column
+            prop="t16"
+            label="t16"
+            :show-overflow-tooltip="tableColumnProperty.showOverflowTooltip"
+          >
+          </el-table-column>
+          <el-table-column
+            prop="t17"
+            label="t17"
+            :show-overflow-tooltip="tableColumnProperty.showOverflowTooltip"
+          >
+          </el-table-column>
+          <el-table-column
+            prop="t18"
+            label="t18"
+            :show-overflow-tooltip="tableColumnProperty.showOverflowTooltip"
+          >
+          </el-table-column>
+          <el-table-column
+            prop="t19"
+            label="t19"
+            :show-overflow-tooltip="tableColumnProperty.showOverflowTooltip"
+          >
+          </el-table-column>
+          <el-table-column
+            prop="t20"
+            label="t20"
+            :show-overflow-tooltip="tableColumnProperty.showOverflowTooltip"
+          >
+          </el-table-column>
+          <el-table-column
+            prop="t21"
+            label="t21"
+            :show-overflow-tooltip="tableColumnProperty.showOverflowTooltip"
+          >
+          </el-table-column>
+          <el-table-column
+            prop="t22"
+            label="t22"
+            :show-overflow-tooltip="tableColumnProperty.showOverflowTooltip"
+          >
+          </el-table-column>
+          <el-table-column
+            prop="t23"
+            label="t23"
+            :show-overflow-tooltip="tableColumnProperty.showOverflowTooltip"
+          >
+          </el-table-column>
+        </el-table>
+      </template>
     </div>
   </div>
 </template>