效果图如图所示 ：

点击地图省切换到市区地图，点击地图市切换到区/县地图。相应的顶部下拉列表也会随之改变，下拉列表选择地图也会随之改变。

<template>
  <div class="map-container">
    <div class="map"></div>
    <div id="mapChart" ref="mapChart" :style="{height:height,width:width}"></div>
    <div class="count" v-if="isShow">
      <div class="title">数量统计</div>
      <div class="main">
        <div class="box">
          <img src="../assets/images/map_hos.png" alt>
          <span class="org_name">医疗机构</span>
          <span class="num">{{count}}家</span>
        </div>
      </div>
    </div>
  </div>
</template>
<script>
import echarts from "echarts";

import amap from "@/api/amap.js";
// import "echarts/map/js/china"; // 引入中国地图数据
export default {
  name: "mapChart",
  components: {},
  props: {
    markData: {
      type: [Object, Array],
      default: () => {}
    },
    queryParams: {
      type: [Object, Array],
      default: () => {}
    },
    width: {
      type: String,
      default: "100%"
    },
    height: {
      type: String,
      default: "100%"
    },
    isShow: {
      type: Boolean,
      default: true
    },
    count: {
      type: Number,
      default: 0
    }
  },

  data() {
    return {
      chart: null,
      cityName: "中国",
      areaCode: 10000,
      geoJsonData: "",
      echartsMap: null,
      map: null,
      district: null,
      // count: 0,
      opts: {},
      areaData: {},
      mapData: [],
      codeList: []
      // markData: {}
    };
  },
  mounted() {
    // 自适应
    window.addEventListener("resize", () => {
      if (this.chart) this.chart.resize();
    });
  },
  watch: {
    markData(val) {
      if (val) {
        this.$nextTick(function() {
          this.initChart(100000);
        });
      }
    }
  },
  methods: {
    initChart(adcode, region) {
      this.chart = echarts.init(this.$refs.mapChart);
      this.chart.on("click", this.chartClick);
      this.opts = {
        subdistrict: 1, //返回下一级行政区
        showbiz: false //最后一级返回街道信息
      };
      this.district = new AMap.DistrictSearch(this.opts); //注意：需要使用插件同步下发功能才能这样直接使用
      this.district.search(adcode, (status, result) => {
        if (status == "complete") {
          this.getData(
            result.districtList[0],
            result.districtList[0].level,
            result.districtList[0].adcode,
            false,
            region
          );
        }
      });
    },

    getData(data, level, adcode, click, region) {
      //重庆分为城区和郊区  需要合并数据
      if (data.adcode == "500100") {
        this.district.search("500200", (status, result) => {
          if (status === "complete") {
            subList = subList.concat(result.districtList[0].districtList);
            this.mapData = [];
            for (var i = 0, l = subList.length; i < l; i++) {
              var name = subList[i].name;
              var cityCode = subList[i].adcode;
              this.mapData.push({
                name: name,
                cityCode: cityCode,
                level: curlevel
              });
            }

            this.loadMapData(adcode, "", level);
            return;
          }
        });
      }
      var subList = data.districtList;
      if (subList) {
        var curlevel = subList[0].level;
        if (curlevel === "street") {
          if (region) {
            this.loadMapData(adcode, region, level);
          } else {
            let mapJsonList = this.geoJsonData.features;
            let mapJson = {};
            for (let i in mapJsonList) {
              if (mapJsonList[i].properties.name == this.cityName) {
                mapJson.features = [].concat(mapJsonList[i]);
              }
            }
            this.mapData = [];
            this.mapData.push({
              name: this.cityName,
              cityCode: adcode,
              level: curlevel
            });
            this.loadMap(this.cityName, mapJson, level);
          }

          // 改变下拉框
          if (click) {
            //区分是点击事件才执行，不然会与下拉框选择事件一起触发
            let params = {
              level: level,
              adcode: adcode
            };
            this.$emit("clickMap", params);
          }
          return;
        }
        this.mapData = [];
        for (var i = 0, l = subList.length; i < l; i++) {
          var name = subList[i].name;
          var cityCode = subList[i].adcode;
          this.mapData.push({
            name: name,
            cityCode: cityCode,
            level: curlevel
          });
        }

        this.loadMapData(adcode, "", level);
        // 改变下拉框
        if (click) {
          let params = {
            level: level,
            adcode: adcode
          };
          this.$emit("clickMap", params);
        }
      }
    },
    loadMapData(areaCode, region, level) {
      AMapUI.loadUI(["geo/DistrictExplorer"], DistrictExplorer => {
        //创建一个实例
        var districtExplorer = (window.districtExplorer = new DistrictExplorer({
          eventSupport: true, //打开事件支持
          map: this.map
        }));
        //  行政区划浏览的直辖市等级为北京市=》朝阳区，并不是北京市=》北京城区=》朝阳区 所以需要转化
        if (areaCode == "110100") {
          areaCode = "110000";
        } else if (areaCode == "120100") {
          areaCode = "120000";
        } else if (areaCode == "500100" || areaCode == "500200") {
          areaCode = "500000";
        } else if (areaCode == "310100") {
          areaCode = "310000";
        }
        districtExplorer.loadAreaNode(areaCode, (error, areaNode) => {
  
          if (error) {
            console.log("报错啦");

            return;
          }
          if (areaNode) {
            // 次级页面直接显示区县 需要单独处理;
            if (region) {
              let mapJson = {
                features: []
              };
              mapJson.features[0] = areaNode.getParentFeature();
              this.loadMap(mapJson.features[0].properties.name, mapJson, level);
              this.geoJsonData = mapJson;
            } else {
              let mapJson = {};
              mapJson.features = areaNode.getSubFeatures();
              this.loadMap(this.cityName, mapJson, level);
              this.geoJsonData = mapJson;
            }
          }
        });
      });
    },
    loadMap(mapName, data, level) {
 
      let labelShow = level == "country" ? false : true;
      if (data) {
        this.$echarts.registerMap(mapName, data);
        var option = {
          tooltip: {
            show: true,
            trigger: "item",
            showContent: true,
            alwaysShowContent: true,
            formatter: "{b}"
          },
          series: [
            {
              name: "数据名称",
              type: "map",
              top: "14%",
              // aspectScale:1,
              zoom: 1.2, //缩放
              roam: false, //是否开启鼠标缩放和平移漫游
              mapType: mapName,
              // selectedMode: "single",
              // showLegendSymbol: false,
              visibility: "off",
              itemStyle: {
                normal: {
                  color: "#ccc",
                  areaColor: "#18225D",
                  borderColor: "#0D2BA4",
                  borderWidth: 1,
                  label: {
                    show: labelShow,
                    textStyle: {
                      color: "rgb(249, 249, 249)"
                    }
                  }
                },
                emphasis: {
                  areaColor: false,
                  borderColor: "#fff",
                  areaStyle: {
                    color: "#fff"
                  },
                  label: {
                    show: true,
                    textStyle: {
                      color: "#fff"
                    }
                  }
                }
              },
              data: this.mapData,
              //标记
              markPoint: {
                symbolSize: [29, 34],
                symbol:
                  "image://data:image/png;base64,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",
                data: this.markData
              }
            }
          ]
        };
        this.chart.setOption(option);
      }
    },
    //地图点击事件
    chartClick(params) {

      let that = this;
      // console.log(this.$route.path);
      if (this.$route.path == "/region") return;
      // 点击标注区域进入下一个页面，否则进入地图下钻
      if (params.componentType == "markPoint") {
        that.$router.push({
          path: "/region",
          query: {
            organ_id: params.data.organ_id,
            province_id: params.data.province_id,
            city_id: params.data.city_id,
            district_id: params.data.district_id,
            adcode: params.data.adcode
          }
        });
      } else {
        if (params.data.level == "street") return;
        this.cityName = params.data.name;
        this.cityCode = params.data.cityCode;
        this.district.setLevel(params.data.level); //行政区级别
        this.district.setExtensions("all");
        //行政区查询，按照adcode进行查询可以保证数据返回的唯一性
        this.district.search(this.cityCode, (status, result) => {
          if (status === "complete") {
            let adcode = result.districtList[0].districtList[0].adcode;
            //如果是直辖市（北京、天津、重庆、上海）还需要再检索一边 市=》城区=》区  与常规省=》市=》区 格式一致
            if (
              adcode == "110100" ||
              adcode == "500100" ||
              adcode == "500200" ||
              adcode == "120100" ||
              adcode == "310100"
            ) {
              this.district.search(adcode, (status, result) => {
                if (status === "complete") {
                  this.getData(
                    result.districtList[0],
                    params.data.level,
                    this.cityCode,
                    "click"
                  );
                }
              });
            } else {
              this.getData(
                result.districtList[0],
                params.data.level,
                this.cityCode,
                "click"
              );
            }
          }
        });
      }
    },
    // 下拉选择框change
    bindSelect(adcode) {
      this.district.search(adcode, (status, result) => {
        if (status === "complete") {
          this.cityName = result.districtList[0].name;
          this.cityCode = result.districtList[0].adcode;
          this.district.setLevel(result.districtList[0].level);
          this.district.setExtensions("all");
          let adcode2 = result.districtList[0].districtList[0].adcode;
          //如果是直辖市（北京、天津、重庆、上海）还需要再检索一边 市=》城区=》区  与常规省=》市=》区 格式一致
          if (
            adcode2 == "110100" ||
            adcode2 == "500100" ||
            adcode2 == "120100" ||
            adcode2 == "310100"
          ) {
            this.district.search(adcode2, (status2, result2) => {
              if (status === "complete") {
                this.getData(
                  result2.districtList[0],
                  result2.districtList[0].level,
                  result2.districtList[0].adcode
                );
              }
            });
          } else {
            this.getData(
              result.districtList[0],
              result.districtList[0].level,
              result.districtList[0].adcode
            );
          }
        }
      });
    }
  }
};
</script>

