Merge branch 'temp' of http://123.60.103.97:3000/xuziqiang/SaaS-lib into temp

hx-ai-intelligent/src/view/monitor/deviceMonitor/config.ts

@@ -0,0 +1,180 @@
+import { dateUtil } from '/nerv-lib/util/date-util';
+import data from './mock.json';
+export const tableConfig = {
+  title: '设备台账',
+  // api: '/carbon_emission/device/getDeviceList',
+  value: data.dataSource,
+  treeConfig: {
+    header: {
+      icon: 'orgLink',
+      title: '设备类别',
+    },
+    defaultExpandAll: true,
+    api: () => {
+      return new Promise((resolve) => {
+        setTimeout(() => {
+          resolve(data);
+        }, 100);
+      });
+    },
+    formConfig: {
+      schemas: [
+        {
+          field: 'name',
+          label: '设备名称',
+          component: 'NsInput',
+          autoSubmit: true,
+          componentProps: {
+            placeholder: '请输入',
+          },
+        },
+      ],
+    },
+  },
+  params: {
+    page: 0,
+    pageSize: 10,
+  },
+  rowSelection: null,
+  columns: [
+    {
+      title: '设备名称',
+      dataIndex: 'id',
+    },
+    {
+      title: '设备型号',
+      dataIndex: 'deviceCode',
+    },
+    {
+      title: 'SN码',
+      dataIndex: 'deviceName',
+      textNumber: 8,
+      textEllipsis: true,
+    },
+    {
+      title: '设备一级区域',
+      dataIndex: 'position',
+    },
+    {
+      title: '设备二级区域',
+      dataIndex: 'position',
+    },
+    {
+      title: '设备详细位置',
+      dataIndex: 'position',
+    },
+    {
+      title: '设备规格',
+      dataIndex: 'position',
+    },
+    {
+      title: '设备厂商纳税人识别号',
+      dataIndex: 'position',
+    },
+    {
+      title: '厂商联系人',
+      dataIndex: 'position',
+    },
+    {
+      title: '设备描述',
+      dataIndex: 'position',
+    },
+    {
+      title: 'IP地址',
+      dataIndex: 'position',
+    },
+    {
+      title: '生产日期',
+      dataIndex: 'position',
+    },
+    {
+      title: '采购日期',
+      dataIndex: 'position',
+    },
+    {
+      title: '启用日期',
+      dataIndex: 'position',
+    },
+    {
+      title: '设备成本（元）',
+      dataIndex: 'position',
+    },
+    {
+      title: '使用期限',
+      dataIndex: 'position',
+    },
+    {
+      title: '额定功率',
+      dataIndex: 'position',
+    },
+    {
+      title: '特殊参数',
+      dataIndex: 'position',
+    },
+  ],
+
+  formConfig: {
+    schemas: [
+      {
+        field: 'name',
+        label: '设备名称',
+        component: 'NsInput',
+        componentProps: {
+          placeholder: '请输入',
+        },
+      },
+      {
+        field: 'provider',
+        label: '设备厂商',
+        component: 'NsInput',
+        componentProps: {
+          placeholder: '请输入',
+        },
+      },
+      {
+        field: 'payWay',
+        label: '设备区域',
+        component: 'NsSelect',
+        componentProps: {
+          placeholder: '请选择',
+          options: [
+            {
+              label: '全部',
+              value: '',
+            },
+          ],
+        },
+      },
+      {
+        field: 'createTime',
+        label: '生产日期',
+        component: 'NsRangePicker',
+        fieldMap: ['queryStartDate', 'queryEndDate'],
+        componentProps: {
+          valueFormat: 'YYYY-MM-DD',
+        },
+      },
+      {
+        field: 'createTime1',
+        label: '采购日期',
+        component: 'NsRangePicker',
+        fieldMap: ['queryStartDate', 'queryEndDate'],
+        componentProps: {
+          valueFormat: 'YYYY-MM-DD',
+        },
+      },
+      {
+        field: 'createTime2',
+        label: '启用日期',
+        component: 'NsRangePicker',
+        fieldMap: ['queryStartDate', 'queryEndDate'],
+        componentProps: {
+          valueFormat: 'YYYY-MM-DD',
+        },
+      },
+    ],
+    params: {},
+  },
+  // pagination: { pageSizeOptions: false },
+  rowKey: 'uuid',
+};

hx-ai-intelligent/src/view/monitor/deviceMonitor/graph/index.vue

