fire-mh/src/views/enforcement-dynamic.vue

<template>
    <el-row class="contentBox">
        <transition name="el-fade-in-linear">
            <div class="leftBox" v-show="stroes.$state.leftBtn">
                <div class="left_top">
                    <h4>执法情况</h4>
                    <el-row class="data leftTopContent">
                        <el-row>
                            <el-col
                                :span="12"
                                v-for="(item, index) in SiAeAllList"
                                :key="index"
                            >
                                <div>
                                    <div class="title">
                                        <div>{{ item.checkType }}</div>
                                    </div>
                                    <div class="content">
                                        <span>{{ item.number }}</span>
                                    </div>
                                    <div class="content2">
                                        <span>环比</span>
                                        <span
                                            :class="
                                                item.linkRelativeStatus === 1
                                                    ? 'z'
                                                    : 'j'
                                            "
                                        >
                                            {{
                                                item.linkRelativeStatus === 2
                                                    ? "-"
                                                    : "+"
                                            }}{{
                                                item.linkRelativeRatio.toFixed(
                                                    2
                                                )
                                            }}%
                                        </span>
                                        <span>同比</span>
                                        <span
                                            :class="
                                                item.sameStatus === 1
                                                    ? 'z'
                                                    : 'j'
                                            "
                                        >
                                            {{
                                                item.linkRelativeStatus === 2
                                                    ? "-"
                                                    : "+"
                                            }}{{ item.sameRatio.toFixed(2) }}%
                                        </span>
                                    </div>
                                </div>
                            </el-col>
                        </el-row>
                    </el-row>
                </div>
                <div class="left_middle">
                    <div style="display: flex">
                        <h4 style="font-size: 0.2rem;border:none">人员统计</h4>
                        <div
                            style="
                                display: flex;
                                border-bottom: 0.0125rem solid
                                    rgba(115, 251, 253, 0.5);
                            "
                        >
                            <el-button
                                size="mini"
                                @click="btnC('1')"
                                :class="{ btnClick: check === '1' }"
                                >监督检查</el-button
                            >
                            <el-button
                                size="mini"
                                @click="btnC('2')"
                                :class="{ btnClick: check === '2' }"
                                >行政处罚</el-button
                            >
                        </div>
                    </div>
                    <div class="tableTab">
                        <el-table
                            :data="tableData1"
                            class="transparentTableRow"
                            height="100%"
                            v-if="check == '1'"
                            :empty-text="dataNo"  ref="reportTable" @mouseenter="autoScroll(true)"
                            @mouseleave="autoScroll()" 
                        >
                            <el-table-column
                                v-for="item in tableHeaderList1"
                                show-overflow-tooltip
                                :key="item.prop"
                                :prop="item.prop"
                                align="center"
                                min-width="20"
                                :label="item.name"
                            >
                            </el-table-column>
                        </el-table>
                        <el-table
                            :data="tableData2"
                            class="transparentTableRow"
                            height="100%"
                            v-if="check == '2'"
                            :empty-text="dataNo"  ref="reportTable" @mouseenter="autoScroll(true)"
                            @mouseleave="autoScroll()" 
                        >
                            <el-table-column
                                v-for="item in tableHeaderList2"
                                show-overflow-tooltip
                                :key="item.prop"
                                :prop="item.prop"
                                align="center"
                                min-width="20"
                                :label="item.name"
                            >
                            </el-table-column>
                        </el-table>
                    </div>
                </div>

                <div class="left_bottom">
                    <h4 class="h4 h4Top">
                        行政许可情况
                        <el-tooltip placement="right">
                            <template #content>
                                <br />
                                数据说明
                                <br />
                                <br />默认当月
                                <br />合格率=行政许可安全检查合格证/行政许可安全检查合格证+消防安检申报不同意
                                <br />
                                <br />
                            </template>
                            <img
                                src="@/assets/img/why.png"
                                alt="hah"
                                class="why"
                            />
                        </el-tooltip>
                    </h4>
                    <el-row class="leftBotLeft">
                        <el-row class="text">
                            <el-col>{{(alFsdAllNumber.passRate).toFixed(2) || 0}}%</el-col>
                            <el-col>合格率</el-col>
                        </el-row>
                        <liquid-fill
                            class="liQuIdFill"
                            ref="liQuIdFill"
                            :dataMap="(alFsdAllNumber.passRate).toFixed(2) / 100"
                        ></liquid-fill>
                    </el-row>
                    <el-row class="leftBotRight">
                        <el-col><span>受理数</span>
                        <span>{{alFsdAllNumber.acceptNum || 0}}</span>
                        </el-col>
                        <el-col>
                                <span>检查数</span>
                                <span>{{alFsdAllNumber.checkNum || 0}}</span>
                        </el-col>
                        <el-col>
                            <span>承诺数</span>
                            <span>{{alFsdAllNumber.committedNum || 0}}</span>
                        </el-col>
                        <el-col>
                            <span>非承诺数</span>
                            <span>{{alFsdAllNumber.uncommittedNum || 0}}</span>
                        </el-col>
                    </el-row>
                </div>
            </div>
        </transition>
        <transition name="el-fade-in-linear">
            <el-row class="centerBox" style="width: 100%">
                <el-col
                    :class="
                        stroes.$state.leftBtn ? 'leftBtn btnW' : 'leftBtn0 btnW'
                    "
                    @click="stroes.leftBtnClick()"
                >
                    <img src="@/assets/img/svg/left.svg" alt="" class="img" />
                </el-col>
                <el-col class="centerContent" id="mapF"></el-col>
                <el-col
                    :class="
                        stroes.$state.rightBtn
                            ? 'rightBtn btnW'
                            : 'rightBtn0 btnW'
                    "
                    @click="stroes.rightBtnClick()"
                >
                    <img src="@/assets/img/svg/left.svg" alt="" class="img" />
                </el-col>
                <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="checkType('双随机执法单位')"
                                :class="
                                    checked == '双随机执法单位'
                                        ? 'checkTypeSelect'
                                        : ''
                                "
                            >
                                <img :src="stores.sadianIcon.ssjzf" alt="" />
                                <span>双随机执法单位</span>
                            </div>
                            <div
                                @click="checkType('安全检查单位')"
                                :class="
                                    checked == '安全检查单位'
                                        ? 'checkTypeSelect'
                                        : ''
                                "
                            >
                                <img :src="stores.sadianIcon.aqjcdw" alt="" />
                                <span>安全检查单位</span>
                            </div>
                            <div
                                @click="checkType('举报投诉')"
                                :class="
                                    checked == '举报投诉'
                                        ? 'checkTypeSelect'
                                        : ''
                                "
                            >
                                <img :src="stores.sadianIcon.jbts" alt="" />
                                <span>举报投诉</span>
                            </div>
                            <div
                                @click="checkType('执法记录仪')"
                                :class="
                                    checked == '执法记录仪'
                                        ? 'checkTypeSelect'
                                        : ''
                                "
                            >
                                <img :src="stores.sadianIcon.zfjly" alt="" />
                                <span>执法记录仪</span>
                            </div>
                            <!-- <div
                                @click="checkType('三合一')"
                                :class="
                                    checked == '三合一'
                                        ? 'checkTypeSelect'
                                        : ''
                                "
                            >
                                <img :src="stores.sadianIcon.shy" alt="" />
                                <span>三合一</span>
                            </div>
                            <div
                                @click="checkType('重大火灾隐患')"
                                :class="
                                    checked == '重大火灾隐患'
                                        ? 'checkTypeSelect'
                                        : ''
                                "
                            >
                                <img :src="stores.sadianIcon.lsjq" alt="" />
                                <span>重大火灾隐患</span>
                            </div> -->
                        </div>
                    </div>
                </div>
            </el-row>
        </transition>
        <transition name="el-fade-in-linear">
            <div class="rightBox" v-show="stroes.$state.rightBtn">
                <div class="rightBox1">
                        <h4>本年度重点事项推进情况</h4>
                        <div class="ndtj j1" style="margin-top:20px;" @click="schedule()">
                                <p>专项检查</p>
                                <el-tooltip class="box-item" effect="dark" content="" placement="left"  @click="schedule()">
                                        <template #content> 开始日期：2023-01-01<br>计划完成日期：2023-12-31<br>当前应完成：50%<br>当前实际完成：50%</template>
                                        <el-progress :percentage="50"></el-progress>
                                </el-tooltip>
                                <div class="num">
                                        计划数：1000家&nbsp;&nbsp;&nbsp;&nbsp;完成数：500家
                                </div>
                        </div>
                        <div class="ndtj j2" @click="schedule()">
                                <p>厂房仓库检查</p>
                                <el-tooltip class="box-item" effect="dark" content="" placement="left">
                                        <template #content> 开始日期：2023-01-01<br>计划完成日期：2023-12-31<br>当前应完成：50%<br>当前实际完成：60%</template>
                                        <el-progress :percentage="60"></el-progress>
                                </el-tooltip>
                                <div class="num">
                                        计划数：500家&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;完成数：300家
                                </div>
                        </div>
                        <div class="ndtj j3" @click="schedule()">
                                <p>重点隐患</p>
                                <el-tooltip class="box-item" effect="dark" content="" placement="left">
                                        <template #content> 开始日期：2023-01-01<br>计划完成日期：2023-12-31<br>当前应完成：41.67%<br>当前实际完成：41.67%</template>
                                        <el-progress :percentage="41.67"></el-progress>
                                </el-tooltip>
                                <div class="num">
                                        计划数：300处&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;完成数：125处
                                </div>
                        </div>
                        <div class="ndtj j4" @click="schedule(17)">
                                <p>专职站微站建设</p>
                                <el-tooltip class="box-item" effect="dark" content="" placement="left" >
                                        <template #content> 开始日期：2023-01-01<br>计划完成日期：2023-12-31<br>当前应完成：50%<br>当前实际完成：33.33%</template>
                                        <el-progress :percentage="33.33"></el-progress>
                                </el-tooltip>
                                <div class="num">
                                        计划数：30个&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;完成数：10个
                                </div>
                        </div>
                        
                </div>
                <!-- <div class="rightBox1">
                    <h4>
                        举报投诉情况
                        <el-tooltip placement="right">
                            <template #content>
                                <br />
                                数据说明
                                <br />
                                <br />默认当月 投诉数：累计受理投诉数
                                <br />
                                办结数：累计办结投诉数
                                <br />
                                处理数：累计处理投诉数
                                <br />
                                满意率：
                                <br />
                                <br />
                            </template>
                            <img
                                src="@/assets/img/why.png"
                                alt="hah"
                                class="why"
                            />
                        </el-tooltip>
                    </h4>
                    <el-row>
                        <el-col :span="12" class="num">
                            <img
                                src="@/assets/img/png/消防执法动态_03.png"
                                alt=""
                                class="svgImg"
                            />
                            <div class="data">
                                <p class="p1">
                                    {{
                                        reportStatisticsObj.complaintNumber || 0
                                    }}
                                </p>
                                <p class="p2">投诉数</p>
                            </div>
                        </el-col>
                        <el-col :span="12" class="num">
                            <img
                                src="@/assets/img/png/消防执法动态_05.png"
                                alt=""
                                class="svgImg"
                            />
                            <div class="data">
                                <p class="p1">
                                    {{
                                        reportStatisticsObj.concludeNumber || 0
                                    }}
                                </p>
                                <p class="p2">办结数</p>
                            </div>
                        </el-col>
                        <el-col :span="12" class="num">
                            <img
                                src="@/assets/img/png/消防执法动态_10.png"
                                alt=""
                                class="svgImg"
                            />
                            <div class="data">
                                <p class="p1">
                                    {{ reportStatisticsObj.checkNumber || 0 }}
                                </p>
                                <p class="p2">处理数</p>
                            </div>
                        </el-col>
                        <el-col :span="12" class="num">
                            <img
                                src="@/assets/img/png/消防执法动态_09.png"
                                alt=""
                                class="svgImg"
                            />
                            <div class="data">
                                <p class="p1">
                                    {{
                                        parseInt(
                                            reportStatisticsObj.satisfactionRate *
                                                100
                                        )
                                    }}%
                                </p>
                                <p class="p2">满意率</p>
                            </div>
                        </el-col>
                    </el-row>
                </div> -->
                
                <div class="treeMap">
                    <h4 class="h4Top">投诉类型排名
                         <div class="gp">
                                <span>满意数<span>1001</span></span>
                                <span>不满意数<span>12</span></span>
                        </div>
                    </h4>
                    <category
                        ref="category"
                        v-if="reportComplaintList.x.length > 0"
                        :dataMap="reportComplaintList.y"
                        :xData="reportComplaintList.x"
                        :isSlice="2"
                        color="#33BBFA"
                    ></category>
                </div>
                <div class="rightBox3">
                    <h4>执法记录仪</h4>
                    <el-row class="monitor-list" >
                        <div class="list">
                            <el-select
                                v-model="zfjly1"
                                placeholder="请选择执法记录仪"
                                class="videoSelect"
                            >
                                <el-option
                                    v-for="item in selectVideoData"
                                    :key="item.url"
                                    :label="item.name"
                                    :value="item.url"
                                >
                                </el-option>
                            </el-select>
                            <img src="@/assets/img/home/video.jpg" alt="" v-if="!zfjly1">
                            
                            <iframe
                                class="hlsVideo monitor-height"
                                :src="zfjly1"
                                allowfullscreen="true"
                            ></iframe>
                        </div>
                        <div class="list" :offset="2">
                            <el-select
                                v-model="zfjly2"
                                placeholder="请选择执法记录仪"
                                class="videoSelect"
                            >
                                <el-option
                                    v-for="item in selectVideoData"
                                    :key="item.url"
                                    :label="item.name"
                                    :value="item.url"
                                >
                                </el-option>
                            </el-select>
                             <img src="@/assets/img/home/video.jpg" alt="" v-if="!zfjly2">
                            <iframe
                                class="hlsVideo monitor-height"
                                :src="zfjly2"
                                allowfullscreen="true"
                            ></iframe>
                        </div>
                    </el-row>
                </div>
            </div>
        </transition>
        <el-dialog
                :title="title"
                v-model="open"
                append-to-body
                @close="cancel"
                >
                
                <div>
                <!-- @selection-change="handleSelectionChange" -->
                <el-table
                        :data="dateList"
                        class="transparentTableRow2"
          
        >
          <el-table-column
            label="序号"
            align="center"
            type="index"
            show-overflow-tooltip
            width="100px"
          />
          <el-table-column
            label="单位名称"
            align="center"
            prop="name"
            show-overflow-tooltip
          />
         
          <el-table-column
            label="操作"
            align="center"
            class-name="small-padding fixed-width"
            width="400px"
          >
            <template #default="scope">
              <el-button
                type="text"
                icon="Edit"
                
                link
                >修改</el-button
              >
             </template>
          </el-table-column>
        </el-table>
        <el-pagination
                :page-size="10"
                :pager-count="7"
                layout="prev, pager, next"
                :total="1000"
                />
        <!-- @click="handleUpdate(scope.row, 1)" -->

        <!-- <pagination
          v-show="total > 0"
          :total="total"
          v-model:page="queryParams.page"
          v-model:limit="queryParams.size"
          @pagination="getList"
        /> -->
        </div>
       </el-dialog>

    </el-row>
