<template>
  <div id="data-statis">
    <div id="amap-container"></div>
    <div class="map-info">
      <div class="min-score">
        <div class="rote blue"></div>
        <div class="number-score">≥{{warningNum[1]}}正常</div>
      </div>
      <div class="min-score">
        <div class="rote red"></div>
        <div class="number-score">＜{{warningNum[1]}}预警</div>
      </div>
    </div>
    <div class="left-area">
      <Section class="sections" title="政府监管">
        <template #right-slot>
          <span class="show-more" @click="showZFJG">查看更多</span>
        </template>
        <STable
          :headers="header1"
          :table-data="data1"
          @row-click="rowClickZFJG"
        >
          <template slot-scope="scope">
            <template v-if="scope.header.slot == 'regulation_score'">
              <span
                :style="{
                  color:
                    scope.row.regulation_score < warningNum[2] ? '#f86262' : '',
                }"
                >{{ scope.row.regulation_score }}</span
              >
            </template>
          </template>
        </STable>
      </Section>
      <Section class="sections" title="工程质量">
        <template #right-slot>
          <span class="show-more" @click="showGCZL">查看更多</span>
        </template>
        <STable
          :headers="header2"
          :table-data="data2"
          @row-click="rowClickGCZL"
        >
          <template slot-scope="scope">
            <template v-if="scope.header.slot == 'appearance_quality_score'">
              <span
                >{{ scope.row.appearance_quality_score>0?scope.row.appearance_quality_score:'--' }}</span
              >
            </template>
            <template v-if="scope.header.slot == 'quality_check_score'">
              <span
                :style="{
                  color:
                    scope.row.quality_check_score < warningNum[4]
                      ? '#f86262'
                      : '',
                }"
                >{{ scope.row.quality_check_score }}</span
              >
            </template>
            <template v-if="scope.header.slot == 'quality_total_score'">
              <span
                :style="{
                  color:
                    scope.row.quality_total_score < warningNum[6]
                      ? '#f86262'
                      : '',
                }"
                >{{ scope.row.quality_total_score }}</span
              >
            </template>
          </template>
        </STable>
      </Section>
      <Section class="sections" title="创新创优">
        <template #right-slot>
          <span class="show-more" @click="showCXCY">查看更多</span>
        </template>
        <STable
          :headers="header3"
          :table-data="data3"
          @row-click="rowClickCXCY"
        >
          <template slot-scope="scope">
            <template v-if="scope.header.slot == 'excellence_score'">
              <span
                :style="{
                  color:
                    scope.row.excellence_score < warningNum[3] ? '#f86262' : '',
                }"
                >{{ scope.row.excellence_score }}</span
              >
            </template>
          </template>
        </STable>
      </Section>
    </div>
    <div class="right-area">
      <Section class="sections long" type="long" :title="isProvice ? '浙江省' : currentCityName">
        <template #left-slot v-if="!isProvice">
          <div class="left-slot-img" @click="returnCity">
            <img src="@/assets/images/index/icon_mapTuiChu.png" alt="" class="map-return">
          </div>
        </template>
        <template #right-slot>
          <span class="show-more" @click="showCityList">查看更多</span>
        </template>
        <div class="get-points" v-if="!isProvice">
          <div class="points">
            <div
              class="grade"
              :style="{
                color: score_count < warningNum[6] ? '#f86262' : '#5aefd1',
              }"
            >
              <div class="label">区域总得分：</div>
              <countTo
                :decimals="2"
                ref="countTo"
                :startVal="0"
                :endVal="Number(score_count)"
                :duration="3000"
              ></countTo>
            </div>
          </div>
        </div>
        <!-- <div class="switch-buttons">
          <div :class="[activeTab == 1 ? 'active' : '']" @click="switchList(1)">
            政府监管
          </div>
          <div :class="[activeTab == 2 ? 'active' : '']" @click="switchList(2)">
            质量评定
          </div>
          <div :class="[activeTab == 3 ? 'active' : '']" @click="switchList(3)">
            质量检测
          </div>
        </div> -->
        <STable2
          :style="{ marginTop: '.1rem', height: `calc(100% - ${isProvice ? '0.1rem' : '0.6rem'})` }"
          :headers="header4_1"
          :table-data="data4"
          @row-click="(e)=>{rowClickArea(0, e)}"
        >
          <template slot-scope="scope">
            <template v-if="scope.header.slot == 'regulation_score'">
              <span
                :style="{
                  color:
                    scope.row.regulation_score < warningNum[2] ? '#f86262' : '',
                }"
              >
                <countTo
                  :decimals="
                    getDecimalPlaces(Number(scope.row.regulation_score))
                  "
                  :startVal="0"
                  :endVal="Number(scope.row.regulation_score)"
                  :duration="3000"
                ></countTo>
              </span>
            </template>

            <template v-if="scope.header.slot == 'excellence_score'">
              <span
                :style="{
                  color:
                    scope.row.excellence_score < warningNum[3] ? '#f86262' : '',
                }"
              >
                <countTo
                  :decimals="
                    getDecimalPlaces(Number(scope.row.excellence_score))
                  "
                  :startVal="0"
                  :endVal="Number(scope.row.excellence_score)"
                  :duration="3000"
                ></countTo
              ></span>
            </template>
            <template v-if="scope.header.slot == 'quality_total_score'">
              <span
                :style="{
                  color:
                    scope.row.quality_total_score < warningNum[7]
                      ? '#f86262'
                      : '',
                }"
              >
                <countTo
                  :decimals="
                    getDecimalPlaces(Number(scope.row.quality_total_score))
                  "
                  :startVal="0"
                  :endVal="Number(scope.row.quality_total_score)"
                  :duration="3000"
                ></countTo
              ></span>
            </template>
            <template v-if="scope.header.slot == 'total_score'">
              <span
                :style="{
                  color: scope.row.total_score < warningNum[6] ? '#f86262' : '',
                }"
              >
                <countTo
                  :decimals="getDecimalPlaces(Number(scope.row.total_score))"
                  :startVal="0"
                  :endVal="Number(scope.row.total_score)"
                  :duration="3000"
                ></countTo
              ></span>
            </template>
          </template>
        </STable2>
        <!-- activeTab == 1 ? header4_1 : activeTab == 2 ? header4_2 : header4_3 -->

        <!-- <div class="no-data" v-if="activeTab == 3">
          <div class="inner">
            <img src="@/assets/images/index/no-data.png" alt="" />
            <div>暂无数据</div>
          </div>
        </div> -->
      </Section>
    </div>

    <ProjectList
      :visible="projectListVisible"
      @change-visible="(val) => (projectListVisible = val)"
    ></ProjectList>

    <ZFJGDialog
      :data="currentRowData"
      :visible="ZFJGVisible"
      @change-visible="(val) => (ZFJGVisible = val)"
    ></ZFJGDialog>

    <CXCYDialog
      :data="currentRowData"
      :visible="CXCYVisible"
      @change-visible="(val) => (CXCYVisible = val)"
    ></CXCYDialog>

    <GCZLDialog
      :tabList="tabListDialog"
      :tabName="tabNameDialog"
      :data="currentRowData"
      :title="GCZLDialogTitle"
      :visible="GCZLVisible"
      @change-visible="(val) => (GCZLVisible = val)"
    ></GCZLDialog>

    <AreaProjectDetail
      :data="currentRowData"
      :visible="areaDialogVisible"
      @change-visible="(val) => (areaDialogVisible = val)"
    ></AreaProjectDetail>
    <QuestionDetail
      :question-id="questionId"
      :visible="QuestionDetailVisible"
      @change-visible="(val) => (QuestionDetailVisible = val)"
    >
    </QuestionDetail>
    <div class="bottom-area">
      <Section2 :tabList="tabListArr" class="bottom-section" :titleType="false" @listChangeTab="changeTab">
        <STable2
          :headers="header5"
          :table-data="data5"
          @row-click="(e)=>{rowClickArea(0, e)}"
          v-if="tabListActive == 0"
        >
          <template slot-scope="scope">
            <template v-if="scope.header.slot == 'score'">
              <span
                :style="{
                  color: '#f86262',
                }"
              >
                {{ scope.row.score }}
              </span>
            </template>
          </template>
        </STable2>
        <STable2
          :headers="header6"
          :table-data="data6"
          @row-click="(e)=>{rowClickArea(1, e)}"
          v-if="tabListActive == 1"
        >
          <template slot-scope="scope">
            <template v-if="scope.header.slot == 'score'">
              <span
                :style="{
                  color: '#f86262',
                }"
              >
                {{ scope.row.question_level_str }}
              </span>
            </template>
          </template>
        </STable2>
        <STable2
          :headers="header7"
          :table-data="data7"
          @row-click="(e)=>{rowClickArea(2, e)}"
          v-if="tabListActive == 2"
        >
          <template slot-scope="scope">
            <template v-if="scope.header.slot == 'score1'">
              <span v-if="scope.row.check_type_3" :style="{
                  color: '#f86262',
                }">
                {{ scope.row.check_type_3 || 0 }}%
              </span>
              <span v-else>
                0%
              </span>
            </template>
            <template v-if="scope.header.slot == 'score2'">
              <span v-if="scope.row.check_type_2" :style="{
                  color: '#f86262',
                }">
                {{ scope.row.check_type_2 || 0 }}%
              </span>
              <span v-else>
                0%
              </span>
            </template>
            <template v-if="scope.header.slot == 'score3'">
              <span v-if="scope.row.check_type_1" :style="{
                  color: '#f86262',
                }">
                {{ scope.row.check_type_1 || 0 }}%
              </span>
              <span v-else>
                0%
              </span>
            </template>
          </template>
        </STable2>
        <STable2
          :headers="header8"
          :table-data="data8"
          @row-click="(e)=>{rowClickGCZL(e)}"
          v-if="tabListActive == 3"
        >
          <template slot-scope="scope">
            <template v-if="scope.header.slot == 'avg_appearance_score'">
              <span>
                {{ scope.row.avg_appearance_score>0?(scope.row.avg_appearance_score+'%'):'--' }}
              </span>
            </template>
            <template v-if="scope.header.slot == 'appearance_quality_score'">
              <span>
                {{ scope.row.appearance_quality_score>0?scope.row.appearance_quality_score:'--' }}
              </span>
            </template>
          </template>
        </STable2>
        <STable2
          :headers="header9"
          :table-data="data9"
          @row-click="(e)=>{rowClickSgqx(e)}"
          v-if="tabListActive == 4"
        >
          <template slot-scope="scope">
            <template v-if="scope.header.slot == 'score_per'">
              <span>
                {{ scope.row.score_per }}%
              </span>
            </template>
          </template>
        </STable2>
      </Section2>
    </div>
  </div>
