|
|
@@ -1,21 +1,430 @@
|
|
|
<template>
|
|
|
- <el-row></el-row>
|
|
|
+ <el-row class="contentBox">
|
|
|
+ <transition name="el-fade-in-linear">
|
|
|
+ <el-col class="leftBox" v-show="leftBtn">
|
|
|
+ <el-col class="leftTop">
|
|
|
+ <h4>风险等级对比图</h4>
|
|
|
+ <el-row class="threeBox">
|
|
|
+ <div class="flexBoxE">
|
|
|
+ <pie-three-d ref="pieThreeD" :dataMap="fireCauseRatioList" :distance="200"></pie-three-d>
|
|
|
+ </div>
|
|
|
+ </el-row>
|
|
|
+ </el-col>
|
|
|
+ <el-col class="leftBot">
|
|
|
+ <h4>火灾趋势图</h4>
|
|
|
+ <el-row class="leftBotContent">
|
|
|
+ <el-row class="selectBar">
|
|
|
+ <el-row>
|
|
|
+ <el-button size="mini" @click="searchTime('one')" :class="{ btnClick: timeArea === 'one' }">近一年</el-button>
|
|
|
+ <el-button size="mini" @click="searchTime('three')" :class="{ btnClick: timeArea === 'three' }">近三年</el-button>
|
|
|
+ <el-button size="mini" @click="searchTime('five')" :class="{ btnClick: timeArea === 'five' }">近五年</el-button>
|
|
|
+ </el-row>
|
|
|
+ <el-form :inline="true" size="mini" :model="barForm">
|
|
|
+ <el-form-item label="">
|
|
|
+ <el-select v-model="barForm.address" @change="getTrend()" filterable clearable placeholder="街道" >
|
|
|
+ <el-option :label="item" :value="item" v-for="(item,ind) in fireAddressList" :key="ind"></el-option>
|
|
|
+ </el-select>
|
|
|
+ </el-form-item>
|
|
|
+ <el-form-item label="">
|
|
|
+ <el-select @change="getTrend()" v-model="barForm.fireType" placeholder="火灾类型" filterable clearable >
|
|
|
+ <el-option :value="item" v-for="(item,ind) in fireTypeList" :key="ind" ></el-option>
|
|
|
+ </el-select>
|
|
|
+ </el-form-item>
|
|
|
+ </el-form>
|
|
|
+ </el-row>
|
|
|
+ <el-row class="fireBar">
|
|
|
+ <category-line ref="categoryLine" :dataMap="timeData"></category-line>
|
|
|
+ </el-row>
|
|
|
+ </el-row>
|
|
|
+ </el-col>
|
|
|
+ </el-col>
|
|
|
+ </transition>
|
|
|
+ <transition name="el-fade-in-linear">
|
|
|
+ <el-col class="centerBox" :style="{'max-width':leftBtn && rightBtn ? '8rem' :!leftBtn && !rightBtn ? '100%' : leftBtn || rightBtn ? '16rem' : '8rem'}">
|
|
|
+ <el-row class="leftBtn btnW" @click="leftBtnClick()">
|
|
|
+ <i :class="leftBtn ? 'el-icon-arrow-left' : 'el-icon-arrow-right'"></i>
|
|
|
+ </el-row>
|
|
|
+ <el-row class="centerContent" id="mapF"></el-row>
|
|
|
+ <el-row class="rightBtn btnW" @click="rightBtnClick()">
|
|
|
+ <i :class="rightBtn ? 'el-icon-arrow-right' : 'el-icon-arrow-left'"></i>
|
|
|
+ </el-row>
|
|
|
+ </el-col>
|
|
|
+ </transition>
|
|
|
+ <transition name="el-fade-in-linear">
|
|
|
+ <el-col class="rightBox" v-show="rightBtn">
|
|
|
+ <div class="rightContent">
|
|
|
+ <el-col class="rightTop">
|
|
|
+ <h4>闵行区消防情况</h4>
|
|
|
+ <radar-chart
|
|
|
+ v-if="reportComplaintList.length > 0"
|
|
|
+ :dataMap="reportComplaintList"
|
|
|
+ ref="radarChart"
|
|
|
+ ></radar-chart>
|
|
|
+ </el-col>
|
|
|
+ <el-col class="rightTop">
|
|
|
+ <h4>各街镇单位情况</h4>
|
|
|
+ <category ref="category" :dataMap="timeData"></category>
|
|
|
+ </el-col>
|
|
|
+ <el-col class="rightBot">
|
|
|
+ <h4>挂牌督改情况</h4>
|
|
|
+ <se-table
|
|
|
+ ref="seTable"
|
|
|
+ :dataMap="tableData"
|
|
|
+ :headerData="headerData"
|
|
|
+ :key="windowWidth"
|
|
|
+ ></se-table>
|
|
|
+ </el-col>
|
|
|
+ </div>
|
|
|
+ </el-col>
|
|
|
+ </transition>
|
|
|
+ </el-row>
|
|
|
</template>
|
|
|
|
|
|
<script>
|
|
|
+import linstener from "@c/mixins/linstener";
|
|
|
+import categoryLine from "@c/category-line";
|
|
|
+import category from "@c/category";
|
|
|
+import pieThreeD from "@c/pie-3D";
|
|
|
+import seTable from "@c/se-table";
|
|
|
+import AMap from 'AMap'
|
|
|
+import map from "@c/mixins/map";
|
|
|
+import radarChart from "@c/radar";
|
|
|
export default {
|
|
|
- methods:{
|
|
|
- getdata(){
|
|
|
-
|
|
|
+ components: { categoryLine, pieThreeD, seTable, radarChart, category },
|
|
|
+ mixins: [linstener,map],
|
|
|
+ data() {
|
|
|
+ return {
|
|
|
+ tableData: [],
|
|
|
+ headerData: [
|
|
|
+ { prop: "address", name: "挂牌时间" },
|
|
|
+ { prop: "burnedArea", name: "单位名称" },
|
|
|
+ { prop: "propertyLoss", name: "单位地址" },
|
|
|
+ { prop: "deathToll", name: "预计完成" },
|
|
|
+ { prop: "nonFatal", name: "整改方案" },
|
|
|
+ { prop: "disasterHome", name: "当前处理情况" },
|
|
|
+ ],
|
|
|
+ fireAddressList: [],
|
|
|
+ fireTypeList: [],
|
|
|
+ reportComplaintList: [
|
|
|
+ {name: "查封情况",value: 34},
|
|
|
+ {name: "整改情况",value: 55},
|
|
|
+ {name: "消防隐患",value: 56},
|
|
|
+ {name: "设备设施",value: 58},
|
|
|
+ {name: "处罚情况",value: 12},
|
|
|
+ {name: "检查数量",value: 86},
|
|
|
+ {name: "接警处",value: 78},
|
|
|
+ {name: "出文情况",value: 41},
|
|
|
+ ],
|
|
|
+ fireCauseRatioList: [
|
|
|
+ {name: "挂牌督办",value: 34,itemStyle: {opacity: 0.9,}},
|
|
|
+ {name: "存在隐患",value: 22,itemStyle: {opacity: 0.9,}},
|
|
|
+ {name: "加强管理",value: 12,itemStyle: {opacity: 0.9,}},
|
|
|
+ {name: "相对安全",value: 32,itemStyle: {opacity: 0.9,}},
|
|
|
+ ],
|
|
|
+ timeData: [],
|
|
|
+ barForm: {
|
|
|
+ fireType: "",
|
|
|
+ address: "",
|
|
|
+ },
|
|
|
+ timeArea: 'one',
|
|
|
+ };
|
|
|
+ },
|
|
|
+ created() {
|
|
|
+ this.getData();
|
|
|
+ },
|
|
|
+ watch:{
|
|
|
+
|
|
|
+ },
|
|
|
+ mounted() {
|
|
|
+ window.addEventListener(
|
|
|
+ "resize",
|
|
|
+ () =>
|
|
|
+ this.resizeTimeActions([
|
|
|
+ this.$refs.categoryLine,
|
|
|
+ this.$refs.category,
|
|
|
+ this.$refs.radarChart,
|
|
|
+ this.$refs.pieThreeD,
|
|
|
+ ]),
|
|
|
+ true
|
|
|
+ );
|
|
|
+ this.initMap()
|
|
|
+ },
|
|
|
+ methods: {
|
|
|
+ // 添加标点
|
|
|
+ addMarkerInfo(position, content, value) {
|
|
|
+ // this.map.getIsOpen();
|
|
|
+ this.map.clearInfoWindow();
|
|
|
+ var infoWindow = new AMap.InfoWindow({
|
|
|
+ isCustom: true, //使用自定义窗体
|
|
|
+ closeWhenClickMap: true,
|
|
|
+ content: content || `
|
|
|
+ <div class="tableTooltip mapTab">
|
|
|
+ <div class="tableTitle">
|
|
|
+ <div>${'单位及执法情况'}</div>
|
|
|
+ </div>
|
|
|
+ <el-row class="tableContent">
|
|
|
+ <div>单位名称：${value.callingUp}</div>
|
|
|
+ <div>单位地址：${'XX路135弄'}</div>
|
|
|
+ <div>法人：${'张三'}</div>
|
|
|
+ <div>管理人：${'李四'}</div>
|
|
|
+ <div>历史检查次数：<a>${'6次'}</a></div>
|
|
|
+ <div class="divTitle">行政许可记录</div>
|
|
|
+ <div>审核时间：${'2021-06-26'}</div>
|
|
|
+ <div>验收时间：${'2021-06-26'}</div>
|
|
|
+ <div>安检时间：${'2021-06-26'}</div>
|
|
|
+ <div>历史隐患数：${'2处'}</div>
|
|
|
+ <div class="divTitle">历史处罚情况</div>
|
|
|
+ <div>历史火灾数：${'2'}</div>
|
|
|
+ <div>单位自主管理情况：<a>点击查看</a></div>
|
|
|
+ </el-row>
|
|
|
+ </div>`,
|
|
|
+ offset: new AMap.Pixel(16, -30)
|
|
|
+ });
|
|
|
+ infoWindow.open(this.map, position);
|
|
|
+ },
|
|
|
+ async getData() {
|
|
|
+ let res = await this.$axios.all([
|
|
|
+ this.$axios.get(this.$api.fire.fireType),
|
|
|
+ this.$axios.get(this.$api.fire.fireAddress),
|
|
|
+ ]);
|
|
|
+ if (res[0]) this.fireTypeList = res[0].data;
|
|
|
+ if (res[1]) this.fireAddressList = res[1].data;
|
|
|
+ this.getTrend();
|
|
|
+ // this.getFireCause();
|
|
|
+ this.getFireStatis();
|
|
|
+ // this.getPage();
|
|
|
+ },
|
|
|
+ // 火灾趋势图 柱状图
|
|
|
+ async getTrend() {
|
|
|
+ let res = await this.$axios.get(
|
|
|
+ this.$api.fire.trendQuery +
|
|
|
+ "?" +
|
|
|
+ this.$qs.stringify({
|
|
|
+ year: new Date().getFullYear(),
|
|
|
+ address: this.barForm.address,
|
|
|
+ fireType: this.barForm.fireType,
|
|
|
+ startTime: this.$store.state.timeList[0] || "",
|
|
|
+ endTime: this.$store.state.timeList[1] || "",
|
|
|
+ })
|
|
|
+ );
|
|
|
+ if (res) this.timeData = res.data;
|
|
|
+ },
|
|
|
+ // 占比图 饼图
|
|
|
+ async getFireCause() {
|
|
|
+ let res = await this.$axios.get(
|
|
|
+ this.$api.fire.fireCauseRatio +
|
|
|
+ "?" +
|
|
|
+ this.$qs.stringify({
|
|
|
+ startTime: this.$store.state.timeList[0] || "",
|
|
|
+ endTime: this.$store.state.timeList[1] || "",
|
|
|
+ })
|
|
|
+ );
|
|
|
+ if (res){
|
|
|
+ this.fireCauseRatioList = res.data.map((val) => {
|
|
|
+ return {
|
|
|
+ name: val.fireType || " ",
|
|
|
+ value: val.radio ? val.radio * 100 : 0,
|
|
|
+ itemStyle: {
|
|
|
+ opacity: 0.9,
|
|
|
+ },
|
|
|
+ };
|
|
|
+ })
|
|
|
+ }
|
|
|
+ },
|
|
|
+ // 详细火灾情况，表格val
|
|
|
+ async getFireStatis() {
|
|
|
+ let res = await this.$axios.get(
|
|
|
+ this.$api.fire.fireStatistics +
|
|
|
+ "?" +
|
|
|
+ this.$qs.stringify({
|
|
|
+ current: 1,
|
|
|
+ size: 1000,
|
|
|
+ startTime: this.$store.state.timeList[0] || "",
|
|
|
+ endTime: this.$store.state.timeList[1] || "",
|
|
|
+ })
|
|
|
+ );
|
|
|
+ if (res){
|
|
|
+ this.tableData = res.data.records;
|
|
|
+ // }
|
|
|
+ }
|
|
|
+ },
|
|
|
+ // 实时警情处理
|
|
|
+ async getPage() {
|
|
|
+ let res = await this.$axios.get(this.$api.house.page +
|
|
|
+ "?" +
|
|
|
+ this.$qs.stringify({
|
|
|
+ current: 1,
|
|
|
+ size: 100,
|
|
|
+ startTime: "2020-03-03 00:00:00",
|
|
|
+ endTime: "2020-03-03 23:59:59",
|
|
|
+ })
|
|
|
+ );
|
|
|
+ if (res) this.tableData = res.data;
|
|
|
+ },
|
|
|
+ searchTime(val){
|
|
|
+ this.timeArea = val
|
|
|
}
|
|
|
- }};
|
|
|
+ },
|
|
|
+};
|
|
|
</script>
|
|
|
|
|
|
<style lang="scss" scoped>
|
|
|
-.el-row {
|
|
|
- width: 100%;
|
|
|
- height: 100%;
|
|
|
- background: url(~@a/img/test/bg6.png) no-repeat;
|
|
|
- background-size: 100% 100%;
|
|
|
+.abc{
|
|
|
+ background: #000;
|
|
|
+}
|
|
|
+.contentBox {
|
|
|
+ font-family: "DS", "DS-B", "DS-BB", "DS-BS";
|
|
|
+ & > .el-col {
|
|
|
+ flex: 1;
|
|
|
+ height: 100%;
|
|
|
+ max-width: 8rem;
|
|
|
+ }
|
|
|
+ .leftBox {
|
|
|
+ display: flex;
|
|
|
+ justify-content: space-between;
|
|
|
+ flex-direction: column;
|
|
|
+ box-sizing: border-box;
|
|
|
+ & > .el-col {
|
|
|
+ flex: 1;
|
|
|
+ background: url(~@a/img/enforce/bg1.png) no-repeat;
|
|
|
+ background-size: 100% 100%;
|
|
|
+ position: relative;
|
|
|
+ max-height: 51%;
|
|
|
+ overflow: hidden;
|
|
|
+ h4 {
|
|
|
+ font-size: 0.2125rem;
|
|
|
+ position: absolute;
|
|
|
+ left: 0;
|
|
|
+ right: 0;
|
|
|
+ top: 0;
|
|
|
+ margin: 0 auto;
|
|
|
+ text-align: center;
|
|
|
+ color: #00ffff;
|
|
|
+ }
|
|
|
+ }
|
|
|
+ .leftTop {
|
|
|
+ padding: 0.375rem 0.45rem 0.1875rem;
|
|
|
+ margin-bottom: 0.125rem;
|
|
|
+ display: flex;
|
|
|
+ justify-content: center;
|
|
|
+ align-items: center;
|
|
|
+ .threeBox {
|
|
|
+ width: 100%;
|
|
|
+ height: 100%;
|
|
|
+ position: relative;
|
|
|
+ justify-content: space-between;
|
|
|
+ align-items: center;
|
|
|
+ flex-wrap: nowrap;
|
|
|
+ & > .flexBoxE {
|
|
|
+ flex: 1;
|
|
|
+ display: flex;
|
|
|
+ flex-direction: column;
|
|
|
+ justify-content: space-between;
|
|
|
+ width: 100%;
|
|
|
+ height: 100%;
|
|
|
+ box-sizing: border-box;
|
|
|
+ .el-form {
|
|
|
+ text-align: center;
|
|
|
+ .el-form-item {
|
|
|
+ margin: 0;
|
|
|
+ }
|
|
|
+ }
|
|
|
+ }
|
|
|
+ .line {
|
|
|
+ flex: none;
|
|
|
+ width: 1px;
|
|
|
+ height: 3.75rem;
|
|
|
+ opacity: 1;
|
|
|
+ background: linear-gradient(
|
|
|
+ rgba(255, 255, 255, 0),
|
|
|
+ #30cfff,
|
|
|
+ rgba(255, 255, 255, 0)
|
|
|
+ );
|
|
|
+ // box-shadow: 0 0 .125rem .0375rem #30cfff;
|
|
|
+ }
|
|
|
+ }
|
|
|
+ }
|
|
|
+ .leftBot {
|
|
|
+ display: flex;
|
|
|
+ justify-content: space-between;
|
|
|
+ align-items: center;
|
|
|
+ padding: 0.375rem 0.45rem 0.1875rem;
|
|
|
+ box-sizing: border-box;
|
|
|
+ width: 100%;
|
|
|
+ overflow: hidden;
|
|
|
+ .leftBotContent {
|
|
|
+ width: 100%;
|
|
|
+ height: 100%;
|
|
|
+ display: block;
|
|
|
+ .selectBar {
|
|
|
+ width: 100%;
|
|
|
+ display: flex;
|
|
|
+ justify-content: space-between;
|
|
|
+ height: 0.875rem;
|
|
|
+ padding: 0.25rem 0;
|
|
|
+ .el-row{
|
|
|
+ display: flex;
|
|
|
+ .el-button {
|
|
|
+ // width: 0.375rem;
|
|
|
+ height: 0.325rem;
|
|
|
+ min-height: auto;
|
|
|
+ padding: 0 .0625rem;
|
|
|
+ margin-right: 0.075rem;
|
|
|
+ margin-left: 0;
|
|
|
+ background: #000707;
|
|
|
+ color: #fff;
|
|
|
+ border: 1px solid;
|
|
|
+ box-sizing: border-box;
|
|
|
+ border-radius: .0375rem;
|
|
|
+ font-size: 0.15rem;
|
|
|
+ border-image: linear-gradient(0deg, #0461c2 0%, #0ecdf1 100%) 1 1;
|
|
|
+ }
|
|
|
+ .btnClick {
|
|
|
+ color: #fccf2a;
|
|
|
+ border-image: linear-gradient(0deg, #ff6800 0%, #fccf2a 100%) 1 1;
|
|
|
+ }
|
|
|
+ }
|
|
|
+ }
|
|
|
+ .fireBar {
|
|
|
+ height: calc(100% - 0.875rem);
|
|
|
+ }
|
|
|
+ }
|
|
|
+ }
|
|
|
+ }
|
|
|
+
|
|
|
+ .rightBox {
|
|
|
+ box-sizing: border-box;
|
|
|
+ .rightContent{
|
|
|
+ display: flex;
|
|
|
+ justify-content: space-between;
|
|
|
+ flex-direction: column;
|
|
|
+ width: 100%;
|
|
|
+ height: 100%;
|
|
|
+ & > .el-col {
|
|
|
+ flex: 1;
|
|
|
+ max-height: 34%;
|
|
|
+ background: url('~@a/img/home/box-bg.png') no-repeat;
|
|
|
+ background-size: 100% 100%;
|
|
|
+ position: relative;
|
|
|
+ padding: .375rem .375rem .25rem;
|
|
|
+ box-sizing: border-box;
|
|
|
+ width: 100%;
|
|
|
+ overflow: hidden;
|
|
|
+ h4 {
|
|
|
+ font-size: 0.2125rem;
|
|
|
+ position: absolute;
|
|
|
+ left: 0;
|
|
|
+ right: 0;
|
|
|
+ top: 0;
|
|
|
+ margin: 0 auto;
|
|
|
+ text-align: center;
|
|
|
+ color: #00ffff;
|
|
|
+ }
|
|
|
+ }
|
|
|
+ .rightTop{
|
|
|
+ margin-bottom: 0.125rem;
|
|
|
+ }
|
|
|
+ }
|
|
|
+ }
|
|
|
}
|
|
|
</style>
|
