|
|
@@ -11,37 +11,119 @@
|
|
|
<p><strong><CountTo :startVal='0' :endVal='item.value' :duration='5000'> {{ item.value || 0 }}</CountTo></strong>{{ item.unit }}</p>
|
|
|
</div>
|
|
|
</el-row> -->
|
|
|
- <el-row>
|
|
|
- <el-col
|
|
|
- :span="5"
|
|
|
- style="border: 1px solid rgba(48, 207, 255, 0.6); margin: 4px .125rem; box-shadow: inset 0 0 0.07rem 0.04rem rgb(115 251 253 / 40%); box-sizing: border-box"
|
|
|
- v-for="(item, index) in diversionArea"
|
|
|
+ <el-row class="sdqBasicInfo sdline1">
|
|
|
+ <div
|
|
|
+ class="basicItem"
|
|
|
+ v-for="(item, index) in diversionArea.slice(0,5)"
|
|
|
:key="index"
|
|
|
>
|
|
|
<div style="padding: 0.03rem 0; text-align: center">
|
|
|
<span style="display: block">
|
|
|
<Strong
|
|
|
- :style="{
|
|
|
- color: item.color,
|
|
|
- fontWeight: 600,
|
|
|
- fontSize: '0.3rem',
|
|
|
- }"
|
|
|
+ style="color: #01E0FF;font-weight: 600;font-size: 0.3rem"
|
|
|
>
|
|
|
<CountTo :startVal="0" :endVal="item.value || 0" :duration="3000" v-if="!isNaN(item.value)">{{ item.value || 0 }}</CountTo>
|
|
|
<span v-if="isNaN(item.value)" style="fontSize: 0.2rem !important">{{ item.value || 0 }}</span>
|
|
|
</Strong>
|
|
|
{{ item.unit }}
|
|
|
</span>
|
|
|
- <span>{{ item.name }}</span>
|
|
|
+ <span class="nameBox" style="">{{ item.name }}</span>
|
|
|
</div>
|
|
|
- </el-col>
|
|
|
+ </div>
|
|
|
</el-row>
|
|
|
+
|
|
|
+ <el-row class="sdqBasicInfo sdline2">
|
|
|
+ <div
|
|
|
+ class="basicItem"
|
|
|
+ v-for="(item, index) in diversionArea.slice(7,10)"
|
|
|
+ :key="index"
|
|
|
+ >
|
|
|
+ <div style="padding: 0.03rem 0; text-align: center">
|
|
|
+ <span style="display: block">
|
|
|
+ <Strong
|
|
|
+ style="color: #F48354;font-weight: 600;font-size: 0.3rem"
|
|
|
+ >
|
|
|
+ <CountTo :startVal="0" :endVal="item.value || 0" :duration="3000" v-if="!isNaN(item.value)">{{ item.value || 0 }}</CountTo>
|
|
|
+ <span v-if="isNaN(item.value)" style="fontSize: 0.2rem !important">{{ item.value || 0 }}</span>
|
|
|
+ </Strong>
|
|
|
+ {{ item.unit }}
|
|
|
+ </span>
|
|
|
+ <span class="nameBox" style="">{{ item.name }}</span>
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+ </el-row>
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+
|
|
|
+
|
|
|
+ <div class="leftCenter">
|
|
|
+ <div style="display: flex;">
|
|
|
+ <h4>疏导区社会单位情况</h4>
|
|
|
+ <div style="display: flex; border-bottom: 0.0125rem solid rgba(115, 251, 253, 0.5);">
|
|
|
+ <el-form class="titleElForm" :inline="true" size="mini" :model="barForm" style="height: 0">
|
|
|
+ <el-form-item>
|
|
|
+ <!-- <el-select v-model="barForm.fireType" @change="getHouse()" filterable clearable placeholder="场所">
|
|
|
+ <el-option v-for="(item, ind) in fireTypeList" :key="ind" :label="item" :value="item"></el-option>
|
|
|
+ </el-select> -->
|
|
|
+ <!-- <el-select v-model="units" filterable clearable placeholder="场所">
|
|
|
+ <el-option v-for="(item, ind) in diversionArea" :key="ind" :label="item.name" :value="item.value"></el-option>
|
|
|
+ </el-select> -->
|
|
|
+
|
|
|
+
|
|
|
+ <el-select v-model="value111" @change="getOneUnit" class="m-2" placeholder="请选择" style="width:200px">
|
|
|
+ <el-option
|
|
|
+ v-for="item in options"
|
|
|
+ :key="item.value"
|
|
|
+ :label="item.label"
|
|
|
+ :value="item.value"
|
|
|
+ />
|
|
|
+ </el-select>
|
|
|
+ </el-form-item>
|
|
|
+ </el-form>
|
|
|
+ </div>
|
|
|
</div>
|
|
|
+ <unit-box :typeValue="value111" :arrayData="arrayData" :staticData="staticData" v-if="staticData.total" ></unit-box>
|
|
|
+ <div v-else>暂无数据</div>
|
|
|
+
|
|
|
+ <!-- <category
|
|
|
+ ref="category"
|
|
|
+ v-show="category"
|
|
|
+ :dataMap="reportComplaintList.map((val, ind) => val.value)"
|
|
|
+ :xData="reportComplaintList.map((val, ind) => val.name)"
|
|
|
+ :isSlice="10"
|
|
|
+ :width="40"
|
|
|
+ color="#73FBFD"
|
|
|
+ @echartsClick="categoryClick"
|
|
|
+ ></category> -->
|
|
|
+
|
|
|
</div>
|
|
|
+
|
|
|
<div class="rightCenter">
|
|
|
<h4>执勤战备力量部署</h4>
|
|
|
<div class="rightTopContent">
|
|
|
- <el-table :data="tableData2" class="transparentTableRow" height="100%" :empty-text="dataNo">
|
|
|
+ <div style="width:95%;margin:0 auto;border: 1px solid rgba(48, 207, 255, 0.6); box-shadow: inset 0 0 0.07rem 0.04rem rgb(115 251 253 / 40%); box-sizing: border-box;display: flex;
|
|
|
+ justify-content: space-between;padding: .15rem .125rem .15rem">
|
|
|
+ <span>闵行支队安保分指挥所</span> <span>淮虹路151弄9号</span> <span>电台：闵101</span> <span>值班电话：33281293</span>
|
|
|
+ </div>
|
|
|
+
|
|
|
+ <el-row>
|
|
|
+ <el-col :span="5" style="border: 1px solid rgba(48, 207, 255, 0.6); margin: .25rem .08rem .125rem .16rem; box-shadow: inset 0 0 0.07rem 0.04rem rgb(115 251 253 / 40%); box-sizing: border-box"
|
|
|
+ v-for="(item,index) in staticData.array" :key="index">
|
|
|
+ <div style="padding: 0.2rem 0; text-align: center">
|
|
|
+ <span style="display: block">
|
|
|
+ <Strong :style="{ color: item.color, fontSize: '0.3rem'}" >
|
|
|
+ <CountTo :startVal='0' :endVal='item.count || 0' :duration='3000'>{{ item.count || 0 }}</CountTo>
|
|
|
+ </Strong>
|
|
|
+ 家
|
|
|
+ </span>
|
|
|
+ <span>{{item.streetTown}}</span>
|
|
|
+ </div>
|
|
|
+ </el-col>
|
|
|
+
|
|
|
+ </el-row>
|
|
|
+
|
|
|
+
|
|
|
+ <!-- <el-table :data="tableData2" class="transparentTableRow" height="100%" :empty-text="dataNo">
|
|
|
<el-table-column type="expand">
|
|
|
<template #default="props">
|
|
|
<template v-if="props.row.children">
|
|
|
@@ -88,51 +170,10 @@
|
|
|
<span style="color: #6ff3f6">{{ scope.row.personnel }}</span>
|
|
|
</template>
|
|
|
</el-table-column>
|
|
|
- </el-table>
|
|
|
+ </el-table> -->
|
|
|
</div>
|
|
|
</div>
|
|
|
|
|
|
- <div class="leftCenter">
|
|
|
- <div style="display: flex;">
|
|
|
- <h4>疏导区社会单位情况</h4>
|
|
|
- <div style="display: flex; border-bottom: 0.0125rem solid rgba(115, 251, 253, 0.5);">
|
|
|
- <el-form class="titleElForm" :inline="true" size="mini" :model="barForm" style="height: 0">
|
|
|
- <el-form-item>
|
|
|
- <!-- <el-select v-model="barForm.fireType" @change="getHouse()" filterable clearable placeholder="场所">
|
|
|
- <el-option v-for="(item, ind) in fireTypeList" :key="ind" :label="item" :value="item"></el-option>
|
|
|
- </el-select> -->
|
|
|
- <!-- <el-select v-model="units" filterable clearable placeholder="场所">
|
|
|
- <el-option v-for="(item, ind) in diversionArea" :key="ind" :label="item.name" :value="item.value"></el-option>
|
|
|
- </el-select> -->
|
|
|
-
|
|
|
-
|
|
|
- <el-select v-model="value111" @change="getOneUnit" class="m-2" placeholder="请选择" style="width:200px">
|
|
|
- <el-option
|
|
|
- v-for="item in options"
|
|
|
- :key="item.value"
|
|
|
- :label="item.label"
|
|
|
- :value="item.value"
|
|
|
- />
|
|
|
- </el-select>
|
|
|
- </el-form-item>
|
|
|
- </el-form>
|
|
|
- </div>
|
|
|
- </div>
|
|
|
-
|
|
|
- <unit-box :typeValue="value111" :arrayData="arrayData" :staticData="staticData" ></unit-box>
|
|
|
- <!-- <category
|
|
|
- ref="category"
|
|
|
- v-show="category"
|
|
|
- :dataMap="reportComplaintList.map((val, ind) => val.value)"
|
|
|
- :xData="reportComplaintList.map((val, ind) => val.name)"
|
|
|
- :isSlice="10"
|
|
|
- :width="40"
|
|
|
- color="#73FBFD"
|
|
|
- @echartsClick="categoryClick"
|
|
|
- ></category> -->
|
|
|
-
|
|
|
- </div>
|
|
|
-
|
|
|
|
|
|
|
|
|
|
|
|
@@ -313,7 +354,11 @@
|
|
|
<!-- 疏导区网格检查情况 end -->
|
|
|
|
|
|
<div class="rightTop3">
|
|
|
+ <div @click="gridStatisticsGoBack" class="return" v-if="!gridStatisticsStatus">
|
|
|
+ <div class="returnText">返回</div>
|
|
|
+ </div>
|
|
|
<h4 style="display: flex">处置网格</h4>
|
|
|
+
|
|
|
<div class="rightTopContent">
|
|
|
<el-row v-if="gridStatisticsStatus">
|
|
|
<el-col :span="12" @click="gridStatistics(1)">
|
|
|
@@ -361,9 +406,7 @@
|
|
|
</div>
|
|
|
</el-col>
|
|
|
</el-row>
|
|
|
- <div @click="gridStatisticsGoBack" class="return" v-if="!gridStatisticsStatus">
|
|
|
- <div class="returnText">返回</div>
|
|
|
- </div>
|
|
|
+
|
|
|
<el-row v-if="!gridStatisticsStatus">
|
|
|
<el-table
|
|
|
:data="gridStatisticsTableType"
|
|
|
@@ -603,7 +646,7 @@
|
|
|
</div>
|
|
|
</el-col>
|
|
|
</el-row> -->
|
|
|
- <h4>执法记录仪</h4>
|
|
|
+ <h4>疏导区执法及监控视频画面</h4>
|
|
|
<el-row class="monitor-list" >
|
|
|
<div class="list">
|
|
|
<el-select
|
|
|
@@ -630,7 +673,7 @@
|
|
|
<div class="list" :offset="2">
|
|
|
<el-select
|
|
|
v-model="zfjly2"
|
|
|
- placeholder="请选择执法记录仪"
|
|
|
+ placeholder="请选择监控视频"
|
|
|
class="videoSelect"
|
|
|
>
|
|
|
<el-option
|
|
|
@@ -786,49 +829,58 @@ export default {
|
|
|
|
|
|
],//处置网格header
|
|
|
|
|
|
- value111:'1',
|
|
|
+ value111:'23',
|
|
|
//24、厂房仓库?? 25、大型商业综合体?? 27、批发市场??
|
|
|
// 23、宾馆酒店 26、规模租赁公寓 28、三合一场所 29、养老机构 30、医疗机构
|
|
|
options: [
|
|
|
+ {
|
|
|
+ value: '23',
|
|
|
+ label: '宾馆酒店',
|
|
|
+ },
|
|
|
{
|
|
|
value: '1',
|
|
|
- label: '电动自行车现状模排报告',
|
|
|
+ label: '大型商业综合体',
|
|
|
+ },
|
|
|
+ {
|
|
|
+ value: '2',
|
|
|
+ label: '消防安全重点单位',
|
|
|
},
|
|
|
{
|
|
|
- value: '23',
|
|
|
- label: '宾馆酒店信息统计',
|
|
|
+ value: '30',
|
|
|
+ label: '医疗机构',
|
|
|
+ },
|
|
|
+ {
|
|
|
+ value: '29',
|
|
|
+ label: '养老机构',
|
|
|
+ },
|
|
|
+
|
|
|
+ {
|
|
|
+ value: '3',
|
|
|
+ label: '厂房仓库',
|
|
|
+ },
|
|
|
+ {
|
|
|
+ value: '4',
|
|
|
+ label: '批发市场',
|
|
|
+ },
|
|
|
+ {
|
|
|
+ value: '5',
|
|
|
+ label: '居民小区',
|
|
|
},
|
|
|
|
|
|
{
|
|
|
value: '26',
|
|
|
- label: '规模租赁公寓统计',
|
|
|
+ label: '规模租赁公寓',
|
|
|
},
|
|
|
{
|
|
|
value: '28',
|
|
|
- label: '三合一场所信息统计',
|
|
|
- },{
|
|
|
- value: '29',
|
|
|
- label: '养老机构安全隐患清单',
|
|
|
+ label: '三合一场所',
|
|
|
},
|
|
|
+
|
|
|
{
|
|
|
- value: '30',
|
|
|
- label: '医疗机构安全隐患清单',
|
|
|
+ value: '6',
|
|
|
+ label: '电动自行车领域',
|
|
|
},
|
|
|
-
|
|
|
- // {
|
|
|
- // value: '3',
|
|
|
- // label: '大型商业综合体统计',
|
|
|
- // },{
|
|
|
- // value: '4',
|
|
|
- // label: '街镇小区数量统计',
|
|
|
- // },
|
|
|
- // {
|
|
|
- // value: '9',
|
|
|
- // label: '重大火灾隐患单位清单',
|
|
|
- // },{
|
|
|
- // value: '10',
|
|
|
- // label: '重点单位信息统计',
|
|
|
- // },
|
|
|
+
|
|
|
],
|
|
|
arrayData:[],
|
|
|
staticData:{
|
|
|
@@ -846,11 +898,12 @@ export default {
|
|
|
{ name: "新虹街道", value: 19.26, unit: "km²", color: "#01C3B4" },
|
|
|
{ name: "七宝镇", value: 7, unit: "㎡", color: "#01C3B4" },
|
|
|
{ name: "虹桥镇", value: 7, unit: "km²", color: "#01C3B4" },
|
|
|
+
|
|
|
+ { name: "分管领导", value: 20, unit: "人", color: "#058DFE" },
|
|
|
+ { name: "增援干部", value: 11, unit: "人", color: "#058DD1" },
|
|
|
{ name: "大网格", value: 4, unit: "个", color: "#FC0609 " },
|
|
|
{ name: "中网格", value: 14, unit: "个", color: "#FD843A" },
|
|
|
{ name: "小网格", value: 103, unit: "个", color: "#7DD807" },
|
|
|
- { name: "分管领导", value: 20, unit: "人", color: "#058DFE" },
|
|
|
- { name: "增援干部", value: 11, unit: "人", color: "#058DD1" },
|
|
|
// {name:"人员力量",value:41,unit:"人",color:"#058DD1"},
|
|
|
], //疏导区基本情况
|
|
|
gridStatus: 15,
|
|
|
@@ -1200,10 +1253,35 @@ export default {
|
|
|
this.getFireSiteDuty(); //各站点执勤实力
|
|
|
this.selectVideo(); //视频在线
|
|
|
// this.sadianSelect(this.checkedArray.checkedData[0]); //撒点
|
|
|
+ this.getStaticData(this.value111)
|
|
|
},
|
|
|
methods: {
|
|
|
+
|
|
|
+ getStaticData(type){
|
|
|
+ this.$axios.get(
|
|
|
+ this.$api.water.baseGgpFacilityStatistic +
|
|
|
+ "?" +
|
|
|
+ this.$qs.stringify({
|
|
|
+ facilityType: type,
|
|
|
+ })
|
|
|
+ ).then(res=>{
|
|
|
+ this.staticData.array=res.data;
|
|
|
+ var colorArr=['#00C8B8','#068DFF','#FF843A','#7DD807'];
|
|
|
+ this.staticData.array.forEach((item, index) => {
|
|
|
+ item.color = colorArr[index]
|
|
|
+ })
|
|
|
+
|
|
|
+ var totalCount=0
|
|
|
+ res.data.forEach(function(item){
|
|
|
+ totalCount+=Number(item.count)
|
|
|
+
|
|
|
+ })
|
|
|
+ this.staticData.total=totalCount
|
|
|
+ })
|
|
|
+
|
|
|
+ },
|
|
|
getOneUnit(val){
|
|
|
- console.log(val)
|
|
|
+ this.staticData.array=[ ]
|
|
|
if(val=='29'||val=='30'){ //表格及撒点
|
|
|
this.$axios.post(this.$api.water.baseGgpFacilityList,{
|
|
|
"facilityType": [val ]
|
|
|
@@ -1218,32 +1296,11 @@ export default {
|
|
|
}else{
|
|
|
this.addMarker(arr, "security-plan", "医疗机构安全隐患清单")
|
|
|
}
|
|
|
- }
|
|
|
-
|
|
|
-
|
|
|
+ }
|
|
|
});
|
|
|
|
|
|
}else if(val=='23'||val=='26'||val=='28'){ //统计
|
|
|
- this.$axios.get(
|
|
|
- this.$api.water.baseGgpFacilityStatistic +
|
|
|
- "?" +
|
|
|
- this.$qs.stringify({
|
|
|
- facilityType: val,
|
|
|
- })
|
|
|
- ).then(res=>{
|
|
|
- this.staticData.array=res.data;
|
|
|
- var aa=0
|
|
|
- console.log(res)
|
|
|
- res.data.forEach(function(item){
|
|
|
- console.log(item)
|
|
|
- aa+=Number(item.count)
|
|
|
-
|
|
|
- })
|
|
|
- this.staticData.total=aa
|
|
|
- console.log( this.staticData.total)
|
|
|
-
|
|
|
- })
|
|
|
-
|
|
|
+ this.getStaticData(val)
|
|
|
}
|
|
|
},
|
|
|
beforeDestroy() {
|
|
|
@@ -2244,8 +2301,8 @@ export default {
|
|
|
.contentBox {
|
|
|
.leftBox {
|
|
|
.leftTop {
|
|
|
- height: 30%;
|
|
|
- max-height: 30%;
|
|
|
+ height: 40%;
|
|
|
+ max-height: 40%;
|
|
|
justify-content: center;
|
|
|
align-items: center;
|
|
|
box-sizing: border-box;
|
|
|
@@ -2305,6 +2362,30 @@ export default {
|
|
|
.leftTopContent2 {
|
|
|
color: #fff;
|
|
|
font-size: 0.175rem;
|
|
|
+ .sdqBasicInfo{
|
|
|
+ .basicItem{
|
|
|
+ width:19%; margin: 4px 0; box-sizing: border-box;
|
|
|
+ .nameBox{
|
|
|
+ background-image: url(~@a/img/securityPlan/sdTextBg.png);
|
|
|
+ background-size: contain;
|
|
|
+ width: 100%;
|
|
|
+ display: inline-block
|
|
|
+ }
|
|
|
+ }
|
|
|
+ .basicItem:not(:last-child){
|
|
|
+ margin-right:.07rem
|
|
|
+
|
|
|
+ }
|
|
|
+
|
|
|
+
|
|
|
+
|
|
|
+ }
|
|
|
+ .sdqBasicInfo.sdline2{
|
|
|
+ .basicItem{
|
|
|
+ margin:0 .4rem;
|
|
|
+ }
|
|
|
+
|
|
|
+ }
|
|
|
|
|
|
.el-row {
|
|
|
> div {
|
|
|
@@ -2323,8 +2404,8 @@ export default {
|
|
|
}
|
|
|
|
|
|
.leftCenter {
|
|
|
- height: calc(30% - 0.125rem);
|
|
|
- max-height: calc(30% - 0.125rem);
|
|
|
+ height: 32%;
|
|
|
+ max-height: 32%;
|
|
|
margin-top: 0.125rem;
|
|
|
width: 100%;
|
|
|
justify-content: center;
|
|
|
@@ -2498,6 +2579,23 @@ export default {
|
|
|
.rightTop3 {
|
|
|
height: 30%;
|
|
|
max-height: 30%;
|
|
|
+ position:relative;
|
|
|
+ .return{
|
|
|
+ position: absolute;
|
|
|
+ top:0px;
|
|
|
+ right:0px;
|
|
|
+ .returnText {
|
|
|
+ width: 0.5rem;
|
|
|
+ text-align: center;
|
|
|
+ height: 0.3rem;
|
|
|
+ line-height: 0.3rem;
|
|
|
+ box-shadow: inset 0 0 0.05rem 0.05rem #1b4f90;
|
|
|
+ background: rgba(19, 42, 90, 0.2) !important;
|
|
|
+ color: #fff;
|
|
|
+ float: right;
|
|
|
+ margin-top: 0;
|
|
|
+ }
|
|
|
+ }
|
|
|
|
|
|
.rightTopContent {
|
|
|
width: 100%;
|
|
|
@@ -2554,11 +2652,7 @@ export default {
|
|
|
}
|
|
|
}
|
|
|
}
|
|
|
- .return{
|
|
|
- position: absolute;
|
|
|
- top:20px;
|
|
|
- right:20px;
|
|
|
- }
|
|
|
+
|
|
|
}
|
|
|
.leftTopContent {
|
|
|
color: #ffffff;
|
|
|
@@ -2656,17 +2750,7 @@ export default {
|
|
|
}
|
|
|
}
|
|
|
|
|
|
-.returnText {
|
|
|
- width: 0.5rem;
|
|
|
- text-align: center;
|
|
|
- height: 0.3rem;
|
|
|
- line-height: 0.3rem;
|
|
|
- box-shadow: inset 0 0 0.05rem 0.05rem #1b4f90;
|
|
|
- background: rgba(19, 42, 90, 0.2) !important;
|
|
|
- color: #fff;
|
|
|
- float: right;
|
|
|
- margin-top: 0.1rem;
|
|
|
-}
|
|
|
+
|
|
|
|
|
|
.leftBotContent2 {
|
|
|
height: 23%;
|
ming
