<template>
  <el-scrollbar height="100vh">
    <div class="wrapper">
      <datav-header/>
      <main>
        <el-row :gutter="16">
          <el-col :span="6">
            <datav-card title="调查情况" style="height: 156px">
              <el-row class="mb-32">
                <el-col :span="5">
                  <div class="descriptions_cell text-center margin-top-30">
                    <div class="descriptions_content">
                      {{ reviewOk.State2 }}
                    </div>
                    <div class="descriptions_label">
                      调查总量
                    </div>
                  </div>
                </el-col>
                <el-col :span="5">
                  <div class="descriptions_cell text-center margin-top-30">
                    <div class="descriptions_content">
                      {{ reviewOk.State3 }}
                    </div>
                    <div class="descriptions_label">
                      有效回复
                    </div>
                  </div>
                </el-col>
                <el-col :span="5">
                  <div class="descriptions_cell text-center margin-top-30">
                    <div class="descriptions_content">
                      {{ reviewOk.State3 - reviewOk.bmys }}
                    </div>
                    <div class="descriptions_label">
                      满意
                    </div>
                  </div>
                </el-col>
                <el-col :span="5">
                  <div class="descriptions_cell text-center margin-top-30">
                    <div class="descriptions_content">
                      {{ 0 }}
                    </div>
                    <div class="descriptions_label">
                      基本满意
                    </div>
                  </div>
                </el-col>
                <el-col :span="4">
                  <div class="descriptions_cell text-center margin-top-30">
                    <div class="descriptions_content">
                      {{ reviewOk.bmys }}
                    </div>
                    <div class="descriptions_label">
                      不满意数
                    </div>
                  </div>
                </el-col>
              </el-row>
            </datav-card>
            <datav-card title="调查滿意度">
              <div style="height: 226px">
                <el-container>
                  <el-aside width="100px">
                    <el-col>
                      <div class="descriptions_cell text-center height-118">
                        <div class="descriptions_content margin-top-30 ">
                          {{ dcmyd.length > 0 && dcmyd[2] && dcmyd[2].FinalRP !== undefined ? dcmyd[2].FinalRP : '0' }}
                        </div>
                        <div class="descriptions_label">
                          上期满意度
                        </div>
                      </div>
                      <div class="descriptions_cell text-center height-118">
                        <div class="descriptions_content">
                          {{ dcmyd.length > 0 && dcmyd[0] && dcmyd[0].FinalRP !== undefined ? dcmyd[0].FinalRP : '0' }}
                        </div>
                        <div class="descriptions_label">
                          当前调查满意度
                        </div>
                      </div>
                    </el-col>

                  </el-aside>
                  <el-main>
                    <v-charts
                        :option="option1"
                        autoresize
                    />
                  </el-main>
                </el-container>
              </div>
            </datav-card>
            <div style="background-color:#04144E; ">
              <h3 style="color: white">业务满意率</h3>
              <el-table
                  :data="tableData"
                  height="300"
                  :summary-cell-style="summaryCellStyle"
                  :summary-method="getSummaries"
                  :style="{ width: '100%', marginTop: '20px', fontSize: fontSize + 'px'  }"
                  :header-cell-style="headerCellStyle"
                  :row-style="tableRowStyle"
                  :show-summary='true'
                  :highlight-current-row="false"
              >
                <el-table-column prop="Name" label="单项业务" width="82px"/>
                <el-table-column prop="sdcl" label="有效数" width="72px"/>
                <el-table-column label="基本满意数" width="72px">
                  <template v-slot="scope">
                    <span>{{ calculateSatisfaction(scope.row) }}</span>
                  </template>
                </el-table-column>
                <el-table-column prop="sbmys" label="不满意数" width="72px"/>
                <el-table-column prop="smyl" label="满意率" width="72px"/>
                <el-table-column prop="smyltb" label="同比" width="86px"/>
              </el-table>
            </div>
          </el-col>

          <el-col :span="12">
            <div class="datav-col">
              <el-row :gutter="6">
                <el-col :span="4">
                  <!--                  <datav-select></datav-select>-->
                </el-col>

              </el-row>

            </div>
            <v-charts
                style="height: 450px"
                :option="option"
                autoresize
            />

            <datav-card title="综合滿意度排名">
              <div class="common-layout">
                <el-container>

                  <el-container>
                    <el-header>
                      <div style="background-color:#04144E; ">
                        <el-table
                            :data="tableData1"
                            height="106"
                            :summary-cell-style="summaryCellStyle"
                            :summary-method="getSummaries"
                            :style="{ width: '100%', marginTop: '20px', fontSize: fontSize + 'px'  }"
                            :header-cell-style="headerCellStyle"
                            :row-style="tableRowStyle"
                            :show-summary='false'
                            :highlight-current-row='false'
                        >
                          <el-table-column prop="SetName" label="排名" width="76"/>
                          <el-table-column prop="OrganizeName" label="市州考评" width="149"/>
                          <el-table-column prop="FinalRP" label="滿意度" width="65"/>
                          <el-table-column prop="TBRp" label="上期满意度" width="65"/>
                          <el-table-column prop="TBRpts" label="同比上期" width="65"/>
                        </el-table>
                      </div>
                    </el-header>
                    <el-main>
                      <div style="background-color:#04144E; ">
                        <el-table
                            :data="tableData2"
                            height="215"
                            :summary-cell-style="summaryCellStyle"
                            :summary-method="getSummaries"
                            :style="{ width: '100%', marginTop: '70px', fontSize: fontSize + 'px'  }"
                            :header-cell-style="headerCellStyle"
                            :row-style="tableRowStyle"
                            :show-summary='false'
                            :highlight-current-row='false'
                        >
                          <el-table-column prop="MydRanking" label="排名"/>
                          <el-table-column prop="OrganizeName" label="县市考评"/>
                          <el-table-column prop="FinalRP" label="滿意度"/>
                          <el-table-column prop="TBRp" label="上期满意度"/>
                          <el-table-column prop="TBRpts" label="同比上期"/>
                        </el-table>
                      </div>
                    </el-main>
                  </el-container>

                  <el-aside width="445px">
                    <div style="background-color:#04144E; height: 360px ">
                      <el-table
                          :data="tableData3"
                          height="360"
                          :summary-cell-style="summaryCellStyle"
                          :summary-method="getSummaries"
                          :style="{ width: '100%', marginTop: '20px', fontSize: fontSize + 'px'  }"
                          :header-cell-style="headerCellStyle"
                          :row-style="tableRowStyle"
                          :show-summary='false'
                      >
                        <el-table-column prop="MydRanking" label="排名"/>
                        <el-table-column prop="OrganizeName" label="区"/>
                        <el-table-column prop="FinalRP" label="滿意度"/>
                        <el-table-column prop="TBRp" label="上期满意度"/>
                        <el-table-column prop="TBRpts" label="同比上期"/>
                      </el-table>
                    </div>
                  </el-aside>
                </el-container>
              </div>
            </datav-card>

          </el-col>

          <el-col :span="6">
            <datav-card title="不满意样本趋势" sub-title="不满意样本" style="height: 156px">
              <div style="height: 150px">
                <v-charts
                    :option="option2"
                    autoresize
                />
              </div>

            </datav-card>
            <datav-card title="单项分析">
              <div style="height: 226px">
                <v-charts
                    :option="option3"
                    autoresize
                />
              </div>
            </datav-card>
            <div style="background-color:#04144E; ">
              <h3 style="color: white">单项调查情况 <span style="font-size: 14px; color: #597AE9">昨日数据下发</span>
              </h3>
              <el-table
                  :data="tableData4"
                  height="300"
                  :summary-cell-style="summaryCellStyle"
                  :summary-method="getSummaries"
                  :style="{ width: '100%', marginTop: '20px', fontSize: fontSize + 'px'  }"
                  :header-cell-style="headerCellStyle"
                  :row-style="tableRowStyle"
                  :show-summary='true'
              >
                <el-table-column prop="Name" label="单项业务"/>
                <el-table-column prop="sdcl" label="有效数"/>
                <el-table-column prop="bmyzs" label="省不满意数"/>
                <el-table-column prop="LastDayQACount" label="新增调查数"/>
              </el-table>
            </div>
          </el-col>

        </el-row>
      </main>
    </div>
  </el-scrollbar>