<style lang="scss">
.map-container {
  background: #051235;
  width: 100%;
  height: 100%;
  position: relative;
  background: url("../assets/images/map_bg.png") no-repeat center;
  background-size: 100% 100%;
  .count {
    width: 222px;
    height: 128px;
    border-radius: 7px;
    border: 1px solid #1762f2;
    position: absolute;
    color: #fff;
    bottom: 2%;
    left: 2%;
    .title {
      font-size: 17px;
      height: 29px;
      line-height: 29px;
      background: #003294;
      line-height: 29px;
      text-align: center;
    }
    .main {
      height: 79px;
      padding-top: 10px;

      // border-top: none;
      font-size: 14px;

      img {
        width: 24px;
        height: 28px;
        float: left;
        vertical-align: middle;
        margin: 0 10px;
      }
      .org_name {
        float: left;
        height: 28px;
        line-height: 28px;
      }
      .num {
        float: right;
        line-height: 28px;
        margin-right: 10px;
      }
    }
  }
}
</style>

<template>
  <div class="index-container">
    <!-- @selectRegion="selectRegion" -->
    <navigate :queryParams="queryParams" @adcode="adcode" ref="navigate"></navigate>
    <div class="header">
      <div class="header-left">
        <screen-ts-curve :data="screenTSCurveData" ref="screenTSCurve" @checkType="checkType"></screen-ts-curve>
        <screen-ts-status :data="screenTSStatusData"></screen-ts-status>
      </div>
      <div class="header-center">
        <map-chart
          ref="mapchart"
          :queryParams="queryParams"
          @clickMap="clickMap"
          :markData="markData"
          :count="count"
        ></map-chart>
        <!-- <button @click="checkOrgan">点击进入次页</button> -->
      </div>
      <div class="header-right">
        <screen-ts-type-count
          :data="screenTSTypeCountData"
          ref="screenTSTypeCount"
          @checkType2="checkType2"
        ></screen-ts-type-count>
      </div>
    </div>
    <div class="footer">
      <screen-ts-alarm :data="screenTSAlarmData"></screen-ts-alarm>
      <screen-ts-info :data="screenTsInfoData" @checkType3="checkType3" ref="screenTSInfo"></screen-ts-info>
      <screen-ts-flowto :data="screenTSFlowtoData" @checkType4="checkType4" ref="screenTSFlowto"></screen-ts-flowto>
    </div>
  </div>
