fire-mh/src/views/water-sources.vue

<template>
    <el-row class="contentBox">
        <transition name="el-fade-in-linear">
            <el-col class="leftBox" v-show="stroes.$state.leftBtn">
                <div class="leftCenter">
                    <h4>消防水源数量</h4>
                    <div class="leftCenterContent">
                        <div class="contentEcharts">
                            <water-gauge
                                ref="waterGauge"
                                :dataMap="
                                    fireWaterStatisticsObj.waterIntact || 0
                                "
                            ></water-gauge>
                        </div>
                        <el-row>
                            <el-col>
                                <span>市政消火栓</span
                                ><span>{{
                                    fireWaterStatisticsObj.municipalFireCode
                                }}</span>
                            </el-col>
                            <el-col>
                                <span>社区消火栓</span
                                ><span>{{
                                    fireWaterStatisticsObj.communityFireCode
                                }}</span>
                            </el-col>
                            <el-col>
                                <span>单位消火栓</span
                                ><span>{{
                                    fireWaterStatisticsObj.unitFireCode
                                }}</span>
                            </el-col>
                            <el-col>
                                <!-- <span>天然水源</span><span>{{ fireWaterStatisticsObj.naturalWater }}</span> -->
                                <span>天然水源</span><span>11</span>
                            </el-col>
                        </el-row>
                    </div>
                </div>
                <div class="leftCenter2">
                    <h4>各街镇消防水源情况</h4>
                    <div class="leftCenterContent">
                        <el-table
                            :data="tableData3"
                            class="transparentTableRow table1"
                            height="100%"
                            style="width: 100%; margin: 0 auto"
                        >
                            <el-table-column
                                v-for="item in headerData3"
                                :key="item.prop"
                                :prop="item.prop"
                                align="center"
                                style="margin: 0 auto"
                                min-width="20"
                                :label="item.name"
                            >
                                <template
                                    v-if="
                                        item.prop === 'type' ||
                                        item.prop === 'lasj2' ||
                                        item.prop === 'ajzt' ||
                                        item.prop === 'afdz' ||
                                        item.prop === 'czdx' ||
                                        item.prop === 'zhongdui'
                                    "
                                    #default="scope"
                                >
                                    <el-tooltip placement="right">
                                        <template #content>
                                            <div class="tableTooltip" ref="ff">
                                                <div class="tableTitle">
                                                    <div>案件详情</div>
                                                </div>
                                                <img
                                                    src="~@a/img/icon/close.png"
                                                    alt=""
                                                    class="close"
                                                    @click="closeIsTooltip"
                                                />
                                                <el-row class="tableContent">
                                                    <el-col
                                                        :span="20"
                                                        v-if="scope.row.ajbh"
                                                        >案件编号：{{
                                                            scope.row.ajbh
                                                        }}</el-col
                                                    >
                                                    <el-col
                                                        :span="24"
                                                        v-if="scope.row.bcxx"
                                                        >案件描述：{{
                                                            scope.row.bcxx
                                                        }}</el-col
                                                    >
                                                    <el-col
                                                        :span="24"
                                                        v-if="scope.row.tzsj"
                                                        >报警时间：{{
                                                            scope.row.tzsj
                                                        }}</el-col
                                                    >
                                                    <el-col
                                                        :span="24"
                                                        v-if="scope.row.ajlx"
                                                        >案件类型：{{
                                                            scope.row.ajlx
                                                        }}</el-col
                                                    >
                                                    <el-col
                                                        :span="24"
                                                        v-if="scope.row.type"
                                                        >警情类别：{{
                                                            scope.row.type
                                                        }}</el-col
                                                    >
                                                    <el-col
                                                        :span="24"
                                                        v-if="scope.row.ajdj"
                                                        >警情等级：{{
                                                            scope.row.ajdj
                                                        }}</el-col
                                                    >

                                                    <el-col
                                                        :span="24"
                                                        v-if="scope.row.afdz"
                                                        >案发地址：{{
                                                            scope.row.afdz
                                                        }}</el-col
                                                    >
                                                    <el-col
                                                        :span="24"
                                                        v-if="scope.row.cdcl"
                                                        >调动车辆：{{
                                                            scope.row.cdcl
                                                        }}</el-col
                                                    >
                                                    <el-col
                                                        :span="24"
                                                        v-if="scope.row.czdx"
                                                        >处置对象：{{
                                                            scope.row.czdx
                                                        }}</el-col
                                                    >

                                                    <el-col
                                                        :span="12"
                                                        v-if="
                                                            scope.row.zhongdui
                                                        "
                                                        >主责中队：{{
                                                            scope.row.zhongdui
                                                        }}</el-col
                                                    >

                                                    <el-col
                                                        :span="12"
                                                        v-if="scope.row.ajzt"
                                                        >案件状态：{{
                                                            scope.row.ajzt
                                                        }}</el-col
                                                    >
                                                    <el-col
                                                        :span="24"
                                                        v-if="scope.row.dcsj"
                                                        >到场时间：{{
                                                            scope.row.dcsj
                                                        }}</el-col
                                                    >

                                                    <el-col
                                                        :span="24"
                                                        v-if="scope.row.cssj"
                                                        >出水时间：{{
                                                            scope.row.cssj
                                                        }}</el-col
                                                    >
                                                    <el-col
                                                        :span="24"
                                                        v-if="scope.row.kzsj"
                                                        >控制时间：{{
                                                            scope.row.kzsj
                                                        }}</el-col
                                                    >
                                                    <el-col
                                                        :span="24"
                                                        v-if="scope.row.xmsj"
                                                        >熄灭时间：{{
                                                            scope.row.xmsj
                                                        }}</el-col
                                                    >
                                                    <el-col
                                                        :span="24"
                                                        v-if="scope.row.fdsj"
                                                        >返队时间：{{
                                                            scope.row.fdsj
                                                        }}</el-col
                                                    >
                                                    <el-col
                                                        :span="24"
                                                        v-if="
                                                            scope.row.streettown
                                                        "
                                                        >所属街道：{{
                                                            scope.row.streettown
                                                        }}</el-col
                                                    >
                                                </el-row>
                                                <el-row class="tablePersonnel">
                                                    <el-col :span="7"> </el-col>
                                                </el-row>
                                            </div>
                                        </template>
                                        <template>
                                            <i
                                                class="iconfont"
                                                :class="
                                                    scope.row['ajlxdm'] == '1'
                                                        ? 'icon-huozai'
                                                        : scope.row['ajlxdm'] ==
                                                          '2'
                                                        ? 'icon-jiuyuan'
                                                        : scope.row['ajlxdm'] ==
                                                          '3'
                                                        ? 'icon-shehuijiuzhu'
                                                        : 'icon-pbaj'
                                                "
                                                :style="{
                                                    color:
                                                        scope.row['ajdj'] ==
                                                        '零级'
                                                            ? '#49b8ff'
                                                            : scope.row[
                                                                  'ajdj'
                                                              ] == '一级'
                                                            ? '#eec10d'
                                                            : scope.row[
                                                                  'ajdj'
                                                              ] == '二级'
                                                            ? '#ff730c'
                                                            : scope.row[
                                                                  'ajdj'
                                                              ] == '三级'
                                                            ? '#ff0012'
                                                            : '#2e98f2',
                                                }"
                                                v-if="item.prop === 'type'"
                                            ></i>
                                            <div class="name-wrapper" v-else>
                                                {{ scope.row[item.prop] }}
                                            </div>
                                        </template>
                                    </el-tooltip>
                                </template>
                            </el-table-column>
                        </el-table>
                    </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="stroes.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="stroes.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(1)"
                                :class="
                                    checkedArray.checkedData[0] == 1
                                        ? 'checkTypeSelect'
                                        : ''
                                "
                            >
                                <img :src="stores.sadianIcon.xhs" alt="" />
                                <span>消火栓(可用)</span>
                            </div>
                            <div
                                @click="checkboxChange(3)"
                                :class="
                                    checkedArray.checkedData[0] == 3
                                        ? 'checkTypeSelect'
                                        : ''
                                "
                            >
                                <img :src="stores.sadianIcon.xhsH" alt="" />
                                <span>消火栓(不可用)</span>
                            </div>
                            <div
                                @click="checkboxChange(2)"
                                :class="
                                    checkedArray.checkedData[0] == 2
                                        ? 'checkTypeSelect'
                                        : ''
                                "
                            >
                                <img :src="stores.sadianIcon.trsy" 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">
                <div class="rightTop">
                    <h4>水源性质占比</h4>

                    <div class="rightBoxContent">
                        <el-row class="funnelCon">
                            <el-col :span="16">
                                <funnel
                                    ref="funnel"
                                    :dataMap="
                                        fireWaterStatisticsObj.funnelList || []
                                    "
                                ></funnel>
                            </el-col>
                            <el-col :span="8">
                                <el-col
                                    v-for="item in fireWaterStatisticsObj.funnelList ||
                                    []"
                                    :key="item.name"
                                >
                                    <span>{{ item.name }}</span>
                                    <span>{{ item.data }}</span>
                                </el-col>
                            </el-col>
                        </el-row>
                        <el-row class="gaugeCon">
                            <el-col :span="12">
                                <el-row>
                                    <el-col :span="12">
                                        <gauge
                                            ref="gauge1"
                                            :dataMap="
                                                fireWaterStatisticsObj.municipalGetWaterRadio ||
                                                0
                                            "
                                            color="#1AF3FD"
                                        ></gauge>
                                    </el-col>
                                    <el-col :span="12">
                                        <div>
                                            <div style="color: #1af3fd">
                                                {{
                                                    fireWaterStatisticsObj.municipalGetWater
                                                }}
                                            </div>
                                            <div>市政取水</div>
                                        </div>
                                    </el-col>
                                </el-row>
                            </el-col>
                            <el-col :span="12">
                                <el-row>
                                    <el-col :span="12">
                                        <gauge
                                            ref="gauge2"
                                            :dataMap="
                                                fireWaterStatisticsObj.landGetWaterRadio ||
                                                0
                                            "
                                            color="#FDC51A"
                                        ></gauge>
                                    </el-col>
                                    <el-col :span="12">
                                        <div>
                                            <div style="color: #fdc51a">
                                                {{
                                                    fireWaterStatisticsObj.landGetWater
                                                }}
                                            </div>
                                            <div>地上取水</div>
                                        </div>
                                    </el-col>
                                </el-row>
                            </el-col>
                        </el-row>
                    </div>
                </div>
                <div class="rightCenter">
                    <h4>水源情况</h4>

                    <div class="rightCenterContent">
                        <el-table
                            :data="tableData"
                            class="transparentTableRow"
                            height="100%"
                            @row-click="FireWaterListClick"
                        >
                            <el-table-column
                                v-for="item in headerData"
                                show-overflow-tooltip
                                :key="item.prop"
                                :prop="item.prop"
                                align="center"
                                min-width="20"
                                :label="item.name"
                            >
                                <template
                                    v-if="item.prop === 'type'"
                                    #default="scope"
                                >
                                    <el-popover
                                        trigger="hover"
                                        placement="left"
                                    >
                                        <template #default>
                                            <div class="tableTooltip">
                                                <div class="tableTitle">
                                                    <div>
                                                        {{ scope.row.type }}
                                                    </div>
                                                </div>
                                                <el-row class="tableContent">
                                                    <el-col
                                                        :span="24"
                                                        v-if="scope.row.address"
                                                        >水源位置：{{
                                                            scope.row.address
                                                        }}</el-col
                                                    >
                                                    <el-col
                                                        :span="12"
                                                        v-if="
                                                            scope.row.dutyPerson
                                                        "
                                                        >责任人：{{
                                                            scope.row.dutyPerson
                                                        }}</el-col
                                                    >
                                                    <el-col
                                                        :span="12"
                                                        v-if="scope.row.phone"
                                                        >电话：{{
                                                            scope.row.phone
                                                        }}</el-col
                                                    >
                                                    <el-col
                                                        :span="24"
                                                        v-if="
                                                            scope.row
                                                                .detachmentName
                                                        "
                                                        >支队名称：{{
                                                            scope.row
                                                                .detachmentName
                                                        }}</el-col
                                                    >
                                                    <el-col
                                                        :span="12"
                                                        v-if="
                                                            scope.row
                                                                .jurisdictionalAgency
                                                        "
                                                        >管辖机构：{{
                                                            scope.row
                                                                .jurisdictionalAgency
                                                        }}</el-col
                                                    >
                                                    <el-col
                                                        :span="12"
                                                        v-if="scope.row.type"
                                                        >水源类型：{{
                                                            scope.row.type
                                                        }}</el-col
                                                    >
                                                    <el-col
                                                        :span="12"
                                                        v-if="
                                                            scope.row
                                                                .getWaterType
                                                        "
                                                        >取水形式：{{
                                                            scope.row
                                                                .getWaterType
                                                        }}</el-col
                                                    >
                                                    <el-col
                                                        :span="12"
                                                        v-if="
                                                            scope.row.waterGage
                                                        "
                                                        >水压（Mpa）：{{
                                                            scope.row.waterGage
                                                        }}</el-col
                                                    >
                                                    <el-col
                                                        :span="12"
                                                        v-if="
                                                            scope.row
                                                                .waterAdministrative
                                                        "
                                                        >水源性质：{{
                                                            scope.row
                                                                .waterAdministrative
                                                        }}</el-col
                                                    >
                                                    <el-col
                                                        :span="24"
                                                        v-if="
                                                            scope.row.waterUnit
                                                        "
                                                        >供水单位：{{
                                                            scope.row.waterUnit
                                                        }}</el-col
                                                    >
                                                    <el-col
                                                        :span="12"
                                                        v-if="
                                                            scope.row.waterUnit
                                                        "
                                                        >状态：<span
                                                            :class="
                                                                scope.row
                                                                    .status ==
                                                                '1'
                                                                    ? 'color1'
                                                                    : 'color2'
                                                            "
                                                            >{{
                                                                scope.row
                                                                    .status == 1
                                                                    ? "可用"
                                                                    : "不可用"
                                                            }}</span
                                                        ></el-col
                                                    >
                                                </el-row>
                                            </div>
                                        </template>
                                        <template #reference>
                                            <div>
                                                {{ scope.row.type }}
                                            </div>
                                        </template>
                                    </el-popover>
                                </template>
                                <template v-else #default="scope">
                                    <img
                                        style="width: 0.4rem"
                                        v-if="item.prop === 'status'"
                                        :src="
                                            item.prop === 'status'
                                                ? scope.row[item.prop] == '1'
                                                    ? stores.sadianIcon.xhs
                                                    : stores.sadianIcon.xhsH
                                                : stores.sadianIcon.xhs
                                        "
                                        alt=""
                                    />
                                    <span
                                        v-else
                                        :class="
                                            item.prop === 'status'
                                                ? scope.row[item.prop] == '1'
                                                    ? 'color1'
                                                    : 'color2'
                                                : ''
                                        "
                                    >
                                        {{
                                            item.prop === "status"
                                                ? scope.row[item.prop] == 1
                                                    ? "可用"
                                                    : "不可用"
                                                : scope.row[item.prop]
                                        }}</span
                                    >
                                </template>
                            </el-table-column>
                        </el-table>
                    </div>
                </div>
            </el-col>
        </transition>
    </el-row>
