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="请选择节点名称">
            <el-option
              v-for="item in selectChangeList"
              :key="item.id"
              :label="item.nodeName"
              :value="item.id">
            </el-option>
          </el-select>
        </el-form-item>
      </el-form>
      <el-switch v-for="item of switchData" v-model="item.type" :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].type" :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].type" :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].type" :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>
    </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";
  export default {
    name: 'DialogView',
    components: {Form, EchartsLine, EchartsBar},
    dicts: ['eps_bandwidth_type'],
    data() {
      return {
        paramsData: {},
        form: {},
        storageKey: '',
        selectChangeList: [],
        switchData: [],
        selectChoose: [],
        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 => {
            let obj = {
              label: item.label,
              value: item.value,
              type: true
            };
            return obj;
          });
        }
        if (this.paramsData && this.paramsData.list) {
          this.processData(this.paramsData.list);
        }
      }
    },
    destroyed() {
      localStorage.removeItem(this.storageKey);
    },
    methods: {
      processData(list) {
        this.selectChangeList = list;
        if (list.length >=2) {
          this.form.noticeType = [list[0].id, list[1].id];
        } else {
          this.form.noticeType = [list[0].id];
        }
        this.form.noticeType.forEach(item => {
          list.some(val => {
            if (item === val.id) {
              this.selectChoose.push(val);
              return true;
            }
          });
        });
      },
      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>