消防物联网生命通道单位

app/src/views/Iot/components/TotalityInfo.vue

@@ -1,339 +1,384 @@
 <template>
-	<div class="iot">
-		<div class="all-unit">
-			<div class="iot-num" v-for="(item, index) in list" :key="index">
-				<LinearText style="display: inline-block" :text="item.num" fontSize="24px"></LinearText>
-				<div class="text">{{ item.title }}</div>
-				<div>
-					{{ item.text }}
-					<span class="num" :style="{
+  <div class="iot">
+    <div class="all-unit">
+      <div class="iot-num" v-for="(item, index) in list" :key="index">
+        <LinearText
+          style="display: inline-block"
+          :text="item.num"
+          fontSize="24px"
+        ></LinearText>
+        <div class="text">{{ item.title }}</div>
+        <div>
+          {{ item.text }}
+          <span
+            class="num"
+            :style="{
               color: changaColor(item.text),
-            }">{{ item.allNum }}</span>个
-				</div>
-			</div>
-		</div>
-		<!-- 检测点位统计 -->
-		<div class="PointStatistics">
-			<span style="font-size: 16px">检测点位统计</span>
-			<div class="online-num">
-				<div class="status">
-					<span class="online line">在线</span>
-				</div>
-				<div>
-					<span class="offline line">告警</span>
-				</div>
-			</div>
-		</div>
-		<div class="ala-n">
-			<div v-for="(item, index) in lineList" :key="index" class="alarm">
-				<div class="alarm-host">
-					<img :src="item.imgs" alt="" />
-					<div style="width: 90%">
-						<div class="inline-bor">
-							<span style="font-size: 12px">{{ item.text }}</span>
-							<span class="calc-percent">{{ item.allnum }}/{{ item.average }}</span>个/栋
-						</div>
-						<div class="on-line">
-							<div>
-								<span class="online lines"></span>
-								<span style="font-size: 14px">{{ item.line }}/{{ item.linelds }}</span>(个/栋)
-							</div>
-							<div>
-								<span class="offline lines"></span>
-								<span style="font-size: 14px">{{ item.offNum }}/{{ item.offNumlds }}</span>(个/栋)
-							</div>
-						</div>
-					</div>
-				</div>
-			</div>
-			<div class="last-line">
-				<img src="../../../assets/images/Group 1321314604.png" alt="" />
-				<div style="width: 86%">
-					<div class="inline-bor">
-						<span style="font-size: 14px">消防控制室人员离岗</span>
-						<span> <span
-								class="calc-percent">{{dwData.xfkzszs || 0}}/{{dwData.xfkzsds || 0}}</span>个/栋</span>
-					</div>
-					<div class="on-line">
-						<div>
-							<span class="online lines"
-								style="font-size: 18px">{{dwData.xfkzszxs || 0}}/{{dwData.xfkzszxlds || 0}}</span>(个/栋)
-						</div>
-						<div>
-							<span class="lines offline"
-								style="font-size: 18px">{{dwData.xfkzsgjs || 0}}/{{dwData.xfkzsgjlds || 0}}</span>(个/栋)
-						</div>
-					</div>
-				</div>
-			</div>
-		</div>
-	</div>
+            }"
+            >{{ item.allNum }}</span
+          >个
+        </div>
+      </div>
+    </div>
+    <!-- 检测点位统计 -->
+    <div class="PointStatistics">
+      <span style="font-size: 16px">检测点位统计</span>
+      <div class="online-num">
+        <div class="status">
+          <span class="online line">在线</span>
+        </div>
+        <div>
+          <span class="offline line">告警</span>
+        </div>
+      </div>
+    </div>
+    <div class="ala-n">
+      <div v-for="(item, index) in lineList" :key="index" class="alarm">
+        <div class="alarm-host">
+          <img :src="item.imgs" alt="" />
+          <div style="width: 90%">
+            <div class="inline-bor">
+              <span style="font-size: 12px">{{ item.text }}</span>
+              <template v-if="item.text !== '生命通道'">
+                <span class="calc-percent"
+                  >{{ item.allnum }}/{{ item.average }}</span
+                >个/栋
+              </template>
+              <template>
+                <span class="calc-percent">{{ item.allnum }}</span
+                >个
+              </template>
+            </div>
+            <div class="on-line">
+              <div>
+                <span class="online lines"></span>
+                <template v-if="item.text !== '生命通道'">
+                  <span style="font-size: 14px"
+                    >{{ item.line }}/{{ item.linelds }}</span
+                  >(个/栋)
+                </template>
+                <template>
+                  <span style="font-size: 14px">{{ item.line }}</span
+                  >(个)
+                </template>
+              </div>
+              <div>
+                <span class="offline lines"></span>
+                <template v-if="item.text !== '生命通道'">
+                  <span style="font-size: 14px"
+                    >{{ item.offNum }}/{{ item.offNumlds }}</span
+                  >(个/栋)
+                </template>
+                <template>
+                  <span style="font-size: 14px">{{ item.offNum }}</span
+                  >(个)
+                </template>
+              </div>
+            </div>
+          </div>
+        </div>
+      </div>
+      <div class="last-line">
+        <img src="../../../assets/images/Group 1321314604.png" alt="" />
+        <div style="width: 86%">
+          <div class="inline-bor">
+            <span style="font-size: 14px">消防控制室人员离岗</span>
+            <span>
+              <span class="calc-percent"
+                >{{ dwData.xfkzszs || 0 }}/{{ dwData.xfkzsds || 0 }}</span
+              >个/栋</span
+            >
+          </div>
+          <div class="on-line">
+            <div>
+              <span class="online lines" style="font-size: 18px"
+                >{{ dwData.xfkzszxs || 0 }}/{{ dwData.xfkzszxlds || 0 }}</span
+              >(个/栋)
+            </div>
+            <div>
+              <span class="lines offline" style="font-size: 18px"
+                >{{ dwData.xfkzsgjs || 0 }}/{{ dwData.xfkzsgjlds || 0 }}</span
+              >(个/栋)
+            </div>
+          </div>
+        </div>
+      </div>
+    </div>
+  </div>
 </template>
 
 <script>
