<template>
  <div class="epidemic main">
    <div class="minHeader shadow">
      <Breadcrumb :breadData="breadData"></Breadcrumb>
    </div>
    <div class="epidemic-tabs mt20">
      <ul class="et-con">
        <li
          v-for="(item, index) in epidemic_tabs_info"
          :key="index"
          @click="tabIdx(index)"
          :class="{ active: epidemic_tabs_idx == index }"
        >
          {{ item.name }}
        </li>
          <li class="et-disabled">
          <el-tooltip
            class="item"
            effect="effect"
            content="建设中..."
            popper-class="sy-tooltip"
            placement="top"
            :visible-arrow="false"
          >
            <p>冷链追溯</p>
          </el-tooltip>
        </li>
        <li class="et-disabled">
          <el-tooltip
            class="item"
            effect="effect"
            content="建设中..."
            popper-class="sy-tooltip"
            placement="top"
            :visible-arrow="false"
          >
            <p>疫情调度</p>
          </el-tooltip>
        </li>
      </ul>
    </div>
    <div class="vaccination shadow" v-show="epidemic_tabs_idx == 0">
      <el-row :gutter="20">
        <el-col :sm="12" :xs="24">
          <div class="general-situation unify-item">
            <h3 class="module-tit">总体情况</h3>
            <div class="gs-top">
              <div class="hr1"></div>
              <p>新冠病毒疫苗接种任务进度</p>
              <div class="hr2"></div>
            </div>
            <el-row :gutter="4">
              <div class="gs-con">
                <el-col :lg="9" :xs="12" :sm="12">
                  <div class="e-pro" style="color: #333">
                    <div id="circle_2" style="width: 100%; height: 220px"></div>
                    <div class="e-pro-text">
                      <p style="color: #5470c6; font-weight: 600">30.53%</p>
                      <p style="margin-bottom: 8px">全程接种</p>
                      <p style="color: #91cc75; font-weight: 600">79.2%</p>
                      <p>第一剂次</p>
                    </div>
                  </div>
                </el-col>
                <el-col :lg="5" :xs="12" :sm="12">
                  <div class="gs-con-item">
                    <p>全程接种至六月底</p>
                    <div>
                      <p>任务量</p>
                      <span>12万例</span>
                    </div>
                    <div>
                      <p>已完成量</p>
                      <span>12万例</span>
                    </div>
                  </div>
                </el-col>
                <el-col :lg="5" :xs="12" :sm="12">
                  <div class="gs-con-item">
                    <p>第一剂次接种至六月底</p>
                    <div>
                      <p>任务量</p>
                      <span>12万例</span>
                    </div>
                    <div>
                      <p>已完成量</p>
                      <span>12万例</span>
                    </div>
                  </div>
                </el-col>
                <el-col :lg="5" :xs="12" :sm="12">
                  <div class="gs-con-item">
                    <p>累计疫苗接种量</p>
                    <span>12万例</span>
                  </div>
                </el-col>
              </div>
            </el-row>
          </div>
        </el-col>
        <el-col :sm="12" :xs="24">
          <div class="vaccination-progress unify-item">
            <h3 class="module-tit">疫苗接种进展</h3>
            <p class="ep-name">新冠病毒疫苗全程接种任务进度</p>
            <div class="vp-con">
              <div id="circle_1" style="width: 40%; height: 182px"></div>
              <div class="vp-text">
                <p class="prompt-text">
                  计划<span>2020-5-31</span>目标完成疫苗接种<span>96150</span>人
                </p>
                <p class="prompt-text">
                  每日建议接种<span>5706</span>,当前进度情况<span>正常</span>
                </p>
              </div>
            </div>
          </div>
        </el-col>
      </el-row>
      <el-row :gutter="20">
        <el-col :sm="12" :xs="24">
          <div class="daily-news unify-item">
            <h3 class="module-tit">每日动态</h3>
            <p class="ep-name">日接种量和库存趋势图</p>
            <div class="dn-con">
              <div id="line_1" style="width: 60%; height: 242px"></div>
              <div class="dn-text">
                <p class="prompt-text">接种总台数：<span>0</span></p>
                <p class="prompt-text">当前活约束数：<span>0</span></p>
              </div>
            </div>
          </div>
        </el-col>
        <el-col :sm="12" :xs="24">
          <div class="key-groups unify-item">
            <h3 class="module-tit">重点人群接种率</h3>
            <el-row :gutter="10">
              <div class="kg-con">
                <el-col :sm="6" :xs="12">
                  <el-progress
                    type="circle"
                    :percentage="86.9"
                    :stroke-width="12"
                    :color="'#6A93F5'"
                  >
                  </el-progress>
                  <p>机关事业单位人员（医疗机构除外）</p>
                </el-col>
                <el-col :sm="6" :xs="12">
                  <el-progress
                    type="circle"
                    :percentage="100"
                    :stroke-width="12"
                    :style="'margin:0 auto'"
                    :color="'#7FD6AD'"
                  >
                  </el-progress>
                  <p>医疗机构人员</p>
                </el-col>
                <el-col :sm="6" :xs="12">
                  <el-progress
                    type="circle"
                    :percentage="0"
                    :stroke-width="12"
                    :color="'#647594'"
                  >
                  </el-progress>
                  <p>高等院校学生</p>
                </el-col>
                <!-- <el-col :sm="6" :xs="12">
                  <el-progress
                    type="circle"
                    :percentage="0"
                    :stroke-width="12"
                    :color="'#EDBF4C'"
                  >
                  </el-progress>
                  <p>三类重点人群</p>
                </el-col> -->
              </div>
            </el-row>
          </div>
        </el-col>
      </el-row>
      <el-row :gutter="20">
        <el-col :sm="12" :xs="24">
          <div class="daily-news unify-item">
            <h3 class="module-tit">各区县工作进度</h3>
            <p class="ep-name">各区县新冠病毒疫苗供应及接种情况</p>
            <div id="bar_1" style="width: 85%; height: 300px"></div>
          </div>
        </el-col>
        <el-col :sm="12" :xs="24">
          <div class="key-groups unify-item">
            <h3 class="module-tit">各地库存量</h3>
            <p class="ep-name">各地疫苗库存量（昨日）</p>
            <div id="bar_2" style="width: 85%; height: 300px"></div>
          </div>
        </el-col>
      </el-row>
    </div>
    <div class="vaccine-traceability shadow" v-show="epidemic_tabs_idx == 1">
      <div class="vt-con unify-item">
        <h3 class="module-tit">疫苗追溯</h3>
        <el-row>
          <div class="vt-top">
            <el-col :sm="8" :xs="24">
              <div class="vt-ipt">
                <p>证件号码</p>
                <input type="text" v-model="vt.vt_code1"/>
              </div>
            </el-col>
            <el-col :sm="8" :xs="16">
              <div class="vt-ipt">
                <p>电子监管码</p>
                <input type="text" v-model="vt.vt_code2"/>
              </div>
            </el-col>
            <el-col :sm="4" :xs="8">
              <button>
                <i class="el-icon-search"></i>
                查询
              </button>
            </el-col>
          </div>
        </el-row>
        <div class="vt-info-table">
          <el-table
            :data="vt.vt_info_table"
            style="width: 100%; color: #333; font-size: 16px"
          >
            <el-table-column
              prop="name"
              label="姓名"
              width="110"
              align="center"
              fixed
            >
            </el-table-column>
            <el-table-column
              prop="date"
              label="接种日期"
              width="110"
              align="center"
            >
            </el-table-column>
            <el-table-column
              prop="unit"
              width="110"
              label="接种单位"
              align="center"
            >
            </el-table-column>
            <el-table-column
              prop="doctor"
              width="110"
              label="接种医生"
              align="center"
            >
            </el-table-column>
            <el-table-column
              prop="vaccine_name"
              width="110"
              label="疫苗名称"
              align="center"
            >
            </el-table-column>
            <el-table-column
              prop="position"
              width="110"
              label="接种部位"
              align="center"
            >
            </el-table-column>
            <el-table-column
              prop="Dosage"
              width="110"
              label="接种剂次"
              align="center"
            >
            </el-table-column>
            <el-table-column
              prop="enterprise"
              width="110"
              label="生成企业"
              align="center"
            >
            </el-table-column>
            <el-table-column
              prop="code"
              width="130"
              label="疫苗监管码"
              align="center"
            >
            </el-table-column>
            <el-table-column
              prop="batch_number"
              width="130"
              label="疫苗批号"
              align="center"
            >
            </el-table-column>
          </el-table>
        </div>
        <div class="vaccinator-info">
          <h4>
            <i class="el-icon-caret-right" style="color: #1492ff"></i>接种人信息
          </h4>
          <el-row>
            <div class="vaccinator-info-con">
              <el-col :sm="6" :xs="24">
                <p>姓名：</p>
                <p>证件号码：</p>
              </el-col>
              <el-col :sm="6" :xs="24">
                <p>性别：</p>
                <p>出生日期：</p>
              </el-col>
              <el-col :sm="6" :xs="24">
                <p>人群分类：</p>
                <p>电话号码：</p>
              </el-col>
              <el-col :sm="6" :xs="24">
                <p>住址：</p>
              </el-col>
            </div>
          </el-row>
        </div>
        <div class="vaccine-info">
          <h4>
            <i class="el-icon-caret-right" style="color: #1492ff"></i>疫苗信息
          </h4>
        </div>
      </div>
    </div>
    <div class="cold-chain-tracing shadow" v-show="epidemic_tabs_idx == 2">
      <div class="cct-con unify-item">
        <h3 class="module-tit">冷链追溯</h3>
        <el-row>
          <el-col :span="24">
            <div class="monitoring">
              <h4>
                <i class="el-icon-caret-right" style="color: #1492ff"></i
                >冷链检测情况
              </h4>
              <el-row :gutter="10">
                <el-col :sm="10" :xs="24">
                  <div class="monitoring-first">
                    <div class="mf-text">
                      <p>累计检测总量</p>
                      <span>0</span>
                    </div>
                    <div class="mf-text">
                      <p>阳性数量</p>
                      <span>0</span>
                    </div>
                    <div class="mf-table">
                      <el-table
                        :data="cct.mf_info_table"
                        style="width: 100%; color: #333; font-size: 16px"
                      >
                        <el-table-column
                          prop="category"
                          label="检测类别"
                          width="156"
                          align="center"
                          fixed
                        >
                        </el-table-column>
                        <el-table-column
                          prop="sampling_num"
                          label="采样"
                          width="156"
                          align="center"
                        >
                        </el-table-column>
                        <el-table-column
                          prop="positive_num"
                          width="156"
                          label="阳性"
                          align="center"
                        >
                        </el-table-column>
                      </el-table>
                    </div>
                  </div>
                </el-col>
                <el-col :sm="14" :xs="24">
                  <div class="ms-table">
                    <el-table
                      :data="cct.ms_info_table"
                      style="width: 100%; color: #333; font-size: 16px"
                    >
                      <el-table-column
                        prop="category"
                        label="检测类别"
                        width="110"
                        align="center"
                        fixed
                      >
                      </el-table-column>
                      <el-table-column
                        prop="slaughter_num"
                        label="屠宰"
                        width="110"
                        align="center"
                      >
                      </el-table-column>
                      <el-table-column
                        prop="produce_num"
                        width="110"
                        label="生产加工"
                        align="center"
                      >
                      </el-table-column>
                      <el-table-column
                        prop="bestowal_num"
                        width="110"
                        label="贮存运输"
                        align="center"
                      >
                      </el-table-column>
                      <el-table-column
                        prop="manage_num"
                        width="110"
                        label="经营销售"
                        align="center"
                      >
                      </el-table-column>
                      <el-table-column
                        prop="positive_num"
                        width="110"
                        label="阳性"
                        align="center"
                      >
                      </el-table-column>
                    </el-table>
                  </div>
                </el-col>
              </el-row>
            </div>
          </el-col>
        </el-row>
        <div class="result">
          <h4>
            <i class="el-icon-caret-right" style="color: #1492ff"></i>检测结果
          </h4>
          <div class="result-table">
            <el-table
              :data="cct.result_table"
              style="width: 100%; color: #333; font-size: 16px"
            >
              <el-table-column
                prop="date"
                label="采样日期"
                width="192"
                align="center"
                fixed
              >
              </el-table-column>
              <el-table-column
                prop="informant"
                label="填报人"
                width="192"
                align="center"
              >
              </el-table-column>
              <el-table-column
                prop="tel"
                width="192"
                label="联系电话"
                align="center"
              >
              </el-table-column>
              <el-table-column
                prop="unit"
                width="192"
                label="报送单位"
                align="center"
              >
              </el-table-column>
              <el-table-column
                prop="category"
                width="192"
                label="类别"
                align="center"
              >
              </el-table-column>
              <el-table-column
                prop="code"
                width="192"
                label="冷链追溯码"
                align="center"
              >
              </el-table-column>
            </el-table>
          </div>
          <div class="re-search">
            <p>冷链码</p>
            <input type="text"/>
            <button>
              <i class="el-icon-search"></i>
              检索
            </button>
          </div>
          <el-row>
            <el-col
              :lg="8"
              :xs="24"
              v-for="(item, index) in cct.step_info"
              :key="index"
            >
              <div class="re-step">
                <p class="step-title">
                  <i class="el-icon-truck"></i>
                  <span>第{{ item.step }}站</span>
                </p>
                <div class="step-desc">
                  <p>产品名称：{{ item.product_name }}</p>
                  <p>上游企业名称：{{ item.upstream_name }}</p>
                  <p>上游企业地址：{{ item.upstream_address }}</p>
                  <p>下游企业名称：{{ item.downstream_name }}</p>
                  <p>下游企业地址：{{ item.downstream_address }}</p>
                  <p>类型：{{ item.type }}</p>
                  <p>记录时间：{{ item.date }}</p>
                </div>
              </div>
            </el-col>
          </el-row>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
    import Breadcrumb from "../components/Breadcrumb.vue";
    import {messageFun} from '../util/jianquan'

    export default {
        name: "epidemic",
        components: {Breadcrumb},
        data() {
            return {
                breadData: {
                    page_name: "常态化疫情防控",
                    annual_target: "暂无数据",
                    leading: "县疫情防控办  县卫生健康局",
                    child:'疫苗接种',
                },
                epidemic_tabs_info: [
                    {
                        name: "疫苗接种",
                    },
                    {
                        name: "疫苗追溯",
                    },
                    // {
                    //     name: "冷链追溯",
                    // },
                ],
                epidemic_tabs_idx: 0,
                vt: {
                    vt_code1: "",
                    vt_code2: "",
                    vt_info_table: [],
                },
                cct: {
                    mf_info_table: [
                        {
                            category: "食品",
                            sampling_num: "0",
                            positive_num: "0",
                        },
                        {
                            category: "外环境",
                            sampling_num: "0",
                            positive_num: "0",
                        },
                        {
                            category: "从业人员",
                            sampling_num: "0",
                            positive_num: "0",
                        },
                    ],
                    ms_info_table: [
                        {
                            category: "肉类",
                            slaughter_num: "0",
                            produce_num: "0",
                            bestowal_num: "0",
                            manage_num: "0",
                            positive_num: "0",
                        },
                        {
                            category: "水产",
                            slaughter_num: "0",
                            produce_num: "0",
                            bestowal_num: "0",
                            manage_num: "0",
                            positive_num: "0",
                        },
                        {
                            category: "其他",
                            slaughter_num: "0",
                            produce_num: "0",
                            bestowal_num: "0",
                            manage_num: "0",
                            positive_num: "0",
                        },
                        {
                            category: "食品外包装",
                            slaughter_num: "0",
                            produce_num: "0",
                            bestowal_num: "0",
                            manage_num: "0",
                            positive_num: "0",
                        },
                        {
                            category: "环境",
                            slaughter_num: "0",
                            produce_num: "0",
                            bestowal_num: "0",
                            manage_num: "0",
                            positive_num: "0",
                        },
                        {
                            category: "从业人员",
                            slaughter_num: "0",
                            produce_num: "0",
                            bestowal_num: "0",
                            manage_num: "0",
                            positive_num: "0",
                        },
                        {
                            category: "合计",
                            slaughter_num: "0",
                            produce_num: "0",
                            bestowal_num: "0",
                            manage_num: "0",
                            positive_num: "0",
                        },
                    ],
                    result_table: [
                        {
                            date: "2021-05-06",
                            informant: "张*",
                            tel: "xxx",
                            unit: "xxx",
                            category: "xxx",
                            code: "xxx",
                        },
                        {
                            date: "2021-05-06",
                            informant: "李*",
                            tel: "xxx",
                            unit: "xxx",
                            category: "xxx",
                            code: "xxx",
                        },
                        {
                            date: "2021-05-21",
                            informant: "王*",
                            tel: "xxx",
                            unit: "xxx",
                            category: "xxx",
                            code: "xxx",
                        },
                    ],
                    step_info: [
                        {
                            step: "1",
                            product_name: "147118505帝皇鲜",
                            upstream_name: "天普乐食食品（上海）有限公司",
                            upstream_address:
                                "浙江省杭州经济技术开发区白杨街道11号大街469号1幢南楼201室",
                            downstream_name: "杭州盒马网络科技有限公司下沙第一分公司",
                            downstream_address: "",
                            type: "无码入库",
                            date: "2021-04-12 21:16:26",
                        },
                        {
                            step: "2",
                            product_name: "147118505帝皇鲜",
                            upstream_name: "天普乐食食品（上海）有限公司",
                            upstream_address:
                                "浙江省杭州经济技术开发区白杨街道11号大街469号1幢南楼201室",
                            downstream_name: "杭州盒马网络科技有限公司下沙第一分公司",
                            downstream_address: "",
                            type: "无码入库",
                            date: "2021-04-12 21:16:26",
                        },
                        {
                            step: "3",
                            product_name: "147118505帝皇鲜",
                            upstream_name: "天普乐食食品（上海）有限公司",
                            upstream_address:
                                "浙江省杭州经济技术开发区白杨街道11号大街469号1幢南楼201室",
                            downstream_name: "杭州盒马网络科技有限公司下沙第一分公司",
                            downstream_address: "",
                            type: "无码入库",
                            date: "2021-04-12 21:16:26",
                        },
                    ],
                },
            };
        },
        mounted() {
            this.listenMessage();
            this.init_circle_1();
            this.init_circle_2();
            this.init_line_1();
            this.init_bar_2();
            this.init_bar_1();
            window.parent.postMessage(document.body.scrollHeight, '*');
            window.onresize = () => {
                return (() => {
                    window.parent.postMessage(document.body.scrollHeight, '*');
                })();
            };
            window.addEventListener("resize", function (e) {
                window.parent.postMessage(document.body.scrollHeight, '*');
            });
        },
        methods: {
            listenMessage() {
                window.addEventListener('message', this.bindThis.bind(this));
            },
            async bindThis(e) {
                const query = this.$route.query;
                if (query.debug == "true") {
                    return;
                }
                const ret = await messageFun(e);
                if (ret == false) {
                    this.$router.push("err");
                }
            },
            tabIdx(i) {
                this.epidemic_tabs_idx = i;
                this.breadData.child=this.epidemic_tabs_info[i].name;
            },
            init_circle_1() {
                this.cChart_1 = this.$echarts.init(document.getElementById("circle_1"));
                this.cChart_1.setOption({
                    title: {
                        text: ((27673 / 96150) * 100).toFixed(2) + "%",
                        subtext: "疫苗接种完成率",
                        x: "center",
                        y: "center",
                        textStyle: {
                            fontWeight: "600",
                            fontSize: 20,
                            color: "#000",
                        }, // 标题
                        subtextStyle: {
                            fontWeight: "normal",
                            fontSize: 16,
                            color: "#666",
                        }, // 副标题
                    },
                    color: ["#48A1FF", "#efefef"],
                    series: [
                        {
                            name: "访问来源",
                            type: "pie",
                            radius: ["70%", "85%"], // 半径
                            center: ["50%", "50%"], // 位置
                            label: {
                                show: false,
                            },
                            data: [
                                {
                                    value: 27673,
                                    name: "接种人数",
                                },
                                {
                                    value: 96150 - 27673,
                                    name: "未接种人数",
                                },
                            ],
                        },
                    ],
                });
            },
            init_circle_2() {
                this.cChart_2 = this.$echarts.init(document.getElementById("circle_2"));
                this.cChart_2.setOption({
                    color: ["#5470C6", "#91CC75"],
                    series: [
                        {
                            type: "pie",
                            hoverAnimation: false,
                            radius: ["80%", "95%"],
                            //环的位置
                            label: {
                                normal: {
                                    position: "inner",
                                },
                            },
                            labelLine: {
                                normal: {
                                    show: false,
                                },
                            },
                            data: [
                                {
                                    value: 30.53, //需要显示的数据
                                    itemStyle: {
                                        normal: {
                                            color: "#5470C6",
                                        },
                                    },
                                },
                                {
                                    value: 100 - 30.53,
                                    //不需要显示的数据，颜色设置成和背景一样
                                    itemStyle: {
                                        normal: {
                                            color: "#E6EBF8",
                                        },
                                    },
                                },
                            ],
                        },
                        {
                            type: "pie",
                            hoverAnimation: false,
                            radius: ["65%", "80%"],
                            label: {
                                normal: {
                                    position: "inner",
                                },
                            },
                            labelLine: {
                                normal: {
                                    show: false,
                                },
                            },
                            data: [
                                {
                                    value: 79.2,
                                    itemStyle: {
                                        normal: {
                                            color: "#91CC75",
                                        },
                                    },
                                },
                                {
                                    value: 100 - 79.2,
                                    itemStyle: {
                                        normal: {
                                            color: "#E6EBF8",
                                        },
                                    },
                                },
                            ],
                        },
                    ],
                });
            },
            init_line_1() {
                this.line_1 = this.$echarts.init(document.getElementById("line_1"));
                this.line_1.setOption({
                    legend: {
                        orient: "horizontal",
                        x: "0%",
                        y: "0%",
                        data: ["接种量", "库存量"],
                        textStyle: {
                            fontSize: 16,
                        },
                    },
                    grid: {
                        top: "30%",
                        left: "3%",
                        right: "8%",
                        bottom: "3%",
                        containLabel: true,
                    },
                    tooltip: {
                        trigger: "axis",
                    },
                    xAxis: {
                        type: "category",
                        axisLine: {
                            lineStyle: {
                                color: "#333",
                                fontSize: 14,
                            },
                        },
                        boundaryGap: false,
                        data: ["05.21", "05.22", "05.23", "05.24", "05.25", "05.26", "05.27"],
                    },
                    yAxis: {
                        type: "value",
                        show: true, // 是否显示
                        name: "单位(万剂)", // 轴名称
                        nameTextStyle: {
                            // 坐标轴名称样式
                            color: "#666",
                            padding: [5, 0, 0, 5], // 坐标轴名称相对位置
                            fontSize: 14,
                        }
                    },
                    series: [
                        {
                            name: "接种量",
                            data: [0, 0, 0, 0, 0, 0, 0],
                            type: "line",
                        },
                        {
                            name: "库存量",
                            data: [0, 0, 0, 0, 0, 0, 0],
                            type: "line",
                        },
                    ],
                    color: ["#3DCBCD", "#7FD5AB"],
                });
            },
            init_bar_1() {
                this.bar_1 = this.$echarts.init(document.getElementById("bar_1"));
                this.bar_1.setOption({
                    legend: {
                        orient: "horizontal",
                        x: "left",
                        y: "top",
                        data: ["供应数", "接种数"],
                    },
                    tooltip: {
                        show: true, // 是否显示提示框，默认为true
                        trigger: "item", // 数据项图形触发
                        axisPointer: {
                            // 指示样式
                            type: "shadow",
                            axis: "auto",
                        },
                        padding: 5,
                        textStyle: {
                            // 提示框内容的样式
                            color: "#666",
                        },
                    },
                    // ---- gird区域 ---
                    //  ------  X轴 ------
                    xAxis: {
                        type: "category",
                        axisLine: {
                            lineStyle: {
                                color: "#666",
                            },
                        },
                        axisLabel: {
                            rotate: 30,
                            interval: 0
                        },
                        show: true, // 是否显示
                        data: [
                            "莲都",
                            "龙泉",
                            "青田",
                            "云和",
                            "庆元",
                            "缙云",
                            "遂昌",
                            "松阳",
                            "景宁",
                            "开发区",
                        ],
                    },
                    //   ------   y轴  ----------
                    yAxis: {
                        show: true, // 是否显示
                        name: "单位(万剂)", // 轴名称
                        type: "value", // 轴类型，默认为 ‘category’
                        nameTextStyle: {
                            // 坐标轴名称样式
                            color: "#666",
                            padding: [5, 0, 0, 5], // 坐标轴名称相对位置
                            fontSize: 14,
                        },
                    },
                    //  -------   内容数据 -------
                    series: [
                        {
                            name: "供应数", // 序列名称
                            type: "bar", // 类型
                            legendHoverLink: true, // 是否启用图列 hover 时的联动高亮
                            itemStyle: {
                                // 图形的形状
                                color: "#48A1FF",
                            },
                            barWidth: 12, // 柱形的宽度
                            barCategoryGap: "10%", // 柱形的间距
                            data: [100, 78, 90, 85, 93, 86, 98, 95, 80, 78],
                        },
                        {
                            name: "接种数", // 序列名称
                            type: "bar", // 类型
                            legendHoverLink: true, // 是否启用图列 hover 时的联动高亮
                            itemStyle: {
                                // 图形的形状
                                color: "#83D7AE",
                            },
                            barWidth: 12, // 柱形的宽度
                            barCategoryGap: "10%", // 柱形的间距
                            data: [100, 78, 90, 85, 93, 86, 98, 95, 80, 78],
                        },
                    ],
                });
            },
            init_bar_2() {
                this.bar_2 = this.$echarts.init(document.getElementById("bar_2"));
                this.bar_2.setOption({
                    tooltip: {
                        show: true, // 是否显示提示框，默认为true
                        trigger: "item", // 数据项图形触发
                        axisPointer: {
                            // 指示样式
                            type: "shadow",
                            axis: "auto",
                        },
                        padding: 5,
                        textStyle: {
                            // 提示框内容的样式
                            color: "#666",
                        },
                    },
                    // ---- gird区域 ---
                    //  ------  X轴 ------
                    xAxis: {
                        type: "category",
                        axisLine: {
                            lineStyle: {
                                color: "#666",
                            },
                        },
                        axisLabel: {
                            rotate: 30,
                            interval: 0,
                        },
                        show: true, // 是否显示
                        data: [
                            "莲都",
                            "龙泉",
                            "青田",
                            "云和",
                            "庆元",
                            "缙云",
                            "遂昌",
                            "松阳",
                            "景宁",
                            "开发区",
                        ],
                    },
                    //   ------   y轴  ----------
                    yAxis: {
                        show: true, // 是否显示
                        name: "单位(万剂)", // 轴名称
                        type: "value", // 轴类型，默认为 ‘category’
                        nameTextStyle: {
                            // 坐标轴名称样式
                            color: "#666",
                            padding: [5, 0, 0, 5], // 坐标轴名称相对位置
                            fontSize: 14,
                        },
                    },
                    //  -------   内容数据 -------
                    series: [
                        {
                            name: "库存量", // 序列名称
                            type: "bar", // 类型
                            legendHoverLink: true, // 是否启用图列 hover 时的联动高亮
                            itemStyle: {
                                // 图形的形状
                                color: "#48A1FF",
                            },
                            barWidth: 15, // 柱形的宽度
                            barCategoryGap: "10%", // 柱形的间距
                            data: [100, 78, 90, 85, 93, 86, 98, 95, 80, 78],
                        },
                    ],
                });
            },
        },
    };
