111111111

src/components/generateEcharts/components/echart/commonChartsBar.js

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

src/components/generateEcharts/components/echart/commonChartsBar.vue

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

src/components/generateEcharts/components/echart/commonChartsLine.js

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

src/components/generateEcharts/components/echart/commonChartsLine.vue

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

src/components/generateEcharts/components/echart/statisticsHeader.vue

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

src/components/generateEcharts/index.vue

@@ -0,0 +1,284 @@
+<template>
+  <div class="echarts_cont">
+    <div class="ec_header">
+      <el-button class="but" size="mini" plain type="primary" @click="drawer = true">新增</el-button>
+    </div>
+    <el-drawer
+        title="配置图形"
+        :visible.sync="drawer"
+        direction="ltr">
+        <div class="configuration">
+          <el-form
+            :model="tableForm"
+            ref="airportCompanyForm"
+          >
+            <el-form-item
+              label="图形类型"
+              prop="parenttype"
+              size="default"
+            >
+              <el-select
+                v-model="tableForm.parenttype"
+                filterable
+                default-first-option
+                clearable
+                placeholder="请选择"
+              >
+                <el-option
+                  v-for="item in options"
+                  :key="item.v"
+                  :label="item.k"
+                  :value="item.v"
+                >
+                </el-option>
+              </el-select>
+            </el-form-item>
+          </el-form>
+          <el-form
+            :model="inHourDataOption"
+            ref="foldline"
+          >
+          <el-form-item label="图形名称">
+              <el-input clearable v-model="inHourDataOption.title.text"  size="small" placeholder="图形名称"></el-input>
+            </el-form-item>
+            <el-form-item label="图形x轴">
+              <el-input clearable v-model="inHourDataOption.xAxis[0].data"  size="small" placeholder="请输入x轴名称"></el-input>
+            </el-form-item>
+            <el-form-item label="图形标记">
+              <el-input clearable v-model="inHourDataOption.legend.data"  size="small" placeholder="请输入图形标记"></el-input>
+            </el-form-item>
+            <el-form-item label="图形幕布">
+              <el-select
+                v-model="inHourDataOption.series[0].areaStyle"
+                filterable
+                default-first-option
+                clearable
+                placeholder="请选择"
+              >
+                <el-option
+                  v-for="item in option"
+                  :key="item.v"
+                  :label="item.k"
+                  :value="item.v"
+                >
+                </el-option>
+              </el-select>
+            </el-form-item>
+            <el-form-item label="x轴颜色">
+              <el-input clearable v-model="inHourDataOption.xAxis[0].axisLine.lineStyle.color"  size="small" placeholder="请输入折点颜色"></el-input>
+            </el-form-item>
+            <el-form-item label="折线颜色">
+              <el-input clearable v-model="inHourDataOption.series[0].itemStyle.normal.lineStyle.color"  size="small" placeholder="请输入折线颜色"></el-input>
+            </el-form-item>
+            <el-form-item label="图形折点">
+              <el-select
+                v-model="inHourDataOption.series[0].symbol"
+                filterable
+                default-first-option
+                clearable
+                placeholder="请选择"
+              >
+                <el-option
+                  v-for="item in optionbreak"
+                  :key="item.v"
+                  :label="item.k"
+                  :value="item.v"
+                >
+                </el-option>
+              </el-select>
+            </el-form-item>
+            <el-form-item label="折点颜色">
+              <el-input clearable v-model="inHourDataOption.series[0].itemStyle.normal.color"  size="small" placeholder="请输入折点颜色"></el-input>
+            </el-form-item>
+            <el-form-item label="折点大小">
+              <el-input clearable v-model="inHourDataOption.series[0].symbolSize"  size="small" placeholder="折点大小"></el-input>
+            </el-form-item>
+          </el-form>
+        </div>
+      </el-drawer>
+    <div class="cont">
+      <BarCharts id="hover" :option="inHourDataOption"/>
+    </div>
+    <!-- <BarCharts :option="inHourDataOption"/> -->
+  </div>
+</template>
+
+<script>
+// import StatisticsHeader from "../../components/echart/statisticsHeader.vue";
+import BarCharts from './components/echart/commonChartsBar.vue'
+// import BarChartsr from '../../components/echart/commonChartsLine.vue'
+import { Query } from '@/api/webApi'
+const barOption = {
+  title: {
+    text: 'Stacked Area Chart'
+  },
+  tooltip: {
+    trigger: 'axis',
+    axisPointer: {
+      type: 'cross',
+      label: {
+        backgroundColor: '#6a7985'
+      }
+    }
+  },
+  legend: {
+    data: ['Email', 'Union Ads', 'Video Ads', 'Direct', 'Search Engine']
+  },
+  toolbox: {
+    feature: {
+      saveAsImage: {}
+    }
+  },
+  grid: {
+    top: '20%',
+    left: '3%',
+    right: '4%',
+    bottom: '3%',
+    containLabel: true
+  },
+  xAxis: [
+    {
+      type: 'category',
+      boundaryGap: false,
+      axisLine:{
+        lineStyle:{
+          color:'#000000',
+          width:2
+        }
+      },
+      data: ['Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat', 'Sun']
+    }
+  ],
+  yAxis: [
+    {
+      type: 'value',
+        //y轴颜色
+        axisLine: {
+            lineStyle: {
+                color: '#0000000'
+            }
+        },
+    }
+  ],
+  series: [
+    {
+      name: 'Email',
+      type: 'line',
+      stack: 'Total',
+      areaStyle: {},
+      symbol: 'circle',
+      itemStyle: {
+        normal: {
+          color: "#1F824E", //改变折线点的颜色
+          lineStyle: {
+            color: "#1F824E", //改变折线颜色
+          },
+        },
+      },
+      // emphasis: {
+      //   focus: 'series'
+      // },
+      data: [120, 132, 101, 134, 90, 230, 210]
+    }
+  ]
+};
+export default {
+  name: "Newecharts",
+  props: {
+  },
+  data () {
+    return {
+      inHourDataOption: this._.cloneDeep(barOption),
+      drawer: false,
+      tableForm: {
+        parenttype: ''
+      },
+      type: null,
+      options: [{
+        v: '折线图',
+        k: '折线图'
+      },{
+        v: '柱状图',
+        k: '柱状图'
+      },
+      {
+        v: '饼图',
+        k: '饼图'
+      },
+      {
+        v: '雷达图',
+        k: '雷达图'
+      }],
+      option: [{
+        v: {},
+        k: '启动'
+      },
+      {
+        v: null,
+        k: '关闭'
+      }],
+      optionbreak:[{
+        v: 'circle',
+        k: '启动'
+      },
+      {
+        v: 'none',
+        k: '取消'
+      }],
+    }
+  },
+  components: {
+    BarCharts
+  },
+  watch: {
+    tableForm: {
+      handler (val) {
+        if (val.parenttype == '折线图') {
+          this.type = 1
+        } else if (val.parenttype == '柱状图') {
+          this.type = 2
+        } else if (val.parenttype == '饼图') {
+          this.type = 3
+        } else if (val.parenttype == '柱状雷达图图') {
+          this.type = 4
+        }
+        // this.inHourDataOption = val.parenttype
+      },
+      deep: true,
+      immediate: true,
+    },
+  },
+  mounted() {
+    // this.inHourDataOption.series[0].areaStyle = null
+    // console.log(this.inHourDataOption.series[0].areaStyle)
+  },
+  methods: {
+
+  }
+};
+</script>
+
+<style lang="scss" scoped>
+.echarts_cont {
+  width: 100%;
+  height: calc(100vh - 110px);
+  >.ec_header{
+    width: 100%;
+    height: 62px;
+    z-index: 9999;
+    >.but{
+      float: right;
+    }
+  }
+  >.cont{
+    width: 100%;
+    height: 90%;
+  }
+  .configuration{
+    padding: 0 30px 0 25px;
+  }
+  ::v-deep  .el-form-item__content{
+    display: flex;
+  }
+}
+</style>

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

