|
|
@@ -9,36 +9,109 @@
|
|
|
<div class="box-content">
|
|
|
<!-- 分站监测 -->
|
|
|
<div class="now-content" v-if="activeKey == 'device'">
|
|
|
- <div class="now-title">
|
|
|
- <div class="title-fz">
|
|
|
- <span>分站：</span>
|
|
|
- <span>
|
|
|
- [通讯正常]
|
|
|
- <span class="zd-open">{{ openNum || 0 }}</span>
|
|
|
- </span>
|
|
|
- <span>
|
|
|
- [通讯中断]
|
|
|
- <span class="zd-close">{{ clsoeNum || 0 }}</span>
|
|
|
- </span>
|
|
|
- </div>
|
|
|
- </div>
|
|
|
- <div class="card-content">
|
|
|
- <div class="card-box" v-for="(item, index) in cardList" :key="index">
|
|
|
- <div :class="item.isNewAccess ? 'card-itemN' : item.linkstatus ? 'card-itemL' : 'card-itemD'"
|
|
|
- @click="cardClick(item, index)">
|
|
|
- <div class="card-item-label">{{ item.strname }}</div>
|
|
|
+ <div class="left-box">
|
|
|
+ <div class="left-title">
|
|
|
+ <div class="title-fz">
|
|
|
+ <span>分站：</span>
|
|
|
+ <span>
|
|
|
+ [通讯正常]
|
|
|
+ <span class="zd-open">{{ openNum || 0 }}</span>
|
|
|
+ </span>
|
|
|
+ <span>
|
|
|
+ [通讯中断]
|
|
|
+ <span class="zd-close">{{ clsoeNum || 0 }}</span>
|
|
|
+ </span>
|
|
|
</div>
|
|
|
- <div :class="activeIndex % 4 == 3 ? 'card-modal1' : 'card-modal'"
|
|
|
- v-if="activeIndex == index && isShow">
|
|
|
- <div class="modal-name">站点名称：</div>
|
|
|
- <a-input v-model:value="stationName" size="small" placeholder="请输入"
|
|
|
- @blur="changeName" />
|
|
|
- <div class="modal-lj">连接状态：</div>
|
|
|
- <a-radio-group v-model:value="stationStatus" size="small" :options="ljList"
|
|
|
- @change="changeStatus" />
|
|
|
+ </div>
|
|
|
+ <div class="left-content">
|
|
|
+ <div class="card-box" v-for="(item, index) in cardList" :key="index">
|
|
|
+ <div :class="item.isNewAccess ? 'card-itemN' : item.linkstatus ? 'card-itemL' : 'card-itemD'"
|
|
|
+ @click="cardClick(item, index)">
|
|
|
+ <div class="card-item-label">{{ item.strname }}</div>
|
|
|
+ </div>
|
|
|
+ <div :class="activeIndex % 4 == 3 ? 'card-modal1' : 'card-modal'"
|
|
|
+ v-if="activeIndex == index && isShow">
|
|
|
+ <div class="modal-name">站点名称：</div>
|
|
|
+ <a-input v-model:value="stationName" size="small" placeholder="请输入"
|
|
|
+ @blur="changeName" />
|
|
|
+ <div class="modal-lj">连接状态：</div>
|
|
|
+ <a-radio-group v-model:value="stationStatus" size="small" :options="ljList"
|
|
|
+ @change="changeStatus" />
|
|
|
+ </div>
|
|
|
</div>
|
|
|
</div>
|
|
|
</div>
|
|
|
+ <div class="right-box">
|
|
|
+ <div class="right-title">详细信息：</div>
|
|
|
+ <a-table size="small" :scroll="{ y: 680 }" :columns="columns" :data-source="tableData"
|
|
|
+ :pagination="pagination" @change="pageChange">
|
|
|
+ <template #action="{ record }">
|
|
|
+ <a-button v-if="!record.devInfoList" type="primary" :disabled="record.linkId != '0'"
|
|
|
+ size="small" @click="handlerunDeviceMonitor(record, '启动')">启动</a-button>
|
|
|
+ <a-button type="success" size="small" style="margin: 0px 10px"
|
|
|
+ @click="handlerunDeviceMonitor(record, '编辑')">编辑</a-button>
|
|
|
+ <a-button type="primary" size="small" @click="debugClick(record)">{{ record.debugTitle
|
|
|
+ }}</a-button>
|
|
|
+ </template>
|
|
|
+ <template #bodyCell="{ column, text }">
|
|
|
+ <template v-if="column.dataIndex === 'valueJc' && text">
|
|
|
+ <div v-for="item in text.split(',')" :key="item">
|
|
|
+ <span
|
|
|
+ v-if="item.substring(item.indexOf(':') + 1) && !isNaN(parseFloat(item.substring(item.indexOf(':') + 1)))"
|
|
|
+ style="display: inline-block;width: 45%;text-align: right; color:rgb(0, 242, 255);margin-right:5px">{{
|
|
|
+ item.substring(0, item.indexOf(':') + 1) }}</span>
|
|
|
+ <span
|
|
|
+ v-if="item.substring(item.indexOf(':') + 1) && !isNaN(parseFloat(item.substring(item.indexOf(':') + 1)))"
|
|
|
+ style="display: inline-block; width:50%;text-align: left; color:#fff">{{
|
|
|
+ item.substring(item.indexOf(':') + 1) === '1' ? '正风' :
|
|
|
+ item.substring(item.indexOf(':') + 1) === '2' ?
|
|
|
+ '反风' : item.substring(item.indexOf(':') + 1) }} </span>
|
|
|
+ </div>
|
|
|
+ </template>
|
|
|
+
|
|
|
+ </template>
|
|
|
+ </a-table>
|
|
|
+ <!-- 一键启动弹窗 -->
|
|
|
+ <a-modal style="top:300px;left:360px" v-model:visible="visibleModal" :width="450" title="一键启动"
|
|
|
+ @ok="handleOk" @cancel="handleCancel">
|
|
|
+ <a-form :model="startupData" labelAlign="right" :label-col="{ span: 8 }"
|
|
|
+ :wrapper-col="{ span: 16 }">
|
|
|
+ <a-form-item label="安装位置">
|
|
|
+ <a-input v-model:value="startupData.address" placeholder="请输入"
|
|
|
+ style="width: 260px" />
|
|
|
+ </a-form-item>
|
|
|
+ </a-form>
|
|
|
+ </a-modal>
|
|
|
+ <!-- 编辑弹窗 -->
|
|
|
+ <a-modal style="top:300px;left:360px" v-model:visible="visibleModalEdit" :width="450"
|
|
|
+ title="编辑信息" @ok="handleOkEdit" @cancel="handleCancelEdit">
|
|
|
+ <a-form :model="startupDataEdit" labelAlign="right" :label-col="{ span: 8 }"
|
|
|
+ :wrapper-col="{ span: 16 }">
|
|
|
+ <a-form-item label="安装位置">
|
|
|
+ <a-input v-model:value="startupDataEdit.address" placeholder="请输入"
|
|
|
+ style="width: 260px" />
|
|
|
+ </a-form-item>
|
|
|
+ </a-form>
|
|
|
+ </a-modal>
|
|
|
+ <!-- 调试弹窗 -->
|
|
|
+ <a-modal style="top:300px;left:360px" v-model:visible="visibleModalDebug" :width="450"
|
|
|
+ title="调试信息" @ok="handleOkDebug" @cancel="handleCancelDebug">
|
|
|
+ <a-form :model="startupDataDebug" labelAlign="right" :label-col="{ span: 8 }"
|
|
|
+ :wrapper-col="{ span: 16 }">
|
|
|
+ <a-form-item label="风速">
|
|
|
+ <a-input v-model:value="startupDataDebug.speed" placeholder="请输入"
|
|
|
+ style="width: 260px" />
|
|
|
+ </a-form-item>
|
|
|
+ <a-form-item label="风向">
|
|
|
+ <a-select v-model:value="startupDataDebug.direction" style="width: 260px">
|
|
|
+ <a-select-option v-for="file in derictList" :key="file.label"
|
|
|
+ :value="file.value">{{ file.label
|
|
|
+ }}</a-select-option>
|
|
|
+ </a-select>
|
|
|
+ </a-form-item>
|
|
|
+ </a-form>
|
|
|
+ </a-modal>
|
|
|
+ </div>
|
|
|
|
|
|
</div>
|
|
|
<!-- 监测详情 -->
|
|
|
@@ -53,34 +126,16 @@
|
|
|
@click="getSearch">查询</a-button>
|
|
|
<a-button preIcon="ant-design:sync-outlined" @click="getReset">重置</a-button>
|
|
|
</div>
|
|
|
- <a-table size="small" :scroll="{ y: 680 }" :columns="columnsDetail" :data-source="tableData">
|
|
|
+ <a-table size="small" :scroll="{ y: 680 }" :columns="columnsDetail" :data-source="tableData1">
|
|
|
<template #action="{ record }">
|
|
|
<a-button type="primary" size="small" @click="handleEdit(record)">编辑</a-button>
|
|
|
</template>
|
|
|
<template #bodyCell="{ column, text }"></template>
|
|
|
</a-table>
|
|
|
<!-- 编辑弹窗 -->
|
|
|
- <a-modal v-model:visible="visibleModalEdit" centered :width="650" title="编辑信息" :footer="null">
|
|
|
+ <a-modal v-model:visible="visibleModalEdit1" centered :width="650" title="编辑信息" :footer="null">
|
|
|
<a-form :model="formEdit" labelAlign="right" :label-col="{ span: 7 }"
|
|
|
:wrapper-col="{ span: 17 }">
|
|
|
- <!-- <a-form-item label="日时：">
|
|
|
- <a-select v-model:value="formEdit.rs" style="width: 260px;margin-right: 10px;">
|
|
|
- <a-select-option v-for="file in timeList" :key="file.label"
|
|
|
- :value="file.value">{{
|
|
|
- file.label }}</a-select-option>
|
|
|
- </a-select>
|
|
|
- <a-button type="primary">下发</a-button>
|
|
|
- </a-form-item>
|
|
|
- <a-form-item label="分秒：">
|
|
|
- <a-input v-model:value="formEdit.fm" placeholder="请输入"
|
|
|
- style="width: 260px;margin-right: 10px;" />
|
|
|
- <a-button type="primary">下发</a-button>
|
|
|
- </a-form-item> -->
|
|
|
- <!-- <a-form-item label="年月：">
|
|
|
- <a-date-picker v-model:value="formEdit.ny" placeholder="请输入"
|
|
|
- style="width: 260px;margin-right: 10px;" />
|
|
|
- <a-button type="primary">下发</a-button>
|
|
|
- </a-form-item> -->
|
|
|
<a-form-item label="软件版本：">
|
|
|
<a-input v-model:value="formEdit.rjbb" placeholder="请输入"
|
|
|
style="width: 260px;margin-right: 10px;" />
|
|
|
@@ -139,7 +194,7 @@
|
|
|
<script setup lang="ts">
|
|
|
import { ref, nextTick, reactive, onMounted, onUnmounted } from 'vue';
|
|
|
import { subStationList, getList, getEdit, runDeviceMonitor, update158DevName, updateDebugStatus, get158StationData, set158StationData } from '../safetyList.api';
|
|
|
-import { columnsDetail } from '../safetyList.data'
|
|
|
+import { columnsDetail, columns } from '../safetyList.data'
|
|
|
import customHeader from '/@/components/vent/customHeader.vue';
|
|
|
|
|
|
let activeKey = ref('device')
|
|
|
@@ -156,16 +211,18 @@ let openNum = ref(0)
|
|
|
let clsoeNum = ref(0)
|
|
|
let stationId = ref(null)
|
|
|
let tableData = ref<any[]>([])
|
|
|
+let tableData1 = ref<any[]>([])
|
|
|
//分页参数配置
|
|
|
-// let pagination = reactive({
|
|
|
-// current: 1, // 当前页码
|
|
|
-// pageSize: 20, // 每页显示条数
|
|
|
-// total: 0, // 总条目数，后端返回
|
|
|
-// // showTotal: (total, range) => `${range[0]}-${range[1]} 条，总共 ${total} 条`, // 分页右下角显示信息
|
|
|
-// showSizeChanger: true, // 是否可改变每页显示条数
|
|
|
-// pageSizeOptions: ['10', '20', '30', '40', '50', '100'], // 可选的每页显示条数
|
|
|
-// });
|
|
|
+let pagination = reactive({
|
|
|
+ current: 1, // 当前页码
|
|
|
+ pageSize: 20, // 每页显示条数
|
|
|
+ total: 0, // 总条目数，后端返回
|
|
|
+ // showTotal: (total, range) => `${range[0]}-${range[1]} 条，总共 ${total} 条`, // 分页右下角显示信息
|
|
|
+ showSizeChanger: true, // 是否可改变每页显示条数
|
|
|
+ pageSizeOptions: ['10', '20', '30', '40', '50', '100'], // 可选的每页显示条数
|
|
|
+});
|
|
|
let visibleModalEdit = ref(false)
|
|
|
+let visibleModalEdit1=ref(false)
|
|
|
let formEdit = reactive({
|
|
|
id: '',
|
|
|
rs: '',
|
|
|
@@ -190,50 +247,43 @@ let jcddkzList = reactive<any[]>([
|
|
|
])
|
|
|
let searchStationId = ref('')
|
|
|
let stationList = reactive<any[]>([])
|
|
|
+let devId = ref('')
|
|
|
+let startupDataEdit = reactive({
|
|
|
+ address: ''
|
|
|
+})
|
|
|
+//一键启动弹窗
|
|
|
+let visibleModal = ref(false);
|
|
|
+let startupData = reactive({
|
|
|
+ address: '',
|
|
|
+})
|
|
|
+let paramId = ref('')
|
|
|
+let startupDataDebug = reactive({
|
|
|
+ speed: '',
|
|
|
+ direction: '',
|
|
|
+})
|
|
|
+let visibleModalDebug = ref(false)
|
|
|
+let debugFlag = ref('')
|
|
|
+let debugStationId = ref('')
|
|
|
+let debugDeviceId = ref('')
|
|
|
+let derictList = reactive<any[]>([
|
|
|
+ { label: '正向', value: '1' },
|
|
|
+ { label: '反向', value: '0' }
|
|
|
+])
|
|
|
|
|
|
//tab选项切换
|
|
|
function onChangeTab(tab) {
|
|
|
activeKey.value = tab
|
|
|
-}
|
|
|
-//获取分站实时监测信息
|
|
|
-async function getSubStationList() {
|
|
|
- stationList.length = 0
|
|
|
- let res = await subStationList({ strtype: "modbus" })
|
|
|
- if (res.length != 0) {
|
|
|
- cardList.value = res
|
|
|
- res.forEach(el => {
|
|
|
- stationList.push({ label: el.strinstallpos, value: el.id })
|
|
|
- })
|
|
|
- openNum.value = cardList.value?.filter(v => v.linkstatus == 1)['length']
|
|
|
- clsoeNum.value = cardList.value?.filter(v => v.linkstatus == 0)['length']
|
|
|
+ if (activeKey.value == 'device') {
|
|
|
+ getSubStationList()
|
|
|
+ getStationList1()
|
|
|
} else {
|
|
|
- cardList.value = []
|
|
|
+ getSubStationList()
|
|
|
+ getStationList()
|
|
|
}
|
|
|
}
|
|
|
-//分站站点选项点击
|
|
|
-function cardClick(item, index) {
|
|
|
- activeIndex.value = item.isNewAccess ? index : null
|
|
|
- stationName.value = item.strname
|
|
|
- stationStatus.value = item.linkstatus
|
|
|
- stationId.value = item.id
|
|
|
- isShow.value = true
|
|
|
-}
|
|
|
-//分站站点名称编辑
|
|
|
-function changeName(val) {
|
|
|
- getChangeStation()
|
|
|
-}
|
|
|
-async function getChangeStation() {
|
|
|
- let res = await getEdit({ id: stationId.value, strname: stationName.value, linkstatus: stationStatus.value })
|
|
|
- getSubStationList()
|
|
|
- isShow.value = false
|
|
|
-}
|
|
|
-//站点连接状态修改
|
|
|
-function changeStatus(val) {
|
|
|
- getChangeStation()
|
|
|
-}
|
|
|
//获取详细信息列表
|
|
|
async function getStationList() {
|
|
|
- tableData.value.length = 0
|
|
|
+ tableData1.value.length = 0
|
|
|
let res = await get158StationData({ stationId: searchStationId.value })
|
|
|
res.dqgdfsC = res.dqgdfs == '1' ? '交流供电' : res.dqgdfs == '0' ? '电池供电' : ''
|
|
|
res.kgdwztC = res.kgdwzt == '1' ? '开启' : res.kgdwzt == '0' ? '关闭' : ''
|
|
|
@@ -241,9 +291,7 @@ async function getStationList() {
|
|
|
res.whxfdC = res.whxfd == '1' ? '维护放电开启' : res.whxfd == '0' ? '维护放电关闭' : ''
|
|
|
res.jcddkz1C = res.jcddkz1 == '1' ? '控制' : res.jcddkz1 == '0' ? '不控制' : ''
|
|
|
res.jcddkz2C = res.jcddkz2 == '1' ? '控制' : res.jcddkz2 == '0' ? '不控制' : ''
|
|
|
- tableData.value.push(res)
|
|
|
- // tableData.value = res
|
|
|
- // pagination.total = res.total
|
|
|
+ tableData1.value.push(res)
|
|
|
}
|
|
|
//查询
|
|
|
function getSearch() {
|
|
|
@@ -251,18 +299,12 @@ function getSearch() {
|
|
|
}
|
|
|
//重置
|
|
|
function getReset() {
|
|
|
- searchStationId.value=''
|
|
|
+ searchStationId.value = ''
|
|
|
getStationList()
|
|
|
}
|
|
|
-//分页切换
|
|
|
-// function pageChange(val) {
|
|
|
-// pagination.current = val.current;
|
|
|
-// pagination.pageSize = val.pageSize;
|
|
|
-// getStationList();
|
|
|
-// }
|
|
|
//编辑
|
|
|
function handleEdit(record) {
|
|
|
- visibleModalEdit.value = true
|
|
|
+ visibleModalEdit1.value = true
|
|
|
formEdit = {
|
|
|
id: record.id,
|
|
|
rs: record.rs,
|
|
|
@@ -283,51 +325,249 @@ async function handleClick(data) {
|
|
|
switch (data) {
|
|
|
case '软件版本':
|
|
|
await set158StationData({ stationId: formEdit.id, plcCode: 'rjbb', value: formEdit.rjbb })
|
|
|
- visibleModalEdit.value = false
|
|
|
+ visibleModalEdit1.value = false
|
|
|
getStationList()
|
|
|
break;
|
|
|
case '硬件版本':
|
|
|
await set158StationData({ stationId: formEdit.id, plcCode: 'yjbb', value: formEdit.yjbb })
|
|
|
- visibleModalEdit.value = false
|
|
|
+ visibleModalEdit1.value = false
|
|
|
getStationList()
|
|
|
break;
|
|
|
case '电池额定容量':
|
|
|
await set158StationData({ stationId: formEdit.id, plcCode: 'dcedrl', value: formEdit.dcedrl })
|
|
|
- visibleModalEdit.value = false
|
|
|
+ visibleModalEdit1.value = false
|
|
|
getStationList()
|
|
|
break;
|
|
|
case '四个字节保存密码':
|
|
|
await set158StationData({ stationId: formEdit.id, plcCode: 'sgzjbcmm', value: formEdit.sgzjbcmm })
|
|
|
- visibleModalEdit.value = false
|
|
|
+ visibleModalEdit1.value = false
|
|
|
getStationList()
|
|
|
break;
|
|
|
case '第一路485波特率':
|
|
|
await set158StationData({ stationId: formEdit.id, plcCode: 'dyl485btl', value: formEdit.dyl485btl })
|
|
|
- visibleModalEdit.value = false
|
|
|
+ visibleModalEdit1.value = false
|
|
|
getStationList()
|
|
|
break;
|
|
|
case '维护性放电':
|
|
|
await set158StationData({ stationId: formEdit.id, plcCode: 'whxfd', value: formEdit.whxfd })
|
|
|
- visibleModalEdit.value = false
|
|
|
+ visibleModalEdit1.value = false
|
|
|
getStationList()
|
|
|
break;
|
|
|
case '近程断电控制1':
|
|
|
await set158StationData({ stationId: formEdit.id, plcCode: 'jcddkz1', value: formEdit.jcddkz1 })
|
|
|
- visibleModalEdit.value = false
|
|
|
+ visibleModalEdit1.value = false
|
|
|
getStationList()
|
|
|
break;
|
|
|
case '近程断电控制2':
|
|
|
await set158StationData({ stationId: formEdit.id, plcCode: 'jcddkz2', value: formEdit.jcddkz2 })
|
|
|
- visibleModalEdit.value = false
|
|
|
+ visibleModalEdit1.value = false
|
|
|
getStationList()
|
|
|
break;
|
|
|
}
|
|
|
}
|
|
|
|
|
|
+//获取分站实时监测信息
|
|
|
+async function getSubStationList() {
|
|
|
+ stationList.length = 0
|
|
|
+ let res = await subStationList({ strtype: "modbus" })
|
|
|
+ if (res.length != 0) {
|
|
|
+ cardList.value = res
|
|
|
+ res.forEach(el => {
|
|
|
+ stationList.push({ label: el.strinstallpos, value: el.id })
|
|
|
+ })
|
|
|
+ openNum.value = cardList.value?.filter(v => v.linkstatus == 1)['length']
|
|
|
+ clsoeNum.value = cardList.value?.filter(v => v.linkstatus == 0)['length']
|
|
|
+ } else {
|
|
|
+ cardList.value = []
|
|
|
+ }
|
|
|
+}
|
|
|
+//分站站点选项点击
|
|
|
+function cardClick(item, index) {
|
|
|
+ activeIndex.value = item.isNewAccess ? index : null
|
|
|
+ stationName.value = item.strname
|
|
|
+ stationStatus.value = item.linkstatus
|
|
|
+ stationId.value = item.id
|
|
|
+ isShow.value = true
|
|
|
+ getStationList1()
|
|
|
+}
|
|
|
+//分站站点名称编辑
|
|
|
+function changeName(val) {
|
|
|
+ getChangeStation()
|
|
|
+}
|
|
|
+async function getChangeStation() {
|
|
|
+ let res = await getEdit({ id: stationId.value, strname: stationName.value, linkstatus: stationStatus.value })
|
|
|
+ getSubStationList()
|
|
|
+ isShow.value = false
|
|
|
+}
|
|
|
+//站点连接状态修改
|
|
|
+function changeStatus(val) {
|
|
|
+ getChangeStation()
|
|
|
+}
|
|
|
+//获取详细信息列表
|
|
|
+async function getStationList1() {
|
|
|
+ let res = await getList({ subId: stationId.value, pageNo: pagination.current, pageSize: pagination.pageSize, })
|
|
|
+ res.forEach(el => {
|
|
|
+ el.key = el.id
|
|
|
+ el.linkstatusC = el.linkstatus ? '连接' : '未连接'
|
|
|
+ el.gdmsC = el.gdms == '1' ? '直流供电' : el.gdms == '0' ? '交流供电' : ''
|
|
|
+ el.debugTitle = '调试'
|
|
|
+ el.children = el.devInfoList
|
|
|
+ el.children.forEach(v => {
|
|
|
+ v.key = v.id
|
|
|
+ v.linkstatus = v.linkId
|
|
|
+ v.debugTitle = '调试'
|
|
|
+ v.linkstatusC = v.linkstatus == '0' ? '待启用' : v.linkstatus == '1' ? '连接' : '断开'
|
|
|
+ v.updateTime = v.time
|
|
|
+ v.gdmsC = v.gdms == '1' ? '直流供电' : v.gdms == '0' ? '交流供电' : ''
|
|
|
+ v.valueJc = `风向:${v.forward || ''},风量:${v.m3 || ''}m³/min,风速:${v.windSpeed || ''}m/s,气压:${v.pa || ''}Pa,压差:${v.difPress || ''}Pa,温度:${v.temperature || ''}℃,湿度:${v.humidity || ''}%,断面积:${v.area || ''}㎡`
|
|
|
+ })
|
|
|
+ })
|
|
|
+ tableData.value = res
|
|
|
+ pagination.total = res.total
|
|
|
+}
|
|
|
+//启动新设备
|
|
|
+function handlerunDeviceMonitor(record, val) {
|
|
|
+ devId.value = record.id
|
|
|
+ switch (val) {
|
|
|
+ case '编辑':
|
|
|
+ visibleModalEdit.value = true
|
|
|
+ startupDataEdit.address = record.strinstallpos
|
|
|
+ paramId.value = record.devInfoList ? 'subId' : 'devId'
|
|
|
+ break;
|
|
|
+ case '启动':
|
|
|
+ visibleModal.value = true
|
|
|
+ startupData.address = record.strinstallpos
|
|
|
+ break;
|
|
|
+ }
|
|
|
+}
|
|
|
+//分站，设备调试
|
|
|
+function debugClick(record) {
|
|
|
+ if (record.debugTitle == '调试') {
|
|
|
+ //正在调试中
|
|
|
+ startupDataDebug.speed = ''
|
|
|
+ startupDataDebug.direction = ''
|
|
|
+ visibleModalDebug.value = true
|
|
|
+ if (record.devInfoList) {
|
|
|
+ debugFlag.value = 'station'
|
|
|
+ debugStationId.value = record.id
|
|
|
+ tableData.value.forEach(el => {
|
|
|
+ el.debugTitle = '结束调试'
|
|
|
+ el.devInfoList.forEach(v => {
|
|
|
+ v.debugTitle = '结束调试'
|
|
|
+ })
|
|
|
+ })
|
|
|
+ } else {
|
|
|
+ debugFlag.value = 'device'
|
|
|
+ debugDeviceId.value = record.id
|
|
|
+ tableData.value.forEach(el => {
|
|
|
+ el.devInfoList.forEach(v => {
|
|
|
+ if (v.id == debugDeviceId.value) {
|
|
|
+ debugStationId.value = el.id
|
|
|
+ }
|
|
|
+ })
|
|
|
+ })
|
|
|
+ record.debugTitle = '结束调试'
|
|
|
+ }
|
|
|
+ } else {
|
|
|
+ if (record.devInfoList) {
|
|
|
+ debugFlag.value = 'station'
|
|
|
+ debugStationId.value = record.id
|
|
|
+ tableData.value.forEach(el => {
|
|
|
+ el.debugTitle = '调试'
|
|
|
+ el.devInfoList.forEach(v => {
|
|
|
+ v.debugTitle = '调试'
|
|
|
+ })
|
|
|
+ })
|
|
|
+ stopDebug()
|
|
|
+ } else {
|
|
|
+ debugFlag.value = 'device'
|
|
|
+ debugDeviceId.value = record.id
|
|
|
+ tableData.value.forEach(el => {
|
|
|
+ el.devInfoList.forEach(v => {
|
|
|
+ if (v.id == debugDeviceId.value) {
|
|
|
+ debugStationId.value = el.id
|
|
|
+ }
|
|
|
+ })
|
|
|
+ })
|
|
|
+ record.debugTitle = '调试'
|
|
|
+ stopDebug()
|
|
|
+ }
|
|
|
+ }
|
|
|
+}
|
|
|
+//停止调试
|
|
|
+async function stopDebug() {
|
|
|
+ if (debugFlag.value == 'station') {
|
|
|
+ let res = await updateDebugStatus({ stationId: debugStationId.value, debugFlag: '0' })
|
|
|
+ getStationList1()
|
|
|
+ } else {
|
|
|
+ let res = await updateDebugStatus({ stationId: debugStationId.value, deviceId: debugDeviceId.value, debugFlag: '0' })
|
|
|
+ getStationList1()
|
|
|
+ }
|
|
|
+}
|
|
|
+async function handleOk() {
|
|
|
+ let res = await runDeviceMonitor({ devId: devId.value, devName: startupData.address })
|
|
|
+ visibleModal.value = false
|
|
|
+ getStationList1()
|
|
|
+}
|
|
|
+function handleCancel() {
|
|
|
+ visibleModal.value = false
|
|
|
+ startupData.address = ''
|
|
|
+}
|
|
|
+//编辑
|
|
|
+async function handleOkEdit() {
|
|
|
+ if (paramId.value == 'subId') {
|
|
|
+ let res = await update158DevName({ subId: devId.value, devName: startupDataEdit.address })
|
|
|
+ console.log(res, '设备名称编辑---')
|
|
|
+ visibleModalEdit.value = false
|
|
|
+ getStationList1()
|
|
|
+ } else {
|
|
|
+ let res = await update158DevName({ devId: devId.value, devName: startupDataEdit.address })
|
|
|
+ console.log(res, '设备名称编辑---')
|
|
|
+ visibleModalEdit.value = false
|
|
|
+ getStationList1()
|
|
|
+ }
|
|
|
+}
|
|
|
+//取消编辑
|
|
|
+function handleCancelEdit() {
|
|
|
+ visibleModalEdit.value = false
|
|
|
+ startupDataEdit.address = ''
|
|
|
+}
|
|
|
+//调试确认
|
|
|
+async function handleOkDebug() {
|
|
|
+ if (debugFlag.value == 'station') {
|
|
|
+ let res = await updateDebugStatus({ stationId: debugStationId.value, speed: startupDataDebug.speed, direction: startupDataDebug.direction, debugFlag: '1' })
|
|
|
+ visibleModalDebug.value = false
|
|
|
+ getStationList1()
|
|
|
+ } else {
|
|
|
+ let res = await updateDebugStatus({ stationId: debugStationId.value, deviceId: debugDeviceId.value, speed: startupDataDebug.speed, direction: startupDataDebug.direction, debugFlag: '1' })
|
|
|
+ visibleModalDebug.value = false
|
|
|
+ getStationList1()
|
|
|
+ }
|
|
|
+}
|
|
|
+//调试取消
|
|
|
+function handleCancelDebug() {
|
|
|
+ visibleModalDebug.value = false
|
|
|
+ tableData.value.forEach(el => {
|
|
|
+ el.debugTitle = '调试'
|
|
|
+ el.devInfoList.forEach(v => {
|
|
|
+ v.debugTitle = '调试'
|
|
|
+ })
|
|
|
+ })
|
|
|
+ debugFlag.value = ''
|
|
|
+ debugStationId.value = ''
|
|
|
+ debugDeviceId.value = ''
|
|
|
+
|
|
|
+}
|
|
|
+//分页切换
|
|
|
+function pageChange(val) {
|
|
|
+ pagination.current = val.current;
|
|
|
+ pagination.pageSize = val.pageSize;
|
|
|
+ getStationList1()
|
|
|
+}
|
|
|
|
|
|
onMounted(() => {
|
|
|
getSubStationList()
|
|
|
- getStationList()
|
|
|
+ getStationList1()
|
|
|
})
|
|
|
</script>
|
|
|
|
|
|
@@ -385,133 +625,162 @@ onMounted(() => {
|
|
|
|
|
|
.box-content {
|
|
|
height: calc(100% - 50px);
|
|
|
- padding: 10px;
|
|
|
+ padding-top: 10px;
|
|
|
box-sizing: border-box;
|
|
|
|
|
|
.now-content {
|
|
|
+ position: relative;
|
|
|
width: 100%;
|
|
|
height: 100%;
|
|
|
+ display: flex;
|
|
|
+ justify-content: space-between;
|
|
|
+ align-items: center;
|
|
|
+
|
|
|
+ .left-box {
|
|
|
+ width: 40%;
|
|
|
+ height: 100%;
|
|
|
+ margin-right: 15px;
|
|
|
+ padding: 10px;
|
|
|
+ box-sizing: border-box;
|
|
|
+ background: url('/@/assets/images/fire/bj1.png') no-repeat center;
|
|
|
+ background-size: 100% 100%;
|
|
|
+
|
|
|
+ .left-title {
|
|
|
+ display: flex;
|
|
|
+ height: 30px;
|
|
|
+ align-items: center;
|
|
|
+ font-size: 14px;
|
|
|
+ margin-bottom: 10px;
|
|
|
|
|
|
- .now-title {
|
|
|
- display: flex;
|
|
|
- height: 30px;
|
|
|
- align-items: center;
|
|
|
- font-size: 14px;
|
|
|
- margin-bottom: 10px;
|
|
|
-
|
|
|
- span {
|
|
|
- color: #fff;
|
|
|
- }
|
|
|
+ span {
|
|
|
+ color: #fff;
|
|
|
+ }
|
|
|
|
|
|
- .zd-open {
|
|
|
- color: rgb(0, 242, 255);
|
|
|
- }
|
|
|
+ .zd-open {
|
|
|
+ color: rgb(0, 242, 255);
|
|
|
+ }
|
|
|
|
|
|
- .zd-close {
|
|
|
- color: #ff0000;
|
|
|
- }
|
|
|
+ .zd-close {
|
|
|
+ color: #ff0000;
|
|
|
+ }
|
|
|
|
|
|
- .title-fz {
|
|
|
- margin-right: 25px;
|
|
|
+ .title-fz {
|
|
|
+ margin-right: 25px;
|
|
|
+ }
|
|
|
}
|
|
|
- }
|
|
|
|
|
|
- .card-content {
|
|
|
- width: 100%;
|
|
|
- height: calc(100% - 40px);
|
|
|
- display: flex;
|
|
|
- justify-content: flex-start;
|
|
|
- align-items: flex-start;
|
|
|
- flex-wrap: wrap;
|
|
|
- overflow-y: auto;
|
|
|
-
|
|
|
- .card-box {
|
|
|
- position: relative;
|
|
|
- // width: 242px;
|
|
|
- width: 187px;
|
|
|
- height: 110px;
|
|
|
- margin-bottom: 15px;
|
|
|
+ .left-content {
|
|
|
display: flex;
|
|
|
- justify-content: center;
|
|
|
+ justify-content: flex-start;
|
|
|
+ align-items: flex-start;
|
|
|
+ flex-wrap: wrap;
|
|
|
+ height: calc(100% - 40px);
|
|
|
+ overflow-y: auto;
|
|
|
|
|
|
- .card-itemN {
|
|
|
+ .card-box {
|
|
|
position: relative;
|
|
|
- width: 85px;
|
|
|
+ // width: 242px;
|
|
|
+ width: 182px;
|
|
|
height: 110px;
|
|
|
- background: url('/@/assets/images/zd-2.png') no-repeat center;
|
|
|
- background-size: 100% 100%;
|
|
|
- cursor: pointer;
|
|
|
+ margin-bottom: 15px;
|
|
|
+ display: flex;
|
|
|
+ justify-content: center;
|
|
|
+
|
|
|
+ .card-itemN {
|
|
|
+ position: relative;
|
|
|
+ width: 85px;
|
|
|
+ height: 110px;
|
|
|
+ background: url('/@/assets/images/zd-2.png') no-repeat center;
|
|
|
+ background-size: 100% 100%;
|
|
|
+ cursor: pointer;
|
|
|
+
|
|
|
+ .card-item-label {
|
|
|
+ width: 100%;
|
|
|
+ position: absolute;
|
|
|
+ bottom: 5px;
|
|
|
+ font-size: 12px;
|
|
|
+ color: #fff;
|
|
|
+ text-align: center;
|
|
|
+ }
|
|
|
+ }
|
|
|
|
|
|
- .card-item-label {
|
|
|
- width: 100%;
|
|
|
- position: absolute;
|
|
|
- bottom: 5px;
|
|
|
- font-size: 12px;
|
|
|
- color: #fff;
|
|
|
- text-align: center;
|
|
|
+ .card-itemL {
|
|
|
+ position: relative;
|
|
|
+ width: 85px;
|
|
|
+ height: 110px;
|
|
|
+ background: url('/@/assets/images/zd-3.png') no-repeat center;
|
|
|
+ background-size: 100% 100%;
|
|
|
+ cursor: pointer;
|
|
|
+
|
|
|
+ .card-item-label {
|
|
|
+ width: 100%;
|
|
|
+ position: absolute;
|
|
|
+ bottom: 5px;
|
|
|
+ font-size: 12px;
|
|
|
+ color: #fff;
|
|
|
+ text-align: center;
|
|
|
+ }
|
|
|
}
|
|
|
- }
|
|
|
|
|
|
- .card-itemL {
|
|
|
- position: relative;
|
|
|
- width: 85px;
|
|
|
- height: 110px;
|
|
|
- background: url('/@/assets/images/zd-3.png') no-repeat center;
|
|
|
- background-size: 100% 100%;
|
|
|
- cursor: pointer;
|
|
|
+ .card-itemD {
|
|
|
+ position: relative;
|
|
|
+ width: 85px;
|
|
|
+ height: 110px;
|
|
|
+ background: url('/@/assets/images/zd-1.png') no-repeat center;
|
|
|
+ background-size: 100% 100%;
|
|
|
+ cursor: pointer;
|
|
|
+
|
|
|
+ .card-item-label {
|
|
|
+ width: 100%;
|
|
|
+ position: absolute;
|
|
|
+ bottom: 5px;
|
|
|
+ font-size: 12px;
|
|
|
+ color: #fff;
|
|
|
+ text-align: center;
|
|
|
+ }
|
|
|
+ }
|
|
|
|
|
|
- .card-item-label {
|
|
|
- width: 100%;
|
|
|
+ .card-modal {
|
|
|
+ width: 86px;
|
|
|
position: absolute;
|
|
|
- bottom: 5px;
|
|
|
+ left: 140px;
|
|
|
+ color: #FFF;
|
|
|
+ top: 50%;
|
|
|
+ transform: translate(0, -50%);
|
|
|
font-size: 12px;
|
|
|
- color: #fff;
|
|
|
- text-align: center;
|
|
|
}
|
|
|
- }
|
|
|
-
|
|
|
- .card-itemD {
|
|
|
- position: relative;
|
|
|
- width: 85px;
|
|
|
- height: 110px;
|
|
|
- background: url('/@/assets/images/zd-1.png') no-repeat center;
|
|
|
- background-size: 100% 100%;
|
|
|
- cursor: pointer;
|
|
|
|
|
|
- .card-item-label {
|
|
|
- width: 100%;
|
|
|
+ .card-modal1 {
|
|
|
+ width: 86px;
|
|
|
position: absolute;
|
|
|
- bottom: 5px;
|
|
|
+ left: -42px;
|
|
|
+ color: #FFF;
|
|
|
+ top: 50%;
|
|
|
+ transform: translate(0, -50%);
|
|
|
font-size: 12px;
|
|
|
- color: #fff;
|
|
|
- text-align: center;
|
|
|
}
|
|
|
- }
|
|
|
|
|
|
- .card-modal {
|
|
|
- width: 86px;
|
|
|
- position: absolute;
|
|
|
- left: 140px;
|
|
|
- color: #FFF;
|
|
|
- top: 50%;
|
|
|
- transform: translate(0, -50%);
|
|
|
- font-size: 12px;
|
|
|
}
|
|
|
-
|
|
|
- .card-modal1 {
|
|
|
- width: 86px;
|
|
|
- position: absolute;
|
|
|
- left: -42px;
|
|
|
- color: #FFF;
|
|
|
- top: 50%;
|
|
|
- transform: translate(0, -50%);
|
|
|
- font-size: 12px;
|
|
|
- }
|
|
|
-
|
|
|
}
|
|
|
}
|
|
|
|
|
|
+ .right-box {
|
|
|
+ width: calc(60% - 15px);
|
|
|
+ height: 100%;
|
|
|
+ padding: 10px;
|
|
|
+ box-sizing: border-box;
|
|
|
+ background: url('/@/assets/images/fire/bj1.png') no-repeat center;
|
|
|
+ background-size: 100% 100%;
|
|
|
|
|
|
+ .right-title {
|
|
|
+ display: flex;
|
|
|
+ height: 30px;
|
|
|
+ align-items: center;
|
|
|
+ font-size: 14px;
|
|
|
+ color: #fff;
|
|
|
+ margin-bottom: 10px;
|
|
|
+ }
|
|
|
+ }
|
|
|
}
|
|
|
|
|
|
.detail-content {
|
