|
@@ -11,15 +11,49 @@
|
|
<div class="contents">
|
|
<div class="contents">
|
|
<div
|
|
<div
|
|
id="main"
|
|
id="main"
|
|
- style="width: 350px; height: 300px; margin: 12px auto; border-radius: 10px"
|
|
|
|
|
|
+ style="
|
|
|
|
+ width: 350px;
|
|
|
|
+ height: 350px;
|
|
|
|
+ margin: 12px auto;
|
|
|
|
+ border-radius: 10px;
|
|
|
|
+ "
|
|
></div>
|
|
></div>
|
|
|
|
+ <div class="contents_p">
|
|
|
|
+ <p>总人数</p>
|
|
|
|
+ <p>{{ total_number }} 人</p>
|
|
|
|
+ </div>
|
|
</div>
|
|
</div>
|
|
-
|
|
|
|
- <div
|
|
|
|
|
|
+ <div class="contents_table">
|
|
|
|
+ <h3>未接种疫苗部门</h3>
|
|
|
|
+ <table border="1" class="tables">
|
|
|
|
+ <tbody class="tbody">
|
|
|
|
+ <tr>
|
|
|
|
+ <th>部门名称</th>
|
|
|
|
+ <th>总人数</th>
|
|
|
|
+ <th>接种第二剂</th>
|
|
|
|
+ <th>接种第一剂</th>
|
|
|
|
+ <th>未接种人数</th>
|
|
|
|
+ </tr>
|
|
|
|
+ <tr v-for="item in bumen" :key="item.id">
|
|
|
|
+ <th>{{ item.section_fullname }}</th>
|
|
|
|
+ <th>{{ item.section_total_number }} 人</th>
|
|
|
|
+ <th>{{ item.section_total_vaccination_second }} 人</th>
|
|
|
|
+ <th @click="diyiji(item.section_fullname)">
|
|
|
|
+ {{ item.section_total_vaccination_first }} 人
|
|
|
|
+ </th>
|
|
|
|
+ <th @click="weijiezhong(item.section_fullname)">
|
|
|
|
+ {{ item.num }} 人
|
|
|
|
+ </th>
|
|
|
|
+ </tr>
|
|
|
|
+ </tbody>
|
|
|
|
+ </table>
|
|
|
|
+ </div>
|
|
|
|
+ <!-- <div
|
|
id="main2"
|
|
id="main2"
|
|
style="width: 350px; height: 540px; margin: 20px auto"
|
|
style="width: 350px; height: 540px; margin: 20px auto"
|
|
v-show="shows1 != infos1"
|
|
v-show="shows1 != infos1"
|
|
- ></div>
|
|
|
|
|
|
+ >
|
|
|
|
+ </div> -->
|
|
</div>
|
|
</div>
|
|
</template>
|
|
</template>
|
|
|
|
|
|
@@ -34,6 +68,8 @@ export default {
|
|
infos1: [],
|
|
infos1: [],
|
|
shows1: "",
|
|
shows1: "",
|
|
navBarFixed: false,
|
|
navBarFixed: false,
|
|
|
|
+ bumen: [],
|
|
|
|
+ total_number: "", //总人数
|
|
};
|
|
};
|
|
},
|
|
},
|
|
methods: {
|
|
methods: {
|
|
@@ -70,9 +106,22 @@ export default {
|
|
legend: {
|
|
legend: {
|
|
//设置小块标记
|
|
//设置小块标记
|
|
// selectedMode:false,
|
|
// selectedMode:false,
|
|
- y: "bottom",
|
|
|
|
|
|
+ y: "305px",
|
|
x: "center",
|
|
x: "center",
|
|
- formatter: {},
|
|
|
|
|
|
+ formatter: function (name) {
|
|
|
|
+ var data = option.series[0].data;
|
|
|
|
+ var total = 0;
|
|
|
|
+ var tarValue;
|
|
|
|
+ for (var i = 0; i < data.length; i++) {
|
|
|
|
+ total += data[i].value;
|
|
|
|
+ if (data[i].name == name) {
|
|
|
|
+ tarValue = data[i].value;
|
|
|
|
+ }
|
|
|
|
+ }
|
|
|
|
+ var v = tarValue;
|
|
|
|
+ // var p = Math.round(((tarValue / total) * 100));
|
|
|
|
+ return `${name} (${v}人)`;
|
|
|
|
+ },
|
|
},
|
|
},
|
|
calculable: true,
|
|
calculable: true,
|
|
series: [
|
|
series: [
|
|
@@ -165,128 +214,156 @@ export default {
|
|
// console.log(param.data);
|
|
// console.log(param.data);
|
|
// let id=param.data.Id
|
|
// let id=param.data.Id
|
|
// console.log(params.name);
|
|
// console.log(params.name);
|
|
- if(params.name=="未接种疫苗"){
|
|
|
|
|
|
+ if (params.name == "未接种疫苗") {
|
|
window.location.href = `#/zaoquan/yiqing/yiqing-weijiezhong`;
|
|
window.location.href = `#/zaoquan/yiqing/yiqing-weijiezhong`;
|
|
}
|
|
}
|
|
- if(params.name=="接种第一剂"){
|
|
|
|
|
|
+ if (params.name == "接种第一剂") {
|
|
// console.log("sss");
|
|
// console.log("sss");
|
|
- let itsname=params.name
|
|
|
|
|
|
+ let itsname = params.name;
|
|
// console.log(itsname);
|
|
// console.log(itsname);
|
|
window.location.href = `#/zaoquan/yiqing/yiqing-diyiji?itsname=${itsname}`;
|
|
window.location.href = `#/zaoquan/yiqing/yiqing-diyiji?itsname=${itsname}`;
|
|
}
|
|
}
|
|
});
|
|
});
|
|
- myChart.on("click",function(param){
|
|
|
|
|
|
+ myChart.on("click", function (param) {
|
|
console.log(param.data.name);
|
|
console.log(param.data.name);
|
|
- if(param.data.name=="未接种疫苗"){
|
|
|
|
|
|
+ if (param.data.name == "未接种疫苗") {
|
|
window.location.href = `#/zaoquan/yiqing/yiqing-weijiezhong`;
|
|
window.location.href = `#/zaoquan/yiqing/yiqing-weijiezhong`;
|
|
}
|
|
}
|
|
- if(param.data.name=="接种第一剂"){
|
|
|
|
|
|
+ if (param.data.name == "接种第一剂") {
|
|
// console.log("sss");
|
|
// console.log("sss");
|
|
- let itsname=param.data.name
|
|
|
|
|
|
+ let itsname = param.data.name;
|
|
// console.log(itsname);
|
|
// console.log(itsname);
|
|
window.location.href = `#/zaoquan/yiqing/yiqing-diyiji?itsname=${itsname}`;
|
|
window.location.href = `#/zaoquan/yiqing/yiqing-diyiji?itsname=${itsname}`;
|
|
}
|
|
}
|
|
- })
|
|
|
|
|
|
+ });
|
|
});
|
|
});
|
|
},
|
|
},
|
|
- getanalysis1() {
|
|
|
|
- let myChart1 = echarts.init(document.getElementById("main2"));
|
|
|
|
|
|
+ //获取各部门未接种人员信息,接种第一剂信息,接种第二剂信息
|
|
|
|
+ getbumen() {
|
|
this.$http
|
|
this.$http
|
|
.post(
|
|
.post(
|
|
"http://zaoquan.nxjiewei.com:8011/api/workbench/epidemic_situation/vaccination_statistics"
|
|
"http://zaoquan.nxjiewei.com:8011/api/workbench/epidemic_situation/vaccination_statistics"
|
|
)
|
|
)
|
|
.then((res) => {
|
|
.then((res) => {
|
|
- // console.log(res);
|
|
|
|
- // 指定图表的配置项和数据
|
|
|
|
- this.infos1 = res.data.data.not_nat_section_list;
|
|
|
|
- // console.log(this.infos1);
|
|
|
|
- let numArr = [];
|
|
|
|
- let section_fullnameArr = [];
|
|
|
|
- let section_idArr = [];
|
|
|
|
- for (let i in this.infos1) {
|
|
|
|
- // console.log(this.not_nat_section_list[i].section_fullname);
|
|
|
|
- numArr.push(this.infos1[i].num);
|
|
|
|
- section_fullnameArr.push(this.infos1[i].section_fullname);
|
|
|
|
- section_idArr.push(this.infos1[i].section_id);
|
|
|
|
- }
|
|
|
|
- let array = [];
|
|
|
|
- for (let i = 0; i < numArr.length; i++) {
|
|
|
|
- for (let j = 0; j < section_fullnameArr.length; j++) {
|
|
|
|
- let obj = {};
|
|
|
|
- for (let k = 0; k < section_idArr.length; k++) {
|
|
|
|
- if (i == j && i == k && j == k) {
|
|
|
|
- obj.name = section_fullnameArr[j];
|
|
|
|
- obj.value = numArr[i];
|
|
|
|
- obj.Id = section_idArr[k];
|
|
|
|
- array.push(obj);
|
|
|
|
- }
|
|
|
|
- }
|
|
|
|
- }
|
|
|
|
- }
|
|
|
|
- // console.log(array);
|
|
|
|
- var option1 = {
|
|
|
|
- backgroundColor: "#fff",
|
|
|
|
- borderRadius: 9,
|
|
|
|
- title: {
|
|
|
|
- text: "未接种疫苗部门分布",
|
|
|
|
- // left: "left",
|
|
|
|
- x: "25px",
|
|
|
|
- y: "15px",
|
|
|
|
- },
|
|
|
|
- tooltip: {
|
|
|
|
- show: true,
|
|
|
|
- trigger: "item",
|
|
|
|
- // formatter: "{a} <br/>{b} : {c}",
|
|
|
|
- },
|
|
|
|
- textStyle: {
|
|
|
|
- fontSize: 10,
|
|
|
|
- color: "#fff",
|
|
|
|
- },
|
|
|
|
- legend: {
|
|
|
|
- //设置小块标记
|
|
|
|
- y: "70%",
|
|
|
|
- x: "center",
|
|
|
|
- },
|
|
|
|
- calculable: true,
|
|
|
|
- series: [
|
|
|
|
- {
|
|
|
|
- name: "",
|
|
|
|
- type: "pie",
|
|
|
|
- radius: ["50%", "80%"], //饼图的半径大小
|
|
|
|
- center: ["50%", "200px"], //饼图的位置
|
|
|
|
- label: {
|
|
|
|
- //饼图图形上的文本颜色设置
|
|
|
|
- normal: {
|
|
|
|
- show: true,
|
|
|
|
- position: "inner", //标签的位置
|
|
|
|
- textStyle: {
|
|
|
|
- fontWeight: 100,
|
|
|
|
- fontSize: 14, //文字的字体大小
|
|
|
|
- color: "#fff",
|
|
|
|
- },
|
|
|
|
- formatter: "{d}%", //设置百分比
|
|
|
|
- },
|
|
|
|
- },
|
|
|
|
- data: array,
|
|
|
|
- },
|
|
|
|
- ],
|
|
|
|
- };
|
|
|
|
- myChart1.setOption(option1);
|
|
|
|
- myChart1.on("legendselectchanged", function (param) {
|
|
|
|
- // console.log("111");
|
|
|
|
- console.log(param.name);
|
|
|
|
- let its = param.name;
|
|
|
|
- // console.log(its);
|
|
|
|
- window.location.href = `#/zaoquan/yiqing/yiqing-bumen?its=${its}`;
|
|
|
|
- });
|
|
|
|
- myChart1.on("click",function(param){
|
|
|
|
- console.log(param.data.name);
|
|
|
|
- let its = param.data.name;
|
|
|
|
- // console.log(its);
|
|
|
|
- window.location.href = `#/zaoquan/yiqing/yiqing-bumen?its=${its}`
|
|
|
|
- })
|
|
|
|
|
|
+ console.log(res);
|
|
|
|
+ this.total_number = res.data.data.total_number;
|
|
|
|
+ this.bumen = res.data.data.not_nat_section_list;
|
|
});
|
|
});
|
|
},
|
|
},
|
|
|
|
+ //各部门未接种人员详情跳转
|
|
|
|
+ weijiezhong(name) {
|
|
|
|
+ // console.log(name);
|
|
|
|
+ let its = name;
|
|
|
|
+ // console.log(its);
|
|
|
|
+ window.location.href = `#/zaoquan/yiqing/yiqing-bumen?its=${its}`;
|
|
|
|
+ },
|
|
|
|
+ //各部门第二剂未接种人员详情跳转
|
|
|
|
+ diyiji(name) {
|
|
|
|
+ // console.log(name);
|
|
|
|
+ let itsname = name;
|
|
|
|
+ window.location.href = `#/zaoquan/yiqing/yiqing-bumenone?itsname=${itsname}`;
|
|
|
|
+ },
|
|
|
|
+ //各部门未接种疫苗环状图
|
|
|
|
+ // getanalysis1() {
|
|
|
|
+ // let myChart1 = echarts.init(document.getElementById("main2"));
|
|
|
|
+ // this.$http
|
|
|
|
+ // .post(
|
|
|
|
+ // "http://zaoquan.nxjiewei.com:8011/api/workbench/epidemic_situation/vaccination_statistics"
|
|
|
|
+ // )
|
|
|
|
+ // .then((res) => {
|
|
|
|
+ // // console.log(res);
|
|
|
|
+ // // 指定图表的配置项和数据
|
|
|
|
+ // this.infos1 = res.data.data.not_nat_section_list;
|
|
|
|
+ // // console.log(this.infos1);
|
|
|
|
+ // let numArr = [];
|
|
|
|
+ // let section_fullnameArr = [];
|
|
|
|
+ // let section_idArr = [];
|
|
|
|
+ // for (let i in this.infos1) {
|
|
|
|
+ // // console.log(this.not_nat_section_list[i].section_fullname);
|
|
|
|
+ // numArr.push(this.infos1[i].num);
|
|
|
|
+ // section_fullnameArr.push(this.infos1[i].section_fullname);
|
|
|
|
+ // section_idArr.push(this.infos1[i].section_id);
|
|
|
|
+ // }
|
|
|
|
+ // let array = [];
|
|
|
|
+ // for (let i = 0; i < numArr.length; i++) {
|
|
|
|
+ // for (let j = 0; j < section_fullnameArr.length; j++) {
|
|
|
|
+ // let obj = {};
|
|
|
|
+ // for (let k = 0; k < section_idArr.length; k++) {
|
|
|
|
+ // if (i == j && i == k && j == k) {
|
|
|
|
+ // obj.name = section_fullnameArr[j];
|
|
|
|
+ // obj.value = numArr[i];
|
|
|
|
+ // obj.Id = section_idArr[k];
|
|
|
|
+ // array.push(obj);
|
|
|
|
+ // }
|
|
|
|
+ // }
|
|
|
|
+ // }
|
|
|
|
+ // }
|
|
|
|
+ // // console.log(array);
|
|
|
|
+ // var option1 = {
|
|
|
|
+ // backgroundColor: "#fff",
|
|
|
|
+ // borderRadius: 9,
|
|
|
|
+ // title: {
|
|
|
|
+ // text: "未接种疫苗部门分布",
|
|
|
|
+ // // left: "left",
|
|
|
|
+ // x: "25px",
|
|
|
|
+ // y: "15px",
|
|
|
|
+ // },
|
|
|
|
+ // tooltip: {
|
|
|
|
+ // show: true,
|
|
|
|
+ // trigger: "item",
|
|
|
|
+ // // formatter: "{a} <br/>{b} : {c}",
|
|
|
|
+ // },
|
|
|
|
+ // textStyle: {
|
|
|
|
+ // fontSize: 10,
|
|
|
|
+ // color: "#fff",
|
|
|
|
+ // },
|
|
|
|
+ // legend: {
|
|
|
|
+ // //设置小块标记
|
|
|
|
+ // y: "70%",
|
|
|
|
+ // x: "center",
|
|
|
|
+ // },
|
|
|
|
+ // calculable: true,
|
|
|
|
+ // series: [
|
|
|
|
+ // {
|
|
|
|
+ // name: "",
|
|
|
|
+ // type: "pie",
|
|
|
|
+ // radius: ["50%", "80%"], //饼图的半径大小
|
|
|
|
+ // center: ["50%", "200px"], //饼图的位置
|
|
|
|
+ // label: {
|
|
|
|
+ // //饼图图形上的文本颜色设置
|
|
|
|
+ // normal: {
|
|
|
|
+ // show: true,
|
|
|
|
+ // position: "inner", //标签的位置
|
|
|
|
+ // textStyle: {
|
|
|
|
+ // fontWeight: 100,
|
|
|
|
+ // fontSize: 14, //文字的字体大小
|
|
|
|
+ // color: "#fff",
|
|
|
|
+ // },
|
|
|
|
+ // formatter: "{d}%", //设置百分比
|
|
|
|
+ // },
|
|
|
|
+ // },
|
|
|
|
+ // data: array,
|
|
|
|
+ // },
|
|
|
|
+ // ],
|
|
|
|
+ // };
|
|
|
|
+ // myChart1.setOption(option1);
|
|
|
|
+ // myChart1.on("legendselectchanged", function (param) {
|
|
|
|
+ // // console.log("111");
|
|
|
|
+ // console.log(param.name);
|
|
|
|
+ // let its = param.name;
|
|
|
|
+ // // console.log(its);
|
|
|
|
+ // window.location.href = `#/zaoquan/yiqing/yiqing-bumen?its=${its}`;
|
|
|
|
+ // });
|
|
|
|
+ // myChart1.on("click", function (param) {
|
|
|
|
+ // console.log(param.data.name);
|
|
|
|
+ // let its = param.data.name;
|
|
|
|
+ // // console.log(its);
|
|
|
|
+ // window.location.href = `#/zaoquan/yiqing/yiqing-bumen?its=${its}`;
|
|
|
|
+ // });
|
|
|
|
+ // });
|
|
|
|
+ // },
|
|
|
|
+
|
|
|
|
+ //吸顶处理
|
|
watchScroll() {
|
|
watchScroll() {
|
|
// 滚动的距离
|
|
// 滚动的距离
|
|
var scrollTop =
|
|
var scrollTop =
|
|
@@ -306,6 +383,7 @@ export default {
|
|
this.navBarFixed = false;
|
|
this.navBarFixed = false;
|
|
}
|
|
}
|
|
},
|
|
},
|
|
|
|
+ //返回按钮
|
|
onClickLeft() {
|
|
onClickLeft() {
|
|
window.history.back();
|
|
window.history.back();
|
|
},
|
|
},
|
|
@@ -315,11 +393,12 @@ export default {
|
|
document.body.style.borderRadius = "20px";
|
|
document.body.style.borderRadius = "20px";
|
|
window.addEventListener("scroll", this.watchScroll);
|
|
window.addEventListener("scroll", this.watchScroll);
|
|
this.token = getAllUrlParams(window.location.href).token;
|
|
this.token = getAllUrlParams(window.location.href).token;
|
|
- this.tabbar=Boolean(getAllUrlParams(window.location.href).tabbar) ;
|
|
|
|
- this.shows=this.tabbar
|
|
|
|
|
|
+ this.tabbar = Boolean(getAllUrlParams(window.location.href).tabbar);
|
|
|
|
+ this.shows = this.tabbar;
|
|
// console.log(this.token);
|
|
// console.log(this.token);
|
|
this.getanalysis();
|
|
this.getanalysis();
|
|
- this.getanalysis1();
|
|
|
|
|
|
+ // this.getanalysis1();//各部门疫苗未接种环状图
|
|
|
|
+ this.getbumen();
|
|
},
|
|
},
|
|
destroyed() {
|
|
destroyed() {
|
|
// 移除事件监听
|
|
// 移除事件监听
|
|
@@ -364,4 +443,38 @@ element.style {
|
|
top: 0;
|
|
top: 0;
|
|
z-index: 999;
|
|
z-index: 999;
|
|
}
|
|
}
|
|
|
|
+.contents {
|
|
|
|
+ position: relative;
|
|
|
|
+}
|
|
|
|
+.contents_p {
|
|
|
|
+ text-align: center;
|
|
|
|
+ position: absolute;
|
|
|
|
+ top: 152px;
|
|
|
|
+ left: 43%;
|
|
|
|
+}
|
|
|
|
+.contents_table {
|
|
|
|
+ width: 350px;
|
|
|
|
+ margin: 0 auto;
|
|
|
|
+ background: #fff;
|
|
|
|
+ border-radius: 20px;
|
|
|
|
+}
|
|
|
|
+.contents_table > h3 {
|
|
|
|
+ text-align: center;
|
|
|
|
+ margin-top: 5px;
|
|
|
|
+ padding-top: 10px;
|
|
|
|
+ margin-bottom: 15px;
|
|
|
|
+}
|
|
|
|
+.tables {
|
|
|
|
+ width: 95%;
|
|
|
|
+ margin: 0 auto;
|
|
|
|
+ border-collapse: collapse;
|
|
|
|
+}
|
|
|
|
+.tbody {
|
|
|
|
+ font-size: 14px;
|
|
|
|
+}
|
|
|
|
+th {
|
|
|
|
+ width: 20%;
|
|
|
|
+ height: 35px;
|
|
|
|
+ border: 3px solid #39f;
|
|
|
|
+}
|
|
</style>
|
|
</style>
|