增加提交中加载提示、上线宁东运营疫情防控

kuangshan-project

@@ -0,0 +1 @@
+Subproject commit 917a861cb937837d9237a2c94f6ac2c4df446746

src/router/index.js

@@ -184,6 +184,100 @@ const routes = [
       title:"部门详情未检测"
     }
   },
+
+
+  //宁东疫情防控
+  {
+    path:"/ningdongyunying/yiqing/yiqing",
+    name:"yiqing",
+    component:()=>import('../views/ningdongyunying/yiqing/yiqing.vue'),
+    meta:{
+      title:"疫情防控"
+    }
+  },
+  //宁东疫情防控-体温填报
+  {
+    path:"/ningdongyunying/yiqing/yiqing-tiwen",
+    name:"yiqing-tiwen",
+    component:()=>import('../views/ningdongyunying/yiqing/yiqing-tiwen.vue'),
+    meta:{
+      title:"体温填报"
+    }
+  },
+  //宁东疫情防控-填报列表
+  {
+    path:"/ningdongyunying/yiqing/yiqing-tianbao",
+    name:"yiqing-tianbao",
+    component:()=>import('../views/ningdongyunying/yiqing/yiqing-tianbao.vue'),
+    meta:{
+      title:"填报列表"
+    }
+  },
+  //宁东疫苗接种饼状图
+  {
+    path:"/ningdongyunying/yiqing/yiqing-yimiaojiezhong",
+    name:"yiqing-yimiaojiezhong",
+    component:()=>import('../views/ningdongyunying/yiqing/yiqing-yimiaojiezhong.vue'),
+    meta:{
+      title:"疫苗接种"
+    }
+  },
+  //宁东核酸检测饼状图
+  {
+    path:"/ningdongyunying/yiqing/yiqing-hesuanjiance",
+    name:"yiqing-hesuanjiance",
+    component:()=>import('../views/ningdongyunying/yiqing/yiqing-hesuanjiance.vue'),
+    meta:{
+      title:"核酸检测"
+    }
+  },
+   //宁东未接种疫苗原因
+   {
+    path:"/ningdongyunying/yiqing/yiqing-weijiezhong",
+    name:"yiqing-weijiezhong",
+    component:()=>import('../views/ningdongyunying/yiqing/yiqing-weijiezhong.vue'),
+    meta:{
+      title:"未接种疫苗详情"
+    }
+  },
+   //宁东第一针
+   {
+    path:"/ningdongyunying/yiqing/yiqing-diyiji",
+    name:"yiqing-diyiji",
+    component:()=>import('../views/ningdongyunying/yiqing/yiqing-diyiji.vue'),
+    meta:{
+      title:"第一针疫苗详情"
+    }
+  },
+   //宁东部门
+   {
+    path:"/ningdongyunying/yiqing/yiqing-bumen",
+    name:"yiqing-bumen",
+    component:()=>import('../views/ningdongyunying/yiqing/yiqing-bumen.vue'),
+    meta:{
+      title:"部门详情未接种疫苗"
+    }
+  },
+   //宁东部门
+   {
+    path:"/ningdongyunying/yiqing/yiqing-bumenone",
+    name:"yiqing-bumenone",
+    component:()=>import('../views/ningdongyunying/yiqing/yiqing-bumenone.vue'),
+    meta:{
+      title:"部门详情接种第一剂疫苗"
+    }
+  },
+  //宁东部门
+  {
+    path:"/ningdongyunying/yiqing/yiqing-bumenwjc",
+    name:"yiqing-bumenwjc",
+    component:()=>import('../views/ningdongyunying/yiqing/yiqing-bumenwjc.vue'),
+    meta:{
+      title:"部门详情未检测"
+    }
+  },
+
+
   //路由重定向
   {
     path:'/',

src/views/ningdongyunying/yiqing/yiqing-bumen.vue

@@ -0,0 +1,191 @@
+<template>
+  <div class="page">
+    <!-- <h1>未接种</h1> -->
+    <div v-if="shows">
+      <van-nav-bar
+        title="未接种疫苗详情"
+        left-arrow
+        left-text="返回"
+        @click-left="onClickLeft"
+      />
+    </div>
+    <!-- <div class="contents">
+      <div class="contents1">姓名</div>
+      <div class="contents2">部门</div>
+      <div class="contents3">原因</div>
+    </div>
+    <div class="contents_one" v-for="item in xinxi" :key="item">
+      <div class="contents_one1">{{item.name}}</div>
+      <div class="contents_one2">{{item.section_fullname}}</div>
+      <div class="contents_one3">{{item. not_vaccination_cause}}</div>
+    </div> -->
+    <div class="contents_table">
+      <h3>部门详情未接种疫苗</h3>
+      <div class="list">
+        <div class="item" style="border-bottom:2px solid #009FE8;">
+            <div class="name">姓名</div>
+            <div class="full">部门</div>
+            <div class="reason">原因</div>
+        </div>
+        <div class="item"  v-for="item in xinxi" :key="item">
+            <div class="name">{{item.name}}</div>
+            <div class="full">{{item.section_fullname}}</div>
+            <div class="reason">{{item. not_vaccination_cause}}</div>
+        </div>
+      </div>
+    </div>
+    
+  </div>
+</template>
+
+<script>
+import { getAllUrlParams } from "../../../plugins/url-encapsulation.js";
+export default {
+  data() {
+    return {
+      shows: false,
+      xinxi:[],
+      itsname:""
+    };
+  },
+  mounted() {
+    document.body.style.backgroundColor = "#fff"; //背景色
+    this.token = getAllUrlParams(window.location.href).token;
+    this.tabbar=Boolean(getAllUrlParams(window.location.href).tabbar) ;
+    this.shows=this.tabbar
+    this.names = getAllUrlParams(window.location.href).its;
+    console.log(decodeURIComponent(this.names));
+    this.itsname= getAllUrlParams(window.location.href).itsname;
+    console.log(decodeURIComponent(this.itsname));
+    this.getxinxi()
+  },
+  methods: {
+    onClickLeft() {
+      window.history.back();
+    },
+    getxinxi(){
+        this.$http.post("http://ningdongyunying.nxjiewei.com:8011/api/workbench/epidemic_situation/get_not_vaccination_list",{
+            section_fullname:decodeURIComponent(this.names),
+            // vaccination_first:decodeURIComponent(this.itsname)
+        }).then(res=>{
+            console.log(res);
+            this.xinxi=res.data.data.not_nat_section_list
+        })
+    }
+  },
+};
+</script>
+
+<style scoped>
+>>> .van-nav-bar {
+  background: #39f;
+}
+>>> .van-nav-bar__title {
+  color: #fff;
+}
+>>> .van-nav-bar .van-icon {
+  color: #fff;
+}
+>>> .van-nav-bar__text {
+  color: #fff;
+}
+[class*="van-hairline"]:after {
+  border: none;
+}
+.page{
+  min-height: 100%;
+  background-color: #3399FF;
+
+  box-sizing: border-box;
+  padding: 20px 0;
+}
+
+.contents {
+  display: flex;
+  justify-content: left;
+  width: 90%;
+  margin: 12px auto;
+  padding-bottom: 5px;
+  font-size: 18px;
+  border-bottom: 3px solid #39f;
+}
+.contents1 {
+  width: 20%;
+  color: #39f;
+}
+.contents2 {
+  width: 30%;
+  color: #39f;
+}
+.contents3 {
+  width: 50%;
+  color: #39f;
+}
+.contents_one {
+  display: flex;
+  justify-content: left;
+  width: 90%;
+  margin: 12px auto;
+  padding-bottom: 10px;
+  border-bottom: 1px solid #f0f0f0;
+}
+.contents_one1 {
+  width: 20%;
+}
+.contents_one2 {
+  width: 30%;
+}
+.contents_one3 {
+  width: 50%;
+}
+
+
+
+.contents_table {
+  width: 350px;
+  min-height: 90vh;
+  margin: 0 auto;
+  background: #fff;
+  border-radius: 20px;
+
+  padding-bottom: 10px;
+  margin-bottom: 30px;
+}
+.contents_table > h3 {
+  text-align: center;
+  padding-top: 10px;
+  margin-bottom: 15px;
+}
+
+
+.list{
+  box-sizing: border-box;
+  padding: 0 10px;
+  font-size: 13px;
+}
+.list .item{
+  display: flex;
+  justify-content: space-between;
+  align-items: center;
+  
+  box-sizing: border-box;
+  padding: 5px 0;
+}
+.list .item:nth-child(2n){
+  background-color: #f0f0f0;
+}
+.list .item .name{
+  width: 80px;
+  text-align: center;
+}
+.list .item .full{
+  width: 80px;
+  text-align: center;
+}
+.list .item .reason{
+  width: 150px;
+  text-align: center;
+}
+
+
+</style>

src/views/ningdongyunying/yiqing/yiqing-bumenone.vue

@@ -0,0 +1,195 @@
+<template>
+  <div class="page">
+    <!-- <h1>未接种</h1> -->
+    <div v-if="shows">
+      <van-nav-bar
+        title="未接种疫苗详情"
+        left-arrow
+        left-text="返回"
+        @click-left="onClickLeft"
+      />
+    </div>
+    <!-- <div class="contents">
+      <div class="contents1">姓名</div>
+      <div class="contents2">部门</div>
+      <div class="contents3">原因</div>
+    </div>
+    <div class="contents_one" v-for="item in xinxi" :key="item">
+      <div class="contents_one1">{{item.name}}</div>
+      <div class="contents_one2">{{item.section_fullname}}</div>
+      <div class="contents_one3">{{item. not_vaccination_cause}}</div>
+    </div> -->
+
+    <div class="contents_table">
+      <h3>部门详情接种第一剂疫苗</h3>
+      <div class="list">
+        <div class="item" style="border-bottom:2px solid #009FE8;">
+            <div class="name">姓名</div>
+            <div class="full">部门</div>
+            <div class="reason">原因</div>
+        </div>
+        <div class="item"  v-for="item in xinxi" :key="item">
+            <div class="name">{{item.name}}</div>
+            <div class="full">{{item.section_fullname}}</div>
+            <div class="reason">{{item. not_vaccination_cause}}</div>
+        </div>
+      </div>
+    </div>
+
+  </div>
+</template>
+
+<script>
+import { getAllUrlParams } from "../../../plugins/url-encapsulation.js";
+export default {
+  data() {
+    return {
+      shows: false,
+      xinxi:[],
+      itsname:"",
+      valname:"接种第一剂",
+      names:""
+    };
+  },
+  mounted() {
+    document.body.style.backgroundColor = "#fff"; //背景色
+    this.token = getAllUrlParams(window.location.href).token;
+    this.tabbar=Boolean(getAllUrlParams(window.location.href).tabbar) ;
+    this.shows=this.tabbar
+    this.names = getAllUrlParams(window.location.href).itsname;
+    console.log(decodeURIComponent(this.names));
+    // this.itsname= getAllUrlParams(window.location.href).itsname;
+    // console.log(decodeURIComponent(this.itsname));
+    this.getxinxi()
+  },
+  methods: {
+    onClickLeft() {
+      window.history.back();
+    },
+    getxinxi(){
+        this.$http.post("http://ningdongyunying.nxjiewei.com:8011/api/workbench/epidemic_situation/get_not_vaccination_list",{
+            // section_fullname:decodeURIComponent(this.names),
+            section_fullname:decodeURIComponent(this.names),
+            vaccination_first:this.valname
+        }).then(res=>{
+            console.log(res);
+            this.xinxi=res.data.data.not_nat_section_list
+        })
+    }
+  },
+};
+</script>
+
+<style scoped>
+>>> .van-nav-bar {
+  background: #39f;
+}
+>>> .van-nav-bar__title {
+  color: #fff;
+}
+>>> .van-nav-bar .van-icon {
+  color: #fff;
+}
+>>> .van-nav-bar__text {
+  color: #fff;
+}
+[class*="van-hairline"]:after {
+  border: none;
+}
+
+.page{
+  min-height: 100%;
+  background-color: #3399FF;
+
+  box-sizing: border-box;
+  padding: 20px 0;
+}
+
+.contents {
+  display: flex;
+  justify-content: left;
+  width: 90%;
+  margin: 12px auto;
+  padding-bottom: 5px;
+  font-size: 18px;
+  border-bottom: 3px solid #39f;
+}
+.contents1 {
+  width: 20%;
+  color: #39f;
+}
+.contents2 {
+  width: 30%;
+  color: #39f;
+}
+.contents3 {
+  width: 50%;
+  color: #39f;
+}
+.contents_one {
+  display: flex;
+  justify-content: left;
+  width: 90%;
+  margin: 12px auto;
+  padding-bottom: 10px;
+  border-bottom: 1px solid #f0f0f0;
+}
+.contents_one1 {
+  width: 20%;
+}
+.contents_one2 {
+  width: 30%;
+}
+.contents_one3 {
+  width: 50%;
+}
+
+
+.contents_table {
+  width: 350px;
+  min-height: 90vh;
+  margin: 0 auto;
+  background: #fff;
+  border-radius: 20px;
+
+  padding-bottom: 10px;
+  margin-bottom: 30px;
+}
+.contents_table > h3 {
+  text-align: center;
+  padding-top: 10px;
+  margin-bottom: 15px;
+}
+
+
+.list{
+  box-sizing: border-box;
+  padding: 0 10px;
+  font-size: 13px;
+}
+.list .item{
+  display: flex;
+  justify-content: space-between;
+  align-items: center;
+  
+  box-sizing: border-box;
+  padding: 5px 0;
+}
+.list .item:nth-child(2n){
+  background-color: #f0f0f0;
+}
+.list .item .name{
+  width: 80px;
+  text-align: center;
+}
+.list .item .full{
+  width: 80px;
+  text-align: center;
+}
+.list .item .reason{
+  width: 150px;
+  text-align: center;
+}
+
+
+</style>

src/views/ningdongyunying/yiqing/yiqing-bumenwjc.vue

@@ -0,0 +1,194 @@
+<template>
+  <div class="page">
+    <!-- <h1>未接种</h1> -->
+    <div v-if="shows">
+      <van-nav-bar
+        title="未检测详情"
+        left-arrow
+        left-text="返回"
+        @click-left="onClickLeft"
+      />
+    </div>
+    <!-- <div class="contents">
+      <div class="contents1">姓名</div>
+      <div class="contents2">部门</div>
+      <div class="contents3">录入时间</div>
+    </div>
+    <div class="contents_one" v-for="item in xinxi" :key="item">
+      <div class="contents_one1">{{item.name}}</div>
+      <div class="contents_one2">{{item.section_fullname}}</div>
+      <div class="contents_one3">{{item.clock_in_time}}</div>
+    </div> -->
+
+    <div class="contents_table">
+      <h3>部门详情未检测</h3>
+      <div class="list">
+        <div class="item" style="border-bottom:2px solid #009FE8;">
+            <div class="name">姓名</div>
+            <div class="full">部门</div>
+            <div class="reason">录入时间</div>
+        </div>
+        <div class="item"  v-for="item in xinxi" :key="item">
+            <div class="name">{{item.name}}</div>
+            <div class="full">{{item.section_fullname}}</div>
+            <div class="reason">{{item.clock_in_time}}</div>
+        </div>
+      </div>
+    </div>
+
+    
+  </div>
+</template>
+
+<script>
+import { getAllUrlParams } from "../../../plugins/url-encapsulation.js";
+export default {
+  data() {
+    return {
+      shows: false,
+      xinxi:[],
+      itsname:""
+    };
+  },
+  mounted() {
+    document.body.style.backgroundColor = "#fff"; //背景色
+    this.token = getAllUrlParams(window.location.href).token;
+    this.tabbar=Boolean(getAllUrlParams(window.location.href).tabbar) ;
+    this.shows=this.tabbar
+    this.names = getAllUrlParams(window.location.href).itsname;
+    console.log(decodeURIComponent(this.names));
+    this.itsname= getAllUrlParams(window.location.href).itsname;
+    console.log(decodeURIComponent(this.itsname));
+    this.getxinxi()
+  },
+  methods: {
+    onClickLeft() {
+      window.history.back();
+    },
+    getxinxi(){
+        this.$http.post("http://ningdongyunying.nxjiewei.com:8011/api/workbench/epidemic_situation/get_not_nucleic_acid_test_list",{
+            section_fullname:decodeURIComponent(this.names),
+            // vaccination_first:decodeURIComponent(this.itsname)
+        }).then(res=>{
+            console.log(res);
+            this.xinxi=res.data.data.not_nucleic_acid_test_list
+        })
+    }
+  },
+};
+</script>
+
+<style scoped>
+>>> .van-nav-bar {
+  background: #39f;
+}
+>>> .van-nav-bar__title {
+  color: #fff;
+}
+>>> .van-nav-bar .van-icon {
+  color: #fff;
+}
+>>> .van-nav-bar__text {
+  color: #fff;
+}
+[class*="van-hairline"]:after {
+  border: none;
+}
+
+.page{
+  min-height: 100%;
+  background-color: #3399FF;
+
+  box-sizing: border-box;
+  padding: 20px 0;
+}
+
+
+.contents {
+  display: flex;
+  justify-content: left;
+  width: 90%;
+  margin: 12px auto;
+  padding-bottom: 5px;
+  font-size: 18px;
+  border-bottom: 3px solid #39f;
+}
+.contents1 {
+  width: 20%;
+  color: #39f;
+}
+.contents2 {
+  width: 30%;
+  color: #39f;
+}
+.contents3 {
+  width: 50%;
+  color: #39f;
+}
+.contents_one {
+  display: flex;
+  justify-content: left;
+  width: 90%;
+  margin: 12px auto;
+  padding-bottom: 10px;
+  border-bottom: 1px solid #f0f0f0;
+}
+.contents_one1 {
+  width: 20%;
+}
+.contents_one2 {
+  width: 30%;
+}
+.contents_one3 {
+  width: 50%;
+}
+
+.contents_table {
+  width: 350px;
+  min-height: 90vh;
+  margin: 0 auto;
+  background: #fff;
+  border-radius: 20px;
+
+  padding-bottom: 10px;
+  margin-bottom: 30px;
+}
+.contents_table > h3 {
+  text-align: center;
+  padding-top: 10px;
+  margin-bottom: 15px;
+}
+
+
+.list{
+  box-sizing: border-box;
+  padding: 0 10px;
+  font-size: 13px;
+}
+.list .item{
+  display: flex;
+  justify-content: space-between;
+  align-items: center;
+  
+  box-sizing: border-box;
+  padding: 5px 0;
+}
+.list .item:nth-child(2n){
+  background-color: #f0f0f0;
+}
+.list .item .name{
+  width: 80px;
+  text-align: center;
+}
+.list .item .full{
+  width: 80px;
+  text-align: center;
+}
+.list .item .reason{
+  width: 150px;
+  text-align: center;
+}
+
+
+
+</style>

src/views/ningdongyunying/yiqing/yiqing-diyiji.vue

@@ -0,0 +1,192 @@
+<template>
+  <div class="page">
+    <!-- <h1>未接种</h1> -->
+    <div v-if="shows">
+      <van-nav-bar
+        title="未接种疫苗详情"
+        left-arrow
+        left-text="返回"
+        @click-left="onClickLeft"
+      />
+    </div>
+    <!-- <div class="contents">
+      <div class="contents1">姓名</div>
+      <div class="contents2">部门</div>
+      <div class="contents3">原因</div>
+    </div>
+    <div class="contents_one" v-for="item in xinxi" :key="item">
+      <div class="contents_one1">{{item.name}}</div>
+      <div class="contents_one2">{{item.section_fullname}}</div>
+      <div class="contents_one3">{{item. not_vaccination_cause}}</div>
+    </div> -->
+
+    <div class="contents_table">
+      <h3>第一针疫苗详情</h3>
+      <div class="list">
+        <div class="item" style="border-bottom:2px solid #009FE8;">
+            <div class="name">姓名</div>
+            <div class="full">部门</div>
+            <div class="reason">原因</div>
+        </div>
+        <div class="item"  v-for="item in xinxi" :key="item">
+            <div class="name">{{item.name}}</div>
+            <div class="full">{{item.section_fullname}}</div>
+            <div class="reason">{{item. not_vaccination_cause}}</div>
+        </div>
+      </div>
+    </div>
+  </div>
+</template>
+
+<script>
+import { getAllUrlParams } from "../../../plugins/url-encapsulation.js";
+export default {
+  data() {
+    return {
+      shows: false,
+      xinxi:[],
+      itsname:""
+    };
+  },
+  mounted() {
+    document.body.style.backgroundColor = "#fff"; //背景色
+    this.token = getAllUrlParams(window.location.href).token;
+    this.tabbar=Boolean(getAllUrlParams(window.location.href).tabbar) ;
+    this.shows=this.tabbar
+    this.names = getAllUrlParams(window.location.href).its;
+    console.log(decodeURIComponent(this.names));
+    this.itsname= getAllUrlParams(window.location.href).itsname;
+    console.log(decodeURIComponent(this.itsname));
+    this.getxinxi()
+  },
+  methods: {
+    onClickLeft() {
+      window.history.back();
+    },
+    getxinxi(){
+        this.$http.post("http://ningdongyunying.nxjiewei.com:8011/api/workbench/epidemic_situation/get_not_vaccination_list",{
+            // section_fullname:decodeURIComponent(this.names),
+            vaccination_first:decodeURIComponent(this.itsname)
+        }).then(res=>{
+            console.log(res);
+            this.xinxi=res.data.data.not_nat_section_list
+        })
+    }
+  },
+};
+</script>
+
+<style scoped>
+>>> .van-nav-bar {
+  background: #39f;
+}
+>>> .van-nav-bar__title {
+  color: #fff;
+}
+>>> .van-nav-bar .van-icon {
+  color: #fff;
+}
+>>> .van-nav-bar__text {
+  color: #fff;
+}
+[class*="van-hairline"]:after {
+  border: none;
+}
+
+.page{
+  min-height: 100%;
+  background-color: #3399FF;
+
+  box-sizing: border-box;
+  padding: 20px 0;
+}
+
+.contents {
+  display: flex;
+  justify-content: left;
+  width: 90%;
+  margin: 12px auto;
+  padding-bottom: 5px;
+  font-size: 18px;
+  border-bottom: 3px solid #39f;
+}
+.contents1 {
+  width: 20%;
+  color: #39f;
+}
+.contents2 {
+  width: 30%;
+  color: #39f;
+}
+.contents3 {
+  width: 50%;
+  color: #39f;
+}
+.contents_one {
+  display: flex;
+  justify-content: left;
+  width: 90%;
+  margin: 12px auto;
+  padding-bottom: 10px;
+  border-bottom: 1px solid #f0f0f0;
+}
+.contents_one1 {
+  width: 20%;
+}
+.contents_one2 {
+  width: 30%;
+}
+.contents_one3 {
+  width: 50%;
+}
+
+
+.contents_table {
+  width: 350px;
+  min-height: 90vh;
+  margin: 0 auto;
+  background: #fff;
+  /* background-color: #3399FF; */
+
+  border-radius: 20px;
+
+  padding-bottom: 10px;
+  margin-bottom: 30px;
+}
+.contents_table > h3 {
+  text-align: center;
+  padding-top: 10px;
+  margin-bottom: 15px;
+}
+
+
+.list{
+  box-sizing: border-box;
+  padding: 0 10px;
+  font-size: 13px;
+}
+.list .item{
+  display: flex;
+  justify-content: space-between;
+  align-items: center;
+  
+  box-sizing: border-box;
+  padding: 5px 0;
+}
+.list .item:nth-child(2n){
+  background-color: #f0f0f0;
+}
+.list .item .name{
+  width: 80px;
+  text-align: center;
+}
+.list .item .full{
+  width: 80px;
+  text-align: center;
+}
+.list .item .reason{
+  width: 150px;
+  text-align: center;
+}
+
+</style>

src/views/ningdongyunying/yiqing/yiqing-hesuanjiance.vue

@@ -0,0 +1,326 @@
+<template>
+  <div>
+    <div v-if="shows" id="nav" class="nav" :class="{ 'fix-nav': navBarFixed }">
+      <van-nav-bar
+        title="核酸检测统计"
+        left-arrow
+        left-text="返回"
+        @click-left="onClickLeft"
+      />
+    </div>
+    <div class="contents">
+      <div
+        id="main"
+        style="
+          width: 350px;
+          height: 350px;
+          margin: 12px auto;
+          border-radius: 10px;
+        "
+      ></div>
+      <div class="contents_p">
+        <p>总人数</p>
+        <p>{{ total_number }} 人</p>
+      </div>
+    </div>
+    <div class="contents_table">
+      <h3>核酸检测明细</h3>
+
+      <div class="list">
+        <div class="item" style="border-bottom: 2px solid #009fe8">
+          <div class="fullname">部门名称</div>
+          <div class="total_number">总人数</div>
+          <div class="total_vaccination_second" style="color: #000">已检测</div>
+          <div class="total_vaccination_first" style="color: #000">未检测</div>
+          <div class="num" style="color: #000">未录入</div>
+        </div>
+        <div class="item" v-for="(item, index) in list" :key="index">
+          <div class="fullname">{{ item.section_fullname }}</div>
+          <div class="total_number">{{ item.section_total_number }} 人</div>
+          <div class="total_vaccination_second">
+            {{ item.nucleic_acid_test }} 人
+          </div>
+          <div
+            class="total_vaccination_first"
+            @click="weijiance(item.section_fullname)"
+          >
+            {{ item.num }} 人
+          </div>
+          <div class="num">{{ item.not_filled_in }} 人</div>
+        </div>
+      </div>
+    </div>
+    <!-- <div
+      id="main"
+      style="
+        width: 350px;
+        height: 320px;
+        margin: 12px auto;
+        border-radius: 10px;
+      "
+    ></div>
+    <div
+      id="main2"
+      style="width: 350px; height: 540px; margin: 20px auto"
+      v-show="shows1 != infos1"
+    ></div> -->
+  </div>
+</template>
+
+<script>
+import { getAllUrlParams } from "../../../plugins/url-encapsulation.js";
+import * as echarts from "echarts";
+export default {
+  data() {
+    return {
+      shows: false,
+      infos: [],
+      infos1: [],
+      shows1: "",
+      navBarFixed: false,
+
+      total_number: 0,
+      list: [],
+    };
+  },
+  methods: {
+    getanalysis() {
+      let myChart = echarts.init(document.getElementById("main"));
+      this.$http
+        .post(
+          "http://ningdongyunying.nxjiewei.com:8011/api/workbench/epidemic_situation/nucleic_acid_test_statistics"
+        )
+        .then((res) => {
+          // 指定图表的配置项和数据
+          console.log(res);
+          this.infos = res.data.data;
+          // console.log(this.infos);
+          this.total_number = res.data.data.total_number;
+          this.list = res.data.data.not_nat_section_list;
+          var option = {
+            backgroundColor: "#fff",
+            borderRadius: "20px",
+            title: {
+              text: "核酸检测统计",
+              x: "25px",
+              y: "15px",
+            },
+            tooltip: {
+              show: true,
+              trigger: "item",
+              // formatter: "{a} <br/>{b} : {c}",
+            },
+            legend: {
+              //设置小块标记
+              y: "bottom",
+              x: "center",
+              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,
+            series: [
+              {
+                name: "",
+                type: "pie",
+                radius: ["40%", "70%"], //饼图的半径大小
+                // center: ["60%", "60%"], //饼图的位置
+                label: {
+                  //饼图图形上的文本颜色设置
+                  normal: {
+                    show: true,
+                    position: "inner", //标签的位置
+                    textStyle: {
+                      fontWeight: 300,
+                      fontSize: 16, //文字的字体大小
+                    },
+                    formatter: "{d}%", //设置百分比
+                  },
+                },
+                data: [
+                  {
+                    value: this.infos.nucleic_acid_test,
+                    name: "已检测",
+                    // 配置映射图显示颜色
+                    itemStyle: {
+                      // 设置扇形的颜色
+                      color: "#39f",
+                      shadowBlur: 200,
+                      shadowColor: "rgba(0, 0, 0, 0)",
+                    },
+                  }, //饼图图形颜色
+                  {
+                    value: this.infos.not_nucleic_acid_test,
+                    name: "未检测",
+                    itemStyle: {
+                      // 设置扇形的颜色
+                      color: "red",
+                      shadowBlur: 200,
+                      shadowColor: "rgba(0, 0, 0, 0)",
+                    },
+                  },
+                ],
+              },
+            ],
+          };
+          myChart.setOption(option);
+        });
+    },
+
+    weijiance(section_fullname) {
+      console.log(section_fullname);
+      let itsname = section_fullname;
+      window.location.href = `#/ningdongyunying/yiqing/yiqing-bumenwjc?itsname=${itsname}`;
+    },
+
+    
+    onClickLeft() {
+      window.history.back();
+    },
+    watchScroll() {
+      // 滚动的距离
+      var scrollTop =
+        window.pageYOffset ||
+        document.documentElement.scrollTop ||
+        document.body.scrollTop;
+
+      // 容器的高度
+      var offsetTop = document.querySelector("#nav").offsetHeight;
+
+      console.log("scrollTop=>", scrollTop, "  offsetTop=>", offsetTop);
+
+      //  滚动的距离如果大于了元素到顶部的距离时，实现吸顶效果
+      if (scrollTop > offsetTop) {
+        this.navBarFixed = true;
+      } else {
+        this.navBarFixed = false;
+      }
+    },
+  },
+  mounted() {
+    document.body.style.backgroundColor = "#39f"; //背景色
+    this.token = getAllUrlParams(window.location.href).token;
+    window.addEventListener("scroll", this.watchScroll);
+    this.tabbar = Boolean(getAllUrlParams(window.location.href).tabbar);
+    this.shows = this.tabbar;
+    // console.log(this.token);
+    this.getanalysis();
+    // this.getanalysis1();
+  },
+  destroyed() {
+    // 移除事件监听
+    window.removeEventListener("scroll", this.watchScroll);
+  },
+};
+</script>
+
+<style scoped>
+>>> .van-nav-bar {
+  background: #39f;
+}
+>>> .van-nav-bar__title {
+  color: #fff;
+}
+>>> .van-nav-bar .van-icon {
+  color: #fff;
+}
+>>> .van-nav-bar__text {
+  color: #fff;
+}
+[class*="van-hairline"]:after {
+  border: none;
+}
+>>> canvas {
+  border-radius: 20px !important;
+}
+
+.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;
+
+  padding-bottom: 10px;
+  margin-bottom: 30px;
+}
+.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;
+}
+
+.list {
+  box-sizing: border-box;
+  padding: 0 10px;
+  font-size: 13px;
+}
+.list .item {
+  display: flex;
+  justify-content: space-between;
+  align-items: center;
+
+  box-sizing: border-box;
+  padding: 5px 0;
+}
+.list .item:nth-child(2n) {
+  background-color: #f0f0f0;
+}
+.list .item .fullname {
+  width: 56px;
+  text-align: center;
+}
+.list .item .total_number {
+  width: 40px;
+  text-align: center;
+}
+.list .item .total_vaccination_second {
+  width: 40px;
+  text-align: center;
+  color: #008c8c;
+}
+.list .item .total_vaccination_first {
+  width: 40px;
+  color: #ff8855;
+  text-align: center;
+}
+.list .item .num {
+  width: 40px;
+  color: #fc4850;
+  text-align: center;
+}
+</style>

