<template>
    <div style="padding: 8px 20px 20px;">
      <div class="w100 plr-20" style="font-size: 14px">
        <div v-for="item of formListTow" class="w50 disInlineBlock p10">
          <span class="w50 disInlineBlock">{{item.name}}</span><span class="w50">{{item.value}}</span>
        </div>
      </div>
      <div v-for="item of resultData" class="w100 mt20 mb20" style="height: 200px;border-top: 1px solid #d8dce5">
        <EchartsLine class="w100 h100" :sideIcon="{iconName: [{name: '添加到首页',type: 'add'}]}" :lineData="item.dataVal" :title="item.title" :chartData="(valData) => chartDataEvent(valData, item)"></EchartsLine>
      </div>
    </div>
</template>

<script setup>
  import EchartsLine from "@/components/echartsList/line.vue";
  export default {
    name: 'ResMonitorDigitalSuper',
    components: {EchartsLine},
    data() {
      return {
        formListTow: [],
        paramsData: {},
        resultData: [{
          title: '设备CPU使用率(%)',
          dataVal: {
            titleVal: {textAlign: 'left', left: '1%'},
            gridTop: '35%',
            legend: {top: '15%', left: '10%'},
            lineXData: ['2025-9-1', '2025-9-2', '2025-9-3', '2025-9-4', '2025-9-5', '2025-9-6', '2025-9-7'],
            dataList: [{
              name: '设备CPU使用率',
              data: [120, 132, 101, 134, 90, 230, 210],
            }]
          }
        },{
          title: '设备内存使用率(%)',
          dataVal: {
            titleVal: {textAlign: 'left', left: '1%'},
            gridTop: '35%',
            legend: {top: '15%', left: '10%'},
            lineXData: ['2025-9-1', '2025-9-2', '2025-9-3', '2025-9-4', '2025-9-5', '2025-9-6', '2025-9-7'],
            dataList: [{
              name: '设备内存使用率',
              data: [120, 132, 101, 134, 90, 230, 210],
            },{
              name: 'CPU运行用户进程所花费的时间',
              data: [220, 182, 191, 234, 290, 330, 310]
            }]
          }
        }],
      }
    },
    created() {
      // this.paramsData = this.$route && this.$route.query;
      this.fnFormList('1');
      // this.switchList();
    },
    methods: {
      // formList集合
      fnFormList(num) {
        let formFirst = [
          {name: '系统描述', value: 'aaa'},
          {name: '系统位置', value: 'aaa'},
          {name: '系统Object ID', value: 'aaa'},
          {name: '系统MAC地址', value: 'aaa'},
          {name: '系统运行时间', value: 'aaa'},
          {name: '设备名称', value: 'aaa'},
          {name: '系统联系信息', value: 'aaa'},
          {name: '设备软件版本', value: 'aaa'},
          {name: '系统名称', value: 'aaa'},
        ];
        let formSecond = [
          {name: '总内存', value: 'aaa'},
          {name: '操作系统', value: 'aaa'},
          {name: '操作系统架构', value: 'aaa'},
          {name: '最大进程数', value: 'aaa'},
          {name: '硬盘总可用空间', value: 'aaa'},
          {name: '系统启动时间', value: 'aaa'},
          {name: '系统描述', value: 'aaa'},
          {name: '系统正常运行时间', value: 'aaa'},
          {name: '系统本地时间', value: 'aaa'},
          {name: 'CPU数量', value: 'aaa'},
        ];
        this.formListTow = num && num === '1' ? formFirst : formSecond;
      },
      chartDataEvent(val, itemVal) {
        console.log('val===1111',val);
      }
    }
  }
</script>
