利用vue-echarts结合高德地图开发地图数据大屏可视化+国内地图省市区三级下钻
效果图如图所示 ：
点击地图省切换到市区地图，点击地图市切换到区/县地图。相应的顶部下拉列表也会随之改变，下拉列表选择地图也会随之改变。
<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>手机扫一扫
移动阅读更方便
你可能感兴趣的文章