</template>

<script>
// import { validUsername, validPassword } from "@/utils/validate";
import {
  screenTSCurve,
  screenTSStatus,
  screenTSTypeCount,
  screenTSAlarm,
  screenTSInfo,
  screenTSFlowto
} from "@/api/index";
// import router from "../../router";
import navigate from "@/components/navigate";
import screenTsCurve from "@/components/screenTsCurve";
import screenTsStatus from "@/components/screenTsStatus";
import screenTsTypeCount from "@/components/screenTsTypeCount";
import screenTsAlarm from "@/components/screenTsAlarm";
import screenTsInfo from "@/components/screenTsInfo";
import screenTsFlowto from "@/components/screenTsFlowto";
import mapChart from "@/components/mapChart";
import { screenTSHospital } from "@/api/index";
import Axios from "axios";
import { clearInterval } from "timers";

export default {
  name: "index",
  components: {
    navigate,
    screenTsCurve,
    screenTsStatus,
    screenTsTypeCount,
    screenTsAlarm,
    screenTsInfo,
    screenTsFlowto,
    mapChart
  },
  data() {
    return {
      queryParams: {
        province_id: 0,
        city_id: 0,
        district_id: 0,
        organ_id: 0,
        date: 1
      },
      markData: {},
      count: 0,
      timer: null,
      clickMapData: {},
      // 医废走势统计
      screenTSCurveData: [],
      // 医废状态统计
      screenTSStatusData: [],
      // 医废类型产出统计
      screenTSTypeCountData: [],
      // 报警信息
      screenTSAlarmData: [],
      // 医废信息统计
      screenTsInfoData: [],
      screenTSFlowtoData: []
    };
  },

  mounted() {
    let that = this;
    console.log("asd");
    // 报警信息
    if (that.timer) {
      window.clearInterval(that.timer);
    } else {
      that.timer = function() {
        that.getAllData();
        return that.timer;
      };
      setInterval(that.timer(), 10000);
    }
  },
  beforeDestroy() {
    let that = this;
    console.log(that.timer);
    if (that.timer) {
      window.clearInterval(that.timer);
      that.timer = null;
    }
    console.log(that.timer);
  },
  methods: {
    // 获取所有数据

    getAllData() {
      if (this.$route.path == "/") {
        console.log("首页的getdata");
        Axios.all([
          this.screenTSCurve(),
          this.screenTsStatus(),
          this.screenTSTypeCount(),
          this.screenTSInfo(),
          this.screenTSFlowto(),
          this.screenTSHospital(),
          this.screenTSAlarm()
        ])
          .then()
          .catch();
      }
    },
    // 医废走势统计
    screenTSCurve() {
      let params = {
        organ_id: this.queryParams.organ_id,
        date: this.queryParams.date
      };
      screenTSCurve(params)
        .then(response => {
          this.screenTSCurveData = response.data;
        })
        .catch(() => {});
    },
    // 医废状态统计
    screenTsStatus() {
      let params = {
        organ_id: this.queryParams.organ_id
        // date: this.queryParams.date
      };
      screenTSStatus(params)
        .then(response => {
          this.screenTSStatusData = response.data;
        })
        .catch(() => {});
    },
    // 医废类型产出统计
    screenTSTypeCount() {
      let params = {
        organ_id: this.queryParams.organ_id,
        date: this.queryParams.date
      };
      screenTSTypeCount(params)
        .then(response => {
          this.screenTSTypeCountData = response.data;
        })
        .catch(() => {});
    },
    // 报警信息
    screenTSAlarm() {
      let params = {
        organ_id: this.queryParams.organ_id,
        page: 1,
        page_limit: 20
      };
      screenTSAlarm(params)
        .then(response => {
          this.screenTSAlarmData = response.data;
        })
        .catch(() => {});
    },
    // 医废信息
    screenTSInfo() {
      let params = {
        date: this.queryParams.date,
        page: 1,
        page_limit: 20
      };
      screenTSInfo(params)
        .then(response => {
          this.screenTsInfoData = response;
          // this.$nextTick(function() {
          //   this.$refs.screenTSInfo.initChart();
          // });
        })
        .catch(() => {});
    },
    screenTSFlowto() {
      let params = {
        date: this.queryParams.date,
        page: 1,
        page_limit: 20
      };
      screenTSFlowto(params)
        .then(response => {
          this.screenTSFlowtoData = response;
          // this.$nextTick(function() {
          //   this.$refs.screenTSFlowto.initChart();
          // });
        })
        .catch(() => {});
    },
    screenTSHospital(adcode, region) {
      screenTSHospital()
        .then(response => {
          this.count = response.count;
          this.markData = response.data;
        })
        .catch(() => {});
    },
    checkType(index) {
      this.queryParams.date = index;
      this.screenTSCurve();
    },
    checkType2(index) {
      this.queryParams.date = index;
      this.screenTSTypeCount();
    },
    checkType3(index) {
      this.queryParams.date = index;
      this.screenTSInfo();
    },
    checkType4(index) {
      this.queryParams.date = index;
      this.screenTSFlowto();
    },
    checkOrgan() {
      this.$router.push({
        path: "/region",
        query: {
          province_id: this.queryParams.province_id,
          city_id: this.queryParams.city_id,
          district_id: this.queryParams.district_id,
          organ_id: this.queryParams.organ_id
        }
      });
    },
    adcode(adcode) {
      this.$refs.mapchart.bindSelect(adcode);
    },
    clickMap(data) {
      let level = data.level,
        adcode = Number(data.adcode);
      // console.log(level);
      // console.log(data);
      switch (level) {
        case "province":
          let proList = this.$refs.navigate.proList;
          proList.forEach(item => {
            if (adcode == item.adcode) {
              this.queryParams.province_id = item.id;
              this.$refs.navigate.getCity(this.queryParams.province_id);
            }
          });
          break;
        case "city":
          let cityList = this.$refs.navigate.cityList;
          cityList.forEach(item => {
            if (adcode == item.adcode) {
              this.queryParams.city_id = item.id;
              this.$refs.navigate.getdistrict(this.queryParams.city_id);
            }
          });
          break;
        case "district":
          let districtList = this.$refs.navigate.districtList;
          adcode = adcode + "";
          // 重庆分为市辖区和郊县
          if (adcode.substr(0, 3) == "500") {
            this.$refs.navigate.getCity(this.queryParams.province_id);
            this.$refs.navigate.getdistrict(this.queryParams.city_id);
          }
          districtList.forEach(item => {
            if (adcode == item.adcode) {
              this.queryParams.district_id = item.id;
              this.$refs.navigate.getHos(this.queryParams.district_id);
            }
          });
          break;
        default:
          break;
      }
    }
  }
};
</script>

