profitManage1.2/src/views/resource/monitorBoard/monitorBoard.vue

<template>
  <div class="app-container">
    <div class="w100" style="height: 60px;">
        <div class="w50 fr" style="text-align: right;">
          <el-date-picker
            v-model="datetimeModel"
            style="width: 360px!important;margin-right: 10px;"
            type="datetimerange"
            format="yyyy-MM-dd HH:mm:ss"
            value-format="yyyy-MM-dd HH:mm:ss"
            range-separator="至"
            start-placeholder="开始日期时间"
            end-placeholder="结束日期时间">
          </el-date-picker>
          <el-select v-model="timeModel" placeholder="请选择" style="width: 100px;margin-right: 10px;">
            <el-option
              v-for="item in timeModelOptions"
              :key="item.value"
              :label="item.label"
              :value="item.value">
            </el-option>
          </el-select>
          <el-button>详情视图</el-button>
        </div>
    </div>
    <div style="height: calc(100% - 60px);" class="w100">
      <div class="w50 disInlineBlock plr-10" style="height: 200px;vertical-align: middle;">
        <div class="w100 h100" style="border: 1px solid #e8e8e8;display: flex;justify-content: center;align-items: center;flex-direction: column;">
          <el-button type="primary" icon="el-icon-plus" plain circle @click="addMonitor"></el-button>
          <div style="font-size: 1rem;margin-top: 5px;">新增监控配置</div>
        </div>
      </div>
      <div v-for="charItem of lineDataParams" class="w50 disInlineBlock plr-10" style="height: 200px;vertical-align: middle;">
        <div class="w100 h100" style="border: 1px solid #e8e8e8; padding: 10px 10px 2px;">
          <div class="w100" style="height: 20px">
            <span>配置名称1</span>
            <el-dropdown trigger="click" style="float: right;">
              <span class="el-dropdown-link">
                <i class="el-icon-more" style="transform: rotate(90deg);"></i>
              </span>
              <el-dropdown-menu slot="dropdown">
                <el-dropdown-item v-for="item of btnList" class="clearfix" @click="fnBtnSide(item)">
                  {{item.title}}
                </el-dropdown-item>
              </el-dropdown-menu>
            </el-dropdown>
          </div>
          <div class="w100" style="height: calc(100% - 20px)">
            <EchartsLine :lineData="charItem || {}" :title="charItem && charItem.title || ''"  class="w100 h100" :chartData="(valData, unit) => chartDataEvent(valData, unit)"></EchartsLine>
          </div>
        </div>
      </div>
    </div>
    <!--    弹窗  -->
    <el-dialog title="添加配置" :visible.sync="open" width="800px" append-to-body>
      <dialogMonitor @dialogResult="fnDialogResult"></dialogMonitor>
    </el-dialog>
  </div>
</template>

<script>
  import dialogMonitor from './dialogMonitor';
  import EchartsLine from "@/components/echartsList/line.vue";
  export default {
    name: "monitorBoard",
    components: {dialogMonitor, EchartsLine},
    data() {
        return {
          datetimeModel: [],
          timeModel: '30000',
          open: false,
          timeModelOptions: [
            {value: '30000', label: '30s刷新'},
            {value: '10000', label: '10s刷新'},
            {value: '0', label: '不刷新'},
          ],
          echartData: {
            title: ' ',
            yAxisName: ' ',
            unitModel: 'Kb',
            unitSelList: [{label: 'Kb', value: 'Kb'},{label: 'Mb', value: 'Mb'}, {label: 'Gb', value: 'Gb'}],
            legend: {bottom: '0%'},
            gridTop: '40px',
            gridBotm: '15%',
            hiddenTime: true,
            lineXData: ['Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sa', 'Sun'],
            dataList: [
              {name: '入方向总流量', data: []},
              {name: '出方向总流量', data: []}
            ]
          },
          lineDataParams: [],
          btnList: [{title: '详情', value: 'view'}, {title: '修改', value: 'edit'}, {title: '删除', value: 'del'}],
        }
    },
    created() {
      let startData = '';
      let endData = '';
      const year = new Date().getFullYear();
      const month = String(new Date().getMonth() + 1).padStart(2, '0'); // 0=1月，11=12月
      const day = String(new Date().getDate()).padStart(2, '0');     // 当前日（如8）
      const prevDay = String(new Date().getDate() - 1).padStart(2, '0');
      startData = `${year}-${month}-${prevDay} 00:00:00`;
      endData = `${year}-${month}-${day} 23:59:59`;
      this.datetimeModel = [startData, endData];
      this.lineDataParams.push(this.echartData);
    },
    methods: {
      addMonitor() {
        this.open = true;
      },
      fnDialogResult(res){
        this.open = false;
      },
      // 右侧点击下拉按钮
      fnBtnSide(val) {

      },
      chartDataEvent(valData, unit) {
        // // 检查函数是否存在，避免报错
        // if (typeof this[funcName] === 'function') {
        //   // 调用实际函数，并传递参数（如选中的值、当前项）
        //   // this[funcName]({startTime: valData[0], endTime: valData[1]});
        // } else {
        //   console.warn(`函数 ${funcName} 未定义`);
        // }
      }
    }
  }
</script>

<style scoped>

</style>