<template>
  <div class="outer">
    <!-- 页面固定 -->
    <!-- 图表 -->
    <div class="wrap">
      <Row class="grid-row">
        <Layout>
          <!-- Echart数据 -->
          <Content>
            <Row class="grid-row">
              <Layout>
                <!-- 数据格左 -->
                <!-- <Sider hide-trigger width="200">
                  <Row>
                    <Col
                      span="23"
                      class="grid-col grid-col-l"
                      v-for="(item, index) in gridListII"
                      :key="index"
                    >
                      <p class="grid-data">{{ item.data }}</p>
                      <p class="grid-label">{{ item.label }}</p>
                    </Col>
                  </Row>
                </Sider>-->
                <!-- 地图+数据格上 -->
                <Content class="grid-content">
                  <!-- 数据格上 -->
                  <Row
                    class="grid-row grid-row-t"
                    type="flex"
                    justify="space-between"
                  >
                    <Col
                      class="grid-col grid-col-t"
                      v-for="(item, index) in gridList"
                      :key="index"
                    >
                      <p class="grid-title">{{ item.title }}</p>
                      <Row type="flex" justify="space-between">
                        <Col
                          :xs="24"
                          :sm="24"
                          :md="7"
                          class="grid-col grid-col-i"
                          v-for="(itemS, indexS) in item.smallList"
                          :key="indexS"
                        >
                          <p class="grid-data">{{ itemS.data }}</p>
                          <p class="grid-label">{{ itemS.label }}</p>
                        </Col>
                      </Row>
                    </Col>
                  </Row>
                  <!-- 漏斗图 -->
                  <Row>
                    <i-col :xs="24" :sm="24" :xl="12">
                      <Tabs value="ouhai" class="grid-map grid-funnel">
                        <TabPane
                          :label="
                            yearOpt
                              ? yearOpt + '年' + area + '筛查工作进展漏斗图'
                              : '至今' + area + '筛查工作进展漏斗图'
                          "
                          name="ouhai"
                        >
                          <Spin fix v-show="isFunnelShow">
                            <Icon
                              type="load-c"
                              size="30"
                              class="demo-spin-icon-load"
                            ></Icon>
                            <div>Loading...</div>
                          </Spin>
                          <efunnel
                            id="efunnelId"
                            class="rowI"
                            :funnelData="funnelData"
                            height="100%"
                            width="100%"
                          />
                        </TabPane>
                      </Tabs>
                    </i-col>
                    <!-- 地图 -->
                    <i-col :xs="24" :sm="24" :xl="12">
                      <Tabs value="ouhai" class="grid-map">
                        <!-- <TabPane
                          :label="dItem.label"
                          :name="dItem.name"
                          v-for="(dItem, dIndex) in mapList"
                          :key="dIndex"
                        > -->
                        <TabPane :label="areaM + '筛查地图'" name="ouhai">
                          <!-- <span
                            class="corner-icon"
                            @click="expandMap = !expandMap"
                            >放大</span
                          > -->
                          <Spin fix v-show="isMapShow">
                            <Icon
                              type="load-c"
                              size="30"
                              class="demo-spin-icon-load"
                            ></Icon>
                            <div>Loading...</div>
                          </Spin>
                          <emap
                            :mapData="mapData"
                            height="100%"
                            width="100%"
                            :selectArea="selectArea"
                            @mapClick="mapClick"
                          />
                        </TabPane>
                      </Tabs>
                    </i-col>
                  </Row>
                </Content>
              </Layout>
            </Row>
          </Content>
          <!-- 表格 -->
          <!-- <Sider hide-trigger width="500">
            <span class="corner-text" @click="expandFlag = !expandFlag"
              >展开</span
            > -->
          <!-- <span class="corner-text">共{{ distCount }}个村</span> -->
          <!-- 表格 小-->
          <!-- <Tabs value="name1" class="sider-tab">
              <TabPane label="各村筛查数据" name="name1">              
                <Table
                  ref="tables"
                  :border="false"
                  :columns="columns"
                  :data="tableData"
                  :loading="tableLoading"
                >
                  <template slot-scope="{ row }" slot="addressCode">
                    <strong>{{ mapDistriction(row.addressCode) }}</strong>
                  </template>

                  <template slot-scope="{ row }" slot="action">
                    <Button type="info" @click="handleFollow(row)"
                      >开始随访</Button
                    >
                  </template>
                </Table>
              </TabPane>
            </Tabs>
          </Sider> -->
          <!-- 展开 -->
          <transition name="expandT">
            <!-- 表格 多-->
            <!-- <Tabs
              value="name1"
              class="sider-tab-expand tab-expand"
              v-if="expandFlag"
            >
              <Icon
                class="corner-icon"
                type="md-arrow-dropright"
                @click="expandFlag = !expandFlag"
                size="24"
              />
              <TabPane label="各村筛查数据" name="name1">
                <Table
                  ref="tables"
                  :border="false"
                  :columns="columnsE"
                  :data="tableData"
                  :loading="tableLoading"
                >
                  <template slot-scope="{ row }" slot="addressCode">
                    <strong>{{ mapDistriction(row.addressCode) }}</strong>
                  </template>

                  <template slot-scope="{ row }" slot="action">
                    <Button type="info" @click="handleFollow(row)"
                      >开始随访</Button
                    >
                  </template>
                </Table>
              </TabPane>
            </Tabs> -->
            <!-- 地图 两步法 -->
            <Tabs v-if="expandMap" class="center-tab-expand tab-expand">
              <Icon
                class="corner-icon"
                type="md-arrow-dropright"
                @click="expandMap = !expandMap"
                size="24"
              />
              <TabPane label="瓯海区筛查地理图" name="ouhai" class="flex-row">
                <!-- <emap width="1310px" :mapData="mapData" v-if="expandMap" /> -->
              </TabPane>
            </Tabs>
          </transition>
        </Layout>
      </Row>
      <!-- 固定 -->
      <!-- <Affix :offset-bottom="100"> <Row :gutter="16" class="one-row search-row">筛查 </Row></Affix> -->
      <!-- 统计图 -->
      <Row class="grid-content graph-row">
        <Tabs v-model="tabModel">
          <TabPane label="筛查工作进展分析" name="name1">
            <i-col :xs="24" :sm="24" :xl="24" class="">
              <Card shadow :title="area + '筛查工作进展趋势图'">
                <Row>
                  <i-col :xs="24" :sm="24" :xl="12" class="graph-col">
                    <BarChart
                      :chartData="screeningTData"
                      title="筛查目标人群趋势图"
                      yName="筛查目标总人数"
                      xName="年份"
                    ></BarChart>
                  </i-col>
                  <i-col :xs="24" :sm="24" :xl="12" class="graph-col">
                    <BarChart
                      :chartData="coverTData"
                      title="筛查覆盖率趋势图（筛查周期内累计统计）"
                      xName="年份"
                      yName="筛查覆盖率"
                    ></BarChart>
                  </i-col>
                  <!-- <i-col :xs="24" :sm="24" :xl="12" class="graph-col">
                        <BarChart :chartData="pathologyTData" title="早诊率趋势图"></BarChart>
                      </i-col>-->
                  <i-col :xs="24" :sm="24" :xl="12" class="graph-col">
                    <BarChart
                      :chartData="firstTData"
                      title="血检人数趋势图"
                      xName="年份"
                      yName="血检人数"
                    ></BarChart>
                  </i-col>
                  <!-- <i-col :xs="24" :sm="24" :xl="12" class="graph-col">
                        <BarChart
                          :chartData="riskTData"
                          title="中高危占比趋势图"
                          xName="年份"
                          yName="中高危占比"
                        ></BarChart>
                      </i-col> -->
                  <i-col :xs="24" :sm="24" :xl="12" class="graph-col">
                    <BarChart
                      :chartData="endoscopeTData"
                      title="内镜人数趋势图"
                      xName="年份"
                      yName="内镜人数"
                    ></BarChart>
                  </i-col>
                  <i-col :xs="24" :sm="24" :xl="12" class="graph-col">
                    <BarChart
                      :chartData="pathologyTData"
                      title="病理检查人数趋势图"
                      xName="年份"
                      yName="病理检查人数"
                    ></BarChart>
                  </i-col>
                  <!-- <i-col :xs="24" :sm="24" :xl="12" class="graph-col">
                        <BarChart :chartData="pathologyTData" title="确诊癌症病例数趋势图"></BarChart>
                      </i-col>-->
                </Row>
              </Card>
            </i-col>
          </TabPane>
          <TabPane
            label="筛查人群透视分析"
            name="name2"
            :style="{ height: tabModel == 'name2' ? '' : '100px' }"
          >
            <i-col :xs="24" :sm="24" :xl="24" class="graph-human-row">
              <Card
                shadow
                :title="
                  yearOpt
                    ? yearOpt + '年' + area + '筛查人群风险程度分析'
                    : '至今' + area + '筛查人群风险程度分析'
                "
              >
                <i-col :xs="24" :sm="24" :xl="12" class="graph-human-col">
                  <!-- <div class="corner-index">
                          <p class="corner-title">筛查人群总数</p>
                          <p class="corner-data">{{ riskCount }}</p>
                        </div> title="筛查人群风险程度分布图"-->
                  <p class="chart-title">筛查人群风险程度分布图</p>
                  <PieChart
                    :chartData="riskPData"
                    :title="riskCount"
                  ></PieChart>
                </i-col>
                <i-col :xs="24" :sm="24" :xl="12" class="graph-human-col">
                  <BarChart
                    :chartData="riskCData"
                    title="中高危人数趋势图"
                    xName="年份"
                    yName="人数"
                  ></BarChart>
                  <!-- color="#2852e7" -->
                </i-col>
              </Card>
            </i-col>
            <i-col :xs="24" :sm="24" :xl="24" class="graph-human-row">
              <Card
                shadow
                :title="
                  yearOpt
                    ? yearOpt + '年' + area + '筛查人群性别分析'
                    : '至今' + area + '筛查人群性别分析'
                "
              >
                <i-col :xs="24" :sm="24" :xl="12" class="graph-human-col">
                  <!-- <div class="corner-index">
                          <p class="corner-title">筛查人群总数</p>
                          <p class="corner-data">{{ genderCount }}</p>
                        </div>-->

                  <!-- <PercentChart :chartData="genderPData" title="筛查人群性别分布图"></PercentChart> -->
                  <p class="chart-title">筛查人群性别分布图</p>
                  <PieChart
                    :chartData="genderPData"
                    :title="genderCount"
                  ></PieChart>
                </i-col>
                <i-col :xs="24" :sm="24" :xl="12" class="graph-human-col">
                  <LineChart
                    :chartData="genderCData"
                    title="各性别筛查完成人数趋势图"
                    xName="年份"
                    yName="人数"
                  ></LineChart>
                </i-col>
              </Card>
            </i-col>
            <i-col :xs="24" :sm="24" :xl="24" class="graph-human-row">
              <Card
                shadow
                :title="
                  yearOpt
                    ? yearOpt + '年' + area + '筛查人群年龄段分布图'
                    : '至今' + area + '筛查人群年龄段分布图'
                "
              >
                <i-col :xs="24" :sm="24" :xl="24" class="graph-human-col">
                  <BarChart
                    :chartData="ageBData"
                    title="筛查人数"
                    xName="年龄段"
                    yName="人数"
                  ></BarChart>
                </i-col>
              </Card>
            </i-col>
            <i-row :xs="24" :sm="24" :xl="12" class="graph-human-row">
              <Card
                shadow
                :title="
                  yearOpt
                    ? yearOpt + '年' + area + '筛查人群疾病分布图'
                    : '至今' + area + '筛查人群疾病分布图'
                "
              >
                <i-col :xs="24" :sm="24" :xl="12" class="graph-human-col">
                  <PieEcharts
                    :EchartsData="diseaseData"
                    id="pie"
                    style="height: 100%"
                  ></PieEcharts>
                </i-col>
              </Card>
            </i-row>
            <i-row :xs="24" :sm="24" :xl="12" class="graph-human-row">
              <Card
                shadow
                :title="
                  yearOpt
                    ? yearOpt + '年' + area + '筛查人群上消化道异常分布图'
                    : '至今' + area + '筛查人群上消化道异常分布图'
                "
              >
                <i-col :xs="24" :sm="24" :xl="12" class="graph-human-col">
                  <PieEcharts
                    :EchartsData="chronicData"
                    id="pieD"
                    style="height: 100%"
                  ></PieEcharts>
                </i-col>
              </Card>
            </i-row>
          </TabPane>
          <TabPane label="疾病防控成效分析" name="name3">
            <Row>
              <i-col :xs="24" :sm="24" :xl="12" class="">
                <Card shadow>
                  <i-col
                    :xs="24"
                    :sm="24"
                    :xl="24"
                    class="graph-col"
                    v-if="directOpt == '330304000000' || directOpt == ''"
                  >
                    <BarChart
                      :chartData="ouhaiData"
                      :title="
                        yearOpt
                          ? yearOpt + '年' + area + '胃癌发病率趋势图（/10万）'
                          : '至今' + area + '胃癌发病率趋势图（/10万）'
                      "
                      yName="发病率"
                    ></BarChart>
                  </i-col>
                  <!-- <i-col :xs="24" :sm="24" :xl="12" class="graph-col">
                  <BarChart
                    :chartData="yongjiaData"
                    title="永嘉县胃癌发病率趋势图（/10万）"
                    xName="年份"
                    yName="发病率"
                  ></BarChart>
                </i-col> -->
                </Card>
              </i-col>
              <i-col :xs="24" :sm="24" :xl="12" class="">
                <Card shadow>
                  <i-col
                    :xs="24"
                    :sm="24"
                    :xl="24"
                    class="graph-col"
                    v-if="directOpt == '330304000000' || directOpt == ''"
                  >
                    <crack-pie></crack-pie>
                  </i-col>
                </Card>
              </i-col>
              <i-col :xs="24" :sm="24" :xl="12" class="">
                <Card shadow>
                  <i-col
                    :xs="24"
                    :sm="24"
                    :xl="24"
                    class="graph-col"
                    v-if="directOpt == '330304000000' || directOpt == ''"
                  >
                    <point></point>
                  </i-col>
                </Card>
              </i-col>
              <i-col :xs="24" :sm="24" :xl="12" class="">
                <Card shadow>
                  <i-col
                    :xs="24"
                    :sm="24"
                    :xl="24"
                    class="graph-col"
                    v-if="directOpt == '330304000000' || directOpt == ''"
                  >
                    <show-bar
                      :chartData="ouhaiSum"
                      :title="'成本效益分析CBA (Cost Benefit Analysis)'"
                      yName="金额(万元)"
                    ></show-bar>
                  </i-col>
                </Card> </i-col
            ></Row>
          </TabPane>
        </Tabs>
      </Row>
    </div>
  </div>