<style lang="scss">
.index-container {
  width: 100%;
  height: 100%;
  .header {
    display: flex;
    justify-content: space-between;
    .header-left,
    .header-right,
    .header-center {
      width: 33%;
      // float: left;
      height: 580px;
    }
    .header-right {
      background: #051235;
    }
  }
  .footer {
    margin-top: 24px;
    width: 100%;
    height: 37%;
    display: flex;
    justify-content: space-between;
    // overflow: hidden;
  }
}
</style>

<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="utf-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width,initial-scale=1.0">
  <link rel="icon" href="<%= BASE_URL %>favicon.ico">
  <title>yifei_screen</title>
</head>

<body>
  <noscript>
    <strong>We're sorry but yifei_screen doesn't work properly without JavaScript enabled. Please enable it to
      continue.</strong>
  </noscript>
  <div id="app"></div>
  <!-- built files will be auto injected -->
  <script type="text/javascript"
    src='https://webapi.amap.com/maps?v=1.4.11&key=7921c2a7353c144ccc2353bf90dae096'></script>
  <script type="text/javascript"
    src="https://webapi.amap.com/maps?v=1.4.11&key=7921c2a7353c144ccc2353bf90dae096&plugin=AMap.DistrictSearch"></script>
  <!-- UI组件库 1.0 -->
  <script src="https://webapi.amap.com/ui/1.0/main.js?v=1.0.11">

