profitManage/src/views/disRevenue/earnManage/server/dialogView.vue

<template>
  <div class="app-container">
    <div style="height: 90px;">
      <el-form ref="noticeRef" :model="form" label-width="80px">
        <el-form-item label="节点名称" prop="noticeType">
          <el-select v-model="form.noticeType" multiple filterable allow-create default-first-option placeholder="请选择节点名称" @change="handleChange">
            <el-option
              v-for="item in selectChangeList"
              :key="item.value"
              :label="item.label"
              :value="item.value">
            </el-option>
          </el-select>
        </el-form-item>
      </el-form>
      <el-switch v-for="item of switchData" v-model="item.checkType" :activeText="item.label" class="mr20" />
    </div>
    <div style="height: calc(100vh - 130px);overflow: scroll;">
<!--      <template v-for="(item,index) of selectChoose">-->
<!--        <EchartsLine v-show="switchData[0].checkType" :chartData="chartDataEvent"-->
<!--                     :lineData="lineDataParams" :title="'【' + item.nodeName + '】【' + item.businessName + '】' + switchData[0].label" class="w100 h40 mt20 mb20" style="border: 1.5px solid #878787;"></EchartsLine>-->
<!--        <EchartsLine v-show="switchData[1].checkType" :chartData="chartDataEvent"-->
<!--                     :lineData="lineDataParams" :title="'【' + item.nodeName + '】【' + item.businessName + '】' + switchData[1].label" class="w100 h40 mt20 mb20" style="border: 1.5px solid #878787;"></EchartsLine>-->
<!--        <EchartsBar v-show="switchData[2].checkType" :chartData="chartDataEvent"-->
<!--                    :barData="lineDataParams" :title="'【' + item.nodeName + '】【' + item.businessName + '】' + switchData[2].label" class="w100 h40 mt20 mb20" style="border: 1.5px solid #878787;"></EchartsBar>-->
<!--      </template>-->
      <template v-for="(item,index) of echartListData">
        <template v-if="item.dateShowType === 'day'">
          <EchartsLine v-show="switchData[item.indexVal].checkType" :chartData="chartDataEvent" :dateShowType="item.dateShowType"
                       :lineData="item.resultData" :title="'【' + item.nodeName + '】【' + item.businessName + '】' + switchData[item.indexVal].label" class="w100 h40 mt20 mb20" style="border: 1.5px solid #878787;"></EchartsLine>
        </template>
        <template v-if="item.dateShowType === 'month'">
          <EchartsBar v-show="switchData[item.indexVal].checkType" :chartData="chartDataEvent" :dateShowType="item.dateShowType"
                      :barData="item.resultData" :title="'【' + item.nodeName + '】【' + item.businessName + '】' + switchData[item.indexVal].label" class="w100 h40 mt20 mb20" style="border: 1.5px solid #878787;"></EchartsBar>
        </template>
      </template>
    </div>
<!--    <template #footer>-->
<!--      <div class="dialog-footer">-->
<!--        &lt;!&ndash;                    <el-button type="primary" @click="submitForm">确 定</el-button>&ndash;&gt;-->
<!--        <el-button @click="cancel">取 消</el-button>-->
<!--      </div>-->
<!--    </template>-->
  </div>
</template>

