|
@@ -76,31 +76,7 @@
|
|
|
</div>
|
|
|
|
|
|
<div :class="topAreaListWs.length != 0 ? 'bot-area' : 'bot-area1'">
|
|
|
- <div class="title-b">
|
|
|
- <div class="text-b">安全监控测点信息</div>
|
|
|
- </div>
|
|
|
- <div class="content-b">
|
|
|
- <div class="content-b-item">
|
|
|
- <div class="card-b" v-for="(item, index) in cardListWs" :key="index">
|
|
|
- <div class="item-l">
|
|
|
- <div class="label-l">{{ item.label }}</div>
|
|
|
- <div class="value-l">{{ `${item.value}%` }}</div>
|
|
|
- </div>
|
|
|
- <div class="item-r">
|
|
|
- <div class="content-r" v-for="(items, ind) in item.listR" :key="ind">
|
|
|
- <span>{{ `${items.label} : ` }}</span>
|
|
|
- <span
|
|
|
- :class="{
|
|
|
- 'status-f': items.value == 1,
|
|
|
- 'status-l': items.value == 0,
|
|
|
- }"
|
|
|
- >{{ items.value == 1 ? '异常' : items.value == 0 ? '正常' : items.value }}</span
|
|
|
- >
|
|
|
- </div>
|
|
|
- </div>
|
|
|
- </div>
|
|
|
- </div>
|
|
|
- </div>
|
|
|
+ <MeasurePoint title="安全监控测点信息" :cards="cardListWs" :charts="chartListWs" />
|
|
|
</div>
|
|
|
</div>
|
|
|
<div style="width: 100%; height: 100%" v-else-if="isShow == 'yjzb'">
|
|
@@ -124,6 +100,7 @@
|
|
|
import { getMonitorComponent } from '../common.data';
|
|
|
import { usePermission } from '/@/hooks/web/usePermission';
|
|
|
import { useGlobSetting } from '/@/hooks/setting';
|
|
|
+ import MeasurePoint from '../common/measurePoint.vue';
|
|
|
|
|
|
let typeMenuListGas = getMonitorComponent();
|
|
|
const { sysOrgCode } = useGlobSetting();
|
|
@@ -137,6 +114,7 @@
|
|
|
let topAreaListWs = reactive<any[]>([]);
|
|
|
//瓦斯监控列表数据
|
|
|
let cardListWs = reactive<any[]>([]);
|
|
|
+ const chartListWs = reactive<any[]>([]);
|
|
|
let router = useRouter();
|
|
|
//监测/指标激活索引
|
|
|
let activeIndex = ref(0);
|
|
@@ -168,6 +146,7 @@
|
|
|
// listData.common = res;
|
|
|
topAreaListWs.length = 0;
|
|
|
cardListWs.length = 0;
|
|
|
+ chartListWs.length = 0;
|
|
|
if (JSON.stringify(res) != '{}') {
|
|
|
res.pump.forEach((v) => {
|
|
|
topAreaListWs.push({
|
|
@@ -204,6 +183,10 @@
|
|
|
{ id: 3, label: '测点状态', value: el.warnFlag },
|
|
|
],
|
|
|
});
|
|
|
+ chartListWs.push({
|
|
|
+ label: el.strinstallpos,
|
|
|
+ data: [],
|
|
|
+ });
|
|
|
});
|
|
|
}
|
|
|
});
|
|
@@ -274,8 +257,6 @@
|
|
|
--image-border: url('/@/assets/images/themify/deepblue/fire/border.png');
|
|
|
--image-bj1: url('/@/assets/images/themify/deepblue/fire/bj1.png');
|
|
|
--image-top-area: url('/@/assets/images/themify/deepblue/fire/top-area.png');
|
|
|
- --image-bot-area: url('/@/assets/images/themify/deepblue/fire/bot-area.png');
|
|
|
- --image-bot-area1: url('/@/assets/images/themify/deepblue/fire/bot-area1.png');
|
|
|
}
|
|
|
}
|
|
|
|
|
@@ -285,8 +266,6 @@
|
|
|
--image-border: url('/@/assets/images/fire/border.png');
|
|
|
--image-bj1: url('/@/assets/images/fire/bj1.png');
|
|
|
--image-top-area: url('/@/assets/images/fire/top-area.png');
|
|
|
- --image-bot-area: url('/@/assets/images/fire/bot-area.png');
|
|
|
- --image-bot-area1: url('/@/assets/images/fire/bot-area1.png');
|
|
|
width: 100%;
|
|
|
height: 100%;
|
|
|
padding: 80px 10px 15px 10px;
|
|
@@ -530,110 +509,6 @@
|
|
|
background: var(--image-bj1) no-repeat center;
|
|
|
background-size: 100% 100%;
|
|
|
box-sizing: border-box;
|
|
|
-
|
|
|
- .title-b {
|
|
|
- height: 30px;
|
|
|
- margin-bottom: 10px;
|
|
|
- display: flex;
|
|
|
- justify-content: space-between;
|
|
|
- align-items: center;
|
|
|
-
|
|
|
- .text-b {
|
|
|
- font-family: 'douyuFont';
|
|
|
- font-size: 14px;
|
|
|
- color: #fff;
|
|
|
- }
|
|
|
- }
|
|
|
-
|
|
|
- .content-b {
|
|
|
- height: calc(100% - 40px);
|
|
|
- overflow-y: auto;
|
|
|
-
|
|
|
- .content-b-item {
|
|
|
- display: flex;
|
|
|
- justify-content: flex-start;
|
|
|
- align-items: flex-start;
|
|
|
- flex-wrap: wrap;
|
|
|
-
|
|
|
- .card-b {
|
|
|
- position: relative;
|
|
|
- width: 30%;
|
|
|
- height: 128px;
|
|
|
- margin: 0px 15px 15px 15px;
|
|
|
- background: var(--image-bot-area) no-repeat center;
|
|
|
- background-size: 100% 100%;
|
|
|
-
|
|
|
- .item-l {
|
|
|
- position: absolute;
|
|
|
- left: 32px;
|
|
|
- top: 50%;
|
|
|
- transform: translate(0, -50%);
|
|
|
- width: 89px;
|
|
|
- height: 98px;
|
|
|
- background: var(--image-bot-area1) no-repeat center;
|
|
|
-
|
|
|
- .label-l {
|
|
|
- position: absolute;
|
|
|
- left: 50%;
|
|
|
- top: 7px;
|
|
|
- color: #fff;
|
|
|
- font-size: 14px;
|
|
|
- transform: translate(-50%, 0);
|
|
|
- }
|
|
|
-
|
|
|
- .value-l {
|
|
|
- position: absolute;
|
|
|
- left: 50%;
|
|
|
- top: 50px;
|
|
|
- transform: translate(-50%, 0);
|
|
|
- font-family: 'douyuFont';
|
|
|
- font-size: 14px;
|
|
|
- color: var(--vent-table-action-link);
|
|
|
- }
|
|
|
- }
|
|
|
-
|
|
|
- .item-r {
|
|
|
- position: absolute;
|
|
|
- left: 132px;
|
|
|
- top: 50%;
|
|
|
- transform: translate(0, -50%);
|
|
|
- height: 128px;
|
|
|
- padding: 5px 0px;
|
|
|
- display: flex;
|
|
|
- flex-direction: column;
|
|
|
- justify-content: space-around;
|
|
|
- box-sizing: border-box;
|
|
|
-
|
|
|
- .content-r {
|
|
|
- display: flex;
|
|
|
-
|
|
|
- span {
|
|
|
- font-size: 14px;
|
|
|
- color: #fff;
|
|
|
-
|
|
|
- &:first-child {
|
|
|
- display: inline-block;
|
|
|
- width: 68px;
|
|
|
- }
|
|
|
-
|
|
|
- &:last-child {
|
|
|
- display: inline-block;
|
|
|
- width: calc(100% - 68px);
|
|
|
- }
|
|
|
- }
|
|
|
-
|
|
|
- .status-f {
|
|
|
- color: #ff0000;
|
|
|
- }
|
|
|
-
|
|
|
- .status-l {
|
|
|
- color: var(--vent-table-action-link);
|
|
|
- }
|
|
|
- }
|
|
|
- }
|
|
|
- }
|
|
|
- }
|
|
|
- }
|
|
|
}
|
|
|
|
|
|
.bot-area1 {
|