//此处注意引入amap ui 前面要加https

  </script>
</body>

</html>

<template>
  <div class="index-container">
    <navigate
      :queryParams="queryParams"
      @selectRegion="selectRegion"
      :backShow="true"
      :isDiabled="true"
      ref="navigate"
    ></navigate>
    <div class="header">
      <div class="header-left">
        <screen-ts-curve :data="screenTSCurveData" ref="screenTSCurve" @checkType="checkType"></screen-ts-curve>
        <screen-ts-status :data="screenTSStatusData"></screen-ts-status>
      </div>
      <div class="header-center">
        <map-chart
          ref="mapchart"
          :queryParams="queryParams"
          :cityCode="queryParams.adcode"
          :isShow="false"
        ></map-chart>
        <!-- <button @click="checkOrgan">点击进入次页</button> -->
        <!-- :labelShow="labelShow" -->
      </div>
      <div class="header-right">
        <screen-ts-type-count
          :data="screenTSTypeCountData"
          ref="screenTSTypeCount"
          @checkType2="checkType2"
        ></screen-ts-type-count>
      </div>
    </div>
    <div class="footer">
      <screen-ts-alarm :data="screenTSAlarmData"></screen-ts-alarm>
      <screen-info-two :data="screenTsInfoTwoData" @checkType5="checkType5"></screen-info-two>
      <screen-ts-flowto-two :data="screenTSFlowtoTwoData" @checkType6="checkType6"></screen-ts-flowto-two>
    </div>
  </div>
</template>

<script>
// import { validUsername, validPassword } from "@/utils/validate";
import {
  screenTSCurve,
  screenTSStatus,
  screenTSTypeCount,
  screenTSAlarm,
  screenTsInfoTwo,
  // screenTSFlowto,
  screenTSFlowtoTwo
} from "@/api/index";
// import router from "../../router";
import navigate from "@/components/navigate";
import screenTsCurve from "@/components/screenTsCurve";
import screenTsStatus from "@/components/screenTsStatus";
import screenTsTypeCount from "@/components/screenTsTypeCount";
import screenTsAlarm from "@/components/screenTsAlarm";
import screenInfoTwo from "@/components/screenTsInfoTwo";
// import screenTsFlowto from "@/components/screenTsFlowto";
import screenTsFlowtoTwo from "@/components/screenTsFlowtoTwo";
import mapChart from "@/components/mapChart";
import Axios from "axios";