@@ -1112,6 +1112,32 @@ const exchangeup = {
     }]
   }]
 }
+const exchangemp = {
+  path: '/echarts',
+  name: 'Echarts',
+  component: Layout,
+  meta: {
+    title: '图形生成',
+  },
+  children: [{
+    path: '/echarts',
+    redirect: '/echarts/newecharts',
+    component: () => import('@/views/upecharts'),
+    meta: {
+      title: '图形生成',
+    },
+    children: [{
+      path: '/newecharts',
+      name: 'newecharts',
+      hidden: true,
+      component: () =>
+        import(
+          '@/views/upecharts/views/newecharts/newecharts'
+        ),
+      meta: { title: '新增图形' },
+    }]
+  }]
+}
 // 高级查询
 const advanceRoutes = {
   path: '/advance',

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

@@ -112,6 +112,7 @@
 import StatisticsHeader from "../../components/echart/statisticsHeader.vue";
 import BarCharts from '../../components/echart/commonChartsBar.vue'
 import BarChartsr from '../../components/echart/commonChartsLine.vue'
+import {Format} from '@/utils/validate'
 import { Query } from '@/api/webApi'
 const barOption = {
   tooltip: {
@@ -290,6 +291,12 @@ export default {
   },
   mounted() {
     this.getAiportList()
+    let arr = {
+      aircompany:"CZ",
+      dateTime: [Format("yyyy-MM-dd", new Date()),Format("yyyy-MM-dd", new Date())]
+    }
+    this.getMap(arr)
+    this.getMaps(arr)
   },
   methods: {
    // 航站列表

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

@@ -113,6 +113,7 @@ import StatisticsHeader from "../../components/echart/statisticsHeader.vue";
 import BarCharts from '../../components/echart/commonChartsBar.vue'
 import BarChartsr from '../../components/echart/commonChartsLine.vue'
 import { Query } from '@/api/webApi'
+import {Format} from '@/utils/validate'
 const barOption = {
   tooltip: {
     trigger: 'axis',
@@ -290,6 +291,12 @@ export default {
   },
   mounted() {
     this.getAiportList()
+    let arr = {
+      airport:"CZ",
+      dateTime: [Format("yyyy-MM-dd", new Date()),Format("yyyy-MM-dd", new Date())]
+    }
+    this.getMap(arr)
+    this.getMaps(arr)
   },
   methods: {
    // 航站列表

src/views/newUserManagement/index.vue

@@ -20,7 +20,7 @@
         </div> -->
         <div class="newService-content-left-top">
           <div class="flex head">
-            <div class="title">账号组列表</div>
+            <div class="title">组织列表</div>
             <el-button class="serButton" size="small" @click="handleAdd">新增</el-button>
           </div>
           <div class="search">
@@ -60,19 +60,29 @@
       <div class="newUserManagement-content-right flex1">
         <div class="newUserManagement-content-right-top">
           <div class="head flex">
-            <div class="title">账号组信息</div>
+            <div class="title">组织信息</div>
             <el-button type="primary" size="small" :disabled="editGroupDisabled" @click="handleSave">保存</el-button>
           </div>
           <div class="contents">
             <el-form ref="form" :inline="true" :rules="rules" :model="formInline" class="demo-form-inline">
-              <el-form-item prop="user_group_name" label="账号组名称">
-                <el-input v-model="formInline.user_group_name" style="width:260px;margin-right: 30px;" size="small" placeholder="请输入账号组名称" :disabled="editGroupDisabled" />
+              <el-form-item prop="user_group_name" label="组织名称">
+                <el-input v-model="formInline.user_group_name" style="width:260px;margin-right: 30px;" size="small" placeholder="请输入组织名称" :disabled="editGroupDisabled" />
               </el-form-item>
-              <el-form-item prop="up_user_group_name" label="上级用户组">
-                <el-select v-model="formInline.up_user_group_id" style="width:260px;margin-right: 30px;" size="small" clearable placeholder="请选择上级用户组" :disabled="editGroupDisabled">
+              <el-form-item prop="up_user_group_name" label="上级组织">
+                <el-select v-model="formInline.up_user_group_id" style="width:260px;margin-right: 30px;" size="small" clearable placeholder="请选择上级组织" :disabled="editGroupDisabled">
                   <el-option v-for="item in arrTree" :key="item.user_group_id" :label="item.user_group_name" :value="item.user_group_id" />
                 </el-select>
               </el-form-item>
+              <el-form-item prop="user_group_type" label="组织类型">
+                <el-select v-model="formInline.user_group_type" style="width:260px;margin-right: 30px;" size="small" clearable placeholder="请选择组织类型" :disabled="editGroupDisabled">
+                  <el-option v-for="item in arrTrees" :key="item.id" :label="item.name" :value="item.id" />
+                </el-select>
+              </el-form-item>
+              <el-form-item prop="belong_tenantid" label="所属租户">
+                <el-select v-model="formInline.belong_tenantid" style="width:260px;margin-right: 30px;" size="small" clearable placeholder="请选择所属租户" :disabled="editGroupDisabled">
+                  <el-option v-for="item in arrTreebelong" :key="item.tenantId" :label="item.tenantEngName" :value="item.tenantId" />
+                </el-select>
+              </el-form-item>
               <el-form-item label="描述">
                 <el-input v-model="formInline.user_group_comment" style="width:260px;" size="small" placeholder="请输入描述" :disabled="editGroupDisabled" />
               </el-form-item>
@@ -81,12 +91,15 @@
         </div>
         <div class="newUserManagement-content-right-bottom">
           <div class="head flex">
-            <div class="title">账号列表</div>
+            <div class="title">职员列表</div>
             <el-button type="primary" size="small" :disabled="addUserDisabled" @click="handleTableAdd">新增</el-button>
           </div>
           <div class="contents">
             <el-table :data="tableData" height="100%" border style="width: 100%">
               <el-table-column prop="user_name" label="用户名" />
+              <el-table-column prop="employee_name" label="姓名" />
+              <el-table-column prop="sex" label="性别" />
+              <el-table-column prop="phone" label="联系电话" />
               <el-table-column prop="user_status" label="状态">
                 <template slot-scope="scope">
                   <div>{{ scope.row.user_status ? '启用' :'禁用' }}</div>
@@ -217,7 +230,7 @@ export default {
           up_user_group_id: -1,
           user_group_comment: '',
           user_group_id: 0,
-          user_group_name: '全部账号组',
+          user_group_name: '全部组织',
           user_group_status: true,
           children: []
         }
@@ -232,7 +245,7 @@ export default {
         up_user_group_id: ''
       },
       rules: {
-        user_group_name: [{ required: true, message: '请输入账号组名称', trigger: 'blur' }],
+        user_group_name: [{ required: true, message: '请输入组织名称', trigger: 'blur' }],
       },
       ruleForm: {
         'token_valid_time': null,
@@ -281,6 +294,19 @@ export default {
         label: 'user_group_name'
       },
       arrTree: [],
+      arrTreebelong: [],
+      arrTrees: [{
+        id: '公司',
+        name:'公司'
+      },
+      {
+        id: '部门',
+        name:'部门'
+      },
+      {
+        id: '岗位',
+        name:'岗位'
+      }],
       treeCheckObj: {}
     }
   },
@@ -302,8 +328,17 @@ export default {
   },
   mounted () {
     this.getTreeData()
+    this.getTreeDatas()
   },
   methods: {
+    async getTreeDatas () {
+      const { code, returnData } = await this.getQueryListAuth(2006020)
+      if (code == 0) {
+        if (returnData && returnData.length) {
+          this.arrTreebelong = _.cloneDeep(returnData)
+        }
+      }
+    },
     async getTreeData () {
       const { code, returnData } = await this.getQueryListAuth(this.queryId)
       if (code == 0) {
@@ -689,7 +724,7 @@ export default {
     }
     &-right {
       &-top {
-        height: 136px;
+        height: 190px;
         background: #ffffff;
         box-shadow: 0px 3px 3px 0px rgba(0, 0, 0, 0.1);
         border-radius: 4px;
@@ -703,7 +738,7 @@ export default {
       }
       &-bottom {
         margin-top: 16px;
-        height: calc(100% - 152px);
+        height: calc(100% - 205px);
         background: #ffffff;
         box-shadow: 0px 3px 3px 0px rgba(0, 0, 0, 0.1);
         border-radius: 4px;

src/views/upecharts/index.vue

@@ -0,0 +1,21 @@
+<template>
+  <div class="dashboard">
+    <router-view v-if="$route.meta && $route.meta.noToolBar" />
+    <!--导航-->
+    <ToolBar v-else />
+  </div>
+</template>
+
+<script>
+import ToolBar from "@/layout/components/ToolBar";
+export default {
+  name: "Dashboard",
+  components: { ToolBar },
+};
+</script>
+
+<style lang="scss" scoped>
+.dashboard {
+  padding: 24px 24px 0;
+}
+</style>

src/views/upecharts/views/newecharts/newecharts.vue

@@ -0,0 +1,85 @@
+<template>
+  <div class="dashboard">
+    <Newcchart/>
+  </div>
+</template>
+
+<script>
+import Newcchart from "@/components/generateEcharts/index.vue";
+const barOption = {
+  tooltip: {
+    trigger: 'axis',
+    axisPointer: {
+      type: 'shadow',
+    },
+  },
+  grid: {
+    left: '3%',
+    right: '4%',
+    bottom: '10%',
+    containLabel: true,
+  },
+  legend: {
+    textStyle: {
+      color: '#ffff',
+    },
+  },
+  xAxis: {
+    type: 'category',
+    data: [],
+    axisLabel: {
+      color: '#8897BC',
+    },
+    axisTick: {
+      alignWithLabel: true,
+    },
+  },
+  yAxis: {
+    type: 'value',
+    axisLabel: {
+      color: '#8897BC',
+    },
+  },
+  color:['blue','yellow'],
+  series: [
+    {
+    name: '',
+    type: 'bar',
+    z:"-1",
+    barGap: '-100%',
+    barWidth: 20,
+    data: []
+  },
+  {
+    name: '',
+    type: 'bar',
+    barWidth: 20,
+    data: []
+  }
+]
+}
+export default {
+  name: "Singleairline",
+  data () {
+    return {
+    }
+  },
+  components: {
+    Newcchart
+  },
+  mounted() {
+  },
+  methods: {
+  }
+};
+</script>
+
+<style lang="scss" scoped>
+.dashboard {
+  padding: 30px 30px 0 25px;
+  // >.cont{
+  //   width: 100%;
+  //   height: 100%;
+  // }
+}
+</style>