</template>
<script>
import axios from "axios";
import map from "@c/mixins/map-data1";
// import map from "@c/mixins/map-gaode-public";
import wordCloud from "@c/wordCloud";
import linstener from "@c/mixins/linstener";
import category from "@c/category/index2";
import liquidFill from "@c/liquid-fill";
export default {
    data() {
        return {
            dataNo:"",
            stores: this.$useStore(),
            dateList:[
                {name:1,},
                {name:1,},
                {name:1,},
                {name:1,},
            ],
            title:"sdfsd",
            open:false,
            SiAeAllList: [],
            reportComplaintList: {
                x:[],
                y:[],
            },//投诉排名
            alFsdAllNumber: {
                passRate: 0,
                acceptNum: 0,
                checkNum: 0,
                committedNum: 0,
                uncommittedNum: 0
            },
            reportStatisticsObj: {
                complaintNumber: 0,
                concludeNumber: 0,
                checkNumber: 0,
                satisfactionRate: 0,
            },
            // checkedList: ["双随机执法单位", "安全检查单位", "举报投诉", "执法记录仪"],
            checked: "安全检查单位",
            xfzfdtStatus: false, //地图状态
            xfzfdt: {}, //地图数据

            zfjly1: undefined,
            zfjly2: undefined,

            selectVideoData: [
                //  {
                //       id: "5708ad6382517cd68ea2d2f8cd01bb58",
                //       name: "上海闵行闵行消防站4G布控球",
                //       groupName: "009闵行支队",
                //       gisX: 31.01411,
                //       gisY: 121.39202,
                //       type:"video",
                //       gbid:31.01411,
                //       type:"执法记录仪",
                //       url:"http://10.107.31.215:50080/dispatch-ms/#/conference/single_url?ipc_live=1&key=643e6591-a489-4648-ba35-c15c39c64022&gbids=31000000001320003271&nmediaid=121"
                //   }
            ],
            check: 1,
            tableData1: [
                { a1: "杨剑", a2: 59, a3: 28, a4: 118, a5: 25, a6: 0 },
                { a1: "姚佳磊", a2: 33, a3: 20, a4: 66, a5: 28, a6: 0 },
                { a1: "范卉洁", a2: 17, a3: 0, a4: 34, a5: 0, a6: 17 },
                { a1: "俞苗", a2: 34, a3: 14, a4: 68, a5: 28, a6: 0 },
                { a1: "阿依提拉", a2: 29, a3: 13, a4: 59, a5: 0, a6: 0 },
                { a1: "张磊", a2: 32, a3: 32, a4: 64, a5: 0, a6: 22 },
                { a1: "吴弘", a2: 64, a3: 49, a4: 129, a5: 41, a6: 0 },
                { a1: "杨永辉", a2: 61, a3: 12, a4: 122, a5: 27, a6: 0 },
                { a1: "徐拥军", a2: 58, a3: 30, a4: 116, a5: 36, a6: 0 },
                { a1: "康劼", a2: 34, a3: 5, a4: 68, a5: 15, a6: 0 },
                { a1: "陈文健", a2: 0, a3: 0, a4: 0, a5: 0, a6: 0 },
                { a1: "高栋琳", a2: 41, a3: 26, a4: 82, a5: 26, a6: 0 },
                { a1: "邓慧勇", a2: 45, a3: 36, a4: 90, a5: 24, a6: 0 },
                { a1: "邵晓波", a2: 43, a3: 19, a4: 86, a5: 24, a6: 0 },
                { a1: "郁新豪", a2: 48, a3: 29, a4: 96, a5: 26, a6: 0 },
                { a1: "徐旭", a2: 26, a3: 14, a4: 52, a5: 0, a6: 0 },
                { a1: "郭思", a2: 57, a3: 27, a4: 114, a5: 36, a6: 0 },
                { a1: "刘德君", a2: 60, a3: 32, a4: 120, a5: 25, a6: 0 },
                { a1: "李国平", a2: 19, a3: 17, a4: 38, a5: 0, a6: 17 },
                { a1: "杨洋	", a2: 35, a3: 16, a4: 71, a5: 25, a6: 0 },
            ],
            tableData2: [
                { a1: "高栋琳", a2: 41, a3: 26, a4: 82, a5: 26, a6: 0, a7: 0 },
                { a1: "邓慧勇", a2: 45, a3: 36, a4: 90, a5: 24, a6: 0, a7: 2 },
                { a1: "邵晓波", a2: 43, a3: 19, a4: 86, a5: 24, a6: 0, a7: 0 },
                { a1: "郁新豪", a2: 48, a3: 29, a4: 96, a5: 26, a6: 0, a7: 0 },
                { a1: "徐旭", a2: 26, a3: 14, a4: 52, a5: 0, a6: 0, a7: 0 },
                { a1: "郭思", a2: 57, a3: 27, a4: 114, a5: 36, a6: 1, a7: 0 },
                { a1: "刘德君", a2: 60, a3: 32, a4: 120, a5: 25, a6: 0, a7: 0 },
                { a1: "李国平", a2: 19, a3: 17, a4: 38, a5: 0, a6: 17, a7: 1 },
                { a1: "杨洋	", a2: 35, a3: 16, a4: 71, a5: 25, a6: 0, a7: 0 },
                { a1: "杨剑", a2: 59, a3: 28, a4: 118, a5: 25, a6: 0, a7: 0 },
                { a1: "姚佳磊", a2: 33, a3: 20, a4: 66, a5: 28, a6: 0, a7: 1 },
                { a1: "范卉洁", a2: 17, a3: 0, a4: 34, a5: 0, a6: 17, a7: 0 },
                { a1: "俞苗", a2: 34, a3: 14, a4: 68, a5: 28, a6: 0, a7: 1 },
                { a1: "阿依提拉", a2: 29, a3: 13, a4: 59, a5: 0, a6: 0, a7: 0 },
                { a1: "张磊", a2: 32, a3: 32, a4: 64, a5: 0, a6: 22, a7: 0 },
                { a1: "吴弘", a2: 64, a3: 49, a4: 129, a5: 41, a6: 0, a7: 2 },
                { a1: "杨永辉", a2: 61, a3: 12, a4: 122, a5: 27, a6: 0, a7: 0 },
                { a1: "徐拥军", a2: 58, a3: 30, a4: 116, a5: 36, a6: 0, a7: 0 },
                { a1: "康劼", a2: 34, a3: 5, a4: 68, a5: 15, a6: 0, a7: 0 },
                { a1: "陈文健", a2: 0, a3: 0, a4: 0, a5: 0, a6: 0, a7: 1 },
            ],
            tableHeaderList1: [
                { prop: "a1", name: "人员" },
                { prop: "a2", name: "检查单位" },
                { prop: "a3", name: "主办检查单位" },
                // { prop: "a4", name: "出动人数" },
                { prop: "a5", name: "日常监督检查" },
                { prop: "a6", name: "专项检查" },
            ],
            tableHeaderList2: [
                { prop: "a1", name: "人员" },
                { prop: "a2", name: "检查家次" },
                { prop: "a3", name: "发现隐患" },
                { prop: "a4", name: "整改隐患" },
                { prop: "a5", name: "责令三停" },
                { prop: "a6", name: "处罚金额" },
                { prop: "a7", name: "临时查封" },
            ],
        };
    },
    components: { category, wordCloud, liquidFill },

    created() {
        this.getData();
        setTimeout(()=>{
            this.autoScroll()
        },2000)
    },
    mixins: [linstener, map],
    computed: {
        isFollow2() {
            return this.stroes.$state.streetTown; //需要监听街镇选择
        },
    },

    watch: {
        isFollow2(newVal) {
            this.stroes.$state.streetTown = newVal.name;
            let data = {};
            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;
                }
            }
            this.streetTownSwitch(data);
        },
    },
    mounted() {
        window.addEventListener(
            "resize",
            () =>
                this.resizeTimeActions([
                    this.$refs.category,
                    this.$refs.wordCloud,
                    this.$refs.liQuIdFill,
                ]),
            true
        );
        this.initMap();
    },
    methods: {
        beforeDestroy() {
            this.autoScroll(true)
        },
       
        /**
         * 初始化
         */
        getData() {
            this.monthLawApi(); //当月执法情况接口请求
            this.adstraLicenseApi(); //行政许可情况接口请求
            this.reportComplaintApi(); //投诉举报情况接口请求
            this.sadianSelect(); //撒点
            this.selectVideo(); //视频在线
        },
        cancel(){
                this.open = false
        },
        /**
         * 撒点测绘院、高德
         */
        sadianSelect() {
            if (this.stroes.$state.mapBool == 1) {
                this.mapCluster();
            } else {
                this.sadian();
            }
        },
        /**
         * 撒点类型选择
         */
        checkType(value) {
            this.checked = value ? value : "";
            this.sadianSelect();
        },
        /**
         * 撒点街镇选择测绘院
         */
        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();
        },

        /**
         *
         * @param {单点信息} newVal
         */
        xfzfdtData(newVal) {
            // this.xfzfdtStatus = true;
            // this.xfzfdt = newVal.xfzfdt;
        },

        /**
         * 在线视频
         */
        async selectVideo(id) {
           await  axios({
                headers: {
                    "Content-Type": "application/json;charset=UTF-8",
                },
                method: "get",
                // url: "http://32.0.15.107:8080/video-api/kiop-gateway-core/4G/device/ext?apikey=643e6591-a489-4648-ba35-c15c39c64022",
                url: "http://32.0.15.107:8080/video-api/kiop-gateway-core/tysbs/device/ext?apikey=643e6591-a489-4648-ba35-c15c39c64022&f_in_civilCode=31021019,31020414&pageNo=0&pageSize=10000",
            }).then((res) => {
                let arr = [];
                let zfjly = [];
                if (res.data.length > 0) {
                    let data = res.data;
                    for (let i = 0; i < data.length; i++) {
                        if (data[i].otherNames?.status_name == "在线") {
                            var num = {
                                id: data[i].id,
                                name: data[i]?.deviceName,
                                groupName: data[i]?.groupName,
                                gisX: data[i]?.longitude
                                    ? data[i]?.longitude
                                    : 0,
                                gisY: data[i]?.latitude ? data[i]?.latitude : 0,
                                type: "执法记录仪",
                                gbid: data[i].gbid,
                                url:
                                    "http://10.107.31.215:50080/dispatch-ms/#/conference/single_url?ipc_live=1&key=643e6591-a489-4648-ba35-c15c39c64022&gbids=" +
                                    data[i].gbid,
                            };
                            arr.push(num);
                        }
                    }
                    for (let i = 0; i < arr.length; i++) {
                        if (
                            arr[i].name.indexOf("单兵") == "-1" &&
                            arr[i].name.indexOf("无人机") == "-1" &&
                            arr[i].name.indexOf("布控球") == "-1"
                        ) {
                            zfjly.push(arr[i]);
                        }
                    }
                    this.selectVideoData = zfjly;
                    console.log(234, this.selectVideoData)
                    if (arr.length > 0 && id) {
                        this.addMarker(arr, "enforcement-dynamic","执法记录仪");
                    }
                }
            });

            // 测试

            // let arr =
            // [{
            //       id: "5708ad6382517cd68ea2d2f8cd01bb58",
            //       name: "上海闵行闵行消防站4G布控球",
            //       groupName: "009闵行支队",
            //       gisX: 121.386128,
            //       gisY:31.139253 ,
            //       type:"video",
            //       gbid:31.01411,
            //       type:"执法记录仪",
            //       url:"http://10.107.31.215:50080/dispatch-ms/#/conference/single_url?ipc_live=1&key=643e6591-a489-4648-ba35-c15c39c64022&gbids=31000000001320003271&nmediaid=121"
            //   }
            // ]
            // if(id){
            //   this.addMarker(arr, "enforcement-dynamic");
            // }
        },

        /**
         * @投诉举报情况 吉
         * @api接口请求
         */
        async reportComplaintApi() {
            let res = await this.$axios.get(
                this.$api.siaeall.lawTrendList +
                    "?" +
                    this.$qs.stringify({
                        moduleType: "complaintHandle",
                    })
            );
            if(res){
                if (res.data.length > 0) {
                    this.reportComplaintList = {
                        x:[],
                        y:{
                            type:[],
                            data:[],
                            total:[],
                        },
                    }
                    for(let i =0;i<res.data[0].complaintVOList.length;i++){
                        this.reportComplaintList.y.type.push(res.data[0].complaintVOList[i].type)
                    }
                    for(let i =0;i<this.reportComplaintList.y.type.length;i++){
                        this.reportComplaintList.y.data[i]= []
                        for(let ii=0;ii<res.data.length;ii++){
                            this.reportComplaintList.y.data[i].push(res.data[ii].complaintVOList[i].number)
                        }
                    }
                    for(let i =0;i<res.data.length;i++){
                        this.reportComplaintList.x.push(res.data[i].streetTown)
                    }
                    const arr0 = this.reportComplaintList.y.data[0]
                    const arr1 = this.reportComplaintList.y.data[1]
                    const arr2 = this.reportComplaintList.y.data[2]
                    const arr3 = this.reportComplaintList.y.data[3]
                    const reverseSum = (arr0, arr1, arr2, arr3) => {
                    for(let i = 0; i < arr1.length; i++){
                        this.reportComplaintList.y.total[i] = arr0[i] + arr1[i] + arr2[i] + arr3[i];
                    };
                    return this.reportComplaintList.y.total
                    };
                    reverseSum(arr0, arr1, arr2, arr3)
                }
            }
        },

        /**
         * @当月执法情况
         * @api接口请求
         */
        // async monthLawApi() {
        //   let res = await this.$axios.get(
        //     this.$api.siaeall.lawTrendList +
        //       "?" +
        //       this.$qs.stringify({
        //         moduleType: "monthLaw",
        //       })
        //   );

        //   if (res.data.length > 0) {
        //     // this.SiAeAllList = res.data;
        //     this.SiAeAllList = [
        //       {checkType: '检查家次(家)', number: 3255, linkRelativeStatus: 1, sameRatio: 0.053, linkRelativeRatio: 0.012},
        //       {checkType: '整改隐患(起)', number: 3265, linkRelativeStatus: 1, sameRatio: 0.053, linkRelativeRatio: 0.0120},
        //       {checkType: '处罚金额(万元)', number: 300, linkRelativeStatus: 1, sameRatio: 0.053, linkRelativeRatio: 0.012},
        //       {checkType: '发现隐患(起)', number: 3255, linkRelativeStatus: 1, sameRatio: 0.053, linkRelativeRatio: 0.012},
        //       {checkType: '责令三停(家)', number: 65, linkRelativeStatus: 1, sameRatio: 0.053, linkRelativeRatio: 0.012}
        //     ]
        //   }
        // },

        /**
         * @当月执法情况
         * @api接口请求
         */
        async monthLawApi() {
                this.SiAeAllList = []
            let res = await this.$axios.get(
                this.$api.siaeall.siAeAllCollect +
                    "?" +
                    this.$qs.stringify({
                             startTime: this.stores.timeList[0],
                             endTime:  this.stores.timeList[1],
           
                        // startTime: "2022-12-01 00:00:00",
                        // endTime: "2022-12-31 23:59:59",
                    })
            );

            if (res.data.length > 0) {
                for (let i = 0; i < res.data.length; i++) {
                    if (res.data[i].checkType == "检查家次(家)") {
                        this.SiAeAllList.push(res.data[i]);
                    }
                    if (res.data[i].checkType == "发现隐患(起)") {
                        this.SiAeAllList.push(res.data[i]);
                    }
                    if (res.data[i].checkType == "整改隐患(起)") {
                        this.SiAeAllList.push(res.data[i]);
                    }
                    if (res.data[i].checkType == "责令三停(家)") {
                        this.SiAeAllList.push(res.data[i]);
                    }
                    if (res.data[i].checkType == "处罚金额(万元)") {
                        this.SiAeAllList.push(res.data[i]);
                    }
                    if (res.data[i].checkType == "临时查封(份)") {
                        this.SiAeAllList.push(res.data[i]);
                    }

                    
                }
                // this.SiAeAllList = [
                //   {checkType: '检查家次(家)', number: 3255, linkRelativeStatus: 1, sameRatio: 0.053, linkRelativeRatio: 0.012},
                //   {checkType: '整改隐患(起)', number: 3265, linkRelativeStatus: 1, sameRatio: 0.053, linkRelativeRatio: 0.0120},
                //   {checkType: '处罚金额(万元)', number: 300, linkRelativeStatus: 1, sameRatio: 0.053, linkRelativeRatio: 0.012},
                //   {checkType: '发现隐患(起)', number: 3255, linkRelativeStatus: 1, sameRatio: 0.053, linkRelativeRatio: 0.012},
                //   {checkType: '责令三停(家)', number: 65, linkRelativeStatus: 1, sameRatio: 0.053, linkRelativeRatio: 0.012}
                // ]
            }
        },

        /**
         * @行政许可情况
         * @api接口请求
         */
        async adstraLicenseApi() {
            let res = await this.$axios.get(
                this.$api.fire.adLicenseStatistic 
            );

            if (res.status === "SUCCESS") {
                this.alFsdAllNumber = res.data;
            }
        },

        /**
         * 测绘院撒点
         */
        async sadian() {
            if (this.checked == "执法记录仪") {
                this.selectVideo(1);
            }else if (this.checked == "三合一") {
                // this.addMarker([], "enforcement-dynamic",this.checked );
                this.$axios.post(this.$api.water.baseGgpFacilityList,{
                                "facilityType": [
                                       12
                                ] 
                        }).then((res) => {
                                let arr = []
                                if(res.data.length>0){
                                        arr = res.data
                                }
                                this.addMarker(arr, "enforcement-dynamic","三合一");
                        });
            }else if (this.checked == "重大火灾隐患") {
                this.$axios.post(this.$api.water.baseGgpFacilityList,{
                                "facilityType": [
                                       5
                                ] 
                        }).then((res) => {
                                let arr = []
                                if(res.data.length>0){
                                        arr = res.data
                                }
                                this.addMarker(arr, "enforcement-dynamic","重大火灾隐患");
                        });
            } else {
                await this.$axios
                    .get(
                        this.$api.siaeall.lawTrendSaDian +
                            "?" +
                            this.$qs.stringify({
                                streetTown: this.stroes.$state.streetTown,
                                sattererType: this.checked,
                            })
                    )
                    .then((res) => {
                        if (res.data.length > 0) {
                            //点分布
                            let data = res.data;
                            let arr = [];
                            //if(this.checked == "安全检查单位"){
                            for (let i = 0; i < data.length; i++) {
                                arr[i] = {
                                    id: data[i].id ? data[i].id : null,
                                    type: this.checked,
                                    name: data[i].name ? data[i].name : null,
                                    streetTown: data[i].streetTown
                                        ? data[i].streetTown
                                        : null,
                                    gisX: data[i].longitude,
                                    gisY: data[i].latitude,
                                    number: data[i].number
                                        ? data[i].number
                                        : null,
                                };
                            }
                            this.addMarker(
                                arr.splice(0, 500),
                                "enforcement-dynamic",this.checked 
                            );

                        } else {
                            this.addMarker([], "enforcement-dynamic",this.checked );
                        }
                    });
            }
        },
        //本年度重点事项推进情况撒点
        schedule(id){
                if(id){
                        this.$axios.post(this.$api.water.baseGgpFacilityList,{
                                "facilityType": [
                                       id
                                ] 
                        }).then((res) => {
                                let arr = []
                                if(res.data.length>0){
                                        arr = res.data
                                }
                                this.addMarker(arr, "enforcement-dynamic","本年度重点事项推进情况");
                        });
                }else{
                        this.addMarker([], "enforcement-dynamic","本年度重点事项推进情况");
                }
               
        },

        /**
         * @高德地图聚合撒点
         */
        async mapCluster(id) {
            if (this.checked == "执法记录仪") {
                this.selectVideo(1);
            } else {
                await this.$axios
                    .get(
                        this.$api.siaeall.lawTrendSaDian +
                            "?" +
                            this.$qs.stringify({
                                streetTown: this.stroes.$state.streetTown,
                                sattererType: this.checked,
                            })
                    )
                    .then((res) => {
                        if (res.data.length > 0) {
                            //点分布
                            let data = res.data;
                            let arr = [];
                            //if(this.checked == "安全检查单位"){
                            for (let i = 0; i < data.length; i++) {
                                arr[i] = {
                                    id: data[i].id ? data[i].id : null,
                                    type: this.checked,
                                    name: data[i].name ? data[i].name : null,
                                    streetTown: data[i].streetTown
                                        ? data[i].streetTown
                                        : null,
                                    gisX: data[i].longitude,
                                    gisY: data[i].latitude,
                                    number: data[i].number
                                        ? data[i].number
                                        : null,
                                };
                            }
                            this.initMarkers(
                                arr.splice(0, 500),
                                "enforcement-dynamic",this.checked 
                            );

                        } else {
                            this.initMarkers([], "enforcement-dynamic",this.checked );
                        }
                    });
            }
        },

        /**
         * @高德地图撒点
         */
        async mapList() {
            let res = await this.$axios.get(
                this.$api.selfManagement.mapList +
                    "?" +
                    this.$qs.stringify({
                        streetTown: this.stroes.$state.streetTown,
                        companyType: this.checked,
                    })
            );
            if (res.data.length > 0) {
                this.addMarker(res.data, "消防执法动态", this.checked);
            }
        },

        btnC(val) {
            this.check = val;
        },
    },
};
</script>
<style lang="scss" scoped>
@import "@/assets/scss/color.scss";
.leftBox {
    .left_top {
        height: 46%;
        max-height: 46%;
        .data {
            > .el-col {
                @include color_primary($color-primary3);
                font-size: 0.2rem;
                margin-top: 0.25rem;
                text-align: left !important;
                .svgImg {
                    width: 0.2rem;
                    vertical-align: middle;
                }
                .event {
                    margin: 0 0.225rem 0;
                    width: 24%;
                }
                .num {
                    width: 15%;
                }
                .huanbi,
                .tongbi {
                    width: 20%;
                    span:nth-child(2) {
                        margin-left: 0.25rem;
                    }
                }
                .huanbi {
                    margin: 0 5%;
                }
                p {
                    display: inline-block;
                }
            }
        }

        .leftTopContent {
            color: #ffffff;
            height: calc(100% - 0.4375rem);
            width: 95%;
            margin-left: 2.5%;

            > div {
                width: 100%;
                text-align: left;
                > .el-col {
                    margin-top: 0.25rem;
                    > div {
                        margin: auto;
                        > .title {
                            width: 1.075rem;
                            height: 0.225rem;
                            font-size: 0.175rem;
                            padding-left: 0.1625rem;
                            margin: 0.0625rem 0 0.0625rem 0;
                            position: relative;
                            background-image: url(~@a/img/securityPlan/fhxcqk.png);
                            background-size: 100% 100%;
                            > div {
                                position: absolute;
                                bottom: 0.0625rem;
                                width:150%;
                            }
                        }

                        > .content {
                            > span:nth-child(1) {
                                font-size: 0.3rem;
                                padding: 0 0.5625rem 0 0.1625rem;
                                color: #73fbfd;
                            }
                            > span:nth-child(2) {
                                font-size: 0.175rem;
                                margin-right: 0.125rem;
                            }
                            > span:nth-child(3) {
                                font-size: 0.175rem;
                            }
                        }
                        > .content2 {
                            span {
                                font-size: 0.175rem;
                                margin-right: 0.125rem;
                            }
                        }
                    }
                }
            }
        }
    }
    .left_middle {
        height: 25%;
        max-height: 25%;
    }
    .left_bottom {
        height: 29%;
        max-height: 29%;
        position: relative;
        > .el-col {
            display: flex;
            -ms-flex-wrap: wrap;
            flex-wrap: wrap;
            position: relative;
            -webkit-box-sizing: border-box;
            box-sizing: border-box;
        }

        .leftBotLeft {
            .text {
                z-index: 9;
                width:42%;
                margin-top:15%;
                text-align: center;
                // background: red;
                color: #fff;
                .el-col:first-child {
                    font-size: 0.3rem;
                }
                .el-col:last-child {
                    font-size: 0.2rem;
                }
            }
            .liQuIdFill {
                position: absolute;
                left: 4%;
                right: 0;
                top: 0.25rem;
                width: 2.15rem;
                height: 2.15rem;
            }
        }
        .leftBotRight {
            width: 40%;
            right: 0.8rem;
            top: 0.64rem;
            position: absolute;
            > .el-col {
                margin-top: 0.1rem;
                height: 0.40rem;
                border-radius: 4px;
                background-size: 100% 100%;
                padding: 0 0.3rem;
                display: flex;
                justify-content: space-between;
                align-items: center;
                box-shadow: inset 0 0 0.2rem 0.0125rem #30cfff;
                border: 1px solid transparent;
                font-size: 0.18rem;
                @include color_primary($color-primary3);
                span:nth-child(2) {
                    font-size: 0.25rem;
                    @include color_primary($color-primary1);
                }
            }
        }
    }
}