@@ -0,0 +1,210 @@
+
+<template>
+
+  <div ref="chart" style="width: 100%; height: 80%;"></div>
+      
+</template>
+
+<script lang="ts">
+import { defineComponent, onMounted, ref, watch } from 'vue';
+import * as echarts from 'echarts';
+
+const data = [
+  {
+    date: '2023-12-01 0:00',
+    unit: 'V',
+    data: [
+      {
+        name: 'AC_002（暖通电表）',
+        value: '21'
+      },
+      {
+        name: 'AC_003（照明电表）',
+        value: '36'
+      },
+      {
+        name: 'AC_004（给排水电表）',
+        value: '5'
+      }
+    ]
+  },
+  {
+    date: '2023-12-02 0:00',
+    unit: 'V',
+    data: [
+      {
+        name: 'AC_002（暖通电表）',
+        value: '26'
+      },
+      {
+        name: 'AC_003（照明电表）',
+        value: '25'
+      },
+      {
+        name: 'AC_004（给排水电表）',
+        value: '47'
+      }
+    ]
+
+  },
+  {
+    date: '2023-12-03 0:00',
+    unit: 'V',
+    data: [
+      {
+        name: 'AC_002（暖通电表）',
+        value: '18'
+      },
+      {
+        name: 'AC_003（照明电表）',
+        value: '22'
+      },
+      {
+        name: 'AC_004（给排水电表）',
+        value: '26'
+      }
+    ]
+  },
+  {
+    date: '2023-12-04 0:00',
+    unit: 'V',
+    data: [
+      {
+        name: 'AC_002（暖通电表）',
+        value: '40'
+      },
+      {
+        name: 'AC_003（照明电表）',
+        value: '15'
+      },
+      {
+        name: 'AC_004（给排水电表）',
+        value: '12'
+      }
+    ]
+  },
+  {
+    date: '2023-12-05 0:00',
+    unit: 'V',
+    data: [
+      {
+        name: 'AC_002（暖通电表）',
+        value: '15'
+      },
+      {
+        name: 'AC_003（照明电表）',
+        value: '18'
+      },
+      {
+        name: 'AC_004（给排水电表）',
+        value: '15'
+      }
+    ]
+  },
+];
+
+  export default defineComponent({
+    name: 'Graph',
+    setup() {
+    const chart = ref(null);
+ 
+    onMounted(() => {
+
+      var seriesList = []
+      var date = []
+      var legendList: string|any[] = []
+      for (let i = 0; i < data.length; i++) {
+       
+        date.push(data[i].date)
+
+        for (let j = 0; j < data[i].data.length; j++) {
+          if (seriesList.length  < j + 1) {
+            seriesList.push(
+              {
+                name: data[i].data[j].name,
+                data: [data[i].data[j].value],
+                type: 'line',
+                smooth: true
+              }
+            )
+          } else {
+            seriesList[j].data.push(data[i].data[j].value)
+          }
+
+          if (legendList.length == 0 || legendList.length  < j + 1) {
+            legendList.push(data[i].data[j].name)
+            
+          }
+          
+
+
+        }
+
+      }
+
+
+      const option = {
+
+
+        legend: {
+          data: legendList,
+          orient: 'horizontal',
+          bottom: 30
+        },
+        tooltip: {
+          trigger: 'axis',
+          formatter: (params: any) => {
+            const date = params[0].name;
+            const values = params.map((param: any) => {
+              const unit = data.find(d => d.date === date)?.unit || '';
+              return `<tr>
+                        <td>${param.marker}${param.seriesName}</td>
+                        <td style="text-align: right;">${param.value} ${unit}</td>
+                      </tr>`;
+            }).join('');
+            return `<div>${date}</div><table style="width: 100%;">${values}</table>`;
+          }
+        },
+        xAxis: {
+          type: 'category',
+          data: date
+        },
+        yAxis: {
+          type: 'value'
+        },
+        dataZoom: [
+          // {
+          //   type: 'inside',
+          //   start: 0,
+          //   end: 10
+          // },
+          {
+            height: 10,
+            start: 0,
+            end: 100,
+            handleSize: '300%', // 设置滑块的大小
+            bottom: 15,
+
+          }
+        ],
+        series: seriesList
+        // series: [
+
+        //   {
+        //     data: [820, 932, 901, 934, 1290, 1330, 1320],
+        //     type: 'line'
+        //   }
+        // ]
+      };
+ 
+      const chartInstance = echarts.init(chart.value);
+      chartInstance.setOption(option);
+    });
+ 
+    return { chart };
+  }
+  })
+</script>
+<style lang="less" scoped>
+ 
+  </style>