<script setup>
  import Form from '@/components/form/index.vue';
  import EchartsLine from "@/components/echartsList/line.vue";
  import EchartsBar from "@/components/echartsList/bar.vue";
  import {graPackage, graMonthly, graEffectiveMonthly, graEffectiveDaily, graEffectiveAvgMonthly, graDaily, graAvgMonthly} from "@/api/disRevenue/earnManage"
  export default {
    name: 'DialogView',
    components: {Form, EchartsLine, EchartsBar},
    dicts: ['eps_bandwidth_type'],
    data() {
      return {
        paramsData: {},
        form: {},
        storageKey: '',
        selectChangeList: [],
        switchData: [],
        selectChoose: [],
        echartListData: [],
        typeObj: {},
        lineDataParams: {
          lineXData: ['Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat', 'Sun'],
          data: [120, 132, 101, 134, 90, 230, 210]
        },
      }
    },
    created() {},
    mounted() {
      this.storageKey = this.$route.query && this.$route.query['storageKey'];
      if (this.storageKey) {
        this.paramsData = JSON.parse(localStorage.getItem(this.storageKey));
        if (this.paramsData && this.paramsData.dictList) {
          this.switchData = this.paramsData.dictList.map((item,index) => {
            this.typeObj[item.value] = {type: item.value, indexVal: index};
            let obj = {
              label: item.label,
              value: item.value,
              checkType: true
            };
            return obj;
          });
        }
        if (this.paramsData && this.paramsData.list) {
          this.processData(this.paramsData.list);
        }
      }
    },
    destroyed() {
      localStorage.removeItem(this.storageKey);
    },
    methods: {
      // 下拉数据改变时触发
      handleChange(eventVal) {
        let paramsVal = {
          nodeNames: eventVal
        };
        this.graPackageList(paramsVal);
        this.graMonthlyList(paramsVal);
        this.graEffectiveMonthlyList(paramsVal);
        this.graEffectiveDailyList(paramsVal);
        this.graEffectiveAvgMonthlyList(paramsVal);
        this.graDailyList(paramsVal);
        this.graAvgMonthlyList(paramsVal);
      },
      // 初始化
      processData(list) {
        let nameArr = [];
        let nameListArr = [];
        list.forEach(item => {
          if (!nameArr.includes(item.nodeName)) {
            item.label = item.nodeName;
            item.value = item.nodeName;
            nameArr.push(item.nodeName);
            nameListArr.push(item);
          }
        });
        if (nameArr && nameArr.length > 0) {
          this.selectChangeList = nameListArr;
          if (nameListArr.length >=2) {
            this.form.noticeType = [nameListArr[0].label, nameListArr[1].label];
          } else {
            this.form.noticeType = [nameListArr[0].label];
          }
          this.form.noticeType.forEach(item => {
            nameListArr.some(val => {
              if (item === val.label) {
                this.selectChoose.push(val);
                return true;
              }
            });
          });
          let paramsVal = {
            nodeNames: nameArr
          };
          this.graPackageList(paramsVal);
          this.graMonthlyList(paramsVal);
          this.graEffectiveMonthlyList(paramsVal);
          this.graEffectiveDailyList(paramsVal);
          this.graEffectiveAvgMonthlyList(paramsVal);
          this.graDailyList(paramsVal);
          this.graAvgMonthlyList(paramsVal);
        }
      },
      // 95带宽值Mbps/日---图表
      graDailyList(nameVal){
        graDaily(nameVal).then(res => {
          if (res && res.data && res.data.resultData) {
            let dataList = Object.assign({dateShowType: 'day'},res.data, this.typeObj[1]);
            this.echartListData.push(dataList);
          }
        });
      },
      // 95带宽值Mbps/月---图表
      graMonthlyList(nameVal){
        graMonthly(Object.assign({dateShowType: 'month'}, {resourceType: 1, bandwidthType: 2}, nameVal)).then(res => {
          if (res && res.data && res.data.resultData) {
            let dataList = Object.assign({},res.data, this.typeObj[2]);
            this.echartListData.push(dataList);
          }
        });
      },
      // 包端图表
      graPackageList(nameVal){
        graPackage(Object.assign({dateShowType: 'day'}, {resourceType: 1, bandwidthType: 3}, nameVal)).then(res => {
          if (res && res.data && res.data.resultData) {
            let dataList = Object.assign({},res.data, this.typeObj[3]);
            this.echartListData.push(dataList);
          }
        });
      },
      // 月均日95值Mbps---图表
      graAvgMonthlyList(nameVal){
        graAvgMonthly(nameVal).then(res => {
          if (res && res.data && res.data.resultData) {
            let dataList = Object.assign({dateShowType: 'month'},res.data, this.typeObj[4]);
            this.echartListData.push(dataList);
          }
        });
      },
      // 有效-95带宽值Mbps/日---图表
      graEffectiveDailyList(nameVal){
        graEffectiveDaily(nameVal).then(res => {
          if (res && res.data && res.data.resultData) {
            let dataList = Object.assign({dateShowType: 'day'},res.data, this.typeObj[5]);
            this.echartListData.push(dataList);
          }
        });
      },
      // 有效-95带宽值Mbps/月----图表
      graEffectiveMonthlyList(nameVal){
        graEffectiveMonthly(nameVal).then(res => {
          if (res && res.data && res.data.resultData) {
            let dataList = Object.assign({dateShowType: 'month'},res.data, this.typeObj[6]);
            this.echartListData.push(dataList);
          }
        });
      },
      // 有效-月均日95值Mbps----图表
      graEffectiveAvgMonthlyList(nameVal){
        graEffectiveAvgMonthly(nameVal).then(res => {
          if (res && res.data && res.data.resultData) {
            let dataList = Object.assign({dateShowType: 'day'},res.data, this.typeObj[7]);
            this.echartListData.push(dataList);
          }
        });
      },
      chartDataEvent(val) {
        // console.log('val===',val);
        return val;
      },
      // 监听事件
      callback(result, dataVal, formVal) {
        if (result && result.fnCode) {
          switch (result.fnCode) {
            case 'submit':
              break;
            case 'cancle':
              break;
            default:
          }
        }
      }
    }
  }
</script>
<style scoped>
  ::v-deep .ultabs .el-range-editor .el-range-input {
    vertical-align: super!important;
  }
  ::v-deep .ultabs .el-date-editor .el-range-separator {
    vertical-align: super!important;
  }
  ::-webkit-scrollbar {
    width: 0px!important;
    height: 0px!important;
  }
</style>