|
|
@@ -0,0 +1,195 @@
|
|
|
+<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.deviceStatus)">
|
|
|
+ <h2>{{ item.deviceName }}</h2>
|
|
|
+ <div class="status" :style="getStatusStyle(item.deviceStatus)">
|
|
|
+ {{ item.deviceStatus === 1 ? '使用中' : '离线' }}
|
|
|
+ </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';
|
|
|
+ item.current = current;
|
|
|
+ item.currentUnit = currentUnit;
|
|
|
+ item.voltage = voltage;
|
|
|
+ item.voltageUnit = voltageUnit;
|
|
|
+ item.power = power;
|
|
|
+ item.powerUnit = powerUnit;
|
|
|
+ }
|
|
|
+ });
|
|
|
+ });
|
|
|
+ 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(status) {
|
|
|
+ return status === 1 ? 'background: linear-gradient(135deg, #9AF576, #FFFFFF);' : 'background: linear-gradient(135deg, #FF7070, #FFFFFF);';
|
|
|
+ },
|
|
|
+ /**获取状态文字样式*/
|
|
|
+ getStatusStyle(status) {
|
|
|
+ return status === 1 ? 'color: #fff; background: #67c23a;' : 'color: #fff; background: linear-gradient(135deg, #f44336, #e57373);';
|
|
|
+ },
|
|
|
+
|
|
|
+ },
|
|
|
+};
|
|
|
+</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;
|
|
|
+}
|
|
|
+</style>
|
hsshuxian