</template>
<script>
import * as echarts from "echarts";
import { zhejiangJson } from "@/assets/data/zhejiang.js";
import {
  getMapData,
  getScoreStatusByCity,
  getProjectList,
  getImportantQuestion,
  getWarningStatusNum,
  getGovernmentRegulation,
  getQualityInspection,
  getQualityAppearance,
  getQualityIncident
} from "@/api/dataStatis";

import { mapState } from "vuex";
import zhejiangMapData from "@/assets/data/mapData.json";
import Section2 from "@/components/common/Section2.vue";
import STable2 from "@/components/common/STable2.vue";
import ProjectList from "@/views/DataStatis/project/Index.vue";
import CountTo from "vue-count-to";
import ZFJGDialog from "./Dialogs/ZFJGDialog.vue";
import CXCYDialog from "./Dialogs/CXCYDialog.vue";
import GCZLDialog from "./Dialogs/GCZLDialog/Index.vue";
import AreaProjectDetail from "./Dialogs/AreaProjectDetail.vue";
import QuestionDetail from "./Dialogs/QuestionDetail.vue";
export default {
  name: "DataStatis",
  components: {
    Section2,
    STable2,
    ProjectList,
    CountTo,
    ZFJGDialog,
    CXCYDialog,
    GCZLDialog,
    AreaProjectDetail,
    QuestionDetail,
  },
  data() {
    return {
      mapLoading: true,
      header1: [
        {
          name: "工程名称",
          props: "project_name",
          width: "70%",
          headerStyle: {
            textAlign: "left",
          },
          style: {},
          align: "left",
        },
        {
          name: "政府监管得分",
          props: "regulation_score",
          width: "30%",
          slot: "regulation_score",
        },
      ],
      header2: [
        {
          name: "工程名称",
          props: "project_name",
          width: "45%",
          headerStyle: {
            textAlign: "left",
          },
          style: {},
          align: "left",
        },
        {
          name: "外观质量",
          props: "appearance_quality_score",
          width: "20%",
          slot: "appearance_quality_score",
        },
        {
          name: "质量检测",
          props: "quality_check_score",
          width: "20%",
          slot: "quality_check_score",
        },
        {
          name: "总得分",
          props: "quality_total_score",
          width: "15%",
          slot: "quality_total_score",
        },
      ],
      header3: [
        {
          name: "工程名称",
          props: "project_name",
          width: "70%",
          headerStyle: {
            textAlign: "left",
          },
          style: {},
          align: "left",
        },
        {
          name: "创新创优得分",
          props: "excellence_score",
          width: "30%",
          slot: "excellence_score",
        },
      ],

      data1: [],

      data2: [],

      data3: [],

      header4_1: [
        {
          name: "工程名称",
          props: "project_name",
          width: "35%",
          headerStyle: {
            textAlign: "left",
          },
          style: {},
          align: "left",
        },
        {
          name: "政府监管",
          props: "regulation_score",
          width: "15%",
          slot: "regulation_score",
        },
        {
          name: "工程质量",
          props: "quality_total_score",
          width: "15%",
          slot: "quality_total_score",
        },
        {
          name: "创新创优",
          props: "excellence_score",
          width: "15%",
          slot: "excellence_score",
        },
        {
          name: "工程总得分",
          props: "total_score",
          width: "20%",
          slot: "total_score",
        },
      ],

      data4: [],

      header5: [
        {
          name: "工程名称",
          props: "project_name",
          width: "40%",
          align: "left",
        },
        {
          name: "所属区域",
          props: "city_name",
          width: "15%",
          headerStyle: {},
          style: {},
          align: "left",
        },
        {
          name: "预警类型",
          props: "type_str",
          width: "15%",
        },
        {
          name: "合格分值",
          props: "warning",
          width: "15%",
        },
        {
          name: "当前分值",
          props: "score",
          width: "15%",
          slot: "score",
        },
      ],
      data5: [],
      data6: [],
      data7: [],
      header6: [
        {
          name: "工程名称",
          props: "project_name",
          width: "25%",
          align: "left",
        },
        {
          name: "所属区域",
          props: "city_name",
          width: "10%",
          align: "left",
        },
        {
          name: "单位名称",
          props: "units_company_name",
          width: "20%",
        },
        {
          name: "单位类型",
          props: "utype_str",
          width: "10%",
        },
        // {
        //   name: "问题类型",
        //   props: "name",
        //   width: "10%",
        // },
        {
          name: "问题种类",
          props: "question_type_str",
          width: "10%",
        },
        {
          name: "记录时间",
          props: "create_time",
          width: "15%",
        },
        {
          name: "问题等级",
          props: "question_level_str",
          width: "10%",
          slot: "score",
        },
      ],
      header7: [
        {
          name: "工程名称",
          props: "project_name",
          width: "20%",
          align: "left",
        },
        {
          name: "所属区域",
          props: "city_name",
          width: "25%",
          align: "left",
        },
        {
          name: "预警类型",
          props: "entrust_type_str",
          width: "10%",
        },
        {
          name: "中间产品（重要部位）",
          props: "warning",
          width: "15%",
          slot: "score1",
        },
        {
          name: "原材料（重要部位）",
          props: "warning",
          width: "15%",
          slot: "score2",

        },
        {
          name: "实体检测（重要部位）",
          props: "warning",
          width: "15%",
          slot: "score3",
        }
      ],
      activeTab: 1,

      mapCenter: [],
      AMap: null,
      map: null,
      mapActive: 1,
      loca: null,
      renderColor: {
        A: "#208995",
        B: "#2a5dc6",
        C: "#23366f",
        D: "#a9a715",
        E: "#b74f4f",
      },
      districtArr: [],
      polygons: [],
      currentCityName: "",
      currentCityId: "",
      zfjg_score: 0,
      zljc_score: 0,
      score_count: 0,
      projectListVisible: false,
      showNumber: false,
      warningNum: {
        1: 0,
        2: 0,
        3: 0,
        4: 0,
        5: 0,
        6: 0,
        7: 0,
      },
      currentRowData: {},
      ZFJGVisible: false,
      CXCYVisible: false,
      GCZLVisible: false,
      areaDialogVisible: false,
      tabListArr: ['工程分值预警', '政府监管预警', '质量检测预警','外观质量预警', '质量事故/缺陷预警'],
      tabListActive: 0,
      QuestionDetailVisible: false,
      isProvice: true,
      questionId: "",
      tabListDialog: [],
      tabNameDialog: "",
      GCZLDialogTitle: '',
      header8: [
        {
          name: "工程名称",
          props: "project_name",
          width: "32%",
          align: "left",
        },
        {
          name: "所属区域",
          props: "city_name",
          width: "8%",
        },
        {
          name: "主要单位工程总数",
          props: "main_general_num",
          width: "10%",
        },
        {
          name: "一般单位工程总数",
          props: "general_num",
          width: "10%",

        },
        {
          name: "单位工程总数",
          props: "part_num",
          width: "8%",
        },
        {
          name: "质量事故",
          props: "quality_incident",
          width: "8%",
        },
        {
          name: "质量缺陷",
          props: "quality_defects",
          width: "8%",
        },
        {
          name: "平均得分率",
          props: "avg_appearance_score",
          width: "8%",
          slot: "avg_appearance_score",
        },
        {
          name: "整体得分",
          props: "appearance_quality_score",
          width: "8%",
          slot: "appearance_quality_score",
        }
      ],
      data8: [],
      header9: [
        {
          name: "工程名称",
          props: "project_name",
          width: "50%",
          align: "left",
        },
        {
          name: "所属区域",
          props: "city_name",
          width: "8%",
        },
        {
          name: "较大及以上质量事故",
          props: "zdsg_num",
          width: "12%",
        },
        {
          name: "一般质量事故",
          props: "ybsg_num",
          width: "10%",
        },
        {
          name: "质量缺陷",
          props: "zlqx_num",
          width: "10%",
        },
        {
          name: "扣除分值",
          props: "score_per",
          width: "10%",
          slot: "score_per",
        }
      ],
      data9: []
    };
  },
  methods: {
    initMap() {
      getMapData().then((res) => {
        var newZhejiangMapData = [];
        res.data.map((item) => {
          newZhejiangMapData.push({
            name: item.name,
            value: [
              zhejiangMapData.filter((cx) => {
                return cx.name == item.name;
              })[0].value[0],
              zhejiangMapData.filter((cx) => {
                return cx.name == item.name;
              })[0].value[1],
              item.score,
            ],
            id: item.id,
          });
          // if (item.name == "杭州市") {
          //   this.currentCityId = item.id;
          //   this.currentCityName = item.name;
          // }
        });
        this.switchList(1);
        this.initMapData("amap-container", zhejiangJson, newZhejiangMapData, 1);
      });
    },
    getData() {
      getWarningStatusNum().then((res) => {
        this.warningNum = res.data;
        window.warningNum = res.data;
        getProjectList({ limit: 100 }, false).then((res) => {
          this.data1 = res.data.data;
          this.data2 = res.data.data;
          // if (this.data2.length != 0) {
          //   for(var i=0; i<this.data2.length; i++){
          //     for(var j=i+1;j<this.data2.length;j++){
          //       //如果第一个比第二个小，就交换他们两个位置
          //       if(this.data2[i].quality_total_score < this.data2[j].quality_total_score){
          //         var temp = this.data2[i].quality_total_score;
          //         this.data2[i].quality_total_score = this.data2[j].quality_total_score;
          //         this.data2[j].quality_total_score = temp;
          //       }
          //     }
          //   }
          // }
          this.data3 = res.data.data;
        });
        getImportantQuestion({ limit: 100 }).then((res) => {
          this.data5 = res.data;
        });
        this.initMap();
      });
    },

    getDecimalPlaces(num) {
      const str = String(num);
      const dotIndex = str.indexOf(".");
      return dotIndex !== -1 ? str.length - dotIndex - 1 : 0;
    },
    async load() {
      console.log("load");
    },

    switchList(type) {
      this.activeTab = type;
      this.data4 = [];
      this.showNumber = false;
      let name = this.isProvice ? 'province_id' : 'city_id'
      let params ={
        [name]: this.currentCityId,
        limit: 100 
      }
      if (params.province_id) {
          params.province_id = 31
      }
      getProjectList(params, false).then(
        (res) => {
          this.data4 = res.data.data;
        }
      );
      getScoreStatusByCity(this.currentCityId).then((res) => {
        this.score_count = res.data.score_count;
        this.$nextTick(() => {
          this.showNumber = true;
        });
      });

      // if (type == 1) {

      // } else if (type == 2) {
      //   this.data4 = [
      //     {
      //       name: "环湖大堤施工2标",
      //       value1: "堤防工程",
      //       value2: "92.8%",
      //     },
      //     {
      //       name: "环湖大堤施工2标",
      //       value1: "蔡浦港闸站工程",
      //       value2: "93.4%",
      //     },
      //     {
      //       name: "环湖大堤施工2标",
      //       value1: "其他口门建筑物单位工程",
      //       value2: "89.5%",
      //     },
      //     {
      //       name: "环湖大堤施工2标",
      //       value1: "夹浦港-秋龙港-吴城港河道堤防工程",
      //       value2: "93.4%",
      //     },
      //     {
      //       name: "环湖大堤施工2标",
      //       value1: "夹浦港-秋龙港-吴城港闸站第一单位工程",
      //       value2: "91.9%",
      //     },
      //     {
      //       name: "环湖大堤施工2标",
      //       value1: "夹浦港-秋龙港-吴城港闸站第二单位工程",
      //       value2: "91.1%",
      //     },
      //     {
      //       name: "衢州市柯城区寺桥水库工程",
      //       value1: "混凝土面板堆石坝",
      //       value2: "/",
      //     },
      //     {
      //       name: "衢州市柯城区寺桥水库工程",
      //       value1: "导流泄放洞",
      //       value2: "/",
      //     },
      //     {
      //       name: "衢州市柯城区寺桥水库工程",
      //       value1: "溢洪道",
      //       value2: "/",
      //     },
      //     {
      //       name: "金华市安地灌区续建配套与节水改造项目（2021-2022年）调增项目施工标【金华市安地灌区续建配套与节水改造项目（2021-2022年）IV标】",
      //       value1: "渠道及信息化项目",
      //       value2: "/",
      //     },
      //   ];
      // } else if (type == 3) {
      //   this.data4 = [
      //     {
      //       name: "苍南县江南垟平原骨干排涝工程（龙港段）龙金运河和新兰闸站工程",
      //       value1: "98%",
      //     },
      //     {
      //       name: "慈溪市水资源开发利用二期（梅湖水库扩容工程）",
      //       value1: "87%",
      //     },
      //     {
      //       name: "东苕溪防洪后续西险大塘达标加固工程（杭州市段）",
      //       value1: "76.4%",
      //     },
      //     {
      //       name: "奉化区柏坑水库扩容工程",
      //       value1: "87.1%",
      //     },
      //     {
      //       name: "海宁市百里钱塘综合整治提升工程一期（盐仓段）",
      //       value1: "95.1%",
      //     },
      //     {
      //       name: "杭州市本级海塘安澜工程 （三堡至乔司段海塘）一期",
      //       value1: "98%",
      //     },
      //     {
      //       name: "杭州市本级海塘安澜工程（三堡船闸段海塘）",
      //       value1: "87%",
      //     },
      //     {
      //       name: "杭州市本级海塘安澜工程（珊瑚沙海塘）",
      //       value1: "76.4%",
      //     },
      //     {
      //       name: "杭州市本级海塘安澜工程（上泗南北大塘）二期",
      //       value1: "87.1%",
      //     },
      //     {
      //       name: "杭州市萧山区西江塘义桥段古海塘抢险加固工程",
      //       value1: "95.1%",
      //     },
      //     {
      //       name: "杭州市萧围西线（一工段至四工段）提标加固工程",
      //       value1: "98%",
      //     },
      //     {
      //       name: "湖州市苕溪清水入湖河道整治后续工程（德清县段）",
      //       value1: "87%",
      //     },
      //     {
      //       name: "环湖大堤（浙江段）后续工程（长兴段）",
      //       value1: "76.4%",
      //     },
      //     {
      //       name: "嘉兴市区城市防洪扩展工程三期（封闭工程）",
      //       value1: "87.1%",
      //     },
      //     {
      //       name: "金华市安地灌区续建配套与节水改造项目（2021-2022年）调增项目",
      //       value1: "95.1%",
      //     },
      //     {
      //       name: "杭州市本级海塘安澜工程（珊瑚沙海塘）",
      //       value1: "76.2%",
      //     },
      //   ];
      // }
    },
    initMapData(mapid, baseAreaJson, mapData, maplevel) {
      this.myChart = echarts.init(document.getElementById(mapid));
      echarts.registerMap(mapid, baseAreaJson);
      var outdata = []; //地图区域挂载数据
      mapData.forEach(function (item, index) {
        outdata.push({
          name: item.name,
          id: item.id,
          value: item.value[2],
          index: index,
        });
      });
      var _layoutSize = "100%";

      var option = {
        tooltip: {
          show: true,
          formatter: function (params) {
            if (
              params.seriesType == "scatter" ||
              params.seriesType == "effectScatter"
            ) {
              return false;
            }

            return params.name + "<br>" + params.value;
          },
        },
        grid: {
          left: "0%",
          right: "0%",
          top: "0%",
          bottom: "0%",
          show: true,
          borderWidth: 0,
          backgroundColor: "transparent",
        },
        // 地图的阴影底图
        geo: {
          map: mapid,
          left: 0,
          right: 0,
          bottom: 0,
          top: 0,
          aspectScale: 0.9,
          layoutCenter: ["50%", "50%"], //地图位置
          layoutSize: _layoutSize,
          itemStyle: {
            normal: {},
          },
          z: 1,
          animationDurationUpdate: 0,
          roam: false,

          data: outdata,
        },
        visualMap: {
          type: "piecewise",
          splitNumber: 2,
          min: 0,
          max: 100,
          align: "left",
          right: 20,
          bottom: 20,
          itemWidth: 60,
          itemHeight: 20,
          itemGap: 5,
          // itemSymbol: 'circle',
          orient: "vertical",
          //区域颜色
          color: ["#2f4ca3", "#8c2d2d"],
          //区域颜色范范围
          pieces: [
            { min: 0, max: Number(this.warningNum[1]) },
            { min: Number(this.warningNum[1]), max: 99999 },
          ],
          textStyle: {
            color: "#eee",
            fontSize: 14,
          },
          show: false,
        },
        series: [
          {
            type: "map",
            map: mapid,
            aspectScale: 0.9,
            layoutCenter: ["50%", "50%"], //地图位置
            layoutSize: _layoutSize,

            label: {
              normal: {
                show: false,
                fontFamily: "SourceHanSansCN",
                fontSize: "14",
                color: "#FEFEFE",
                position: "bottom",
              },
              emphasis: {
                show: false,
                fontFamily: "SourceHanSansCN",
                fontSize: "14",
                color: "#FEFEFE",
              },
            },
            select: {
              label: {
                color: "#fff",
                show: false,
              },
              itemStyle: {
                areaColor: "#5677ef",
                borderColor: "#14ddf5",
                borderWidth: 2,
              },
            },
            itemStyle: {
              normal: {
                borderColor: "#6b97f2",
                borderWidth: 1,
                color: "#032359",
                areaColor: "#23366f",
              },
              emphasis: {
                shadowColor: "rgba(0, 0, 0, 1)",
                shadowBlur: 10,
                shadowOffsetX: 5,
                shadowOffsetY: 5,
                areaColor: "#2a5dc6",
                // areaColor: {
                //   type: "linear-gradient",
                //   x: 0,
                //   y: 0,
                //   x2: 0,
                //   y2: 1,
                //   colorStops: [
                //     {
                //       offset: 0,
                //       color: "#15b5f5", // 0% 处的颜色
                //     },
                //     {
                //       offset: 1,
                //       color: "#106fd5",
                //     },
                //   ],
                // },
              },
            },

            z: 1,
            data: outdata.map((item) => {
              return {
                ...item,
                // selected: item.name == "杭州市",
              };
            }),
            roam: false,
          },

          {
            name: "点",
            type: "scatter",
            coordinateSystem: "geo",
            symbol: (value, params) => {
              if (value[2] < Number(this.warningNum[1])) {
                return (
                  "image://" + require("@/assets/images/index/icon_hong.png")
                );
              } else {
                return (
                  "image://" + require("@/assets/images/index/icon_lan.png")
                );
              }
            },

            colorBy: "data",
            symbolSize: 50,
            symbolOffset: [20, -20],
            label: {
              position: "inside",
              formatter: function (params) {
                return `${params.data.name}\n${Number(
                  params.data.value[2]
                ).toFixed(2)}分`;
              },
              show: true,
              color: "#fff",
              fontSize: 14,
              offset: [10, -6],
            },
            z: 3,
            data: mapData,
          },
        ],
      };
      this.myChart.clear();
      this.myChart.setOption(option);
      window.addEventListener("resize", () => {
        setTimeout(() => {
          this.myChart.resize();
        }, 500);
      });
      this.myChart.off().on("click", (params) => {
        if (maplevel == 1 && params.componentType === "series") {
          if (this.currentCityName == params.data.name) {
            this.currentCityName = "";
            this.isProvice = true
            this.switchList(1);
            return;
          }
          var streetName = null;
          var areaGUID = null;
          console.log(params);
          if (params.seriesType == "map") {
            // 地图
            streetName = params.data.name;
            areaGUID = params.data.id;
          } else {
            // 散点图
            streetName = params.name.split("|")[0];
            areaGUID = params.name.split("|")[1];
          }
          this.currentCityId = params.data.id;
          this.currentCityName = params.data.name;
          this.isProvice = false
          this.switchList(1);
        }
      });

      this.$nextTick(() => {
        this.myChart.resize();
      });
      // return myChart;
    },
    showZFJG() {
      this.projectListVisible = true;
      this.$eventBus.$emit("switchTab", "ZFJG");
    },
    showGCZL() {
      this.projectListVisible = true;
      this.$eventBus.$emit("switchTab", "GCZL");
    },
    showCXCY() {
      this.projectListVisible = true;
      this.$eventBus.$emit("switchTab", "CXCY");
    },
    showCityList() {
      this.projectListVisible = true;
      this.$eventBus.$emit("switchTab", "ProjectDetail");
    },
    rowClickZFJG(data) {
      this.currentRowData = data;
      this.ZFJGVisible = true;
    },
    rowClickCXCY(data) {
      this.currentRowData = data;
      this.CXCYVisible = true;
    },
    rowClickGCZL(data,type) {
      if (type && type == "zljc") {
        this.tabNameDialog = "ZLJC"
        this.tabListDialog = [{ name: "ZLJC", label: "质量检测" }];
        this.GCZLDialogTitle = '质量检测预警详情'
      } else {
        this.tabNameDialog = "ZLPD"
        this.tabListDialog = [
          { name: "ZLPD", label: "外观质量" },
          { name: "ZLJC", label: "质量检测" },
          { name: "sgqx", label: "质量事故/缺陷" },
        ];
        this.GCZLDialogTitle = '工程质量详情'
      }
      this.currentRowData = data;
      this.GCZLVisible = true;
    },
    rowClickSgqx(data){
      this.tabNameDialog = "ZLPD"
        this.tabListDialog = [
          { name: "ZLPD", label: "外观质量" },
          { name: "ZLJC", label: "质量检测" },
          { name: "sgqx", label: "质量事故/缺陷" },
        ];
        this.GCZLDialogTitle = '工程质量详情'
        this.GCZLVisible = true;
        this.$eventBus.$emit("switchTabGC", "sgqx");
    },
    rowClickArea(index, data) {
      console.log(index, data.type, data);
      if (index == 0) {
        if (data.id) {
        this.currentRowData = data;
        this.areaDialogVisible = true;
      } else {
        this.currentRowData = {
          ...data,
          id: data.project_id,
        };
        if (data.type == 5 || data.type == 7 || data.type == 4) {
          this.tabNameDialog = "ZLPD"
          this.tabListDialog = [
            { name: "ZLPD", label: "外观质量" },
            { name: "ZLJC", label: "质量检测" },
            { name: "sgqx", label: "质量事故/缺陷" },
          ];
          this.GCZLDialogTitle = '工程质量详情'
          this.GCZLVisible = true;
          if (data.type == 4) {
            this.$eventBus.$emit("switchTabGC", "ZLJC");
          }
        }

        if (data.type == 6) {
          this.areaDialogVisible = true;
        }
        if (data.type == 2) {
          this.ZFJGVisible = true;
        }
        if (data.type == 3) {
          this.CXCYVisible = true;
        }
      }
      }else if(index == 1){
        this.questionId = data.id
        this.QuestionDetailVisible = true;
      }else {
        this.rowClickGCZL(data, "zljc")
      }
    },
    changeTab(e){
      this.tabListActive = e
      if (e == 0) {
        getImportantQuestion({ limit: 100 }).then((res) => {
          this.data5 = res.data;
        });
      }
      if (e == 1) {
        getGovernmentRegulation({ limit: 100 }).then((res) => {
          this.data6 = res.data.data;
        });
      }
      if (e == 2) {
        getQualityInspection({ limit: 100 }).then((res) => {
          this.data7 = res.data.list;
        });
      }
      if (e == 3) {
        getQualityAppearance({ limit: 100 }).then((res) => {
          this.data8 = res.data;
        });
      }
      if (e == 4) {
        getQualityIncident({ limit: 100 }).then((res) => {
          this.data9 = res.data;
        });
      }
    },
    returnCity(){
      this.isProvice = true
       this.myChart.dispatchAction({
          type: 'unselect',
          name: this.currentCityName
       })
      this.currentCityName = ''
      this.switchList(1);
    },
  },

  mounted() {
    this.getData();

    window.clickDetail = this.clickDetail;
  },
  watch: {},
  destroyed() {
    this.map && this.map.destroy();
  },
  computed: {
    ...mapState(["userInfo"]),
  },
};
</script>
<style lang="less" scoped>
.map-info{
  width: 177px;
  height: 34px;
  background: rgba(0, 0, 0, .5);
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 0 10px;
  position: fixed;
  right: 550px;
  bottom:  calc(calc(100% - 90px) / 3 - calc(28px / 3) + 20px);
  z-index: 99;
  .min-score{
    display: flex;
    align-items: center;
    font-size: 14px;
    color: #FFFFFF;
    .rote{
      width: 10px;
      height: 10px;
      border: 1px solid #BDCAE4;
      margin-right: 5px;
    }
    .blue{
      background: #374D9D;
    }
    .red{
      background: #7F3431;
    }
  }
}
.left-slot-img{
  width: 35px;
  height: 100%;
  &:hover{
    cursor: pointer;
  }
  .map-return{
  width: 16px;
  height: 15px;
  margin-left: 10px;
}
}
#data-statis {
  position: relative;
  width: 100%;
  height: 100%;
}
#amap-container {
  position: absolute;
  left: 50%;
  transform: translateX(-50%);
  top: 0;
  width: calc(100% - 1080px);
  height: calc(100% - calc(calc(100% - 90px) / 3 - calc(28px / 3)));
  background: transparent !important;
  z-index: 5;
}
.left-area {
  width: 530px;
  left: 10px;
  top: 80px;
  position: fixed;
  height: calc(100% - 90px);
  z-index: 999;
}
.right-area {
  position: fixed;
  right: 10px;
  top: 80px;
  width: 530px;
  height: calc(
    calc(100% - 90px) - calc(calc(100% - 90px) / 3 - calc(28px / 3)) - 10px
  );
  z-index: 999;
}
.bottom-area {
  position: fixed;
  width: calc(100% - 570px);
  left: 560px;
  bottom: 10px;
  right: 10px;
  height: calc(calc(100% - 90px) / 3 - calc(28px / 3)) !important;
  z-index: 999;
}
.sections {
  height: calc(100% / 3 - calc(28px / 3)) !important;
  margin-bottom: 14px;
  &:last-child {
    margin-bottom: 0;
  }
}
.sections.long {
  height: calc(100% - calc(28px / 3)) !important;
}
.bottom-section {
  width: 100%;
  height: 100% !important;
}
::v-deep .span-status {
  &.green {
    color: #47ae5f;
  }
  &.orange {
    color: #df7a1f;
  }
  &.red {
    color: #df441f;
  }
  &.blue {
    color: #b83be7;
  }
}
.lt {
  position: fixed;
  left: 0;
  width: 500px;
  top: 80px;
  height: 100%;
  z-index: 10;
}
.rt {
  position: fixed;
  right: 0;
  width: 500px;
  top: 80px;
  height: 100%;
  z-index: 10;
}
.btm {
  position: fixed;
  bottom: 0;
  left: 0;
  width: 100%;
  height: calc(calc(100% - 90px) / 3 - calc(28px / 3) + 50px) !important;
  z-index: 10;
}
.switch-buttons {
  margin-top: 10px;
  line-height: 40px;
  display: flex;
  justify-content: space-between;
  div {
    background: url("@/assets/images/index/icon_yier@2x.png");
    background-repeat: no-repeat;
    background-size: 100% 100%;
    margin-right: 4px;
    width: calc(100% / 3 - calc(8px / 3));
    text-align: center;
    color: rgba(255, 255, 255, 0.7);
    font-size: 16px;
    cursor: pointer;
    &:last-child {
      margin-right: 0;
    }
    &:hover,
    &.active {
      color: rgba(255, 255, 255, 1);
      background: url("@/assets/images/index/icon_yiyi@2x.png");
      background-repeat: no-repeat;
      background-size: 100% 100%;
    }
  }
}
.get-points {
  display: flex;
  justify-content: space-around;
  margin-top: 10px;
  .points {
    width: 100%;
    background: url("@/assets/images/value_bg.png");
    background-repeat: no-repeat;
    background-size: 100% 100%;
    margin-right: 4px;
    height: 40px;
    &:last-child {
      margin-right: 0;
    }
    .label {
      margin: 0 auto;
      text-align: center;
      line-height: 40px;
      color: #bdcae4;
      font-size: 14px;
      display: inline-block;
      vertical-align: top;
    }
    .grade {
      text-align: center;
      font-size: 20px;
      text-align: center;
      line-height: 40px;
      font-weight: bold;
    }
    span {
      line-height: 40px;
    }
  }
}
::v-deep .amap-marker-label {
  border: none;
  background-color: transparent;
  font-size: 14px !important;
  line-height: 14px !important;
  top: 2% !important;
  left: 10% !important;
}
.no-data {
  text-align: center;
  color: #fff;

  height: 100%;
  font-size: 20px;
  position: relative;
  img {
    width: 100px;
    vertical-align: top;
    opacity: 0.7;
  }
  .inner {
    position: absolute;
    left: 50%;
    top: 50%;
    transform: translateX(-50%) translateY(-50%);
  }
}
.show-more {
  cursor: pointer;
}
</style>