.rightBox {
    .rightBox1 {
        height: 23vh;
       
    }
    .rightBox3 {
        margin-top: 5vh;
    }
    .num {
        padding: 3vh 0%;
        .svgImg {
            width: 40%;
            margin-left: 20%;
            vertical-align: middle;
            display: inline-block;
        }
        .data {
            width: 30%;
            margin-left: 5%;
            vertical-align: middle;
            display: inline-block;
            .p1 {
                @include color_primary($color-primary1);
                font-size: 0.3rem;
                display: inline-block;
                font-weight: 700;
            }
            .p2 {
                @include color_primary($color-primary3);
                font-size: 0.2rem;
                margin-top: 1.1vh;
            }
        }
    }
    .monitor-list {
        overflow: hidden;
        margin-top:0.25rem;
        > .list {
            border: 1px solid #3a7e8e;
            position: relative;
            width:48%;
            box-sizing: border-box;
            .videoSelect {
                position: absolute;
                width: 100%;
            }
            img{
                width:100%;
                height:250px;
                overflow: hidden;
            }
        }
        .list:nth-child(2){
                margin-left:4%;
        }
    }
    iframe {
        border: none;
        width:100%;
    }
}
.treeMap {
    width: 100%;
    height: 32vh;
    margin-top: 12%;
    img {
        width: 0.2rem;
        margin: 0.3rem auto;
        height: 0.2125rem;
        display: block;
    }
}
.tableTooltip {
    width: 5rem;
    background: transparent;
    border-radius: 0.05rem;
    box-shadow: inset 0 0 1px 0.0125rem rgba(115, 251, 253, 1);
    background: rgba(0, 29, 49, 0.5);
    font-size: 0.2rem;
    padding: 0.1875rem;
    position: fixed;
    z-index: 10000;
    .close {
        width: 20px;
        height: 20px;
        position: absolute;
        right: 10px;
        top: 10px;
        z-index: 10000;
        display: block;
    }
    .tableContent {
        p {
            @include color_primary($color-primary1);
        }

        .el-col {
            margin-top: 0.05rem;
            line-height: 0.3rem;
            text-overflow: ellipsis !important;
            white-space: normal !important;
        }
        .mk:nth-child(1) {
            margin-top: 0px;
        }
        .color1 {
            @include color_primary($color-primary3);
        }
        .color2 {
            @include color_primary($color-primary1);
        }
    }
}

