Merge branch 'master' of http://120.26.64.82:10880/BFFE/dz2.1

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

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

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

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

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

@@ -0,0 +1,45 @@
+/*
+ * @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: 'Basic Radar Chart'
+        },
+        legend: {
+          data: ['Allocated Budget', 'Actual Spending']
+        },
+        radar: {
+          // shape: 'circle',
+          indicator: [
+            { name: 'Sales', max: 6500 },
+            { name: 'Administration', max: 16000 },
+            { name: 'Information Technology', max: 30000 },
+            { name: 'Customer Support', max: 38000 },
+            { name: 'Development', max: 52000 },
+            { name: 'Marketing', max: 25000 }
+          ]
+        },
+        series: [
+          {
+            name: 'Budget vs spending',
+            type: 'radar',
+            data: [
+              {
+                value: [4200, 3000, 20000, 35000, 50000, 18000],
+                name: 'Allocated Budget'
+              }
+            ]
+          }
+        ]
+      }
+    }
+  }
+}

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

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

src/views/echartPage/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/views/echartPage/index.vue

@@ -0,0 +1,442 @@
+<template>
+  <div >
+    <BarChartsr id="hover" :option="inHourDataOption" />
+  </div>
+</template>
+
+<script>
+import BarCharts from './components/echart/commonChartsBar.vue'
+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',
+      show: true,
+      boundaryGap: false,
+      axisLine:{
+        lineStyle:{
+          color:'red',
+          width:2
+        }
+      },
+      splitLine: {  
+        show:false,   //X网格线
+        lineStyle:{   //x网格线
+          color: '#000000'
+        }
+      },
+      data: ['Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat', 'Sun']
+    }
+  ],
+  yAxis: [
+    {
+      type: 'value',
+        //y轴颜色
+      axisLine: { 
+        lineStyle: {   // Y 轴颜色配置
+          color: '#3366CC'  
+        } 
+      },
+      splitArea: {
+        show: true  //y网格区域颜色
+      },
+      splitLine: {
+        show:false,     //y网格线
+        lineStyle:{
+          color: '#ffffff'
+        }
+      },
+    }
+  ],
+  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]
+    }
+  ]
+};
+const hisOption = {
+  title: {
+    text: 'Stacked Area Chart'
+  },
+  tooltip: {
+    trigger: 'axis',
+    axisPointer: {
+      type: 'cross',
+      label: {
+        backgroundColor: '#6a7985'
+      }
+    }
+  },
+  legend: {
+    data: ['Email']
+  },
+  xAxis: {
+    type: 'category',
+    show: true,
+      // boundaryGap: false,
+      axisLine:{
+        lineStyle:{
+          color:'red',
+          width:2
+        }
+      },
+      splitLine: {  
+        show:false,   //X网格线
+        lineStyle:{   //x网格线
+          color: '#000000'
+        }
+      },
+    data: ['Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat', 'Sun']
+  },
+  yAxis: {
+    type: 'value',
+            //y轴颜色
+    axisLine: { 
+      lineStyle: {   // Y 轴颜色配置
+        color: '#3366CC'  
+      } 
+    },
+    splitArea: {
+      show: true  //y网格区域颜色
+    },
+    splitLine: {
+      show:false,     //y网格线
+      lineStyle:{
+        color: '#ffffff'
+      }
+    },
+  },
+  series: [
+    {
+      name: 'Email',
+      data: [120, 200, 150, 80, 70, 110, 130],
+      type: 'bar',
+      barWidth: '20',
+      showBackground: true,
+      backgroundStyle: {
+        color: 'rgba(180, 180, 180, 0.2)'
+      },
+      itemStyle: {
+        color: {
+          type: "linear",
+          x: 0,
+          y: 0,
+          x2: 0,
+          y2: 1,
+          colorStops: [
+            {
+              offset: 0,
+              color: "#595FAE", // 0% 处的颜色
+            },
+            {
+              offset: 0.2,
+              color: "#595FAE", // 0% 处的颜色
+            },
+            {
+              offset: 1,
+              color: "#595FAE", // 100% 处的颜色
+            },
+          ],
+        },
+      }
+    }
+  ]
+};
+const cakeOption = {
+  title: {
+    text: 'Referer of a Website',
+    subtext: 'Fake Data',
+    left: 'center'
+  },
+  tooltip: {
+    trigger: 'item'
+  },
+  legend: {
+    orient: 'vertical',
+    left: 'left',
+    data: ['Search Engine','Direct','Email','Union Ads','Video Ads','搜索引擎','直接访问']
+  },
+  series: [
+    {
+      name: 'Access From',
+      type: 'pie',
+      radius: ["40%", "60%"],
+      // itemStyle: {
+      //   normal: {
+      //     color: function (params) {
+      //       let colorList = ["#3893F0", "#4ECAE9"];
+      //       return colorList[params.dataIndex];
+      //     },
+      //   },
+      // },
+      label: {
+        show: false,
+        position: 'left'
+      },
+      color: ["red",'yellow','blue','black','green'],
+      data: [
+        { value: 1048, name: 'Search Engine' },
+        { value: 735, name: 'Direct' },
+        { value: 580, name: 'Email' },
+        { value: 484, name: 'Union Ads' },
+        { value: 300, name: 'Video Ads' }
+      ],
+      // emphasis: {
+      //   itemStyle: {
+      //     shadowBlur: 10,
+      //     shadowOffsetX: 0,
+      //     shadowColor: 'rgba(0, 0, 0, 0.5)'
+      //   }
+      // }
+    },
+    {
+      name: "访问来源",
+      type: "pie",
+      // silent:true,
+      radius: ["0%", "30%"],
+      avoidLabelOverlap: false,
+      label: {
+        show: false,
+      },
+      color: ["red",'yellow','blue','black','green'],
+      // color: ["red"],
+      // itemStyle: {
+      //   normal: {
+      //     color: function (params) {
+      //       let colorList = ["#3893F0", "#4ECAE9"];
+      //       return colorList[params.dataIndex];
+      //     },
+      //   },
+      // },
+      labelLine: {
+        show: false,
+      },
+      data: [
+        { value: 0, name: "搜索引擎" },
+        { value: 735, name: "直接访问" },
+      ],
+    },
+  ]
+};
+const radarOption = {
+  title: {
+    text: 'Basic Radar Chart'
+  },
+  legend: {
+    data: ['Allocated Budget', 'Actual Spending']
+  },
+  radar: {
+    // shape: 'circle',
+    indicator: [
+      { name: 'Sales', max: 6500 },
+      { name: 'Administration', max: 16000 },
+      { name: 'Information Technology', max: 30000 },
+      { name: 'Customer Support', max: 38000 },
+      { name: 'Development', max: 52000 },
+      { name: 'Marketing', max: 25000 },
+      { name: 'Marketing', max: 25000 }
+    ]
+  },
+  series: [
+    {
+      name: 'Budget vs spending',
+      type: 'radar',
+      lineStyle: {
+        //边缘颜色
+        width: 1,
+        color: 'black',
+      },
+        itemStyle: {
+          borderWidth: 1,
+          color: 'yellow',
+          borderColor: '#F2F063',
+        },
+        areaStyle: {
+          color: 'red',
+          opacity: 0.1,
+        },
+      data: [
+        {
+          value: [4200, 3000, 20000, 35000, 50000, 18000],
+          name: 'Allocated Budget'
+        }
+      ]
+    }
+  ]
+};
+export default {
+  name: 'Chartsr',
+  props: {
+    //数据的字段名
+    fieldname: {
+      type: Array,
+      default: () => []
+    },
+    echartname: {
+      type: String,
+      default: () => ''
+    }
+  },
+  data() {
+    return {
+      inHourDataOption: null,
+      listdata: [],
+      page: 0, //当前table页面
+    };
+  },
+  components: {
+    BarCharts
+  },
+  mounted() {
+    this.pageInit()
+  },
+
+  methods: {
+    //页面初始化
+    pageInit () {
+      //获取页面查询参数
+      const { query } = this.$route
+      this.pageQuery = query
+      //获取页面配置
+      const { pagecode, qid, auth_id } = this.$route.meta
+      //获取页面权限类型组件  pagetype 1模块  2页面  3按钮 4表格 5树形  6弹窗 
+      const pageAuths = this.authArrs
+      if (!pageAuths.length) return
+    },
+    //处理数据1
+    processingdata (data) {
+      let arr = []
+      fieldname.forEach(res => {
+        arr.push(data[res])
+      });
+      let series = [
+        {
+          name: this.echartname,
+          data: arr,
+          type: 'bar',
+          barWidth: '20',
+          showBackground: true,
+          backgroundStyle: {
+            color: 'rgba(180, 180, 180, 0.2)'
+          },
+          itemStyle: {
+            color: {
+              type: "linear",
+              x: 0,
+              y: 0,
+              x2: 0,
+              y2: 1,
+              colorStops: [
+                {
+                  offset: 0,
+                  color: "#595FAE", // 0% 处的颜色
+                },
+                {
+                  offset: 0.2,
+                  color: "#595FAE", // 0% 处的颜色
+                },
+                {
+                  offset: 1,
+                  color: "#595FAE", // 100% 处的颜色
+                },
+              ],
+            },
+          }
+        }
+      ]
+      return series
+    },
+    //处理数据2
+    processingdata1 (data) {
+      let arr = []
+      fieldname.forEach(res => {
+        data.forEach(element => {
+          arr.push(element[res])
+        });
+      });
+      let series = [
+        {
+          name: this.echartname,
+          data: arr,
+          type: 'bar',
+          barWidth: '20',
+          showBackground: true,
+          backgroundStyle: {
+            color: 'rgba(180, 180, 180, 0.2)'
+          },
+          itemStyle: {
+            color: {
+              type: "linear",
+              x: 0,
+              y: 0,
+              x2: 0,
+              y2: 1,
+              colorStops: [
+                {
+                  offset: 0,
+                  color: "#595FAE", // 0% 处的颜色
+                },
+                {
+                  offset: 0.2,
+                  color: "#595FAE", // 0% 处的颜色
+                },
+                {
+                  offset: 1,
+                  color: "#595FAE", // 100% 处的颜色
+                },
+              ],
+            },
+          }
+        }
+      ]
+      return series
+    },
+  },
+};
+</script>
+
+<style lang="scss" scoped>
+
+</style>