<template>
  <div class="fullHeight resilience" style="min-height: 600px">
    <div class="fullHeight" v-show="type!='project'">

    
    <!-- <vue-scroll class="fullHeight"> -->
    <div class="left">
      <div class="whiteBlock">
        <div class="blockInner">
          <div class="pageTitle">组织机构</div>
          <el-table class="devTable" ref="devTable"
            :data="tableData"
            height="200"
            show-summary
          >
            <el-table-column prop="name" label="组织名称">
              <template slot-scope="scope">
                <span class="name" @click="JumpToNext(scope.row)">{{scope.row.name}}</span>
              </template>
            </el-table-column>
            <el-table-column prop="totalProjectNum" label="项目总数" >
            </el-table-column>
            <el-table-column prop="totalProjectAcreage" label="项目面积(m²)">
            </el-table-column>
            <el-table-column prop="totalSurveyNum" label="实测构件数量">
            </el-table-column>
            <el-table-column prop="abnormalSurveyNum" label="异常构件数量">
            </el-table-column>
          </el-table>
        </div>
      </div>
      <div class="whiteBlock">
        <div class="blockInner">
          <div class="pageTitle">回弹数据情况</div>
          <div class="chart" ref="ageChart"></div>
        </div>
      </div>
      <div class="whiteBlock">
        <div class="blockInner">
          <!-- <div class="pageTitle">质量省份排名</div> -->
          <!-- <div class="chart" ref="provinceChart"></div> -->
          <div class="pageTitle">浇筑令预警</div>
          <el-table class="devTable devTable2"
              :data="tableData3"
              height="200"
            >
              <el-table-column prop="name" label="分公司">
                <template slot-scope="scope">
                  <span class="name" @click="JumpToNext(scope.row)">{{scope.row.name}}</span>
                </template>
              </el-table-column>
              <el-table-column prop="amount1" label="项目"></el-table-column>
              <el-table-column prop="amount2" label="部位">
              </el-table-column>
              <el-table-column prop="amount3" label="浇筑申请日期" width="120">
              </el-table-column>
              <el-table-column prop="amount3" label="超期天数">
              </el-table-column>
            </el-table>
        </div>
      </div>
    </div>
    <div class="right">
      <div class="top">
        <div class="mapBox">
          <div class="mapTitle">·地图总览·</div>
          <div id="map" style="height: calc(100% - 50px)" ref="mapChart"></div>
          
          <div class="mapDialog" v-show="showMapDialog">
            <i class="el-icon-error" @click="showMapDialog=false"></i>
                <vue-scroll style="height:100%">
                  <div class="selectItem">
                        <p class="title">{{provincesName}}</p>
                        <div class="datas">
                            <div class="numBox2">
                                <p>{{mapDialogData.count.projectNum}}</p>
                                <p>项目数</p>
                            </div>
                            <div class="numBox2">
                                <p>{{mapDialogData.count.totalSurveyNum}}</p>
                                <p>测量构件数</p>
                            </div>
                            <div class="numBox2">
                                <p>{{mapDialogData.count.abnormalSurveyNum}}</p>
                                <p>异常构件数</p>
                            </div>
                        </div>
                    </div>
                  <div class="selectItem" v-for="(item,index) in mapDialogData.list" :key="index">
                        <p class="title">{{item.name}}</p>
                        <div class="datas">
                            <div class="numBox2">
                                <p>{{item.totalSurveyNum}}</p>
                                <p>测量构件数</p>
                            </div>
                            <div class="numBox2">
                                <p>{{item.abnormalSurveyNum}}</p>
                                <p>异常构件数</p>
                            </div>
                        </div>
                    </div>
                </vue-scroll>
            </div>
        </div>
        <div class="whiteBlock">
          <div class="blockInner nestContent">
            <div class="nestBox">
              <img src="@/assets/images/nest.png" alt="" srcset="" />
              <div class="numBox numBox1">
                <div class="topTxt">
                  <img src="@/assets/images/xm_num.png" />在施项目
                </div>
                <p class="num">{{statictisData.zsProjectNum}}</p>
              </div>
              <div class="numBox numBox2">
                <div class="topTxt">
                  <img src="@/assets/images/xmyqy_num.png" />启用项目
                </div>
                <p class="num">{{statictisData.enableProjectNum}}</p>
              </div>
              <div class="numBox numBox3">
                <div class="topTxt">
                  <img src="@/assets/images/yicgj_num.png" />异常构件数
                </div>
                <p class="num">{{statictisData.abnormalSurveyNum}}</p>
              </div>
              <div class="numBox numBox4">
                <div class="topTxt">
                  <img src="@/assets/images/gjcl_num.png" />测量构件数
                </div>
                <p class="num">{{statictisData.totalSurveyNum}}</p>
              </div>
            </div>
          </div>
        </div>
      </div>
      <div class="bottom">
        <div class="whiteBlock">
          <div class="blockInner">
            <div class="pageTitle">实测预警</div>
            <el-table class="devTable devTable2"
              :data="tableData2"
              height="200"
            >
              <el-table-column prop="name" label="分公司">
                <template slot-scope="scope">
                  <span class="name" @click="JumpToNext(scope.row)">{{scope.row.name}}</span>
                </template>
              </el-table-column>
              <el-table-column prop="amount1" label="项目"></el-table-column>
              <el-table-column prop="amount2" label="部位">
              </el-table-column>
              <!-- <el-table-column prop="amount3" label="测量强度">
              </el-table-column> -->
              <!-- <el-table-column prop="amount3" label="浇筑申请日期" width="120">
              </el-table-column> -->
              <el-table-column prop="amount3" label="设计强度">
              </el-table-column>
              <el-table-column prop="amount3" label="测量强度">
              </el-table-column>
            </el-table>
          </div>
        </div>
        <div class="whiteBlock">
          <div class="blockInner">
            <div class="pageTitle">设备连接情况</div>
            <div class="chart" ref="devConnectChart"></div>
          </div>
        </div>
      </div>
    </div>
    <!-- </vue-scroll> -->
    </div>
    <buildManage :sn='searchsn' v-if="type=='project'"></buildManage>
  </div>