</template>

<script>
import BarEcharts from "../../components/Echarts/barCharts"
import PieEcharts from "../../components/Echarts/pieCharts"
import LineEcharts from "../../components/Echarts/lineCharts"
import BarChart from "../../components/Charts/BarChart"
import LineChart from "../../components/Charts/LineChart"
import PercentChart from "../../components/Charts/PercentChart"
import PieChart from "../../components/Charts/PieCharts"
import BodyChart from "../../components/Charts/BodyChart"
import VChart from "../../components/Echarts/VChart"
import FunnelCharts from "../../components/Echarts/funnelCharts"
import Emap from "./components/emap"
import Efunnel from "./components/efunnel"
import strMap from "./mixins/strMap"
import CrackPie from "../../components/Charts/crackPie.vue"
import ShowBar from "../../components/Charts/showBar.vue"
import Point from "../../components/Charts/point.vue"
export default {
  mixins: [strMap],
  components: {
    // BarEcharts,
    // LineEcharts,
    LineChart,
    BarChart,
    // PercentChart,
    PieChart,
    // BodyChart,
    PieEcharts,
    // VChart,
    Emap,
    Efunnel,
    // FunnelCharts,
    CrackPie,
    ShowBar,
    Point
  },
  data() {
    return {
      tableLoading: true,
      expandFlag: false,
      expandMap: false,
      isMapShow: false,
      isFunnelShow: false,
      firstScreeningCoverRate: "--%",
      riskRate: "--%",
      endoscopeRate: "--%",
      pathologyRate: "--%",
      tabModel: "name1",
      yearList: [
        {
          value: "",
          label: "至今"
        },
        // {
        //   value: "2011",
        //   label: "2011年度"
        // },
        // {
        //   value: "2012",
        //   label: "2012年度"
        // },
        // {
        //   value: "2013",
        //   label: "2013年度"
        // },
        // {
        //   value: "2014",
        //   label: "2014年度"
        // },
        // {
        //   value: "2015",
        //   label: "2015年度"
        // },
        // {
        //   value: "2016",
        //   label: "2016年度"
        // },
        // {
        //   value: "2017",
        //   label: "2017年度"
        // },
        // {
        //   value: "2018",
        //   label: "2018年度"
        // },
        {
          value: "2019",
          label: "2019年度"
        },
        {
          value: "2020",
          label: "2020年度"
        },
        {
          value: "2021",
          label: "2021年度"
        }

        // {
        //   value: "2022",
        //   label: "2022年度"
        // }
      ],
      directList: [
        { label: "全市", value: "" },
        { label: "市辖区", value: "330301000000" },
        { label: "鹿城区", value: "330302000000" },
        { label: "龙湾区", value: "330303000000" },
        { label: "瓯海区", value: "330304000000" },
        { label: "洞头县", value: "330305000000" },
        { label: "永嘉县", value: "330324000000" },
        { label: "平阳县", value: "330326000000" },
        { label: "苍南县", value: "330327000000" },
        { label: "文成县", value: "330328000000" },
        { label: "泰顺县", value: "330329000000" },
        { label: "瑞安市", value: "330381000000" },
        { label: "乐清市", value: "330382000000" }
        // { label: "梓上村", value: "330304109009" },
        // { label: "下呈村", value: "330304109021" },
        // { label: "杨宅村", value: "330304109019" },
        // { label: "茶堂村", value: "330304109020" },
        // { label: "叶宅村", value: "330304109017" },
        // { label: "下川村", value: "330304109001" },
        // { label: "姜宅村", value: "330304109005" },
        // { label: "任宅村", value: "330304109018" },
        // { label: "下嶂村", value: "330304109007" },
        // { label: "丽塘村", value: "330304109003" },
        // { label: "曹建村", value: "330304109006" },
        // { label: "后中村", value: "330304109014" },
        // { label: "河头村", value: "330304109015" },
        // { label: "王宅村", value: "330304109002" },
        // { label: "上坦村", value: "330304109016" },
        // { label: "泊岙村", value: "330304109004" },
        // { label: "林山村", value: "330304109008" },
      ],
      diseaseList: [
        {
          label: "上消化道肿瘤",
          value: "gastric"
        },
        {
          label: "下消化道肿瘤",
          value: "colon"
        }
      ],
      yearOpt: "",
      directOpt: "", //330304000000
      diseaseOpt: "gastric",
      selectArea: "", //传给地图组件的地区
      barEchartsData: {},
      screeningTData: {}, //筛查目标人群趋势
      coverTData: {}, //筛查覆盖率趋势图
      //早诊率趋势图
      firstTData: {}, //血检完成率趋势图
      riskTData: {}, //中高危占比趋势图
      endoscopeTData: {}, //内镜转化率趋势图
      pathologyTData: {}, //病理检查率趋势
      //确诊癌症病例数趋势图
      riskCData: {}, //中高危风险人数趋势
      genderCount: "0", //性别总人数
      genderCData: {}, //性别人数趋势
      genderPData: {}, //筛查人群性别分布图
      genderBData: {}, //各性别筛查完成率分布
      riskPData: {}, //筛查人群风险程度分布
      riskCount: "0", //风险人群总数
      pieEchartsData: {},
      addressBData: {}, //各村筛查总人数
      ouhaiData: { data: [], xtitle: [] }, //瓯海区
      ouhaiSum: {
        data: [
          {
            name: "总成本",
            value: 195.4
          },
          {
            name: "净效益",
            value: 145.4
          }
        ]
      },
      yongjiaData: { data: [], xtitle: [] }, //永嘉县
      ageBData: {
        data: []
      }, //年龄段
      diseaseData: {}, //疾病分布
      chronicData: {}, //慢病分布
      addressRateData: {}, //各村筛查完成率
      addressEndoscopeData: {}, //各村内镜检查率
      funnelData: {
        addressCode: "--",
        diseaseType: "--",
        endoscopeCount: 0,
        endoscopeRate: "--",
        firstScreeningCount: 0,
        firstScreeningCoverRate: "--",
        pathologyCount: 0,
        pathologyRate: "--",
        riskCount: 0,
        riskRate: "--",
        target: 0,
        year: "--"
      }, //两步法
      totalCount: 0,
      distCount: 0, //村数
      pageIndex: 1,
      pageSize: 10,
      area: "丽岙街道",
      areaM: "温州市",
      mapData: [{ addressCode: "", firstScreeningCoverRate: 0 }],
      columns: [
        {
          title: "排名",
          type: "index",
          width: 60,
          align: "center"
        },
        {
          title: "村落名称",
          slot: "addressCode",
          minWidth: 90,
          align: "center"
        },
        {
          title: "筛查参与率",
          key: "screeningCoverRate",
          minWidth: 90,
          sortType: "desc",
          // sortable: true,
          align: "center"
        },
        {
          title: "内镜检查完成率",
          key: "endoscopeRate",
          minWidth: 90,
          // sortable: true,
          align: "center"
        }
      ],
      columnsE: [
        {
          title: "排名",
          type: "index",
          width: 60,
          align: "center"
        },
        {
          title: "村落名称",
          slot: "addressCode",
          minWidth: 90,
          align: "center"
        },
        {
          title: "筛查目标人数",
          key: "target",
          minWidth: 100,
          sortable: true,
          align: "center"
        },
        {
          title: "筛查参与率",
          key: "screeningCoverRate",
          minWidth: 100,
          sortable: true,
          sortType: "desc",
          align: "center"
        },
        {
          title: "血检完成率",
          key: "firstScreeningCoverRate",
          minWidth: 100,
          sortable: true,
          align: "center"
        },
        {
          title: "中高危人群比例",
          minWidth: 120,
          key: "riskRate",
          sortable: true,
          align: "center"
        },
        {
          title: "内镜检查完成率",
          key: "endoscopeRate",
          minWidth: 100,
          // sortable: true,
          align: "center"
        },
        {
          title: "病理检查完成率",
          minWidth: 120,
          key: "pathologyRate",
          sortable: true,
          align: "center"
        }
      ],
      monthData: [
        {
          label: "1月",
          month: "01",
          value: 280
        },
        {
          month: "02",
          label: "2月",
          value: 380
        },
        {
          month: "03",
          label: "3月",
          value: 460
        },
        {
          label: "4月",
          value: 480
        },
        {
          label: "5月",
          value: 500
        },
        {
          label: "6月",
          value: 680
        },
        {
          label: "7月",
          value: 520
        },
        {
          label: "8月",
          value: 360
        },
        {
          label: "9月",
          value: 380
        },
        {
          label: "10月",
          value: 480
        },
        {
          label: "11月",
          value: 260
        },
        {
          label: "12月",
          value: 350
        }
      ],
      tableData: [],
      diseaseClassification: {},
      ageData: {},
      sexData: {},
      gridList: [
        {
          title: "筛查工作参与概况",
          smallList: [
            {
              data: "--",
              label: "筛查目标人数",
              prop: "target"
            },
            {
              data: "--",
              label: "顺应性",
              prop: "complaisanceRate"
            },
            {
              data: "--",
              label: "目标人数外\n参与人数",
              prop: "excludedCount"
            }
          ]
        },
        {
          title: "血清学检查情况",
          smallList: [
            {
              data: "--",
              label: "血检人数",
              prop: "screeningCount"
            },
            {
              data: "--",
              label: "中高危比例",
              prop: "riskRate"
            },
            {
              data: "--",
              label: "HP阳性人数",
              prop: "hpPositivityCount"
            }
          ]
        },
        {
          title: "精查概况",
          smallList: [
            {
              data: "--",
              label: "内镜人数",
              prop: "endoscopeCount"
            },
            {
              data: "--",
              label: "病理人数",
              prop: "pathologyCount"
            },
            {
              data: "--",
              label: "内镜转化率",
              prop: "riskEndoscopeRate"
            }
          ]
        },
        {
          title: "成效概况",
          smallList: [
            {
              data: "--",
              label: "癌症检出率",
              prop: "cancerRate"
            },
            {
              data: "--",
              label: "早癌人数",
              prop: "earlyCancerCount"
            },
            {
              data: "--",
              label: "早诊率",
              prop: "earlyCancerRate"
            }
          ]
        }
        // {
        //   data: "--",
        //   label: "筛查参与率",
        //   prop: "screeningCoverRate",
        // },

        // {
        //   data: "--",
        //   label: "病理检查率",
        //   prop: "pathologyRate",
        // },
        // {
        //   data: "--",
        //   label: "肿瘤确诊数",
        //   prop: "cancerCount",
        // },

        // {
        //   data: "--",
        //   label: "初筛完成率",
        //   prop: "firstScreeningCoverRate"
        // },
        //
      ],
      gridListII: [
        {
          data: "--",
          label: "筛查目标人数"
          // prop: "endoscopeRate"
        },
        {
          data: "--",
          label: "筛查参与率",
          prop: "screeningCoverRate"
        },
        {
          data: "--",
          label: "血检人数",
          prop: "screeningCount"
        }
        // {
        //   data: "--",
        //   label: "初筛完成率",
        //   prop: "firstScreeningCoverRate"
        // },
        // {
        //   data: "--",
        //   label: "中高危占比",
        //   prop: "riskRate"
        // },
      ],
      mapList: [
        {
          label: "瓯海区筛查地图",
          name: "ouhai"
        }
      ]
    }
  },
  computed: {},
  watch: {
    directOpt(val) {
      this.selectArea = val
      this.area = this.mapDistriction(val)
      this.areaM = this.mapDistriction(val)
      this.getMap(val)
      this.getResult(val)
    }
  },
  mounted() {
    this.selectArea = this.directOpt
    this.area = this.mapDistriction(this.directOpt)
    // this.getStatisticsDiseases()
    this.getIndex(this.directOpt)
    this.getMap(this.directOpt)
    // this.getWorkTendency();
    // this.getHumanTendency();
    this.getHumanChart(this.directOpt)
    this.getResult(this.directOpt)
    // this.getHumanBar();
    // this.getFunnel();
    // this.getTable();
    // this.getStatisticsMonthly();
    // this.getFollowupReport()
    // this.getStatisticsDiseasesType()
    // this.getStatisticsPatientAgeAndSex();
    //监听页面滚动事件
    // window.addEventListener("scroll", this.handleScroll);
  },
  created() {
    if (localStorage.getItem("diseaseType")) {
      this.diseaseOpt = localStorage.getItem("diseaseType")
    }
    this.getResult(this.directOpt)
  },
  methods: {
    handleScroll() {
      //窗口滚要做的操作写这里
    },
    changeData() {
      this.getIndex(this.directOpt)
      this.getMap(this.directOpt)
    },
    mapClick(data, mode) {
      //点击区下钻
      if (mode == 1) {
        this.directOpt = data.code
        this.getIndex(data.code)
      }
      //点击街道不下钻
      if (mode == 2) {
        this.selectArea = data.code
        this.area = data.name
        this.getIndex(data.code)
      }
      //没有地图json文件
      if (mode == 0) {
        this.areaM = "温州市"
      }
    },
    expandTable() {
      this.expandFlag = !this.expandFlag
    },
    //指标统计
    getIndex(addressCode) {
      const params = {}
      params.year = this.yearOpt
      params.diseaseType = this.diseaseOpt
      params.addressCode = addressCode
      //格子指标
      // this.$API.getGastricScreening({ params }).then((res) => {
      // if (res.code === 1) {
      let res = {
        object: {
          year: null,
          diseaseType: null,
          addressCode: "330304000000",
          target: 19189,
          inspectionCount: 4039,
          screeningCount: 4038,
          screeningCoverRate: "21.05%",
          firstScreeningCoverRate: "21.05%",
          riskRate: "28.21%",
          riskCount: 1139,
          endoscopeRate: "28.65%",
          endoscopeCount: 1139,
          pathologyCount: 1082,
          pathologyRate: "26.84%",
          includedCount: 3813,
          excludedCount: 226,
          hpPositivityCount: 2013,
          riskEndoscopeCount: 592,
          riskEndoscopeRate: "51.98%",
          complaisanceRate: "19.88%",
          cancerCount: 8,
          cancerRate: "0.70%",
          earlyCancerCount: 8,
          earlyCancerRate: "72.7%"
        }
      }
      this.gridList.forEach((item) => {
        item.smallList.forEach((v) => {
          // console.log("格子指标",v)
          v.data = this.toFit(res.object[v.prop])
        })
      })

      this.getWorkTendency(addressCode)
      this.getHumanTendency(addressCode)
      this.getHumanChart(addressCode)
      this.getHumanBar(addressCode)
      this.getFunnel(addressCode)
      // this.getTable();
    },
    getWorkTendency(addressCode) {
      const params = {}
      params.diseaseType = this.diseaseOpt
      params.year = this.yearOpt
      params.addressCode = addressCode
      // 筛查目标人群趋势
      let d = [
        {
          total: 17479,
          year: 2018
        },
        {
          total: 17809,
          year: 2019
        },
        {
          total: 18068,
          year: 2020
        },
        {
          total: 18427,
          year: 2021
        },
        {
          total: 18866,
          year: 2022
        },
        {
          total: 19189,
          year: 2023
        }
      ]
      const lineEchartsData = {}
      lineEchartsData.data = []
      lineEchartsData.xtitle = []
      d.forEach((item) => {
        lineEchartsData.data.push({
          name: item.year,
          value: item.total
        })
      })
      this.screeningTData = lineEchartsData
      //筛查覆盖率趋势图
      const data2 = {}
      data2.data = []
      data2.xtitle = []
      let dd = [
        {
          year: "2018",
          rate: "0.01%",
          count: 1
        },
        {
          year: "2019",
          rate: "8.56%",
          count: 1524
        },
        {
          year: "2020",
          rate: "15.35%",
          count: 2772
        },
        {
          year: "2021",
          rate: "21.92%",
          count: 4038
        }
      ]
      dd.forEach((item) => {
        data2.data.push({
          name: item.year,
          value: this.toPercent(item.rate)
        })
      })
      this.coverTData = data2
      //--早诊率趋势图
      //血检完成率趋势图
      const data3 = [
        {
          year: "2018",
          rate: "0.01%",
          count: 1
        },
        {
          year: "2019",
          rate: "8.56%",
          count: 1523
        },
        {
          year: "2020",
          rate: "6.91%",
          count: 1248
        },
        {
          year: "2021",
          rate: "6.88%",
          count: 1266
        }
      ]
      const ddd = {}
      ddd.data = []
      ddd.xtitle = []
      data3.forEach((item) => {
        ddd.data.push({
          name: item.year,
          // value: this.toPercent(item.rate),
          value: item.count
        })
      })
      this.firstTData = ddd
      //中高危占比趋势
      // this.$API.getRiskTendency({ params }).then((res) => {
      //   if (res.code === 1) {
      //     const lineEchartsData = {};
      //     lineEchartsData.data = [];
      //     lineEchartsData.xtitle = [];
      //     res.object.forEach((item) => {
      //       lineEchartsData.data.push({
      //         name: item.year,
      //         value: this.toPercent(item.rate),
      //         value:item.count
      //       });
      //     });
      //     this.riskTData = lineEchartsData;
      //   }
      // });
      //内镜转化率趋势图
      const data4 = {}
      const dsa = [
        {
          year: "2018",
          rate: "100.00%",
          count: 1
        },
        {
          year: "2019",
          rate: "31.92%",
          count: 486
        },
        {
          year: "2020",
          rate: "26.93%",
          count: 336
        },
        {
          year: "2021",
          rate: "26.39%",
          count: 334
        }
      ]
      data4.data = []
      data4.xtitle = []
      dsa.forEach((item) => {
        data4.data.push({
          name: item.year,
          // value: this.toPercent(item.rate),
          value: item.count
        })
      })
      this.endoscopeTData = data4
      // 病理检查趋势
      const data5 = {}
      let newdata = [
        {
          year: "2018",
          rate: "100.00%",
          count: 1
        },
        {
          year: "2019",
          rate: "31.92%",
          count: 486
        },
        {
          year: "2020",
          rate: "26.93%",
          count: 336
        },
        {
          year: "2021",
          rate: "20.62%",
          count: 261
        }
      ]
      data5.data = []
      data5.xtitle = []
      newdata.forEach((item) => {
        data5.data.push({
          name: item.year,
          // value: this.toPercent(item.rate),
          value: item.count
        })
      })
      this.pathologyTData = data5

      //--确诊癌症病例数趋势图
      this.$forceUpdate()
    },
    getHumanTendency(addressCode) {
      const params = {}
      params.diseaseType = this.diseaseOpt
      // params.year = this.yearOpt;
      params.addressCode = addressCode
      // 中高危风险人数趋势
      const data1 = {}
      data1.data = []
      data1.xtitle = []
      let d1 = [
        {
          total: 1,
          year: "2018",
          riskTotal: 0
        },
        {
          total: 1523,
          year: "2019",
          riskTotal: 442
        },
        {
          total: 1248,
          year: "2020",
          riskTotal: 309
        },
        {
          total: 1266,
          year: "2021",
          riskTotal: 388
        }
      ]
      d1.forEach((item) => {
        data1.data.push(
          {
            name: item.year,
            value: item.riskTotal,
            label: "中高危人数"
          },
          {
            name: item.year,
            value: item.total,
            label: "总人数"
          }
        )
      })

      this.riskCData = data1

      // 性别人数趋势
      const data2 = {}
      data2.data = []
      data2.series = []
      data2.xtitle = []
      data2.legend = {
        data: ["男性", "女性"]
      }
      let d2 = [
        {
          year: "2018",
          maleCount: 0,
          femaleCount: 1
        },
        {
          year: "2019",
          maleCount: 600,
          femaleCount: 924
        },
        {
          year: "2020",
          maleCount: 475,
          femaleCount: 773
        },
        {
          year: "2021",
          maleCount: 491,
          femaleCount: 775
        }
      ]
      d2.forEach((item) => {
        data2.data.push(
          {
            name: item.year,
            value: item.maleCount,
            label: "男性"
          },
          {
            name: item.year,
            value: item.femaleCount,
            label: "女性"
          }
        )
      })
      this.genderCData = data2
    },
    getHumanChart(addressCode) {
      // 中高危风险人数分布
      const data1 = {}
      data1.data = []
      data1.xtitle = []
      this.riskCount = "0" //清空
      let d1 = [
        {
          year: null,
          diseaseType: null,
          addressCode: "330304000000",
          target: 0,
          lowRiskCount: 2899,
          lowRiskRate: "71.80%",
          mediumRiskCount: 1005,
          mediumRiskRate: "24.89%",
          highRiskCount: 134,
          highRiskRate: "3.32%",
          riskTotal: 4038
        }
      ]
      d1.forEach((item) => {
        if (item.lowRiskRate) {
          data1.data.push({
            name: "低危",
            value: this.toPercent(item.lowRiskRate) || "0",
            count: item.lowRiskCount || "--",
            color: "rgba(2, 167, 240, 1)"
          })
        }
        if (item.mediumRiskRate) {
          data1.data.push({
            name: "中危",
            value: this.toPercent(item.mediumRiskRate) || "0",
            count: item.mediumRiskCount || "--",
            color: "rgba(245, 166, 0, 1)"
          })
        }
        if (item.highRiskRate) {
          data1.data.push({
            name: "高危",
            value: this.toPercent(item.highRiskRate) || "0",
            count: item.highRiskCount || "--",
            color: "rgba(248, 60, 83, 1)"
          })
        }

        // if (item.target) {
        this.riskCount = this.toSpot(item.riskTotal) || "0"
        // }
      })

      this.riskPData = data1

      //人群性别分布
      const pEchartsDatas = {}
      const pEchartsDataB = {}
      pEchartsDatas.data = []
      pEchartsDataB.data = []
      pEchartsDatas.xtitle = []
      this.genderCount = "0" //清空
      let item = {
        year: null,
        diseaseType: null,
        addressCode: "330304000000",
        target: 109838,
        maleTarget: 53726,
        femaleTarget: 56105,
        maleCount: 1565,
        femaleCount: 2473,
        genderTotal: 4038,
        maleRate: "38.76%",
        femaleRate: "61.25%",
        maleCoverRate: "2.92%",
        femaleCoverRate: "4.41%"
      }
      if (item.maleRate) {
        pEchartsDatas.data.push({
          name: "男性",
          value: this.toPercent(item.maleRate),
          count: item.maleCount || 0,
          color: "rgba(2, 167, 240, 1)"
        })
      }
      if (item.femaleRate) {
        pEchartsDatas.data.push({
          name: "女性",
          value: this.toPercent(item.femaleRate),
          count: item.femaleCount || 0,
          color: "rgba(236, 128, 141, 1)"
        })
      }
      if (item.maleCoverRate) {
        pEchartsDataB.data.push({
          name: "男性",
          value: this.toPercent(item.maleCoverRate),
          color: "rgba(236, 128, 141, 1)",
          count: item.maleCount || 0
        })
      }
      if (item.femaleCoverRate) {
        pEchartsDataB.data.push({
          name: "女性",
          value: this.toPercent(item.femaleCoverRate),
          color: "rgba(236, 128, 141, 1)",
          count: item.femaleCount || 0
        })
      }
      // if (item.target) {
      this.genderCount = this.toSpot(item.genderTotal) || "0"
      // }
      // console.log("性别分布",pEchartsData,pEchartsDataB)
      this.genderPData = pEchartsDatas
      this.genderBData = pEchartsDataB
      //疾病分布
      this.diseaseData = {}
      let ro = {
        lowIntraCarcinomaCount: 0,
        highIntraCarcinomaCount: 0,
        earlyEsophagealCancerCount: 0,
        advancedEsophagealCancerCount: 0,
        barretEsophagealCount: 1,
        refluxEsophagealCancerCount: 1,
        lowGastricNeoplasiaCount: 1,
        highGastricNeoplasiaCount: 5,
        earlyGastricCancerCount: 0,
        advancedGastricCancerCount: 0,
        atrophicGastritisCount: 0,
        gastricUlcerCount: 5,
        gastricPolypsCount: 51,
        nonatrophicGastritisCount: 0,
        duodenalBulbarUlcerCount: 33,
        hpPositivityCount: 0,
        chronicCount: 0,
        cancerCount: 0,
        otherLesionsCount: 112
      }
      const d = this.toArray(ro)
      const datass = {
        data: []
      }
      if (d && d.length) {
        datass.data = []
        d.forEach((item) => {
          datass.data.push({
            label: item.name,
            value: item.value
          })
        })
      } else {
        datass.data = [
          {
            label: "暂无数据",
            value: 0
          }
        ]
      }
      this.diseaseData = datass

      //慢病分布
      this.chronicData = {}
      let dads = {
        cancerCount: 8,
        chronicCount: 64,
        otherLesionsCount: 140,
        hpPositivityCount: 2013
      }
      const dss = this.toArray(dads, "chronic")
      const data123 = {
        data: []
      }
      if (dss && dss.length) {
        data123.data = []
        dss.forEach((item) => {
          data123.data.push({
            label: item.name,
            value: item.value
          })
        })
      } else {
        data123.data = [
          {
            label: "暂无数据",
            value: 0
          }
        ]
      }
      this.chronicData = data123
    },

    getHumanBar(addressCode) {
      //年龄段
      const d = [
        {
          name: "age",
          list: [
            {
              count: 363,
              range: "40-44"
            },
            {
              count: 197,
              range: "40以下"
            },
            {
              count: 639,
              range: "45-49"
            },
            {
              count: 713,
              range: "50-54"
            },
            {
              count: 716,
              range: "55-59"
            },
            {
              count: 553,
              range: "60-64"
            },
            {
              count: 489,
              range: "65-69"
            },
            {
              count: 238,
              range: "70-74"
            },
            {
              count: 106,
              range: "75-79"
            },
            {
              count: 25,
              range: "80-84"
            },
            {
              count: 8,
              range: "85-89"
            }
          ]
        },
        {
          name: "sex",
          list: [
            {
              sex: "男",
              count: 1579
            },
            {
              sex: "女",
              count: 2478
            }
          ]
        }
      ]
      let ageData = {
        data: []
      }
      let ageDataII = {
        data: []
      }
      d.forEach((v) => {
        if (v.name === "age") {
          if (v.list && v.list.length) {
            v.list.forEach((item) => {
              if (item.range == "40以下") {
                ageData.data = [
                  {
                    name: item.range,
                    value: item.count
                  }
                ]
              } else {
                ageDataII.data.push({
                  name: item.range,
                  value: item.count
                })
              }
            })
          }
        }
      })
      this.ageBData.data = ageData.data.concat(ageDataII.data)
    },
    getMap(addressCode) {
      this.isMapShow = true
      const params = {}
      params.year = this.yearOpt
      params.diseaseType = this.diseaseOpt
      params.addressCode = addressCode
      const list = []
      let d = [
        {
          year: null,
          diseaseType: "gastric",
          addressCode: "330328000000",
          target: 0,
          inspectionCount: 0,
          screeningCount: 1,
          screeningCoverRate: "0%",
          firstScreeningCoverRate: "0%",
          riskRate: "0%",
          riskCount: 0,
          endoscopeRate: "0%",
          endoscopeCount: 0,
          pathologyCount: 0,
          pathologyRate: "0%",
          includedCount: 0,
          excludedCount: 0,
          hpPositivityCount: 0,
          riskEndoscopeCount: 0,
          riskEndoscopeRate: "0%",
          complaisanceRate: "0%",
          cancerCount: 0,
          cancerRate: "0%",
          earlyCancerCount: 0,
          earlyCancerRate: "0%"
        },
        {
          year: null,
          diseaseType: "gastric",
          addressCode: "330304000000",
          target: 19189,
          inspectionCount: 0,
          screeningCount: 4038,
          screeningCoverRate: "0.00%",
          firstScreeningCoverRate: "21.05%",
          riskRate: "0%",
          riskCount: 0,
          endoscopeRate: "0%",
          endoscopeCount: 0,
          pathologyCount: 0,
          pathologyRate: "0%",
          includedCount: 0,
          excludedCount: 0,
          hpPositivityCount: 0,
          riskEndoscopeCount: 0,
          riskEndoscopeRate: "0%",
          complaisanceRate: "0.00%",
          cancerCount: 0,
          cancerRate: "0%",
          earlyCancerCount: 0,
          earlyCancerRate: "0%"
        }
      ]
      if (d && d.length != 0) {
        this.mapData = d.map((item) => {
          return {
            addressCode: item.addressCode || "",
            firstScreeningCoverRate:
              this.toPercent(item.firstScreeningCoverRate) || 0
          }
        })
      } else {
        this.mapData = [{ addressCode: "", firstScreeningCoverRate: 0 }] //清空
      }

      this.isMapShow = false
    },
    //漏斗图
    getFunnel(addressCode) {
      this.isFunnelShow = true
      const params = {}
      params.year = this.yearOpt
      params.diseaseType = this.diseaseOpt
      params.addressCode = addressCode
      this.funnelData = {
        addressCode: "--",
        diseaseType: "--",
        endoscopeCount: 0,
        endoscopeRate: "--",
        firstScreeningCount: 0,
        firstScreeningCoverRate: "--",
        pathologyCount: 0,
        pathologyRate: "--",
        riskCount: 0,
        riskRate: "--",
        target: 0,
        year: "--"
      } //清空
      // this.$API.getScreeningFunnel({ params }).then((res) => {
      // if (res.code === 1) {
      const d = {
        year: null,
        diseaseType: null,
        addressCode: null,
        target: 19189,
        firstScreeningCount: 3813,
        riskCount: 1139,
        endoscopeCount: 592,
        pathologyCount: 547,
        riskRate: "29.88%",
        firstScreeningCoverRate: "19.88%",
        endoscopeRate: "51.98%",
        pathologyRate: "92.40%"
      }
      this.funnelData = {
        year: null,
        diseaseType: null,
        addressCode: null,
        target: 19189,
        firstScreeningCount: 3813,
        riskCount: 1139,
        endoscopeCount: 592,
        pathologyCount: 547,
        riskRate: "29.88%",
        firstScreeningCoverRate: "19.88%",
        endoscopeRate: "51.98%",
        pathologyRate: "92.40%"
      }
      if (d && d.firstScreeningCoverRate) {
        this.firstScreeningCoverRate = d.firstScreeningCoverRate
      }
      if (d && d.riskRate) {
        this.riskRate = d.riskRate
      }
      if (d && d.endoscopeRate) {
        this.endoscopeRate = d.endoscopeRate
      }
      if (d && d.pathologyRate) {
        this.pathologyRate = d.pathologyRate
      }
      // this.gridList.forEach(item => {
      // if (item.prop && res.object && res.object[item.prop]) {
      //   item.data = res.object[item.prop];
      // }
      // });
      // }
      this.isFunnelShow = false
      // })
      this.$forceUpdate()
    },
    getTable(addressCode) {
      const params = {}
      params.addressCode = addressCode
      params.diseaseType = this.diseaseOpt
      params.year = this.yearOpt
      this.$API.getAreaWorkbench({ params }).then((res) => {
        if (res.code === 1) {
          const list = []
          this.tableData = res.object
          this.totalCount = res.object.totalCount
          this.distCount = res.object.length
          this.tableLoading = false
        }
      })
    },
    //疾病防控成效
    getResult(addressCode) {
      // this.ouhaiData.data=[]
      // this.yongjiaData.data=[]
      if (addressCode == "330304000000" || addressCode == "") {
        this.ouhaiData.data = [
          {
            name: "筛查开展前",
            value: 33.02
          },
          {
            name: "筛查开展后",
            value: 20.94
          }
          // {
          //   name: "2016",
          //   value: 32.86,
          // },
          // {
          //   name: "2017",
          //   value: 34.73,
          // },
          // {
          //   name: "2018",
          //   value: 31.46,
          // },
          // {
          //   name: "2019",
          //   value: 19.58,
          // },
          // {
          //   name: "2020",
          //   value: 22.3,
          // },
        ]
      }

      this.yongjiaData.data = [
        {
          name: "2016",
          value: 31.77
        },
        {
          name: "2017",
          value: 34.8
        },
        {
          name: "2018",
          value: 31.64
        },
        {
          name: "2019",
          value: 16.35
        },
        {
          name: "2020",
          value: 17.3
        }
      ]
    },
    // 疾病数据
    getStatisticsDiseases() {
      this.$API.getStatisticsDiseases().then((res) => {
        if (res.code === 1) {
          const d = res.object
          const pieEchartsData = {}
          if (d && d.length) {
            pieEchartsData.data = []
            d.forEach((item) => {
              pieEchartsData.data.push({
                label: item.diseaseName,
                value: item.count
              })
            })
          } else {
            pieEchartsData.data = [
              {
                label: "暂无数据",
                value: 0
              }
            ]
          }
          this.pieEchartsData = pieEchartsData
        }
      })
    },
    // 疾病分类数据
    getStatisticsDiseasesType() {
      this.$API.getStatisticsDiseasesType().then((res) => {
        if (res.code === 1) {
          const d = res.object
          let diseaseClassification = {
            xTitle: "疾病分类统计",
            data: []
          }
          if (d && d.length) {
            d.forEach((item) => {
              diseaseClassification.data.push({
                name: item.name,
                value: item.count
              })
            })
          }
          this.diseaseClassification = diseaseClassification
        }
      })
    },
    // 年龄性别分布
    getStatisticsPatientAgeAndSex() {
      this.$API.getStatisticsPatientAgeAndSex().then((res) => {
        if (res.code === 1) {
          const d = res.object
          const sexObj = d.map((v) => {
            if (v.name === "sex") {
              let sexData = {
                xTitle: "患者性别分布",
                data: []
              }
              if (v.list && v.list.length) {
                v.list.forEach((item) => {
                  sexData.data.push({
                    name: item.sex,
                    value: item.count
                  })
                })
              }
              this.sexData = sexData
            }
            if (v.name === "age") {
              let ageData = {}
              if (v.list && v.list.length) {
                const xAxisData = []
                const yAxisData = []
                v.list.forEach((item) => {
                  xAxisData.push(item.range)
                  yAxisData.push(item.count)
                })
                ageData = {
                  title: {
                    text: "患者年龄分布"
                  },
                  xAxis: [
                    {
                      type: "category",
                      axisTick: {
                        alignWithLabel: true
                      },
                      data: xAxisData
                    }
                  ],
                  series: [
                    {
                      type: "bar",
                      stack: "vistors",
                      barWidth: "60%",
                      data: yAxisData,
                      animationDuration: 2600
                    }
                  ]
                }
              }
              this.ageData = ageData
            }
          })
        }
      })
    },
    // 筛查数据
    getStatisticsMonthly() {
      this.$API.getStatisticsMonthly().then((res) => {
        if (res.code === 1) {
          const d = res.object
          const barEchartsData = {}
          barEchartsData.data = []
          for (let i = 1; i < 13; i++) {
            barEchartsData.data.push({
              label: i + "月",
              value:
                (d.find((item) => item.month == i) &&
                  d.find((item) => item.month == i).count) ||
                0
            })
          }
          this.barEchartsData = barEchartsData
        }
      })
    },
    // 随访列表
    getFollowupReport() {
      const params = {}
      params.pageNum = this.pageIndex
      params.pageSize = this.pageSize

      this.$API.getFollowupReport({ params }).then((res) => {
        const list = []
        const d = res.object
        if (d && d.list) {
          d.list.forEach((item) => {
            list.push({
              ...item
            })
          })
        }
        this.tableData = list
        this.totalCount = res.object.totalCount
      })
    },
    handleFollow(row) {
      sessionStorage.setItem("datamanage-path", this.$route.path)
      this.$router.push({
        name: "reportdata",
        query: {
          diseaseType: row.diseaseTypes,
          id: row.id
        }
      })
    }
  }
}
</script>
<style lang="scss" scoped>
.outer {
  overflow-y: hidden;
}
.wrap {
  // background: #f5f7f9;
  // padding: 15px;
  border-top: none;
  background: rgba(29, 32, 51, 1);
  border: 10px solid rgba(29, 32, 51, 1);
  border-top: none;
  padding: 20px 0;
  overflow: hidden;
  // height: 100vh;
  // padding-top: 10px;
  // overflow-y: scroll;
}
.graph-row {
  margin: 5px 0px 0px;
  ::v-deep {
    .ivu-tabs-tabpane {
      height: 88vh;
      overflow-x: hidden;
      overflow-y: auto;
      transition: all 0.5s;
      @media (max-height: 768px) {
        height: 79vh;
      }
    }
    ::-webkit-scrollbar {
      width: 2px; //竖轴宽度
      height: 2px; //横轴宽度
      background-color: transparent;
    }
    /* 滚动槽 */
    ::-webkit-scrollbar-track {
      border-radius: 10px;
    }

    ::-webkit-scrollbar-thumb {
      // background-color: transparent;
    }
  }
}
#index {
  background: #1d2033;
  div {
    // background: rgba(29, 32, 51, 1)
  }
}
#analyse {
  height: 96px;
  background: transparent;
  display: initial;
  top: -120px;
}
#detail {
  height: 96px;
  background: transparent;
  display: initial;
  top: -120px;
}
.one-row {
  padding: 10px 20px;
  color: #d7d7d7;
  border-bottom: 10px solid rgb(29 32 51);
  margin: 0 !important;
  background: #252c49;
}
.meta-row,
.search-row {
  border-top: 1px solid rgb(29 32 51);
  text-align: center;
  box-shadow: 2px -1px 0px #1d2033; //固定间隙
}
.neg-title {
  padding: 10px;
  color: #aaaaaa;
}
.neg-title:hover {
  color: rgb(128, 255, 255);
}
.neg-active {
  color: rgb(128, 255, 255);
  border-bottom: 2px solid rgb(128, 255, 255);
}
.grid-side {
  width: 16%;
}
.sider-tab {
  margin-left: 2px;
  ::v-deep {
    .ivu-table-tbody {
      height: 1105px;
      overflow-y: auto;
    }
  }
}
.tab-expand {
  position: absolute;
  box-shadow: -17px -17px 34px #080b16, 17px -17px 34px #2b3354;
  border-left: 1px solid #2b3354;
  transition: all 0.2s ease-in-out;
  z-index: 9;
}
.sider-tab-expand {
  top: 0;
  right: 0;
}
.center-tab-expand {
  top: 120px;
  // left: 0;
  right: 0;
}
.grid-content {
  margin-right: 6px;
}
.grid-row {
  background: #1d2033;
  white-space: nowrap;
  // height: 400px;
  // overflow: hidden;
}
.grid-row-t {
  transition: width 2s;

  .grid-col-t{
    width: 24.8%;;
  }
  .ivu-col-span-md-5 {
    width: 24.8%;
    border-right: 2px solid #1d2033;
  }
  @media (min-width: 1200px) {
    .ivu-col-span-md-3 {
      width: 14%;
    }
  }
  // @media (max-width: 1200px) and (min-width: 1000px) {
  //   .ivu-col-span-md-3 {
  //     width: 15.5%;
  //   }
  // }
}
.grid-col {
  color: #c8e1f4;
  padding-top: 0.5vh;
  // width: 48%;
  background: #252c49;
  box-shadow: 0 1px 1px 0 rgb(0 0 0 / 10%);
}
.grid-col-l {
  margin: 0px 5px 5px 0px;
}
.grid-col-t {
  margin: 0px 0px 5px 0px;
}
.grid-col-i {
  margin: 0.5vh 0px 0px 0px;
  padding: 0px 0px 0.5vh;
  // border-right: 2px solid black;
}
.grid-col-r {
  margin: 0px 0px 5px 5px;
  float: right;
}
.grid-data {
  font-size: 32px;
  font-weight: 400;
  transition: all 0.5s;
  @media (max-height: 768px) {
    font-size: 20px;
  }
}
.grid-label {
  font-size: 16px;
  transition: all 0.5s;
  white-space: pre;
  @media (max-height: 768px) {
    font-size: 12px;
  }
}
.grid-title {
  font-size: 20px;
  font-weight: 400;
  transition: all 0.5s;
  @media (max-height: 768px) {
    font-size: 14px;
  }
}
.grid-map {
  height: 40vh;
  transition: all 0.5s;
  ::v-deep .ivu-tabs-content {
    height: 90%;
  }
  @media (max-height: 768px) {
    height: 75vh;
  }
}
.grid-funnel {
  @media (min-width: 1200px) {
    margin-right: 5px;
  }
  @media (min-width: 567px) {
    margin-bottom: 5px;
  }
}
.ivu-layout {
  background: #1d2033 !important;
}
.ivu-layout-content {
  overflow: hidden !important;
}
.corner-index {
  display: flex;
  flex-direction: column;
  padding: 20px 15px 15px;
  border: 1px solid rgba(129, 211, 248, 1);
  border-radius: 4px;
  color: #80ffff;
  // width: 150px;
  // height: 103px;
  font-size: 16px;
  position: absolute;
  right: 2rem;
  top: 3rem;
}
.corner-text {
  position: absolute;
  cursor: pointer;
  color: #d7d7d7;
  z-index: 8;
  right: 50px;
  top: 20px;
}
.corner-icon {
  cursor: pointer;
  position: absolute;
  color: #d7d7d7;
  z-index: 8;
  right: 50px;
  top: -33px;
}
.flex-row {
  display: flex;
  flex-direction: row;
}
.rowI {
  margin-top: 30px;
  height: 100%;
}
.chart-title {
  color: #d7d7d7;
  font-size: 16px;
  text-align: left;
  margin-top: 10px;
}
// 动画