hx-ai-intelligent/src/view/monitor/deviceMonitor/index.vue

@@ -0,0 +1,76 @@
+<template>
+  <a-row type="flex">
+    <a-col :span="4">
+      <div style="padding: 0 20px; width: 100%; height: 100%;">
+        <tree ref="treeRef"></tree>
+      </div>
+    </a-col>
+    <a-col :span="20">
+      <div style="width: 100%; height: 100%;">
+        <div class="ns-right-title">
+          <span>历史数据</span>
+          <div class="button">
+            <ns-icon name="biaoge" size="18" style="margin-right: 10px;"/>
+            <ns-icon :name="iconName" size="18" style="margin-right: 10px;" @click="change"/>
+          </div>
+        </div>
+        <graph ref="graphRef" v-if="isGraph"></graph>
+        <environment-table ref="tableRef" v-else></environment-table>
+      </div>
+    </a-col>
+  </a-row>
+</template>
+
+<script lang="ts" setup>
+import { ref } from 'vue';
+import tree from './tree/index.vue';
+import graph from './graph/index.vue';
+import environmentTable from './table/index.vue';
+
+const iconName = ref('biaoge');
+
+const treeRef = ref();
+const graphRef = ref();
+const tableRef = ref();
+
+let isGraph = ref(true)
+
+defineOptions({
+  name: 'EnvironmentMonitorIndex', // 与页面路由name一致缓存才可生效
+});
+
+function change() {
+
+  isGraph.value = !isGraph.value
+  if (iconName.value == 'biaoge') {
+    iconName.value = 'bingtu'
+  } else {
+    iconName.value = 'biaoge'
+  }
+  
+}
+
+</script>
+
+<style lang="less" scoped>
+.ns-right-title {
+  display: flex;
+  justify-content: space-between;
+  align-items: center;
+  user-select: text;
+  margin-bottom: 5px;
+  padding-bottom: 10px;
+  padding-top: 10px;
+  border-bottom: 1px solid #e9e9e9;
+
+  > span {
+    padding-left: 10px;
+    line-height: 20px;
+  }
+}
+.button {
+  display: inline-block;
+  padding-right: 10px;
+
+}
+</style>

hx-ai-intelligent/src/view/monitor/deviceMonitor/table/index.vue