</template>
<script>
import echarts from 'echarts4';;
import buildManage from "@/views/projectFront/qualitySpringback/buildManage"
import {selectMassReboundSurveyAreaStatisticsApi,selectProjectListByProvinceApi,selectProvinceMassReboundSurveyAreaCountListApi} from "@/assets/js/api/quality.js"
export default {
  components:{buildManage},
  data() {
    return {
      mapDialogLocation:{x:0,y:0},
      showMapDialog:false,
      tableData: [],
      tableData2: [],
      tableData3: [],
      type:'zgs',
      searchsn:'',
      backArr:[],
      provincesCode:'',
      provincesName:'',
      statictisData:{
        abnormalSurveyNum: 0,
        enableProjectNum: 0,
        totalProjectAcreage: 0,
        totalProjectNum: 0,
        totalSurveyNum: 0,
        zsProjectNum: 0
      },
      mapDialogData:{
        count:{
          abnormalSurveyNum: 0,
          projectNum: 0,
          totalSurveyNum: 0
        },list:[]
      },
      company:'',
    };
  },
  mounted() {
    this.company = COMPANY;
    this.loadMap();
    this.initData()
  },
  watch: {
      '$store.state.mapBackArr':function(){
          this.initData();
      }
  },
  methods: {
    JumpToNext(item){
      var json = {
          sn: item.sn,
          name: item.name
      }
      this.backArr.push(json)
      this.$store.commit('setMapBackArr', this.backArr)
      this.initData()
    },
    initData(type) {
        this.backArr = this.$store.state.mapBackArr
        // 
        if(this.backArr.length>0){
            this.searchsn=this.backArr[this.backArr.length-1].sn
        }else{
            switch (this.$store.state.userInfo.accountType) {
                case 2:
                    this.searchsn=this.$store.state.userInfo.headquartersSn
                    break;
                case 3:
                    this.searchsn=this.$store.state.userInfo.sn
                    break;
                case 4:
                    this.searchsn=this.$store.state.userInfo.sn
                    break;
            }
        }
        
        if(this.backArr.length==4){
            this.type='project'
        }else{
          this.type='zgs'
            this.getData1()
          // this.getData3()
        }
    },
    getData1(){
      selectMassReboundSurveyAreaStatisticsApi({sn:this.searchsn}).then(res=>{
        this.tableData=res.result.list
        this.$nextTick(() => {
          this.$refs['devTable'].doLayout();
        })
        this.statictisData=res.result.count
        var arr1 = [];
        var arr2 = [],xData=[],arr3 = [];
        this.tableData.forEach(element => {
          arr1.push(element.totalSurveyNum)
          arr2.push(element.abnormalSurveyNum)
          arr3.push(element.totalDevNum)
          xData.push(element.name)
        });
        this.createdAgeCharts(arr1,arr2,xData);
        this.createdDevConnectChartCharts(arr3,xData);
      })
    },
    getData2(){
      selectProjectListByProvinceApi({sn:this.searchsn,provincesCode:this.provincesCode}).then(res=>{
        this.mapDialogData = res.result
      })
    },
    getData3(){
      selectProvinceMassReboundSurveyAreaCountListApi({sn:this.searchsn}).then(res=>{
        var DATA = res.result
        var arr2 = [],xData=[],arr1 = [];
        DATA.forEach(element => {
          if(element.provinceName){
            xData.push(element.provinceName)
            arr1.push(element.totalSurveyNum)
            arr2.push(element.abnormalSurveyNum)
          }
          
        });
        this.createdProvinceCharts(arr1,arr2,xData);
      })
    },
    getSummaries(param) {
      const { columns, data } = param;
      const sums = [];
      columns.forEach((column, index) => {
        if (index === 0) {
          sums[index] = "合计";
          return;
        }
        const values = data.map((item) => Number(item[column.property]));
        if (!values.every((value) => isNaN(value))) {
          sums[index] = values.reduce((prev, curr) => {
            const value = Number(curr);
            if (!isNaN(value)) {
              return prev + curr;
            } else {
              return prev;
            }
          }, 0);
          sums[index] += "";
        } else {
          sums[index] = "--";
        }
      });

      return sums;
    },
    loadMap() {
      var uploadedDataURL = "/js/data-1528971808162-BkOXf61WX.json";
      var that = this
      /**
此版本通过设置geoindex && seriesIndex: [1] 属性来实现geo和map共存，来达到hover散点和区域显示tooltip的效果

默认情况下，map series 会自己生成内部专用的 geo 组件。但是也可以用这个 geoIndex 指定一个 geo 组件。这样的话，map 和 其他 series（例如散点图）就可以共享一个 geo 组件了。并且，geo 组件的颜色也可以被这个 map series 控制，从而用 visualMap 来更改。
当设定了 geoIndex 后，series-map.map 属性，以及 series-map.itemStyle 等样式配置不再起作用，而是采用 geo 中的相应属性。

http://echarts.baidu.com/option.html#series-map.geoIndex

并且加了pin气泡图标以示数值大小
*/
      // var points = [
      //   { value: [118.8062, 31.9208], itemStyle: { color: "#4ab2e5" } },
      //   { value: [127.9688, 45.368], itemStyle: { color: "#4fb6d2" } },
      //   { value: [110.3467, 41.4899], itemStyle: { color: "#52b9c7" } },
      //   { value: [125.8154, 44.2584], itemStyle: { color: "#5abead" } },
      //   { value: [116.4551, 40.2539], itemStyle: { color: "#f34e2b" } },
      //   { value: [123.1238, 42.1216], itemStyle: { color: "#f56321" } },
      //   { value: [114.4995, 38.1006], itemStyle: { color: "#f56f1c" } },
      //   { value: [117.4219, 39.4189], itemStyle: { color: "#f58414" } },
      //   { value: [112.3352, 37.9413], itemStyle: { color: "#f58f0e" } },
      //   { value: [109.1162, 34.2004], itemStyle: { color: "#f5a305" } },
      //   { value: [103.5901, 36.3043], itemStyle: { color: "#e7ab0b" } },
      //   { value: [106.3586, 38.1775], itemStyle: { color: "#dfae10" } },
      //   { value: [101.4038, 36.8207], itemStyle: { color: "#d5b314" } },
      //   { value: [103.9526, 30.7617], itemStyle: { color: "#c1bb1f" } },
      //   { value: [108.384366, 30.439702], itemStyle: { color: "#b9be23" } },
      //   { value: [113.0823, 28.2568], itemStyle: { color: "#a6c62c" } },
      //   { value: [102.9199, 25.46639], itemStyle: { color: "#96cc34" } },
      //   { value: [119.4543, 25.9222] },
      // ];
      // var uploadedDataURL = "/asset/get/s/data-1482909892121-BJ3auk-Se.json";
      // myChart.showLoading();
      let index = -1;
      let myChart = echarts.init(this.$refs.mapChart);
      $.getJSON(uploadedDataURL, function (geoJson) {
        echarts.registerMap("china", geoJson);
        // myChart.hideLoading();
        var option = {
          // backgroundColor: "#F1F1FA",
          grid: {
            top: 0,
            bottom: 0,

            left: 0,
            right: 0,
          },
          /*   title: {
            top: 20,
            text: '“困难人数” - 杭州市',
            subtext: '',
            x: 'center',
            textStyle: {
                color: '#ccc'
            }
        },*/

          // tooltip: {
          //     trigger: 'item',
          //     formatter: function(params) {
          //         console.log(params)
          //             return params.name + ' : ' + params.value[2];
          //     }
          // },
          /*visualMap: {
          min: 0,
          max: 1000000,
          right: 100,
          seriesIndex: 1,
          type: 'piecewise',
          bottom: 100,
          textStyle: {
            color: '#FFFF'
          },
          splitList: [
            {
              gt: 50000,
              color: '#F5222D',
              label: '困难人数大于5万人'
            }, //大于5万人
            {
              gte: 30000,
              lte: 50000,
              color: '#FA541C ',
              label: '困难人数3-5万人'
            }, //3-5万人
            {
              gte: 10000,
              lte: 30000,
              color: '#FA8C16',
              label: '困难人数1-3万人'
            }, //1-3万人
            {
              lte: 10000,
              color: '#fbe1d6',
              label: '困难人数小于1万人'
            }
          ]
        },*/

          geo: {
            map: "china",
            aspectScale: 0.75, //长宽比
            zoom: 1.2,
            roam: true,
              label: {
                normal: {
                  formatter:function(params) {
                    // console.log(params.name)
                    if(params.name.indexOf('_')){
                      return params.name.split('_')[0]
                    }
                  },
                  show: true,
                  textStyle: {
                    color: "#132869",
                    fontSize: 13,
                    fontWeight: "bold",
                  },
                },
                emphasis: {
                  textStyle: {
                    color: "white",
                  },
                },
              },
            itemStyle: {
              normal: {
                borderColor: "rgb(255, 255, 255)",
                  borderWidth: 1,
                  areaColor: {
                    type: "linear",
                    x: 0.5,
                    y: 0.5,
                    r: 0.8,
                    colorStops: [
                      {
                        offset: 0,
                        color: "#BCDCFF", // 0% 处的颜色
                      },
                      {
                        offset: 1,
                        color: "#92BEFB", // 100% 处的颜色
                      },
                    ],
                    globalCoord: true, // 缺省为 false
                  },
              },
              emphasis: {
                areaColor: "#92BEFB",
                borderWidth: 0.1,
                // color: "green",
                // label: {
                //   show: false,
                // },
              },
            },
            regions: [
              {
                name: "南海诸岛",
                itemStyle: {
                  areaColor: "rgba(0, 10, 52, 1)",
                  borderColor: "rgba(0, 10, 52, 1)",
                  normal: {
                    // opacity: 0,
                    label: {
                      show: false,
                      color: "#009cc9",
                    },
                  },
                },
              },
            ],
          },
          series: [
            // {
            //   type: "map",
            //   roam: true,
            //   label: {
            //     normal: {
            //       formatter:function(params) {
            //         console.log(params.name)
            //         if(params.name.indexOf('_')){
            //           return params.name.split('_')[0]
            //         }
            //       },
            //       show: true,
            //       textStyle: {
            //         color: "#132869",
            //         fontSize: 13,
            //         fontWeight: "bold",
            //       },
            //     },
            //     emphasis: {
            //       textStyle: {
            //         color: "white",
            //       },
            //     },
            //   },

            //   itemStyle: {
            //     normal: {
            //       borderColor: "rgb(255, 255, 255)",
            //       borderWidth: 1,
            //       areaColor: {
            //         type: "linear",
            //         x: 0.5,
            //         y: 0.5,
            //         r: 0.8,
            //         colorStops: [
            //           {
            //             offset: 0,
            //             color: "#BCDCFF", // 0% 处的颜色
            //           },
            //           {
            //             offset: 1,
            //             color: "#92BEFB", // 100% 处的颜色
            //           },
            //         ],
            //         globalCoord: true, // 缺省为 false
            //       },
            //     },
            //     emphasis: {
            //       areaColor: "#92BEFB",
            //       //    shadowColor: 'rgb(12,25,50)',
            //       borderWidth: 0.1,
            //     },
            //   },
            //   zoom: 1.2,
            //       roam: true,
            //   map: "china", //使用
            //   data: this.difficultData, //热力图数据   不同区域 不同的底色
            // },
            //           {
            //                 type: 'effectScatter',
            //                 coordinateSystem: 'geo',
            //                 showEffectOn: 'render',
            //                 zlevel:1,
            //                 rippleEffect: {
            //                     period: 15,
            //                     scale: 4,
            //                     brushType: 'fill'
            //                 },
            //                 hoverAnimation: true,
            //                 label: {
            //                     normal: {
            //                         formatter: '{b}',
            //                         position: 'right',
            //                         offset: [15, 0],
            //                         color: '#1DE9B6',
            //                         show: true
            //                     },
            //                 },
            //                 itemStyle: {
            //                     normal: {
            //                       color:'#1DE9B6'/* function (value){ //随机颜色
            //  return "#"+("00000"+((Math.random()*16777215+0.5)>>0).toString(16)).slice(-6);
            //  }*/,
            //                         shadowBlur: 10,
            //                         shadowColor: '#333'
            //                     }
            //                 },
            //                 symbolSize: 12,
            //                 data: points
            //             },
            //地图线的动画效果
            //           {
            //                 type: 'lines',
            //                 zlevel: 2,
            //                 effect: {
            //                     show: true,
            //                     period: 4, //箭头指向速度，值越小速度越快
            //                     trailLength: 0.4, //特效尾迹长度[0,1]值越大，尾迹越长重
            //                     symbol: 'arrow', //箭头图标
            //                     symbolSize: 7, //图标大小
            //                 },
            //                 lineStyle: {
            //                     normal: {
            //                         color:'#1DE9B6'
            //                         /* function (value){ //随机颜色

            //                         ['#f21347','#f3243e','#f33736','#f34131','#f34e2b',
            //                         '#f56321','#f56f1c','#f58414','#f58f0e','#f5a305',
            //                         '#e7ab0b','#dfae10','#d5b314','#c1bb1f','#b9be23',
            //                         '#a6c62c','#96cc34','#89d23b','#7ed741','#77d64c',
            //                         '#71d162','#6bcc75','#65c78b','#5fc2a0','#5abead',
            //                         '#52b9c7','#4fb6d2','#4ab2e5']
            //  return "#"+("00000"+((Math.random()*16777215+0.5)>>0).toString(16)).slice(-6);
            //  }*/,
            //                         width: 1, //线条宽度
            //                         opacity: 0.1, //尾迹线条透明度
            //                         curveness: .3 //尾迹线条曲直度
            //                     }
            //                 },
            //                 data: [
            //                     {coords: [[118.8062, 31.9208],[119.4543, 25.9222]],lineStyle:{color:'#4ab2e5'}}
            //                   , {coords: [[127.9688, 45.368],[119.4543, 25.9222]],lineStyle:{color:'#4fb6d2'}}
            //                   , {coords: [[110.3467, 41.4899],[119.4543, 25.9222]],lineStyle:{color:'#52b9c7'}}
            //                   , {coords: [[125.8154, 44.2584],[119.4543, 25.9222]],lineStyle:{color:'#5abead'}}
            //                   , {coords: [[116.4551, 40.2539],[119.4543, 25.9222]],lineStyle:{color:'#f34e2b'}}
            //                   , {coords: [[123.1238, 42.1216],[119.4543, 25.9222]],lineStyle:{color:'#f56321'}}
            //                   , {coords: [[114.4995, 38.1006],[119.4543, 25.9222]],lineStyle:{color:'#f56f1c'}}
            //                   , {coords: [[117.4219, 39.4189],[119.4543, 25.9222]],lineStyle:{color:'#f58414'}}
            //                   , {coords: [[112.3352, 37.9413],[119.4543, 25.9222]],lineStyle:{color:'#f58f0e'}}
            //                   , {coords: [[109.1162, 34.2004],[119.4543, 25.9222]],lineStyle:{color:'#f5a305'}}
            //                   , {coords: [[103.5901, 36.3043],[119.4543, 25.9222]],lineStyle:{color:'#e7ab0b'}}
            //                   , {coords: [[106.3586, 38.1775],[119.4543, 25.9222]],lineStyle:{color:'#dfae10'}}
            //                   , {coords: [[101.4038, 36.8207],[119.4543, 25.9222]],lineStyle:{color:'#d5b314'}}
            //                   , {coords: [[103.9526, 30.7617],[119.4543, 25.9222]],lineStyle:{color:'#c1bb1f'}}
            //                   , {coords: [[108.384366, 30.439702],[119.4543, 25.9222]],lineStyle:{color:'#b9be23'}}
            //                   , {coords: [[113.0823, 28.2568],[119.4543, 25.9222]],lineStyle:{color:'#a6c62c'}}
            //                   , {coords: [[102.9199, 25.46639],[119.4543, 25.9222]],lineStyle:{color:'#96cc34'}}
            //                 ]
            //             }
          ],
        };
        myChart.setOption(option, true);

        myChart.on('click', function (params) {
          console.log(params)
          // that.mapDialogLocation.x=params.event.offsetX
          // that.mapDialogLocation.y=params.event.offsetY
          that.showMapDialog=true
          that.provincesCode=params.name.split('_')[1]
          that.provincesName=params.name.split('_')[0]
          that.getData2()
            // console.log(dataAxis[Math.max(params.dataIndex - zoomSize / 2, 0)]);
            // myChart.dispatchAction({
            //     type: 'dataZoom',
            //     startValue: dataAxis[Math.max(params.dataIndex - zoomSize / 2, 0)],
            //     endValue: dataAxis[Math.min(params.dataIndex + zoomSize / 2, data.length - 1)]
            // });
        });
      });
    },
    //设备连接情况---图表
    createdDevConnectChartCharts(arr3,xData) {
     
      let that = this;
      let ageChart = echarts.init(this.$refs.devConnectChart);
      //   ageChart.clear();
      let option = {
        grid: {
          top: 40,
          left: 0,
          bottom: 0,
          right: 20,
          containLabel: true,
        },
        color: ["#5181F6", "#61D2B9"],
        tooltip: {
          trigger: "axis",
          axisPointer: {
            type: "shadow",
          },
        },
        legend: {
          show: true,
          position: "right",
          top: 5,
          right: 0,
          itemWidth: 13,
          itemHeight: 5,
          textStyle: {
            color: "#9fa2ad",
          },
        },
        xAxis: [
          {
            type: "category",
            data: xData,
            boundaryGap: true,
            axisTick: {
              show: false,
            },
            axisLine: {
              show: false,
            },
            axisLabel: {
              color: "#9fa2ad",
              fontSize: 12,
            },
          },
        ],

        yAxis: {
          type: "value",
          axisTick: {
            show: false,
          },
          axisLine: {
            show: false,
          },
          splitLine: {
            lineStyle: {
              type: "dashed",
              color: "rgba(231, 233, 243, 0.5)",
            },
          },
          axisLabel: {
            color: "#9fa2ad",
          },
        },
        series: [
          {
            name: "设备数",
            type: "bar",
            data: arr3,
            barWidth: 34,
            // barGap: 0.1,
            itemStyle: {
              color:that.company=='longguang'?'#4378D8': new echarts.graphic.LinearGradient(0, 0, 0, 1, [
                { offset: 0, color: "rgba(121, 176, 254, 1)" },
                { offset: 1, color: "rgba(84, 114, 244, 1)" },
              ]),
            },
          },
        ],
      };

      ageChart.setOption(option);
    },
    //质量省份排名---图表
    createdProvinceCharts(arr1,arr2,xData) {
      // var arr1 = [10, 20, 39, 60, 35, 50];
      // var arr2 = [1, 4, 10, 5, 12, 22];
      let that = this;
      let ageChart = echarts.init(this.$refs.provinceChart);
      //   ageChart.clear();
      let option = {
        grid: {
          top: 40,
          left: 0,
          bottom: 0,
          right: 20,
          containLabel: true,
        },
        color: that.company=='longguang'?['#4378D8','#BC5D12']:["#5181F6", "#61D2B9"],
        tooltip: {
          trigger: "axis",
          axisPointer: {
            type: "shadow",
          },
        },
        legend: {
          show: true,
          position: "right",
          top: 5,
          right: 0,
          itemWidth: 13,
          itemHeight: 5,
          textStyle: {
            color: "#9fa2ad",
          },
        },
        xAxis: [
          {
            type: "category",
            data: xData,
            boundaryGap: true,
            axisTick: {
              show: false,
            },
            axisLine: {
              show: false,
            },
            axisLabel: {
              color: "#9fa2ad",
              fontSize: 12,
            },
          },
        ],

        yAxis: {
          type: "value",
          axisTick: {
            show: false,
          },
          axisLine: {
            show: false,
          },
          splitLine: {
            lineStyle: {
              type: "dashed",
              color: "rgba(231, 233, 243, 0.5)",
            },
          },
          axisLabel: {
            color: "#9fa2ad",
          },
        },
        series: [
          {
            name: "测量构件数",
            type: "bar",
            data: arr1,
            barWidth: 20,
            barGap: 0.1,
            itemStyle: {
              color:that.company=='longguang'?'#4378D8': new echarts.graphic.LinearGradient(0, 0, 0, 1, [
                { offset: 0, color: "rgba(121, 176, 254, 1)" },
                { offset: 1, color: "rgba(84, 114, 244, 1)" },
              ]),
            },
          },
          {
            name: "异常构件数",
            type: "bar",
            data: arr2,
            barWidth: 20,
            itemStyle: {
              color: that.company=='longguang'?'#BC5D12':new echarts.graphic.LinearGradient(0, 0, 0, 1, [
                { offset: 0, color: "rgba(255, 214, 164, 1)" },
                { offset: 1, color: "rgba(255, 177, 61, 1)" },
              ]),
            },
          },
        ],
      };

      ageChart.setOption(option);
    },
    //回弹数据情况---图表
    createdAgeCharts(arr1,arr2,xData) {
      
      
      let that = this;
      let ageChart = echarts.init(this.$refs.ageChart);
      //   ageChart.clear();
      let option = {
        grid: {
          top: 40,
          left: 0,
          bottom: 0,
          right: 20,
          containLabel: true,
        },
        color: that.company=='longguang'?['#4378D8','#BC5D12']:["#5181F6", "#61D2B9"],
        tooltip: {
          trigger: "axis",
          axisPointer: {
            type: "shadow",
          },
        },
        legend: {
          show: true,
          position: "right",
          top: 5,
          right: 0,
          itemWidth: 13,
          itemHeight: 5,
          textStyle: {
            color: "#9fa2ad",
          },
        },
        xAxis: [
          {
            type: "category",
            data: xData,
            boundaryGap: true,
            axisTick: {
              show: false,
            },
            axisLine: {
              show: false,
            },
            axisLabel: {
              color: "#9fa2ad",
              fontSize: 12,
            },
          },
        ],

        yAxis: {
          type: "value",
          axisTick: {
            show: false,
          },
          axisLine: {
            show: false,
          },
          splitLine: {
            lineStyle: {
              type: "dashed",
              color: "rgba(231, 233, 243, 0.5)",
            },
          },
          axisLabel: {
            color: "#9fa2ad",
          },
        },
        series: [
          {
            name: "测量构件数",
            type: "bar",
            data: arr1,
            barWidth: 20,
            barGap: 0.1,
            itemStyle: {
              color:that.company=='longguang'?'#4378D8': new echarts.graphic.LinearGradient(0, 0, 0, 1, [
                { offset: 0, color: "rgba(121, 176, 254, 1)" },
                { offset: 1, color: "rgba(84, 114, 244, 1)" },
              ]),
            },
          },
          {
            name: "异常构件数",
            type: "bar",
            data: arr2,
            barWidth: 20,
            itemStyle: {
              color: that.company=='longguang'?'#BC5D12': new echarts.graphic.LinearGradient(0, 0, 0, 1, [
                { offset: 0, color: "rgba(255, 214, 164, 1)" },
                { offset: 1, color: "rgba(255, 177, 61, 1)" },
              ]),
            },
          },
        ],
      };

      ageChart.setOption(option);
    },
  },
};
</script>
<style lang="less" scoped>
.chart {
  width: 100%;
  height: calc(100% - 22px);
  margin-top: -15px;
}
.left {
  width: 35%;
  float: left;
  margin-right: 15px;
  height: 100%;
  .whiteBlock {
    height: calc(33.33% - 10px);
    margin-bottom: 15px;
    &:last-child{
      margin-bottom: 0;
    }
  }
}
.right {
  width: calc(65% - 15px);
  float: left;
  height: 100%;
  .top {
    margin-bottom: 15px;
    height: calc(66.66% - 5px);
    overflow: hidden;
    width: 100%;
    .mapBox {
      float: left;
      width: calc(65% - 15px);
      margin-right: 15px;
      height: 100%;
      position: relative;
      background: linear-gradient(
        180deg,
        rgba(255, 204, 204, 0.14) 0%,
        rgba(80, 111, 255, 0.14) 100%
      );
    }
    .whiteBlock {
      width: 35%;
      height: 100%;
      float: left;
    }
  }
  .bottom {
    width: 100%;
    height: calc(33.33% - 10px);
    overflow: hidden;
    .whiteBlock {
      width: 50%;
      height: 100%;
      float: left;
      &:first-child{
        width: 58%;
      }
      &:last-child{
        width: calc(42% - 15px);
        margin-left: 15px;
      }
    }
    
  }
}