.mapTips_streetTown {
    width: auto;
    height: auto;
    background: $background-color-theme4;
    position: fixed;
    bottom: 1.48vh;
    right: 10rem;
    color: #fff !important;
    font-size: 0.2rem;
    p {
        color: #019fb7;
    }
    .content {
        padding: 1.388vh 0.25rem;
        color: #fff !important;
    }
    .img {
        width: 100%;
        height: 0.37vh;
        margin-top: -0.37vh;
        position: absolute;
    }
}
.z {
    @include color_primary($color-primarywt1);
}
.j {
    @include color_primary($color-primarywt2);
}
.tableTab {
    height: 20vh;
    overflow: hidden;
}

.gp{
        font-size: 12px;
        font-family: "微软雅黑";
        float:right;
        margin-top:10px;
        >span{
                margin-right:10px;
                >span{
                        font-size: 14px;
                        font-weight: 700;
                        margin-left:6px;
                }
        }
        >span:nth-child(2){
                margin-right: 0px;
        }
}
::v-deep .monitor-list .el-input__inner{
        border-radius: 0 !important;
        border:none;
        border-bottom:1px solid #3a7e8e;
}
 .z {
      @include color_primary($color-primarywt1);
    }
    .j {
      @include color_primary($color-primarywt2);
    }
    .tableTab{
      height:20vh;
      overflow: hidden;
    }
    .ndtj{
        margin-bottom:-18px;
        color:#fff;
        font-size: .175rem;
        >p{
                margin-bottom:-30px;
        }
        .num{
                width:45%;
                margin-left:2%;
                display: inline-block;
        }

    }

</style>
<style>
.el-progress{
        width:50%;
        height:20px;
        display: inline-block;
}
.el-progress-bar__outer{
        height:14px !important;
}
.el-progress__text{
        color:#000 !important;
        text-align: center;
        position: absolute;
        top:1px;
        left:50%;
        z-index: 10;
}
.j1 .el-progress-bar__inner,.j3 .el-progress-bar__inner{
        background: #3f8a3f;
}
.j2 .el-progress-bar__inner{
        background: #5081c5;
}
.j4 .el-progress-bar__inner{
        background: #b72727;
}
</style>