|
|
@@ -0,0 +1,338 @@
|
|
|
+<template>
|
|
|
+
|
|
|
+
|
|
|
+ <!-- 医疗机构清单 -->
|
|
|
+ <div class="rightBotContent" v-if="typeValue==1" style="margin-top:15px;height: 100%;">
|
|
|
+ <el-table ref="reportTable" height="100%" :data="streetDynamicData" class="transparentTableRow" style="width: 100%"
|
|
|
+ @mouseenter="autoScroll(true)" @mouseleave="autoScroll()">
|
|
|
+ <el-table-column v-for="item in streetDynamicHeaderData" :key="item.prop" :prop="item.prop" align="center"
|
|
|
+ :label="item.name">
|
|
|
+ <template #default="scope">
|
|
|
+ <el-tooltip placement="left" trigger="click">
|
|
|
+ <template #content>
|
|
|
+ <div class="tableTooltip">
|
|
|
+ <div class="tableTitle" ref="ff">
|
|
|
+ <div>物联动态详情</div>
|
|
|
+ </div>
|
|
|
+ <img src="~@a/img/icon/close.png" alt="" class="close" @click="closeIsTooltip" />
|
|
|
+ <el-row class="tableContent">
|
|
|
+ <el-col :span="24">
|
|
|
+ 街镇：
|
|
|
+ <span>{{ scope.row.streetTown ? scope.row.streetTown : "--" }}</span>
|
|
|
+ </el-col>
|
|
|
+ <el-col :span="24">
|
|
|
+ 设备总数：<span>{{ scope.row.medicalName ? scope.row.medicalName : "--" }}</span>
|
|
|
+ </el-col>
|
|
|
+ <el-col :span="24">
|
|
|
+ 在线数：<span> {{ scope.row.address ? scope.row.address : "--" }}</span>
|
|
|
+ </el-col>
|
|
|
+ <el-col :span="24">
|
|
|
+ 在线率：<span>{{ scope.row.dangerIssue ? scope.row.dangerIssue : "--" }}</span>
|
|
|
+ </el-col>
|
|
|
+ <el-col :span="24">
|
|
|
+ 处置率：<span>{{ scope.row.processedRate ? scope.row.processedRate : "--" }}</span>
|
|
|
+ </el-col>
|
|
|
+ </el-row>
|
|
|
+ </div>
|
|
|
+ </template>
|
|
|
+
|
|
|
+ <template>
|
|
|
+ <div class="name-wrapper">
|
|
|
+ {{ scope.row[item.prop] }}
|
|
|
+ </div>
|
|
|
+ </template>
|
|
|
+ </el-tooltip>
|
|
|
+ </template>
|
|
|
+ </el-table-column>
|
|
|
+ </el-table>
|
|
|
+ </div>
|
|
|
+
|
|
|
+ <!-- 电动车自行车现状 -->
|
|
|
+ <div v-if="typeValue==2" style="margin-top:.25rem">
|
|
|
+ <el-row class="ebItem">
|
|
|
+ <el-col :offset="1" :span="4"><img src="@/assets/img/securityPlan/iconEb.svg" alt="" class="img" width="20"></el-col>
|
|
|
+ <el-col :span="8">华漕镇</el-col>
|
|
|
+ <el-col :span="9" style="color:#73FBFD;cursor:pointer">摸排报告</el-col>
|
|
|
+ <el-col :span="2" style="color:#73FBFD;text-align:center"> <i class="el-icon-arrow-right"></i></el-col>
|
|
|
+ <div class="panel-footer"></div>
|
|
|
+ </el-row>
|
|
|
+ <el-row class="ebItem">
|
|
|
+ <el-col :offset="1" :span="4"><img src="@/assets/img/securityPlan/iconEb.svg" alt="" class="img" width="20"></el-col>
|
|
|
+ <el-col :span="8">新虹街道</el-col>
|
|
|
+ <el-col :span="9" style="color:#73FBFD;cursor:pointer">摸排报告</el-col>
|
|
|
+ <el-col :span="2" style="color:#73FBFD;text-align:center"> <i class="el-icon-arrow-right"></i></el-col>
|
|
|
+ <div class="panel-footer"></div>
|
|
|
+ </el-row>
|
|
|
+ <el-row class="ebItem">
|
|
|
+ <el-col :offset="1" :span="4"><img src="@/assets/img/securityPlan/iconEb.svg" alt="" class="img" width="20"></el-col>
|
|
|
+ <el-col :span="8">七宝镇</el-col>
|
|
|
+ <el-col :span="9" style="color:#73FBFD;cursor:pointer">摸排报告</el-col>
|
|
|
+ <el-col :span="2" style="color:#73FBFD;text-align:center"> <i class="el-icon-arrow-right"></i></el-col>
|
|
|
+ <div class="panel-footer"></div>
|
|
|
+ </el-row>
|
|
|
+ <el-row class="ebItem">
|
|
|
+ <el-col :offset="1" :span="4"><img src="@/assets/img/securityPlan/iconEb.svg" alt="" class="img" width="20"></el-col>
|
|
|
+ <el-col :span="8">虹桥镇</el-col>
|
|
|
+ <el-col :span="9" style="color:#73FBFD;cursor:pointer">摸排报告</el-col>
|
|
|
+ <el-col :span="2" style="color:#73FBFD;text-align:center"> <i class="el-icon-arrow-right"></i></el-col>
|
|
|
+ <div class="panel-footer"></div>
|
|
|
+ </el-row>
|
|
|
+ </div>
|
|
|
+
|
|
|
+
|
|
|
+
|
|
|
+ <!-- 宾馆酒店信息统计 -->
|
|
|
+ <div v-if="typeValue==3">
|
|
|
+ <el-row >
|
|
|
+ <el-col :span="8">图表区域</el-col>
|
|
|
+ <el-col :span="16">
|
|
|
+ <el-row>
|
|
|
+ <el-col :span="10" style="border: 1px solid rgba(48, 207, 255, 0.6); margin: 20px 10px 10px; box-shadow: inset 0 0 0.07rem 0.04rem rgb(115 251 253 / 40%); box-sizing: border-box">
|
|
|
+ <div style="padding: 0.3rem 0; text-align: center">
|
|
|
+ <span style="display: block">
|
|
|
+ <Strong style=" color: #00C8B8" >
|
|
|
+ <CountTo :startVal="0" :endVal="72" :duration="3000" v-if="!isNaN(199)" style="font-size: 0.3rem">723</CountTo>
|
|
|
+ </Strong>
|
|
|
+ 家
|
|
|
+ </span>
|
|
|
+ <span>华漕镇</span>
|
|
|
+ </div>
|
|
|
+ </el-col>
|
|
|
+ <el-col :span="10" style="border: 1px solid rgba(48, 207, 255, 0.6); margin: 20px 10px 10px; box-shadow: inset 0 0 0.07rem 0.04rem rgb(115 251 253 / 40%); box-sizing: border-box">
|
|
|
+ <div style="padding: 0.3rem 0; text-align: center">
|
|
|
+ <span style="display: block">
|
|
|
+ <Strong style=" color: #068DFF" >
|
|
|
+ <CountTo :startVal="0" :endVal="72" :duration="3000" v-if="!isNaN(199)" style="font-size: 0.3rem">72</CountTo>
|
|
|
+ </Strong>
|
|
|
+ 家
|
|
|
+ </span>
|
|
|
+ <span>华漕镇</span>
|
|
|
+ </div>
|
|
|
+ </el-col>
|
|
|
+ <el-col :span="10" style="border: 1px solid rgba(48, 207, 255, 0.6); margin: 20px 10px 10px; box-shadow: inset 0 0 0.07rem 0.04rem rgb(115 251 253 / 40%); box-sizing: border-box">
|
|
|
+ <div style="padding: 0.3rem 0; text-align: center">
|
|
|
+ <span style="display: block">
|
|
|
+ <Strong style=" color: #FF843A" >
|
|
|
+ <CountTo :startVal="0" :endVal="72" :duration="3000" v-if="!isNaN(199)" style="font-size: 0.3rem">72</CountTo>
|
|
|
+ </Strong>
|
|
|
+ 家
|
|
|
+ </span>
|
|
|
+ <span>华漕镇</span>
|
|
|
+ </div>
|
|
|
+ </el-col>
|
|
|
+ <el-col :span="10" style="border: 1px solid rgba(48, 207, 255, 0.6); margin: 20px 10px 10px; box-shadow: inset 0 0 0.07rem 0.04rem rgb(115 251 253 / 40%); box-sizing: border-box">
|
|
|
+ <div style="padding: 0.3rem 0; text-align: center">
|
|
|
+ <span style="display: block">
|
|
|
+ <Strong style=" color: #7DD807" >
|
|
|
+ <CountTo :startVal="0" :endVal="72" :duration="3000" v-if="!isNaN(199)" style="font-size: 0.3rem">72</CountTo>
|
|
|
+ </Strong>
|
|
|
+ 家
|
|
|
+ </span>
|
|
|
+ <span>华漕镇</span>
|
|
|
+ </div>
|
|
|
+ </el-col>
|
|
|
+ </el-row>
|
|
|
+
|
|
|
+ </el-col>
|
|
|
+ </el-row>
|
|
|
+ </div>
|
|
|
+
|
|
|
+
|
|
|
+</template>
|
|
|
+
|
|
|
+<script>
|
|
|
+import linstener from "@c/mixins/linstener";
|
|
|
+export default {
|
|
|
+ props: {
|
|
|
+ typeValue: { type: Number, default: () => 3 },
|
|
|
+
|
|
|
+ },
|
|
|
+ mixins: [linstener],
|
|
|
+ data() {
|
|
|
+ return {
|
|
|
+ streetDynamicData: [
|
|
|
+ {
|
|
|
+ "dangerIssue": "15.6%",
|
|
|
+ "address": 14,
|
|
|
+ "medicalName": 90,
|
|
|
+ "streetTown": "华漕镇",
|
|
|
+ "processedRate": "0.0%"
|
|
|
+ },
|
|
|
+ {
|
|
|
+ "dangerIssue": "78.8%",
|
|
|
+ "address": 67,
|
|
|
+ "medicalName": 85,
|
|
|
+ "streetTown": "新虹街道",
|
|
|
+ "processedRate": "0.0%"
|
|
|
+ },
|
|
|
+ {
|
|
|
+ "dangerIssue": "17.8%",
|
|
|
+ "address": 292,
|
|
|
+ "medicalName": 1641,
|
|
|
+ "streetTown": "七宝镇",
|
|
|
+ "processedRate": "0.0%"
|
|
|
+ },
|
|
|
+ {
|
|
|
+ "dangerIssue": "37.4%",
|
|
|
+ "address": 474,
|
|
|
+ "medicalName": 1266,
|
|
|
+ "streetTown": "虹桥镇",
|
|
|
+ "processedRate": "0.0%"
|
|
|
+ },
|
|
|
+ {
|
|
|
+ "dangerIssue": "34.3%",
|
|
|
+ "address": 82,
|
|
|
+ "medicalName": 239,
|
|
|
+ "streetTown": "古美路街道",
|
|
|
+ "processedRate": "0.0%"
|
|
|
+ },
|
|
|
+ {
|
|
|
+ "dangerIssue": "15.7%",
|
|
|
+ "address": 336,
|
|
|
+ "medicalName": 2144,
|
|
|
+ "streetTown": "莘庄镇",
|
|
|
+ "processedRate": "0.0%"
|
|
|
+ },
|
|
|
+ {
|
|
|
+ "dangerIssue": "39.1%",
|
|
|
+ "address": 358,
|
|
|
+ "medicalName": 916,
|
|
|
+ "streetTown": "梅陇镇",
|
|
|
+ "processedRate": "0.0%"
|
|
|
+ },
|
|
|
+ {
|
|
|
+ "dangerIssue": "16.1%",
|
|
|
+ "address": 293,
|
|
|
+ "medicalName": 1823,
|
|
|
+ "streetTown": "颛桥镇",
|
|
|
+ "processedRate": "0.0%"
|
|
|
+ },
|
|
|
+ {
|
|
|
+ "dangerIssue": "19.8%",
|
|
|
+ "address": 133,
|
|
|
+ "medicalName": 673,
|
|
|
+ "streetTown": "马桥镇",
|
|
|
+ "processedRate": "0.0%"
|
|
|
+ },
|
|
|
+ {
|
|
|
+ "dangerIssue": "49.6%",
|
|
|
+ "address": 64,
|
|
|
+ "medicalName": 129,
|
|
|
+ "streetTown": "江川路街道",
|
|
|
+ "processedRate": "0.0%"
|
|
|
+ },
|
|
|
+ {
|
|
|
+ "dangerIssue": "16.0%",
|
|
|
+ "address": 512,
|
|
|
+ "medicalName": 3205,
|
|
|
+ "streetTown": "吴泾镇",
|
|
|
+ "processedRate": "0.0%"
|
|
|
+ },
|
|
|
+ {
|
|
|
+ "dangerIssue": "97.1%",
|
|
|
+ "address": 4652,
|
|
|
+ "medicalName": 4791,
|
|
|
+ "streetTown": "浦锦街道",
|
|
|
+ "processedRate": "0.0%"
|
|
|
+ },
|
|
|
+ {
|
|
|
+ "dangerIssue": "15.9%",
|
|
|
+ "address": 342,
|
|
|
+ "medicalName": 2157,
|
|
|
+ "streetTown": "浦江镇",
|
|
|
+ "processedRate": "0.0%"
|
|
|
+ },
|
|
|
+ {
|
|
|
+ "dangerIssue": "8.0%",
|
|
|
+ "address": 174,
|
|
|
+ "medicalName": 2174,
|
|
|
+ "streetTown": "莘庄工业区",
|
|
|
+ "processedRate": "0.0%"
|
|
|
+ }], //各街镇物联动态-数据存储
|
|
|
+ streetDynamicHeaderData: [
|
|
|
+ { prop: "streetTown", name: "街镇" },
|
|
|
+ { prop: "medicalName", name: "医疗机构名称" },
|
|
|
+ { prop: "address", name: "地址" },
|
|
|
+ { prop: "dangerIssue", name: "隐患问题" },
|
|
|
+ ], //各街镇物联动态-table表格prop头部定义
|
|
|
+ };
|
|
|
+ },
|
|
|
+ watch: {
|
|
|
+ "props.typeValue" :function(val){
|
|
|
+ alert(val)
|
|
|
+
|
|
|
+ }
|
|
|
+
|
|
|
+ },
|
|
|
+ mounted() {
|
|
|
+
|
|
|
+ },
|
|
|
+ created() {
|
|
|
+ setTimeout(() => {
|
|
|
+ this.autoScroll()
|
|
|
+
|
|
|
+ }, 2000)
|
|
|
+ },
|
|
|
+ methods: {
|
|
|
+ beforeDestroy() {
|
|
|
+ this.autoScroll(true)
|
|
|
+ },
|
|
|
+
|
|
|
+ },
|
|
|
+};
|
|
|
+</script>
|
|
|
+
|
|
|
+<style scoped lang="scss">
|
|
|
+.ebItem{
|
|
|
+ margin-top:0.17rem;
|
|
|
+ background:rgba(115, 251, 253, 0.06) !important;
|
|
|
+ padding:.1rem 0;
|
|
|
+ font-size:0.175rem;
|
|
|
+ &::before {
|
|
|
+ position: absolute;
|
|
|
+ top: 0;
|
|
|
+ left: 0;
|
|
|
+ content: "";
|
|
|
+ width: 10px;
|
|
|
+ height: 10px;
|
|
|
+ border-left: 1px solid #02a6b5;
|
|
|
+ border-top: 1px solid #02a6b5;
|
|
|
+ }
|
|
|
+ &::after {
|
|
|
+ position: absolute;
|
|
|
+ top: 0;
|
|
|
+ right: 0;
|
|
|
+ content: "";
|
|
|
+ width: 10px;
|
|
|
+ height: 10px;
|
|
|
+ border-right: 1px solid #02a6b5;
|
|
|
+ border-top: 1px solid #02a6b5;
|
|
|
+ }
|
|
|
+ .panel-footer {
|
|
|
+ position: absolute;
|
|
|
+ left: 0;
|
|
|
+ bottom: 0;
|
|
|
+ width: 100%;
|
|
|
+ &::before {
|
|
|
+ position: absolute;
|
|
|
+ bottom: 0;
|
|
|
+ left: 0;
|
|
|
+ content: "";
|
|
|
+ width: 10px;
|
|
|
+ height: 10px;
|
|
|
+ border-left: 1px solid #02a6b5;
|
|
|
+ border-bottom: 1px solid #02a6b5;
|
|
|
+ }
|
|
|
+ &::after {
|
|
|
+ position: absolute;
|
|
|
+ right: 0;
|
|
|
+ bottom: 0;
|
|
|
+ content: "";
|
|
|
+ width: 10px;
|
|
|
+ height: 10px;
|
|
|
+ border-right: 1px solid #02a6b5;
|
|
|
+ border-bottom: 1px solid #02a6b5;
|
|
|
+ }
|
|
|
+ }
|
|
|
+}
|
|
|
+</style>
|
ming