.blockInner {
  padding: 15px;
  position: relative;
  height: calc(100% - 30px);
}
.mapTitle {
  width: 374px;
  height: 50px;
  background: linear-gradient(180deg, #79b1fe 0%, #5371f3 100%);
  border-radius: 0px 0px 43px 43px;
  text-shadow: 1px 1px 0px #0032e0;
  color: white;
  text-align: center;
  line-height: 50px;
  margin: 0 auto;
  // position: absolute;
  // left: 50%;
  // top: 0;
  // transform: translateX(-50%);
}
.nestContent {
  display: flex;
  align-items: center;
  justify-content: center;
}
.nestBox {
  display: inline-block;
  position: relative;
  .numBox {
    position: absolute;
    .topTxt {
      display: flex;
      align-items: center;
      font-size: 20px;
      color: rgba(44, 51, 80, 0.7);
      white-space: nowrap;
      img {
        margin-right: 7px;
      }
    }
    .num {
      font-size: 34px;
      color: rgba(255, 151, 0, 1);
      padding-left: 28px;
    }
  }
  .numBox1 {
    top: -30px;
    left: -30px;
  }
  .numBox2 {
    top: 0px;
    left: 200px;
  }
  .numBox3 {
    top: 200px;
    left: 180px;
  }
  .numBox4 {
    bottom: -50px;
    left: 20px;
  }
}
/deep/.devTable{
   &::before{
     display: none;
   }
  th{
    padding: 10px 0;
    border-bottom: none;
    background-color: rgba(212, 224, 255, 1);
    font-size: 13px;
    color: rgba(38, 45, 71, 1);
    font-weight: normal;
  }
  td{
    padding: 10px 0;
    border-bottom: none;
    color: rgba(81, 129, 246, 1);
  }
  .name{
    color: rgba(38, 45, 71, 1);
    cursor: pointer;
  }
  .el-table__footer-wrapper td{
    padding: 8px 0;
    color: rgba(255, 151, 0, 1);
    background-color: rgba(1, 21, 82, 0.05);
    border: none;
  }
}
/deep/.devTable2{
  td{
    color: rgba(38, 45, 71, 1)!important;
    background-color: rgba(250, 250, 250, 0.83);
  }
}

.mapDialog{
  padding: 10px;
  box-sizing: border-box;
  font-size: 14px;
  background-color: #fff;
  width: 230px;
  // height: calc(100% - 60px);
  height: 300px;
  top: 50%;
  left: 50%;
  transform: translate(-50%,-50%);
  position: absolute;
  z-index: 9999;
  .selectItem{
      cursor: pointer;
  }
  .title{
      margin: 0px 0 5px;
      font-weight: 600;
  }
  .datas{
      display: flex;
      align-items: center;
      justify-content: space-around;
      font-size: 12px;
      height: 40px;
      background-color: #fbfbfb;
      margin-bottom: 10px;
      text-align: center;
      .numBox2{
          p:first-child{
              color: @--color-primary;
          }
      }
  }
  .el-icon-error{
    position: absolute;
    right: -10px;
    top: -10px;
    font-size: 24px;
    cursor: pointer;
  }
}
</style>