</template>


<script setup>
import vCharts from "vue-echarts";
import changshaMap from "@/assets/data/changsha.json";
import * as echarts from "echarts/core";
import {GetBMYYBQS, GetDCQK, GetDITU, GetDXFX, GetGLFW, GetRCSQQK, GetZHMYLPM, GetZRSJXF} from "@/api/screen/jwpy.ts";


// region   左边
// 调查情况
const reviewOk = ref({
  LevelType: "湖南",
  State2: 164279,
  State3: 104659,
  bmys: "1615",
  dczl: 392902,
  jtl: "68.45%",
  yxhf: "104659",
  yxl: "38.92%"
});
// 调查滿意度
const dcmyd = ref([]);
// endregion

// region   右边
const bmyybqs = ref([]);
const dxfx = ref([]);
// endregion


echarts.registerMap("changsha", changshaMap);
let mapDataList = reactive([
  {name: '长沙县', value: 500},
  {name: '浏阳市', value: 400},
  {name: '开福区', value: 300},
  {name: '浏阳市', value: 400},
  {name: '望城区', value: 400},
  {name: '芙蓉区', value: 400},
  {name: '天心区', value: 400},
  {name: '雨花区', value: 400},
  {name: '岳麓区', value: 400},
  {name: '宁乡市', value: 400},
]);
const option = {
  geo: {
    // 是上面注册时的名字哦，registerMap（'名字保持一致'）
    map: "changsha",
    itemStyle: {
      normal: {
        areaColor: "#02215E", // 这里将地图区域的颜色修改为红色
      },
    },
  },
  tooltip: {
    show: true,
    trigger: "item",
    position: "right",
    formatter: function (params) {
      if (typeof params.data === "undefined") {
        console.log(params);
      } else {
        console.log(params);
        return `<div class="tooltip">
          <div class="tooltip-title">${params.name}</div>
          <div class="tooltip-content">
            <ul class="tooltip-ul">
              <li>信访总件数 <span>${params.data.todaysum}</span></li>
              <li>国家信访 <span>${params.data.allsum}</span>
              </li>
              <li>公安部信访 <span>${params.data.completed}</span>
              </li>
              <li>局长信箱 <span>${params.data.completedrate}</span></li>
              <li>12337信访 <span>${params.data.resolvedrate}</span></li>
            </ul>
          </div>
        </div>`;
      }
    },
    backgroundColor: "#031577", //
    borderColor: "#0A2F86",
    borderWidth: 0, // 设置边框宽度为1像素
    borderRadius: 3, // 设置边框半径为3像素
    shadowBlur: 0, // 设置阴影模糊程度为8像素
    shadowOffsetX: 0, // 设置水平阴影位移量为0像素
    shadowOffsetY: 0, // 设置垂直阴影位移量为6像素
  },
  visualMap: {
    type: "piecewise",
    bottom: 10,
    pieces: [
      {gte: 85, lte: 100, label: "信访总件数>300"},
      {gte: 65, lte: 85, label: "信访总件数>200"},
      {gte: 0, lte: 65, label: "信访总件数0-200"},
    ],
    right: 10, // 右边距
    realtime: false,
    orient: "horizontal", // 水平显示
    textStyle: {
      color: "#fff", // 文字颜色
    },
    calculable: true,
    inRange: {
      color: ["#D34343", "#F6A149", "#4987F6"],
    },
  },
  series: [
    {
      name: "长沙",
      type: "map",
      map: "changsha",
      hoverAnimation: true,
      label: {
        show: true,
        color: "white",
      },
      data: mapDataList,
    },
  ],
};
const option1 = ref({
  xAxis: {
    type: "category",
    boundaryGap: false,
    data: [],
  },
  yAxis: {
    type: "value",
    splitLine: {
      show: true,
      lineStyle: {
        color: "#193775",
      },
    }
  },
  tooltip: {
    trigger: 'axis',
    axisPointer: {
      type: 'line',
      label: {
        backgroundColor: '#6a7985'
      }
    }
  },
  series: [
    {
      type: "line",
      smooth: true,
      label: {
        show: false
      },
      lineStyle: {
        color: "#28E6FF",
        width: 4,
      },
      areaStyle: {
        color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
          {
            offset: 0,
            color: "rgba(40,230,255,0.47)", // 渐变起始颜色
          },
          {
            offset: 1,
            color: "rgba(40,230,255,0)", // 渐变结束颜色
          },
        ]),
      },
      data: [],
    },
  ],
  grid: {left: '10%', right: '10%', top: '10%', bottom: '20%', containLabel: true},
})
const option2 = ref({
  xAxis: {
    type: "category",
    boundaryGap: false,
    data: [
      "9/10",
      "9/11",
      "9/12",
      "9/13",
      "9/13",
      "9/13",

    ],
  },
  yAxis: {
    type: "value",
    splitLine: {
      show: true,
      lineStyle: {
        color: "#193775",
      },
    }
  },
  tooltip: {
    trigger: 'axis',
    axisPointer: {
      type: 'line',
      label: {
        backgroundColor: '#6a7985'
      }
    }
  },
  series: [
    {
      type: "line",
      smooth: true,
      label: {
        show: false
      },
      lineStyle: {
        color: "#6FDBA0",

        width: 4,
      },
      areaStyle: {
        color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [{
          offset: 0,
          color: 'rgba(109, 221, 159, 0.47)'
        }, {offset: 1, color: 'rgba(109, 221, 159, 0)'}])
      },

      data: [
        79,
        88,
        82,
        77,
        69,
        90,
      ],
    },
  ],
  grid: {left: '10%', right: '10%', top: '10%', bottom: '20%', containLabel: true},
})
const option3 = ref({
  tooltip: {},
  legend: {
    data: ['本期', '上一期', '去年同期'],
    textStyle: {
      color: '#fff',
    },
  },
  grid: {
    left: '10%',
    right: '10%', top: '10%', bottom: '10%'
  },
  xAxis: {
    type: 'category',
    data: []
  },
  yAxis: {
    type: 'value'
  },
  series: [
    {
      name: '本期',
      type: 'bar',
      data: [],
      itemStyle: {
        color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [{
          offset: 0,
          color: 'rgba(40,230,255,0.63)'
        }, {offset: 1, color: 'rgba(40,230,255,0)'}])
      },


    },
    {
      name: '上一期',
      type: 'bar',
      data: [],
      itemStyle: {
        color: new echarts.graphic.LinearGradient(0, 0, 0, 1,
            [{offset: 0, color: 'rgba(255,218,51,0.52)'},
              {offset: 1, color: 'rgba(255,219,49,0)'}])
      }
    },
    {
      name: '去年同期',
      type: 'line',
      data: [],
      itemStyle: {
        color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [{
          offset: 0,
          color: '#6FDBA0'
        }, {offset: 1, color: '#6FDBA0'}])
      }
    }
  ]

});