@@ -0,0 +1,186 @@
+<template>
+  <a-table :columns="columns" :data-source="data" bordered />
+</template>
+
+<script lang="ts">
+import { defineComponent } from 'vue';
+import type { TableColumnType } from 'ant-design-vue';
+
+const data = [
+  {
+    key: '1',
+    name: 'AC_002（暖通电表）',
+    position: 'A 相电压',
+    unit: 'V',
+    date: '2023-12-01',
+    '1:00': '3626',
+  },
+  {
+    key: '1',
+    name: 'AC_002（暖通电表）',
+    position: 'A 相电压',
+    unit: 'V',
+    date: '2023-12-01',
+    '1:00': '3626',
+  },
+  {
+    key: '2',
+    name: 'AC_003（照明电表）',
+    position: 'A 相电压',
+    unit: 'V',
+    date: '2023-12-01',
+    '1:00': '3626',
+  },
+  {
+    key: '2',
+    name: 'AC_003（照明电表）',
+    position: 'A 相电压',
+    unit: 'V',
+    date: '2023-12-01',
+    '1:00': '3626',
+  },
+  {
+    key: '3',
+    name: 'AC_004（给排水电表）',
+    position: 'A 相电压',
+    unit: 'V',
+    date: '2023-12-01',
+    '1:00': '3626',
+  },
+];
+
+export default defineComponent({
+  name: 'EnvironmentTable',
+  setup() {
+    const getRowSpan = (dataIndex: string, record, data, dependents: string[] = []) => {
+      let rowSpan = 1;
+      for (let i = data.indexOf(record) + 1; i < data.length; i++) {
+        let shouldMerge = true;
+        for (const dependent of dependents) {
+          if (data[i][dependent] !== record[dependent]) {
+            shouldMerge = false;
+            break;
+          }
+        }
+        if (shouldMerge && data[i][dataIndex] === record[dataIndex]) {
+          rowSpan++;
+        } else {
+          break;
+        }
+      }
+      return rowSpan;
+    };
+
+    const columns: TableColumnType[] = [
+    {
+        title: '序号',
+        dataIndex: 'key',
+        customCell: (record, rowIndex) => {
+          const rowSpan = getRowSpan('name', record, data);
+          if (rowIndex != 0 && data[rowIndex-1].key == record.key) {
+            return {
+              rowSpan: 0,
+              colSpan: 0,
+            }
+          }
+          return {
+            rowSpan: rowSpan,
+          };
+        
+        },
+      },
+      {
+        title: '设备名称',
+        dataIndex: 'name',
+        customCell: (record, rowIndex) => {
+          const rowSpan = getRowSpan('name', record, data);
+          if (rowIndex != 0 && data[rowIndex-1].name == record.name) {
+            return {
+              rowSpan: 0,
+              colSpan: 0,
+            }
+          }
+          return {
+            rowSpan: rowSpan,
+          };
+          
+          // if (rowIndex === data.indexOf(record)) {
+          //   return {
+          //     rowSpan: rowSpan,
+          //   };
+          // }
+          // return {
+          //   rowSpan: 0,
+          //   colSpan: 0,
+          // };
+        },
+      },
+      {
+        title: '设备点位',
+        dataIndex: 'position',
+        customCell: (record, rowIndex) => {
+          const rowSpan = getRowSpan('position', record, data, ['name']);
+          if (rowIndex != 0 && data[rowIndex-1].name == record.name && data[rowIndex-1].position == record.position) {
+            return {
+              rowSpan: 0,
+              colSpan: 0,
+            }
+          }
+          return {
+            rowSpan: rowSpan,
+          };
+          // if (rowIndex === data.indexOf(record)) {
+          //   return {
+          //     rowSpan: rowSpan,
+          //   };
+          // }
+          // return {
+          //   rowSpan: 0,
+          //   colSpan: 0,
+          // };
+        },
+      },
+      {
+        title: '计量单位',
+        dataIndex: 'unit',
+        customCell: (record, rowIndex) => {
+          const rowSpan = getRowSpan('unit', record, data, ['name', 'position']);
+          if (rowIndex != 0 && data[rowIndex-1].name == record.name && data[rowIndex-1].position == record.position && data[rowIndex-1].unit == record.unit) {
+            return {
+              rowSpan: 0,
+              colSpan: 0,
+            }
+          }
+          return {
+            rowSpan: rowSpan,
+          };
+          // if (rowIndex === data.indexOf(record)) {
+          //   return {
+          //     rowSpan: rowSpan,
+          //   };
+          // }
+          // return {
+          //   rowSpan: 0,
+          //   colSpan: 0,
+          // };
+        },
+      },
+      {
+        title: '日期',
+        dataIndex: 'date',
+      },
+      {
+        title: '1:00',
+        dataIndex: '1:00',
+      },
+    ];
+
+    return {
+      data,
+      columns,
+    };
+  },
+});
+</script>
+
+<style lang="less" scoped></style>

hx-ai-intelligent/src/view/monitor/deviceMonitor/tree/index.vue