-	import imgs from "../../../assets/images/Group 1321314604.png";
-	export default {
-		data() {
-			return {
-				list: [],
-				lineList: [],
-			};
-		},
-		props: ["data", "dwData"],
-		methods: {
-			changaColor(text) {
-				return {
-					设备总数: "#FFD74B",
-					在线: "#00FF66",
-					告警: "#FF4B23",
-				} [text];
-			},
-			dealData() {
-				this.list = [{
-						num: this.data.wlwlds || 0,
-						title: "已接入物联网建筑数(栋)",
-						text: "设备总数",
-						allNum: this.data.jrsbzs || 0,
-					},
-					{
-						num: this.data.zxjzs || 0,
-						title: "在线建筑数(栋)",
-						text: "在线",
-						allNum: this.data.jrsbzxs || 0,
-					},
-					{
-						num: this.data.gjlds || 0,
-						title: "告警建筑数(栋)",
-						text: "报警",
-						allNum: this.data.jrsbgjgs || 0,
-					},
-				];
-				this.lineList = [{
-						imgs: imgs,
-						text: "火灾报警主机",
-						allnum: this.dwData.hzbjzjzs || 0,
-						average: this.dwData.hzbjzjds || 0,
-						line: this.dwData.hzbjzjzxs || 0,
-						linelds: this.dwData.hzbjzjzxlds || 0,
-						offNum: this.dwData.hzbjzjgjs || 0,
-						offNumlds: this.dwData.hzbjzjgjlds || 0,
-					},
-					{
-						imgs: imgs,
-						text: "水压",
-						average: this.dwData.syds || 0,
-						allnum: this.dwData.syzs || 0,
-						line: this.dwData.syzxs || 0,
-						linelds: this.dwData.syzxlds || 0,
-						offNum: this.dwData.sygjs || 0,
-						offNumlds: this.dwData.sygjlds || 0,
-					},
-					{
-						imgs: imgs,
-						text: "电器火灾",
-						average: this.dwData.dqhzds || 0,
-						allnum: this.dwData.dqhzzs || 0,
-						line: this.dwData.dqhzzxs || 0,
-						linelds: this.dwData.dqhzzxlds || 0,
-						offNum: this.dwData.dqhzgjs || 0,
-						offNumlds: this.dwData.dqhzgjlds || 0,
-					},
-					{
-						imgs: imgs,
-						text: "生命通道",
-						average: this.dwData.smtdlds || 0,
-						allnum: this.dwData.smtdzs || 0,
-						line: this.dwData.smtdzxs || 0,
-						linelds: this.dwData.smtdzxlds || 0,
-						offNum: this.dwData.smtdgjs || 0,
-						offNumlds: this.dwData.smtdgjlds || 0
-					},
-				];
-			}
-		},
-		watch: {
-			data: {
-				handler() {
-					this.dealData()
-				},
-				deep: true
-			},
-			dwData: {
-				handler() {
-					this.dealData()
-				},
-				deep: true
-			}
-		},
-		created() {
-			this.dealData()
-		},
-	};
+import imgs from "../../../assets/images/Group 1321314604.png";
+export default {
+  data() {
+    return {
+      list: [],
+      lineList: [],
+    };
+  },
+  props: ["data", "dwData"],
+  methods: {
+    changaColor(text) {
+      return {
+        设备总数: "#FFD74B",
+        在线: "#00FF66",
+        告警: "#FF4B23",
+      }[text];
+    },
+    dealData() {
+      this.list = [
+        {
+          num: this.data.wlwlds || 0,
+          title: "已接入物联网建筑数(栋)",
+          text: "设备总数",
+          allNum: this.data.jrsbzs || 0,
+        },
+        {
+          num: this.data.zxjzs || 0,
+          title: "在线建筑数(栋)",
+          text: "在线",
+          allNum: this.data.jrsbzxs || 0,
+        },
+        {
+          num: this.data.gjlds || 0,
+          title: "告警建筑数(栋)",
+          text: "报警",
+          allNum: this.data.jrsbgjgs || 0,
+        },
+      ];
+      this.lineList = [
+        {
+          imgs: imgs,
+          text: "火灾报警主机",
+          allnum: this.dwData.hzbjzjzs || 0,
+          average: this.dwData.hzbjzjds || 0,
+          line: this.dwData.hzbjzjzxs || 0,
+          linelds: this.dwData.hzbjzjzxlds || 0,
+          offNum: this.dwData.hzbjzjgjs || 0,
+          offNumlds: this.dwData.hzbjzjgjlds || 0,
+        },
+        {
+          imgs: imgs,
+          text: "水压",
+          average: this.dwData.syds || 0,
+          allnum: this.dwData.syzs || 0,
+          line: this.dwData.syzxs || 0,
+          linelds: this.dwData.syzxlds || 0,
+          offNum: this.dwData.sygjs || 0,
+          offNumlds: this.dwData.sygjlds || 0,
+        },
+        {
+          imgs: imgs,
+          text: "电器火灾",
+          average: this.dwData.dqhzds || 0,
+          allnum: this.dwData.dqhzzs || 0,
+          line: this.dwData.dqhzzxs || 0,
+          linelds: this.dwData.dqhzzxlds || 0,
+          offNum: this.dwData.dqhzgjs || 0,
+          offNumlds: this.dwData.dqhzgjlds || 0,
+        },
+        {
+          imgs: imgs,
+          text: "生命通道",
+          average: this.dwData.smtdlds || 0,
+          allnum: this.dwData.smtdzs || 0,
+          line: this.dwData.smtdzxs || 0,
+          linelds: this.dwData.smtdzxlds || 0,
+          offNum: this.dwData.smtdgjs || 0,
+          offNumlds: this.dwData.smtdgjlds || 0,
+        },
+      ];
+    },
+  },
+  watch: {
+    data: {
+      handler() {
+        this.dealData();
+      },
+      deep: true,
+    },
+    dwData: {
+      handler() {
+        this.dealData();
+      },
+      deep: true,
+    },
+  },
+  created() {
+    this.dealData();
+  },
+};
 </script>
 
 <style lang="less" scoped>
