<script>
import {mapState} from "vuex"
import SubHeader from "./comps/subHeader.vue";
import IconStaPanel from "./comps/iconStaPanel.vue";
import IconSmallPanel from "./comps/iconSmallPanel.vue";
import ValueUnit from "./comps/valueUnit.vue";
import ChargingPercent from "./comps/chargingPercent.vue";
import AiEchart from "dui/packages/tools/AiEchart.vue";
import NavTabs from "./comps/navTabs.vue";
import AiEchartMap from "dui/packages/tools/AiEchartMap.vue";
import weiyang from "./weiyang.json";
import Area from "dui/lib/js/area";

const handlePercent = v => parseFloat(isNaN(v) ? 0 : v.toFixed(2))
const calcComparePercent = (v = 1, target = 1) => {
  const value = (v - target) / target * 100
  return handlePercent(value)
}
const hide = {show: false}
const aiTrend = {
  series: {
    type: "bar", barWidth: 12, itemStyle: {
      color: {
        type: "linear", x: 0, y: 0, x2: 0, y2: 1, colorStops: [
          {offset: 0, color: "#00EFFF"},
          {offset: 1, color: "#00527D"},
        ]
      }
    }, encode: {x: 'd', y: 'c'}
  },
  yAxis: {type: "value", axisLabel: hide, axisLine: hide, splitLine: hide},
  xAxis: {type: "category", axisLabel: hide, axisLine: {itemStyle: {color: 'rgba(179,223,255,0.4)'}}},
  legend: {show: false},
  grid: {left: 0, right: 0, bottom: 1, top: 0, containLabel: true},
}
const integralOrder = {
  series: {
    type: "bar", barWidth: 10,
    encode: {x: 'integral', y: 'name'},
    label: {position: [390, 0], show: true, color: "#fff"},
    labelLine: hide,
    showBackground: !0, backgroundStyle: {color: "rgba(107,126,148,0.4)"},
    itemStyle: {
      color: ({dataIndex}) => {
        const color = {
          type: "linear", x: 0, y: 0, x2: 1, y2: 0, colorStops: [
            {offset: 0, color: "#00527D1a"}, {offset: 1, color: "#00EFFF"},
          ]
        }
        if (dataIndex === 0) {
          color.colorStops = [{offset: 0, color: "#DBB36E1a"}, {offset: 1, color: "#F5C26B"}]
        } else if (dataIndex == 1) {
          color.colorStops = [{offset: 0, color: "#6070801a"}, {offset: 1, color: "#7AA3CC"}]
        } else if (dataIndex == 2) {
          color.colorStops = [{offset: 0, color: "#DB9A6E1a"}, {offset: 1, color: "#DB9A6E"}]
        }
        return color
      }
    }
  },
  yAxis: {
    type: "category", inverse: true, axisLine: hide, axisTick: hide, axisPointer: hide,
    axisLabel: {
      showMaxLabel: true, align: 'left', margin: 65,
      color: "#9CB3C9", formatter: (name, index) => {
        const icon = {
          0: "🥇", 1: "🥈", 2: "🥉",
        }[index] ?? `{div|${index + 1}} `
        return `${icon} ${name}`
      },
      rich: {
        div: {
          borderWidth: 2,
          borderColor: {type: "linear", x: 0, y: 0, x2: 0, y2: 1, colorStops: [{offset: 0, color: "#00EFFF"}, {offset: 1, color: "#00527D"}]},
          color: '#fff',
          borderRadius: 4,
          padding: [2, 2, 0, 2]
        }
      }
    }
  },
  xAxis: hide,
  grid: {left: -45, right: 40, top: 0, bottom: 0, containLabel: true},
  legend: hide,
  tooltip: {trigger: 'axis', backgroundColor: "#33333388", textStyle: {color: '#fff'}}
}
const workChainSeries = ['楼栋长', '治安协理员', '业委会', '网格员', '第三方机构']
const workChain = {
  color: [
    ['#1f595940', '#33CCCC'],
    ['#159AFF00', '#2C97E8'],
    ['#BFEAFF1a', '#BFEAFF'],
    ['#DBB36E1a', '#DBB36E'],
    ['#757BD21a', '#757BD1'],
  ].map(([start, end]) => ({type: 'linear', x: 0, x2: 1, y: 0, y2: 0, colorStops: [{offset: 0, color: start}, {offset: 1, color: end}]})),
  series: workChainSeries.map(name => ({name, type: "bar", barWidth: 7})),
  yAxis: {type: "category", axisLine: {lineStyle: {color: "rgba(102,132,153,0.5)"}}, axisTick: hide, axisLabel: {color: "#9CB3C9"}},
  xAxis: {type: "value", splitLine: {lineStyle: {type: 'dashed', color: 'rgba(61,82,102,0.65)'}}, axisTick: hide, axisLabel: {color: "#9CB3C9"}},
  grid: {left: 12, right: 24, top: 0, bottom: 40, containLabel: true},
  legend: {show: true, bottom: 0, textStyle: {color: '#fff'}},
  tooltip: {trigger: 'axis', backgroundColor: "#33333388", textStyle: {color: '#fff'}}
}
const residentDistribution = {
  series: {
    type: "bar", barWidth: 12, itemStyle: {
      color: {
        type: "linear", x: 0, y: 0, x2: 0, y2: 1, colorStops: [
          {offset: 0, color: "#00EFFF"},
          {offset: 1, color: "#00527D"},
        ]
      }
    },
    encode: {x: 'name', y: 'c'}
  },
  yAxis: {type: "value", axisLine: hide, splitLine: {lineStyle: {type: 'dashed', color: 'rgba(61,82,102,0.65)'}}},
  xAxis: {type: "category", axisTick: hide, axisLabel: {rotate: 35}},
  grid: {left: 12, right: 12, top: 10, bottom: 0, containLabel: true},
  legend: {show: false},
}
const spDistribution = {
  series: {
    type: 'pie',
    radius: ['50%', '70%'],
    padAngle: 3,
    label: {color: "#9CB3C9", shadowColor: "transparent", formatter: params => `${params.name}\n${params.value.c}; ${params.percent}%`},
  },
  tooltip: {formatter: params => `${params.marker} ${params.name} ${params.percent}%`},
  legend: hide,
}
const wotDistribution = {
  series: {
    type: 'pie',
    radius: ['50%', '70%'],
    padAngle: 3,
    label: {color: "#9CB3C9", shadowColor: "transparent", formatter: params => `${params.name}\n${params.value.c}; ${params.percent}%`},
  },
  tooltip: {formatter: params => `${params.marker} ${params.name} ${params.percent}%`},
  legend: hide,
}
const residentGroupTrend = {
  series: [
    {type: "line", name: "人数", itemStyle: {color: "#1EE7E7"}, encode: {x: 'ymd', y: 'memberCount'}},
    {type: "line", name: "群数量", itemStyle: {color: "#1890FF"}, encode: {x: 'ymd', y: 'groupCount'}, yAxisIndex: 1},
  ],
  yAxis: [
    {type: "value", axisLine: hide, splitLine: {lineStyle: {type: 'dashed', color: 'rgba(61,82,102,0.65)'}}, position: 'right'},
    {type: "value", axisLine: hide, splitLine: {lineStyle: {type: 'dashed', color: 'rgba(61,82,102,0.65)'}}}
  ],
  xAxis: {type: "category", axisTick: hide, axisLabel: {rotate: 35, fontSize: 10}},
  grid: {left: 12, right: 12, top: 10, bottom: 20, containLabel: true},
  legend: {show: true, bottom: 0, textStyle: {color: '#fff'}, icon: 'rect', itemWidth: 8, itemHeight: 8},
}
const allLastScatters = [
  {areaId: 610112001001, name: "二府庄社区", value: [108.949982, 34.29454]},
  {areaId: 610112001002, name: "方新社区", value: [108.942859, 34.299535]},
  {areaId: 610112001003, name: "联合社区", value: [116.338896, 40.051373]},
  {areaId: 610112001005, name: "枣圆南岭社区", value: [108.936589, 34.294884]},
  {areaId: 610112001006, name: "纬二十九街社区", value: [108.949169, 34.299598]},
  {areaId: 610112001007, name: "张家堡社区", value: [108.93532, 34.35535]},
  {areaId: 610112001008, name: "兴隆园社区", value: [108.953571, 34.32599]},
  {areaId: 610112001009, name: "文景社区", value: [108.926848, 34.349681]},
  {areaId: 610112001010, name: "五龙汤社区", value: [108.972042, 34.349747]},
  {areaId: 610112001011, name: "北康居委会", value: [108.932601, 34.323168]},
  {areaId: 610112001012, name: "王前居委会", value: [108.932601, 34.323168]},
  {areaId: 610112001013, name: "南李居委会", value: [108.944107, 34.334905]},
  {areaId: 610112001014, name: "盐东居委会", value: [108.934883, 34.342057]},
  {areaId: 610112001015, name: "康城社区", value: [108.956878, 34.339048]},
  {areaId: 610112001016, name: "翁家居委会", value: [108.932601, 34.323168]},
  {areaId: 610112001017, name: "舍下省社区", value: [108.943954, 34.29981]},
  {areaId: 610112001018, name: "海荣豪佳社区", value: [108.942057, 34.327846]},
  {areaId: 610112001019, name: "白桦林居社区", value: [108.936572, 34.34521]},
  {areaId: 610112001020, name: "民悦社区", value: [108.945811, 34.305578]},
  {areaId: 610112001021, name: "尤家社区", value: [108.942779, 34.324739]},
  {areaId: 610112001022, name: "盐西社区", value: [108.932345, 34.339821]},
  {areaId: 610112001023, name: "萧家名京九合院社区", value: [108.941694, 34.307395]},
  {areaId: 610112001024, name: "红色社区", value: [108.959699, 34.333593]},
  {areaId: 610112001025, name: "二府庄龙首塬社区", value: [108.948728, 34.296298]},
  {areaId: 610112001026, name: "佳家社区", value: [108.936452, 34.311048]},
  {areaId: 610112001027, name: "文景东区社区", value: [108.954963, 34.345596]},
  {areaId: 610112001028, name: "明新社区", value: [108.952411, 34.310573]},
  {areaId: 610112001029, name: "风景御园社区", value: [108.942731, 34.34035]},
  {areaId: 610112001030, name: "珑印台社区", value: [108.952847, 34.334971]},
  {areaId: 610112001031, name: "凤城庭院社区", value: [108.956905, 34.335973]},
  {areaId: 610112001032, name: "贞观首府社区", value: [108.959134, 34.33446]},
  {areaId: 610112001033, name: "紫薇开元盛景社区", value: [108.952705, 34.332117]},
  {areaId: 610112001034, name: "玄武路社区", value: [108.95342, 34.299382]},
  {areaId: 610112001035, name: "印象城社区", value: [108.94833, 34.29391]},
  {areaId: 610112001036, name: "邮政路社区", value: [108.949086, 34.299646]},
  {areaId: 610112001037, name: "张家堡新区社区", value: [108.961481, 34.342693]},
  {areaId: 610112001038, name: "城市锦上社区", value: [108.926426, 34.314895]},
  {areaId: 610112001039, name: "碧玺华庭社区", value: [108.934758, 34.333642]},
  {areaId: 610112001040, name: "国金华府社区", value: [108.934511, 34.339796]},
  {areaId: 610112001041, name: "白桦林间社区", value: [108.929032, 34.3443]},
  {areaId: 610112001201, name: "南康村", value: [108.95681, 34.312621]},
  {areaId: 610112002001, name: "三桥火车站社区", value: [108.835359, 34.295326]},
  {areaId: 610112002002, name: "建章路社区", value: [108.842086, 34.297391]},
  {areaId: 610112002003, name: "三桥街社区", value: [108.838167, 34.291175]},
  {areaId: 610112002004, name: "阿房四路社区", value: [108.845482, 34.282453]},
  {areaId: 610112002005, name: "新西北社区", value: [108.846769, 34.27529]},
  {areaId: 610112002006, name: "武警路社区", value: [108.833389, 34.287644]},
  {areaId: 610112002007, name: "西户路社区", value: [108.824948, 34.288929]},
  {areaId: 610112002008, name: "红光路社区", value: [108.850619, 34.260133]},
  {areaId: 610112002009, name: "西纺社区", value: [108.852904, 34.273072]},
  {areaId: 610112002010, name: "和平社区", value: [108.829695, 34.255167]},
  {areaId: 610112002011, name: "天台路社区", value: [108.825085, 34.274673]},
  {areaId: 610112002012, name: "三桥启航社区", value: [108.815569, 34.30062]},
  {areaId: 610112002013, name: "张万社区", value: [108.847589, 34.26792]},
  {areaId: 610112002014, name: "聚驾六合社区", value: [108.814518, 34.255497]},
  {areaId: 610112002015, name: "车张佳园社区", value: [108.82215, 34.285441]},
  {areaId: 610112002016, name: "新店社区", value: [108.803659, 34.300847]},
  {areaId: 610112002017, name: "南何社区", value: [108.845056, 34.274212]},
  {areaId: 610112002018, name: "车刘社区", value: [108.851432, 34.288344]},
  {areaId: 610112002019, name: "华润二十四城社区", value: [108.82194, 34.292422]},
  {areaId: 610112002020, name: "保利金香槟社区", value: [108.837906, 34.287201]},
  {areaId: 610112002021, name: "征和四路社区", value: [108.799225, 34.285595]},
  {areaId: 610112002022, name: "太平路社区", value: [108.79363, 34.30511]},
  {areaId: 610112002023, name: "沣东大道社区", value: [108.821023, 34.253863]},
  {areaId: 610112002024, name: "昆明路社区", value: [108.833744, 34.251393]},
  {areaId: 610112002025, name: "阿房一路社区", value: [108.848964, 34.265087]},
  {areaId: 610112002026, name: "建章宫社区", value: [108.841722, 34.305637]},
  {areaId: 610112002027, name: "石家社区", value: [108.887352, 34.254631]},
  {areaId: 610112002028, name: "东凹里社区", value: [108.841951, 34.257922]},
  {areaId: 610112002201, name: "五一村", value: [108.918378, 34.265958]},
  {areaId: 610112002203, name: "杨何村", value: [108.84705, 34.279308]},
  {areaId: 610112002206, name: "贺家村", value: [108.852451, 34.268541]},
  {areaId: 610112002208, name: "蔺高村", value: [108.825551, 34.274783]},
  {areaId: 610112002210, name: "西凹里村", value: [108.837599, 34.255281]},
  {areaId: 610112002211, name: "肖里村", value: [108.828796, 34.249808]},
  {areaId: 610112002212, name: "和平村", value: [108.824318, 34.25967]},
  {areaId: 610112002213, name: "西围墙村", value: [108.818443, 34.257547]},
  {areaId: 610112002215, name: "赵家堡村", value: [108.820934, 34.26618]},
  {areaId: 610112002216, name: "阿房宫村", value: [108.832933, 34.268045]},
  {areaId: 610112002218, name: "闫十村", value: [108.816739, 34.277085]},
  {areaId: 610112002219, name: "小苏村", value: [108.817537, 34.284682]},
  {areaId: 610112002220, name: "后围寨村", value: [108.81345, 34.293531]},
  {areaId: 610112002222, name: "双吕村", value: [108.809887, 34.305625]},
  {areaId: 610112002223, name: "孙围墙村", value: [108.815501, 34.310061]},
  {areaId: 610112002224, name: "新军寨村", value: [108.822484, 34.305469]},
  {areaId: 610112002225, name: "北沙口村", value: [108.825185, 34.300785]},
  {areaId: 610112003001, name: "重型机器厂社区", value: [108.993096, 34.308161]},
  {areaId: 610112003002, name: "煤矿机械厂社区", value: [108.994688, 34.303893]},
  {areaId: 610112003003, name: "重研所社区", value: [108.993096, 34.308161]},
  {areaId: 610112003004, name: "东元路社区", value: [108.996468, 34.297291]},
  {areaId: 610112003005, name: "工业学校社区", value: [108.991593, 34.301872]},
  {areaId: 610112003006, name: "新广路社区", value: [109.009607, 34.309422]},
  {areaId: 610112003007, name: "广安社区", value: [109.005854, 34.312507]},
  {areaId: 610112003008, name: "刘北社区", value: [108.99778, 34.304717]},
  {areaId: 610112003009, name: "刘南堡社区（刘南社区）", value: [108.999574, 34.302724]},
  {areaId: 610112003010, name: "欣心家园社区", value: [108.989755, 34.309328]},
  {areaId: 610112003011, name: "辛家庙社区", value: [109.009737, 34.312874]},
  {areaId: 610112003012, name: "浐灞半岛社区", value: [109.037318, 34.315672]},
  {areaId: 610112003013, name: "浐灞恒大名都社区", value: [109.019814, 34.30792]},
  {areaId: 610112003014, name: "新房社区", value: [109.022686, 34.312154]},
  {areaId: 610112003015, name: "浐灞一路社区", value: [109.010117, 34.317564]},
  {areaId: 610112003016, name: "华远海蓝城社区", value: [109.011605, 34.306886]},
  {areaId: 610112003017, name: "中海开元壹号社区", value: [108.976667, 34.304918]},
  {areaId: 610112003018, name: "浐灞一号社区", value: [108.999546, 34.315764]},
  {areaId: 610112003019, name: "海景印象城社区", value: [109.000911, 34.301058]},
  {areaId: 610112003020, name: "北辰东路社区", value: [109.001949, 34.306926]},
  {areaId: 610112003021, name: "自然界社区", value: [109.039046, 34.32112]},
  {areaId: 610112003204, name: "广大门村", value: [109.0216, 34.31413]},
  {areaId: 610112004001, name: "西航社区", value: [108.963998, 34.353375]},
  {areaId: 610112004002, name: "徐家湾社区", value: [108.99481, 34.353613]},
  {areaId: 610112004003, name: "红光社区", value: [108.869999, 34.259174]},
  {areaId: 610112004004, name: "薛家寨社区", value: [108.952627, 34.351981]},
  {areaId: 610112004005, name: "张千户社区", value: [108.952531, 34.353822]},
  {areaId: 610112004006, name: "庙张姚社区", value: [108.980719, 34.3559]},
  {areaId: 610112004007, name: "河址西社区", value: [108.956992, 34.358297]},
  {areaId: 610112004008, name: "袁雒社区", value: [109.000073, 34.354306]},
  {areaId: 610112004009, name: "金域华府社区", value: [108.950494, 34.348985]},
  {areaId: 610112004010, name: "和苑社区", value: [108.950525, 34.355176]},
  {areaId: 610112004011, name: "凤凰城社区", value: [108.989391, 34.373814]},
  {areaId: 610112004012, name: "九如御社区", value: [108.954041, 34.352059]},
  {areaId: 610112004013, name: "碧桂园嘉誉社区", value: [108.957151, 34.352154]},
  {areaId: 610112004014, name: "西航第一社区", value: [108.961347, 34.34958]},
  {areaId: 610112004015, name: "西航第三社区", value: [108.958863, 34.352734]},
  {areaId: 610112004016, name: "西航第四社区", value: [108.962607, 34.35295]},
  {areaId: 610112004017, name: "中宝达理想时光社区", value: [108.97774, 34.351801]},
  {areaId: 610112004018, name: "秦晋家园社区", value: [108.974974, 34.35473]},
  {areaId: 610112004019, name: "浩华北郡社区", value: [108.983828, 34.355376]},
  {areaId: 610112004020, name: "利君未来城社区", value: [108.989955, 34.360488]},
  {areaId: 610112004021, name: "碧桂园天悦社区", value: [108.988007, 34.368904]},
  {areaId: 610112004205, name: "北晨村", value: [108.998447, 34.36657]},
  {areaId: 610112004206, name: "新光村", value: [108.990328, 34.36808]},
  {areaId: 610112005001, name: "太华路社区", value: [108.975694, 34.281647]},
  {areaId: 610112005002, name: "雅荷社区", value: [108.945648, 34.314857]},
  {areaId: 610112005003, name: "铁路小区社区", value: [108.97532, 34.236861]},
  {areaId: 610112005005, name: "锦园新世纪花园社区", value: [108.963653, 34.307858]},
  {areaId: 610112005006, name: "孙家湾居委会", value: [108.97239, 34.323844]},
  {areaId: 610112005007, name: "十里铺居委会", value: [108.896283, 34.266911]},
  {areaId: 610112005008, name: "明园社区", value: [108.955277, 34.30735]},
  {areaId: 610112005009, name: "杨家庄社区", value: [108.990175, 34.316875]},
  {areaId: 610112005010, name: "曹家庙社区", value: [108.967204, 34.321071]},
  {areaId: 610112005011, name: "炕底寨社区", value: [108.953186, 34.300739]},
  {areaId: 610112005012, name: "东前进社区", value: [108.987899, 34.304461]},
  {areaId: 610112005013, name: "皇家园林社区", value: [108.961883, 34.312454]},
  {areaId: 610112005014, name: "珠江新城社区", value: [108.986807, 34.316038]},
  {areaId: 610112005015, name: "凤鸣华府社区", value: [108.964295, 34.318836]},
  {areaId: 610112005016, name: "先锋社区", value: [108.976218, 34.315563]},
  {areaId: 610112005017, name: "华远君城社区", value: [108.982547, 34.300053]},
  {areaId: 610112005018, name: "君逸社区", value: [108.966403, 34.312653]},
  {areaId: 610112005019, name: "刚家寨社区", value: [108.949972, 34.317666]},
  {areaId: 610112005020, name: "万科玄武路社区", value: [108.968394, 34.307287]},
  {areaId: 610112005021, name: "龙湖曼蒂苑社区", value: [108.973214, 34.31904]},
  {areaId: 610112005022, name: "保利樾公馆社区", value: [108.958599, 34.307297]},
  {areaId: 610112005023, name: "西派国际社区", value: [108.977684, 34.309462]},
  {areaId: 610112005024, name: "香槟社区", value: [108.926077, 34.278982]},
  {areaId: 610112005025, name: "长安易居社区", value: [108.986567, 34.307402]},
  {areaId: 610112005026, name: "泰和御景豪庭社区", value: [108.986817, 34.309387]},
  {areaId: 610112005027, name: "玄武新城社区", value: [108.985685, 34.305004]},
  {areaId: 610112005028, name: "万达公馆社区", value: [108.974836, 34.314678]},
  {areaId: 610112005029, name: "华远锦悦社区", value: [108.972201, 34.319933]},
  {areaId: 610112005030, name: "凤鸣贞观社区", value: [108.962759, 34.318767]},
  {areaId: 610112005031, name: "金旅城社区", value: [108.969289, 34.320562]},
  {areaId: 610112005032, name: "金科天籁城社区", value: [108.978139, 34.318227]},
  {areaId: 610112005033, name: "正荣府社区", value: [108.978614, 34.311426]},
  {areaId: 610112005034, name: "西铁渭滨社区", value: [108.967778, 34.315477]},
  {areaId: 610112005035, name: "红星美凯城社区", value: [108.991399, 34.316001]},
  {areaId: 610112005036, name: "中海太华府社区", value: [108.978983, 34.320777]},
  {areaId: 610112005037, name: "汇林华城社区", value: [108.984241, 34.303123]},
  {areaId: 610112005202, name: "井上村", value: [108.984782, 34.309958]},
  {areaId: 610112006001, name: "谭家社区", value: [108.972978, 34.332358]},
  {areaId: 610112006002, name: "渭滨街社区", value: [108.965535, 34.346072]},
  {areaId: 610112006003, name: "红旗社区", value: [108.962286, 34.345677]},
  {areaId: 610112006004, name: "百花园社区", value: [108.969224, 34.325137]},
  {areaId: 610112006005, name: "百花居委会", value: [108.97239, 34.323844]},
  {areaId: 610112006006, name: "天和新府社区", value: [108.965851, 34.341284]},
  {areaId: 610112006007, name: "帽珥塚社区", value: [108.981913, 34.333604]},
  {areaId: 610112006008, name: "浐灞新天地赵村社区居民委会", value: [109.005691, 34.331394]},
  {areaId: 610112006009, name: "三家庄社区", value: [108.972737, 34.332875]},
  {areaId: 610112006010, name: "呼沱社区", value: [108.997946, 34.322561]},
  {areaId: 610112006011, name: "阳光十里社区", value: [108.965875, 34.324701]},
  {areaId: 610112006012, name: "东方红社区", value: [108.997472, 34.344126]},
  {areaId: 610112006013, name: "香克林社区", value: [108.965608, 34.323732]},
  {areaId: 610112006014, name: "高山流水社区", value: [108.963598, 34.333122]},
  {areaId: 610112006015, name: "兴盛园社区", value: [108.962948, 34.328081]},
  {areaId: 610112006016, name: "谭家新家园社区", value: [108.975697, 34.333695]},
  {areaId: 610112006017, name: "万科幸福里社区", value: [108.983939, 34.326994]},
  {areaId: 610112006018, name: "浪琴湾社区", value: [108.961009, 34.330616]},
  {areaId: 610112006019, name: "水晶卡巴拉社区", value: [108.964089, 34.342368]},
  {areaId: 610112006020, name: "浐灞二路社区", value: [108.997946, 34.322561]},
  {areaId: 610112006021, name: "紫薇希望城社区", value: [108.966147, 34.331227]},
  {areaId: 610112006022, name: "香树花城社区", value: [108.992494, 34.324454]},
  {areaId: 610112006023, name: "碧桂园天玺社区", value: [108.988458, 34.325477]},
  {areaId: 610112006024, name: "龙钢禹华园社区", value: [108.97349, 34.334114]},
  {areaId: 610112006025, name: "恒大帝景社区", value: [108.985828, 34.326975]},
  {areaId: 610112006026, name: "华远枫悦社区", value: [108.979452, 34.33177]},
  {areaId: 610112006027, name: "欧亚六路社区", value: [109.004507, 34.359722]},
  {areaId: 610112006028, name: "碧桂园天宸社区", value: [108.998012, 34.371844]},
  {areaId: 610112006029, name: "广运潭西路社区", value: [109.052678, 34.313622]},
  {areaId: 610112006030, name: "启源二路社区", value: [108.996427, 34.403387]},
  {areaId: 610112006031, name: "惠泽居社区", value: [109.007971, 34.38488]},
  {areaId: 610112006032, name: "心语花园社区", value: [109.004936, 34.322585]},
  {areaId: 610112006033, name: "浐灞三路社区", value: [109.010553, 34.326617]},
  {areaId: 610112006201, name: "团结村", value: [108.984318, 34.340148]},
  {areaId: 610112007001, name: "草滩社区", value: [108.953466, 34.39038]},
  {areaId: 610112007002, name: "华山分厂社区", value: [108.965763, 34.398334]},
  {areaId: 610112007005, name: "草一社区", value: [108.959844, 34.391821]},
  {areaId: 610112007006, name: "长乐东苑第一社区", value: [108.952245, 34.375219]},
  {areaId: 610112007007, name: "吕小寨社区", value: [108.953168, 34.367838]},
  {areaId: 610112007008, name: "草二社区", value: [108.972154, 34.386619]},
  {areaId: 610112007009, name: "长乐东苑第二社区", value: [108.9529, 34.372779]},
  {areaId: 610112007010, name: "兴隆社区", value: [108.810206, 34.126387]},
  {areaId: 610112007011, name: "韩家湾社区", value: [108.955905, 34.371143]},
  {areaId: 610112007012, name: "隆源社区", value: [108.934207, 34.274636]},
  {areaId: 610112007013, name: "时间城社区", value: [108.962062, 34.365818]},
  {areaId: 610112007014, name: "长乐东苑第三社区", value: [108.950886, 34.3755]},
  {areaId: 610112007015, name: "长乐东苑第四社区", value: [108.949206, 34.366423]},
  {areaId: 610112007230, name: "柳树林村", value: [108.970005, 34.396587]},
  {areaId: 610112008004, name: "现代农业社区", value: [108.928437, 34.386257]},
  {areaId: 610112008005, name: "尚宏社区", value: [108.914954, 34.387119]},
  {areaId: 610112008006, name: "草滩佳苑社区", value: [108.932191, 34.387309]},
  {areaId: 610112008200, name: "感业寺村", value: [108.88465, 34.343364]},
  {areaId: 610112008202, name: "席村", value: [108.880279, 34.343801]},
  {areaId: 610112008205, name: "古渡口村", value: [108.876498, 34.340389]},
  {areaId: 610112008206, name: "唐家村", value: [108.872299, 34.343719]},
  {areaId: 610112008208, name: "关庙村", value: [108.866767, 34.341211]},
  {areaId: 610112008209, name: "东市村", value: [108.86222, 34.340679]},
  {areaId: 610112008211, name: "相家巷村", value: [108.858968, 34.33755]},
  {areaId: 610112008212, name: "六村堡村", value: [108.84467, 34.336505]},
  {areaId: 610112008213, name: "闫家村", value: [109.343355, 34.075052]},
  {areaId: 610112008232, name: "桂宫新村", value: [108.855126, 34.316351]},
  {areaId: 610112008234, name: "铁锁村", value: [108.848434, 34.326058]},
  {areaId: 610112008235, name: "桂北村", value: [108.864608, 34.324788]},
  {areaId: 610112008236, name: "徐寨村", value: [108.87039, 34.318857]},
  {areaId: 610112008240, name: "东风村", value: [108.877017, 34.327027]},
  {areaId: 610112009001, name: "朱宏路社区", value: [108.924505, 34.348627]},
  {areaId: 610112009002, name: "青门新区社区", value: [108.936561, 34.296923]},
  {areaId: 610112009003, name: "枣园安居社区", value: [108.937905, 34.298814]},
  {areaId: 610112009004, name: "董家居委会", value: [108.928814, 34.305873]},
  {areaId: 610112009005, name: "范南社区", value: [108.927748, 34.302715]},
  {areaId: 610112009006, name: "小白杨社区", value: [108.901911, 34.291269]},
  {areaId: 610112009007, name: "马呼沱社区", value: [108.923899, 34.297682]},
  {areaId: 610112009008, name: "范北社区", value: [108.928814, 34.305873]},
  {areaId: 610112009009, name: "大白杨东社区", value: [108.913526, 34.293007]},
  {areaId: 610112009010, name: "李下壕社区", value: [108.885706, 34.301887]},
  {areaId: 610112009011, name: "大白杨西社区", value: [108.913526, 34.293007]},
  {areaId: 610112009012, name: "李上壕社区", value: [108.917964, 34.296131]},
  {areaId: 610112009016, name: "延长石油社区", value: [108.936224, 34.306578]},
  {areaId: 610112009023, name: "颐馨花园社区", value: [108.934383, 34.294052]},
  {areaId: 610112009024, name: "阳光北郡社区", value: [108.930459, 34.296597]},
  {areaId: 610112009025, name: "金仕华城社区", value: [108.926987, 34.308922]},
  {areaId: 610112009026, name: "阳光台社区", value: [108.905687, 34.294079]},
  {areaId: 610112009027, name: "荣城名苑社区", value: [108.931154, 34.306894]},
  {areaId: 610112009028, name: "泽星亚龙湾社区", value: [108.926413, 34.299013]},
  {areaId: 610112009029, name: "海璟台北湾社区", value: [108.931706, 34.31466]},
  {areaId: 610112009030, name: "汉景苑社区", value: [108.886309, 34.288393]},
  {areaId: 610112009031, name: "汉都新苑第一社区", value: [108.90482, 34.36046]},
  {areaId: 610112009032, name: "汉都新苑第二社区", value: [108.907622, 34.359713]},
  {areaId: 610112009033, name: "汉都新苑第三社区", value: [108.90482, 34.36046]},
  {areaId: 610112009203, name: "枣园村", value: [108.862601, 34.279195]},
  {areaId: 610112009208, name: "阁老门村", value: [108.909069, 34.30397]},
  {areaId: 610112009209, name: "东唐村", value: [109.078718, 34.424461]},
  {areaId: 610112009210, name: "西唐寨村", value: [108.899892, 34.313966]},
  {areaId: 610112009211, name: "讲武殿北村", value: [108.88735, 34.313364]},
  {areaId: 610112009212, name: "讲武殿南村", value: [108.887573, 34.310749]},
  {areaId: 610112009213, name: "张家巷村", value: [108.981829, 34.105039]},
  {areaId: 610112009217, name: "西叶村", value: [108.886167, 34.299933]},
  {areaId: 610112010001, name: "海红社区", value: [108.927409, 34.317061]},
  {areaId: 610112010002, name: "三九居委会", value: [108.925689, 34.326395]},
  {areaId: 610112010003, name: "蔡家居委会", value: [109.086684, 34.528646]},
  {areaId: 610112010004, name: "杨家居委会", value: [108.938662, 34.349334]},
  {areaId: 610112010005, name: "北李居委会", value: [108.957916, 34.169392]},
  {areaId: 610112010006, name: "长乐西苑社区", value: [108.916587, 34.373057]},
  {areaId: 610112010007, name: "南党居委会", value: [108.931744, 34.363432]},
  {areaId: 610112010008, name: "刘家居委会", value: [109.307338, 34.162543]},
  {areaId: 610112010009, name: "青东社区", value: [108.922391, 34.348574]},
  {areaId: 610112010010, name: "贾家社区", value: [109.007363, 34.396349]},
  {areaId: 610112010011, name: "郭家社区", value: [108.897101, 34.276528]},
  {areaId: 610112010012, name: "青西社区", value: [108.920796, 34.346839]},
  {areaId: 610112010013, name: "朱宏堡社区", value: [108.923195, 34.338721]},
  {areaId: 610112010014, name: "全家社区", value: [108.933418, 34.348114]},
  {areaId: 610112010015, name: "御湖社区", value: [108.927225, 34.33931]},
  {areaId: 610112010016, name: "文景西区社区", value: [108.926848, 34.349681]},
  {areaId: 610112010017, name: "元鼎社区", value: [108.932195, 34.367142]},
  {areaId: 610112010200, name: "杨善村", value: [108.91284, 34.336915]},
  {areaId: 610112010203, name: "雷寨村", value: [108.906347, 34.321131]},
  {areaId: 610112010204, name: "罗寨村", value: [108.89409, 34.312572]},
  {areaId: 610112010205, name: "樊寨村", value: [108.908568, 34.314162]},
  {areaId: 610112010207, name: "查寨子村", value: [108.900679, 34.32069]},
  {areaId: 610112010209, name: "玉丰村", value: [108.913731, 34.324984]},
  {areaId: 610112010215, name: "楼阁台村", value: [108.899847, 34.339731]},
  {areaId: 610112010218, name: "东方红村", value: [108.916376, 34.35537]},
  {areaId: 610112010219, name: "张店村", value: [108.913812, 34.357136]},
  {areaId: 610112010222, name: "吴高墙村", value: [108.913181, 34.349082]},
  {areaId: 610112010235, name: "惠东村", value: [109.118254, 34.28429]},
  {areaId: 610112010236, name: "惠西村", value: [109.114349, 34.287493]},
  {areaId: 610112010238, name: "高庙村", value: [109.158893, 34.045078]},
  {areaId: 610112010240, name: "席王村", value: [109.063446, 34.288104]},
  {areaId: 610112011001, name: "王家堡社区", value: [108.99215, 34.394833]},
  {areaId: 610112011002, name: "景家堡社区", value: [108.984783, 34.393105]},
  {areaId: 610112011003, name: "长庆未央湖花园社区", value: [108.9791, 34.389521]},
  {areaId: 610112011004, name: "文家社区", value: [108.995451, 34.390241]},
  {areaId: 610112011005, name: "老洼滩社区", value: [108.968087, 34.366413]},
  {areaId: 610112011006, name: "长庆湖滨花园社区", value: [108.984799, 34.40843]},
  {areaId: 610112011007, name: "杜家堡社区", value: [108.967309, 34.376673]},
  {areaId: 610112011008, name: "陕西科技大学沁园社区", value: [108.980434, 34.382796]},
  {areaId: 610112011009, name: "小滩社区", value: [108.989841, 34.386117]},
  {areaId: 610112011010, name: "后村社区", value: [108.968247, 34.232881]},
  {areaId: 610112011011, name: "苏家堡社区", value: [109.000749, 34.388376]},
  {areaId: 610112011012, name: "八家堡社区", value: [108.999469, 34.396546]},
  {areaId: 610112011013, name: "陈家堡社区", value: [108.987324, 34.394188]},
  {areaId: 610112011014, name: "冯家滩社区", value: [109.001622, 34.395496]},
  {areaId: 610112011015, name: "贾家滩社区", value: [109.007363, 34.396349]},
  {areaId: 610112011016, name: "牛王庙社区", value: [108.978853, 34.406255]},
  {areaId: 610112011017, name: "龙记玖玺社区", value: [108.965767, 34.373263]},
  {areaId: 610112011018, name: "西工新苑社区", value: [108.984883, 34.382709]},
  {areaId: 610112011019, name: "医学院社区", value: [108.991682, 34.385589]},
  {areaId: 610112011020, name: "馨和居社区", value: [108.989459, 34.415152]},
  {areaId: 610112011021, name: "芸辉社区", value: [108.994225, 34.402001]},
  {areaId: 610112011022, name: "阳光社区", value: [109.009908, 34.238292]},
  {areaId: 610112011023, name: "翠湖社区", value: [108.996769, 34.391405]},
  {areaId: 610112011024, name: "芳泽社区", value: [108.980846, 34.401119]},
  {areaId: 610112011025, name: "新房欣苑社区", value: [108.993461, 34.394287]},
  {areaId: 610112011026, name: "王家棚社区", value: [108.990215, 34.408666]},
  {areaId: 610112011200, name: "郑家寺村", value: [108.989883, 34.385509]},
  {areaId: 610112011201, name: "湖北庄村", value: [108.97929, 34.374811]},
  {areaId: 610112011202, name: "草店村", value: [109.054076, 34.42422]},
  {areaId: 610112011203, name: "苏席村", value: [108.991798, 34.37904]},
  {areaId: 610112011205, name: "北钱村", value: [108.993081, 34.38049]},
  {areaId: 610112011206, name: "上庄村", value: [109.007451, 34.381411]},
  {areaId: 610112011207, name: "夏家村", value: [109.566986, 33.920598]},
  {areaId: 610112012001, name: "六村堡社区", value: [108.846776, 34.326708]},
  {areaId: 610112012002, name: "石化社区", value: [108.842083, 34.317215]},
  {areaId: 610112012003, name: "和兴园社区", value: [108.837912, 34.330089]},
  {areaId: 610112012004, name: "芊域阳光社区", value: [108.824332, 34.336046]},
  {areaId: 610112012005, name: "起航馨苑柏梁社区", value: [108.820481, 34.316375]},
  {areaId: 610112012006, name: "东贺社区", value: [108.849237, 34.200634]},
  {areaId: 610112012007, name: "丰衍社区", value: [108.846776, 34.326708]},
  {areaId: 610112012200, name: "南皂河村", value: [108.843262, 34.331304]},
  {areaId: 610112012201, name: "北皂河村", value: [108.841877, 34.33377]},
  {areaId: 610112012202, name: "八兴滩村", value: [108.837227, 34.333416]},
  {areaId: 610112012203, name: "泥河村", value: [108.833685, 34.333479]},
  {areaId: 610112012204, name: "二府营村", value: [108.829086, 34.33287]},
  {areaId: 610112012205, name: "新民村", value: [108.918134, 34.105959]},
  {areaId: 610112012207, name: "杜家村", value: [109.10496, 34.413766]},
  {areaId: 610112012208, name: "沙河滩村", value: [108.811867, 34.345509]},
  {areaId: 610112012209, name: "师家营村", value: [108.805255, 34.331597]},
  {areaId: 610112012210, name: "郑家村", value: [108.797028, 34.330677]},
  {areaId: 610112012211, name: "西贺村", value: [108.801697, 34.320508]},
  {areaId: 610112012214, name: "东柏梁村", value: [108.825387, 34.312507]},
  {areaId: 610112012215, name: "孟家村", value: [108.830299, 34.319406]},
  {areaId: 610112012216, name: "八家滩村", value: [108.844579, 34.328245]},
  {areaId: 610112012217, name: "焦家村", value: [108.846814, 34.321308]},
]