// region 表格数据
const tableData = ref([])
const tableData1 = ref([])
const tableData2 = ref([])
const tableData3 = ref([])
const tableData4 = ref([])
// endregion


onMounted(() => {
  getData();
});

function getData() {
   GetDCQK().then((res) => {
     reviewOk.value = res
   });
  GetGLFW().then((res) => {
    dcmyd.value =  res.lstson
    option1.value.xAxis.data = dcmyd.value[0].lstson.map(item => item.SonPeriodName);
    option1.value.series[0].data = dcmyd.value[0].lstson.map(item => item.FinalRP);
  });
  GetZRSJXF().then((res) => {
    let tempTable = res.lstShen
    tempTable = tempTable.filter(item => item.Name !== null)
    tableData.value = tempTable;
  });
  // 综合满意度排名
  GetZHMYLPM().then((res) => {
    tableData1.value =  res.lstCity
    let temp = res.lstSheng;
    const group2 = temp.filter(item => item.SetName === "(省)县市考评");
    const group3 = temp.filter(item => item.SetName === "(省)区");
    tableData2.value = group2
    tableData3.value = group3
  });

  // 不满意样本趋势
  GetBMYYBQS().then((res) => {
    bmyybqs.value = res
  });

  // 单项分析
  GetDXFX().then((res) => {
    dxfx.value = res.lstson
  });

  // GetRCSQQK().then((res) => {  });

  // GetZRSJXF().then((res) => {  });
  // GetDITU().then((res) => {  });
}


