123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230231232233234235236237238239240241242243244245246247248249250251252253254255256257258259260261262263264265266267268269270271272273274275276277278279280281282283284285286287288289290291292293294295296297298299300301302303304305306307308309310311312313314315316317318319320321322323324325326327328329330331332333334335336337338339340341342343344345346347348349350351352353354355356357358359360361362363364365366367368369370371372373374375376377378379380381382383384385386387388389390391392393394395396397398399400401402403404405406407408409410411412413414415416417418419420421422423424425426427428429430431432433434435436437438439440441442443444445446447448449450451452453454455456457458459460461462463464465466467468469470471472473474475476477478479480481482483484485486487488489490491492493494495496497498499500501502503504505506507508509510511512513514515516517518519520521522523524525526527528529530531532533534535536537538539540541542543544545546547548549550551552553554555556557558559560561562563564565566567568569570571572573574575576577578579580581582583584585586587588589590591592593594595 |
- <template>
- <div class="safetyList">
- <customHeader>监控分站管理</customHeader>
- <div class="content">
- <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="title-cd">
- <span>测点:</span>
- <span>
- [通讯正常]
- <span class="zd-open">407</span>
- </span>
- <span>
- [通讯中断]
- <span class="zd-close">0</span>
- </span>
- </div> -->
- </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: 710 }" :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>
- </div>
- </template>
- <script setup lang="ts">
- import { ref, nextTick, reactive, onMounted, onUnmounted } from 'vue';
- import customHeader from '/@/components/vent/customHeader.vue';
- import { subStationList, getList, getEdit, runDeviceMonitor, update158DevName, updateDebugStatus } from './safetyList.api';
- import { columns } from './safetyList.data';
- let visibleModalDebug = ref(false);
- let debugFlag = ref('');
- let debugStationId = ref('');
- let debugDeviceId = ref('');
- let startupDataDebug = reactive({
- speed: '',
- direction: '',
- });
- let derictList = reactive<any[]>([
- { label: '正向', value: '1' },
- { label: '反向', value: '0' },
- ]);
- let paramId = ref('');
- let isShow = ref(false);
- let stationName = ref('');
- let stationStatus = ref(null);
- let stationId = ref(null);
- let ljList = reactive<any[]>([
- { value: 0, label: '断开' },
- { value: 1, label: '连接' },
- ]);
- let activeIndex = ref(null);
- let cardList = ref<any[]>();
- let openNum = ref(0);
- let clsoeNum = ref(0);
- //分页参数配置
- 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 tableData = ref<any[]>([]);
- //一键启动弹窗
- let visibleModal = ref(false);
- let startupData = reactive({
- address: '',
- });
- let devId = ref('');
- //编辑弹窗
- let visibleModalEdit = ref(false);
- let startupDataEdit = reactive({
- address: '',
- });
- // // https获取监测数据
- // let timer: null | NodeJS.Timeout = null;
- // function getMonitor(flag = false) {
- // timer = setTimeout(
- // async () => {
- // // await getSubStationList()
- // await getStationList()
- // if (timer) {
- // timer = null;
- // }
- // getMonitor();
- // },
- // flag ? 0 : 5000
- // );
- // }
- //获取分站信息
- async function getSubStationList() {
- let res = await subStationList({ strtype: 'modbus' });
- if (res.length != 0) {
- cardList.value = res;
- 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;
- getStationList();
- }
- //站点名称编辑
- function changeName(val) {
- getChangeStation();
- }
- //站点连接状态修改
- function changeStatus(val) {
- getChangeStation();
- }
- async function getChangeStation() {
- let res = await getEdit({ id: stationId.value, strname: stationName.value, linkstatus: stationStatus.value });
- getSubStationList();
- isShow.value = false;
- }
- //获取详细信息列表
- async function getStationList() {
- let res = await getList({ subId: stationId.value, pageNo: pagination.current, pageSize: pagination.pageSize });
- res.forEach((el) => {
- el.key = el.id;
- el.gdmsC = el.gdms == '1' ? '直流供电' : el.gdms == '0' ? '交流供电' : '';
- el.linkIdC = el.linkId || '';
- el.linkstatusC = el.linkstatus ? '连接' : '断开';
- el.debugTitle = '调试';
- el.children = el.devInfoList;
- el.children.forEach((v) => {
- v.key = v.id;
- v.debugTitle = '调试';
- v.linkstatusC = v.netStatus ? '连接' : '断开';
- v.linkIdC = v.linkId == '0' ? '未启用' : v.linkId == '1' ? '启用' : v.linkId == '2' ? '设备异常' : '';
- 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 pageChange(val) {
- pagination.current = val.current;
- pagination.pageSize = val.pageSize;
- getStationList();
- }
- //启动新设备
- 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 handleOkDebug() {
- if (debugFlag.value == 'station') {
- let res = await updateDebugStatus({
- stationId: debugStationId.value,
- speed: startupDataDebug.speed,
- direction: startupDataDebug.direction,
- debugFlag: '1',
- });
- visibleModalDebug.value = false;
- getStationList();
- } else {
- let res = await updateDebugStatus({
- stationId: debugStationId.value,
- deviceId: debugDeviceId.value,
- speed: startupDataDebug.speed,
- direction: startupDataDebug.direction,
- debugFlag: '1',
- });
- visibleModalDebug.value = false;
- getStationList();
- }
- }
- //调试取消
- function handleCancelDebug() {
- visibleModalDebug.value = false;
- tableData.value.forEach((el) => {
- el.debugTitle = '调试';
- el.devInfoList.forEach((v) => {
- v.debugTitle = '调试';
- });
- });
- debugFlag.value = '';
- debugStationId.value = '';
- debugDeviceId.value = '';
- }
- //停止调试
- async function stopDebug() {
- if (debugFlag.value == 'station') {
- let res = await updateDebugStatus({ stationId: debugStationId.value, debugFlag: '0' });
- getStationList();
- } else {
- let res = await updateDebugStatus({ stationId: debugStationId.value, deviceId: debugDeviceId.value, debugFlag: '0' });
- getStationList();
- }
- }
- async function handleOk() {
- let res = await runDeviceMonitor({ devId: devId.value, devName: startupData.address });
- visibleModal.value = false;
- getStationList();
- }
- 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;
- getStationList();
- } else {
- let res = await update158DevName({ devId: devId.value, devName: startupDataEdit.address });
- console.log(res, '设备名称编辑---');
- visibleModalEdit.value = false;
- getStationList();
- }
- }
- //取消编辑
- function handleCancelEdit() {
- visibleModalEdit.value = false;
- startupDataEdit.address = '';
- }
- onMounted(() => {
- getSubStationList();
- // getMonitor(true);
- getStationList();
- });
- onUnmounted(() => {
- if (timer) {
- clearTimeout(timer);
- timer = undefined;
- }
- });
- </script>
- <style lang="less" scoped>
- .safetyList {
- width: calc(100% - 20px);
- height: calc(100% - 90px);
- position: relative;
- margin: 80px 10px 10px 10px;
- .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;
- span {
- color: #fff;
- }
- .zd-open {
- color: rgb(0, 242, 255);
- }
- .zd-close {
- color: #ff0000;
- }
- .title-fz {
- margin-right: 25px;
- }
- }
- .left-content {
- display: flex;
- justify-content: flex-start;
- align-items: flex-start;
- flex-wrap: wrap;
- height: calc(100% - 40px);
- overflow-y: auto;
- .card-box {
- position: relative;
- // width: 242px;
- width: 182px;
- height: 110px;
- 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-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-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-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;
- }
- }
- }
- }
- .zxm-form {
- padding-top: 20px !important;
- box-sizing: border-box;
- }
- ::v-deep(.zxm-radio-wrapper) {
- font-size: 12px;
- }
- ::v-deep(.zxm-input) {
- font-size: 12px;
- }
- </style>
|