export default {
  name: "AppWeiyangDv",
  components: {AiEchartMap, NavTabs, AiEchart, ChargingPercent, ValueUnit, IconSmallPanel, IconStaPanel, SubHeader},
  label: "未央最新定制大屏",
  props: {
    instance: Function,
    dict: Object,
    menuName: {default: '未央最新定制大屏'}
  },
  data() {
    return {
      map: weiyang,
      areaId: "",
      integralOrderType: "",
      sta: {},
      chart: {aiTrend, workChain, residentDistribution, spDistribution, wotDistribution, integralOrder, residentGroupTrend},
      chartData: {},
      tableData: {},
      mapOps: {}
    }
  },
  computed: {
    ...mapState(["user"]),
    currentAreaId: v => "" || v.areaId || v.user.info.areaId,
    isLastAreaLevel: v => !/0{3}$/.test(v.currentAreaId),
    areaSta: v => [
      {label: "社区数", icon: "66d80346ec1ea", prop: "communityCount", unit: "个"},
      {label: "小区数", icon: "66d7fd4c0445d", prop: "residentialQuartersCount", unit: "个"},
      {label: "村数", icon: "66d7fd4d28f1b", prop: "villageCount", unit: "个"},
    ].map(e => ({...e, label: v.getLabel(e.prop), value: v.sta[e.prop] || 0, icon: `https://cdn.sinoecare.com/i/2024/09/04/${e.icon}.png`})),
    gridSta: v => [
      {label: "网格长", icon: "66e3dfde22b10", prop: "girdManager", unit: "人"},
      {label: "网格员", icon: "66e3dfdfd0252", prop: "girdMember", unit: "人"},
      {label: "楼栋长", icon: "66e3dfe1280a6", prop: "buildingManager", unit: "人"},
    ].map(e => ({...e, label: v.getLabel(e.prop), value: v.sta[e.prop] || 0, icon: `https://cdn.sinoecare.com/i/2024/09/13/${e.icon}.png`})),
    workorderSta: v => [
      {label: "已处理", prop: 'workOrderCountFinishNowMonth', unit: "个"},
      {label: "办理中", prop: 'workOrderCountProcessingNowMonth', unit: "个"},
      {label: "待受理", prop: 'workOrderCountPendingNowMonth', unit: "个"},
      {label: "延期", prop: 'workOrderCountExtensionNowMonth', unit: "个", isRed: !0},
    ].map(e => ({...e, label: v.getLabel(e.prop), value: v.sta[e.prop] || 0})),
    workorderTable: v => ({
      header: ['时间', '状态', '事件描述'],
      headerBGC: '#21b4fd1a', oddRowBGC: "transparent", evenRowBGC: "transparent",
      columnWidth: [160, 100,], align: [, 'center',],
      rowNum: 10,
      data: v.tableData.wotDistribution?.map(e => {
        const color = v.$dict.getColor('clapEventStatus', e.eventStatus)
        return [e.createTime,
          `<span class="eventStatus" style="background-color: ${color}24;color: ${color};">${v.$dict.getLabel('clapEventStatus', e.eventStatus)}</span>`,
          e.content]
      })
    }),
    residentGroupListTable: v => ({
      header: ['居民群', '群主', '群人数'],
      headerBGC: '#21b4fd1a', oddRowBGC: "transparent", evenRowBGC: "transparent",
      columnWidth: [300], align: ['left', 'center', 'right'],
      rowNum: 16,
      data: v.tableData.residentGroupList?.map(e => {
        return [e.name, e.ownerName, e.memberCount]
      })
    }),
    tabs: v => v.$dict.getDict("wyIntegralOrderType").map(e => {
      return {
        label: e.dictName,
        value: e.dictValue
      }
    }),
    monthOnMonth: v => calcComparePercent(v.sta.residentCountLastMonth, v.sta.residentCount),
    yearOnYear: v => calcComparePercent(v.sta.residentCountLastYear, v.sta.residentCount),
    workorderFinishedPercent: v => handlePercent(v.sta.workOrderCountFinish / v.sta.workOrderCount * 100),
    spDistributionTotal: v => v.chartData.spDistribution?.reduce((a, b) => a + b.c, 0) || 0,
    wotDistributionTotal: v => v.chartData.wotDistribution?.reduce((a, b) => a + b.c, 0) || 0,
  },
  watch: {
    integralOrderType() {
      this.getIntegralOrder()
    },
    areaId() {
      this.getData()
    },
    isLastAreaLevel(v) {
      this.chart.integralOrder.series.label.position[0] = v ? 760 : 390
    }
  },
  methods: {
    getData() {
      const {instance: http, currentAreaId: areaId} = this
      const list = [
        http.post("/app/wyDiy/pvr", null, {params: {areaId}}).then(res => {
          if (res?.data) {
            this.sta = res.data
          }
        }),
        http.post("/app/wyDiy/aiTrend", null, {params: {areaId}}).then(res => {
          if (res?.data) {
            this.$set(this.chartData, "aiTrend", res.data.map(e => [e.d, e.c]))
          }
        }),
        this.getIntegralOrder(),
        http.post("/app/wyDiy/spDistribution", null, {params: {areaId}}).then(res => {
          if (res?.data) {
            this.$set(this.chartData, "spDistribution", res.data)
          }
        }),
        http.post("/app/wyDiy/reportInfoList", null, {params: {areaId, size: 999}}).then(res => {
          if (res?.data) {
            this.$set(this.tableData, "wotDistribution", res.data.records)
          }
        }),
      ]
      if (this.isLastAreaLevel) {
        list.concat([
          http.post("/app/wyDiy/residentGroupList", null, {params: {areaId, size: 999}}).then(res => {
            if (res?.data) {
              this.$set(this.tableData, "residentGroupList", res.data)
            }
          }),
          http.post("/app/wyDiy/residentAge", null, {params: {areaId}}).then(res => {
            if (res?.data) {
              this.$set(this.chartData, "residentDistribution", res.data)
            }
          }),
          http.post("/app/wyDiy/residentGroupTrend", null, {params: {areaId}}).then(res => {
            if (res?.data) {
              this.$set(this.chartData, "residentGroupTrend", res.data)
            }
          }),
        ])
      } else {
        list.concat([
          http.post("/app/wyDiy/residentDistribution", null, {params: {areaId}}).then(res => {
            if (res?.data) {
              this.$set(this.chartData, "residentDistribution", res.data)
            }
          }),
          http.post("/app/wyDiy/workChain", null, {params: {areaId}}).then(res => {
            if (res?.data) {
              this.$set(this.chartData, "workChain", res.data.map(e => ['name', ...workChainSeries].map(k => e[k] ?? 0)))
            }
          }),
          http.post("/app/wyDiy/wotDistribution", null, {params: {areaId}}).then(res => {
            if (res?.data) {
              this.$set(this.chartData, "wotDistribution", res.data)
            }
          }),
          http.post("/app/wyDiy/mapInfo", null, {params: {areaId}}).then(res => {
            if (res?.data) {
              this.$set(this.chartData, "mapInfo", res.data)
            }
          })
        ])
      }
      return Promise.all(list)
    },
    getLabel(key) {
      return this.dict.getLabel("wyBasicCount", key) || key
    },
    getIntegralOrder() {
      let {instance: http, currentAreaId: areaId, integralOrderType, isLastAreaLevel} = this
      if (isLastAreaLevel) {
        integralOrderType = 3
      }
      return http.post("/app/wyDiy/integralOrder", null, {params: {areaId, type: integralOrderType}}).then(res => {
        if (res?.data) {
          this.$set(this.chartData, "integralOrder",
              res.data
              // [
              //   {name: '张三', c: 997},
              //   {name: '李四', c: 667},
              //   {name: '钱二', c: 412},
              //   {name: '王五', c: 232},
              // ]
          )
        }
      })
    },
    mapEvent(map) {
      this.$set(this.chart, 'map', map)
      map.on('click', (e) => {
        this.areaId = e.data.areaId
        if (!this.isLastAreaLevel) {
          this.renderMap(this.areaId)
        }
      })
    },
    renderMap(areaId, reload = true) {
      const mapGeo = this.$copy(weiyang)
      let scatters = []
      if (areaId) {
        mapGeo.features = mapGeo.features.filter(e => `${e.properties.unique_id}000` === areaId)
        scatters = allLastScatters.filter(e => `${e.areaId}`.startsWith(areaId.substring(0, 10)))
      } else {
        scatters = mapGeo.features.map(e => {
          const {name, unique_id, geo_wkt = ""} = e.properties
          return {name, areaId: unique_id + "000", value: [...geo_wkt.match(/[.\d]+/g)]}
        })
      }
      this.$nextTick(() => {
        const colors = {
          三桥街道: "#EBADC8",
          建章路街道: "#B886EA",
          未央宫街道: "#A8B4F0",
          六村堡街道: "#35FDFC",
          汉城街道: "#37FBB9",
          张家堡街道: "#D8F98A",
          草滩街道: "#25B3F8",
          未央湖街道: "#73DCFC",
          徐家湾街道: "#F3C83F",
          谭家街道: "#FD9004",
          辛家庙街道: "#F3C83F",
          大明宫街道: "#FB3744",
        }
        const regions = Object.entries(colors).map(([name, color]) => ({name, itemStyle: {areaColor: `${color}80`, borderColor: color, borderWidth: 1}}))
        const options = this.$refs.map.handleMapOps(mapGeo, {
          geo: {label: {show: false}, regions},
          series: {
            type: 'effectScatter', coordinateSystem: 'geo', itemStyle: {color: '#4DF6FF'},
            select: {itemStyle: {color: '#FFC800'}},
            data: scatters, label: {
              position: 'bottom', color: '#fff', fontSize: 12,
              show: true, formatter: params => {
                return params.name
              }
            }
          },
          tooltip: {
            position: 'top',
            backgroundColor: "rgba(11,42,64,0.6)", textStyle: {color: '#fff'}, formatter: params => {
              const {name, areaId} = params.data
              const item = this.chartData.mapInfo.find(e => e.areaId == areaId) || {}
              return `<div style="width: 144px;padding: 0 4px">
<b class="mar-b8 font-16">${name}</b>
${["mapResidentCount", "mapResidentGroupCount", "mapWorkOrderCount"].map(prop => `<div class="flex" style="line-height: 22px;">
<span class="fill" style="color:#99B5D2">${this.getLabel(prop)}</span> ${item[prop] || 0}</div>`).join("")}</div>`
            }
          },
          // toolbox: {
          //   feature: {restore: {title: "重置"}},
          // }
        }, true)
        this.map = mapGeo
        this.mapOps = options
        this.chart.map.dispatchAction({type: 'restore'})
        if (reload) {
          this.chart.map.clear()
          this.chart.map.setOption(options)
        }
      })
    },
    handleBack() {
      const areaCode = this.currentAreaId
      const lv = Area.getLevelByAreaId(areaCode)
      if (lv == 3) {
        this.areaId = ""
        this.renderMap()
      } else if (lv == 4) {
        this.areaId = Area.getAreaCodeByLevel(areaCode, lv - 1)
        this.renderMap(this.areaId, false)
      }
    }
  },
  created() {
    this.dict.load("wyBasicCount", "wyIntegralOrderType", "clapEventStatus").then(() => {
      this.integralOrderType = this.dict.getDict("wyIntegralOrderType")[0].dictValue
      this.getData().then(() => this.renderMap())
    })
  }
}
</script>
<template>
  <section class="AppWeiyangDv" :class="{isLastAreaLevel}">
    <template v-if="isLastAreaLevel">
      <div class="a pad-v10 pad-h20">
        <icon-sta-panel :label="getLabel('residentCount')" :value="sta.residentCount" unit="人" icon="https://cdn.sinoecare.com/i/2024/09/04/66d7cd083a9b0.png"/>
        <div class="flex staPercent">
          <div class="flex fill">月环比<p :class="{minus:monthOnMonth<0}" v-text="monthOnMonth"/></div>
          <div class="flex fill">年同比<p :class="{minus:yearOnYear<0}" v-text="yearOnYear"/></div>
        </div>
      </div>
      <icon-sta-panel class="a1 pad-24" :label="getLabel('residentGroupCount')" :value="sta.residentGroupCount" unit="个" icon="https://cdn.sinoecare.com/i/2024/09/13/66e3b730b524d.png"/>
      <div class="b flex column center">
        <div class="font-18 mar-b16" v-text="getLabel('workOrderCountNowMonth')"/>
        <value-unit :value="sta.workOrderCountNowMonth" unit="个" size="large"/>
      </div>
      <div class="bb grid">
        <div class="item pad-v8 flex column center" v-for="(e,i) in workorderSta" :key="i" :class="{isRed:e.isRed}">
          <div v-text="e.label"/>
          <value-unit :value="e.value" :unit="e.unit" size="mini"/>
        </div>
      </div>
      <div class="b2 pad-v8 pad-h12 flex column normal font-12">
        <div v-text="getLabel('aiCount')"/>
        <value-unit :value="sta.aiCount" unit="次" color="#fff"/>
        <ai-echart :ops="chart.aiTrend" :data="chartData.aiTrend"/>
        <div class="flex">
          {{ getLabel('aiCountLastDay') }}
          <value-unit class="mar-l8" :value="sta.aiCountLastDay" unit="次" size="mini"/>
        </div>
      </div>
      <div class="cc grid">
        <icon-sta-panel class="item flex" v-for="(e,i) in gridSta" :key="i" v-bind="e" size="small"/>
      </div>
      <sub-header class="e" title="居民统计">
        <div class="info pad-r8" slot="right" v-text="`按街道进行汇总统计`"/>
        <ai-echart :ops="chart.residentDistribution" :data="chartData.residentDistribution"/>
      </sub-header>
      <sub-header class="j" title="特殊人群数量统计">
        <ai-echart :ops="chart.spDistribution" :data="chartData.spDistribution">
          <div class="summary flex column">
            <span v-text="`总数`"/>
            <value-unit :value="spDistributionTotal" unit="人" size="mini"/>
          </div>
        </ai-echart>
      </sub-header>
      <div class="f">
        <div class="back" @click="handleBack">返回上一级</div>
        <dv-scroll-board :config="workorderTable"/>
      </div>
      <sub-header class="g" title="居民群列表">
        <dv-scroll-board class="pad-h12" :config="residentGroupListTable"/>
      </sub-header>
      <sub-header class="h" title="居民群统计">
        <ai-echart :ops="chart.residentGroupTrend" :data="chartData.residentGroupTrend"/>
      </sub-header>
      <sub-header class="i" title="社区积分排名(前10)">
        <div class="info pad-r8" slot="right" v-text="`网格员积分排名`"/>
        <ai-echart :ops="chart.integralOrder" :data="chartData.integralOrder"/>
      </sub-header>
    </template>
    <template v-else>
      <icon-sta-panel class="a pad-24" :label="getLabel('partyOrgCount')" :value="sta.partyOrgCount" unit="人" icon="https://cdn.sinoecare.com/i/2024/09/04/66d7cd06f269b.png"/>
      <icon-sta-panel class="a1 pad-24" :label="getLabel('partyCount')" :value="sta.partyCount" unit="人" icon="https://cdn.sinoecare.com/i/2024/09/04/66d7cd0560bea.png"/>
      <div class="b pad-l16 pad-r12 pad-v6">
        <icon-small-panel v-for="(e,i) in areaSta" :key="i" v-bind="e"/>
      </div>
      <div class="b1 pad-v10 pad-h20">
        <icon-sta-panel :label="getLabel('residentCount')" :value="sta.residentCount" unit="人" icon="https://cdn.sinoecare.com/i/2024/09/04/66d7cd083a9b0.png"/>
        <div class="flex staPercent">
          <div class="flex fill">月环比<p :class="{minus:monthOnMonth<0}" v-text="monthOnMonth"/></div>
          <div class="flex fill">年同比<p :class="{minus:yearOnYear<0}" v-text="yearOnYear"/></div>
        </div>
      </div>
      <div class="b2 pad-v8 pad-h12 flex column normal font-12">
        <div v-text="getLabel('aiCount')"/>
        <value-unit :value="sta.aiCount" unit="次" color="#fff"/>
        <ai-echart :ops="chart.aiTrend" :data="chartData.aiTrend"/>
        <div class="flex">
          {{ getLabel('aiCountLastDay') }}
          <value-unit class="mar-l8" :value="sta.aiCountLastDay" unit="次" size="mini"/>
        </div>
      </div>
      <div class="c flex column center">
        <div class="mar-b40" v-text="'工单处置率'"/>
        <charging-percent label="已完成工单" :value="workorderFinishedPercent"/>
      </div>
      <div class="c1 grid">
        <icon-small-panel class="item row pad-h16" :label="getLabel('workOrderCountNowMonth')" :value="sta.workOrderCountNowMonth" unit="个"/>
        <div class="item pad-v12 flex column center" v-for="(e,i) in workorderSta" :key="i" :class="{isRed:e.isRed}">
          <div v-text="e.label"/>
          <value-unit :value="e.value" :unit="e.unit" size="mini"/>
        </div>
      </div>
      <sub-header class="e" title="五条工作链">
        <ai-echart :ops="chart.workChain" :data="chartData.workChain"/>
      </sub-header>
      <ai-echart-map ref="map" :geo-json="map" class="f" @map="mapEvent" :ops="mapOps">
        <div v-if="!/0{6}$/.test(currentAreaId)" class="back fixed" @click="handleBack">返回上一级</div>
      </ai-echart-map>
      <sub-header class="g" title="工单分类">
        <div class="flex column normal" style="height: 100%">
          <ai-echart class="wotDistribution" :ops="chart.wotDistribution" :data="chartData.wotDistribution">
            <div class="summary flex column">
              <span v-text="`总数`"/>
              <value-unit :value="wotDistributionTotal"/>
            </div>
          </ai-echart>
          <dv-scroll-board class="pad-h12 fill" :config="workorderTable"/>
        </div>
      </sub-header>
      <sub-header class="h" title="全区积分排名(前10)">
        <nav-tabs class="pad-r8" slot="right" :list="tabs" @click="s=>integralOrderType=s.value"/>
        <ai-echart :ops="chart.integralOrder" :data="chartData.integralOrder"/>
      </sub-header>
      <sub-header class="i" title="居民统计">
        <div class="info pad-r8" slot="right" v-text="`按街道进行汇总统计`"/>
        <ai-echart :ops="chart.residentDistribution" :data="chartData.residentDistribution"/>
      </sub-header>
      <sub-header class="j" title="特殊人群数量统计">
        <ai-echart :ops="chart.spDistribution" :data="chartData.spDistribution">
          <div class="summary flex column">
            <span v-text="`总数`"/>
            <value-unit :value="spDistributionTotal" unit="人" size="mini"/>
          </div>
        </ai-echart>
      </sub-header>
    </template>
  </section>