setTimeout(() => {
  reviewOk.value = {
    LevelType: "省",
    dczl: 1410919,
    jtl: "67.84%",
    yxhf: "490980",
    yxl: "51.3%",
    mys: "462939",
    jbmys: "21688",
    bmys: "6353",
    State2: 466175,
    State3: 490980
  }

  // 调查满意度
  dcmyd.value = [
    {
      Bak: "满意度",
      FinalRP: 95.3,
      lstson: [
        {
          "State3": 43486,
          "FinalRP": 94.37,
          "PeriodSonID": "37",
          "SonSerialNo": 1,
          "SonPeriodName": "1月"
        },
        {
          "State3": 28974,
          "FinalRP": 94.12,
          "PeriodSonID": "38",
          "SonSerialNo": 2,
          "SonPeriodName": "2月"
        },
        {
          "State3": 36326,
          "FinalRP": 94.68,
          "PeriodSonID": "39",
          "SonSerialNo": 3,
          "SonPeriodName": "3月"
        },
        {
          "State3": 47753,
          "FinalRP": 96.11,
          "PeriodSonID": "40",
          "SonSerialNo": 4,
          "SonPeriodName": "4月"
        },
        {
          "State3": 55153,
          "FinalRP": 95.89,
          "PeriodSonID": "41",
          "SonSerialNo": 5,
          "SonPeriodName": "5月"
        },
        {
          "State3": 50433,
          "FinalRP": 95.29,
          "PeriodSonID": "42",
          "SonSerialNo": 6,
          "SonPeriodName": "6月"
        },
        {
          "State3": 63952,
          "FinalRP": 95.77,
          "PeriodSonID": "43",
          "SonSerialNo": 7,
          "SonPeriodName": "7月"
        },
        {
          "State3": 53520,
          "FinalRP": 94.94,
          "PeriodSonID": "44",
          "SonSerialNo": 8,
          "SonPeriodName": "8月"
        },
        {
          "State3": 48500,
          "FinalRP": 95.81,
          "PeriodSonID": "45",
          "SonSerialNo": 9,
          "SonPeriodName": "9月"
        },
        {
          "State3": 45397,
          "FinalRP": 95.64,
          "PeriodSonID": "46",
          "SonSerialNo": 10,
          "SonPeriodName": "10月"
        },
        {
          "State3": 17486,
          "FinalRP": 95.77,
          "PeriodSonID": "47",
          "SonSerialNo": 11,
          "SonPeriodName": "11月"
        },
        {
          "State3": 0,
          "FinalRP": 0,
          "PeriodSonID": "48",
          "SonSerialNo": 12,
          "SonPeriodName": "12月"
        }
      ]
    },
    {
      "Bak": "去年同期",
      "FinalRP": 97.23,
      "lstson": [
        {
          "State3": 43486,
          "FinalRP": 96.46,
          "PeriodSonID": "37",
          "SonSerialNo": 1,
          "SonPeriodName": "1月"
        },
        {
          "State3": 28974,
          "FinalRP": 97.27,
          "PeriodSonID": "38",
          "SonSerialNo": 2,
          "SonPeriodName": "2月"
        },
        {
          "State3": 36326,
          "FinalRP": 97.15,
          "PeriodSonID": "39",
          "SonSerialNo": 3,
          "SonPeriodName": "3月"
        },
        {
          "State3": 47753,
          "FinalRP": 97.26,
          "PeriodSonID": "40",
          "SonSerialNo": 4,
          "SonPeriodName": "4月"
        },
        {
          "State3": 55153,
          "FinalRP": 97.18,
          "PeriodSonID": "41",
          "SonSerialNo": 5,
          "SonPeriodName": "5月"
        },
        {
          "State3": 50433,
          "FinalRP": 97.4,
          "PeriodSonID": "42",
          "SonSerialNo": 6,
          "SonPeriodName": "6月"
        },
        {
          "State3": 63952,
          "FinalRP": 97.07,
          "PeriodSonID": "43",
          "SonSerialNo": 7,
          "SonPeriodName": "7月"
        },
        {
          "State3": 53520,
          "FinalRP": 97.19,
          "PeriodSonID": "44",
          "SonSerialNo": 8,
          "SonPeriodName": "8月"
        },
        {
          "State3": 48500,
          "FinalRP": 97.36,
          "PeriodSonID": "45",
          "SonSerialNo": 9,
          "SonPeriodName": "9月"
        },
        {
          "State3": 45397,
          "FinalRP": 97.2,
          "PeriodSonID": "46",
          "SonSerialNo": 10,
          "SonPeriodName": "10月"
        },
        {
          "State3": 17486,
          "FinalRP": 97.49,
          "PeriodSonID": "47",
          "SonSerialNo": 11,
          "SonPeriodName": "11月"
        },
        {
          "State3": 0,
          "FinalRP": 97.83,
          "PeriodSonID": "48",
          "SonSerialNo": 12,
          "SonPeriodName": "12月"
        }
      ]
    },
    {
      Bak: "上一期",
      FinalRP: 0,
      lstson: [
        {
          "State3": 43486,
          "FinalRP": 0,
          "PeriodSonID": "37",
          "SonSerialNo": 1,
          "SonPeriodName": "1月"
        },
        {
          "State3": 28974,
          "FinalRP": 94.37,
          "PeriodSonID": "38",
          "SonSerialNo": 2,
          "SonPeriodName": "2月"
        },
        {
          "State3": 36326,
          "FinalRP": 94.12,
          "PeriodSonID": "39",
          "SonSerialNo": 3,
          "SonPeriodName": "3月"
        },
        {
          "State3": 47753,
          "FinalRP": 94.68,
          "PeriodSonID": "40",
          "SonSerialNo": 4,
          "SonPeriodName": "4月"
        },
        {
          "State3": 55153,
          "FinalRP": 96.11,
          "PeriodSonID": "41",
          "SonSerialNo": 5,
          "SonPeriodName": "5月"
        },
        {
          "State3": 50433,
          "FinalRP": 95.89,
          "PeriodSonID": "42",
          "SonSerialNo": 6,
          "SonPeriodName": "6月"
        },
        {
          "State3": 63952,
          "FinalRP": 95.29,
          "PeriodSonID": "43",
          "SonSerialNo": 7,
          "SonPeriodName": "7月"
        },
        {
          "State3": 53520,
          "FinalRP": 95.77,
          "PeriodSonID": "44",
          "SonSerialNo": 8,
          "SonPeriodName": "8月"
        },
        {
          "State3": 48500,
          "FinalRP": 94.94,
          "PeriodSonID": "45",
          "SonSerialNo": 9,
          "SonPeriodName": "9月"
        },
        {
          "State3": 45397,
          "FinalRP": 95.81,
          "PeriodSonID": "46",
          "SonSerialNo": 10,
          "SonPeriodName": "10月"
        },
        {
          "State3": 17486,
          "FinalRP": 95.64,
          "PeriodSonID": "47",
          "SonSerialNo": 11,
          "SonPeriodName": "11月"
        },
        {
          "State3": 0,
          "FinalRP": 95.77,
          "PeriodSonID": "48",
          "SonSerialNo": 12,
          "SonPeriodName": "12月"
        }
      ]
    }]
  option1.value.xAxis.data = dcmyd.value[0].lstson.map(item => item.SonPeriodName);
  option1.value.series[0].data = dcmyd.value[0].lstson.map(item => item.FinalRP);

  // 不满意趋势
  bmyybqs.value = [
    {
      "PeriodID": "6",
      "PeriodName": "2024年全年",
      "PeriodSonID": "37",
      "SonSerialNo": 1,
      "SonPeriodName": "1月",
      "QACount": 956,
      "State3": "43486"
    },
    {
      "PeriodID": "6",
      "PeriodName": "2024年全年",
      "PeriodSonID": "38",
      "SonSerialNo": 2,
      "SonPeriodName": "2月",
      "QACount": 531,
      "State3": "28974"
    },
    {
      "PeriodID": "6",
      "PeriodName": "2024年全年",
      "PeriodSonID": "39",
      "SonSerialNo": 3,
      "SonPeriodName": "3月",
      "QACount": 692,
      "State3": "36326"
    },
    {
      "PeriodID": "6",
      "PeriodName": "2024年全年",
      "PeriodSonID": "40",
      "SonSerialNo": 4,
      "SonPeriodName": "4月",
      "QACount": 483,
      "State3": "47753"
    },
    {
      "PeriodID": "6",
      "PeriodName": "2024年全年",
      "PeriodSonID": "41",
      "SonSerialNo": 5,
      "SonPeriodName": "5月",
      "QACount": 606,
      "State3": "55153"
    },
    {
      "PeriodID": "6",
      "PeriodName": "2024年全年",
      "PeriodSonID": "42",
      "SonSerialNo": 6,
      "SonPeriodName": "6月",
      "QACount": 606,
      "State3": "50433"
    },
    {
      "PeriodID": "6",
      "PeriodName": "2024年全年",
      "PeriodSonID": "43",
      "SonSerialNo": 7,
      "SonPeriodName": "7月",
      "QACount": 650,
      "State3": "63952"
    },
    {
      "PeriodID": "6",
      "PeriodName": "2024年全年",
      "PeriodSonID": "44",
      "SonSerialNo": 8,
      "SonPeriodName": "8月",
      "QACount": 605,
      "State3": "53520"
    },
    {
      "PeriodID": "6",
      "PeriodName": "2024年全年",
      "PeriodSonID": "45",
      "SonSerialNo": 9,
      "SonPeriodName": "9月",
      "QACount": 511,
      "State3": "48500"
    },
    {
      "PeriodID": "6",
      "PeriodName": "2024年全年",
      "PeriodSonID": "46",
      "SonSerialNo": 10,
      "SonPeriodName": "10月",
      "QACount": 557,
      "State3": "45397"
    },
    {
      "PeriodID": "6",
      "PeriodName": "2024年全年",
      "PeriodSonID": "47",
      "SonSerialNo": 11,
      "SonPeriodName": "11月",
      "QACount": 156,
      "State3": "17486"
    },
    {
      "PeriodID": "6",
      "PeriodName": "2024年全年",
      "PeriodSonID": "48",
      "SonSerialNo": 12,
      "SonPeriodName": "12月",
      "QACount": 0,
      "State3": "0"
    }
  ];
  option2.value.xAxis.data = bmyybqs.value.map(item => item.SonPeriodName);
  option2.value.series[0].data = bmyybqs.value.map(item => item.QACount);

  // 单项分析
  dxfx.value =   [
    {
      "Bak": "本周期",
      "lstson": [
        {
          "MasterID": "33",
          "MasterName": "省驾考（自动）",
          "FinalRP": "9.9536"
        },
        {
          "MasterID": "35",
          "MasterName": "省车辆上户（自动）",
          "FinalRP": "9.9301"
        },
        {
          "MasterID": "36",
          "MasterName": "省身份证办理（自动）",
          "FinalRP": "9.9502"
        },
        {
          "MasterID": "37",
          "MasterName": "省110接处警（自动）",
          "FinalRP": "18.7852"
        },
        {
          "MasterID": "38",
          "MasterName": "省122接处警（自动）",
          "FinalRP": "14.4708"
        },
        {
          "MasterID": "92",
          "MasterName": "省户政（自动）",
          "FinalRP": "9.9580"
        },
        {
          "MasterID": "93",
          "MasterName": "省案件当事人2020（自动）",
          "FinalRP": "22.2535"
        }
      ]
    },
    {
      "Bak": "上一期",
      "lstson": [
        {
          "MasterID": "33",
          "MasterName": "省驾考（自动）",
          "FinalRP": "0.0000"
        },
        {
          "MasterID": "35",
          "MasterName": "省车辆上户（自动）",
          "FinalRP": "0.0000"
        },
        {
          "MasterID": "36",
          "MasterName": "省身份证办理（自动）",
          "FinalRP": "0.0000"
        },
        {
          "MasterID": "37",
          "MasterName": "省110接处警（自动）",
          "FinalRP": "0.0000"
        },
        {
          "MasterID": "38",
          "MasterName": "省122接处警（自动）",
          "FinalRP": "0.0000"
        },
        {
          "MasterID": "92",
          "MasterName": "省户政（自动）",
          "FinalRP": "0.0000"
        },
        {
          "MasterID": "93",
          "MasterName": "省案件当事人2020（自动）",
          "FinalRP": "0.0000"
        }
      ]
    },
    {
      "Bak": "去年同期",
      "lstson": [
        {
          "MasterID": "33",
          "MasterName": "省驾考（自动）",
          "FinalRP": "9.9366"
        },
        {
          "MasterID": "35",
          "MasterName": "省车辆上户（自动）",
          "FinalRP": "9.9212"
        },
        {
          "MasterID": "36",
          "MasterName": "省身份证办理（自动）",
          "FinalRP": "9.9483"
        },
        {
          "MasterID": "37",
          "MasterName": "省110接处警（自动）",
          "FinalRP": "19.3654"
        },
        {
          "MasterID": "38",
          "MasterName": "省122接处警（自动）",
          "FinalRP": "14.6298"
        },
        {
          "MasterID": "92",
          "MasterName": "省户政（自动）",
          "FinalRP": "9.9482"
        },
        {
          "MasterID": "93",
          "MasterName": "省案件当事人2020（自动）",
          "FinalRP": "23.4803"
        }
      ]
    }
  ];
  option3.value.xAxis.data = dxfx.value[0].lstson.map(item => item.MasterName);
  option3.value.series[0].data = dxfx.value[0].lstson.map(item => item.FinalRP);
  option3.value.series[1].data = dxfx.value[1].lstson.map(item => item.FinalRP);
  option3.value.series[2].data = dxfx.value[2].lstson.map(item => item.FinalRP);
  // 业务满意度
  let tempTable = [
    {
      "MasterID": "37",
      "Name": "110",
      "MasterName": "省110接处警（自动）",
      "zMasterID": null,
      "zMasterName": null,
      "zdcl": null,
      "Allzdcl": null,
      "zbmys": null,
      "Allzbmys": null,
      "Allyzh": null,
      "yzh": null,
      "Allwzh": null,
      "wzh": null,
      "sdcl": "108317",
      "sbmys": "1308",
      "smyl": "18.79",
      "smyltb": "-0.58",
      "State3": 35920,
      "DissatisfiedNum": 1308,
      "SatisfiedNum": 31117,
      "BasicallySatisfiedNum": 3495
    },
    {
      "MasterID": "38",
      "Name": "122",
      "MasterName": "省122接处警（自动）",
      "zMasterID": null,
      "zMasterName": null,
      "zdcl": null,
      "Allzdcl": null,
      "zbmys": null,
      "Allzbmys": null,
      "Allyzh": null,
      "yzh": null,
      "Allwzh": null,
      "wzh": null,
      "sdcl": "520208",
      "sbmys": "3425",
      "smyl": "14.47",
      "smyltb": "-0.16",
      "State3": 188505,
      "DissatisfiedNum": 3425,
      "SatisfiedNum": 172181,
      "BasicallySatisfiedNum": 12899
    },
    {
      "MasterID": "93",
      "Name": "案件",
      "MasterName": "省案件当事人2020（自动）",
      "zMasterID": null,
      "zMasterName": null,
      "zdcl": null,
      "Allzdcl": null,
      "zbmys": null,
      "Allzbmys": null,
      "Allyzh": null,
      "yzh": null,
      "Allwzh": null,
      "wzh": null,
      "sdcl": "46383",
      "sbmys": "1044",
      "smyl": "22.25",
      "smyltb": "-1.23",
      "State3": 14336,
      "DissatisfiedNum": 1044,
      "SatisfiedNum": 11168,
      "BasicallySatisfiedNum": 2124
    },
    {
      "MasterID": "35",
      "Name": "车辆上户",
      "MasterName": "省车辆上户（自动）",
      "zMasterID": null,
      "zMasterName": null,
      "zdcl": null,
      "Allzdcl": null,
      "zbmys": null,
      "Allzbmys": null,
      "Allyzh": null,
      "yzh": null,
      "Allwzh": null,
      "wzh": null,
      "sdcl": "285177",
      "sbmys": "261",
      "smyl": "9.93",
      "smyltb": "0.01",
      "State3": 85379,
      "DissatisfiedNum": 261,
      "SatisfiedNum": 83776,
      "BasicallySatisfiedNum": 1342
    },
    {
      "MasterID": "33",
      "Name": "驾考",
      "MasterName": "省驾考（自动）",
      "zMasterID": null,
      "zMasterName": null,
      "zdcl": null,
      "Allzdcl": null,
      "zbmys": null,
      "Allzbmys": null,
      "Allyzh": null,
      "yzh": null,
      "Allwzh": null,
      "wzh": null,
      "sdcl": "194532",
      "sbmys": "141",
      "smyl": "9.95",
      "smyltb": "0.02",
      "State3": 83910,
      "DissatisfiedNum": 141,
      "SatisfiedNum": 82775,
      "BasicallySatisfiedNum": 994
    },
    {
      "MasterID": "92",
      "Name": "户口",
      "MasterName": "省户政（自动）",
      "zMasterID": null,
      "zMasterName": null,
      "zdcl": null,
      "Allzdcl": null,
      "zbmys": null,
      "Allzbmys": null,
      "Allyzh": null,
      "yzh": null,
      "Allwzh": null,
      "wzh": null,
      "sdcl": "119882",
      "sbmys": "97",
      "smyl": "9.96",
      "smyltb": "0.01",
      "State3": 38943,
      "DissatisfiedNum": 97,
      "SatisfiedNum": 38580,
      "BasicallySatisfiedNum": 266
    },
    {
      "MasterID": "36",
      "Name": "身份证",
      "MasterName": "省身份证办理（自动）",
      "zMasterID": null,
      "zMasterName": null,
      "zdcl": null,
      "Allzdcl": null,
      "zbmys": null,
      "Allzbmys": null,
      "Allyzh": null,
      "yzh": null,
      "Allwzh": null,
      "wzh": null,
      "sdcl": "136420",
      "sbmys": "77",
      "smyl": "9.95",
      "smyltb": "0.00",
      "State3": 43987,
      "DissatisfiedNum": 77,
      "SatisfiedNum": 43342,
      "BasicallySatisfiedNum": 568
    },
    {
      "MasterID": "0",
      "Name": null,
      "MasterName": "(省)全市",
      "zMasterID": null,
      "zMasterName": null,
      "zdcl": null,
      "Allzdcl": null,
      "zbmys": null,
      "Allzbmys": null,
      "Allyzh": null,
      "yzh": null,
      "Allwzh": null,
      "wzh": null,
      "sdcl": "1410919",
      "sbmys": "6353",
      "smyl": "95.30",
      "smyltb": "-1.93",
      "State3": 490980,
      "DissatisfiedNum": 6353,
      "SatisfiedNum": 462939,
      "BasicallySatisfiedNum": 21688
    }
  ]
  tempTable = tempTable.filter(item => item.Name !== null)
  tableData.value =tempTable

  let temp =  [
    {
      "OrganizeID": null,
      "OrganizeName": "(省)县市考评",
      "FinalRP": "满意度",
      "TBRp": null,
      "TBRpts": null,
      "SetName": null,
      "MydRanking": "排名",
      "State3": 0
    },
    {
      "OrganizeID": "430124",
      "OrganizeName": "宁乡市公安局",
      "FinalRP": "95.94",
      "TBRp": "97.64",
      "TBRpts": "-1.70",
      "SetName": "(省)县市考评",
      "MydRanking": "1",
      "State3": 25511
    },
    {
      "OrganizeID": "430112",
      "OrganizeName": "望城分局",
      "FinalRP": "95.54",
      "TBRp": "97.55",
      "TBRpts": "-2.01",
      "SetName": "(省)县市考评",
      "MydRanking": "2",
      "State3": 22472
    },
    {
      "OrganizeID": "430181",
      "OrganizeName": "浏阳市公安局",
      "FinalRP": "95.11",
      "TBRp": "97.32",
      "TBRpts": "-2.21",
      "SetName": "(省)县市考评",
      "MydRanking": "3",
      "State3": 29790
    },
    {
      "OrganizeID": "430121",
      "OrganizeName": "长沙县公安局",
      "FinalRP": "94.59",
      "TBRp": "96.87",
      "TBRpts": "-2.28",
      "SetName": "(省)县市考评",
      "MydRanking": "4",
      "State3": 38369
    },
    {
      "OrganizeID": null,
      "OrganizeName": "(省)区",
      "FinalRP": "满意度",
      "TBRp": null,
      "TBRpts": null,
      "SetName": null,
      "MydRanking": "排名",
      "State3": 0
    },
    {
      "OrganizeID": "430197",
      "OrganizeName": "公共交通治安管理分局",
      "FinalRP": "95.45",
      "TBRp": "93.18",
      "TBRpts": "2.27",
      "SetName": "(省)区",
      "MydRanking": "1",
      "State3": 301
    },
    {
      "OrganizeID": "430102",
      "OrganizeName": "芙蓉分局",
      "FinalRP": "94.64",
      "TBRp": "97.31",
      "TBRpts": "-2.67",
      "SetName": "(省)区",
      "MydRanking": "2",
      "State3": 7543
    },
    {
      "OrganizeID": "430199",
      "OrganizeName": "高新区分局",
      "FinalRP": "94.35",
      "TBRp": "97.10",
      "TBRpts": "-2.75",
      "SetName": "(省)区",
      "MydRanking": "3",
      "State3": 5267
    },
    {
      "OrganizeID": "430105",
      "OrganizeName": "开福分局",
      "FinalRP": "94.15",
      "TBRp": "97.05",
      "TBRpts": "-2.90",
      "SetName": "(省)区",
      "MydRanking": "4",
      "State3": 10019
    },
    {
      "OrganizeID": "430103",
      "OrganizeName": "天心分局",
      "FinalRP": "93.93",
      "TBRp": "97.55",
      "TBRpts": "-3.62",
      "SetName": "(省)区",
      "MydRanking": "5",
      "State3": 16279
    },
    {
      "OrganizeID": "430111",
      "OrganizeName": "雨花分局",
      "FinalRP": "93.43",
      "TBRp": "95.78",
      "TBRpts": "-2.35",
      "SetName": "(省)区",
      "MydRanking": "6",
      "State3": 20850
    },
    {
      "OrganizeID": "430104",
      "OrganizeName": "岳麓分局",
      "FinalRP": "92.92",
      "TBRp": "95.96",
      "TBRpts": "-3.04",
      "SetName": "(省)区",
      "MydRanking": "7",
      "State3": 27422
    },
    {
      "OrganizeID": "430100",
      "OrganizeName": "长沙市直属",
      "FinalRP": "91.05",
      "TBRp": "97.17",
      "TBRpts": "-6.12",
      "SetName": "(省)区",
      "MydRanking": "8",
      "State3": 674
    }
  ]
  const group2 = temp.filter(item => item.SetName === "(省)县市考评");
  const group3 = temp.filter(item => item.SetName === "(省)区");
  tableData1.value = [
    {
      "OrganizeID": "4301",
      "OrganizeName": "湖南省长沙市公安局",
      "FinalRP": "95.30",
      "TBRp": "97.23",
      "TBRpts": "-1.93",
      "SetName": "(省)全市",
      "MydRanking": "1",
      "State3": 490980
    }
  ]
  tableData2.value = group2
  tableData3.value = group3

  let text = [
    {
      "Name": "110",
      "MasterID": "37",
      "dxyw": null,
      "sdcl": "108317",
      "bmyzs": "1308",
      "rcmzs": "0",
      "tgs": "0",
      "wsqs": "1347",
      "LastDayVisitCount": 0,
      "LastDayQACount": 3,
      "State3": 35920
    },
    {
      "Name": "122",
      "MasterID": "38",
      "dxyw": null,
      "sdcl": "520208",
      "bmyzs": "3425",
      "rcmzs": "0",
      "tgs": "0",
      "wsqs": "3360",
      "LastDayVisitCount": 0,
      "LastDayQACount": 8,
      "State3": 188505
    },
    {
      "Name": "案件",
      "MasterID": "93",
      "dxyw": null,
      "sdcl": "46383",
      "bmyzs": "1044",
      "rcmzs": "0",
      "tgs": "0",
      "wsqs": "1000",
      "LastDayVisitCount": 0,
      "LastDayQACount": 3,
      "State3": 14336
    },
    {
      "Name": "车辆上户",
      "MasterID": "35",
      "dxyw": null,
      "sdcl": "285177",
      "bmyzs": "261",
      "rcmzs": "0",
      "tgs": "0",
      "wsqs": "243",
      "LastDayVisitCount": 0,
      "LastDayQACount": 0,
      "State3": 85379
    },
    {
      "Name": "驾考",
      "MasterID": "33",
      "dxyw": null,
      "sdcl": "194532",
      "bmyzs": "141",
      "rcmzs": "0",
      "tgs": "0",
      "wsqs": "332",
      "LastDayVisitCount": 0,
      "LastDayQACount": 0,
      "State3": 83910
    },
    {
      "Name": "户口",
      "MasterID": "92",
      "dxyw": null,
      "sdcl": "119882",
      "bmyzs": "97",
      "rcmzs": "0",
      "tgs": "0",
      "wsqs": "89",
      "LastDayVisitCount": 0,
      "LastDayQACount": 0,
      "State3": 38943
    },
    {
      "Name": "身份证",
      "MasterID": "36",
      "dxyw": null,
      "sdcl": "136420",
      "bmyzs": "77",
      "rcmzs": "0",
      "tgs": "0",
      "wsqs": "76",
      "LastDayVisitCount": 0,
      "LastDayQACount": 0,
      "State3": 43987
    },
    {
      "Name": null,
      "MasterID": "0",
      "dxyw": null,
      "sdcl": "1410919",
      "bmyzs": "6353",
      "rcmzs": "0",
      "tgs": "0",
      "wsqs": "6447",
      "LastDayVisitCount": 0,
      "LastDayQACount": 14,
      "State3": 490980
    }
  ]
  text = text.filter(item => item.Name !== null)

  tableData4.value =text
}, 2000)