src/views/ningdongyunying/yiqing/yiqing-tianbao.vue

@@ -0,0 +1,234 @@
+<template>
+  <div>
+    <div v-if="shows" id="nav" class="nav" :class="{ 'fix-nav': navBarFixed }">
+      <van-nav-bar
+        title="填报列表"
+        left-arrow
+        left-text="返回"
+        @click-left="onClickLeft"
+      />
+    </div>
+    <div class="contents" v-for="item in xinxi" :key="item.id">
+      <div class="contents_headers_img">
+        <img src="../../../assets/images/ningdong/yiqing/日期.png" alt="" />
+        <span>{{ item.clock_in_time }}</span>
+      </div>
+      <div class="contents_two">
+        <div class="contents_three">
+          <div class="contents_four">
+            <span class="contents_six">姓名</span>
+            <span class="contents_four_span">{{ item.name }}</span>
+          </div>
+          <div class="contents_five">
+            <span class="contents_six">是否接种疫苗</span>
+            <span class="contents_five_span">{{ item.vaccination }}</span>
+          </div>
+        </div>
+        <div class="contents_three">
+          <div class="contents_four">
+            <span class="sizes">部门</span>
+            <span class="contents_four_span">{{ item.section }}</span>
+          </div>
+          <div class="contents_five">
+            <span class="sizes">是否做过核酸检测</span>
+            <span class="contents_five_span">{{ item.nucleic_acid_test }}</span>
+          </div>
+        </div>
+        <div class="contents_three">
+          <div class="contents_four">
+            <span class="sizes">体温</span>
+            <span class="contents_four_span">{{ item.temperature }}</span>
+          </div>
+        </div>
+        <div v-if="showdiv == item.vaccination">
+          <p class="contents_six">未接种疫苗原因</p>
+          <p class="contents_serve">{{ item.not_vaccination_cause }}</p>
+        </div>
+      </div>
+    </div>
+  </div>
+</template>
+
+<script>
+import { getAllUrlParams } from "../../../plugins/url-encapsulation.js";
+export default {
+  data() {
+    return {
+      shows: false,//tabbar是否显示
+      showdiv: "未接种",//判断当等于未接种时未接种信息显示
+      xinxi: [],//填报信息
+      navBarFixed: false,//吸顶处理
+    };
+  },
+  methods: {
+    //通过工号获取个人填报列表
+    getxinxi() {
+      this.$http
+        .post(
+          "http://ningdongyunying.nxjiewei.com:8011/api/workbench/epidemic_situation/clock_in_list",
+          {
+            staff_num: this.mobile,
+          }
+        )
+        .then((res) => {
+          console.log(res);
+          this.xinxi = res.data.data.data;
+        });
+    },
+    //返回按钮
+    onClickLeft() {
+      window.history.back();
+    },
+    //吸顶处理
+    watchScroll() {
+      // 滚动的距离
+      var scrollTop =
+        window.pageYOffset ||
+        document.documentElement.scrollTop ||
+        document.body.scrollTop;
+
+      // 容器的高度
+      var offsetTop = document.querySelector("#nav").offsetHeight;
+
+      console.log("scrollTop=>", scrollTop, "  offsetTop=>", offsetTop);
+
+      //  滚动的距离如果大于了元素到顶部的距离时，实现吸顶效果
+      if (scrollTop > offsetTop) {
+        this.navBarFixed = true;
+      } else {
+        this.navBarFixed = false;
+      }
+    },
+  },
+  mounted() {
+    document.body.style.backgroundColor = "#39f"; //背景色
+    this.token = getAllUrlParams(window.location.href).token; //获取token
+    this.mobile = getAllUrlParams(window.location.href).mobile; //获取工号
+    window.addEventListener("scroll", this.watchScroll);
+    this.tabbar = Boolean(getAllUrlParams(window.location.href).tabbar); //获取tabbar
+    this.shows = this.tabbar;
+    // console.log(this.mobile);
+    // console.log(this.token);
+    this.getxinxi();
+  },
+  destroyed() {
+    // 移除事件监听
+    window.removeEventListener("scroll", this.watchScroll);
+  },
+};
+</script>
+
+<style scoped>
+>>> .van-nav-bar {
+  background: #39f;
+}
+>>> .van-nav-bar__title {
+  color: #fff;
+}
+>>> .van-nav-bar .van-icon {
+  color: #fff;
+}
+>>> .van-nav-bar__text {
+  color: #fff;
+}
+[class*="van-hairline"]:after {
+  border: none;
+}
+.contents {
+  width: 92%;
+  margin: 15px auto 10px;
+  background: #fff;
+  border-radius: 10px;
+  border: 1px solid transparent;
+}
+.contents_one {
+  width: 95%;
+  margin: 5px auto;
+  padding-bottom: 10px;
+  display: flex;
+  justify-content: left;
+  border-bottom: 1px solid #f0f0f0;
+}
+.contents_one > img {
+  width: 30px;
+  height: 30px;
+}
+.contents_one > p {
+  font-size: 14px;
+  margin-left: 15px;
+  margin-top: 5px;
+  color: #00a1e9;
+}
+.contents_headers_img {
+  width: 50%;
+  height: 30px;
+  margin-top: 10px;
+  line-height: 22px;
+  background: #39f;
+  border-radius: 0px 5px 5px 0px;
+  display: flex;
+  justify-content: left;
+}
+.contents_headers_img > img {
+  width: 18px;
+  height: 18px;
+  margin-left: 10px;
+  margin-top: 6px;
+}
+.contents_headers_img > span {
+  font-size: 14px;
+  color: #fff;
+  margin-top: 5px;
+  margin-left: 5px;
+}
+.contents_two {
+  width: 95%;
+  margin: 5px auto;
+  padding-bottom: 10px;
+}
+.contents_three {
+  margin: 5px auto;
+  padding-bottom: 10px;
+  border-bottom: 1px solid #f0f0f0;
+  display: flex;
+  flex-wrap: wrap;
+}
+.contents_four {
+  width: 45%;
+}
+.contents_five {
+  width: 55%;
+}
+.contents_four_span {
+  margin-left: 8px;
+  color: #9b9b9b;
+  font-size: 14px;
+}
+.contents_five_span {
+  float: right;
+  color: #9b9b9b;
+  font-size: 14px;
+}
+.contents_six {
+  margin: 5px auto;
+  font-size: 14px;
+}
+.contents_serve {
+  color: #9b9b9b;
+  font-size: 14px;
+}
+.sizes {
+  font-size: 14px;
+}
+.nav {
+  width: 100%;
+  height: 30px;
+  background-color: #666666;
+}
+
+.fix-nav {
+  position: fixed;
+  top: 0;
+  z-index: 999;
+}
+</style>