@@ -0,0 +1,225 @@
+<template>
+  <div class="parent-container">
+    <div class="ns-tree-title">
+      <span>设备列表</span>
+    </div>
+    <a-tree-select
+      v-model:value="value"
+      style="width: 100%"
+
+      :tree-line="treeLine && { showLeafIcon }"
+      :tree-data="treeData1"
+    >
+      <!-- <template #title="{ value: val, title }">
+        <b v-if="val === 'parent 1-1'" style="color: #08c">sss</b>
+        <template v-else>{{ title }}</template>
+      </template> -->
+    </a-tree-select>
+
+    <a-tree
+      v-model:expandedKeys="expandedKeys"
+      v-model:selectedKeys="selectedKeys"
+      v-model:checkedKeys="checkedKeys"
+      checkable
+      style="width: 100%; margin-bottom: 10px;"
+      :tree-data="treeData2"
+    >
+      <!-- <template #title="{ title, key }">
+        <span v-if="key === '0-0-1-0'" style="color: #1890ff">{{ title }}</span>
+        <template v-else>{{ title }}</template>
+      </template> -->
+    </a-tree>
+
+    <div class="fixed-bottom">
+      <a-divider />
+      <a-select
+        ref="select"
+        v-model:value="selectedValue"
+        placeholder="请选择点位"
+        style="width: 100%; margin-bottom: 10px;"
+        :options="options1"
+      ></a-select>
+      <a-select
+        v-model:value="frequencyValue"
+        placeholder="请选择频率"
+        style="width: 100%; margin-bottom: 10px;"
+        :options="options2"
+      ></a-select>
+      <a-range-picker v-model:value="dateRange" style="width: 100%; margin-bottom: 10px;" :placeholder="['请选择日期','请选择日期']"/>
+      <a-button type="primary" style="width: 100%; margin-bottom: 10px;" @click="getDianWeiList">查询</a-button>
+    </div>
+  </div>
+</template>
+
+<script lang="ts">
+import type { TreeSelectProps, TreeProps, SelectProps } from 'ant-design-vue';
+import { defineComponent, ref, watch ,onMounted } from 'vue';
+import dayjs, { Dayjs } from 'dayjs';
+
+const treeData2: TreeProps['treeData'] = [
+  {
+    title: 'AC_001(总电表)',
+    key: '1',
+    children: [
+      {
+        title: 'AC_002(暖通电表)',
+        key: '2',
+      },
+      {
+        title: 'AC_003(照明电表)',
+        key: '3',
+      },
+      {
+        title: 'AC_004(给排水电表)',
+        key: '4',
+      },
+      {
+        title: 'AC_005(通风电表)',
+        key: '5',
+      },
+      {
+        title: 'AC_006(电动门电表)',
+        key: '6',
+      },
+    ],
+  },
+];
+
+export default defineComponent({
+  name: 'Tree',
+  setup() {
+    const treeLine = ref(true);
+    const showLeafIcon = ref(false);
+    const value = ref<string>();
+
+    const treeData1 = ref<TreeSelectProps['treeData']>([
+      {
+        title: '3.电梯',
+        value: '3',
+        children: [
+          {
+            title: '301.扶梯',
+            value: '301',
+          },
+          {
+            title: '302.直梯',
+            value: '302',
+          },
+        ],
+      },
+      {
+        title: '4.冷热源',
+        value: '4',
+        children: [
+          {
+            title: '401.冷水机组',
+            value: '401',
+          },
+          {
+            title: '402.热泵机组',
+            value: '402',
+          },
+          {
+            title: '403.锅炉',
+            value: '403',
+          },
+          {
+            title: '404.水处理机组',
+            value: '404',
+          },
+        ],
+      },
+    ]);
+
+    const expandedKeys = ref<string[]>(['0-0-0', '0-0-1']);
+    const selectedKeys = ref<string[]>(['0-0-0', '0-0-1']);
+    const checkedKeys = ref<string[]>(['0-0-0', '0-0-1']);
+
+    const options1 = ref<SelectProps['options']>([]);
+    const options2 = ref<SelectProps['options']>([
+      {
+        value: '1',
+        label: '5分钟',
+      },
+      {
+        value: '2',
+        label: '10分钟',
+      },
+      {
+        value: '3',
+        label: '30分钟',
+      },
+      {
+        value: '4',
+        label: '1小时',
+      },
+    ]);
+    const selectedValue = ref<string | undefined>();
+    const frequencyValue = ref<string | undefined>();
+    const dateRange = ref<[Dayjs, Dayjs] | undefined>();
+
+    const getDianWeiList = () => {
+      console.log('getDianWeiList 被调用');
+      options1.value = [
+        { value: '1', label: 'A 项电压' },
+        { value: '2', label: 'B 项电压' },
+        { value: '3', label: 'C 项电压' },
+        { value: '4', label: 'AB 线电压' },
+        { value: '5', label: 'BC 线电压' },
+        { value: '6', label: 'A 项电流' },
+        { value: '7', label: 'B 项电流' },
+      ];
+    };
+
+    onMounted(() => {
+      getDianWeiList();
+    });
+
+    const dateFormat = 'YYYY-MM-DD';
+
+
+
+    return {
+      treeLine,
+      showLeafIcon,
+      value,
+      treeData1,
+      treeData2,
+      expandedKeys,
+      selectedKeys,
+      checkedKeys,
+      options1,
+      options2,
+      selectedValue,
+      frequencyValue,
+      dateRange,
+      getDianWeiList,
+    };
+  },
+});
+</script>
+
+<style lang="less" scoped>
+.ns-tree-title {
+  user-select: text;
+  margin-bottom: 5px;
+  padding-bottom: 10px;
+  padding-top: 10px;
+  border-bottom: 1px solid #e9e9e9;
+  > span {
+    padding-left: 10px;
+    line-height: 20px;
+  }
+}
+.parent-container {
+  position: relative;
+  height: 100%;
+}
+
+.fixed-bottom {
+  position: absolute;
+  bottom: 0;
+  width: 100%;
+  margin-bottom: 10px;
+}
+</style>