</template>
<style lang="scss">
.AiDvWrapper {
  .viewPanel {
    background-image: url("https://cdn.sinoecare.com/i/2024/09/03/66d6a644bcc6e.png");

    & > .primary, & > .fill {
      padding: 0 24px !important;
    }
  }
}

@font-face {
  font-family: "DINAlternate";
  src: url("https://cdn.cunwuyun.cn/fonts/D-DIN-PRO-500-Medium.otf");
}
</style>
<style scoped lang="scss">
.AppWeiyangDv {
  font-size: 14px;
  color: #fff;
  display: grid;
  gap: 10px;
  padding: 16px 0;
  grid-auto-rows: 128px;
  grid-template-columns: 245px 245px 240px 240px 180px 180px 230px 1fr;
  grid-template-areas:
  "a a1 b b1 b2 b2 c c1"
  "e e f f f f c c1"
  "e e f f f f g g"
  "e e f f f f g g"
  "e e f f f f g g"
  "h h i i j j g g"
  "h h i i j j g g";

  &.isLastAreaLevel {
    grid-template-areas:
    "a a1 b bb b2 b2 cc cc"
    "e e f f f f g g"
    "e e f f f f g g"
    "j j f f f f g g"
    "j j f f f f g g"
    "h h i i i i g g"
    "h h i i i i g g";

    .bb {
      gap: 10px;
      grid-template-columns: repeat(2, 1fr);
    }

    .cc {
      grid-area: cc;
      gap: 10px;
      grid-template-columns: repeat(3, 1fr);
    }
  }

  .item {
    background: #7583900f;
    backdrop-filter: blur(8px);
  }

  @each $area in (a, a1, b, b1, b2, c, c1, c2, d, e, f, g, h, i, j) {
    .#{$area} {
      grid-area: $area;
      @if not index((c1),$area) {
        @extend .item;
      }
    }
  }

  .c1 {
    gap: 10px;
    grid-template-columns: repeat(2, 1fr);

    .row {
      grid-column: 1/3
    }
  }

  .info {
    font-size: 12px;
    color: #BDCCDB;
  }

  .staPercent {
    margin-top: 9px;
    line-height: 40px;
    font-size: 12px;
    white-space: nowrap;

    p {
      font-size: 14px;
      color: #26FF9A;
      display: flex;
      align-items: center;
      font-family: DINAlternate;

      &:before {
        margin-left: 4px;
        margin-right: 2px;
        font-size: 10px;
        content: "▲";
      }

      &:after {
        font-size: 12px;
        content: "%";
      }

      &.minus {
        color: #FF2727;

        &:before {
          content: "▼";
        }
      }
    }
  }

  .isRed {
    background: #fa35351a;
    border: 1px solid #f76e6e52;

    :deep(.valueUnit) {
      color: #FF2727;
    }
  }

  @each $s in (12, 14, 16, 18, 20, 24, 36) {
    .font-#{$s} {
      font-size: #{$s}px;
    }
  }

  :deep(.j), :deep(.g) {
    .summary {
      position: absolute;
      top: 50%;
      left: 50%;
      transform: translate(-50%, -50%);
      font-weight: 400;
      color: #fff;
      gap: 6px;
    }
  }

  .wotDistribution {
    height: 252px;
    flex: unset;
    flex-shrink: 0;
  }

  :deep(.dv-scroll-board) {
    height: calc(100% - 38px);

    .header-item {
      color: #02FEFF;
    }

    .eventStatus {
      font-size: 12px;
      border-radius: 4px;
      padding: 4px 8px;
    }
  }

  :deep(.back) {
    padding-left: 34px;
    background-image: url("https://cdn.sinoecare.com/i/2024/09/19/66ebeac5796b2.png");
    background-repeat: no-repeat;
    z-index: 1;
    background-size: 34px auto;
    background-position: left top;
    line-height: 38px;
    cursor: pointer;

    &.fixed {
      position: absolute;
      top: 0;
      left: 0;
    }
  }
}
</style>