export default {
  name: "index",
  components: {
    navigate,
    screenTsCurve,
    screenTsStatus,
    screenTsTypeCount,
    screenTsAlarm,
    screenInfoTwo,
    screenTsFlowtoTwo,
    mapChart
  },
  data() {
    return {
      queryParams: {
        province_id: Number(this.$route.query.province_id),
        city_id: Number(this.$route.query.city_id),
        district_id: Number(this.$route.query.district_id),
        organ_id: Number(this.$route.query.organ_id),
        date: 1,
        adcode: this.$route.query.adcode
      },
      labelShow: true,
      timer: null,
      // 医废走势统计
      screenTSCurveData: {},
      // 医废状态统计
      screenTSStatusData: {},
      // 医废类型产出统计
      screenTSTypeCountData: {},
      // 报警信息
      screenTSAlarmData: {},
      // 医废信息统计
      screenTsInfoTwoData: {},
      screenTSFlowtoTwoData: {}
    };
  },
  mounted() {
    this.getNavigate();
    let that = this;
    // 报警信息
    if (that.timer) {
      window.clearInterval(that.timer);
    } else {
      that.timer = function() {
        that.getAllData();
        return that.timer;
      };
      setInterval(that.timer(), 10000);
    }
  },
  beforeDestroy() {
    // console.log('ciye')
    let that = this;
    if (that.timer) {
      window.clearInterval(that.timer);
      that.timer = null;
    }
  },
  methods: {
    // 获取所有数据

    getAllData() {
      // console.log("次页的getdata");
      if (this.$route.path == "/region") {
        Axios.all([
          this.screenTSCurve(),
          this.screenTsStatus(),
          this.screenTSTypeCount(),
          this.screenTsInfoTwo(),
          this.screenTSFlowtoTwo(),

          this.screenTSHospital(),
          this.screenTSAlarm()
        ])
          .then()
          .catch();
      }
    },
    getNavigate() {
      this.$refs.navigate.getCity(this.queryParams.province_id);
      this.$refs.navigate.getdistrict(this.queryParams.city_id);
    },
    // 医废走势统计
    screenTSCurve() {
      let params = {
        organ_id: this.queryParams.organ_id,
        date: this.queryParams.date
      };
      screenTSCurve(params)
        .then(response => {
          this.screenTSCurveData = response.data;
        })
        .catch(() => {});
    },
    // 医废状态统计
    screenTsStatus() {
      let params = {
        organ_id: this.queryParams.organ_id
      };
      screenTSStatus(params)
        .then(response => {
          this.screenTSStatusData = response.data;
        })
        .catch(() => {});
    },
    // 医废类型产出统计
    screenTSTypeCount() {
      let params = {
        organ_id: this.queryParams.organ_id,
        date: this.queryParams.date
      };
      screenTSTypeCount(params)
        .then(response => {
          this.screenTSTypeCountData = response.data;
        })
        .catch(() => {});
    },
    // 报警信息
    screenTSAlarm() {
      let params = {
        organ_id: this.queryParams.organ_id,
        page: 1,
        page_limit: 20
      };
      screenTSAlarm(params)
        .then(response => {
          this.screenTSAlarmData = response.data;
        })
        .catch(() => {});
    },
    // 医废信息
    screenTsInfoTwo() {
      let params = {
        date: this.queryParams.date,
        organ_id: this.queryParams.organ_id
      };
      screenTsInfoTwo(params)
        .then(response => {
          this.screenTsInfoTwoData = response.data;
        })
        .catch(() => {});
    },
    screenTSFlowtoTwo() {
      let params = {
        date: this.queryParams.date,
        organ_id: this.queryParams.organ_id
      };
      screenTSFlowtoTwo(params)
        .then(response => {
          this.screenTSFlowtoTwoData = response.data;
        })
        .catch(() => {});
    },
    checkType(index) {
      this.queryParams.date = index;
      this.screenTSCurve();
    },
    checkType2(index) {
      this.queryParams.date = index;
      this.screenTSTypeCount();
    },
    checkType5(index) {
      this.queryParams.date = index;
      this.screenTsInfoTwo();
    },
    checkType6(index) {
      this.queryParams.date = index;
      this.screenTSFlowtoTwo();
    },
    selectRegion() {
      this.getAllData();
    },
    screenTSHospital() {
      this.$refs.mapchart.initChart(this.queryParams.adcode, "region");
    }
  }
};
</script>

