update

ems-ui-cloud/src/views/mgr/construction.vue

@@ -1,227 +0,0 @@
-<template>
-  <div class="app-container">
-    <el-row :gutter="20">
-      <el-col :span="4" :xs="24">
-        <div class="head-container">
-          <el-input v-model="areaName" placeholder="请输入区块名称" clearable size="small" prefix-icon="el-icon-search"
-                    style="margin-bottom: 20px" />
-        </div>
-        <div class="head-container">
-          <el-tree :data="areaOptions" :props="defaultProps" :expand-on-click-node="false" :filter-node-method="filterNode" ref="tree"
-                   node-key="id" default-expand-all highlight-current @node-click="handleNodeClick" />
-        </div>
-      </el-col>
-      <el-col :span="20" :xs="24">
-        <el-row :gutter="20">
-          <el-col :span="6" v-for="(item, index) in chargingStation" :key="index">
-            <el-card class="box-card" :style="getCardStyle(item)">
-                <h2>{{ item.deviceName }}</h2>
-              <div class="status" :style="getStatusStyle(item.deviceStatus)">
-                {{ item.deviceStatus === 1 ? '在线' : '离线' }}
-              </div>
-              <div class="state" :style="getStateStyle(item.state)">
-                {{ item.stateName }}
-              </div>
-              <div class="card-content">
-                <p>电流：{{ item.current }} {{ item.currentUnit }}</p>
-                <p>电压：{{ item.voltage }} {{ item.voltageUnit }}</p>
-                <p>功率：{{ item.power }} {{ item.powerUnit }}</p>
-              </div>
-            </el-card>
-          </el-col>
-        </el-row>
-      </el-col>
-    </el-row>
-  </div>
-</template>
-
-<script>
-
-import { areaTreeSelect } from '@/api/basecfg/area'
-import {getByCondition} from '@/api/device/device.js'
-import { getObjAttr } from '@/api/basecfg/objAttribute'
-
-
-export default {
-  data() {
-    return {
-      // 遮罩层
-      loading: true,
-      // 选中数组
-      ids: [],
-      // 非单个禁用
-      single: true,
-      // 非多个禁用
-      multiple: true,
-      // 显示搜索条件
-      showSearch: true,
-      // 总条数
-      total: 0,
-      // 充电桩表格数据
-      chargingStation: [],
-      // 弹出层标题
-      title: '',
-      // 是否显示弹出层
-      open: false,
-      areaCode: undefined,
-      // 区域名称
-      areaName: undefined,
-      areaOptions: [],
-      defaultProps: {
-        children: 'children',
-        label: 'label'
-      },
-
-      // 查询参数
-      queryParams: {
-        pageNum: 1,
-        pageSize: 10,
-        areaCode: null,
-      },
-      // 表单参数
-      form: {},
-      // 表单校验
-      rules: {},
-    };
-  },
-  created() {
-    this.getAreaTree('0', 1)
-    this.getList()
-  },
-  methods: {
-    /** 查询充电桩列表 */
-    getList() {
-      this.loading = true;
-      getByCondition({
-        areaCode: this.queryParams.areaCode,
-        psCode: 'DC-EVSE'
-      }).then(({ code, data }) => {
-        if (code === 200) {
-          const promises = data.map(item => {
-            return getObjAttr(2, item.deviceCode).then(response => {
-              if (response.code === 200) {
-                const measureData = response.data.Measure || [];
-                const power = measureData.find(attr => attr.attrKey === 'power')?.attrValue || '0';
-                const powerUnit = measureData.find(attr => attr.attrKey === 'power')?.attrUnit || 'W';
-                const voltage = measureData.find(attr => attr.attrKey === 'voltage')?.attrValue || '0';
-                const voltageUnit = measureData.find(attr => attr.attrKey === 'voltage')?.attrUnit || 'V';
-                const current = measureData.find(attr => attr.attrKey === 'current')?.attrValue || '0';
-                const currentUnit = measureData.find(attr => attr.attrKey === 'current')?.attrUnit || 'A';
-                const stateData = response.data.State || [];
-                const state = stateData.find(attr => attr.attrGroup === 'State')?.attrValue || -1;
-                const stateName = stateData.find(attr => attr.attrGroup === 'State')?.attrValueName || '';
-                item.current = current;
-                item.currentUnit = currentUnit;
-                item.voltage = voltage;
-                item.voltageUnit = voltageUnit;
-                item.power = power;
-                item.powerUnit = powerUnit;
-                item.state = state;
-                item.stateName = stateName;
-              }
-            });
-          });
-          Promise.all(promises).then(() => {
-            this.chargingStation = data;
-          });
-        }
-      })
-    },
-
-    /** 搜索按钮操作 */
-    handleQuery() {
-      this.queryParams.pageNum = 1;
-      this.getList();
-    },
-    /** 重置按钮操作 */
-    resetQuery() {
-      this.resetForm('queryForm');
-      this.handleQuery();
-    },
-    // 多选框选中数据
-    handleSelectionChange(selection) {
-      this.ids = selection.map(item => item.id);
-      this.single = selection.length !== 1;
-      this.multiple = !selection.length;
-    },
-
-    // 筛选节点
-    filterNode(value, data) {
-      if (!value) return true
-      return data.label.indexOf(value) !== -1
-    },
-
-    // 节点单击事件
-    handleNodeClick(data) {
-      if (data.id === '-1') {
-        this.queryParams.areaCode = null;
-      } else {
-        this.queryParams.areaCode = data.id;
-      }
-      this.handleQuery();
-    },
-    /** 查询区域树结构 */
-    getAreaTree(areaCode, layer) {
-      areaTreeSelect(areaCode, layer).then(response => {
-        this.areaOptions = [{
-           id: '-1',
-          label: '全部',
-          children: response.data
-        }]
-      })
-    },
-    /** 获取卡片背景颜色*/
-    getCardStyle(item) {
-      if (item.deviceStatus === 0 || item.state === "2") {
-        return 'background: linear-gradient(135deg, #dcdcdc, #f0f0f0);';
-      } else {
-        return 'background: linear-gradient(135deg, #9AF576, #FFFFFF);';
-      }
-    },
-    /**获取设备在线状态文字样式*/
-    getStatusStyle(status) {
-      return status === 1 ? 'color: #fff; background: #67c23a;' : 'color: #fff; background: linear-gradient(135deg, #f44336, #e57373);';
-    },
-    /**获取设备使用状态文字样式 0=空闲，1=使用中，2=故障*/
-    getStateStyle(state) {
-      switch (state) {
-        case '0':
-          return 'color: #fff; background: #f44336;';
-        case '1':
-          return 'color: #fff; background: #67c23a; ';
-        case '2':
-          return 'color: #fff; background: #909399;';
-      }
-    },
-  },
-};
-</script>
-
-<style lang="css" scoped>
-.box-card {
-  margin: 10px;
-  width: calc(100% - 40px);
-  position: relative;
-}
-
-.status{
-  position: absolute;
-  top: 10px;
-  right: 10px;
-  padding: 2px 8px;
-  border-radius: 4px;
-  font-size: 12px;
-  color: #fff;
-}
-.state{
-  position: absolute;
-  top: 35px;
-  right: 10px;
-  padding: 2px 8px;
-  border-radius: 4px;
-  font-size: 12px;
-  color: #fff;
-}
-
-
-</style>