// region 表格样式
const fontSize = ref(11)
const headerCellStyle = ref({
  fontSize: '11px', /* 设置表头字体大小 */
  color: '#24D2EE', /* 设置表头字体颜色 */
  backgroundColor: '#04144E', /* 设置表头背景颜色 */
  height: '60px', /* 设置表头高度 */
  padding: '0 0 0 0', /* 设置表头内边距 */
  lineHeight: '60px',
});
const tableRowStyle = (row) => {
  return {
    backgroundColor: '#04144E',
    color: "#FFFFFF"
  };
};
// 自定义总合行样式
const summaryCellStyle = () => {
  return {
    backgroundColor: '#04144E',
    color: "#FFFFFF"
  };
};
// 定义汇总方法
const 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] = 'N/A';
    }
  });
  return sums;
};

const calculateSatisfaction = (row) => {
  const validCount = row.sdcl || 0 // 有效数
  const dissatisfiedCount = row.sbmys || 0 // 不满意数
  return validCount - dissatisfiedCount // 返回基本满意数
}
// endregion
</script>


<style lang="scss" scoped>
@import "@/style/datav.scss";

:deep() {
  .el-table__footer-wrapper tfoot td.el-table__cell {
    background-color: #09256D;
  }

  .el-scrollbar__wrap--hidden-default {
    background-color: #03154D;
  }

  .el-table .cell {
    padding: 0;
    text-align: center;
  }
}

.dropdown-container {
  position: absolute;
  right: 30px;
  top: 65px;
}

.datav-tab-item {
  display: flex;
  justify-content: center;
  align-items: center;
}

.descriptions_content {
  font-size: 22px;
  font-weight: 700;
}


.margin-top-30 {
  margin-top: 30px;
}


.height-118 {
  height: 118px;
}

.custom-footer-row {
  background-color: #FB3131;
  font-weight: bold;
  color: #333;
}

.custom-footer-cell {
  text-align: center;
  padding: 10px;
}


h3 span {
  float: right;

}

h3 {
  line-height: 50px;
  margin-top: 10px;
  margin-bottom: 0px;
}


</style>