fire-mh/src/views/fire-data-analysis.vue

<template>
    <el-row class="contentBox">
        <transition name="el-fade-in-linear">
            <el-col class="leftBox" v-show="stroes.$state.leftBtn">
                <div class="leftTop2">
                    <h4>火灾信息统计</h4>
                    <div class="threeBox">
                        <div class="flexBoxE11">
                            <el-row class="hzxxtj">
                                <el-col :span="8" >
                                    财产损失：<Strong>{{ hzxxtj.a1 }}</Strong> 万
                                </el-col>
                                <el-col :span="8">
                                    火灾总数：<Strong>{{ hzxxtj.a2 }}</Strong> 起
                                </el-col>
                                <el-col :span="8">
                                    重大火灾：<Strong>{{ hzxxtj.a3 }}</Strong> 起
                                </el-col>
                                <el-col :span="8">
                                    亡人数：<Strong>{{ hzxxtj.a4 }}</Strong> 人
                                </el-col>
                                <el-col :span="8">
                                    过火面积：<Strong>{{ hzxxtj.a5 }}</Strong>㎡
                                </el-col>
                                <el-col :span="8">
                                    较大火灾：<Strong>{{ hzxxtj.a6 }}</Strong> 起
                                </el-col>
                                <el-col :span="8">
                                    伤人数：<Strong>{{ hzxxtj.a7 }}</Strong>人
                                </el-col>
                                <el-col :span="8">
                                   特大火灾：<Strong>{{ hzxxtj.a8 }}</Strong>起
                                </el-col>
                                <el-col :span="8">
                                    轻微火灾：<Strong>{{ hzxxtj.a9 }}</Strong> 起
                                </el-col>
                            </el-row>
                        </div>
                    </div>
                </div>
                <div class="leftBot">
                    <div style="display: flex">
                        <h4>火灾原因占比</h4>
                        <div
                            style="
                                display: flex;
                                border-bottom: 0.0125rem solid
                                    rgba(115, 251, 253, 0.5);
                            "
                        >
                            <el-button
                                size="mini"
                                @click="vsClick('isVsFirePie')"
                                class="btnClick"
                            >
                                {{ isVsFirePie ? "返回" : "对比" }}
                            </el-button>
                        </div>
                    </div>
                    <el-row class="threeBox">
                        <div
                            class="flexBoxE"
                            :style="{
                                'padding-top': isVsFirePie ? '0.02rem' : 0,
                            }"
                        >
                            <el-form
                                v-show="isVsFirePie"
                                :inline="true"
                                size="mini"
                                :model="fireCauseRatioObj"
                            >
                                <el-form-item label="街道：">
                                    <el-select
                                        @change="getFireCause(1)"
                                        v-model="fireCauseRatioObj.address"
                                        placeholder="选择街道"
                                        filterable
                                        clearable
                                    >
                                        <el-option
                                            :label="item"
                                            :value="item"
                                            v-for="item in fireAddressList"
                                            :key="item"
                                        ></el-option>
                                    </el-select>
                                </el-form-item>
                            </el-form>
                            <!-- 饼图 -->
                            <fire-pie
                                ref="firePie1"
                                :dataMap="fireCauseRatioList"
                                :isVs="isVsFirePie"
                                :radius="isVsFirePie ? 60 : 60"
                            ></fire-pie>
                        </div>
                        <div class="line" v-show="isVsFirePie"></div>
                        <div class="flexBoxE" v-show="isVsFirePie">
                            <el-form
                                v-show="isVsFirePie"
                                :inline="true"
                                size="mini"
                                :model="fireCauseRatioObj"
                            >
                                <el-form-item label="街道：">
                                    <el-select
                                        @change="getFireCause(2)"
                                        v-model="fireCauseRatioObj.address2"
                                        placeholder="选择街道"
                                        filterable
                                        clearable
                                    >
                                        <el-option
                                            :label="item"
                                            :value="item"
                                            v-for="item in fireAddressList"
                                            :key="item"
                                        ></el-option>
                                    </el-select>
                                </el-form-item>
                            </el-form>
                            <fire-pie
                                style="flex: 1"
                                ref="firePie2"
                                :dataMap="fireCauseRatioList2"
                                :isVs="isVsFirePie"
                                :radius="isVsFirePie ? 80 : 80"
                            ></fire-pie>
                        </div>
                        <!-- <div class="VS" @click="vsClick('isVsFirePie')" :style="{ 'font-size': isVsFirePie ? '.15rem' : '.15rem' }">
                            {{ isVsFirePie ? "返回" : "对比" }}
                        </div> -->
                    </el-row>
                </div>
                <div class="leftTop">
                    <div style="display: flex">
                        <h4>火灾趋势图</h4>

                        <div
                            style="
                                display: flex;
                                border-bottom: 0.0125rem solid
                                    rgba(115, 251, 253, 0.5);
                            "
                        >
                            <el-button
                                size="mini"
                                @click="searchTime(1)"
                                :class="{ btnClick: timeArea === 1 }"
                                >近一年</el-button
                            >
                            <el-button
                                size="mini"
                                @click="searchTime(3)"
                                :class="{ btnClick: timeArea === 3 }"
                                >近三年</el-button
                            >
                            <el-button
                                size="mini"
                                @click="searchTime(5)"
                                :class="{ btnClick: timeArea === 5 }"
                                >近五年</el-button
                            >
                        </div>
                    </div>

                    <div class="leftTopContent">
                        <div class="selectBar">
                            <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-item label="">
                                    <el-select
                                        @change="getTrend()"
                                        v-model="barForm.fireType2"
                                        placeholder="起火场所"
                                        filterable
                                        clearable
                                    >
                                        <el-option
                                            :value="item"
                                            v-for="(item, ind) in fireTypeList2"
                                            :key="ind"
                                        ></el-option>
                                    </el-select>
                                </el-form-item>
                            </el-form>
                        </div>
                        <el-row class="fireBar">
                            <!-- 折线图 -->
                            <category-line
                                ref="categoryLine"
                                :dataMap="timeData"
                            ></category-line>
                        </el-row>
                    </div>
                </div>
               
            </el-col>
        </transition>
        <transition name="el-fade-in-linear">
            <el-col class="centerBox" style="width: 100%">
                <div
                    :class="
                        stroes.$state.leftBtn ? 'leftBtn btnW' : 'leftBtn0 btnW'
                    "
                    @click="stores.leftBtnClick()"
                >
                    <img src="@/assets/img/svg/left.svg" alt="" class="img" />
                </div>
                <el-col class="centerContent" id="mapF"></el-col>

                <div
                    :class="
                        stroes.$state.rightBtn
                            ? 'rightBtn btnW'
                            : 'rightBtn0 btnW'
                    "
                    @click="stores.rightBtnClick()"
                >
                    <img src="@/assets/img/svg/left.svg" alt="" class="img" />
                </div>
                <div class="mapTips_type">
                    <img
                        src="@/assets/img/svg/danweitop.svg"
                        alt=""
                        class="img"
                    />
                    <div class="content">
                        <p>街镇筛选</p>
                        <el-select
                            class="mtb-12"
                            v-model="stroes.$state.streetTown"
                            placeholder="请选择街镇"
                            @change="checkStreetTown"
                        >
                            <el-option
                                v-for="item in stroes.$state.streetTownList"
                                :key="item.value"
                                :label="item.label"
                                :value="item.value"
                            >
                            </el-option>
                        </el-select>

                        <p>类型筛选</p>
                        <div class="selectType">
                             <div @click="checkboxChange(0)" :class="checkedArray.checkedData[0] == 0 ? 'checkTypeSelect' : ''">
                                <img :src="stores.sadianIcon.wrhz" alt="" />
                                <span>亡人火灾</span>
                            </div>
                            <div @click="checkboxChange(2)" :class="checkedArray.checkedData[0] == 2 ? 'checkTypeSelect' : ''">
                                <img :src="stores.sadianIcon.srhz" alt="" />
                                <span>伤人火灾</span>
                            </div>
                            <div @click="checkboxChange(1)" :class="checkedArray.checkedData[0] == 1 ? 'checkTypeSelect' : ''">
                                <img :src="stores.sadianIcon.lshz" alt="" />
                                <span>历史火灾</span>
                            </div>
                        </div>
                    </div>
                </div>
            </el-col>
        </transition>
        <transition name="el-fade-in-linear">
            <el-col class="rightBox" v-show="stroes.$state.rightBtn">
                <el-col class="rightTop">
                    <!-- <h4>火灾情况分析</h4> -->
                    <div style="display: flex">
                        <h4>典型火灾案例</h4>
                        <div
                            style="
                                display: flex;
                                border-bottom: 0.0125rem solid
                                    rgba(115, 251, 253, 0.5);
                            "
                        >
                            <el-button
                                size="mini"
                                @click="fireCase(1)"
                                :class="{ btnClick: tabsArea == 'qg' }"
                            >
                                全国
                            </el-button>
                            <el-button
                                size="mini"
                                @click="fireCase(2)"
                                :class="{ btnClick: tabsArea == 'bs' }"
                            >
                                本市
                            </el-button>
                            <el-button
                                size="mini"
                                @click="fireCase(3)"
                                :class="{ btnClick: tabsArea == 'bq' }"
                            >
                                本区
                            </el-button>
                        </div>
                    </div>
                        <div class="contentNew" style="height:44vh;overflow-y: scroll;">
                            <p v-for="(item,index) in fireCaseData" :key="index">
                                {{ index + 1}}、{{ item.caseBrief }} <a :href="item.fileUrl" v-if="item.fileUrl" target="_blank" style="color:#73fbfd">查看详情</a>
                            </p>
                            
                        </div>  
                </el-col>
                <el-col class="rightBot">
                    <!-- <h4>详细火灾情况</h4> -->
                    <h4>火灾统计</h4>

                    <div class="rightBotCenter">
                      
                                <pie5
                                :dataMap="pieData"
                            ></pie5>
                       
                        <el-table
                            ref="seTable"
                            :key="windowWidth"
                            :data="tableData"
                            class="transparentTableRow"
                            height="100%"
                            :cell-class-name="tableRowClassName"
                            style="display:none"
                        >
                            <!-- <el-table-column
                                show-overflow-tooltip
                                min-width="20"
                                v-for="item in headerData"
                                :key="item.prop"
                                :prop="item.prop"
                                align="center"
                                :label="item.name"
                            >
                                <template
                                    v-if="item.prop === 'address'"
                                    #default="scope"
                                >
                                    <el-popover
                                        trigger="click"
                                        placement="left"
                                    >
                                        <template #default>
                                            <div class="tableTooltip">
                                                <div class="tableTitle">
                                                    <div>详细火灾情况</div>
                                                </div>
                                                <el-row class="tableContent">
                                                    <el-col :span="24"
                                                        >火灾地址：{{
                                                            scope.row.address
                                                        }}</el-col
                                                    >
                                                    <el-col :span="12"
                                                        >过火面积：{{
                                                            scope.row
                                                                .burnedArea
                                                        }}（m²）</el-col
                                                    >
                                                    <el-col :span="12"
                                                        >财产损失：{{
                                                            scope.row
                                                                .propertyLoss
                                                        }}（万）</el-col
                                                    >
                                                    <el-col :span="12"
                                                        >死亡人数：{{
                                                            scope.row.deathToll
                                                        }}（人）</el-col
                                                    >
                                                    <el-col :span="12"
                                                        >受伤人数：{{
                                                            scope.row.nonFatal
                                                        }}（人）</el-col
                                                    >
                                                    <el-col
                                                        :span="12"
                                                        v-if="scope.row.nature"
                                                        >场所性质：{{
                                                            scope.row.nature
                                                        }}</el-col
                                                    >
                                                    <el-col
                                                        :span="24"
                                                        v-if="
                                                            scope.row.fireCause
                                                        "
                                                        >火灾原因：{{
                                                            scope.row.fireCause
                                                        }}</el-col
                                                    >
                                                    <el-col :span="24"
                                                        >起火物：{{
                                                            scope.row
                                                                .fireGoodsOne
                                                        }}</el-col
                                                    >
                                                </el-row>
                                            </div>
                                        </template>
                                        <template #reference>
                                            <div>
                                                {{ scope.row.address }}
                                            </div>
                                        </template>
                                    </el-popover>
                                </template>
                            </el-table-column> -->
                        </el-table>
                        
                    </div>
                </el-col>
            </el-col>
        </transition>
    </el-row>