</template>

<script>
import linstener from "@c/mixins/linstener";
import map from "@c/mixins/map-data1";
// import map from "@c/mixins/map-gaode-public";
import waterGauge from "@c/water-gauge";
import gauge from "@c/gauge/index4";
// import seTable from "@c/se-table/index2";
import funnel from "@c/funnel";
import { getYearMonthDateSFN, getMonthStartAndEnd } from "../assets/js/dataFormate";
// TODO 高德地图
// import AMap from 'AMap'
export default {
  mixins: [linstener, map],
  components: { waterGauge, funnel, gauge },
  data() {
    return {
      stores: this.$useStore(),
      checkedArray: {
        checkedData: [3],
        checkedList: [
          { value: 1, label: "市政取水点" },
          { value: 2, label: "社区取水点" },
          { value: 3, label: "单位取水点" },
        ],
      }, //类型筛选-数据存储
      cldt:[],//车辆动态
      timeArea: "day",
      unitBeOnDutyList: [],
      tableData: [],
      headerData: [
        { prop: "type", name: "类型" },
        { prop: "address", name: "位置" },
        { prop: "jurisdictionalAgency", name: "管辖机构" },
        { prop: "getWaterType", name: "取水形式" },
        { prop: "waterGage", name: "水压（Mpa）" },
        { prop: "status", name: "状态" },
      ],
      fireWaterStatisticsObj: {
        funnelList: [
          { data: 0, reaVal: 0, value: 20 },
          { data: 0, reaVal: 0, value: 40 },
          { data: 0, reaVal: 0, value: 60 },
          { data: 0, reaVal: 0, value: 80 },
        ],
      },
       tableData3: [
{
                       a0:"申虹",
                       a1:"864",
                       a2:"234",
                       a3:"521",
                       a4:"0",
                       a5:"100%",
                },
{
                       a0:"支队",
                       a1:"654",
                       a2:"95",
                       a3:"452",
                       a4:"0",
                       a5:"100%",
                },
{
                       a0:"七宝",
                       a1:"354",
                       a2:"267",
                       a3:"431",
                       a4:"0",
                       a5:"99%",
                },
{
                       a0:"光华",
                       a1:"942",
                       a2:"324",
                       a3:"368",
                       a4:"0",
                       a5:"100%",
                },
{
                       a0:"华漕",
                       a1:"854",
                       a2:"354",
                       a3:"269",
                       a4:"0",
                       a5:"99%",
                },
{
                       a0:"吴泾",
                       a1:"651",
                       a2:"524",
                       a3:"459",
                       a4:"8",
                       a5:"98%",
                },
{
                       a0:"新虹",
                       a1:"324",
                       a2:"268",
                       a3:"410",
                       a4:"0",
                       a5:"99%",
                },
{
                       a0:"杜行",
                       a1:"964",
                       a2:"352",
                       a3:"425",
                       a4:"1",
                       a5:"100%",
                },
{
                       a0:"浦江",
                       a1:"568",
                       a2:"265",
                       a3:"423",
                       a4:"0",
                       a5:"100%",
                },
{
                       a0:"莘庄",
                       a1:"569",
                       a2:"346",
                       a3:"426",
                       a4:"0",
                       a5:"100%",
                },
{
                       a0:"闵行",
                       a1:"864",
                       a2:"265",
                       a3:"402",
                       a4:"1",
                       a5:"100%",
                },
{
                       a0:"颛桥",
                       a1:"864",
                       a2:"325",
                       a3:"201",
                       a4:"0",
                       a5:"98%",
                },
{
                       a0:"马桥",
                       a1:"864",
                       a2:"319",
                       a3:"401",
                       a4:"1",
                       a5:"99%",
                },
       ],
        headerData3: [
                 { prop: "a0", name: "支队名称" },
                { prop: "a1", name: "市政消火栓" },
                { prop: "a2", name: "社区消火栓" },
                { prop: "a3", name: "单位消火栓" },
                { prop: "a4", name: "天然水源" },
                { prop: "a5", name: "水源完好率" },
                
            ],
    };
  },
  created() {
        this.getData();
  },
  mounted() {
            this.initMap();
                window.addEventListener("resize", () => this.resizeTimeActions([this.$refs.funnel, this.$refs.waterGauge, this.$refs.gauge1, this.$refs.gauge2]), true);
  },
  methods: {
    async getData() {
      this.getFireWaterStatistics();
      this.getFireWater(3);
      this.getPage()
    },
     /* 历史警情 */
        async getPage() {
            let yearDay = dayjs()
                .subtract(1, "day")
                .format("YYYY-MM-DD HH:mm:ss")
                .slice(0, 10);
            let res = await this.$axios.get(
                this.$api.jqzhcz.page2 +
                    "?" +
                    this.$qs.stringify({
                        streetTown: this.stroes.$state.streetTown, //街镇
                        current: 1,
                        size: 150,
                        startTime: yearDay + " 00:00:00",
                        endTime: yearDay + " 23:59:59",
                    })
            );
            if (res) {
                let data = res.data.records;
                for (let i = 0; i < data.length; i++) {
                    data[i].lasj2 = data[i].lasj.slice(0, 10);
                }
                // this.tableData3 = data;
            }
        },
    /**
     * 撒点街镇选择
     */
    checkStreetTown(value) {
        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 getFireWater(val) {
        if(val ==1 || val ==3){
                await this.$axios
                .get(
                this.$api.water.fireWater +
                "?" +
                this.$qs.stringify({
                current: 1,
                size: 50000,
                // startTime: this.stores.$state.timeList[0] || "",
                // endTime: this.stores.$state.timeList[1] || "",
                })
                )
                .then((res) => {
                        if (res) {
                                let data =  res.data.records.map((val) => {
                                        return {
                                                ...val,
                                                waterGage: (+val.waterGage).toFixed(2) || 0,
                                        };
                                });
                                let data1 = []
                                let data2 = []
                                for(let i =0;i<data.length;i++){
                                        if(data[i].status == "0"){
                                                data1.push(data[i])
                                        }else{
                                                data2.push(data[i])
                                        }
                                }
                                this.tableData = data1.concat(data2)
                                let arr = []
                                if(val){
                                        if (this.stroes.$state.mapBool == 1) {
                                                if(val == "1") {
                                                        for(let i = 0;i<this.tableData.length;i++){
                                                                if(this.tableData[i].type == "消火栓" && this.tableData[i].status == "1"){
                                                                        arr.push(this.tableData[i])
                                                                }
                                                        }
                                                        if(arr.length>0){
                                                                this.initMarkers(arr, "water-sources","消火栓可用");
                                                        }else{
                                                                this.initMarkers([], "water-sources","消火栓可用");
                                                        }
                                                }
                                                if(val == "3") {
                                                        for(let i = 0;i<this.tableData.length;i++){
                                                                if(this.tableData[i].type == "消火栓" && this.tableData[i].status == "0"){
                                                                        arr.push(this.tableData[i])
                                                                }
                                                        }
                                                        if(arr.length>0){
                                                                this.initMarkers(arr, "water-sources","消火栓不可用");
                                                        }else{
                                                                this.initMarkers([], "water-sources","消火栓不可用");
                                                        }
                                                }
                                        }else{
                                                if(val == "1") {
                                                        for(let i = 0;i<this.tableData.length;i++){
                                                                if(this.tableData[i].type == "消火栓" && this.tableData[i].status == "1"){
                                                                        arr.push(this.tableData[i])
                                                                }
                                                        }
                                                        if(arr.length>0){
                                                                this.addMarker(arr, "water-sources","消火栓可用");
                                                        }else{
                                                                this.addMarker([], "water-sources","消火栓可用");
                                                        }
                                                }
                                                if(val == "3") {
                                                        for(let i = 0;i<this.tableData.length;i++){
                                                                if(this.tableData[i].type == "消火栓" && this.tableData[i].status == "0"){
                                                                        arr.push(this.tableData[i])
                                                                }
                                                        }
                                                        if(arr.length>0){
                                                                this.addMarker(arr, "water-sources","消火栓不可用");
                                                        }else{
                                                                this.addMarker([], "water-sources","消火栓不可用");
                                                        }
                                                }
                                        }
                                }else{
                                        for(let i = 0;i<this.tableData.length;i++){
                                                if(this.tableData[i].type == "消火栓" && this.tableData[i].status == "1"){
                                                        arr.push(this.tableData[i])
                                                }
                                        }
                                        setTimeout(()=>{
                                                this.addMarker(arr, "water-sources","消火栓可用");
                                        },500)

                                }
                        }
                })
        }else if(val ==2){
                await this.$axios.post(this.$api.water.baseGgpFacilityList, 
                        {
                                facilityType:[1]
                        }
                ).then((res) => {
                        let arr = []
                        if (res.data.length>0) {
                                for(let i = 0;i<res.data.length;i++){
                                        arr.push(res.data[i])
                                }
                                if (this.stroes.$state.mapBool == 1) {
                                        this.initMarkers(arr, "water-sources","天然水源");
                                }else{
                                        this.addMarker(arr, "water-sources","天然水源");
                                }
                        }else{
                                if (this.stroes.$state.mapBool == 1) {
                                        this.initMarkers([], "water-sources","天然水源");
                                }else{
                                        this.addMarker([], "water-sources","天然水源");
                                }
                        }
                })
        }
        
    },
    /* 水源情况 交互待定 */
    FireWaterListClick(row, event, column) {
      let arr = [];
      arr.push(row);
      // this.addMarker(arr,'water')
    },
    /* 消防水源数量  水源性质占比 （2模块）*/
    async getFireWaterStatistics() {
      let res = await this.$axios
        .get(
          this.$api.water.fireWaterStatistics +
            "?" +
            this.$qs.stringify({
              // startTime: this.stores.$state.timeList[0] || "",
              // endTime: this.stores.$state.timeList[1] || "",
            })
        )
        .then((res) => {
          if (res) {
            this.fireWaterStatisticsObj = res.data;
            this.fireWaterStatisticsObj.waterIntact = parseFloat(res.data.waterIntact.toFixed(2));
            let total = res.data.municipalWater + res.data.residentWater + res.data.unitWater; + 11 //市政用水 + 居民水源 + 单位用水
            let funnelList = [
              { name: "市政水源", reaVal: Number(((this.fireWaterStatisticsObj.municipalWater / total) * 100).toFixed(2)), data: this.fireWaterStatisticsObj.municipalWater },
              { name: "居民水源", reaVal: Number(((this.fireWaterStatisticsObj.residentWater / total) * 100).toFixed(2)), data: this.fireWaterStatisticsObj.residentWater },
              { name: "单位水源", reaVal: Number(((this.fireWaterStatisticsObj.unitWater / total) * 100).toFixed(2)), data: this.fireWaterStatisticsObj.unitWater },
              // { name: "天然水源", reaVal: Number(((this.fireWaterStatisticsObj.unitFireCode / total) * 100).toFixed(2)), data: this.fireWaterStatisticsObj.unitFireCode },
              { name: "天然水源", reaVal: Number(((11 / total) * 100).toFixed(2)), data: 11 },
            ].sort((a, b) => {
              return a.data - b.data;
            });
            // let funnelList = [
            //   { name: "市政水源", reaVal: 50.62, data: 10047 },
            //   { name: "居民水源", reaVal: 21.48, data: 4263 },
            //   { name: "单位水源", reaVal: 27.84, data: 5526 },
            //   { name: "天然水源", reaVal: 0.06, data: 11 },
            // ].sort((a, b) => {
            //   return a.data - b.data;
            // });
            funnelList.map((val, ind) => (val.value = ind * 20 + 20));
            this.fireWaterStatisticsObj.funnelList = funnelList;
          }
        })
    },
    searchTime(val) {
      this.timeArea = val;
      this.getSiAeAllCollect();
    },

    /**
     * @类型事件
     */
    checkboxChange(val) {
      this.checkedArray.checkedData[0] = val
      this.getFireWater(val)
    },
  },
};
</script>
<style lang="scss" scoped>
.contentBox {
    .leftBox {
        .leftTop {
            height: 50%;
            max-height: 50%;
            .leftTopContent {
                > .el-row {
                    margin-top: 1vh;
                    > .el-col {
                        margin-top: 0.5vh;
                        font-size: 0.2rem;
                        .c1 {
                            color: rgba(255, 199, 6, 0.5);
                        }
                        .c2 {
                            color: rgba(11, 255, 109, 0.6);
                        }
                        .c3 {
                            color: #fd0018;
                        }
                        .c4 {
                            color: rgba(255, 199, 6, 0.8);
                        }
                    }
                }
            }
        }

        .leftCenter {
            height: calc(40% - 0.125rem);
            max-height: calc(40% - 0.125rem);
            margin-top: 0.125rem;
            justify-content: space-between;
            align-items: center;
            box-sizing: border-box;
            .leftCenterContent {
                height: calc(100% - 0.4375rem);
                display: flex;

                .contentEcharts {
                    width: 50%;
                    padding-right: 0.25rem;
                }
                & > .el-row:last-child {
                    width: 50%;
                    display: flex;
                    justify-content: space-between;
                    align-items: center;
                    margin: auto 0;
                    & > .el-col {
                        width: 100%;
                        //height: 0.6875rem;
                        height: 0.5rem; //大屏
                        // background: url(~@a/img/enforce/bg5.png) no-repeat;
                        background-size: 100% 100%;
                        border-radius: 0.125rem;
                        padding: 0 0.3rem;
                        margin-bottom: 0.15rem;
                        display: flex;
                        justify-content: space-between;
                        align-items: center;
                        box-shadow: inset 0 0 0.2rem 0.0125rem #30cfff;
                        border: 1px solid transparent;
                        span {
                            background-image: linear-gradient(
                                0deg,
                                #82b5ea 0%,
                                #52ffff 0%,
                                #2aacfa 100%
                            );
                            font-weight: 500;
                            color: #52ffff;
                            -webkit-background-clip: text;
                            -webkit-text-fill-color: transparent;
                        }
                        & > span:first-child {
                            font-size: 0.225rem;
                        }
                        & > span:last-child {
                            font-size: 0.35rem;
                        }
                    }
                }

                // & > .el-col:nth-child(1) {
                //   & > span:last-child {
                //     color: #fd0018;
                //   }
                // }
                // & > .el-col:nth-child(2) {
                //   & > span:last-child {
                //     color: #04e7ef;
                //   }
                // }
                // & > .el-col:nth-child(1) {
                //   & > span:last-child {
                //     color: #53fd00;
                //   }
                // }
            }
        }
        .leftCenter2 {
            height: calc(60% - 0.125rem);
            max-height: calc(60% - 0.125rem);
            margin-top: 0.125rem;
            justify-content: space-between;
            align-items: center;
            box-sizing: border-box;
            .leftCenterContent {
                height: calc(100% - 0.4375rem);
                display: flex;

                .contentEcharts {
                    width: 50%;
                    padding-right: 0.25rem;
                }
                & > .el-row:last-child {
                    width: 50%;
                    display: flex;
                    justify-content: space-between;
                    align-items: center;
                    margin: auto 0;
                    & > .el-col {
                        width: 100%;
                        //height: 0.6875rem;
                        height: 0.5rem; //大屏
                        // background: url(~@a/img/enforce/bg5.png) no-repeat;
                        background-size: 100% 100%;
                        border-radius: 0.125rem;
                        padding: 0 0.3rem;
                        margin-bottom: 0.15rem;
                        display: flex;
                        justify-content: space-between;
                        align-items: center;
                        box-shadow: inset 0 0 0.2rem 0.0125rem #30cfff;
                        border: 1px solid transparent;
                        span {
                            background-image: linear-gradient(
                                0deg,
                                #82b5ea 0%,
                                #52ffff 0%,
                                #2aacfa 100%
                            );
                            font-weight: 500;
                            color: #52ffff;
                            -webkit-background-clip: text;
                            -webkit-text-fill-color: transparent;
                        }
                        & > span:first-child {
                            font-size: 0.225rem;
                        }
                        & > span:last-child {
                            font-size: 0.35rem;
                        }
                    }
                }
            }
        }
    }
    .rightBox {
        .rightTop {
            height: 50%;
            max-height: 50%;
            .rightBoxContent {
                width: 100%;
                height: calc(100% - 0.4375rem);
                display: flex;
                flex-direction: column;
                justify-content: space-between;
                padding: 0.125rem 0;
                box-sizing: border-box;
                .funnelCon {
                    flex: 1;
                    width: 100%;
                    box-sizing: border-box;
                    padding: 0.125rem 0;
                    & > .el-col:last-child {
                        height: 100%;
                        display: flex;
                        flex-direction: column;
                        justify-content: space-between;
                        align-items: center;
                        flex-wrap: wrap;
                        & > .el-col {
                            width: 100%;
                            height: 0.625rem;
                            flex: none;
                            background-image: linear-gradient(
                                90deg,
                                transparent 0%,
                                transparent 50%,
                                #06305a 80%,
                                #0e6dcc 100%
                            );
                            padding: 0 0.3rem;
                            display: flex;
                            justify-content: space-between;
                            align-items: center;
                            span {
                                font-weight: 500;
                                color: #fff;
                            }
                            & > span:first-child {
                                font-size: 0.2rem;
                            }
                            & > span:last-child {
                                font-size: 0.3rem;
                            }
                        }
                        & > .el-col:nth-child(1) {
                            & > span:last-child {
                                color: #ffe118;
                            }
                        }
                        & > .el-col:nth-child(2) {
                            & > span:last-child {
                                color: #0bff72;
                            }
                        }
                        & > .el-col:nth-child(3) {
                            & > span:last-child {
                                color: #00d4ff;
                            }
                        }
                        & > .el-col:nth-child(4) {
                            & > span:last-child {
                                color: rgba(12, 210, 0, 1);
                            }
                        }
                    }
                }
                .gaugeCon {
                    height: 1.25rem;
                    width: 100%;
                    & > .el-col {
                        height: 100%;
                        padding: 0.0625rem 0;
                        & > .el-row {
                            width: 100%;
                            height: 100%;
                            & > .el-col {
                                height: 100%;
                                background-image: linear-gradient(
                                    0deg,
                                    rgba(9, 114, 156, 0.2),
                                    transparent 20%,
                                    transparent 80%,
                                    rgba(9, 114, 156, 0.2)
                                );
                                // &:first-child {

                                // }
                                &:last-child {
                                    display: flex;
                                    align-items: flex-end;
                                    justify-content: space-between;
                                    flex-direction: column;
                                    // padding: 0.25rem 0.375rem;
                                    box-sizing: border-box;

                                    div {
                                        color: #fff;
                                        margin: auto;
                                        div:first-child {
                                            font-size: 0.3rem;
                                        }
                                        div:last-child {
                                            font-size: 0.2rem;
                                        }
                                    }
                                }
                            }
                        }
                        &:first-child {
                            padding-right: 0.125rem;
                        }
                        &:last-child {
                            padding-left: 0.125rem;
                        }
                    }
                }
            }
        }
        .rightCenter {
            height: calc(50% - 0.125rem);
            max-height: calc(50% - 0.125rem);
            margin-top: 0.125rem;
            flex: 1;
            box-sizing: border-box;
            .rightCenterContent {
                height: calc(100% - 0.4375rem);
            }
        }
    }
}
          .color2 {
            color:#fd0018;
          }
          .color1 {
            color: #04e7ef;
          }
        // }
        // & > .el-col:nth-child(2) {
        //   & > span:last-child {
        //     color: #04e7ef;
        //   }
        // }
        // & > .el-col:nth-child(1) {
        //   & > span:last-child {
        //     color: #53fd00;
        //   }
        // }
</style>