</script>

<style lang='scss' scoped>
  .epidemic {
    // background: #666;
    // width: 1300px;
    width: calc(100% - 40px);
    margin: 0px auto;
    padding: 20px
  }

  .module-tit {
    font-size: 20px;
    padding: 16px 0 12px 12px;
    font-weight: 600;
    position: relative;
  }

  .module-tit::before {
    content: "";
    position: absolute;
    left: 0px;
    top: 16px;
    width: 4px;
    height: 28px;
    background-color: #1492ff;
  }

  .unify-item {
    box-sizing: border-box;
    padding: 0 20px 12px;
    background-color: #fff;
    border-radius: 4px;
    margin-bottom: 20px;
  }

  .shadow {
    box-shadow: 0 2px 12px 0 #ccc;
  }

  h3 {
    border-bottom: 1px solid #ddd;
  }

  button {
    padding: 0 12px;
    height: 30px;
    line-height: 30px;
    background-color: #1492ff;
    border-radius: 2px;
    border: 0;
    color: #fff;
    font-size: 16px;
  }

  input {
    height: 28px;
    outline: none;
    border: 0;
    border: 1px solid #ccc;
    border-radius: 2px;
    margin-left: 5px;
    font-size: 16px;
    padding: 0 8px;
  }

  .ep-name {
    font-size: 18px;
    color: #1492ff;
    margin: 8px 0;
    text-align: center;
  }

  .e-pro {
    position: relative;

    .e-pro-text {
      position: absolute;
      top: 50%;
      left: 50%;
      transform: translate(-50%, -50%);
      text-align: center;
      white-space: nowrap;
    }
  }

  .epidemic-tabs {
    margin-bottom: 20px;

    .et-con {
      width: 66.667%;
      margin: 0 auto;
      display: flex;
      justify-content: space-between;

      li {
        width: 20%;
        color: #1492ff;
        background-color: #fff;
        white-space: nowrap;
        overflow: hidden;
        text-overflow: ellipsis;
        text-align: center;
        height: 48px;
        line-height: 48px;
        font-size: 20px;
        border-radius: 2px;
        cursor: pointer;
      }

      .et-disabled {
        color: #999;
      }

      .active {
        color: #fff;
        background-color: #02a7f0;
      }
    }
  }

  .general-situation {
    .gs-top {
      display: flex;
      align-items: center;
      justify-content: center;
      color: #1492ff;
      margin: 8px 0;

      p {
        margin: 0 8px;
        font-size: 18px;
      }

      .hr1 {
        width: 59px;
        height: 2px;
        background: -webkit-gradient(
            linear,
            right top,
            left top,
            from(#4192f6),
            to(#fff)
        );
        background: linear-gradient(270deg, #4192f6, #fff);
      }

      .hr2 {
        width: 59px;
        height: 2px;
        background: -webkit-gradient(
            linear,
            left top,
            right top,
            from(#4192f6),
            to(#fff)
        );
        background: linear-gradient(90deg, #4192f6, #fff);
      }
    }

    .gs-con {
      display: flex;
      align-items: center;
      margin: 20px 0;
      flex-wrap: wrap;

      .gs-con-item {
        text-align: center;
        background-color: #f6f7f8;
        height: 210px;
        display: flex;
        flex-direction: column;
        justify-content: center;
        font-size: 18px;
        box-sizing: border-box;
        padding: 0 4px;

        div {
          margin: 8px 0;
        }

        span {
          color: #1492ff;
        }
      }
    }
  }

  .vaccination-progress {
    .vp-con {
      display: flex;
      justify-content: space-between;
      align-items: center;

      .vp-text {
        width: 50%;
      }
    }
  }

  .daily-news {
    .dn-con {
      display: flex;
      justify-content: space-between;
      align-items: center;

      .dn-text {
        width: 30%;
        font-size: 18px;
      }
    }
  }

  .key-groups {
    .kg-con {
      margin: 40px 0;
      color: #333;

      > div {
        text-align: center;

        p {
          margin: 30px 0;
          height: 56px;
        }
      }

      > > > .el-progress-circle {
        width: 100px !important;
        height: 100px !important;
        margin:0 auto !important;
      }
    }
  }

  .el-progress-circle {
    width: 100px !important;
    height: 100px !important;
    margin:0 auto !important;
  }

  .vaccine-traceability {
    h4 {
      font-weight: normal;
      font-size: 18px;
    }

    .vt-con {
      .vt-top {
        margin: 12px 0 0;
      }

      .vt-ipt {
        display: flex;
        align-items: center;
        margin-bottom: 12px;

        input {
          width: 50%;
        }
      }

      .vt-info-table {
        > > > .el-table {
          min-height: 300px;
          border: 1px solid #ddd;
        }

        > > > .is-leaf {
          background-color: #1492ff;
          color: #fff;
          border-right: 1px solid #fff;
        }
      }

      .vaccinator-info {
        margin: 12px 0;
        border-bottom: 1px solid #ddd;

        .vaccinator-info-con {
          padding: 12px;
          color: #333;
          overflow: hidden;

          p {
            margin: 5px 0;
          }
        }
      }
    }
  }

  .cold-chain-tracing {
    h4 {
      font-weight: normal;
      font-size: 18px;
      padding: 12px 0;
    }

    > > > .el-table__header tr,
    > > > .el-table__header th {
      padding: 0;
      height: 40px;
    }

    > > > .is-leaf {
      background-color: #1492ff;
      color: #fff;
    }

    .monitoring {
      .monitoring-first {
        .mf-text {
          display: flex;
          justify-content: space-between;
          padding: 0 20px 0 12px;
          margin: 8px 0;
        }
      }
    }
  }

  .result {
    .re-search {
      display: flex;
      align-items: center;
      margin: 12px 0 20px;

      input {
        margin: 0 8px;
      }
    }

    .re-step {
      .step-title {
        color: #1492ff;
        padding: 8px 0;
        border-bottom: 1px dashed #1492ff;

        i {
          font-size: 18px;
        }

        span {
          padding: 0 5px;
          border: 1px solid #1492ff;
          line-height: 18px;
          border-radius: 10px;
        }
      }

      .step-desc {
        margin: 20px 0;
        color: #333;
        padding: 0 12px;

        p {
          margin: 8px 0;
        }
      }
    }
  }
</style>