-	.iot {
-		margin: 13px 5px 0px 5px;
+.iot {
+  margin: 13px 5px 0px 5px;
 
-		.all-unit {
-			display: flex;
-			justify-content: space-between;
-			gap: 11px;
-		}
+  .all-unit {
+    display: flex;
+    justify-content: space-between;
+    gap: 11px;
+  }
 
-		.iot-num {
-			width: 168px;
-			height: 88px;
-			background: linear-gradient(360deg,
-					rgba(0, 148, 255, 0) 0%,
-					rgba(0, 148, 255, 0.6) 100%);
-			border: 1px solid #1a5878;
-			display: flex;
-			flex-direction: column;
-			justify-content: center;
-			align-items: center;
-			font-size: 12px;
-			padding: 4px 0px;
-			box-sizing: border-box;
-			gap: 4px;
+  .iot-num {
+    width: 168px;
+    height: 88px;
+    background: linear-gradient(
+      360deg,
+      rgba(0, 148, 255, 0) 0%,
+      rgba(0, 148, 255, 0.6) 100%
+    );
+    border: 1px solid #1a5878;
+    display: flex;
+    flex-direction: column;
+    justify-content: center;
+    align-items: center;
+    font-size: 12px;
+    padding: 4px 0px;
+    box-sizing: border-box;
+    gap: 4px;
 
-			.num {
-				font-size: 24px;
-				color: #ffd74b;
-				padding: 0px 5px;
-			}
-		}
-	}
+    .num {
+      font-size: 24px;
+      color: #ffd74b;
+      padding: 0px 5px;
+    }
+  }
+}
 