<style lang="scss">
.index-container {
  .el-input.is-disabled .el-input__inner {
    background: none;
    color: #fff;
  }
  width: 100%;
  height: 100%;
  .header {
    display: flex;
    justify-content: space-between;
    .header-left,
    .header-right,
    .header-center {
      width: 33%;
      // float: left;
      height: 580px;
    }
    .header-right {
      background: #051235;
    }
  }
  .footer {
    margin-top: 24px;
    width: 100%;
    height: 37%;
    display: flex;
    justify-content: space-between;
    // overflow: hidden;
  }
}
</style>

<template>
  <div class="header">
    <div class="header-container">
      <el-select
        :disabled="isDiabled"
        v-model="queryParams.province_id"
        size="medium"
        style="width:180px;margin-left:156px;"
        @change="selectPro"
      >
        <img src="../assets/images/input_inner.png" slot="prefix" alt />
        <el-option v-for="item in proList" :key="item.id" :label="item.name" :value="item.id"></el-option>
      </el-select>
      <el-select
        :disabled="isDiabled"
        v-model="queryParams.city_id"
        size="medium"
        style="width:180px;margin-left:120px;"
        @change="selectCity"
      >
        <img src="../assets/images/input_inner.png" slot="prefix" alt />
        <el-option v-for="item in cityList" :key="item.id" :label="item.name" :value="item.id"></el-option>
      </el-select>
      <el-select
        :disabled="isDiabled"
        v-model="queryParams.district_id"
        size="medium"
        style="width:180px;margin-left:648px;"
        @change="selectDistricty"
      >
        <img src="../assets/images/input_inner.png" slot="prefix" alt />
        <el-option v-for="item in districtList" :key="item.id" :label="item.name" :value="item.id"></el-option>
      </el-select>
      <el-select
        :disabled="isDiabled"
        v-model="queryParams.organ_id"
        size="medium"
        style="width:180px;margin-left:120px;"
        @change="selectRegion"
      >
        <img src="../assets/images/input_inner.png" slot="prefix" alt />
        <el-option v-for="item in hosList" :key="item.id" :label="item.name" :value="item.id"></el-option>
      </el-select>
      <!-- arrow_down.png -->
      <img src="../assets/images/arrow_down.png" class="arrow" @click="statusShow = true" alt />
      <div class="back" v-if="backShow">
        <img src="../assets/images/back.png" @click="backIndex" style="cursor:pointer" alt />
        <span style="margin-left:10px">返回</span>
      </div>
    </div>

    <div class="logstatus-container" :class="{'show':statusShow}">
      <!-- logo.png -->
      <img src="../assets/images/logo.png" class="logo" alt />
      <h2>威斯盾医废大屏展示系统</h2>
      <div class="logstatus_right">
        管理员账号：
        <span class="phone">{{phone}}</span>
        <span class="logout" @click="logout">退出</span>
        <img src="../assets/images/arrow_up.png" class="arrow" @click="statusShow = false" alt />
      </div>
    </div>
  </div>
</template>

<script>
import { logout } from "@/api/user";
import { getRegion, getHos } from "@/api/index";
import { removeToken, locGetOrg } from "@/utils/auth";
import Axios from "axios";