</template>

<script>
import pie5 from "@c/pie/index5";
import linstener from "@c/mixins/linstener";
import categoryLine from "@c/category-line";
import firePie from "@c/fire-pie";
import scatter from "@c/scatter";
import map from "@c/mixins/map-data1";
// import map from "@c/mixins/map-gaode-public";
export default {
    components: { categoryLine, firePie, scatter, pie5 },
    mixins: [linstener, map, ],
    data() {
        return {
            hzxxtj:{
                a1:100,
                a2:200,
                a3:100,
                a4:100,
                a5:100,
                a6:100,
                a7:100,
                a8:100,
                a9:100,

            },//火灾信息统计
            fireCaseData:[],//火灾案例
            pieData:[
                {value:2,name:"亡人火灾数"},
                {value:138,name:"本月全区火灾总数"},
                {value:1047,name:"本年度火灾总数"},
                {value:502,name:"平均过火面积"},
            ],//饼图数据
            tabsArea:"qg",//国、市、区
            stores: this.$useStore(),
            checkedArray: {
                checkedData: [1],
                checkedList: [
                    { value: 0, label: "亡人火灾" },
                    { value: 1, label: "历史火灾" },
                    { value: 2, label: "伤人火灾" },
                ],
            }, //类型筛选

            box: null,
            tableData: [
                // {"address":"x街道45号","burnedArea":"2","propertyLoss":"5","deathToll":"0","nonFatal":"1","disasterHome":"2","nature":"居民","fireCause":"家电","fireGoodsOne":"电视机"},
                // {"address":"x街道45号","burnedArea":"2","propertyLoss":"5","deathToll":"0","nonFatal":"1","disasterHome":"2","nature":"居民","fireCause":"家电","fireGoodsOne":"电视机"},
                // {"address":"x街道45号","burnedArea":"2","propertyLoss":"5","deathToll":"0","nonFatal":"1","disasterHome":"2","nature":"居民","fireCause":"家电","fireGoodsOne":"电视机"},
                // {"address":"x街道45号","burnedArea":"2","propertyLoss":"5","deathToll":"0","nonFatal":"1","disasterHome":"2","nature":"居民","fireCause":"家电","fireGoodsOne":"电视机"},
                // {"address":"x街道45号","burnedArea":"2","propertyLoss":"5","deathToll":"0","nonFatal":"1","disasterHome":"2","nature":"居民","fireCause":"家电","fireGoodsOne":"电视机"},
                // {"address":"x街道45号","burnedArea":"2","propertyLoss":"5","deathToll":"0","nonFatal":"1","disasterHome":"2","nature":"居民","fireCause":"家电","fireGoodsOne":"电视机"},
                // {"address":"x街道45号","burnedArea":"2","propertyLoss":"5","deathToll":"0","nonFatal":"1","disasterHome":"2","nature":"居民","fireCause":"家电","fireGoodsOne":"电视机"},
                // {"address":"x街道45号","burnedArea":"2","propertyLoss":"5","deathToll":"0","nonFatal":"1","disasterHome":"2","nature":"居民","fireCause":"家电","fireGoodsOne":"电视机"},
            ],
            headerData: [
                { prop: "address", name: "火灾地址" },
                { prop: "burnedArea", name: "过火面积" },
                { prop: "propertyLoss", name: "财产损失" },
                { prop: "deathToll", name: "死亡人数" },
                { prop: "nonFatal", name: "受伤人数" },
                // { prop: "disasterHome", name: "受灾户" },
                // { prop: "nature", name: "场所性质" },
                // { prop: "fireCause", name: "火灾原因" },
                { prop: "fireGoodsOne", name: "起火物" },
            ],
            // headerData: [
            //   { prop: "address", name: "火灾地址" },
            //   { prop: "burnedArea", name: "过火面积（m²）" },
            //   { prop: "propertyLoss", name: "财产损失（万元）" },
            //   { prop: "deathToll", name: "死亡人数（人）" },
            //   { prop: "nonFatal", name: "受伤人数（人）" },
            //   { prop: "disasterHome", name: "受灾户（户）" },
            //   { prop: "nature", name: "场所性质" },
            //   { prop: "fireCause", name: "火灾原因" },
            //   { prop: "fireGoodsOne", name: "起火物" },
            // ],

            fireAddressList: [],
            fireTypeList: [],
            fireTypeList2: [
                    "厂房",
                    "交通工具",
                    "住宅",
                    "垃圾及废弃物",
                    "交通枢纽站",
                    "宿舍",
                    "物资仓储场所",
                    "其他",
            ],//起火场所
            fireCauseRatioList: [],
            fireCauseRatioList2: [],
            fireCauseRatioObj: {
                address: "",
                address2: "",
            },
            tabObj: {
                address: "",
                address2: "",
            },
            timeData: [],
            fireBubbleList: [],
            barForm: {
                fireType: "",
                fireType2: "",
                address: "",
            },
            timeArea: 1,
            isScroll: true,
        };
    },
    created() {
        this.getData();
    },
    watch: {
        isVsFirePie(val) {
            if (!val) {
                this.fireCauseRatioObj.address = "";
                this.getFireCause(1);
            }
        },
    },
    mounted() {
        // // 通过$refs获取dom元素
        // this.box = this.$refs.seTable.$el.childNodes[2];
        // // 监听这个dom的scroll事件
        // this.box.addEventListener("scroll", (e) => {
        //     const scrollTop = e.target.scrollTop; // 已滚动到可视区域上方的高度
        //     const clientHeight = e.target.clientHeight; // 可视区域高度
        //     const scrollHeight = e.target.scrollHeight; // 滚动内容的总高度
        //     if (scrollHeight - (scrollTop + clientHeight) <= 20) {
        //         // 不足10像素触发加载更多
        //         if (this.isScroll) {
        //             this.isScroll = false;
        //             ++this.current;
        //             this.getFireStatis();
        //             console.log(
        //                 scrollHeight - (scrollTop + clientHeight) <= 20
        //             );
        //         }
        //     }
        // });
        window.addEventListener(
            "resize",
            () =>
                this.resizeTimeActions([
                    this.$refs.categoryLine,
                    this.$refs.firePie1,
                    this.$refs.firePie2,
                    this.$refs.scatter,
                ]),
            true
        );
        this.initMap();
    },
    methods: {
        tableRowClassName({ row, column }) {
            if (column.property === "deathToll" && row.deathToll > 0) {
                return "death";
            }
        },
        async getData() {
             this.fireCase(1)
            let res = await this.$axios.get(
                this.$api.fire.fireType + "?" + this.$qs.stringify({})
            );

            if (res.data.length > 0) {
                this.fireTypeList = res.data;
            }
             for(let i =0;i<this.stores.mhjz.length;i++){
                        if(this.stores.mhjz[i].streetTown == "全区"){
                                this.fireAddressList.push("街道")
                        }else{
                                this.fireAddressList.push(this.stores.mhjz[i].streetTown)

                        }
                }
        //  let res1 = await this.$axios.get(
        //         this.$api.fire.fireAddress + "?" + this.$qs.stringify({})
        //     );
        //     if (res1.data.length > 0) {
        //         this.fireAddressList = res1.data;
        //     }
            this.getTrend();
            this.getFireCause();
            // this.getFireStatis();
            this.policeInfo();
            this.sadianSelect(1)
           
            // this.getPage();
        },
         /**
           * 撒点类型选择
           */
          checkboxChange(id){
                  this.checkedArray.checkedData[0] = id
                  this.sadianSelect(id)
          },
         /**
         * 街镇切换
         */
        checkStreetTown(){
                let data = undefined;
                for (let i = 0; i < this.stroes.$state.mhjz.length; i++) {
                        if (
                        this.stroes.$state.streetTown ==
                        this.stroes.$state.mhjz[i].streetTown
                        ) {
                        data = this.stroes.$state.mhjz[i];
                        break;
                        }
                }
                if (!this.stroes.$state.streetTown) {
                        data = this.stroes.$state.mhjz[0];
                }
                if (this.stroes.$state.mapBool == 2) {
                        this.streetTownSwitch(data);
                }
                this.sadianSelect(this.checkedArray.checkedData[0]);
        },
        /* 火灾情况分析 气泡图*/
        async policeInfo() {
            await this.$axios
                .get(
                    this.$api.fire.fireBubble +
                        "?" +
                        this.$qs.stringify({
                            unitId: "",
                            fireType: "",
                            startTime:
                                dayjs()
                                    .subtract(90, "day")
                                    .format("YYYY-MM-DD HH:mm:ss")
                                    .slice(0, 10) + " 00:00:00",
                            endTime:
                                dayjs()
                                    .subtract(0, "day")
                                    .format("YYYY-MM-DD HH:mm:ss")
                                    .slice(0, 10) + " 00:00:00",
                            // startTime: this.stores.$state.timeList[0] || "",
                            // endTime: this.stores.$state.timeList[1] || "",
                        })
                )
                .then((res) => {
                    this.fireBubbleList = res.data;
                });
        },
        /* 火灾趋势图 折线图 */
        async getTrend() {
            await this.$axios
                .get(
                    this.$api.fire.trendQuery +
                        "?" +
                        this.$qs.stringify({
                            address: this.barForm.address,
                            fireType: this.barForm.fireType,
                            fireType2: this.barForm.fireType2,
                            startTime:
                                new Date().getFullYear() -
                                this.timeArea +
                                "-" +
                                (new Date().getMonth() + 1) +
                                "-" +
                                new Date().getDate() +
                                " 00:00:00",
                            endTime:
                                new Date().getFullYear() +
                                "-" +
                                (new Date().getMonth() + 1) +
                                "-" +
                                new Date().getDate() +
                                " 00:00:00",
                        })
                )
                .then((res) => {
                    this.timeData = res.data;
                });
        },
        /* 火灾原因占比 饼图 */
        async getFireCause(val) {
            await this.$axios
                .get(
                    this.$api.fire.fireCauseRatio +
                        "?" +
                        this.$qs.stringify({
                            // startTime: this.stores.$state.timeList[0] || "",
                            // endTime: this.stores.$state.timeList[1] || "",
                            address:
                                val === 1
                                    ? this.fireCauseRatioObj.address
                                    : val === 2
                                    ? this.fireCauseRatioObj.address2
                                    : "",
                        })
                )
                .then((res) => {
                    let ratioList = res.data.map((val) => {
                        return {
                            name: val.fireType || " ",
                            value: val.radio ? val.radio * 100 : 0,
                            itemStyle: {
                                opacity: 0.9,
                            },
                        };
                    });
                    if (val === 1) {
                        this.fireCauseRatioList = ratioList;
                    } else if (val === 2) {
                        this.fireCauseRatioList2 = ratioList;
                    } else {
                        this.fireCauseRatioList = ratioList;
                        this.fireCauseRatioList2 = ratioList;
                    }
                });
        },
        // 详细火灾情况，表格val
        async getFireStatis() {
            await this.$axios
                .get(
                    this.$api.fire.fireStatistics +
                        "?" +
                        this.$qs.stringify({
                            current: this.current,
                            size: 300,
                            startTime:
                                dayjs()
                                    .subtract(90, "day")
                                    .format("YYYY-MM-DD HH:mm:ss")
                                    .slice(0, 10) + " 00:00:00",
                            // startTime: "2022-10-01 00:00:00",
                            endTime:
                                dayjs()
                                    .format("YYYY-MM-DD HH:mm:ss")
                                    .slice(0, 10) + " 23:59:59",
                        })
                )
                .then((res) => {
                    this.isScroll = true;
                    this.tableData.push(
                        ...res.data.records.map((val) => {
                            val.propertyLoss =
                                (val.propertyLoss &&
                                    val.propertyLoss / 10000) ||
                                val.propertyLoss;
                            val.deathToll = Number(val.deathToll).toFixed(0);
                            val.nonFatal = Number(val.nonFatal).toFixed(0);
                            return val;
                        })
                    );
                });
        },
         /* 历史警情 */
          async historicalWarning() {
            let monthDay = dayjs()
                .subtract(30, "day")
                .format("YYYY-MM-DD HH:mm:ss")
            let today = dayjs()
                .subtract(0, "day")
                .format("YYYY-MM-DD HH:mm:ss")
            return  await this.$axios.get(
                this.$api.jqzhcz.page2 +
                    "?" +
                    this.$qs.stringify({
                        streetTown: this.stroes.$state.streetTown, //街镇
                        current: 1,
                        size: 1000,
                        // startTime: monthDay,
                        startTime: "2022-08-31 00:00:00",
                        endTime: today,
                    })
            )
          },
        
        searchTime(val) {
            if (val === this.timeArea) return;
            this.timeArea = val;
            this.getTrend();
        },

        /**
         * @街镇复选事件
         */
        // checkboxChange(value) {
        //     this.checkedArray.checkedData =
        //         this.checkedArray.checkedData.includes(value) ? [value] : [];
        //     //1.高德 2.测绘院
        //     if (this.stroes.$state.mapBool == 1) {
        //         if (this.checkedArray.checkedData.length < 1) {
        //         } else {
        //             this.mapCluster(value);
        //         }
        //     } else if (this.stroes.$state.mapBool == 2) {
        //         if (this.checkedArray.checkedData.length < 1) {
        //             this.addMarker([], "self-management");
        //         } else {
        //             this.sadian(value);
        //         }
        //     }
        // },

          /**
         * 撒点测绘院、高德
         */
        sadianSelect(id) {
                console.log(id)
                       //1.高德 2.测绘院
                if (this.stroes.$state.mapBool == 1) {
                        if(id == 1){
                                this.historicalWarning().then(res=>{
                                        let data = res.data.records
                                        let arr = []
                                        // console.log(this.stroes.$state.streetTown)
                                        for(let i =0;i<data.length;i++){
                                                if(data[i].ajlxdm == 1 && data[i].gisX && data[i].gisY  ){
                                                        arr.push(data[i])
                                                }
                                        }
                                         this.initMarkers(arr,"fire-data-analysis",this.checkedArray.checkedList[id].label)
                                })
                        }else{
                                this.initMarkers([],"fire-data-analysis",this.checkedArray.checkedList[id].label)
                        }
                } else if (this.stroes.$state.mapBool == 2) {
                        if(id == 1){
                                this.historicalWarning().then(res=>{
                                        let data = res.data.records
                                        let arr = []
                                        for(let i =0;i<data.length;i++){
                                                if(data[i].ajlxdm == 1 && data[i].gisX && data[i].gisY  ){
                                                        arr.push(data[i])
                                                }
                                        }
                                         this.sadian(arr,"fire-data-analysis",this.checkedArray.checkedList[id].label)
                                })
                        }else{
                                this.sadian([],"fire-data-analysis",this.checkedArray.checkedList[id].label)
                        }
                }
                
        },
        /**
         * 撒点
         */
        sadian(data,pageType,type){
                if(data.length>0){
                        this.heatMap(data,pageType,type);
                }else{
                        this.heatMap([],pageType,type);
                }
        },
        /**
         * 典型火灾案例
         */
        async fireCase(id){
            let regionType = id
            if(id == 1){
                this.tabsArea = "qg"
            }
            if(id == 2){
                this.tabsArea = "bs"
            }
            if(id == 3){
                this.tabsArea = "bq"
            }
            let res = await await this.$axios.get(this.$api.fire.infoList +
            "?" +
            this.$qs.stringify({
                regionType:regionType
            }))
            this.fireCaseData = res.data
            console.log(11,res)

        }
    },
};
</script>