-	.PointStatistics {
-		width: 94%;
-		height: 37px;
-		background: rgba(0, 213, 255, 0.24); //渐变
-		margin: 10px 0;
-		color: #fff;
-		display: flex;
-		justify-content: space-between;
+.PointStatistics {
+  width: 94%;
+  height: 37px;
+  background: rgba(0, 213, 255, 0.24); //渐变
+  margin: 10px 0;
+  color: #fff;
+  display: flex;
+  justify-content: space-between;
 
-		align-items: center;
-		padding: 0 15px;
+  align-items: center;
+  padding: 0 15px;
 
-		.online-num {
-			display: flex;
-			margin-right: 32px;
+  .online-num {
+    display: flex;
+    margin-right: 32px;
 
-			.status {
-				margin-right: 22px;
-			}
-		}
-	}
+    .status {
+      margin-right: 22px;
+    }
+  }
+}
 
-	.ala-n {
-		display: flex;
-		justify-content: space-between;
-		flex-wrap: wrap;
-	}
+.ala-n {
+  display: flex;
+  justify-content: space-between;
+  flex-wrap: wrap;
+}
 
-	.line::before {
-		content: "";
-		display: inline-block;
-		width: 8px;
-		height: 8px;
-		border-radius: 50%;
-		margin-right: 5px;
-	}
+.line::before {
+  content: "";
+  display: inline-block;
+  width: 8px;
+  height: 8px;
+  border-radius: 50%;
+  margin-right: 5px;
+}
 
-	.online::before {
-		background-color: #2fde60;
-	}
+.online::before {
+  background-color: #2fde60;
+}
 
-	.offline::before {
-		background-color: #ff4f4f;
-	}
+.offline::before {
+  background-color: #ff4f4f;
+}
 