src/views/ningdongyunying/yiqing/yiqing-weijiezhong.vue

@@ -0,0 +1,192 @@
+<template>
+  <div class="page">
+    <!-- <h1>未接种</h1> -->
+    <div v-if="shows">
+      <van-nav-bar
+        title="未接种疫苗详情"
+        left-arrow
+        left-text="返回"
+        @click-left="onClickLeft"
+      />
+    </div>
+    <!-- <div class="contents">
+      <div class="contents1">姓名</div>
+      <div class="contents2">部门</div>
+      <div class="contents3">原因</div>
+    </div>
+    <div class="contents_one" v-for="item in xinxi" :key="item">
+      <div class="contents_one1">{{item.name}}</div>
+      <div class="contents_one2">{{item.section_fullname}}</div>
+      <div class="contents_one3">{{item. not_vaccination_cause}}</div>
+    </div> -->
+
+    <div class="contents_table">
+      <h3>未接种疫苗详情</h3>
+      <div class="list">
+        <div class="item" style="border-bottom:2px solid #009FE8;">
+            <div class="name">姓名</div>
+            <div class="full">部门</div>
+            <div class="reason">原因</div>
+        </div>
+        <div class="item"  v-for="item in xinxi" :key="item">
+            <div class="name">{{item.name}}</div>
+            <div class="full">{{item.section_fullname}}</div>
+            <div class="reason">{{item. not_vaccination_cause}}</div>
+        </div>
+      </div>
+    </div>
+  </div>
+</template>
+
+<script>
+import { getAllUrlParams } from "../../../plugins/url-encapsulation.js";
+export default {
+  data() {
+    return {
+      shows: false,
+      xinxi:[],
+      itsname:""
+    };
+  },
+  mounted() {
+    document.body.style.backgroundColor = "#fff"; //背景色
+    this.token = getAllUrlParams(window.location.href).token;
+    this.tabbar=Boolean(getAllUrlParams(window.location.href).tabbar) ;
+    this.shows=this.tabbar
+    this.names = getAllUrlParams(window.location.href).its;
+    console.log(decodeURIComponent(this.names));
+    this.itsname= getAllUrlParams(window.location.href).itsname;
+    console.log(decodeURIComponent(this.itsname));
+    this.getxinxi()
+  },
+  methods: {
+    onClickLeft() {
+      window.history.back();
+    },
+    getxinxi(){
+        this.$http.post("http://ningdongyunying.nxjiewei.com:8011/api/workbench/epidemic_situation/get_not_vaccination_list",{
+            // section_fullname:decodeURIComponent(this.names),
+            // vaccination_first:decodeURIComponent(this.itsname)
+        }).then(res=>{
+            console.log(res);
+            this.xinxi=res.data.data.not_nat_section_list
+        })
+    }
+  },
+};
+</script>
+
+<style scoped>
+>>> .van-nav-bar {
+  background: #39f;
+}
+>>> .van-nav-bar__title {
+  color: #fff;
+}
+>>> .van-nav-bar .van-icon {
+  color: #fff;
+}
+>>> .van-nav-bar__text {
+  color: #fff;
+}
+[class*="van-hairline"]:after {
+  border: none;
+}
+
+.page{
+  min-height: 100%;
+  background-color: #3399FF;
+
+  box-sizing: border-box;
+  padding: 20px 0;
+}
+
+
+.contents {
+  display: flex;
+  justify-content: left;
+  width: 90%;
+  margin: 12px auto;
+  padding-bottom: 5px;
+  font-size: 18px;
+  border-bottom: 3px solid #39f;
+}
+.contents1 {
+  width: 20%;
+  color: #39f;
+}
+.contents2 {
+  width: 30%;
+  color: #39f;
+}
+.contents3 {
+  width: 50%;
+  color: #39f;
+}
+.contents_one {
+  display: flex;
+  justify-content: left;
+  width: 90%;
+  margin: 12px auto;
+  padding-bottom: 10px;
+  border-bottom: 1px solid #f0f0f0;
+}
+.contents_one1 {
+  width: 20%;
+}
+.contents_one2 {
+  width: 30%;
+}
+.contents_one3 {
+  width: 50%;
+}
+
+.contents_table {
+  width: 350px;
+  min-height: 90vh;
+  margin: 0 auto;
+  background: #fff;
+  /* background-color: #3399FF; */
+
+  border-radius: 20px;
+
+  padding-bottom: 10px;
+  margin-bottom: 30px;
+}
+.contents_table > h3 {
+  text-align: center;
+  padding-top: 10px;
+  margin-bottom: 15px;
+}
+
+
+.list{
+  box-sizing: border-box;
+  padding: 0 10px;
+  font-size: 13px;
+}
+.list .item{
+  display: flex;
+  justify-content: space-between;
+  align-items: center;
+  
+  box-sizing: border-box;
+  padding: 5px 0;
+}
+.list .item:nth-child(2n){
+  background-color: #f0f0f0;
+}
+.list .item .name{
+  width: 80px;
+  text-align: center;
+}
+.list .item .full{
+  width: 80px;
+  text-align: center;
+}
+.list .item .reason{
+  width: 150px;
+  text-align: center;
+}
+
+</style>

