|
|
@@ -1,5 +1,385 @@
|
|
|
<template>
|
|
|
- <div style="padding:30px;">
|
|
|
- 电力监测设备
|
|
|
+ <div class="powerEquip">
|
|
|
+ <el-tabs
|
|
|
+ v-model="activeName"
|
|
|
+ type="card"
|
|
|
+ @tab-click="handleClick"
|
|
|
+ style="background-color: #fff; height: 100%"
|
|
|
+ class="tabsSizeColor"
|
|
|
+ >
|
|
|
+ <el-tab-pane label="电力监测设备" name="first">
|
|
|
+ <div class="first">
|
|
|
+ <div class="firstTop">
|
|
|
+ <div class="firstTopLeft">
|
|
|
+ <el-button class='goBack' @click='goBack' v-if="deviceNumData.length > 0" >返回</el-button>
|
|
|
+ <span class="firstTopLeftTitle">{{ title }}:</span>
|
|
|
+ <el-input
|
|
|
+ placeholder="输入关键字进行过滤"
|
|
|
+ v-model="filterText"
|
|
|
+ class="firstTopLeftInput"
|
|
|
+ >
|
|
|
+ <template #suffix>
|
|
|
+ <i class="el-icon-search el-input__icon"></i>
|
|
|
+ </template>
|
|
|
+ </el-input>
|
|
|
+ <el-button
|
|
|
+ type="primary"
|
|
|
+ icon="el-icon-search"
|
|
|
+ class="search-button"
|
|
|
+ >搜索</el-button
|
|
|
+ >
|
|
|
+ <el-button icon="el-icon-plus" type="success" @click="addItem()"
|
|
|
+ >新增</el-button
|
|
|
+ >
|
|
|
+ </div>
|
|
|
+
|
|
|
+ <div class="firstRight">
|
|
|
+ <el-button type="primary">导入</el-button>
|
|
|
+ <el-button type="primary">导出</el-button>
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+
|
|
|
+ <div class="firstContent" v-if="deviceNumData.length <= 0">
|
|
|
+ <el-table
|
|
|
+ :data="tableData"
|
|
|
+ border
|
|
|
+ stripe
|
|
|
+ :header-cell-style="headClass"
|
|
|
+ >
|
|
|
+ <el-table-column fixed prop="manufactor" label="厂家" width="">
|
|
|
+ </el-table-column>
|
|
|
+ <el-table-column prop="deviceModel" label="型号" width="">
|
|
|
+ </el-table-column>
|
|
|
+ <el-table-column prop="deviceNum" label="设备数量" width="">
|
|
|
+ <template #default="scope">
|
|
|
+ <div
|
|
|
+ style="margin-right: 15px; cursor: pointer; color: #409eff"
|
|
|
+ @click="deviceNumSelect({ id: scope.row.manufactor })"
|
|
|
+ >
|
|
|
+ {{ scope.row.deviceNum }}
|
|
|
+ </div>
|
|
|
+ </template>
|
|
|
+ </el-table-column>
|
|
|
+ <el-table-column fixed="right" label="操作" width="250">
|
|
|
+ <template #default="scope">
|
|
|
+ <el-button
|
|
|
+ type="text"
|
|
|
+ size="small"
|
|
|
+ style="color: #409eff"
|
|
|
+ @click.prevent="editRow(scope.row)"
|
|
|
+ >编辑</el-button
|
|
|
+ >
|
|
|
+ <el-button
|
|
|
+ @click="handleDelete(scope.$index, scope.row)"
|
|
|
+ type="text"
|
|
|
+ size="small"
|
|
|
+ style="color: red"
|
|
|
+ >删除</el-button
|
|
|
+ >
|
|
|
+ </template>
|
|
|
+ </el-table-column>
|
|
|
+ </el-table>
|
|
|
+ </div>
|
|
|
+ <div class="firstContent" v-if="deviceNumData.length > 0">
|
|
|
+ <el-table
|
|
|
+ :data="deviceNumData"
|
|
|
+ border
|
|
|
+ stripe
|
|
|
+ :header-cell-style="headClass"
|
|
|
+ >
|
|
|
+ <el-table-column prop="stationStatus" label="状态" width="">
|
|
|
+ <template #default="scope">
|
|
|
+ <el-avatar
|
|
|
+ class="status"
|
|
|
+ :style="
|
|
|
+ scope.row.stationStatus == 0
|
|
|
+ ? 'background-color:red'
|
|
|
+ : 'background-color:#04F21C'
|
|
|
+ "
|
|
|
+ ></el-avatar>
|
|
|
+ </template>
|
|
|
+ </el-table-column>
|
|
|
+ <el-table-column
|
|
|
+ prop="deviceName"
|
|
|
+ label="电力监测设备名称"
|
|
|
+ width=""
|
|
|
+ >
|
|
|
+ </el-table-column>
|
|
|
+ <el-table-column prop="deviceCode" label="设备编号" width="">
|
|
|
+ </el-table-column>
|
|
|
+ <el-table-column prop="location" label="所属地点" width="">
|
|
|
+ </el-table-column>
|
|
|
+ <el-table-column prop="ratedVoltage" label="额定电压" width="">
|
|
|
+ </el-table-column>
|
|
|
+ <el-table-column prop="ratedCurrent" label="额定电流" width="">
|
|
|
+ </el-table-column>
|
|
|
+ <el-table-column
|
|
|
+ prop="currentLoRaTh"
|
|
|
+ label="电流负载率门限"
|
|
|
+ width=""
|
|
|
+ >
|
|
|
+ </el-table-column>
|
|
|
+ <el-table-column prop="powerQuAn" label="电能质量分析" width="">
|
|
|
+ </el-table-column>
|
|
|
+ <el-table-column prop="meterAddress" label="表计地址" width="">
|
|
|
+ </el-table-column>
|
|
|
+ <el-table-column fixed="right" label="操作" width="">
|
|
|
+ <template #default="scope">
|
|
|
+ <el-button
|
|
|
+ type="text"
|
|
|
+ size="small"
|
|
|
+ style="color: #409eff"
|
|
|
+ @click.prevent="editRow(scope.row)"
|
|
|
+ >编辑</el-button
|
|
|
+ >
|
|
|
+ <el-button
|
|
|
+ @click="handleDelete(scope.$index, scope.row)"
|
|
|
+ type="text"
|
|
|
+ size="small"
|
|
|
+ style="color: red"
|
|
|
+ >删除</el-button
|
|
|
+ >
|
|
|
+ </template>
|
|
|
+ </el-table-column>
|
|
|
+ <el-table-column fixed="right" label="变量" width="">
|
|
|
+ <template #default="scope">
|
|
|
+ <el-button
|
|
|
+ type="text"
|
|
|
+ size="small"
|
|
|
+ style="color: #409eff"
|
|
|
+ @click.prevent="variableList(scope.row)"
|
|
|
+ >变量列表</el-button
|
|
|
+ >
|
|
|
+ <el-button
|
|
|
+ @click="clone(scope.$index, scope.row)"
|
|
|
+ type="text"
|
|
|
+ size="small"
|
|
|
+ style="color: #409eff"
|
|
|
+ >克隆</el-button
|
|
|
+ >
|
|
|
+ </template>
|
|
|
+ </el-table-column>
|
|
|
+ </el-table>
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+ </el-tab-pane>
|
|
|
+ <el-tab-pane label="视频监测设备" name="second"> </el-tab-pane>
|
|
|
+ <el-tab-pane label="通信设备" name="third"> </el-tab-pane>
|
|
|
+ <el-tab-pane label="通道列表" name="five"> </el-tab-pane>
|
|
|
+ </el-tabs>
|
|
|
</div>
|
|
|
</template>
|
|
|
+<script lang="ts">
|
|
|
+import { defineComponent, ref, Ref } from "vue";
|
|
|
+
|
|
|
+interface PowerEquipData {
|
|
|
+ title: Ref;
|
|
|
+ deviceNumData: Ref;
|
|
|
+ tableData: Ref;
|
|
|
+ activeName: Ref;
|
|
|
+ filterText: Ref;
|
|
|
+}
|
|
|
+
|
|
|
+export default defineComponent({
|
|
|
+ name: "powerEquip",
|
|
|
+ components: {},
|
|
|
+ props: {},
|
|
|
+ setup(): PowerEquipData {
|
|
|
+ const title = ref("厂家或型号");
|
|
|
+ const deviceNumData = ref([]);
|
|
|
+ const tableData = ref([
|
|
|
+ {
|
|
|
+ manufactor: "上海永天科技股份有限公司",
|
|
|
+ deviceModel: "测试设备",
|
|
|
+ deviceNum: "8",
|
|
|
+ },
|
|
|
+ {
|
|
|
+ manufactor: "上海永天科技股份有限公司",
|
|
|
+ deviceModel: "测试设备",
|
|
|
+ deviceNum: "8",
|
|
|
+ },
|
|
|
+ {
|
|
|
+ manufactor: "上海永天科技股份有限公司",
|
|
|
+ deviceModel: "测试设备",
|
|
|
+ deviceNum: "8",
|
|
|
+ },
|
|
|
+ {
|
|
|
+ manufactor: "上海永天科技股份有限公司",
|
|
|
+ deviceModel: "测试设备",
|
|
|
+ deviceNum: "8",
|
|
|
+ },
|
|
|
+ {
|
|
|
+ manufactor: "上海永天科技股份有限公司",
|
|
|
+ deviceModel: "测试设备",
|
|
|
+ deviceNum: "8",
|
|
|
+ },
|
|
|
+ {
|
|
|
+ manufactor: "上海永天科技股份有限公司",
|
|
|
+ deviceModel: "测试设备",
|
|
|
+ deviceNum: "8",
|
|
|
+ },
|
|
|
+ {
|
|
|
+ manufactor: "上海永天科技股份有限公司",
|
|
|
+ deviceModel: "测试设备",
|
|
|
+ deviceNum: "8",
|
|
|
+ },
|
|
|
+ {
|
|
|
+ manufactor: "上海永天科技股份有限公司",
|
|
|
+ deviceModel: "测试设备",
|
|
|
+ deviceNum: "8",
|
|
|
+ },
|
|
|
+ ]);
|
|
|
+ const activeName = ref("first");
|
|
|
+ const filterText = ref("");
|
|
|
+
|
|
|
+ return {
|
|
|
+ title,
|
|
|
+ deviceNumData,
|
|
|
+ tableData,
|
|
|
+ activeName,
|
|
|
+ filterText,
|
|
|
+ };
|
|
|
+ },
|
|
|
+ methods: {
|
|
|
+ //返回
|
|
|
+ goBack(){
|
|
|
+ this.deviceNumData = []
|
|
|
+ },
|
|
|
+ //编辑
|
|
|
+ editRow(row) {
|
|
|
+ console.log(row);
|
|
|
+ },
|
|
|
+ //删除
|
|
|
+ handleDelete(index, row) {
|
|
|
+ console.log(index, row);
|
|
|
+ },
|
|
|
+ //变量列表
|
|
|
+ variableList(row) {
|
|
|
+ console.log(row);
|
|
|
+ },
|
|
|
+ //克隆
|
|
|
+ clone(index, row) {
|
|
|
+ console.log(index, row);
|
|
|
+ },
|
|
|
+ //设备数量查询
|
|
|
+ deviceNumSelect(data) {
|
|
|
+ console.log(data);
|
|
|
+ this.title = "设备或编号";
|
|
|
+ this.filterText = "";
|
|
|
+ this.deviceNumData = [
|
|
|
+ {
|
|
|
+ stationStatus: 0,
|
|
|
+ deviceName: "测试设备",
|
|
|
+ deviceCode: "cubbs",
|
|
|
+ location: "站点1",
|
|
|
+ ratedVoltage: 10,
|
|
|
+ ratedCurrent: 58,
|
|
|
+ currentLoRaTh: 80,
|
|
|
+ powerQuAn: "开启",
|
|
|
+ meterAddress: "1",
|
|
|
+ },
|
|
|
+ {
|
|
|
+ stationStatus: 1,
|
|
|
+ deviceName: "测试设备",
|
|
|
+ deviceCode: "cubbs",
|
|
|
+ location: "站点1",
|
|
|
+ ratedVoltage: 10,
|
|
|
+ ratedCurrent: 58,
|
|
|
+ currentLoRaTh: 80,
|
|
|
+ powerQuAn: "开启",
|
|
|
+ meterAddress: "1",
|
|
|
+ },
|
|
|
+ ];
|
|
|
+ console.log(this.deviceNumData)
|
|
|
+ },
|
|
|
+
|
|
|
+ // 表头样式设置
|
|
|
+ headClass() {
|
|
|
+ return "background:#FAFAFA !important;color: black;";
|
|
|
+ },
|
|
|
+ handleClick(tab, event) {
|
|
|
+ console.log(tab, event);
|
|
|
+ },
|
|
|
+ },
|
|
|
+});
|
|
|
+</script>
|
|
|
+
|
|
|
+<style lang="scss">
|
|
|
+.powerEquip {
|
|
|
+ height: calc(100vh - 100px);
|
|
|
+ padding: 30px;
|
|
|
+ margin-top: 50px;
|
|
|
+}
|
|
|
+//firstInput样式
|
|
|
+.first {
|
|
|
+ margin: 15px;
|
|
|
+ //顶部左侧样式
|
|
|
+ .firstTop {
|
|
|
+ display: flex;
|
|
|
+ height: 32px;
|
|
|
+ line-height: 32px;
|
|
|
+ .firstTopLeft {
|
|
|
+ width: 70%;
|
|
|
+ .goBack{
|
|
|
+ margin-right: 15px;
|
|
|
+ }
|
|
|
+ .firstTopLeftTitle {
|
|
|
+ font-size: 14px;
|
|
|
+ margin-right: 10px;
|
|
|
+ }
|
|
|
+ .firstTopLeftInput {
|
|
|
+ width: 15rem;
|
|
|
+ }
|
|
|
+ .el-input__icon {
|
|
|
+ color: #409eff;
|
|
|
+ }
|
|
|
+ .el-input__inner:hover {
|
|
|
+ border-color: #409eff;
|
|
|
+ }
|
|
|
+ .el-input__inner:focus {
|
|
|
+ border-color: #409eff;
|
|
|
+ }
|
|
|
+ .search-button {
|
|
|
+ margin-left: 1rem;
|
|
|
+ }
|
|
|
+ }
|
|
|
+
|
|
|
+ //顶部右侧样式
|
|
|
+ .firstRight {
|
|
|
+ width: 30%;
|
|
|
+ button {
|
|
|
+ margin-left: 1rem;
|
|
|
+ float: right;
|
|
|
+ }
|
|
|
+ }
|
|
|
+ }
|
|
|
+ .firstContent {
|
|
|
+ margin-top: 15px;
|
|
|
+ }
|
|
|
+}
|
|
|
+
|
|
|
+// tab重置样式
|
|
|
+.tabsSizeColor > .el-tabs__header .el-tabs__item {
|
|
|
+ line-height: 50px;
|
|
|
+ height: 50px;
|
|
|
+ font-size: 16px;
|
|
|
+}
|
|
|
+.tabsSizeColor > .el-tabs__header .el-tabs__item.is-active {
|
|
|
+ border-bottom: 2px solid #409eff;
|
|
|
+ color: #409eff;
|
|
|
+}
|
|
|
+.tabsSizeColor > .el-tabs__header .el-tabs__item.is-active:hover {
|
|
|
+ color: #409eff !important;
|
|
|
+}
|
|
|
+.tabsSizeColor .el-tabs__header:hover,
|
|
|
+.el-tabs__item:hover {
|
|
|
+ color: #409eff !important;
|
|
|
+}
|
|
|
+.el-tabs__header {
|
|
|
+ margin-bottom: 0;
|
|
|
+}
|
|
|
+.el-tabs--card > .el-tabs__header .el-tabs__item,
|
|
|
+.el-tabs--card > .el-tabs__header .el-tabs__nav {
|
|
|
+ border: none;
|
|
|
+}
|
|
|
+</style>
|
fanghuisheng