<style lang="scss" scoped>
@import "@/assets/scss/color.scss";
.contentBox {
    .leftBox {
        .leftTop,.leftTop2 {
            height: 50%;
            max-height: 33%;
            justify-content: center;
            align-items: center;
            box-sizing: border-box;
            width: 100%;
            margin-top: 0.125rem;
            .leftTopContent {
                height: calc(100% - 0.4375rem);
                vertical-align: top;
                .el-button {
                    vertical-align: top;
                    padding: 0;
                }
                .selectBar {
                    width: 100%;
                    display: flex;
                    justify-content: space-between;
                    height: 0.675rem;
                    line-height: 0.675rem;
                    .el-row {
                        display: flex;
                    }
                }
                .fireBar {
                    width: 100%;
                    height: calc(100% - 0.675rem);
                }
            }
            .threeBox {
                & >.flexBoxE11{
                color:#fff;
                & > .el-row {
                    width: 100%;
                    font-size: 0.175rem;
                    align-items: center;
                    margin-top:0.12rem;
                    .el-col {

                        margin-top: 0.45rem;
                        span {
                            margin-right: 0.125rem;
                        }
                        .el-progress {
                            flex: 1;
                            height: 0.3rem;
                        }
                    }
                }
            }
        }
        }
        .leftBot {
            height: calc(50% - 0.125rem);
            max-height: calc(33% - 0.125rem);
            width: 100%;
            .threeBox {
                width: 100%;
                height: calc(100% - 0.4375rem);
                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%;
                    padding-top:0.02rem;
                    box-sizing: border-box;
                    .el-form {
                        text-align: center;
                        .el-form-item {
                            margin: 0;
                        }
                    }
                }
                .line {
                    flex: none;
                    width: 1px;
                    height: 3rem;
                    opacity: 1;
                    background: linear-gradient(
                        rgba(255, 255, 255, 0),
                        #30cfff,
                        rgba(255, 255, 255, 0)
                    );
                }
                // 对比按钮
                .VS {
                    position: absolute;
                    right: 0;
                    top: 0.2rem;
                    padding: 0.0625rem 0.2rem;
                    box-sizing: border-box;
                    text-align: center;
                    box-shadow: inset 0 0 0.05rem 0.05rem rgba(27, 79, 144, 1);
                    background: rgba(#132a5a, 0.8) !important;
                    color: #fff;
                    cursor: pointer;
                    -webkit-touch-callout: none;
                    -webkit-user-select: none;
                    -moz-user-select: none;
                    -ms-user-select: none;
                    user-select: none;
                    border-radius: 0.0625rem;
                }
            }
        }
        

    }
    .rightBox {
        .rightTop {
            height: 55%;
            max-height: 55%;
            justify-content: center;
            align-items: center;
            box-sizing: border-box;
            width: 100%;
            .rightTopCenter {
                height: calc(100% - 0.4375rem);
            }
        }
        .rightBot {
            height: calc(45% - 0.125rem);
            max-height: calc(45% - 0.125rem);
            margin-top: 0.125rem;
            width: 100%;
            .rightBotCenter {
                padding: 0.25rem 0 0 0;
                // height: calc(100% - 0.4375rem);
                height: calc(100% - 0.6875rem);
            }
        }
    }
}

    .contentNew{
        font-size: 14px;
        color:#fff;
        margin-top:20px;
        p{
            margin-top:10px;
        }
    }
    


</style>
<style lang="scss"  >
.buttonLine{
         display: inline;
         margin-top:40px;
         .btnClick {
            border-bottom: 2px solid #73fbfd;
        }
        .el-button>span{
            font-size: 16px !important;
        }
    }
</style>