src/views/ningdongyunying/yiqing/yiqing-yimiaojiezhong.vue

@@ -0,0 +1,446 @@
+<template>
+  <div>
+    <div v-if="shows" id="nav" class="nav" :class="{ 'fix-nav': navBarFixed }">
+      <van-nav-bar
+        title="疫苗接种"
+        left-arrow
+        left-text="返回"
+        @click-left="onClickLeft"
+      />
+    </div>
+    <div class="contents">
+      <div
+        id="main"
+        style="
+          width: 350px;
+          height: 350px;
+          margin: 12px auto;
+          border-radius: 10px;
+        "
+      ></div>
+      <div class="contents_p">
+        <p>总人数</p>
+        <p>{{ total_number }} 人</p>
+      </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 class="list">
+        <div class="item" style="border-bottom:2px solid #009FE8;">
+            <div class="fullname">部门名称</div>
+            <div class="total_number">总人数</div>
+            <div class="total_vaccination_second" style="color:#000;">接种 第二剂</div>
+            <div class="total_vaccination_first" style="color:#000;">接种 第一剂</div>
+            <div class="num" style="color:#000;">未接种</div>
+        </div>
+        <div class="item" v-for="item in bumen" :key="item.id">
+            <div class="fullname">{{ item.section_fullname }}</div>
+            <div class="total_number">{{ item.section_total_number }} 人</div>
+            <div class="total_vaccination_second">{{ item.section_total_vaccination_second }} 人</div>
+            <div class="total_vaccination_first" @click="diyiji(item.section_fullname)">{{ item.section_total_vaccination_first }} 人</div>
+            <div class="num" @click="weijiezhong(item.section_fullname)">{{ item.num }} 人</div>
+        </div>
+      </div>
+
+
+    </div>
+    <!-- <div
+      id="main2"
+      style="width: 350px; height: 540px; margin: 20px auto"
+      v-show="shows1 != infos1"
+    >
+    </div> -->
+  </div>
+</template>
+
+<script>
+import { getAllUrlParams } from "../../../plugins/url-encapsulation.js";
+import * as echarts from "echarts";
+export default {
+  data() {
+    return {
+      shows: false,
+      infos: [],
+      infos1: [],
+      shows1: "",
+      navBarFixed: false,
+      bumen: [],
+      total_number: "", //总人数
+    };
+  },
+  methods: {
+    getanalysis() {
+      let myChart = echarts.init(document.getElementById("main"));
+      this.$http
+        .post(
+          "http://ningdongyunying.nxjiewei.com:8011/api/workbench/epidemic_situation/vaccination_statistics"
+        )
+        .then((res) => {
+          console.log(res);
+          // 指定图表的配置项和数据
+          this.infos = res.data.data;
+          // console.log(this.infos);
+          var option = {
+            backgroundColor: "#fff",
+            borderRadius: [20, 20, 20, 20],
+            title: {
+              text: "疫苗接种统计",
+              // left: "left",
+              x: "25px",
+              y: "15px",
+            },
+            tooltip: {
+              show: true,
+              trigger: "item",
+              // formatter: "{a} <br/>{b} : {c}",
+              // textStyle: {
+              //   fontSize: 10,
+              //   color: "#fff",
+              // },
+            },
+
+            legend: {
+              //设置小块标记
+              // selectedMode:false,
+              y: "305px",
+              x: "center",
+              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,
+            series: [
+              {
+                // name: "",
+                // type: "pie",
+                // radius: ["50%", "80%"], //饼图的半径大小
+                // // center: ["60%", "60%"], //饼图的位置
+                // label: {
+                //   //饼图图形上的文本颜色设置
+                //   normal: {
+                //     show: true,
+                //     position: "inner", //标签的位置
+                //     textStyle: {
+                //       fontWeight: 300,
+                //       fontSize: 16, //文字的字体大小
+                //     },
+                //     formatter: "{d}%", //设置百分比
+                //   },
+                // },
+                name: "",
+                type: "pie",
+                radius: ["40%", "70%"],
+                avoidLabelOverlap: false,
+                label: {
+                  show: false,
+                  position: "center",
+                  normal: {
+                    show: true,
+                    position: "inner", //标签的位置
+                    textStyle: {
+                      fontWeight: 100,
+                      fontSize: 14, //文字的字体大小
+                      color: "#fff",
+                    },
+                    formatter: "{d}%", //设置百分比
+                  },
+                },
+                emphasis: {
+                  label: {
+                    show: true,
+                    fontSize: "20",
+                    fontWeight: "bold",
+                  },
+                },
+                labelLine: {
+                  show: false,
+                },
+                data: [
+                  {
+                    value: this.infos.vaccination_first,
+                    name: "接种第一剂",
+                    // 配置映射图显示颜色
+                    itemStyle: {
+                      // 设置扇形的颜色
+                      color: "#39f",
+                      shadowBlur: 200,
+                      shadowColor: "rgba(0, 0, 0, 0)",
+                    },
+                  }, //饼图图形颜色
+                  {
+                    value: this.infos.vaccination_second,
+                    name: "接种第二剂",
+                    // 配置映射图显示颜色
+                    itemStyle: {
+                      // 设置扇形的颜色
+                      color: "#9ad12e",
+                      shadowBlur: 200,
+                      shadowColor: "rgba(0, 0, 0, 0)",
+                    },
+                  }, //饼图图形颜色
+                  {
+                    value: this.infos.not_vaccination,
+                    name: "未接种疫苗",
+                    Id: "2",
+                    itemStyle: {
+                      // 设置扇形的颜色
+                      color: "red",
+                      shadowBlur: 200,
+                      shadowColor: "rgba(0, 0, 0, 0.5)",
+                    },
+                  },
+                ],
+              },
+            ],
+          };
+          myChart.setOption(option);
+          myChart.on("legendselectchanged", function (params) {
+            // console.log("111");
+            // console.log(param.data);
+            // let id=param.data.Id
+            // console.log(params.name);
+            if (params.name == "未接种疫苗") {
+              window.location.href = `#/ningdongyunying/yiqing/yiqing-weijiezhong`;
+            }
+            if (params.name == "接种第一剂") {
+              // console.log("sss");
+              let itsname = params.name;
+              // console.log(itsname);
+              window.location.href = `#/ningdongyunying/yiqing/yiqing-diyiji?itsname=${itsname}`;
+            }
+          });
+          myChart.on("click", function (param) {
+            console.log(param.data.name);
+            if (param.data.name == "未接种疫苗") {
+              window.location.href = `#/ningdongyunying/yiqing/yiqing-weijiezhong`;
+            }
+            if (param.data.name == "接种第一剂") {
+              // console.log("sss");
+              let itsname = param.data.name;
+              // console.log(itsname);
+              window.location.href = `#/ningdongyunying/yiqing/yiqing-diyiji?itsname=${itsname}`;
+            }
+          });
+        });
+    },
+    //获取各部门未接种人员信息，接种第一剂信息，接种第二剂信息
+    getbumen() {
+      this.$http
+        .post(
+          "http://ningdongyunying.nxjiewei.com:8011/api/workbench/epidemic_situation/vaccination_statistics"
+        )
+        .then((res) => {
+          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 = `#/ningdongyunying/yiqing/yiqing-bumen?its=${its}`;
+    },
+    //各部门第二剂未接种人员详情跳转
+    diyiji(name) {
+      // console.log(name);
+      let itsname = name;
+      window.location.href = `#/ningdongyunying/yiqing/yiqing-bumenone?itsname=${itsname}`;
+    },
+    
+
+    //吸顶处理
+    watchScroll() {
+      // 滚动的距离
+      var scrollTop =
+        window.pageYOffset ||
+        document.documentElement.scrollTop ||
+        document.body.scrollTop;
+
+      // 容器的高度
+      var offsetTop = document.querySelector("#nav").offsetHeight;
+
+      console.log("scrollTop=>", scrollTop, "  offsetTop=>", offsetTop);
+
+      //  滚动的距离如果大于了元素到顶部的距离时，实现吸顶效果
+      if (scrollTop > offsetTop) {
+        this.navBarFixed = true;
+      } else {
+        this.navBarFixed = false;
+      }
+    },
+    //返回按钮
+    onClickLeft() {
+      window.history.back();
+    },
+  },
+  mounted() {
+    document.body.style.backgroundColor = "#39f"; //背景色
+    document.body.style.borderRadius = "20px";
+    window.addEventListener("scroll", this.watchScroll);
+    this.token = getAllUrlParams(window.location.href).token;
+    this.tabbar = Boolean(getAllUrlParams(window.location.href).tabbar);
+    this.shows = this.tabbar;
+    // console.log(this.token);
+    this.getanalysis();
+    // this.getanalysis1();//各部门疫苗未接种环状图
+    this.getbumen();
+  },
+  destroyed() {
+    // 移除事件监听
+    window.removeEventListener("scroll", this.watchScroll);
+  },
+};
+</script>
+
+<style scoped>
+>>> .van-nav-bar {
+  background: #39f;
+}
+>>> .van-nav-bar__title {
+  color: #fff;
+}
+>>> .van-nav-bar .van-icon {
+  color: #fff;
+}
+>>> .van-nav-bar__text {
+  color: #fff;
+}
+[class*="van-hairline"]:after {
+  border: none;
+}
+element.style {
+  border-radius: 20px;
+}
+>>> #zr_0 {
+  border-radius: 20px;
+}
+>>> canvas {
+  border-radius: 20px !important;
+}
+.nav {
+  width: 100%;
+  height: 30px;
+  background-color: #666666;
+}
+
+.fix-nav {
+  position: fixed;
+  top: 0;
+  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;
+
+  padding-bottom: 10px;
+  margin-bottom: 30px;
+}
+.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;
+}
+
+.list{
+  box-sizing: border-box;
+  padding: 0 10px;
+  font-size: 13px;
+}
+.list .item{
+  display: flex;
+  justify-content: space-between;
+  align-items: center;
+  
+  box-sizing: border-box;
+  padding: 5px 0;
+}
+.list .item:nth-child(2n){
+  background-color: #f0f0f0;
+}
+.list .item .fullname{
+  width: 56px;
+  text-align: center;
+}
+.list .item .total_number{
+  width: 40px;
+  text-align: center;
+}
+.list .item .total_vaccination_second{
+  width: 40px;
+  text-align: center;
+  color: #008c8c;
+}
+.list .item .total_vaccination_first{
+  width: 40px;
+  color: #FF8855;
+  text-align: center;
+}
+.list .item .num{
+  width: 40px;
+  color: #FC4850;
+  text-align: center;
+}
+
+
+</style>

src/views/zaoquan/yiqing/yiqing-bumen.vue

@@ -1,5 +1,5 @@
 <template>
-  <div>
+  <div class="page">
     <!-- <h1>未接种</h1> -->
     <div v-if="shows">
       <van-nav-bar
@@ -9,7 +9,7 @@
         @click-left="onClickLeft"
       />
     </div>
-    <div class="contents">
+    <!-- <div class="contents">
       <div class="contents1">姓名</div>
       <div class="contents2">部门</div>
       <div class="contents3">原因</div>
@@ -18,7 +18,23 @@
       <div class="contents_one1">{{item.name}}</div>
       <div class="contents_one2">{{item.section_fullname}}</div>
       <div class="contents_one3">{{item. not_vaccination_cause}}</div>
+    </div> -->
+    <div class="contents_table">
+      <h3>部门详情未接种疫苗</h3>
+      <div class="list">
+        <div class="item" style="border-bottom:2px solid #009FE8;">
+            <div class="name">姓名</div>
+            <div class="full">部门</div>
+            <div class="reason">原因</div>
+        </div>
+        <div class="item"  v-for="item in xinxi" :key="item">
+            <div class="name">{{item.name}}</div>
+            <div class="full">{{item.section_fullname}}</div>
+            <div class="reason">{{item. not_vaccination_cause}}</div>
+        </div>
+      </div>
     </div>
+    
   </div>
 </template>
 
@@ -76,6 +92,14 @@ export default {
 [class*="van-hairline"]:after {
   border: none;
 }
+.page{
+  min-height: 100%;
+  background-color: #3399FF;
+
+  box-sizing: border-box;
+  padding: 20px 0;
+}
+
 .contents {
   display: flex;
   justify-content: left;
@@ -114,4 +138,54 @@ export default {
 .contents_one3 {
   width: 50%;
 }
+
+
+
+.contents_table {
+  width: 350px;
+  min-height: 90vh;
+  margin: 0 auto;
+  background: #fff;
+  border-radius: 20px;
+
+  padding-bottom: 10px;
+  margin-bottom: 30px;
+}
+.contents_table > h3 {
+  text-align: center;
+  padding-top: 10px;
+  margin-bottom: 15px;
+}
+
+
+.list{
+  box-sizing: border-box;
+  padding: 0 10px;
+  font-size: 13px;
+}
+.list .item{
+  display: flex;
+  justify-content: space-between;
+  align-items: center;
+  
+  box-sizing: border-box;
+  padding: 5px 0;
+}
+.list .item:nth-child(2n){
+  background-color: #f0f0f0;
+}
+.list .item .name{
+  width: 80px;
+  text-align: center;
+}
+.list .item .full{
+  width: 80px;
+  text-align: center;
+}
+.list .item .reason{
+  width: 150px;
+  text-align: center;
+}
+
+
 </style>

src/views/zaoquan/yiqing/yiqing-bumenone.vue

@@ -1,5 +1,5 @@
 <template>
-  <div>
+  <div class="page">
     <!-- <h1>未接种</h1> -->
     <div v-if="shows">
       <van-nav-bar
@@ -9,7 +9,7 @@
         @click-left="onClickLeft"
       />
     </div>
-    <div class="contents">
+    <!-- <div class="contents">
       <div class="contents1">姓名</div>
       <div class="contents2">部门</div>
       <div class="contents3">原因</div>
@@ -18,7 +18,24 @@
       <div class="contents_one1">{{item.name}}</div>
       <div class="contents_one2">{{item.section_fullname}}</div>
       <div class="contents_one3">{{item. not_vaccination_cause}}</div>
+    </div> -->
+
+    <div class="contents_table">
+      <h3>部门详情接种第一剂疫苗</h3>
+      <div class="list">
+        <div class="item" style="border-bottom:2px solid #009FE8;">
+            <div class="name">姓名</div>
+            <div class="full">部门</div>
+            <div class="reason">原因</div>
+        </div>
+        <div class="item"  v-for="item in xinxi" :key="item">
+            <div class="name">{{item.name}}</div>
+            <div class="full">{{item.section_fullname}}</div>
+            <div class="reason">{{item. not_vaccination_cause}}</div>
+        </div>
+      </div>
     </div>
+
   </div>
 </template>
 
@@ -79,6 +96,15 @@ export default {
 [class*="van-hairline"]:after {
   border: none;
 }
+
+.page{
+  min-height: 100%;
+  background-color: #3399FF;
+
+  box-sizing: border-box;
+  padding: 20px 0;
+}
+
 .contents {
   display: flex;
   justify-content: left;
@@ -117,4 +143,53 @@ export default {
 .contents_one3 {
   width: 50%;
 }
+
+
+.contents_table {
+  width: 350px;
+  min-height: 90vh;
+  margin: 0 auto;
+  background: #fff;
+  border-radius: 20px;
+
+  padding-bottom: 10px;
+  margin-bottom: 30px;
+}
+.contents_table > h3 {
+  text-align: center;
+  padding-top: 10px;
+  margin-bottom: 15px;
+}
+
+
+.list{
+  box-sizing: border-box;
+  padding: 0 10px;
+  font-size: 13px;
+}
+.list .item{
+  display: flex;
+  justify-content: space-between;
+  align-items: center;
+  
+  box-sizing: border-box;
+  padding: 5px 0;
+}
+.list .item:nth-child(2n){
+  background-color: #f0f0f0;
+}
+.list .item .name{
+  width: 80px;
+  text-align: center;
+}
+.list .item .full{
+  width: 80px;
+  text-align: center;
+}
+.list .item .reason{
+  width: 150px;
+  text-align: center;
+}
+
+
 </style>