-	.alarm {
-		width: 264px;
-		height: 81px;
-		background: linear-gradient(360deg,
-				rgba(61, 220, 255, 0.3) 0%,
-				rgba(61, 232, 255, 0) 100%);
-		line-height: 40px;
-		margin-top: 10px;
-		letter-spacing: 1px;
+.alarm {
+  width: 264px;
+  height: 81px;
+  background: linear-gradient(
+    360deg,
+    rgba(61, 220, 255, 0.3) 0%,
+    rgba(61, 232, 255, 0) 100%
+  );
+  line-height: 40px;
+  margin-top: 10px;
+  letter-spacing: 1px;
 
-		.alarm-host {
-			display: inline-block;
-			display: flex;
-			align-items: center;
-			justify-content: space-around;
-			text-align: center;
-		}
+  .alarm-host {
+    display: inline-block;
+    display: flex;
+    align-items: center;
+    justify-content: space-around;
+    text-align: center;
+  }
 
-		img {
-			display: inline-block;
-			width: 52px;
-			height: 49px;
-		}
+  img {
+    display: inline-block;
+    width: 52px;
+    height: 49px;
+  }
 
-		.inline-bor {
-			// width: 124px;
-			border-bottom: 1px dotted #7789cd;
+  .inline-bor {
+    // width: 124px;
+    border-bottom: 1px dotted #7789cd;
 
-			.calc-percent {
-				color: #44f1ff;
-				font-size: 16px;
-			}
-		}
-	}
+    .calc-percent {
+      color: #44f1ff;
+      font-size: 16px;
+    }
+  }
+}
 
-	.lines::before {
-		content: "";
-		display: inline-block;
-		border-radius: 50%;
-		width: 10px;
-		height: 10px;
-		margin-right: 6px;
-	}
+.lines::before {
+  content: "";
+  display: inline-block;
+  border-radius: 50%;
+  width: 10px;
+  height: 10px;
+  margin-right: 6px;
+}
 
-	.on-line {
-		display: flex;
-		justify-content: space-between;
-		width: 100%;
-	}
+.on-line {
+  display: flex;
+  justify-content: space-between;
+  width: 100%;
+}
 
-	.last-line {
-		width: 100%;
-		height: 80px;
-		background: linear-gradient(360deg,
-				rgba(61, 220, 255, 0.3) 0%,
-				rgba(61, 232, 255, 0) 100%);
-		margin-top: 5px;
-		line-height: 40px;
-		display: flex;
-		align-items: center;
+.last-line {
+  width: 100%;
+  height: 80px;
+  background: linear-gradient(
+    360deg,
+    rgba(61, 220, 255, 0.3) 0%,
+    rgba(61, 232, 255, 0) 100%
+  );
+  margin-top: 5px;
+  line-height: 40px;
+  display: flex;
+  align-items: center;
 
-		img {
-			display: inline-block;
-			width: 52px;
-			height: 49px;
-		}
+  img {
+    display: inline-block;
+    width: 52px;
+    height: 49px;
+  }
 
-		.inline-bor {
-			display: flex;
-			justify-content: space-between;
-			font-size: 16px;
-			border-bottom: 1px dotted #7789cd;
+  .inline-bor {
+    display: flex;
+    justify-content: space-between;
+    font-size: 16px;
+    border-bottom: 1px dotted #7789cd;
 
-			.calc-percent {
-				color: #44f1ff;
-				font-size: 18px;
-			}
-		}
+    .calc-percent {
+      color: #44f1ff;
+      font-size: 18px;
+    }
+  }
 
-		.on-line {
-			display: flex;
-			justify-content: start;
-			gap: 20px;
-			padding: 0px 10px;
-		}
-	}
+  .on-line {
+    display: flex;
+    justify-content: start;
+    gap: 20px;
+    padding: 0px 10px;
+  }
+}
 </style>