|
|
@@ -0,0 +1,1508 @@
|
|
|
+<template>
|
|
|
+ <div class="safetyList">
|
|
|
+ <customHeader>监控分站管理详情</customHeader>
|
|
|
+ <div class="content">
|
|
|
+ <a-tabs class="tab-box" v-model:activeKey="activeKey" @change="onChangeTab">
|
|
|
+ <a-tab-pane tab="分站监测" key="device" />
|
|
|
+ <!-- <a-tab-pane tab="历史数据" key="history" /> -->
|
|
|
+ <!-- <a-tab-pane tab="监测详情" key="manageAuto" /> -->
|
|
|
+ <!-- <a-tab-pane tab="操作记录" key="operationRecord" /> -->
|
|
|
+ </a-tabs>
|
|
|
+ <div class="box-content">
|
|
|
+ <!-- 分站监测 -->
|
|
|
+ <div class="now-content" v-if="activeKey == 'device'">
|
|
|
+ <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-btn" style="margin-left: 55%">
|
|
|
+ <a-button type="primary" size="small" @click="getAllShow">显示全部</a-button>
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+ <div class="left-content">
|
|
|
+ <div class="card-box" v-for="(item, index) in cardList" :key="index">
|
|
|
+ <div
|
|
|
+ :class="[
|
|
|
+ 'card-item',
|
|
|
+ {
|
|
|
+ selected: selectedIndex === index,
|
|
|
+ 'card-itemN': item.isNewAccess,
|
|
|
+ 'card-itemL': !item.isNewAccess && item.linkstatus,
|
|
|
+ 'card-itemD': !item.isNewAccess && !item.linkstatus,
|
|
|
+ },
|
|
|
+ ]"
|
|
|
+ @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" />
|
|
|
+ <a-popconfirm
|
|
|
+ title="删除内容无法恢复，是否删除"
|
|
|
+ ok-text="确定"
|
|
|
+ cancel-text="取消"
|
|
|
+ @confirm="handleDelStation"
|
|
|
+ @cancel="handleCancelDelStation"
|
|
|
+ >
|
|
|
+ <a-button type="primary" preIcon="ant-design:delete-outlined" size="mini" class="down-btn">删除</a-button>
|
|
|
+ </a-popconfirm>
|
|
|
+ </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-popconfirm
|
|
|
+ title="删除内容无法恢复，是否删除"
|
|
|
+ ok-text="确定"
|
|
|
+ cancel-text="取消"
|
|
|
+ @confirm="handlerunDeviceMonitor(record, '删除')"
|
|
|
+ @cancel="handleCancelDelStation"
|
|
|
+ >
|
|
|
+ <a-button v-if="!record.devInfoList" type="success" size="small" style="margin-right: 10px">删除</a-button>
|
|
|
+ </a-popconfirm>
|
|
|
+ <a-button type="primary" v-if="!record.devInfoList" 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: 42%; 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: 52%; 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 class="history-content" v-if="activeKey == 'history'">
|
|
|
+ <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>
|
|
|
+ <div class="left-content">
|
|
|
+ <div class="card-box" v-for="(item, index) in cardList" :key="index">
|
|
|
+ <div
|
|
|
+ :class="[
|
|
|
+ 'card-item',
|
|
|
+ {
|
|
|
+ selected: selectedIndex === index,
|
|
|
+ 'card-itemN': item.isNewAccess,
|
|
|
+ 'card-itemL': !item.isNewAccess && item.linkstatus,
|
|
|
+ 'card-itemD': !item.isNewAccess && !item.linkstatus,
|
|
|
+ },
|
|
|
+ ]"
|
|
|
+ @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" />
|
|
|
+ <a-popconfirm
|
|
|
+ title="删除内容无法恢复，是否删除"
|
|
|
+ ok-text="确定"
|
|
|
+ cancel-text="取消"
|
|
|
+ @confirm="handleDelStation"
|
|
|
+ @cancel="handleCancelDelStation"
|
|
|
+ >
|
|
|
+ <a-button type="primary" preIcon="ant-design:delete-outlined" size="mini" class="down-btn">删除</a-button>
|
|
|
+ </a-popconfirm>
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+ <div class="right-box">
|
|
|
+ <HistoryTable class="historytable" :scroll="scroll" :historyColumns="historyColumns" :stationId="stationId" />
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+ <!-- 监测详情 -->
|
|
|
+ <div class="detail-content" v-if="activeKey == 'manageAuto'">
|
|
|
+ <!-- <a-button preIcon="ant-design:sync-outlined" @click="visibleModalEdit1 = true">重置</a-button> -->
|
|
|
+ <a-table
|
|
|
+ size="small"
|
|
|
+ :scroll="{ y: 710 }"
|
|
|
+ :row-key="(record) => record.stationId"
|
|
|
+ :expandedRowKeys="expandedRowKeys"
|
|
|
+ :columns="columnsDetail"
|
|
|
+ :data-source="tableData1"
|
|
|
+ @expand="tableExpand"
|
|
|
+ >
|
|
|
+ <template #action="{ record }">
|
|
|
+ <a-button v-if="hasPermission('operateRecord:return') && record.deviceList" type="primary" size="small" @click="handleEdit(record)"
|
|
|
+ >编辑</a-button
|
|
|
+ >
|
|
|
+ </template>
|
|
|
+ <template #expandedRowRender>
|
|
|
+ <a-table :columns="deviceColumns" :data-source="tableData2" :pagination="false" />
|
|
|
+ </template>
|
|
|
+ </a-table>
|
|
|
+ <!-- 编辑弹窗 -->
|
|
|
+ <a-modal
|
|
|
+ v-model:visible="visibleModalEdit1"
|
|
|
+ :width="1100"
|
|
|
+ @cancel="cancenModal"
|
|
|
+ :bodyStyle="{ display: 'flex', height: '680px', 'overflow-y': 'auto', 'margin-bottom': '15px' }"
|
|
|
+ title="编辑信息"
|
|
|
+ :footer="null"
|
|
|
+ >
|
|
|
+ <a-form :model="formView" labelAlign="right" :label-col="{ span: 8 }" :wrapper-col="{ span: 16 }">
|
|
|
+ <a-form-item label="第一路风速风向：">
|
|
|
+ <a-input v-model:value="formView.dylfsfx" placeholder="请输入" disabled style="width: 260px; margin-right: 10px" />
|
|
|
+ </a-form-item>
|
|
|
+ <a-form-item label="第一路报警状态：">
|
|
|
+ <a-input v-model:value="formView.dylbjzt" placeholder="请输入" disabled style="width: 260px; margin-right: 10px" />
|
|
|
+ </a-form-item>
|
|
|
+ <a-form-item label="第一路1发2收AD值：">
|
|
|
+ <a-input v-model:value="formView.dyl1f2sADz" placeholder="请输入" disabled style="width: 260px; margin-right: 10px" />
|
|
|
+ </a-form-item>
|
|
|
+ <a-form-item label="第一路2发1收AD值：">
|
|
|
+ <a-input v-model:value="formView.dyl2f1sADz" placeholder="请输入" disabled style="width: 260px; margin-right: 10px" />
|
|
|
+ </a-form-item>
|
|
|
+ <a-form-item label="通风量：">
|
|
|
+ <a-input v-model:value="formView.tfl" placeholder="请输入" disabled style="width: 260px; margin-right: 10px" />
|
|
|
+ </a-form-item>
|
|
|
+ <a-form-item label="硬件版本：">
|
|
|
+ <a-input v-model:value="formView.yjbb" placeholder="请输入" disabled style="width: 260px; margin-right: 10px" />
|
|
|
+ </a-form-item>
|
|
|
+ <a-form-item label="软件版本：">
|
|
|
+ <a-input v-model:value="formView.rjbb" placeholder="请输入" disabled style="width: 260px; margin-right: 10px" />
|
|
|
+ </a-form-item>
|
|
|
+ <a-form-item label="在线离线标志：">
|
|
|
+ <a-input v-model:value="formView.zxlxbz" placeholder="请输入" disabled style="width: 260px; margin-right: 10px" />
|
|
|
+ </a-form-item>
|
|
|
+ <a-form-item label="日期和时间：">
|
|
|
+ <a-input v-model:value="formView.rqsj" placeholder="请输入" disabled style="width: 260px; margin-right: 10px" />
|
|
|
+ </a-form-item>
|
|
|
+ </a-form>
|
|
|
+
|
|
|
+ <a-form :model="formEdit" labelAlign="right" :label-col="{ span: 7 }" :wrapper-col="{ span: 17 }">
|
|
|
+ <a-form-item label="传感器设备：">
|
|
|
+ <a-select v-model:value="formEdit.cgq" @change="changeCgq" style="width: 260px; margin-right: 10px">
|
|
|
+ <a-select-option v-for="(file, index) in cgqList" :key="index" :value="file.value">{{ file.label }}</a-select-option>
|
|
|
+ </a-select>
|
|
|
+ <a-button type="success" @click="getDeviceList">读取</a-button>
|
|
|
+ </a-form-item>
|
|
|
+ <a-form-item label="RS485_MODBUS地址：">
|
|
|
+ <a-input v-model:value="formEdit.rs485modbusdz" placeholder="请输入" style="width: 260px; margin-right: 10px" />
|
|
|
+ <a-button class="down-btn" type="primary" @click="handleClick('RS485_MODBUS地址')">下发</a-button>
|
|
|
+ </a-form-item>
|
|
|
+ <a-form-item label="探头安装距离：">
|
|
|
+ <a-input v-model:value="formEdit.ttazjl" placeholder="请输入" style="width: 260px; margin-right: 10px" />
|
|
|
+ <a-button class="down-btn" type="primary" @click="handleClick('探头安装距离')">下发</a-button>
|
|
|
+ </a-form-item>
|
|
|
+ <a-form-item label="基线距离：">
|
|
|
+ <a-input v-model:value="formEdit.jxjl" placeholder="请输入" style="width: 260px; margin-right: 10px" />
|
|
|
+ <a-button class="down-btn" type="primary" @click="handleClick('基线距离')">下发</a-button>
|
|
|
+ </a-form-item>
|
|
|
+ <a-form-item label="安装角度：">
|
|
|
+ <a-input v-model:value="formEdit.azjd" placeholder="请输入" style="width: 260px; margin-right: 10px" />
|
|
|
+ <a-button class="down-btn" type="primary" @click="handleClick('安装角度')">下发</a-button>
|
|
|
+ </a-form-item>
|
|
|
+ <a-form-item label="设置时长：">
|
|
|
+ <a-input v-model:value="formEdit.szsz" placeholder="请输入" style="width: 260px; margin-right: 10px" />
|
|
|
+ <a-button class="down-btn" type="primary" @click="handleClick('设置时长')">下发</a-button>
|
|
|
+ </a-form-item>
|
|
|
+ <a-form-item label="数据平均周期：">
|
|
|
+ <a-input v-model:value="formEdit.sjpjzq" placeholder="请输入" style="width: 260px; margin-right: 10px" />
|
|
|
+ <a-button class="down-btn" type="primary" @click="handleClick('数据平均周期')">下发</a-button>
|
|
|
+ </a-form-item>
|
|
|
+ <a-form-item label="第一路一发二收PG值：">
|
|
|
+ <a-input v-model:value="formEdit.dylyfesPGz" placeholder="请输入" style="width: 260px; margin-right: 10px" />
|
|
|
+ <a-button class="down-btn" type="primary" @click="handleClick('第一路一发二收PG值')">下发</a-button>
|
|
|
+ </a-form-item>
|
|
|
+ <a-form-item label="第一路二发一收PG值：">
|
|
|
+ <a-input v-model:value="formEdit.dylefysPGz" placeholder="请输入" style="width: 260px; margin-right: 10px" />
|
|
|
+ <a-button class="down-btn" type="primary" @click="handleClick('第一路二发一收PG值')">下发</a-button>
|
|
|
+ </a-form-item>
|
|
|
+ <a-form-item label="风道截面积：">
|
|
|
+ <a-input v-model:value="formEdit.fdjmj" placeholder="请输入" style="width: 260px; margin-right: 10px" />
|
|
|
+ <a-button class="down-btn" type="primary" @click="handleClick('风道截面积')">下发</a-button>
|
|
|
+ </a-form-item>
|
|
|
+ <a-form-item label="第一路整体系数k：">
|
|
|
+ <a-input v-model:value="formEdit.dylztxsk" placeholder="请输入" style="width: 260px; margin-right: 10px" />
|
|
|
+ <a-button class="down-btn" type="primary" @click="handleClick('第一路整体系数k')">下发</a-button>
|
|
|
+ </a-form-item>
|
|
|
+ <a-form-item label="第一路第一段系数：">
|
|
|
+ <a-input v-model:value="formEdit.dyldydxs1" placeholder="请输入" style="width: 260px; margin-right: 10px" />
|
|
|
+ <a-button class="down-btn" type="primary" @click="handleClick('第一路第一段系数')">下发</a-button>
|
|
|
+ </a-form-item>
|
|
|
+ <a-form-item label="第一路第二段系数：">
|
|
|
+ <a-input v-model:value="formEdit.dyldedxs2" placeholder="请输入" style="width: 260px; margin-right: 10px" />
|
|
|
+ <a-button class="down-btn" type="primary" @click="handleClick('第一路第二段系数')">下发</a-button>
|
|
|
+ </a-form-item>
|
|
|
+ <a-form-item label="第一路第三段系数：">
|
|
|
+ <a-input v-model:value="formEdit.dyldsdxs3" placeholder="请输入" style="width: 260px; margin-right: 10px" />
|
|
|
+ <a-button class="down-btn" type="primary" @click="handleClick('第一路第三段系数')">下发</a-button>
|
|
|
+ </a-form-item>
|
|
|
+ <a-form-item label="第一路第四段系数：">
|
|
|
+ <a-input v-model:value="formEdit.dyldsdxs4" placeholder="请输入" style="width: 260px; margin-right: 10px" />
|
|
|
+ <a-button class="down-btn" type="primary" @click="handleClick('第一路第四段系数')">下发</a-button>
|
|
|
+ </a-form-item>
|
|
|
+ <a-form-item label="第一路第五段系数：">
|
|
|
+ <a-input v-model:value="formEdit.dyldwdxs5" placeholder="请输入" style="width: 260px; margin-right: 10px" />
|
|
|
+ <a-button class="down-btn" type="primary" @click="handleClick('第一路第五段系数')">下发</a-button>
|
|
|
+ </a-form-item>
|
|
|
+ <a-form-item label="第一路第六段系数：">
|
|
|
+ <a-input v-model:value="formEdit.dyldldxs6" placeholder="请输入" style="width: 260px; margin-right: 10px" />
|
|
|
+ <a-button class="down-btn" type="primary" @click="handleClick('第一路第六段系数')">下发</a-button>
|
|
|
+ </a-form-item>
|
|
|
+ <a-form-item label="系数KB：">
|
|
|
+ <a-input v-model:value="formEdit.xsKB" placeholder="请输入" style="width: 260px; margin-right: 10px" />
|
|
|
+ <a-button class="down-btn" type="primary" @click="handleClick('系数KB')">下发</a-button>
|
|
|
+ </a-form-item>
|
|
|
+ <a-form-item label="系数KB符号：">
|
|
|
+ <a-input v-model:value="formEdit.xsKBfh" placeholder="请输入" style="width: 260px; margin-right: 10px" />
|
|
|
+ <a-button class="down-btn" type="primary" @click="handleClick('系数KB符号')">下发</a-button>
|
|
|
+ </a-form-item>
|
|
|
+ <a-form-item label="高报警阈值：">
|
|
|
+ <a-input v-model:value="formEdit.gbjyz" placeholder="请输入" style="width: 260px; margin-right: 10px" />
|
|
|
+ <a-button class="down-btn" type="primary" @click="handleClick('高报警阈值')">下发</a-button>
|
|
|
+ </a-form-item>
|
|
|
+ <a-form-item label="低报警阈值：">
|
|
|
+ <a-input v-model:value="formEdit.dbjyz" placeholder="请输入" style="width: 260px; margin-right: 10px" />
|
|
|
+ <a-button class="down-btn" type="primary" @click="handleClick('低报警阈值')">下发</a-button>
|
|
|
+ </a-form-item>
|
|
|
+ <a-form-item label="报警使能：">
|
|
|
+ <a-input v-model:value="formEdit.bjsn" placeholder="请输入" style="width: 260px; margin-right: 10px" />
|
|
|
+ <a-button class="down-btn" type="primary" @click="handleClick('报警使能')">下发</a-button>
|
|
|
+ </a-form-item>
|
|
|
+ <a-form-item label="第一路485波特率：">
|
|
|
+ <a-input v-model:value="formEdit.dyl485btl" placeholder="请输入" style="width: 260px; margin-right: 10px" />
|
|
|
+ <a-button class="down-btn" type="primary" @click="handleClick('第一路485波特率')">下发</a-button>
|
|
|
+ </a-form-item>
|
|
|
+ <a-form-item label="四个字节保存密码：">
|
|
|
+ <a-input v-model:value="formEdit.sgzjbcmm" placeholder="请输入" style="width: 260px; margin-right: 10px" />
|
|
|
+ <a-button class="down-btn" type="primary" @click="handleClick('四个字节保存密码')">下发</a-button>
|
|
|
+ </a-form-item>
|
|
|
+ </a-form>
|
|
|
+ </a-modal>
|
|
|
+ </div>
|
|
|
+ <!-- 操作记录 -->
|
|
|
+ <div class="detail-content" v-if="activeKey == 'operationRecord'">
|
|
|
+ <operateRecord :operationData="operationData" @get-search-record="getSearchRecord" />
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+</template>
|
|
|
+
|
|
|
+<script setup lang="ts">
|
|
|
+ import { ref, reactive, onMounted, onUnmounted } from 'vue';
|
|
|
+ import { usePermission } from '/@/hooks/web/usePermission';
|
|
|
+ import {
|
|
|
+ subStationList,
|
|
|
+ getList,
|
|
|
+ getListAll,
|
|
|
+ getEdit,
|
|
|
+ runDeviceMonitor,
|
|
|
+ update130DevName,
|
|
|
+ updateDebugStatus,
|
|
|
+ get130StationData,
|
|
|
+ set130StationDevicesRead,
|
|
|
+ set130StationData,
|
|
|
+ get130StationDevices,
|
|
|
+ set130StationRead,
|
|
|
+ remove130Substation,
|
|
|
+ get130SetLog,
|
|
|
+ remove130Device,
|
|
|
+ } from '../safetyList.api';
|
|
|
+ import { historyColumns } from '../historyLsit.data';
|
|
|
+ import { columnsDetail, columns, deviceColumns } from '../safetyList.data';
|
|
|
+ import HistoryTable from './HistoryTable.vue';
|
|
|
+ import customHeader from '/@/components/vent/customHeader.vue';
|
|
|
+ import operateRecord from './operateRecord.vue';
|
|
|
+
|
|
|
+ const expandedRowKeys = reactive<any[]>([]);
|
|
|
+ const { hasPermission } = usePermission();
|
|
|
+ const activeKey = ref('device');
|
|
|
+ const cardList = ref<any[]>([]);
|
|
|
+ const activeIndex = ref(null);
|
|
|
+ const isShow = ref(false);
|
|
|
+ const stationName = ref('');
|
|
|
+ const stationStatus = ref(null);
|
|
|
+ const ljList = reactive<any[]>([
|
|
|
+ { value: 0, label: '断开' },
|
|
|
+ { value: 1, label: '连接' },
|
|
|
+ ]);
|
|
|
+ const selectedIndex = ref(0);
|
|
|
+ const openNum = ref(0);
|
|
|
+ const clsoeNum = ref(0);
|
|
|
+ const tableData = ref<any[]>([]);
|
|
|
+ const tableData1 = ref<any[]>([]);
|
|
|
+ const tableData2 = ref<any[]>([]);
|
|
|
+ //分页参数配置
|
|
|
+ const 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'], // 可选的每页显示条数
|
|
|
+ });
|
|
|
+ const visibleModalEdit = ref(false);
|
|
|
+ const visibleModalEdit1 = ref(false);
|
|
|
+ const formEdit = reactive({
|
|
|
+ id: '',
|
|
|
+ cgq: '',
|
|
|
+ rs485modbusdz: '',
|
|
|
+ ttazjl: '',
|
|
|
+ jxjl: '',
|
|
|
+ azjd: '',
|
|
|
+ szsz: '',
|
|
|
+ sjpjzq: '',
|
|
|
+ dylyfesPGz: '',
|
|
|
+ dylefysPGz: '',
|
|
|
+ fdjmj: '',
|
|
|
+ dylztxsk: '',
|
|
|
+ dyldydxs1: '',
|
|
|
+ dyldedxs2: '',
|
|
|
+ dyldsdxs3: '',
|
|
|
+ dyldsdxs4: '',
|
|
|
+ dyldwdxs5: '',
|
|
|
+ dyldldxs6: '',
|
|
|
+ xsKB: '',
|
|
|
+ xsKBfh: '',
|
|
|
+ gbjyz: '',
|
|
|
+ dbjyz: '',
|
|
|
+ bjsn: '',
|
|
|
+ dyl485btl: '',
|
|
|
+ sgzjbcmm: '',
|
|
|
+ });
|
|
|
+ const formView = reactive({
|
|
|
+ dylfsfx: '',
|
|
|
+ dylbjzt: '',
|
|
|
+ dyl1f2sADz: '',
|
|
|
+ dyl2f1sADz: '',
|
|
|
+ tfl: '',
|
|
|
+ yjbb: '',
|
|
|
+ rjbb: '',
|
|
|
+ zxlxbz: '',
|
|
|
+ rqsj: '',
|
|
|
+ });
|
|
|
+
|
|
|
+ const cgqList = reactive<any[]>([]);
|
|
|
+ const devId = ref('');
|
|
|
+ const startupDataEdit = reactive({
|
|
|
+ address: '',
|
|
|
+ });
|
|
|
+ //一键启动弹窗
|
|
|
+ const visibleModal = ref(false);
|
|
|
+ const startupData = reactive({
|
|
|
+ address: '',
|
|
|
+ });
|
|
|
+ const paramId = ref('');
|
|
|
+ const startupDataDebug = reactive({
|
|
|
+ speed: '',
|
|
|
+ direction: '',
|
|
|
+ });
|
|
|
+ const visibleModalDebug = ref(false);
|
|
|
+ const debugFlag = ref('');
|
|
|
+ const debugStationId = ref('');
|
|
|
+ const debugDeviceId = ref('');
|
|
|
+ const derictList = reactive<any[]>([
|
|
|
+ { label: '正向', value: '0' },
|
|
|
+ { label: '反向', value: '1' },
|
|
|
+ ]);
|
|
|
+ const devStationId = ref('');
|
|
|
+ const stationId = ref('');
|
|
|
+ const scroll = reactive({
|
|
|
+ y: 680,
|
|
|
+ });
|
|
|
+ const operationData = ref<any[]>([]); //操作记录列表
|
|
|
+ //定时刷新左侧分站数据
|
|
|
+ let timer: any = null;
|
|
|
+ function getMonitor(flag = false) {
|
|
|
+ timer = setTimeout(
|
|
|
+ async () => {
|
|
|
+ await getSubStationList();
|
|
|
+ if (timer) {
|
|
|
+ timer = null;
|
|
|
+ }
|
|
|
+ getMonitor();
|
|
|
+ },
|
|
|
+ flag ? 0 : 3000
|
|
|
+ );
|
|
|
+ }
|
|
|
+ let timer1: any = null;
|
|
|
+ function getMonitor1(flag = false) {
|
|
|
+ timer1 = setTimeout(
|
|
|
+ async () => {
|
|
|
+ await getStationList();
|
|
|
+ if (timer1) {
|
|
|
+ timer1 = null;
|
|
|
+ }
|
|
|
+ getMonitor1();
|
|
|
+ },
|
|
|
+ flag ? 0 : 5000
|
|
|
+ );
|
|
|
+ }
|
|
|
+ let timer2: any = null;
|
|
|
+ function getMonitor2(flag = false) {
|
|
|
+ timer2 = setTimeout(
|
|
|
+ async () => {
|
|
|
+ await getShowReadList();
|
|
|
+ if (timer2) {
|
|
|
+ timer2 = null;
|
|
|
+ }
|
|
|
+ getMonitor2();
|
|
|
+ },
|
|
|
+ flag ? 0 : 3000
|
|
|
+ );
|
|
|
+ }
|
|
|
+ async function getDeviceList() {
|
|
|
+ const res = await set130StationRead({ stationId: devStationId.value, deviceId: formEdit.cgq });
|
|
|
+ if (res) {
|
|
|
+ getMonitor2(true);
|
|
|
+ }
|
|
|
+ }
|
|
|
+ async function getShowReadList() {
|
|
|
+ const data = await get130StationData();
|
|
|
+ if (data && data.length != 0) {
|
|
|
+ const list = data.filter((v) => v.stationId == devStationId.value)[0];
|
|
|
+ formView.dylfsfx = list.dylfsfx;
|
|
|
+ formView.dyl1f2sADz = list.dyl1f2sADz;
|
|
|
+ formView.dyl2f1sADz = list.dyl2f1sADz;
|
|
|
+ formView.tfl = list.tfl;
|
|
|
+ formView.yjbb = list.yjbb;
|
|
|
+ formView.rjbb = list.rjbb;
|
|
|
+ formView.zxlxbz = list.zxlxbz;
|
|
|
+ formView.rqsj = list.rqsj;
|
|
|
+ }
|
|
|
+ }
|
|
|
+ async function tableExpand(expaned, record) {
|
|
|
+ const res = await set130StationDevicesRead({ stationId: record.stationId });
|
|
|
+ if (res && expaned) {
|
|
|
+ expandedRowKeys.length = 0;
|
|
|
+ const data = await get130StationData();
|
|
|
+ tableData2.value = data.filter((v) => v.stationId == record.stationId)[0].deviceList || [];
|
|
|
+ expandedRowKeys.push(record.stationId);
|
|
|
+ } else {
|
|
|
+ expandedRowKeys.length = 0;
|
|
|
+ }
|
|
|
+ }
|
|
|
+
|
|
|
+ //tab选项切换
|
|
|
+ async function onChangeTab(tab) {
|
|
|
+ activeKey.value = tab;
|
|
|
+ stationId.value = '';
|
|
|
+ clearTimeout(timer1);
|
|
|
+ clearTimeout(timer);
|
|
|
+ if (activeKey.value == 'device') {
|
|
|
+ await getSubStationList();
|
|
|
+ await getStationList1();
|
|
|
+ getMonitor();
|
|
|
+ } else if (activeKey.value == 'history') {
|
|
|
+ await getSubStationList();
|
|
|
+ await getStationList();
|
|
|
+ getMonitor();
|
|
|
+ } else if (activeKey.value == 'manageAuto') {
|
|
|
+ await getStationList();
|
|
|
+ getMonitor1(true);
|
|
|
+ } else if (activeKey.value == 'operationRecord') {
|
|
|
+ await getSearchRecord({ stationId: '', deviceId: '' });
|
|
|
+ }
|
|
|
+ }
|
|
|
+
|
|
|
+ //弹窗关闭
|
|
|
+ function cancenModal() {
|
|
|
+ clearTimeout(timer2);
|
|
|
+ formEdit.id = '';
|
|
|
+ formEdit.cgq = '';
|
|
|
+ formEdit.rs485modbusdz = '';
|
|
|
+ formEdit.ttazjl = '';
|
|
|
+ formEdit.jxjl = '';
|
|
|
+ formEdit.azjd = '';
|
|
|
+ formEdit.szsz = '';
|
|
|
+ formEdit.sjpjzq = '';
|
|
|
+ formEdit.dylyfesPGz = '';
|
|
|
+ formEdit.dylefysPGz = '';
|
|
|
+ formEdit.fdjmj = '';
|
|
|
+ formEdit.dylztxsk = '';
|
|
|
+ formEdit.dyldydxs1 = '';
|
|
|
+ formEdit.dyldedxs2 = '';
|
|
|
+ formEdit.dyldsdxs3 = '';
|
|
|
+ formEdit.dyldsdxs4 = '';
|
|
|
+ formEdit.dyldwdxs5 = '';
|
|
|
+ formEdit.dyldldxs6 = '';
|
|
|
+ formEdit.xsKB = '';
|
|
|
+ formEdit.xsKBfh = '';
|
|
|
+ formEdit.gbjyz = '';
|
|
|
+ formEdit.dbjyz = '';
|
|
|
+ formEdit.bjsn = '';
|
|
|
+ formEdit.dyl485btl = '';
|
|
|
+ formEdit.sgzjbcmm = '';
|
|
|
+
|
|
|
+ formView.dylfsfx = '';
|
|
|
+ formView.dylbjzt = '';
|
|
|
+ formView.dyl1f2sADz = '';
|
|
|
+ formView.dyl2f1sADz = '';
|
|
|
+ formView.tfl = '';
|
|
|
+ formView.yjbb = '';
|
|
|
+ formView.rjbb = '';
|
|
|
+ formView.zxlxbz = '';
|
|
|
+ formView.rqsj = '';
|
|
|
+ }
|
|
|
+ //获取详细信息列表
|
|
|
+ async function getStationList() {
|
|
|
+ const res = await get130StationData();
|
|
|
+ res.forEach((el) => {
|
|
|
+ el.linkstatusC = el.linkstatus ? '连接' : '断开';
|
|
|
+ el.key = el.stationId;
|
|
|
+ });
|
|
|
+ tableData1.value = res;
|
|
|
+ }
|
|
|
+ //传感器选项切换
|
|
|
+ function changeCgq(val) {
|
|
|
+ formEdit.cgq = val;
|
|
|
+ }
|
|
|
+ //编辑
|
|
|
+ async function handleEdit(record) {
|
|
|
+ cgqList.length = 0;
|
|
|
+ visibleModalEdit1.value = true;
|
|
|
+ devStationId.value = record.stationId;
|
|
|
+ const res = await get130StationDevices({ stationId: devStationId.value });
|
|
|
+ console.log(res, '分站下设备下拉选项-------------');
|
|
|
+ if (res.length != 0) {
|
|
|
+ res.forEach((el) => {
|
|
|
+ cgqList.push({ label: el.strinstallpos, value: el.id });
|
|
|
+ });
|
|
|
+ }
|
|
|
+ }
|
|
|
+
|
|
|
+ //下发
|
|
|
+ async function handleClick(data) {
|
|
|
+ switch (data) {
|
|
|
+ case 'RS485_MODBUS地址':
|
|
|
+ await set130StationData({ stationId: devStationId.value, deviceId: formEdit.cgq, plcCode: 'rs485modbusdz', value: formEdit.rs485modbusdz });
|
|
|
+ visibleModalEdit1.value = false;
|
|
|
+ getStationList();
|
|
|
+ break;
|
|
|
+ case '探头安装距离':
|
|
|
+ await set130StationData({ stationId: devStationId.value, deviceId: formEdit.cgq, plcCode: 'ttazjl', value: formEdit.ttazjl });
|
|
|
+ visibleModalEdit1.value = false;
|
|
|
+ getStationList();
|
|
|
+ break;
|
|
|
+ case '基线距离':
|
|
|
+ await set130StationData({ stationId: devStationId.value, deviceId: formEdit.cgq, plcCode: 'jxjl', value: formEdit.jxjl });
|
|
|
+ visibleModalEdit1.value = false;
|
|
|
+ getStationList();
|
|
|
+ break;
|
|
|
+ case '安装角度':
|
|
|
+ await set130StationData({ stationId: devStationId.value, deviceId: formEdit.cgq, plcCode: 'azjd', value: formEdit.azjd });
|
|
|
+ visibleModalEdit1.value = false;
|
|
|
+ getStationList();
|
|
|
+ break;
|
|
|
+ case '设置时长':
|
|
|
+ await set130StationData({ stationId: devStationId.value, deviceId: formEdit.cgq, plcCode: 'szsz', value: formEdit.szsz });
|
|
|
+ visibleModalEdit1.value = false;
|
|
|
+ getStationList();
|
|
|
+ break;
|
|
|
+ case '数据平均周期':
|
|
|
+ await set130StationData({ stationId: devStationId.value, deviceId: formEdit.cgq, plcCode: 'sjpjzq', value: formEdit.sjpjzq });
|
|
|
+ visibleModalEdit1.value = false;
|
|
|
+ getStationList();
|
|
|
+ break;
|
|
|
+ case '第一路一发二收PG值':
|
|
|
+ await set130StationData({ stationId: devStationId.value, deviceId: formEdit.cgq, plcCode: 'dylyfesPGz', value: formEdit.dylyfesPGz });
|
|
|
+ visibleModalEdit1.value = false;
|
|
|
+ getStationList();
|
|
|
+ break;
|
|
|
+ case '第一路二发一收PG值':
|
|
|
+ await set130StationData({ stationId: devStationId.value, deviceId: formEdit.cgq, plcCode: 'dylefysPGz', value: formEdit.dylefysPGz });
|
|
|
+ visibleModalEdit1.value = false;
|
|
|
+ getStationList();
|
|
|
+ break;
|
|
|
+ case '风道截面积':
|
|
|
+ await set130StationData({ stationId: devStationId.value, deviceId: formEdit.cgq, plcCode: 'fdjmj', value: formEdit.fdjmj });
|
|
|
+ visibleModalEdit1.value = false;
|
|
|
+ getStationList();
|
|
|
+ break;
|
|
|
+ case '第一路整体系数k':
|
|
|
+ await set130StationData({ stationId: devStationId.value, deviceId: formEdit.cgq, plcCode: 'dylztxsk', value: formEdit.dylztxsk });
|
|
|
+ visibleModalEdit1.value = false;
|
|
|
+ getStationList();
|
|
|
+ break;
|
|
|
+ case '第一路第一段系数':
|
|
|
+ await set130StationData({ stationId: devStationId.value, deviceId: formEdit.cgq, plcCode: 'dyldydxs1', value: formEdit.dyldydxs1 });
|
|
|
+ visibleModalEdit1.value = false;
|
|
|
+ getStationList();
|
|
|
+ break;
|
|
|
+ case '第一路第二段系数':
|
|
|
+ await set130StationData({ stationId: devStationId.value, deviceId: formEdit.cgq, plcCode: 'dyldedxs2', value: formEdit.dyldedxs2 });
|
|
|
+ visibleModalEdit1.value = false;
|
|
|
+ getStationList();
|
|
|
+ break;
|
|
|
+ case '第一路第三段系数':
|
|
|
+ await set130StationData({ stationId: devStationId.value, deviceId: formEdit.cgq, plcCode: 'dyldsdxs3', value: formEdit.dyldsdxs3 });
|
|
|
+ visibleModalEdit1.value = false;
|
|
|
+ getStationList();
|
|
|
+ break;
|
|
|
+ case '第一路第四段系数':
|
|
|
+ await set130StationData({ stationId: devStationId.value, deviceId: formEdit.cgq, plcCode: 'dyldsdxs4', value: formEdit.dyldsdxs4 });
|
|
|
+ visibleModalEdit1.value = false;
|
|
|
+ getStationList();
|
|
|
+ break;
|
|
|
+ case '第一路第五段系数':
|
|
|
+ await set130StationData({ stationId: devStationId.value, deviceId: formEdit.cgq, plcCode: 'dyldwdxs5', value: formEdit.dyldwdxs5 });
|
|
|
+ visibleModalEdit1.value = false;
|
|
|
+ getStationList();
|
|
|
+ break;
|
|
|
+ case '第一路第六段系数':
|
|
|
+ await set130StationData({ stationId: devStationId.value, deviceId: formEdit.cgq, plcCode: 'dyldldxs6', value: formEdit.dyldldxs6 });
|
|
|
+ visibleModalEdit1.value = false;
|
|
|
+ getStationList();
|
|
|
+ break;
|
|
|
+ case '系数KB':
|
|
|
+ await set130StationData({ stationId: devStationId.value, deviceId: formEdit.cgq, plcCode: 'xsKB', value: formEdit.xsKB });
|
|
|
+ visibleModalEdit1.value = false;
|
|
|
+ getStationList();
|
|
|
+ break;
|
|
|
+ case '系数KB符号':
|
|
|
+ await set130StationData({ stationId: devStationId.value, deviceId: formEdit.cgq, plcCode: 'xsKBfh', value: formEdit.xsKBfh });
|
|
|
+ visibleModalEdit1.value = false;
|
|
|
+ getStationList();
|
|
|
+ break;
|
|
|
+ case '高报警阈值':
|
|
|
+ await set130StationData({ stationId: devStationId.value, deviceId: formEdit.cgq, plcCode: 'gbjyz', value: formEdit.gbjyz });
|
|
|
+ visibleModalEdit1.value = false;
|
|
|
+ getStationList();
|
|
|
+ break;
|
|
|
+ case '低报警阈值':
|
|
|
+ await set130StationData({ stationId: devStationId.value, deviceId: formEdit.cgq, plcCode: 'dbjyz', value: formEdit.dbjyz });
|
|
|
+ visibleModalEdit1.value = false;
|
|
|
+ getStationList();
|
|
|
+ break;
|
|
|
+ case '报警使能':
|
|
|
+ await set130StationData({ stationId: devStationId.value, deviceId: formEdit.cgq, plcCode: 'bjsn', value: formEdit.bjsn });
|
|
|
+ visibleModalEdit1.value = false;
|
|
|
+ getStationList();
|
|
|
+ break;
|
|
|
+ case '第一路485波特率':
|
|
|
+ await set130StationData({ stationId: devStationId.value, deviceId: formEdit.cgq, plcCode: 'dyl485btl', value: formEdit.dyl485btl });
|
|
|
+ visibleModalEdit1.value = false;
|
|
|
+ getStationList();
|
|
|
+ break;
|
|
|
+ case '四个字节保存密码':
|
|
|
+ await set130StationData({ stationId: devStationId.value, deviceId: formEdit.cgq, plcCode: 'sgzjbcmm', value: formEdit.sgzjbcmm });
|
|
|
+ visibleModalEdit1.value = false;
|
|
|
+ getStationList();
|
|
|
+ break;
|
|
|
+ }
|
|
|
+ }
|
|
|
+
|
|
|
+ //获取分站实时监测信息
|
|
|
+ async function getSubStationList() {
|
|
|
+ const res = await subStationList({ strtype: 'modbus', reqparam: 130 });
|
|
|
+ if (res.length != 0) {
|
|
|
+ cardList.value = res;
|
|
|
+ stationId.value = stationId.value ? stationId.value : cardList.value[0].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) {
|
|
|
+ console.log('debug', item, index);
|
|
|
+ selectedIndex.value = index; // 更新选中索引
|
|
|
+ activeIndex.value = item.isNewAccess || !item.linkstatus ? index : null;
|
|
|
+ stationName.value = item.strname;
|
|
|
+ stationStatus.value = item.linkstatus;
|
|
|
+ stationId.value = item.id;
|
|
|
+ isShow.value = true;
|
|
|
+ getStationList1();
|
|
|
+ }
|
|
|
+ //分站站点名称编辑
|
|
|
+ function changeName() {
|
|
|
+ getChangeStation();
|
|
|
+ }
|
|
|
+ async function getChangeStation() {
|
|
|
+ await getEdit({ id: stationId.value, strname: stationName.value, linkstatus: stationStatus.value });
|
|
|
+ getSubStationList();
|
|
|
+ isShow.value = false;
|
|
|
+ }
|
|
|
+ //站点连接状态修改
|
|
|
+ function changeStatus() {
|
|
|
+ getChangeStation();
|
|
|
+ }
|
|
|
+ //获取详细信息列表
|
|
|
+ async function getStationList1() {
|
|
|
+ const res = await getList({ subId: stationId.value, pageNo: pagination.current, pageSize: pagination.pageSize });
|
|
|
+ if (res && res.length != 0) {
|
|
|
+ res.forEach((el) => {
|
|
|
+ el.key = el.id;
|
|
|
+ el.linkIdC = el.linkId || '';
|
|
|
+ el.stripC = el.strip || '';
|
|
|
+ el.linkstatusC = el.linkstatus ? '连接' : '断开';
|
|
|
+ el.gdmsC = el.gdms == '1' ? '直流供电' : el.gdms == '0' ? '交流供电' : '';
|
|
|
+ el.children = el.devInfoList;
|
|
|
+ el.children.forEach((v) => {
|
|
|
+ v.key = v.id;
|
|
|
+ v.debugTitle = v.deviceType == 'windrect_ds_25x' || v.deviceType == 'windrect_ds_two' ? '调试' : '';
|
|
|
+ v.stripC = v.strserno || '';
|
|
|
+ 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;
|
|
|
+ }
|
|
|
+ async function getStationListAll() {
|
|
|
+ const res = await getListAll();
|
|
|
+ res.forEach((el) => {
|
|
|
+ el.key = el.id;
|
|
|
+ el.linkIdC = el.linkId || '';
|
|
|
+ el.stripC = el.strip || '';
|
|
|
+ el.linkstatusC = el.linkstatus ? '连接' : '断开';
|
|
|
+ el.gdmsC = el.gdms == '1' ? '直流供电' : el.gdms == '0' ? '交流供电' : '';
|
|
|
+ el.children = el.devInfoList;
|
|
|
+ el.children.forEach((v) => {
|
|
|
+ v.key = v.id;
|
|
|
+ v.debugTitle = v.deviceType == 'windrect_ds_25x' || v.deviceType == 'windrect_ds_two' ? '调试' : '';
|
|
|
+ v.stripC = v.strserno || '';
|
|
|
+ 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 getAllShow() {
|
|
|
+ // pagination.current = 1;
|
|
|
+ // stationId.value = '';
|
|
|
+ getStationListAll();
|
|
|
+ }
|
|
|
+ //启动新设备
|
|
|
+ async 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;
|
|
|
+ case '删除':
|
|
|
+ await remove130Device({ devId: devId.value });
|
|
|
+ getStationList1();
|
|
|
+ break;
|
|
|
+ }
|
|
|
+ }
|
|
|
+ //分站，设备调试
|
|
|
+ function debugClick(record) {
|
|
|
+ if (record.debugTitle == '调试') {
|
|
|
+ //正在调试中
|
|
|
+ startupDataDebug.speed = '';
|
|
|
+ startupDataDebug.direction = '';
|
|
|
+ visibleModalDebug.value = true;
|
|
|
+ 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 = '结束调试';
|
|
|
+ // 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.debugTitle == '结束调试') {
|
|
|
+ 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();
|
|
|
+ // 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() {
|
|
|
+ const res = await updateDebugStatus({ stationId: debugStationId.value, deviceId: debugDeviceId.value, debugFlag: '0' });
|
|
|
+ if (res) {
|
|
|
+ getStationList1();
|
|
|
+ }
|
|
|
+ // if (debugFlag.value == 'station') {
|
|
|
+ // const res = await updateDebugStatus({ stationId: debugStationId.value, debugFlag: '0' })
|
|
|
+ // getStationList1()
|
|
|
+ // } else {
|
|
|
+ // const res = await updateDebugStatus({ stationId: debugStationId.value, deviceId: debugDeviceId.value, debugFlag: '0' })
|
|
|
+ // getStationList1()
|
|
|
+ // }
|
|
|
+ }
|
|
|
+ async function handleOk() {
|
|
|
+ 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') {
|
|
|
+ const res = await update130DevName({ subId: devId.value, devName: startupDataEdit.address });
|
|
|
+ console.log(res, '设备名称编辑---');
|
|
|
+ visibleModalEdit.value = false;
|
|
|
+ getStationList1();
|
|
|
+ } else {
|
|
|
+ const res = await update130DevName({ devId: devId.value, devName: startupDataEdit.address });
|
|
|
+ console.log(res, '设备名称编辑---');
|
|
|
+ visibleModalEdit.value = false;
|
|
|
+ getStationList1();
|
|
|
+ }
|
|
|
+ }
|
|
|
+ //取消编辑
|
|
|
+ function handleCancelEdit() {
|
|
|
+ visibleModalEdit.value = false;
|
|
|
+ startupDataEdit.address = '';
|
|
|
+ }
|
|
|
+ //调试确认
|
|
|
+ async function handleOkDebug() {
|
|
|
+ const res = await updateDebugStatus({
|
|
|
+ stationId: debugStationId.value,
|
|
|
+ deviceId: debugDeviceId.value,
|
|
|
+ speed: startupDataDebug.speed,
|
|
|
+ direction: startupDataDebug.direction,
|
|
|
+ debugFlag: '1',
|
|
|
+ });
|
|
|
+ if (res) {
|
|
|
+ visibleModalDebug.value = false;
|
|
|
+ getStationList1();
|
|
|
+ }
|
|
|
+ // if (debugFlag.value == 'station') {
|
|
|
+ // const res = await updateDebugStatus({ stationId: debugStationId.value, speed: startupDataDebug.speed, direction: startupDataDebug.direction, debugFlag: '1' })
|
|
|
+ // visibleModalDebug.value = false
|
|
|
+ // getStationList1()
|
|
|
+ // } else {
|
|
|
+ // const 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.devInfoList.forEach((v) => {
|
|
|
+ v.debugTitle = v.deviceType == 'windrect_ds_25x' || v.deviceType == 'windrect_ds_two' ? '调试' : '';
|
|
|
+ });
|
|
|
+ });
|
|
|
+ debugFlag.value = '';
|
|
|
+ debugStationId.value = '';
|
|
|
+ debugDeviceId.value = '';
|
|
|
+ }
|
|
|
+ //分页切换
|
|
|
+ function pageChange(val) {
|
|
|
+ pagination.current = val.current;
|
|
|
+ pagination.pageSize = val.pageSize;
|
|
|
+ getStationList1();
|
|
|
+ }
|
|
|
+
|
|
|
+ //删除左侧分站
|
|
|
+ async function handleDelStation() {
|
|
|
+ const res = await remove130Substation({ stationId: stationId.value });
|
|
|
+ console.log(res, '删除左侧分站');
|
|
|
+ if (res) {
|
|
|
+ getSubStationList();
|
|
|
+ getStationList1();
|
|
|
+ }
|
|
|
+ }
|
|
|
+ //取消删除左侧分站
|
|
|
+ function handleCancelDelStation() {}
|
|
|
+
|
|
|
+ //操作记录查询
|
|
|
+ async function getSearchRecord(param) {
|
|
|
+ const res = await get130SetLog({ ...param });
|
|
|
+ if (res && res.length != 0) {
|
|
|
+ operationData.value = res.records;
|
|
|
+ }
|
|
|
+ }
|
|
|
+ onMounted(async () => {
|
|
|
+ await getSubStationList();
|
|
|
+ await getStationList1();
|
|
|
+ getMonitor();
|
|
|
+ });
|
|
|
+ onUnmounted(() => {
|
|
|
+ if (timer) {
|
|
|
+ clearTimeout(timer);
|
|
|
+ timer = undefined;
|
|
|
+ }
|
|
|
+ if (timer1) {
|
|
|
+ clearTimeout(timer1);
|
|
|
+ timer1 = undefined;
|
|
|
+ }
|
|
|
+ });
|
|
|
+</script>
|
|
|
+
|
|
|
+<style lang="less" scoped>
|
|
|
+ .safetyList {
|
|
|
+ width: calc(100% - 20px);
|
|
|
+ height: calc(100% - 80px);
|
|
|
+ position: relative;
|
|
|
+ margin: 70px 10px 10px 10px;
|
|
|
+
|
|
|
+ .content {
|
|
|
+ position: relative;
|
|
|
+ width: 100%;
|
|
|
+ height: 100%;
|
|
|
+
|
|
|
+ .tab-box {
|
|
|
+ display: flex;
|
|
|
+ color: #fff;
|
|
|
+ position: relative;
|
|
|
+ background: linear-gradient(#001325, #012e4f);
|
|
|
+
|
|
|
+ :deep(.zxm-tabs-nav) {
|
|
|
+ margin: 0 !important;
|
|
|
+
|
|
|
+ .zxm-tabs-tab {
|
|
|
+ width: 180px;
|
|
|
+ height: 45px;
|
|
|
+ background: url('/@/assets/images/top-btn.png') center no-repeat;
|
|
|
+ background-size: cover;
|
|
|
+ display: flex;
|
|
|
+ justify-content: center;
|
|
|
+ font-size: 16px;
|
|
|
+ }
|
|
|
+
|
|
|
+ .zxm-tabs-tab-active {
|
|
|
+ width: 180px;
|
|
|
+ position: relative;
|
|
|
+ background: url('/@/assets/images/top-btn-select.png') center no-repeat;
|
|
|
+ background-size: cover;
|
|
|
+
|
|
|
+ .zxm-tabs-tab-btn {
|
|
|
+ color: #fff !important;
|
|
|
+ }
|
|
|
+ }
|
|
|
+
|
|
|
+ .zxm-tabs-ink-bar {
|
|
|
+ width: 0 !important;
|
|
|
+ }
|
|
|
+
|
|
|
+ .zxm-tabs-tab + .zxm-tabs-tab {
|
|
|
+ margin: 0 !important;
|
|
|
+ }
|
|
|
+ }
|
|
|
+ }
|
|
|
+
|
|
|
+ .box-content {
|
|
|
+ height: calc(100% - 50px);
|
|
|
+ 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;
|
|
|
+
|
|
|
+ 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: 120px;
|
|
|
+ margin-bottom: 15px;
|
|
|
+ display: flex;
|
|
|
+ justify-content: center;
|
|
|
+
|
|
|
+ .card-itemN {
|
|
|
+ position: relative;
|
|
|
+ width: 85px;
|
|
|
+ height: 120px;
|
|
|
+ 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: 120px;
|
|
|
+ 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: 120px;
|
|
|
+ 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;
|
|
|
+ }
|
|
|
+ }
|
|
|
+ }
|
|
|
+
|
|
|
+ .detail-content {
|
|
|
+ width: 100%;
|
|
|
+ height: 100%;
|
|
|
+ }
|
|
|
+
|
|
|
+ .history-content {
|
|
|
+ position: relative;
|
|
|
+ width: 100%;
|
|
|
+ height: 100%;
|
|
|
+ display: flex;
|
|
|
+ justify-content: space-between;
|
|
|
+ align-items: center;
|
|
|
+ background: url('/@/assets/images/fire/bj1.png') no-repeat center;
|
|
|
+ background-size: 100% 100%;
|
|
|
+ color: #fff;
|
|
|
+
|
|
|
+ .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: 120px;
|
|
|
+ margin-bottom: 15px;
|
|
|
+ display: flex;
|
|
|
+ justify-content: center;
|
|
|
+
|
|
|
+ .card-itemN {
|
|
|
+ position: relative;
|
|
|
+ width: 85px;
|
|
|
+ height: 120px;
|
|
|
+ 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: 120px;
|
|
|
+ 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: 120px;
|
|
|
+ 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%;
|
|
|
+
|
|
|
+ .historytable {
|
|
|
+ height: 100%;
|
|
|
+ }
|
|
|
+
|
|
|
+ .right-title {
|
|
|
+ display: flex;
|
|
|
+ height: 30px;
|
|
|
+ align-items: center;
|
|
|
+ font-size: 14px;
|
|
|
+ color: #fff;
|
|
|
+ margin-bottom: 10px;
|
|
|
+ }
|
|
|
+ }
|
|
|
+ }
|
|
|
+ }
|
|
|
+ }
|
|
|
+ }
|
|
|
+
|
|
|
+ .down-btn {
|
|
|
+ line-height: 15px;
|
|
|
+ height: 20px;
|
|
|
+ padding: 0px 17px;
|
|
|
+ font-size: 12px;
|
|
|
+ }
|
|
|
+
|
|
|
+ .zxm-form {
|
|
|
+ width: 50%;
|
|
|
+ height: 100%;
|
|
|
+ padding-top: 20px !important;
|
|
|
+ box-sizing: border-box;
|
|
|
+ }
|
|
|
+
|
|
|
+ .zxm-picker,
|
|
|
+ .zxm-input {
|
|
|
+ border: 1px solid #3ad8ff77 !important;
|
|
|
+ background-color: #ffffff !important;
|
|
|
+ color: #fff !important;
|
|
|
+ }
|
|
|
+
|
|
|
+ .card-item.selected {
|
|
|
+ border: 2px solid #3ad8ff77;
|
|
|
+ /* 选中时的边框颜色 */
|
|
|
+ }
|
|
|
+</style>
|
