yiqing-yimiaojiezhong.vue 10 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230231232233234235236237238239240241242243244245246247248249250251252253254255256257258259260261262263264265266267268269270271272273274275276277278279280281282283284285286287288289290291292293294295296297298299300301302303304305306307308309310311312313314315316317318319320321322323324325326327328329330331332333334335336337338339340341342343344345346347348349
  1. <template>
  2. <div>
  3. <div v-if="shows" id="nav" class="nav" :class="{ 'fix-nav': navBarFixed }">
  4. <van-nav-bar
  5. title="疫苗接种"
  6. left-arrow
  7. left-text="返回"
  8. @click-left="onClickLeft"
  9. />
  10. </div>
  11. <div class="contents">
  12. <div
  13. id="main"
  14. style="width: 350px; height: 300px; margin: 12px auto; border-radius: 10px"
  15. ></div>
  16. </div>
  17. <div
  18. id="main2"
  19. style="width: 350px; height: 540px; margin: 20px auto"
  20. v-show="shows1 != infos1"
  21. ></div>
  22. </div>
  23. </template>
  24. <script>
  25. import { getAllUrlParams } from "../../../plugins/url-encapsulation.js";
  26. import * as echarts from "echarts";
  27. export default {
  28. data() {
  29. return {
  30. shows: false,
  31. infos: [],
  32. infos1: [],
  33. shows1: "",
  34. navBarFixed: false,
  35. };
  36. },
  37. methods: {
  38. getanalysis() {
  39. let myChart = echarts.init(document.getElementById("main"));
  40. this.$http
  41. .post(
  42. "http://zaoquan.nxjiewei.com:8011/api/workbench/epidemic_situation/vaccination_statistics"
  43. )
  44. .then((res) => {
  45. console.log(res);
  46. // 指定图表的配置项和数据
  47. this.infos = res.data.data;
  48. // console.log(this.infos);
  49. var option = {
  50. backgroundColor: "#fff",
  51. borderRadius: [20, 20, 20, 20],
  52. title: {
  53. text: "疫苗接种统计",
  54. // left: "left",
  55. x: "25px",
  56. y: "15px",
  57. },
  58. tooltip: {
  59. show: true,
  60. trigger: "item",
  61. // formatter: "{a} <br/>{b} : {c}",
  62. // textStyle: {
  63. // fontSize: 10,
  64. // color: "#fff",
  65. // },
  66. },
  67. legend: {
  68. //设置小块标记
  69. // selectedMode:false,
  70. y: "bottom",
  71. x: "center",
  72. formatter: {},
  73. },
  74. calculable: true,
  75. series: [
  76. {
  77. // name: "",
  78. // type: "pie",
  79. // radius: ["50%", "80%"], //饼图的半径大小
  80. // // center: ["60%", "60%"], //饼图的位置
  81. // label: {
  82. // //饼图图形上的文本颜色设置
  83. // normal: {
  84. // show: true,
  85. // position: "inner", //标签的位置
  86. // textStyle: {
  87. // fontWeight: 300,
  88. // fontSize: 16, //文字的字体大小
  89. // },
  90. // formatter: "{d}%", //设置百分比
  91. // },
  92. // },
  93. name: "",
  94. type: "pie",
  95. radius: ["40%", "70%"],
  96. avoidLabelOverlap: false,
  97. label: {
  98. show: false,
  99. position: "center",
  100. normal: {
  101. show: true,
  102. position: "inner", //标签的位置
  103. textStyle: {
  104. fontWeight: 100,
  105. fontSize: 14, //文字的字体大小
  106. color: "#fff",
  107. },
  108. formatter: "{d}%", //设置百分比
  109. },
  110. },
  111. emphasis: {
  112. label: {
  113. show: true,
  114. fontSize: "20",
  115. fontWeight: "bold",
  116. },
  117. },
  118. labelLine: {
  119. show: false,
  120. },
  121. data: [
  122. {
  123. value: this.infos.vaccination_first,
  124. name: "接种第一剂",
  125. // 配置映射图显示颜色
  126. itemStyle: {
  127. // 设置扇形的颜色
  128. color: "#39f",
  129. shadowBlur: 200,
  130. shadowColor: "rgba(0, 0, 0, 0)",
  131. },
  132. }, //饼图图形颜色
  133. {
  134. value: this.infos.vaccination_second,
  135. name: "接种第二剂",
  136. // 配置映射图显示颜色
  137. itemStyle: {
  138. // 设置扇形的颜色
  139. color: "#9ad12e",
  140. shadowBlur: 200,
  141. shadowColor: "rgba(0, 0, 0, 0)",
  142. },
  143. }, //饼图图形颜色
  144. {
  145. value: this.infos.not_vaccination,
  146. name: "未接种疫苗",
  147. Id: "2",
  148. itemStyle: {
  149. // 设置扇形的颜色
  150. color: "red",
  151. shadowBlur: 200,
  152. shadowColor: "rgba(0, 0, 0, 0.5)",
  153. },
  154. },
  155. ],
  156. },
  157. ],
  158. };
  159. myChart.setOption(option);
  160. myChart.on("legendselectchanged", function (params) {
  161. // console.log("111");
  162. // console.log(param.data);
  163. // let id=param.data.Id
  164. // console.log(params.name);
  165. if(params.name=="未接种疫苗"){
  166. window.location.href = `#/zaoquan/yiqing/yiqing-weijiezhong`;
  167. }
  168. if(params.name=="接种第一剂"){
  169. // console.log("sss");
  170. let itsname=params.name
  171. // console.log(itsname);
  172. window.location.href = `#/zaoquan/yiqing/yiqing-diyiji?itsname=${itsname}`;
  173. }
  174. });
  175. });
  176. },
  177. getanalysis1() {
  178. let myChart1 = echarts.init(document.getElementById("main2"));
  179. this.$http
  180. .post(
  181. "http://zaoquan.nxjiewei.com:8011/api/workbench/epidemic_situation/vaccination_statistics"
  182. )
  183. .then((res) => {
  184. // console.log(res);
  185. // 指定图表的配置项和数据
  186. this.infos1 = res.data.data.not_nat_section_list;
  187. // console.log(this.infos1);
  188. let numArr = [];
  189. let section_fullnameArr = [];
  190. let section_idArr = [];
  191. for (let i in this.infos1) {
  192. // console.log(this.not_nat_section_list[i].section_fullname);
  193. numArr.push(this.infos1[i].num);
  194. section_fullnameArr.push(this.infos1[i].section_fullname);
  195. section_idArr.push(this.infos1[i].section_id);
  196. }
  197. let array = [];
  198. for (let i = 0; i < numArr.length; i++) {
  199. for (let j = 0; j < section_fullnameArr.length; j++) {
  200. let obj = {};
  201. for (let k = 0; k < section_idArr.length; k++) {
  202. if (i == j && i == k && j == k) {
  203. obj.name = section_fullnameArr[j];
  204. obj.value = numArr[i];
  205. obj.Id = section_idArr[k];
  206. array.push(obj);
  207. }
  208. }
  209. }
  210. }
  211. // console.log(array);
  212. var option1 = {
  213. backgroundColor: "#fff",
  214. borderRadius: 9,
  215. title: {
  216. text: "未接种疫苗部门分布",
  217. // left: "left",
  218. x: "25px",
  219. y: "15px",
  220. },
  221. tooltip: {
  222. show: true,
  223. trigger: "item",
  224. // formatter: "{a} <br/>{b} : {c}",
  225. },
  226. textStyle: {
  227. fontSize: 10,
  228. color: "#fff",
  229. },
  230. legend: {
  231. //设置小块标记
  232. y: "70%",
  233. x: "center",
  234. },
  235. calculable: true,
  236. series: [
  237. {
  238. name: "",
  239. type: "pie",
  240. radius: ["50%", "80%"], //饼图的半径大小
  241. center: ["50%", "200px"], //饼图的位置
  242. label: {
  243. //饼图图形上的文本颜色设置
  244. normal: {
  245. show: true,
  246. position: "inner", //标签的位置
  247. textStyle: {
  248. fontWeight: 100,
  249. fontSize: 14, //文字的字体大小
  250. color: "#fff",
  251. },
  252. formatter: "{d}%", //设置百分比
  253. },
  254. },
  255. data: array,
  256. },
  257. ],
  258. };
  259. myChart1.setOption(option1);
  260. myChart1.on("legendselectchanged", function (param) {
  261. // console.log("111");
  262. console.log(param.name);
  263. let its = param.name;
  264. // console.log(its);
  265. window.location.href = `#/zaoquan/yiqing/yiqing-bumen?its=${its}`;
  266. });
  267. });
  268. },
  269. watchScroll() {
  270. // 滚动的距离
  271. var scrollTop =
  272. window.pageYOffset ||
  273. document.documentElement.scrollTop ||
  274. document.body.scrollTop;
  275. // 容器的高度
  276. var offsetTop = document.querySelector("#nav").offsetHeight;
  277. console.log("scrollTop=>", scrollTop, " offsetTop=>", offsetTop);
  278. // 滚动的距离如果大于了元素到顶部的距离时,实现吸顶效果
  279. if (scrollTop > offsetTop) {
  280. this.navBarFixed = true;
  281. } else {
  282. this.navBarFixed = false;
  283. }
  284. },
  285. onClickLeft() {
  286. window.history.back();
  287. },
  288. },
  289. mounted() {
  290. document.body.style.backgroundColor = "#39f"; //背景色
  291. document.body.style.borderRadius = "20px";
  292. window.addEventListener("scroll", this.watchScroll);
  293. this.token = getAllUrlParams(window.location.href).token;
  294. this.tabbar=Boolean(getAllUrlParams(window.location.href).tabbar) ;
  295. this.shows=this.tabbar
  296. // console.log(this.token);
  297. this.getanalysis();
  298. this.getanalysis1();
  299. },
  300. destroyed() {
  301. // 移除事件监听
  302. window.removeEventListener("scroll", this.watchScroll);
  303. },
  304. };
  305. </script>
  306. <style scoped>
  307. >>> .van-nav-bar {
  308. background: #39f;
  309. }
  310. >>> .van-nav-bar__title {
  311. color: #fff;
  312. }
  313. >>> .van-nav-bar .van-icon {
  314. color: #fff;
  315. }
  316. >>> .van-nav-bar__text {
  317. color: #fff;
  318. }
  319. [class*="van-hairline"]:after {
  320. border: none;
  321. }
  322. element.style {
  323. border-radius: 20px;
  324. }
  325. >>> #zr_0 {
  326. border-radius: 20px;
  327. }
  328. >>> canvas {
  329. border-radius: 20px !important;
  330. }
  331. .nav {
  332. width: 100%;
  333. height: 30px;
  334. background-color: #666666;
  335. }
  336. .fix-nav {
  337. position: fixed;
  338. top: 0;
  339. z-index: 999;
  340. }
  341. </style>