// removeToken
export default {
  name: "navigate",
  props: {
    backShow: {
      type: Boolean,
      default: false
    },
    isDiabled: {
      type: Boolean,
      default: false
    },
    queryParams: {
      type: Object,
      default: () => {}
    }
    // clickMapData:{}
  },
  data() {
    return {
      // 省列表
      proList: [],
      pList: [{ id: 0, name: "全部省份" }],
      // 市列表
      cityList: [],
      cList: [{ id: 0, name: "全部市" }],
      // 区列表
      districtList: [],
      dList: [{ id: 0, name: "全部区县" }],
      hosList: [],
      hList: [{ id: 0, name: "全部机构" }],
      statusShow: false,
      phone: undefined,
      adcode: 110000
    };
  },

  mounted() {
    Axios.all([this.getPro(), this.getHos()])
      .then({})
      .catch(err => {});
    this.cityList = this.cList;
    this.districtList = this.dList;
    this.hosList = this.hList;
    this.phone = JSON.parse(locGetOrg()).phone;
  },
  methods: {
    backIndex() {
      this.$router.push({
        path: "/"
      });
    },
    logout() {
      this.$confirm("确定要退出吗?", "提示", {
        confirmButtonText: "确定",
        cancelButtonText: "取消",
        type: "warning"
      })
        .then(() => {
          logout(this.loginForm)
            .then(response => {
              removeToken();
              this.$message({
                type: "success",
                message: "退出成功！"
              });

              this.$router.push({ path: "/login" });
              // this.loading = false;
            })
            .catch(() => {
              // this.loading = false;
            });
        })
        .catch(() => {});
    },
    getPro() {
      getRegion()
        .then(response => {
          this.proList = this.pList.concat(response.data);
        })
        .catch(() => {});
    },

    getCity(pid) {
      let params = {
        parent_id: pid
      };
      getRegion(params)
        .then(response => {
          // let list =;
          this.cityList = this.cList.concat(response.data);
        })
        .catch(() => {});
    },
    getdistrict(pid) {
      let params = {
        parent_id: pid
      };
      getRegion(params)
        .then(response => {
          // let list = [{ id: 0, name: "全部区县" }];
          this.districtList = this.dList.concat(response.data);
        })
        .catch(() => {});
    },
    // 选择省
    selectPro(id) {
      this.cityList = this.cList;
      this.districtList = this.dList;
      this.hosList = this.hList;
      this.queryParams.city_id = 0;
      this.queryParams.district_id = 0;
      this.getCity(this.queryParams.province_id);
      this.getAdCode(this.proList, id);
      this.$emit("adcode", this.adcode);
    },
    // 选择市
    selectCity(id) {
      this.districtList = this.dList;
      this.hosList = this.hList;
      this.queryParams.district_id = 0;
      this.getdistrict(this.queryParams.city_id);
      this.getAdCode(this.cityList, id);
      this.$emit("adcode", this.adcode);
    },
    selectDistricty(id) {
      this.hosList = this.hList;
      this.queryParams.organ_id = 0;
      this.getHos();
      this.getAdCode(this.districtList, id);
      this.$emit("adcode", this.adcode);
    },
    selectRegion() {
      // this.$emit("selectRegion", this.queryParams.organ_id);
      // console.log(this.queryParams.organ_id);
      this.hosList.forEach(item => {
        if (item.id == this.queryParams.organ_id) {
          this.$router.push({
            path: "/region",
            query: {
              province_id: item.province_id,
              city_id: item.city_id,
              district_id: item.district_id,
              organ_id: item.id,
              adcode: item.adcode
            }
          });
        }
      });
    },
    getHos() {
      getHos(this.queryParams)
        .then(response => {
          this.hosList = this.hList.concat(response.data);
        })
        .catch(() => {});
    },
    // 获取选择的地址
    getAdCode(list, id) {
      if (id == 0) {
        return false;
      } else {
        list.forEach(i => {
          if (i.id == id) this.adcode = i.adcode;
        });
      }
    }
  }
};
</script>

<style lang="scss">
.header {
  // position: relative;
  .header-container {
    width: 100%;
    height: 67px;
    line-height: 67px;
    background: url("../assets/images/navigate_bg.png") no-repeat center;
    background-size: 100%;
    position: relative;
    .arrow {
      position: absolute;
      right: 24px;
      top: 25px;
      width: 26px;
      height: 23px;
      cursor: pointer;
    }
    .back {
      position: absolute;
      left: 24px;
      top: 0px;
      color: #fff;
      // vertical-align: middle;
      // line-height: 36px;
      display: flex;
      align-items: center;
      // height: 36px;
    }
    .el-input__prefix {
      left: 20px;
      top: 7px;
    }
    .el-select > .el-input {
      background: url("../assets/images/input_bg.png") no-repeat center;
      background-size: 100%;
    }
    .el-select > .el-input:hover {
      background: url("../assets/images/input_bg_hover.png") no-repeat center;
      background-size: 100%;
    }
  }
  .logstatus-container {
    background: #fff;
    width: 100%;
    height: 67px;
    line-height: 67px;
    // display: flex;
    // align-items: center;
    text-align: center;
    position: fixed;
    top: 0;
    z-index: 10;
    justify-content: space-between;
    color: #333;
    font-family: PingFangSC-Regular, PingFangSC;
    transform: scale(1, 0);
    transition: all 0.5s;
    transform-origin: top;

    .logo {
      left: 24px;
      top: 13px;
      position: absolute;
    }
    .logstatus_right {
      position: absolute;
      right: 24px;
      top: 0;
      .phone,
      .logout {
        color: #2481f7;
        font-size: 14px;
        // vertical-align: middle;
      }

      .logout {
        margin-right: 38px;
        margin-left: 10px;
        cursor: pointer;
      }
      // .arrow {
      //   // vertical-align: middle;
      //   // margin-right: 24px;
      //   padding-top:10px;
      // }
    }
  }
  .show {
    transform: scale(1, 1);
  }
}
</style>