.expandT-enter-active,
.expandT-leave-active {
  transition: all 0.3s ease-in;
}
.expandT-leave-active {
  transition: all 0.3s cubic-bezier(1, 0.5, 0.8, 1);
}
.expandT-enter, .expandT-leave-to
/* .slide-fade-leave-active for below version 2.1.8 */ {
  transform: translateX(10px);
  opacity: 0;
}

::v-deep {
  // .map {
  //   height: 530px;
  //   width: 100vw;
  // }
  // .flex-row .map {
  //   @media (min-width: 1000px) {
  //     height: 500px;
  //     width: 900px;
  //   }
  // }
  .ivu-spin-fix {
    background: #1d2033c9;
    border: 1px solid #1d2033c9;
    z-index: 999;
  }
  .flexRow {
    background: #252c49;
  }
  .graph-col {
    // background: #2b324e;
    border: 4px solid #252c49;
    padding: 10px;
    height: 33.4vh;
    transition: all 0.5s;
    @media (max-height: 768px) {
      height: 450px;
    }
  }
  .graph-human-col {
    // background: #2b324e;
    border: 4px solid #252c49;
    padding: 0px 10px 10px;
    height: 32vh;
    transition: all 0.5s;
    @media (max-height: 768px) {
      height: 445px;
    }
  }
  .graph-human-row {
    border-bottom: 10px solid #1d2033;
    border-right: 1px solid #1d2033;
  }
  .ivu-card {
    background: transparent;
  }
  .ivu-card-head {
    border-bottom: 1px solid #252c49;
    padding: 14px 16px 0px;
    text-align: left;
    // padding: 14px 16px 14px 0px;
    p {
      color: white;
    }
  }
  .ivu-card-body {
    display: flow-root;
    padding: 0px 16px 16px 16px;
  }
  .ivu-layout-content {
    box-shadow: 0 1px 1px 0 rgb(0 0 0 / 10%);
    background: #1d2033 !important;
  }
  // .ivu-col-span-sm-24 {
  //   background: #2b324e;
  //   border: 2px solid #252c49;
  // }
  .ivu-tabs {
    // margin-top: 5px;
    background: #252c49;
  }
  .ivu-affix {
    background: #252c49;
    left: initial !important;
    width: 100% !important;
    height: auto;
  }
  .ivu-tabs-bar {
    height: auto;
    // padding-top: 10px;
    border-bottom: 2px solid rgba(29, 32, 51, 1);
  }
  .ivu-tabs-nav .ivu-tabs-tab-active {
    color: white;
  }
  // .ivu-tabs-nav {
  //   margin-top: 9px;
  // }
  // .ivu-tabs-nav .ivu-tabs-tab {
  //   padding: 7px 16px;
  // }
  .ivu-tabs-ink-bar {
    height: 2px;
  }
  .ivu-btn-ghost {
    color: #515a6e;
  }
  .ivu-radio-group-button .ivu-radio-wrapper-checked {
    color: #1890ff;
    border: 1px solid #1890ff;
  }
  .ivu-layout-sider {
    background: rgba(29, 32, 51, 1);
  }
  .ivu-select-selection {
    color: #d7d7d7;
    background-color: transparent;
    border-color: 1px solid #404354;
  }
  .ivu-table {
    background: transparent;
    font-size: 12px;
    font-weight: 100;
  }
  .ivu-table-body {
    color: #f2f2f2c4;
  }
  .ivu-table-cell {
    padding: 0px;
  }
  .ivu-table-row {
    background: #252c49;
  }
  .ivu-table-row-hover {
    background: rgba(29, 32, 51, 1);
  }
  .ivu-table:before {
    background: transparent;
  }
  .ivu-table-header thead tr th {
    color: #aaaaaa;
    border-bottom: 4px solid rgba(29, 32, 51, 1);
    padding: 20px 0px;
  }
  .ivu-table td {
    background: transparent;
    color: #f2f2f2;
    border-bottom: 4px solid rgba(29, 32, 51, 1);
    padding: 21.5px 0px;
    border-radius: 2px;
  }
  .ivu-table th {
    background: transparent;
    border-bottom: 4px solid rgba(29, 32, 51, 1);
    color: #aaaaaa;
    padding: 5px;
  }
  .table-row {
    .ivu-tabs-content {
      margin: 0px;
    }
  }
  /* 旋转效果 */
  .demo-spin-icon-load {
    animation: ani-demo-spin 1s linear infinite;
  }
  @keyframes ani-demo-spin {
    from {
      transform: rotate(0deg);
    }
    50% {
      transform: rotate(180deg);
    }
    to {
      transform: rotate(360deg);
    }
  }
}
</style>
