修改实验室看板

src/views/statistics/index.vue

@@ -1,75 +1,128 @@
 <template>
-  <el-scrollbar ref="scrollDiv" :style="{height:height}">
-  <div class="statistics">
-     <div class="editDate">
-       <div class="block" style="display:none">
-        <span class="demonstration">开始:</span>
-        <el-date-picker v-model="BeginDate" type="year" size="mini" value-format="yyyy" format="yyyy年"  style="width: 96px;"
-          :clearable="false" @change="checkYear(BeginDate,'begin')" placeholder="选择日期">
-        </el-date-picker>
-      </div>
+  <dv-full-screen-container>
+    <el-scrollbar class="screen" ref="scrollDiv" >
+    <!-- :style="{height:height}" -->
+      <div class="statistics">
+        <div class="editDate">
+          <div class="stitle">实验室看板大屏</div>
+          <div class="block" style="display:none">
+            <span class="demonstration">开始:</span>
+            <el-date-picker v-model="BeginDate" type="year" size="mini" value-format="yyyy" format="yyyy年"  style="width: 96px;"
+              :clearable="false" @change="checkYear(BeginDate,'begin')" placeholder="选择日期">
+            </el-date-picker>
+          </div>
 
-      <div class="block">
-        <span class="demonstration">查询年度:</span>
-        <el-date-picker v-model="endDate" type="year" size="mini" value-format="yyyy" format="yyyy年"  :clearable="false" style="width: 96px;"
-          @change="checkYear(endDate,'end')" placeholder="选择日期">
-        </el-date-picker>
-      </div>
+          <div class="block">
+            <span class="demonstration">查询年度:</span>
+            <el-date-picker v-model="endDate" type="year" size="mini" value-format="yyyy" format="yyyy年"  :clearable="false" style="width: 96px;"
+              @change="checkYear(endDate,'end')" placeholder="选择日期">
+            </el-date-picker>
+          </div>
 
-      <div class="block">
-        <el-button type="primary" size="mini" plain @click="selectAll">
-          查询
-        </el-button>
-      </div>
+          <div class="block">
+            <el-button type="primary" size="mini" plain @click="selectAll">
+              查询
+            </el-button>
+          </div>
 
-      </div>
+          <div class="goBackButton" @click.prevent="goBack()" >
+            返回
+          </div>
 
-      <div class="componentsData" v-if="relOf">
-        <s1zhiLiangMuBiao :width="static=='row' ? '20%': '100%'"
-        v-if="showAll || showComponents[1]" :data = "getS1renwu()"/>
-        <s1jianCe :width="static=='row' ? '20%': '100%'"
-        v-if="showAll || showComponents[5]" :data = "getS2jianCe()" />
-        <s3tousu :width="static=='row' ? '20%': '100%'"
-        v-if="showAll || showComponents[6]" :data = "getS3tousu()"/>
-        <s2manYiDu :width="static=='row' ? '20%': '100%'"
-        v-if="showAll || showComponents[7]"  :data = "getS2manYiDu()"/>
-        <!-- <s1zhiLiang1 :width="static=='row' ? '20%': '100%'"
-        v-if="showAll || showComponents[2]"    />
-        <s1zhiLiang2 :width="static=='row' ? '20%': '100%'"
-        v-if="showAll || showComponents[3]"   />
-        <s1zhiLiang3 :width="static=='row' ? '20%': '100%'"
-        v-if="showAll || showComponents[4]"  /> -->
+        </div>
+        <div class="ttitle">质量目标统计</div>
+        <div class="componentsData" v-if="relOf">
+            <s1zhiLiangMuBiao :width="static=='row' ? '20%': '100%'"
+            v-if="showAll || showComponents[1]" :data = "getS1renwu()"/>
+            <s1jianCe :width="static=='row' ? '20%': '100%'"
+            v-if="showAll || showComponents[5]" :data = "getS2jianCe()" />
+            <s2manYiDu :width="static=='row' ? '20%': '100%'"
+            v-if="showAll || showComponents[7]"  :data = "getS2manYiDu()"/>
+            <s3tousu :width="static=='row' ? '20%': '100%'"
+            v-if="showAll || showComponents[6]" :data = "getS3tousu()"/>
+            <s13shengwuCol :width="static=='row' ? '20%': '100%'"
+            v-if="showAll || showComponents[17]"/>
+            <!-- <s1zhiLiang1 :width="static=='row' ? '20%': '100%'"
+            v-if="showAll || showComponents[2]"    />
+            <s1zhiLiang2 :width="static=='row' ? '20%': '100%'"
+            v-if="showAll || showComponents[3]"   />
+            <s1zhiLiang3 :width="static=='row' ? '20%': '100%'"
+            v-if="showAll || showComponents[4]"  /> -->
 
-        
-        <s4renYuanPeiXun :width="static=='row' ? '20%': '100%'"
-        v-if="showAll || showComponents[8]" :data = "getS4renYuanPeiXun()"/>
+            
+            <!-- <s4renYuanPeiXun :width="static=='row' ? '20%': '100%'"
+            v-if="showAll || showComponents[8]" :data = "getS4renYuanPeiXun()"/> -->
+
+            <!-- <none :width="static=='row' ? '20%': '100%'"
+            /> -->
+            <!-- <s6sheBeiWeiHu :width="static=='row' ? '20%': '100%'"
+            v-if="showAll || showComponents[10]" :data = "getS6sheBeiWeiHu()"/> -->
+            <!-- <s7sheBeiJiaoZhun :width="'50%'"
+            v-if="showAll || showComponents[12]" :data = "getJiaoYanObjNum()"/>
+            <s8sheBeiHeCha :width="'50%'"
+            v-if="showAll || showComponents[11]" :data = "gethechaObjNum()"/> -->
+            <!-- <s10waiBuNengLi :width="'50%'"
+            v-if="showAll || showComponents[14]" :data = "getnengtliObjNum()"/> -->
+            <!-- <s11biaoZhunWu :width="'50%'"
+            v-if="showAll || showComponents[15]" :data = "getbiaozhunObjNum()"/> -->
+            <!-- <s5renYuanJianDu :width="static=='row' ? '20%': '100%'"
+            v-if="showAll || showComponents[9]" :data = "getS5renYuanJianDu()"/> -->
+            <!-- <s9neiBuZhiLiang :width="static=='row' ? '20%': '100%'"
+            v-if="showAll || showComponents[13]" :data = "getS9neiBuZhiLiang()"/> -->
+            <!-- <s12fengXian :width="static=='row' ? '20%': '100%'"
+            v-if="showAll || showComponents[13]" :data = "getS12fengXian()"/> -->
+            <div class="clear"></div>
+        </div>
+        <div class="ttitle">人员培训与管理</div>
+        <div class="componentsData" v-if="relOf">
+            <s4renYuanPeiXun :width="static=='row' ? '25%': '100%'"
+            v-if="showAll || showComponents[8]" :data = "getS4renYuanPeiXun()"/>
+            <s5renYuanJianDu :width="static=='row' ? '25%': '100%'"
+            v-if="showAll || showComponents[9]" :data = "getS5renYuanJianDu()"/>
+            <div class="clear"></div>
+
+        </div>
+        <div class="ttitle">设备维保</div>
+        <div class="componentsData" v-if="relOf">
+            <s7sheBeiJiaoZhun :width="'33%'"
+            v-if="showAll || showComponents[12]" :data = "getJiaoYanObjNum()"/>
+            <s8sheBeiHeCha :width="'33%'"
+            v-if="showAll || showComponents[11]" :data = "gethechaObjNum()"/>
+            <s11biaoZhunWu :width="'33%'"
+            v-if="showAll || showComponents[15]" :data = "getbiaozhunObjNum()"/>
+            <div class="clear"></div>
 
-        <!-- <none :width="static=='row' ? '20%': '100%'"
-        /> -->
-        <!-- <s6sheBeiWeiHu :width="static=='row' ? '20%': '100%'"
-        v-if="showAll || showComponents[10]" :data = "getS6sheBeiWeiHu()"/> -->
-        <s7sheBeiJiaoZhun :width="'50%'"
-        v-if="showAll || showComponents[12]" :data = "getJiaoYanObjNum()"/>
-        <s8sheBeiHeCha :width="'50%'"
-        v-if="showAll || showComponents[11]" :data = "gethechaObjNum()"/>
-        <s10waiBuNengLi :width="'50%'"
-        v-if="showAll || showComponents[14]" :data = "getnengtliObjNum()"/>
-        <s11biaoZhunWu :width="'50%'"
-        v-if="showAll || showComponents[15]" :data = "getbiaozhunObjNum()"/>
-        <s5renYuanJianDu :width="static=='row' ? '20%': '100%'"
-        v-if="showAll || showComponents[9]" :data = "getS5renYuanJianDu()"/>
-        <s9neiBuZhiLiang :width="static=='row' ? '20%': '100%'"
-        v-if="showAll || showComponents[13]" :data = "getS9neiBuZhiLiang()"/>
-        <s12fengXian :width="static=='row' ? '20%': '100%'"
-        v-if="showAll || showComponents[13]" :data = "getS12fengXian()"/>
-     </div>
+        </div>
+        <div class="ttitle">质量控制</div>
+        <div class="componentsData" v-if="relOf">
+            <s9neiBuZhiLiang :width="static=='row' ? '25%': '100%'"
+            v-if="showAll || showComponents[13]" :data = "getS9neiBuZhiLiang()"/>
+            <s10waiBuNengLi :width="static=='row' ? '25%': '100%'"
+            v-if="showAll || showComponents[14]" :data = "getnengtliObjNum()"/>
+            <div class="clear"></div>
 
+        </div>
+        <div class="ttitle">风险控制</div>
+        <div class="componentsData" v-if="relOf">
+            <s12fengXian :width="static=='row' ? '25%': '100%'"
+            v-if="showAll || showComponents[16]" :data = "getS12fengXian()"/>
+            <div class="clear"></div>
 
-  </div>
-  </el-scrollbar>
+        </div>
+       
+
+
+
+      </div>
+    </el-scrollbar>
+  </dv-full-screen-container>
 </template>
 
 <script>
+  //全屏展示
+  import screenfull from 'screenfull'
+  //大屏标题组件
+  // import headerDecoration from './headerDecoration'
 
   import s1zhiLiangMuBiao from './item/s1zhiLiangMuBiao.vue'
   import s1zhiLiang1 from './item/s1zhiLiang1.vue'
@@ -88,6 +141,7 @@
   import s10waiBuNengLi from './item/s10waiBuNengLi.vue'
   import s11biaoZhunWu from './item/s11biaoZhunWu.vue'
   import s12fengXian from './item/s12fengXian.vue'
+  import s13shengwuCol from './item/s13shengwuCol.vue'
 
   import none from './item/none.vue'
 
@@ -96,6 +150,7 @@
   import repostCurd from '@/business/platform/form/utils/custom/joinCURD.js'
   export default {
     components:{
+      // headerDecoration,
       none,
       s1zhiLiang1,
       s1zhiLiang2,
@@ -112,7 +167,8 @@
       s9neiBuZhiLiang,
       s10waiBuNengLi,
       s11biaoZhunWu,
-      s12fengXian
+      s12fengXian,
+      s13shengwuCol
     },
     props:{
     shows:{ //传入的内容显示序号
@@ -274,6 +330,25 @@
         let nowDate = new Date();
         return nowDate.getFullYear() - year;
       },
+      allView(){
+        screenfull.request() //默认显示全屏
+      },
+      goBack(){
+        this.$router.back(-1)
+      }
+    },
+    created() {
+      //时间
+      this.currentTime()
+      if(screenfull.isEnabled && !screenfull.isFullscreen){
+      this.allView()
+        
+      }
+    },
+    beforeDestroy() {
+      if(screenfull.isFullscreen){
+        screenfull.toggle()
+        }
     }
   }
 </script>
@@ -282,6 +357,7 @@
     .editDate{
       overflow: hidden;
       background-color:rgb(249, 255, 255);
+      position: relative;
 
     }
     .block{
@@ -289,4 +365,47 @@
       font-size: 14px;
      }
   }
+  #dv-full-screen-container {
+    // background-image: url('./img/stars.png');
+    // background-size: 100% 100%;
+    // box-shadow: 0 0 3px blue;bete
+    // display: flex;
+    // flex-direction: column;
+    background-color: #f9ffff;
+    display: flex;
+    flex-direction:column;
+    align-items: stretch;
+    
+  //  .headerContent{
+  //   flex: 1;
+    
+  //   // background-color: rgb(99, 12, 41);
+    
+
+  //  }
+  }
+  .goBackButton{
+    width: 2%;
+    position: absolute;
+    right: 0;
+  }
+  #dv-border-box-8{
+    border: none;
+  }
+  .stitle{
+    text-align: center;
+    font-size: 150%;
+    // font-family: PingFangSC-Semibold, sans-serif;
+    font-weight: 600;
+    margin: 0;
+  }
+  .ttitle{
+    font-size: 120%;
+    font-weight: 600;
+    margin: 1% 0;
+  }
+  .screen{
+    height: 90%;
+  }
+  .clear{ clear: both; }
 </style>

src/views/statistics/item/s10waiBuNengLi.vue

@@ -31,7 +31,7 @@
       },
       height:{
         type:String,
-        default: window.screen.height/2+"px"
+        default: window.screen.height/5+"px"
       },
       id:{
         type:String,
@@ -44,7 +44,7 @@
     },
     data () {
       return {
-        title:'外部质量计划',
+        title:'能力验证计划完成情况',
         dialogOff:false,
       }
     },
@@ -82,142 +82,40 @@
         //  let max2=GetMax(data2)+1;
         //  let maxVal=max1>max2?max1:max2;
         //  console.log("max1:",max1,"max2:",max2);
+        let e = 100 -this.data.Num.valna
+
        let option = {
-           //v3
+          //v3
           title: {
             text: this.title,
-            subtext: this.data.Num.date+"年"
+            // subtext: 'Fake Data',
+            left: 'left',
+            textStyle:{ fontSize:14 }
           },
           tooltip: {
-                        trigger: 'axis',
-                        axisPointer: {
-                          type: 'shadow'
-                        },
-                        formatter: function (datas) {
-                          console.log(datas)
-                            var res=datas[0].name+"<BR>"+'外部质量计划次数:'+datas[0].data+"<BR>"
-                            // res+='百分比:'+(datas[1].value==null||datas[1].value==0?"0.00":(datas[0].value/datas[1].value*100).toFixed(2))+"%"
-                            return res
-                        }
-          },
-          legend: {},
-          grid: {
-                top: '10%',
-                left: '3%',
-                right: '4%',
-                bottom: '5%',
-                containLabel: true
-                    },
-          xAxis: {
-            type: 'value',
-            boundaryGap: [0, 0.01]
-          },
-          yAxis: {
-            type: 'category',
-            data: this.data.Num.name,
-            axisLabel: {
-                show: true, // 是否显示X轴的内容，不包含两端的文字
-                interval: 0,
-                // rotate: '50', // 旋转50°
-                lineHeight: 18,
-                // formatter: function(params) {
-                //   //  console.log('formatter', params, params.length)
-                //   var newParamsName = ''// 最终拼接成的字符串
-                //   var paramsNameNumber = params.length// 实际标签的个数
-                //   var provideNumber = 3// 每行能显示的字的个数
-                //   // 判断标签的个数是否大于规定的个数， 如果大于，则进行换行处理 如果不大于，即等于或小于，就返回原标签
-                //   if (paramsNameNumber > provideNumber) {
-                //   // ********重点在这里********
-                //     newParamsName = params.substring(0, 3) + '..'// 最终拼成的字符串
-                //   } else { // 将旧标签的值赋给新标签
-                //     newParamsName = params
-                //   }
-                //   // 将最终的字符串返回
-                //   return newParamsName
-                // }
-              },
+            trigger: 'item'
           },
+          color:['#6600ff','#cc33cc'],
           series: [
             {
-              type: 'bar',
-              data: this.data.Num.number,
-              itemStyle: {color: '#669900'},
+              type: 'pie',
+              radius: '50%',
               label: {
-                show: true,
-                position: 'right'
+                formatter: '{b}: {d}%'
               },
-            },
-            // {
-            //   type: 'bar',
-            //   data: this.data.Num.numberAll
-            // },
-          ],
-                dataZoom: [
-        {
-            id: 'dataZoomY',
-            type: 'inside',
-            yAxisIndex: [0],
-            filterMode: 'empty'
-        }
-      ],
-         //v1
-        //   grid: {
-        //         top: '20%',
-        //         left: '3%',
-        //         right: '4%',
-        //         bottom: '10%',
-        //         containLabel: true
-        //     },
-        //    tooltip: {
-        //           trigger: 'axis',
-        //           axisPointer: {
-        //             type: 'shadow'
-        //           },
-        //           formatter: function (datas) {
-        //               var res='计划:'+datas[0].value+"<BR>"
-        //               res+='记录:'+datas[1].value+"<BR>"
-        //               res+='百分比:'+(datas[0].value==null||datas[0].value==0?"0.00":(datas[1].value/datas[0].value*100).toFixed(2))+"%"
-        //               return res
-        //           }
-        //    },
-        // title: {
-        //      text: this.title,
-        //      subtext: this.data.t_sbhcjlbBegin.date+"-"+this.data.t_sbhcjlbEnd.date+"年核查次数"
-        //      //subtext: this.data.t_sbhcjhBegin.date+'完成率为:' + beginInof +'\n'+this.data.t_sbhcjhEnd.date+'完成率为:'+endInof,
-        // },
-        // color: ['#003366', '#006699', '#4cabce', '#e5323e'],
-        //    legend: {
-        //      show:false
-        //  },
-        //  xAxis: [
-        //      {
-        //          type: 'category',
-        //          axisTick: {show: false},
-        //          data: data3
-        //      }
-        //  ],
-        //  yAxis:  [
-        //      {
-        //        max:maxVal,
-        //        min:0,
-        //          type: 'value'
-        //      }
-        //  ] 
-        //  ,
-        //  series: [
-        //     {
-        //          name: '计划条数',
-        //          type: 'bar',
-        //          barGap: 0,
-        //          data: data1
-        //    },
-        //     {
-        //          name: '记录条数',
-        //          type: 'bar',
-        //          barGap: 0,
-        //          data: data2
-        //    },
-        //  ]
+              data: [
+                { value: this.data.Num.valna, name: '能力验证计划完成率' },
+                { value: e, name: '能力验证计划未完成率' }
+              ],
+              emphasis: {
+                itemStyle: {
+                  shadowBlur: 10,
+                  shadowOffsetX: 0,
+                  shadowColor: 'rgba(0, 0, 0, 0.5)'
+                }
+              }
+            }
+          ]
        };
 
        option && s10waiBuNengLi.setOption(option);

src/views/statistics/item/s10waiBuNengLiCol.vue

@@ -0,0 +1,239 @@
+<template>
+  <div @click="toDetailed()" class="statisticsPage" :style="{width:width}">
+    <div :id="id" :style="{height:height}"/>
+    <!-- 打开详情弹窗-->
+    <div v-if="dialogOff">
+      <dialogView
+        :dialogOff = "dialogOff"
+        @close = "close"
+        :title="title"
+        :data="data"
+      />
+    </div>
+  </div>
+</template>
+
+<script>
+  import echarts from 'echarts'
+  import dialogView from '../properties/s10waiBuNengLiPro.vue'
+  import {GetPercent,GetMax} from  '../js/config.js'
+  export default {
+    components:{
+      dialogView
+    },
+    props: {
+      data: {
+        type: Object,
+      },
+      width:{
+        type:String,
+        default:"20%"
+      },
+      height:{
+        type:String,
+        default: window.screen.height/2+"px"
+      },
+      id:{
+        type:String,
+        default:"s10waiBuNengLi"
+      },
+      click:{
+        type:String,
+        default:'true'
+      },
+    },
+    data () {
+      return {
+        title:'能力验证计划完成情况',
+        dialogOff:false,
+      }
+    },
+    mounted(){
+      this.drawLine();
+    },
+    methods: {
+      close(){
+        this.dialogOff = false
+      },
+      /* 跳转统计页面*/
+      toDetailed(){
+        if(this.click == "true"){
+        this.dialogOff = true
+       }
+      },
+      drawLine(){
+        let s10waiBuNengLi = echarts.init(document.getElementById(this.id))
+         
+
+          
+        // let beginInof = GetPercent(Number(this.data.t_sbhcjlbBegin.number),Number(this.data.t_sbhcjhBegin.number))
+        // let endInof = GetPercent(Number(this.data.t_sbhcjlbEnd.number),Number(this.data.t_sbhcjhEnd.number))
+         
+        //  let data1 = [];
+        //  data1.push(this.data.t_sbhcjhBegin.number);
+        //  data1.push(this.data.t_sbhcjhEnd.number);
+        //  let data2 = [];
+        //  data2.push(this.data.t_sbhcjlbBegin.number);
+        //  data2.push(this.data.t_sbhcjlbEnd.number);
+        //  let data3 = [];
+        //  data3.push(this.data.t_sbhcjlbBegin.date);
+        //  data3.push(this.data.t_sbhcjlbEnd.date);
+        //  let max1=GetMax(data1)+1;
+        //  let max2=GetMax(data2)+1;
+        //  let maxVal=max1>max2?max1:max2;
+        //  console.log("max1:",max1,"max2:",max2);
+       let option = {
+           //v3
+          title: {
+            text: this.title,
+            textStyle:{ fontSize:14 }
+
+            // subtext: this.data.Num.date+"年"
+          },
+          tooltip: {
+                        trigger: 'axis',
+                        axisPointer: {
+                          type: 'shadow'
+                        },
+                        formatter: function (datas) {
+                          console.log(datas)
+                            var res=datas[0].name+"<BR>"+'能力计划次数:'+datas[0].data+"<BR>"
+                            // res+='百分比:'+(datas[1].value==null||datas[1].value==0?"0.00":(datas[0].value/datas[1].value*100).toFixed(2))+"%"
+                            return res
+                        }
+          },
+          legend: {},
+          grid: {
+                top: '10%',
+                left: '3%',
+                right: '4%',
+                bottom: '5%',
+                containLabel: true
+                    },
+          xAxis: {
+            type: 'value',
+            boundaryGap: [0, 0.01]
+          },
+          yAxis: {
+            type: 'category',
+            data: this.data.Num.name,
+            axisLabel: {
+                show: true, // 是否显示X轴的内容，不包含两端的文字
+                interval: 0,
+                // rotate: '50', // 旋转50°
+                lineHeight: 18,
+                // formatter: function(params) {
+                //   //  console.log('formatter', params, params.length)
+                //   var newParamsName = ''// 最终拼接成的字符串
+                //   var paramsNameNumber = params.length// 实际标签的个数
+                //   var provideNumber = 3// 每行能显示的字的个数
+                //   // 判断标签的个数是否大于规定的个数， 如果大于，则进行换行处理 如果不大于，即等于或小于，就返回原标签
+                //   if (paramsNameNumber > provideNumber) {
+                //   // ********重点在这里********
+                //     newParamsName = params.substring(0, 3) + '..'// 最终拼成的字符串
+                //   } else { // 将旧标签的值赋给新标签
+                //     newParamsName = params
+                //   }
+                //   // 将最终的字符串返回
+                //   return newParamsName
+                // }
+              },
+          },
+          series: [
+            {
+              type: 'bar',
+              data: this.data.Num.number,
+              itemStyle: {color: '#669900'},
+              label: {
+                show: true,
+                position: 'right'
+              },
+            },
+            // {
+            //   type: 'bar',
+            //   data: this.data.Num.numberAll
+            // },
+          ],
+                dataZoom: [
+        {
+            id: 'dataZoomY',
+            type: 'inside',
+            yAxisIndex: [0],
+            filterMode: 'empty'
+        }
+      ],
+         //v1
+        //   grid: {
+        //         top: '20%',
+        //         left: '3%',
+        //         right: '4%',
+        //         bottom: '10%',
+        //         containLabel: true
+        //     },
+        //    tooltip: {
+        //           trigger: 'axis',
+        //           axisPointer: {
+        //             type: 'shadow'
+        //           },
+        //           formatter: function (datas) {
+        //               var res='计划:'+datas[0].value+"<BR>"
+        //               res+='记录:'+datas[1].value+"<BR>"
+        //               res+='百分比:'+(datas[0].value==null||datas[0].value==0?"0.00":(datas[1].value/datas[0].value*100).toFixed(2))+"%"
+        //               return res
+        //           }
+        //    },
+        // title: {
+        //      text: this.title,
+        //      subtext: this.data.t_sbhcjlbBegin.date+"-"+this.data.t_sbhcjlbEnd.date+"年核查次数"
+        //      //subtext: this.data.t_sbhcjhBegin.date+'完成率为:' + beginInof +'\n'+this.data.t_sbhcjhEnd.date+'完成率为:'+endInof,
+        // },
+        // color: ['#003366', '#006699', '#4cabce', '#e5323e'],
+        //    legend: {
+        //      show:false
+        //  },
+        //  xAxis: [
+        //      {
+        //          type: 'category',
+        //          axisTick: {show: false},
+        //          data: data3
+        //      }
+        //  ],
+        //  yAxis:  [
+        //      {
+        //        max:maxVal,
+        //        min:0,
+        //          type: 'value'
+        //      }
+        //  ] 
+        //  ,
+        //  series: [
+        //     {
+        //          name: '计划条数',
+        //          type: 'bar',
+        //          barGap: 0,
+        //          data: data1
+        //    },
+        //     {
+        //          name: '记录条数',
+        //          type: 'bar',
+        //          barGap: 0,
+        //          data: data2
+        //    },
+        //  ]
+       };
+
+       option && s10waiBuNengLi.setOption(option);
+      }
+    }
+  }
+</script>
+<style scoped>
+  #s10waiBuNengLi:hover{
+    transition: all 0.5s;
+    transform:scale(1.03);
+  }
+  .statisticsPage{
+     box-shadow: 0 2px 12px 0 rgba(0, 0, 0, 0.1);
+     float: left;
+  }
+</style>

src/views/statistics/item/s11biaoZhunWu.vue

@@ -31,7 +31,7 @@
       },
       height:{
         type:String,
-        default: window.screen.height/2+"px"
+        default: window.screen.height/5+"px"
       },
       id:{
         type:String,
@@ -44,7 +44,7 @@
     },
     data () {
       return {
-        title:'标准物质核查计划',
+        title:'标准物质期间核查计划完成情况',
         dialogOff:false,
       }
     },
@@ -82,85 +82,39 @@
         //  let max2=GetMax(data2)+1;
         //  let maxVal=max1>max2?max1:max2;
         //  console.log("max1:",max1,"max2:",max2);
+        let e = 100 -this.data.Num.valna
        let option = {
            //v3
           title: {
             text: this.title,
-            subtext: this.data.Num.date+"年"
+            // subtext: 'Fake Data',
+            left: 'left',
+            textStyle:{ fontSize:14 }
           },
           tooltip: {
-                        trigger: 'axis',
-                        axisPointer: {
-                          type: 'shadow'
-                        },
-                        formatter: function (datas) {
-                          console.log(datas)
-                            var res=datas[0].name+"<BR>"+'核查次数:'+datas[0].data+"<BR>"
-                            // res+='百分比:'+(datas[1].value==null||datas[1].value==0?"0.00":(datas[0].value/datas[1].value*100).toFixed(2))+"%"
-                            return res
-                        }
-          },
-          legend: {},
-          grid: {
-                top: '10%',
-                left: '3%',
-                right: '4%',
-                bottom: '5%',
-                containLabel: true
-                    },
-          xAxis: {
-            type: 'value',
-            boundaryGap: [0, 0.01]
-          },
-          yAxis: {
-            type: 'category',
-            data: this.data.Num.name,
-            axisLabel: {
-                show: true, // 是否显示X轴的内容，不包含两端的文字
-                interval: 0,
-                // rotate: '50', // 旋转50°
-                lineHeight: 18,
-                // formatter: function(params) {
-                //   //  console.log('formatter', params, params.length)
-                //   var newParamsName = ''// 最终拼接成的字符串
-                //   var paramsNameNumber = params.length// 实际标签的个数
-                //   var provideNumber = 3// 每行能显示的字的个数
-                //   // 判断标签的个数是否大于规定的个数， 如果大于，则进行换行处理 如果不大于，即等于或小于，就返回原标签
-                //   if (paramsNameNumber > provideNumber) {
-                //   // ********重点在这里********
-                //     newParamsName = params.substring(0, 3) + '..'// 最终拼成的字符串
-                //   } else { // 将旧标签的值赋给新标签
-                //     newParamsName = params
-                //   }
-                //   // 将最终的字符串返回
-                //   return newParamsName
-                // }
-              },
+            trigger: 'item'
           },
+          color:['#6600ff','#cc33cc'],
           series: [
             {
-              type: 'bar',
-              data: this.data.Num.number,
-              itemStyle: {color: '#006699'},
+              type: 'pie',
+              radius: '50%',
               label: {
-                show: true,
-                position: 'right'
+                formatter: '{b}: {d}%'
               },
-            },
-            // {
-            //   type: 'bar',
-            //   data: this.data.Num.numberAll
-            // },
-          ],
-                dataZoom: [
-        {
-            id: 'dataZoomY',
-            type: 'inside',
-            yAxisIndex: [0],
-            filterMode: 'empty'
-        }
-      ],
-       
+              data: [
+                { value: this.data.Num.valna, name: '标准物质期间核查完成率' },
+                { value: e, name: '标准物质期间核查未完成率' }
+              ],
+              emphasis: {
+                itemStyle: {
+                  shadowBlur: 10,
+                  shadowOffsetX: 0,
+                  shadowColor: 'rgba(0, 0, 0, 0.5)'
+                }
+              }
+            }
+          ]
        };
 
        option && s11biaoZhunWu.setOption(option);

src/views/statistics/item/s11biaoZhunWuCol.vue

@@ -0,0 +1,159 @@
+<template>
+  <div @click="toDetailed()" class="statisticsPage" :style="{width:width}">
+    <div :id="id" :style="{height:height}"/>
+    <!-- 打开详情弹窗-->
+    <div v-if="dialogOff">
+      <dialogView
+        :dialogOff = "dialogOff"
+        @close = "close"
+        :title="title"
+        :data="data"
+      />
+    </div>
+  </div>
+</template>
+
+<script>
+  import echarts from 'echarts'
+  import dialogView from '../properties/s11biaoZhunWuPro.vue'
+  import {GetPercent,GetMax} from  '../js/config.js'
+  export default {
+    components:{
+      dialogView
+    },
+    props: {
+      data: {
+        type: Object,
+      },
+      width:{
+        type:String,
+        default:"20%"
+      },
+      height:{
+        type:String,
+        default: window.screen.height/2+"px"
+      },
+      id:{
+        type:String,
+        default:"s11biaoZhunWu"
+      },
+      click:{
+        type:String,
+        default:'true'
+      },
+    },
+    data () {
+      return {
+        title:'标准物质期间核查计划数量',
+        dialogOff:false,
+      }
+    },
+    mounted(){
+      this.drawLine();
+    },
+    methods: {
+      close(){
+        this.dialogOff = false
+      },
+      /* 跳转统计页面*/
+      toDetailed(){
+        if(this.click == "true"){
+        this.dialogOff = true
+       }
+      },
+      drawLine(){
+        let s11biaoZhunWu = echarts.init(document.getElementById(this.id))
+         
+
+          
+        // let beginInof = GetPercent(Number(this.data.t_sbhcjlbBegin.number),Number(this.data.t_sbhcjhBegin.number))
+        // let endInof = GetPercent(Number(this.data.t_sbhcjlbEnd.number),Number(this.data.t_sbhcjhEnd.number))
+         
+        //  let data1 = [];
+        //  data1.push(this.data.t_sbhcjhBegin.number);
+        //  data1.push(this.data.t_sbhcjhEnd.number);
+        //  let data2 = [];
+        //  data2.push(this.data.t_sbhcjlbBegin.number);
+        //  data2.push(this.data.t_sbhcjlbEnd.number);
+        //  let data3 = [];
+        //  data3.push(this.data.t_sbhcjlbBegin.date);
+        //  data3.push(this.data.t_sbhcjlbEnd.date);
+        //  let max1=GetMax(data1)+1;
+        //  let max2=GetMax(data2)+1;
+        //  let maxVal=max1>max2?max1:max2;
+        //  console.log("max1:",max1,"max2:",max2);
+        let e=[this.data.Num.valnum,this.data.Num.valAll]
+
+       let option = {
+           //v3
+         legend: {},
+            tooltip: {
+              trigger: 'axis',
+              axisPointer: {
+                type: 'shadow'
+              },
+              // formatter: function (params) {
+              //   return params[0].data[0] + '<br/>满意份数：' + params[0].data[1] + '<br/>调查总份数: ' + params[0].data[2];
+              // }
+            },
+            // dataset: {
+            //   source: barData
+            // },
+            xAxis: { 
+              type: 'category',
+              data:['标准物质期间核查总数', '标准物质期间核查已完成数量']
+
+            },
+            yAxis: [
+              {
+                type: 'value',
+                scale: true,
+                name: '数量',
+                max: this.data.Num.valnum>this.data.Num.valAll?this.data.Num.valnum+1:this.data.Num.valAll+1,
+                min: 0,
+              },
+            ],
+            series: [
+              {
+                data: e,
+                type: 'bar',
+                barWidth: '20%',
+                itemStyle: {
+                  color: '#0099ff'
+                },
+                label: {
+                  show: true,
+                  position: 'top'
+                },
+              }
+            ],
+            grid: {
+              top: '20%',
+              left: '3%',
+              right: '4%',
+              bottom: '10%',
+              containLabel: true
+            },
+            title: {
+              text: this.title,
+              textStyle:{ fontSize:14 }
+
+              // subtext: "        "+beingDate+"-"+endDate
+            },
+       };
+
+       option && s11biaoZhunWu.setOption(option);
+      }
+    }
+  }
+</script>
+<style scoped>
+  #s10waiBuNengLi:hover{
+    transition: all 0.5s;
+    transform:scale(1.03);
+  }
+  .statisticsPage{
+     box-shadow: 0 2px 12px 0 rgba(0, 0, 0, 0.1);
+     float: left;
+  }
+</style>

src/views/statistics/item/s11biaoZhunWuCol2.vue

@@ -0,0 +1,191 @@
+<template>
+  <div @click="toDetailed()" class="statisticsPage" :style="{width:width}">
+    <div :id="id" :style="{height:height}"/>
+    <!-- 打开详情弹窗-->
+    <div v-if="dialogOff">
+      <dialogView
+        :dialogOff = "dialogOff"
+        @close = "close"
+        :title="title"
+        :data="data"
+      />
+    </div>
+  </div>
+</template>
+
+<script>
+  import echarts from 'echarts'
+  import dialogView from '../properties/s11biaoZhunWuPro.vue'
+  import {GetPercent,GetMax} from  '../js/config.js'
+  export default {
+    components:{
+      dialogView
+    },
+    props: {
+      data: {
+        type: Object,
+      },
+      width:{
+        type:String,
+        default:"20%"
+      },
+      height:{
+        type:String,
+        default: window.screen.height/2+"px"
+      },
+      id:{
+        type:String,
+        default:"s11biaoZhunWu"
+      },
+      click:{
+        type:String,
+        default:'true'
+      },
+    },
+    data () {
+      return {
+        title:'各个标准物质期间核查计划数量',
+        dialogOff:false,
+      }
+    },
+    mounted(){
+      this.drawLine();
+    },
+    methods: {
+      close(){
+        this.dialogOff = false
+      },
+      /* 跳转统计页面*/
+      toDetailed(){
+        if(this.click == "true"){
+        this.dialogOff = true
+       }
+      },
+      drawLine(){
+        let s11biaoZhunWu = echarts.init(document.getElementById(this.id))
+         
+
+          
+        // let beginInof = GetPercent(Number(this.data.t_sbhcjlbBegin.number),Number(this.data.t_sbhcjhBegin.number))
+        // let endInof = GetPercent(Number(this.data.t_sbhcjlbEnd.number),Number(this.data.t_sbhcjhEnd.number))
+         
+        //  let data1 = [];
+        //  data1.push(this.data.t_sbhcjhBegin.number);
+        //  data1.push(this.data.t_sbhcjhEnd.number);
+        //  let data2 = [];
+        //  data2.push(this.data.t_sbhcjlbBegin.number);
+        //  data2.push(this.data.t_sbhcjlbEnd.number);
+        //  let data3 = [];
+        //  data3.push(this.data.t_sbhcjlbBegin.date);
+        //  data3.push(this.data.t_sbhcjlbEnd.date);
+        //  let max1=GetMax(data1)+1;
+        //  let max2=GetMax(data2)+1;
+        //  let maxVal=max1>max2?max1:max2;
+        //  console.log("max1:",max1,"max2:",max2);
+       let option = {
+           //v3
+          title: {
+            text: this.title,
+            textStyle:{ fontSize:14 }
+
+            // subtext: this.data.Num.date+"年"
+          },
+          tooltip: {
+                        trigger: 'axis',
+                        axisPointer: {
+                          type: 'shadow'
+                        },
+                        formatter: function (datas) {
+                          console.log(datas)
+                            var res=datas[0].name+"<BR>"+'期间核查次数:'+datas[0].data+"<BR>期间核查完成次数"+datas[1].data
+                            // res+='百分比:'+(datas[1].value==null||datas[1].value==0?"0.00":(datas[0].value/datas[1].value*100).toFixed(2))+"%"
+                            return res
+                        }
+          },
+          legend: {},
+          grid: {
+                top: '10%',
+                left: '3%',
+                right: '4%',
+                bottom: '5%',
+                containLabel: true
+                    },
+          xAxis: {
+            type: 'value',
+            boundaryGap: [0, 0.01]
+          },
+          yAxis: {
+            type: 'category',
+            data: this.data.Num.name,
+            axisLabel: {
+                show: true, // 是否显示X轴的内容，不包含两端的文字
+                interval: 0,
+                // rotate: '50', // 旋转50°
+                lineHeight: 18,
+                // formatter: function(params) {
+                //   //  console.log('formatter', params, params.length)
+                //   var newParamsName = ''// 最终拼接成的字符串
+                //   var paramsNameNumber = params.length// 实际标签的个数
+                //   var provideNumber = 3// 每行能显示的字的个数
+                //   // 判断标签的个数是否大于规定的个数， 如果大于，则进行换行处理 如果不大于，即等于或小于，就返回原标签
+                //   if (paramsNameNumber > provideNumber) {
+                //   // ********重点在这里********
+                //     newParamsName = params.substring(0, 3) + '..'// 最终拼成的字符串
+                //   } else { // 将旧标签的值赋给新标签
+                //     newParamsName = params
+                //   }
+                //   // 将最终的字符串返回
+                //   return newParamsName
+                // }
+              },
+          },
+          series: [
+            {
+              type: 'bar',
+              data: this.data.Num.number,
+              itemStyle: {color: '#006699'},
+              label: {
+                show: true,
+                position: 'right'
+              },
+            },
+            {
+              type: 'bar',
+              data: this.data.Num.numberAll,
+              itemStyle: {color: '#006633'},
+              label: {
+                show: true,
+                position: 'right'
+              },
+            },
+            // {
+            //   type: 'bar',
+            //   data: this.data.Num.numberAll
+            // },
+          ],
+                dataZoom: [
+        {
+            id: 'dataZoomY',
+            type: 'inside',
+            yAxisIndex: [0],
+            filterMode: 'empty'
+        }
+      ],
+       
+       };
+
+       option && s11biaoZhunWu.setOption(option);
+      }
+    }
+  }
+</script>
+<style scoped>
+  #s10waiBuNengLi:hover{
+    transition: all 0.5s;
+    transform:scale(1.03);
+  }
+  .statisticsPage{
+     box-shadow: 0 2px 12px 0 rgba(0, 0, 0, 0.1);
+     float: left;
+  }
+</style>

src/views/statistics/item/s12fengXian.vue

@@ -31,7 +31,7 @@
       },
       height:{
         type:String,
-        default: window.screen.height/4+"px"
+        default: window.screen.height/5+"px"
       },
       id:{
         type:String,
@@ -44,7 +44,7 @@
     },
     data () {
       return {
-        title:'明鉴实验室活动风险识别与控制计划',
+        title:'实验室活动风险识别与控制计划',
         dialogOff:false,
         measured:[]
       }
@@ -72,67 +72,40 @@
         var option;
 
         //v3
-        let e=[this.data.t_mjsyshdfxsbykzjhxbNum.number[0],this.data.t_mjsyshdfxsbykzjhxbNum.numberAll[0],this.data.t_mjsyshdfxsbykzjhxbNum.res[0]]
+        // let e=[this.data.t_mjsyshdfxsbykzjhxbNum.number[0],this.data.t_mjsyshdfxsbykzjhxbNum.numberAll[0],this.data.t_mjsyshdfxsbykzjhxbNum.res[0]]
+        let e = 100 -this.data.t_mjsyshdfxsbykzjhxbNum.res[0]
+
 
         option = {
-            legend: {},
-            tooltip: {
-              trigger: 'axis',
-              axisPointer: {
-                type: 'shadow'
-              },
-              // formatter: function (params) {
-              //   return params[0].data[0] + '<br/>满意份数：' + params[0].data[1] + '<br/>调查总份数: ' + params[0].data[2];
-              // }
-            },
-            // dataset: {
-            //   source: barData
-            // },
-            xAxis: { type: 'category',data:['已完成', '总数量', '完成率']},
-            yAxis: [
-              {
-                type: 'value',
-                scale: true,
-                name: '数量',
-                max: this.data.t_mjsyshdfxsbykzjhxbNum.number[0]>this.data.t_mjsyshdfxsbykzjhxbNum.numberAll[0]?this.data.t_mjsyshdfxsbykzjhxbNum.number[0]+1:this.data.t_mjsyshdfxsbykzjhxbNum.numberAll[0]+1,
-                min: 0,
-                // boundaryGap: [0.2, 0.2]
+          title: {
+            text: this.title,
+            // subtext: 'Fake Data',
+            left: 'left',
+            textStyle:{ fontSize:14 }
+          },
+          tooltip: {
+            trigger: 'item'
+          },
+          series: [
+            {
+              type: 'pie',
+              radius: '50%',
+              label: {
+                formatter: '{b}: {d}%'
               },
-              {
-                type: 'value',
-                scale: true,
-                name: '完成率',
-                max: this.data.t_mjsyshdfxsbykzjhxbNum.res[0],
-                min: 0,
-                axisLabel: {
-                  formatter: '{value} %'
-                }
-              }
-            ],
-            series: [
-              {
-                data: e,
-                type: 'bar',
+              data: [
+                { value: this.data.t_mjsyshdfxsbykzjhxbNum.res[0], name: '实验室活动风险识别与控制计划完成率' },
+                { value: e, name: '实验室活动风险识别与控制计划未完成率' }
+              ],
+              emphasis: {
                 itemStyle: {
-                  color: '#cc6633'
-                },
-                label: {
-                show: true,
-                position: 'top'
-              },
+                  shadowBlur: 10,
+                  shadowOffsetX: 0,
+                  shadowColor: 'rgba(0, 0, 0, 0.5)'
+                }
               }
-            ],
-            grid: {
-              top: '20%',
-              left: '3%',
-              right: '4%',
-              bottom: '10%',
-              containLabel: true
-            },
-            title: {
-              text: this.title,
-              // subtext: "        "+beingDate+"-"+endDate
             }
+          ]
         };
 
         option && s12fengXian.setOption(option);

src/views/statistics/item/s12fengXianCol.vue

@@ -0,0 +1,161 @@
+<template>
+  <div @click="toDetailed()" class="statisticsPage" :style="{width:width}">
+    <div :id="id" :style="{height:height}"/>
+    <!-- 打开详情弹窗-->
+    <div v-if="dialogOff">
+      <dialogView
+        :dialogOff = "dialogOff"
+        @close = "close"
+        :title="title"
+        :data="data"
+      />
+    </div>
+  </div>
+</template>
+
+<script>
+  import echarts from 'echarts'
+  import dialogView from '../properties/s12fengXianPro.vue'
+  import {GetPercent,GetMax} from  '../js/config.js'
+  export default {
+    components:{
+      dialogView
+    },
+    props: {
+      data: {
+        type: Object,
+      },
+      width:{
+        type:String,
+        default:"20%"
+      },
+      height:{
+        type:String,
+        default: window.screen.height/4+"px"
+      },
+      id:{
+        type:String,
+        default:"s12fengXian"
+      },
+      click:{
+        type:String,
+        default:'true'
+      },
+    },
+    data () {
+      return {
+        title:'实验室活动风险识别与控制计划数量',
+        dialogOff:false,
+        measured:[]
+      }
+    },
+    mounted(){
+      this.drawLine();
+    },
+    methods: {
+      close(){
+        this.dialogOff = false
+      },
+      /* 跳转统计页面*/
+      toDetailed(){
+        if(this.click == "true"){
+        this.dialogOff = true
+       }
+      },
+      drawLine(){
+
+        // let beginInof = Number(this.data.t_complaintBegin.number)
+        // let endInof = Number(this.data.t_complaintEnd.number)
+        let s12fengXian = echarts.init(document.getElementById(this.id))
+        // let beingDate=this.data.t_complaintBegin.date
+        // let endDate=this.data.t_complaintEnd.date
+        var option;
+
+        //v3
+        let e=[this.data.t_mjsyshdfxsbykzjhxbNum.numberAll[0],this.data.t_mjsyshdfxsbykzjhxbNum.number[0]]
+        // let e=[this.data.t_mjsyshdfxsbykzjhxbNum.number[0],this.data.t_mjsyshdfxsbykzjhxbNum.numberAll[0],this.data.t_mjsyshdfxsbykzjhxbNum.res[0]]
+
+        option = {
+            legend: {},
+            tooltip: {
+              trigger: 'axis',
+              axisPointer: {
+                type: 'shadow'
+              },
+              // formatter: function (params) {
+              //   return params[0].data[0] + '<br/>满意份数：' + params[0].data[1] + '<br/>调查总份数: ' + params[0].data[2];
+              // }
+            },
+            // dataset: {
+            //   source: barData
+            // },
+            xAxis: { 
+              type: 'category',
+              data:[ '实验室活动风险识别与控制计划总数','实验室活动风险识别与控制计划已完成数量']
+              // data:['已完成', '总数量', '完成率']
+            },
+            yAxis: [
+              {
+                type: 'value',
+                scale: true,
+                name: '数量',
+                max: this.data.t_mjsyshdfxsbykzjhxbNum.number[0]>this.data.t_mjsyshdfxsbykzjhxbNum.numberAll[0]?this.data.t_mjsyshdfxsbykzjhxbNum.number[0]+1:this.data.t_mjsyshdfxsbykzjhxbNum.numberAll[0]+1,
+                min: 0,
+                // boundaryGap: [0.2, 0.2]
+              },
+              // {
+              //   type: 'value',
+              //   scale: true,
+              //   name: '完成率',
+              //   max: this.data.t_mjsyshdfxsbykzjhxbNum.res[0],
+              //   min: 0,
+              //   axisLabel: {
+              //     formatter: '{value} %'
+              //   }
+              // }
+            ],
+            series: [
+              {
+                data: e,
+                type: 'bar',
+                barWidth: '20%',
+
+                itemStyle: {
+                  color: '#cc6633'
+                },
+                label: {
+                show: true,
+                position: 'top'
+              },
+              }
+            ],
+            grid: {
+              top: '20%',
+              left: '3%',
+              right: '4%',
+              bottom: '10%',
+              containLabel: true
+            },
+            title: {
+              text: this.title,
+              textStyle:{ fontSize:14 }
+
+              // subtext: "        "+beingDate+"-"+endDate
+            }
+        };
+
+        option && s12fengXian.setOption(option);
+      }
+    }
+  }
+</script>
+<style scoped>
+  #s12fengXian:hover{
+    transition: all 0.5s;
+    transform:scale(1.03);
+  }
+  .statisticsPage{
+     box-shadow: 0 2px 12px 0 rgba(0, 0, 0, 0.1);
+     float: left;
+  }
+</style>

src/views/statistics/item/s13shengwuCol.vue

@@ -0,0 +1,237 @@
+<template>
+  <div class="statisticsPage" :style="{width:width}">
+    <div :id="id" :style="{height:height}"/>
+    <!-- 打开详情弹窗-->
+    <div v-if="dialogOff">
+      <dialogView
+        :dialogOff = "dialogOff"
+        @close = "close"
+        :title="title"
+        :data="data"
+      />
+    </div>
+  </div>
+</template>
+
+<script>
+  import echarts from 'echarts'
+  import dialogView from '../properties/s3tousuPro.vue'
+  import {GetPercent,GetMax} from  '../js/config.js'
+  export default {
+    components:{
+      dialogView
+    },
+    props: {
+      data: {
+        type: Object,
+      },
+      width:{
+        type:String,
+        default:"20%"
+      },
+      height:{
+        type:String,
+        default: window.screen.height/5+"px"
+      },
+      id:{
+        type:String,
+        default:"s13shengwu"
+      },
+      click:{
+        type:String,
+        default:'true'
+      },
+    },
+    data () {
+      return {
+        title:'生物安全事故',
+        dialogOff:false,
+        measured:[]
+      }
+    },
+    mounted(){
+      this.drawLine();
+    },
+    methods: {
+      close(){
+        this.dialogOff = false
+      },
+      /* 跳转统计页面*/
+      toDetailed(){
+        if(this.click == "true"){
+        this.dialogOff = true
+       }
+      },
+      drawLine(){
+
+        // let beginInof = Number(this.data.t_complaintBegin.number)
+        // let endInof = Number(this.data.t_complaintEnd.number)
+        let s13shengwu = echarts.init(document.getElementById(this.id))
+        // let beingDate=this.data.t_complaintBegin.date
+        // let endDate=this.data.t_complaintEnd.date
+        var option;
+        //v2
+        // let that = this
+        // for (let i = 0; i < that.data.t_complaintNum.date.length; i++) {
+        //   let result = 0
+        //   if(that.data.t_mjwtsqbNum.number[i] === 0){
+        //     result = Math.floor(that.data.t_complaintNum.number[i]/1 * 10000) / 100
+        //   }else{
+        //     result = Math.floor(that.data.t_complaintNum.number[i]/that.data.t_mjwtsqbNum.number[i] * 10000) / 100
+        //   }
+        //   that.measured.push(result)
+        //   // console.log(that.data.t_complaintNum.number[i], that.data.t_mjwtsqbNum.number[i], result, 'res')
+        // }
+        //v3
+        //  let e=[this.data.t_complaintNum.number[0],this.data.t_complaintNum.numberAll[0],this.data.t_complaintNum.res[0]]
+
+        option = {
+          //v3
+              legend: {},
+            tooltip: {
+              trigger: 'axis',
+              axisPointer: {
+                type: 'shadow'
+              },
+              // formatter: function (params) {
+              //   return params[0].data[0] + '<br/>满意份数：' + params[0].data[1] + '<br/>调查总份数: ' + params[0].data[2];
+              // }
+            },
+            // dataset: {
+            //   source: barData
+            // },
+            xAxis: { type: 'category',data:['安全事故数量']},
+            yAxis: [
+              {
+                type: 'value',
+                scale: true,
+                name: '数量',
+                // max: this.data.t_complaintNum.number[0]>this.data.t_complaintNum.numberAll[0]?this.data.t_complaintNum.number[0]+1:this.data.t_complaintNum.numberAll[0]+1,
+                // min: 0,
+                // boundaryGap: [0.2, 0.2]
+              },
+              // {
+              //   type: 'value',
+              //   scale: true,
+              //   name: '客户投诉率',
+              //   max: this.data.t_complaintNum.res[0],
+              //   min: 0,
+              //   axisLabel: {
+              //     formatter: '{value} %'
+              //   }
+              // }
+            ],
+            // Declare several bar series, each will be mapped
+            // to a column of dataset.source by default.
+            // series: [{ type: 'bar' }],
+            series: [
+              {
+                data: [0],
+                type: 'bar',
+                itemStyle: {
+                  color: '#cccc33'
+                },
+                label: {
+                  show: true,
+                  position: 'top'
+                },
+              }
+            ],
+            grid: {
+              top: '30%',
+              left: '3%',
+              right: '4%',
+              bottom: '10%',
+              containLabel: true
+            },
+            title: {
+              text: this.title,
+              textStyle:{ fontSize:14 }
+
+              // subtext: "        "+beingDate+"-"+endDate
+            },
+          //v2
+        //   rotate: {
+        //     min: -90,
+        //     max: 90
+        //   },
+        //   grid: {
+        //         top: '20%',
+        //         left: '3%',
+        //         right: '4%',
+        //         bottom: '10%',
+        //         containLabel: true
+        //     },
+        //   title: {
+        //      text: this.title,
+        //      subtext: '    '+this.data.t_complaintNum.date[0]+'-'+this.data.t_complaintNum.date[this.data.t_complaintNum.date.length-1],
+        //    },
+        //  xAxis: {
+        //    type: 'category',
+        //    data: this.data.t_complaintNum.date
+        //  },
+        //  yAxis: {
+        //   //  max:this.data.t_complaintBegin.number>this.data.t_complaintEnd.number?this.data.t_complaintBegin.number+1:this.data.t_complaintEnd.number+1,
+        //   // max: Math.max(...this.measured),
+        //   // min:0,
+        //   type: 'value',
+        //   axisLabel: {
+        //     show: true,
+        //     textStyle:{color:'#000'},
+        //     interval: 'auto',
+        //     formatter: '{value} %'
+        //   },
+        //  },
+        //  tooltip: {
+        //         trigger: 'axis',
+        //         axisPointer: {
+        //           type: 'shadow'
+        //         },
+        //         formatter: function (params) {
+        //           // console.log(params,'tousu ')
+        //           return params[0].axisValue + '<br/>客户投诉率：' + params[0].data;
+        //         }
+        //         // formatter: 
+        //         // function (datas) {
+        //         //     let year1 = datas[0].dataIndex==0||datas[0].dataIndex==2;
+        //         //     var res=(year1?beingDate+':':endDate+':')+datas[0].name+':'+datas[0].value
+        //         //     return res
+        //         // }
+        //  },
+        //  series: [
+        //    {
+        //      itemStyle: {
+        //             normal: {
+        //                 color: function(params) {
+        //                     var colorList = [
+        //                       '#F0805A','#B5C334','#FCCE10','#E87C25','#27727B',
+        //                        '#FE8463','#9BCA63','#FAD860','#F3A43B','#60C0DD',
+        //                        '#D7504B','#C6E579','#F4E001','#F0805A','#26C0C0'
+        //                     ];
+        //                     return colorList[params.dataIndex]
+        //                 },
+        //             }
+        //         },
+
+        //      data: this.measured,
+        //      type: 'bar',
+        //      barWidth:50
+        //    }
+        //  ]
+       };
+
+       option && s13shengwu.setOption(option);
+      }
+    }
+  }
+</script>
+<style scoped>
+  #s13shengwu:hover{
+    transition: all 0.5s;
+    transform:scale(1.03);
+  }
+  .statisticsPage{
+     box-shadow: 0 2px 12px 0 rgba(0, 0, 0, 0.1);
+     float: left;
+  }
+</style>

src/views/statistics/item/s1jianCe.vue

@@ -28,11 +28,11 @@
       },
       width:{
         type:String,
-        default:"20%"
+        default:"25%"
       },
       height:{
         type:String,
-        default: window.screen.height/4+"px"
+        default: window.screen.height/5+"px"
       },
       id:{
         type:String,
@@ -45,7 +45,7 @@
     },
     data () {
       return {
-        title:'检测质量达成目标',
+        title:'检测报告差错率',
         dialogOff:false,
       }
     },
@@ -81,153 +81,40 @@
         // //  dataAxis.push("完成率");
         //  let beingDate=this.data.t_gdyrqcwt5Begin.date
         //  let endDate=this.data.t_gdyrqcwt5End.date
-        let e=[this.data.t_mjjcbgNum.number[0],this.data.t_mjjcbgNum.numberAll[0],this.data.t_mjjcbgNum.res[0]]
-
+        // let e=[this.data.t_mjjcbgNum.number[0],this.data.t_mjjcbgNum.numberAll[0],this.data.t_mjjcbgNum.res[0]]
+        
+        let e = 100 -this.data.t_mjjcbgNum.res[0]
         let option = {
         //v3
-            legend: {},
-            tooltip: {
-              trigger: 'axis',
-              axisPointer: {
-                type: 'shadow'
-              },
-              // formatter: function (params) {
-              //   return params[0].data[0] + '<br/>满意份数：' + params[0].data[1] + '<br/>调查总份数: ' + params[0].data[2];
-              // }
-            },
-            // dataset: {
-            //   source: barData
-            // },
-            xAxis: { type: 'category',data:['报告差错数', '报告总数', '差错率']},
-            yAxis: [
-              {
-                type: 'value',
-                scale: true,
-                name: '数量',
-                max: this.data.t_mjjcbgNum.number[0]>this.data.t_mjjcbgNum.numberAll[0]?this.data.t_mjjcbgNum.number[0]+1:this.data.t_mjjcbgNum.numberAll[0]+1,
-                min: 0,
-                // boundaryGap: [0.2, 0.2]
+          title: {
+            text: this.title,
+            // subtext: 'Fake Data',
+            left: 'left',
+            textStyle:{ fontSize:14 }
+          },
+          tooltip: {
+            trigger: 'item'
+          },
+          series: [
+            {
+              type: 'pie',
+              radius: '50%',
+              label: {
+                formatter: '{b}: {d}%'
               },
-              {
-                type: 'value',
-                scale: true,
-                name: '差错率',
-                max: this.data.t_mjjcbgNum.res[0],
-                min: 0,
-                axisLabel: {
-                  formatter: '{value} %'
-                }
-              }
-            ],
-            // Declare several bar series, each will be mapped
-            // to a column of dataset.source by default.
-            // series: [{ type: 'bar' }],
-            series: [
-              {
-                data: e,
-                type: 'bar',
+              data: [
+                { value: this.data.t_mjjcbgNum.res[0], name: '检测报告差错率' },
+                { value: e, name: '检测报告正确率' }
+              ],
+              emphasis: {
                 itemStyle: {
-                  color: '#9933cc'
-                },
-                label: {
-                  show: true,
-                  position: 'top'
-                },
+                  shadowBlur: 10,
+                  shadowOffsetX: 0,
+                  shadowColor: 'rgba(0, 0, 0, 0.5)'
+                }
               }
-            ],
-            grid: {
-              top: '20%',
-              left: '3%',
-              right: '4%',
-              bottom: '10%',
-              containLabel: true
-            },
-            title: {
-              text: this.title,
-              // subtext: "        "+beingDate+"-"+endDate
-            },
-        //v1
-        //   grid: {
-        //                top: '20%',
-        //                left: '3%',
-        //                right: '4%',
-        //                bottom: '10%',
-        //                containLabel: true
-        //            },
-        //  title: {
-        //    text: this.title,
-        //    subtext: "        "+beingDate+"-"+endDate+"年"
-        //  },
-        //  xAxis: {
-        //    data: dataAxis,
-        //    axisLabel: {
-        //      inside: true,
-        //      color: '#000'
-        //    },
-        //    axisTick: {
-        //      show: true
-        //    },
-        //    axisLine: {
-        //      show: true
-        //    },
-        //    axisLabel:{
-        //       interval:0
-        //     },
-        //    z: 10
-        //  },
-        //  yAxis: {
-        //    axisLine: {
-        //      show: false
-        //    },
-        //    axisTick: {
-        //      show: false
-        //    },
-        //    axisLabel: {
-        //                           show: true,
-        //                           textStyle:{color:'#000'},
-        //                           interval: 'auto',
-        //                           formatter: '{value} %'
-        //                           },
-        //  },
-        //  dataZoom: [
-        //    {
-        //      type: 'inside'
-        //    }
-        //  ],
-        //  tooltip: {
-        //         trigger: 'axis',
-        //         axisPointer: {
-        //           type: 'shadow'
-        //         },
-        //         formatter: function (datas) {
-        //             let year1 = datas[0].dataIndex==0||datas[0].dataIndex==2;
-        //             var res=(year1?beingDate+':':endDate+':')+datas[0].name+':'+datas[0].value+"%"
-        //             return res
-        //         }
-        //  },
-        //  series: [
-        //    {
-        //      type: 'bar',
-        //      showBackground: true,
-        //      itemStyle: {
-        //        color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
-        //          { offset: 0, color: '#83bff6' },
-        //          { offset: 0.5, color: '#188df0' },
-        //          { offset: 1, color: '#188df0' }
-        //        ])
-        //      },
-        //      emphasis: {
-        //        itemStyle: {
-        //          color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
-        //            { offset: 0, color: '#2378f7' },
-        //            { offset: 0.7, color: '#2378f7' },
-        //            { offset: 1, color: '#83bff6' }
-        //          ])
-        //        }
-        //      },
-        //      data: data
-        //    }
-        //  ]
+            }
+          ]
        };
        option && s1jianCe.setOption(option);
       }

src/views/statistics/item/s1jianCeColumnar.vue

@@ -0,0 +1,254 @@
+<template>
+  <div @click="toDetailed()" class="statisticsPage" :style="{width:width}">
+    <div :id="id" :style="{height:height}"/>
+    <!-- 打开详情弹窗-->
+    <div v-if="dialogOff">
+      <dialogView
+        :dialogOff = "dialogOff"
+        @close = "close"
+        :title="title"
+        :data="data"
+      />
+    </div>
+  </div>
+</template>
+
+<script>
+  import echarts from 'echarts'
+  import dialogView from '../properties/s1jianCePro.vue'
+  import {GetPercent,GetMax} from  '../js/config.js'
+
+  export default {
+    components:{
+      dialogView
+    },
+    props: {
+      data: {
+        type: Object,
+      },
+      width:{
+        type:String,
+        default:"20%"
+      },
+      height:{
+        type:String,
+        default: window.screen.height/4+"px"
+      },
+      id:{
+        type:String,
+        default:"s1jianCe"
+      },
+      click:{
+        type:String,
+        default:'true'
+      },
+    },
+    data () {
+      return {
+        title:'检测报告差错数量',
+        dialogOff:false,
+      }
+    },
+    mounted(){
+      this.drawLine();
+    },
+    methods: {
+      close(){
+        this.dialogOff = false
+      },
+      /* 跳转统计页面*/
+      toDetailed(){
+        if(this.click == "true"){
+        this.dialogOff = true
+       }
+      },
+      drawLine(){
+        var echarts = require('echarts');
+        let s1jianCe = echarts.init(document.getElementById(this.id))
+
+        //  let data = [];
+
+        //  data.push(Number(this.data.t_gdyrqcwt5Begin.number<0?0-this.data.t_gdyrqcwt5Begin.number:this.data.t_gdyrqcwt5Begin.number)*100)
+        //  data.push(Number(this.data.t_gdyrqcwt5End.number<0?0-this.data.t_gdyrqcwt5End.number:this.data.t_gdyrqcwt5End.number)*100)
+        //  data.push(Number(this.data.t_gdyrqcwt6Begin.number<0?0-this.data.t_gdyrqcwt6Begin.number:this.data.t_gdyrqcwt6Begin.number)*100)
+        //  data.push(Number(this.data.t_gdyrqcwt6End.number<0?0-this.data.t_gdyrqcwt6End.number:this.data.t_gdyrqcwt6End.number)*100)
+
+        //  let dataAxis = [];
+
+        //  dataAxis.push("准确率");
+        //  dataAxis.push("准确率");
+        //  dataAxis.push("完成率");
+        // //  dataAxis.push("完成率");
+        //  let beingDate=this.data.t_gdyrqcwt5Begin.date
+        //  let endDate=this.data.t_gdyrqcwt5End.date
+        // let e=[this.data.t_mjjcbgNum.number[0],this.data.t_mjjcbgNum.numberAll[0],this.data.t_mjjcbgNum.res[0]]
+        let e=[this.data.t_mjjcbgNum.numberAll[0],this.data.t_mjjcbgNum.number[0]]
+
+
+        let option = {
+        //v3
+            legend: {},
+            tooltip: {
+              trigger: 'axis',
+              axisPointer: {
+                type: 'shadow'
+              },
+              // formatter: function (params) {
+              //   return params[0].data[0] + '<br/>满意份数：' + params[0].data[1] + '<br/>调查总份数: ' + params[0].data[2];
+              // }
+            },
+            // dataset: {
+            //   source: barData
+            // },
+            xAxis: { 
+              type: 'category',
+              // data:['报告差错数', '报告总数', '差错率']
+              data:['检测报告总数','检测报告差错数']
+            },
+            yAxis: [
+              {
+                type: 'value',
+                scale: true,
+                name: '数量',
+                max: this.data.t_mjjcbgNum.number[0]>this.data.t_mjjcbgNum.numberAll[0]?this.data.t_mjjcbgNum.number[0]+1:this.data.t_mjjcbgNum.numberAll[0]+1,
+                min: 0,
+                // boundaryGap: [0.2, 0.2]
+              },
+              // {
+              //   type: 'value',
+              //   scale: true,
+              //   name: '差错率',
+              //   max: this.data.t_mjjcbgNum.res[0],
+              //   min: 0,
+              //   axisLabel: {
+              //     formatter: '{value} %'
+              //   }
+              // }
+            ],
+            // Declare several bar series, each will be mapped
+            // to a column of dataset.source by default.
+            // series: [{ type: 'bar' }],
+            series: [
+              {
+                data: e,
+                type: 'bar',
+                barWidth: '20%',
+                itemStyle: {
+                  color: '#9933cc'
+                },
+                label: {
+                  show: true,
+                  position: 'top'
+                },
+              }
+            ],
+            grid: {
+              top: '20%',
+              left: '3%',
+              right: '4%',
+              bottom: '10%',
+              containLabel: true
+            },
+            title: {
+              text: this.title,
+              textStyle:{ fontSize:14 }
+              // subtext: "        "+beingDate+"-"+endDate
+            },
+        //v1
+        //   grid: {
+        //                top: '20%',
+        //                left: '3%',
+        //                right: '4%',
+        //                bottom: '10%',
+        //                containLabel: true
+        //            },
+        //  title: {
+        //    text: this.title,
+        //    subtext: "        "+beingDate+"-"+endDate+"年"
+        //  },
+        //  xAxis: {
+        //    data: dataAxis,
+        //    axisLabel: {
+        //      inside: true,
+        //      color: '#000'
+        //    },
+        //    axisTick: {
+        //      show: true
+        //    },
+        //    axisLine: {
+        //      show: true
+        //    },
+        //    axisLabel:{
+        //       interval:0
+        //     },
+        //    z: 10
+        //  },
+        //  yAxis: {
+        //    axisLine: {
+        //      show: false
+        //    },
+        //    axisTick: {
+        //      show: false
+        //    },
+        //    axisLabel: {
+        //                           show: true,
+        //                           textStyle:{color:'#000'},
+        //                           interval: 'auto',
+        //                           formatter: '{value} %'
+        //                           },
+        //  },
+        //  dataZoom: [
+        //    {
+        //      type: 'inside'
+        //    }
+        //  ],
+        //  tooltip: {
+        //         trigger: 'axis',
+        //         axisPointer: {
+        //           type: 'shadow'
+        //         },
+        //         formatter: function (datas) {
+        //             let year1 = datas[0].dataIndex==0||datas[0].dataIndex==2;
+        //             var res=(year1?beingDate+':':endDate+':')+datas[0].name+':'+datas[0].value+"%"
+        //             return res
+        //         }
+        //  },
+        //  series: [
+        //    {
+        //      type: 'bar',
+        //      showBackground: true,
+        //      itemStyle: {
+        //        color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
+        //          { offset: 0, color: '#83bff6' },
+        //          { offset: 0.5, color: '#188df0' },
+        //          { offset: 1, color: '#188df0' }
+        //        ])
+        //      },
+        //      emphasis: {
+        //        itemStyle: {
+        //          color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
+        //            { offset: 0, color: '#2378f7' },
+        //            { offset: 0.7, color: '#2378f7' },
+        //            { offset: 1, color: '#83bff6' }
+        //          ])
+        //        }
+        //      },
+        //      data: data
+        //    }
+        //  ]
+       };
+       option && s1jianCe.setOption(option);
+      }
+    }
+  }
+</script>
+<style scoped>
+  #s1jianCe:hover{
+    transition: all 0.5s;
+    transform:scale(1.03);
+  }
+  .statisticsPage{
+     box-shadow: 0 2px 12px 0 rgba(0, 0, 0, 0.1);
+     float: left;
+  }
+</style>

src/views/statistics/item/s1zhiLiangMuBiao.vue

@@ -29,11 +29,11 @@
       },
       width:{
         type:String,
-        default:"20%"
+        default:"25%"
       },
       height:{
         type:String,
-        default: window.screen.height/4+"px"
+        default: window.screen.height/5+"px"
       },
       id:{
         type:String,
@@ -46,7 +46,7 @@
     },
     data () {
       return {
-        title:'任务及时完成率',
+        title:'检测任务及时完成率',
         dialogOff:false,
       }
     },
@@ -66,123 +66,10 @@
       drawLine(){
         let s5zhiLiangMuBiao = echarts.init(document.getElementById(this.id))
 
-        // let data1 = [];
-        // data1.push(0);
-        // data1.push(0);
-        // let data2 = [];
-        // data2.push(83);
-        // data2.push(90);
-        // let data3 = [];
-        // data3.push(70);
-        // data3.push(60);
-        // let data4 = [];
-        // data4.push(2021);
-        // data4.push(2022);
-        // const posList = [
-        //   'left',
-        //   'right',
-        //   'top',
-        //   'bottom',
-        //   'inside',
-        //   'insideTop',
-        //   'insideLeft',
-        //   'insideRight',
-        //   'insideBottom',
-        //   'insideTopLeft',
-        //   'insideTopRight',
-        //   'insideBottomLeft',
-        //   'insideBottomRight'
-        // ];
-        // app.configParameters = {
-        //   rotate: {
-        //     min: -90,
-        //     max: 90
-        //   },
-        //   align: {
-        //     options: {
-        //       left: 'left',
-        //       center: 'center',
-        //       right: 'right'
-        //     }
-        //   },
-        //   verticalAlign: {
-        //     options: {
-        //       top: 'top',
-        //       middle: 'middle',
-        //       bottom: 'bottom'
-        //     }
-        //   },
-        //   position: {
-        //     options: posList.reduce(function (map, pos) {
-        //       map[pos] = pos;
-        //       return map;
-        //     }, {})
-        //   },
-        //   distance: {
-        //     min: 0,
-        //     max: 100
-        //   }
-        // };
-        // app.config = {
-        //   rotate: 90,
-        //   align: 'left',
-        //   verticalAlign: 'center',
-        //   position: 'bottom',
-        //   distance: 0,
-        //   onChange: function () {
-        //     const labelOption = {
-        //       rotate: app.config.rotate,
-        //       align: app.config.align,
-        //       verticalAlign: app.config.verticalAlign,
-        //       position: app.config.position,
-        //       distance: app.config.distance,
-        //       color:'#FE8463'
-        //     };
-        //     myChart.setOption({
-        //       series: [
-        //         {
-        //           label: labelOption
-        //         },
-        //         {
-        //           label: labelOption
-        //         },
-        //         {
-        //           label: labelOption
-        //         },
-        //         {
-        //           label: labelOption
-        //         }
-        //       ]
-        //     });
-        //   }
-        // };
-        // const labelOption = {
-        //   show: true,
-        //   position: app.config.position,
-        //   distance: app.config.distance,
-        //   align: app.config.align,
-        //   verticalAlign: app.config.verticalAlign,
-        //   rotate: app.config.rotate,
-        //   formatter: '{c}  {name|{a}}',
-        //   fontSize: 14,
-        //   rich: {
-        //       name: {
-        //           textBorderColor: '#fff'
-        //       }
-        //   },
-        //   color:'#FE8463'
-        // };
         // let barData = []
         // for (let i = 0; i < this.data.t_jchzbNum.date.length; i++) {
-        //   let e=[this.data.t_jchzbNum.date[i],this.data.t_jchzbNum.number[i],this.data.t_jchzbNum.numberAll[i]]
-        //   barData.push(e)
-        // }
-        // }
-
-        // let barData = []
-        // for (let i = 0; i < this.data.t_jchzbNum.date.length; i++) {
-          let e=[]
-          e=[this.data.t_jchzbNum.number[0],this.data.t_jchzbNum.numberAll[0],this.data.t_jchzbNum.res[0]]
+          // let e=[]
+          // e=[this.data.t_jchzbNum.number[0],this.data.t_jchzbNum.numberAll[0],this.data.t_jchzbNum.res[0]]
           // if (this.data.t_jchzbNum.numberAll[i]===0) {
           //   e =[this.data.t_jchzbNum.date[i], 0]
           // } else {
@@ -190,97 +77,90 @@
           // }
           // barData.push(e)
         // }
+        let e = 100 -this.data.t_jchzbNum.res[0]
+
         let option = {
-          //v3
-          legend: {},
-            tooltip: {
-              trigger: 'axis',
-              axisPointer: {
-                type: 'shadow'
-              },
-              // formatter: function (params) {
-              //   return params[0].data[0] + '<br/>满意份数：' + params[0].data[1] + '<br/>调查总份数: ' + params[0].data[2];
-              // }
-            },
-            // dataset: {
-            //   source: barData
-            // },
-            xAxis: { type: 'category',data:['按时完成数', '有效任务数', '及时完成率']},
-            yAxis: [
-              {
-                type: 'value',
-                scale: true,
-                name: '数量',
-                max: this.data.t_jchzbNum.number[0]>this.data.t_jchzbNum.numberAll[0]?this.data.t_jchzbNum.number[0]+1:this.data.t_jchzbNum.numberAll[0]+1,
-                min: 0,
-                // boundaryGap: [0.2, 0.2]
+          title: {
+            text: this.title,
+            // subtext: 'Fake Data',
+            left: 'left',
+            textStyle:{ fontSize:14 }
+          },
+          tooltip: {
+            trigger: 'item'
+          },
+          color:['#ffcc00','#66cc66'],
+          series: [
+            {
+              type: 'pie',
+              radius: '50%',
+              label: {
+                formatter: '{b}: {d}%'
               },
-              {
-                type: 'value',
-                scale: true,
-                name: '任务及时完成率',
-                max: this.data.t_jchzbNum.res[0],
-                min: 0,
-                axisLabel: {
-                  formatter: '{value} %'
-                }
-              }
-            ],
-            // Declare several bar series, each will be mapped
-            // to a column of dataset.source by default.
-            // series: [{ type: 'bar' }],
-            series: [
-              {
-                data: e,
-                type: 'bar',
+              data: [
+                { value: this.data.t_jchzbNum.res[0], name: '检测任务及时完成率' },
+                { value: e, name: '检测任务未及时完成率' }
+              ],
+              emphasis: {
                 itemStyle: {
-                  color: '#0099ff'
-                },
-                label: {
-                  show: true,
-                  position: 'top'
-                },
+                  shadowBlur: 10,
+                  shadowOffsetX: 0,
+                  shadowColor: 'rgba(0, 0, 0, 0.5)'
+                }
               }
-            ],
-            grid: {
-              top: '20%',
-              left: '3%',
-              right: '4%',
-              bottom: '10%',
-              containLabel: true
-            },
-            title: {
-              text: this.title,
-              // subtext: "        "+beingDate+"-"+endDate
-            },
-          //v2
-          //  legend: {},
+            }
+          ]
+          //v3
+          // legend: {},
           //   tooltip: {
           //     trigger: 'axis',
           //     axisPointer: {
           //       type: 'shadow'
           //     },
-          //     formatter: function (params) {
-          //       return params[0].data[0] + '<br/>任务完成率：' + params[0].data[1];
-          //     }
-          //   },
-          //   dataset: {
-          //     source: barData
+          //     // formatter: function (params) {
+          //     //   return params[0].data[0] + '<br/>满意份数：' + params[0].data[1] + '<br/>调查总份数: ' + params[0].data[2];
+          //     // }
           //   },
-          //   xAxis: { type: 'category' },
-          //   yAxis: {
-          //     type: 'value',
-          //     axisLabel: {
-          //       show: true,
-          //       textStyle:{color:'#000'},
-          //       interval: 'auto',
-          //       formatter: '{value} %'
+          //   // dataset: {
+          //   //   source: barData
+          //   // },
+          //   xAxis: { type: 'category',data:['按时完成数', '有效任务数', '及时完成率']},
+          //   yAxis: [
+          //     {
+          //       type: 'value',
+          //       scale: true,
+          //       name: '数量',
+          //       max: this.data.t_jchzbNum.number[0]>this.data.t_jchzbNum.numberAll[0]?this.data.t_jchzbNum.number[0]+1:this.data.t_jchzbNum.numberAll[0]+1,
+          //       min: 0,
+          //       // boundaryGap: [0.2, 0.2]
           //     },
-            
-          //   },
+          //     {
+          //       type: 'value',
+          //       scale: true,
+          //       name: '任务及时完成率',
+          //       max: this.data.t_jchzbNum.res[0],
+          //       min: 0,
+          //       axisLabel: {
+          //         formatter: '{value} %'
+          //       }
+          //     }
+          //   ],
           //   // Declare several bar series, each will be mapped
           //   // to a column of dataset.source by default.
-          //   series: [{ type: 'bar',barWidth:50}],
+          //   // series: [{ type: 'bar' }],
+          //   series: [
+          //     {
+          //       data: e,
+          //       type: 'bar',
+          //       itemStyle: {
+          //         color: '#0099ff'
+          //       },
+          //       label: {
+          //         show: true,
+          //         position: 'top'
+          //       },
+          //     }
+          //   ],
           //   grid: {
           //     top: '20%',
           //     left: '3%',
@@ -290,88 +170,9 @@
           //   },
           //   title: {
           //     text: this.title,
-          //     subtext: "        "+this.data.t_jchzbNum.date[0]+"-"+this.data.t_jchzbNum.date[this.data.t_jchzbNum.date.length-1]
+          //     // subtext: "        "+beingDate+"-"+endDate
           //   },
 
-          //v1
-          // grid: {
-          //   top: '20%',
-          //   left: '3%',
-          //   right: '4%',
-          //   bottom: '10%',
-          //   containLabel: true
-          // },
-          // title: {
-          //   text: this.title,
-          //   subtext: "2021-2022年质量检测目标"
-          // },
-          // color : [
-          //   '#FE8463','#9BCA63','#FCCE10','#E87C25','#27727B',
-          //   '#FE8463','#9BCA63','#FAD860','#F3A43B','#60C0DD',
-          //   '#D7504B','#C6E579','#F4E001','#F0805A','#26C0C0'
-          // ],
-          // tooltip: {
-          //   trigger: 'axis',
-          //   axisPointer: {
-          //     type: 'shadow'
-          //   },
-          //   formatter: function (datas) {
-          //     var res='投诉处理率:'+datas[0].value+"%<BR>"
-          //     res+='满意度:'+datas[1].value+"%<BR>"
-          //     res+='培训完成率:'+datas[2].value+"%"
-          //     return res
-          //   }
-          // },
-          // legend: {show:false},
-          // xAxis: [
-          //   {
-          //     type: 'category',
-          //     axisTick: { show: false },
-          //     data: data4,
-          //     textStyle:{color:'#FE8463'},
-          //   }
-          // ],
-          // yAxis: [
-          //   {
-          //     type: 'value',
-          //     axisLabel: {
-          //       show: true,
-          //       textStyle:{color:'#000'},
-          //       interval: 'auto',
-          //       formatter: '{value} %'
-          //     },
-          //   }
-          // ],
-          // series: [
-          //   {
-          //     name: '投诉处理率',
-          //     type: 'bar',
-          //     barGap: 0,
-          //     label: labelOption,
-          //     emphasis: {
-          //       focus: 'series'
-          //     },
-          //     data: data1
-          //   },
-          //   {
-          //     name: '满意度',
-          //     type: 'bar',
-          //     label: labelOption,
-          //     emphasis: {
-          //       focus: 'series'
-          //     },
-          //     data:data2
-          //   },
-          //   {
-          //     name: '培训完成率',
-          //     type: 'bar',
-          //     label: labelOption,
-          //     emphasis: {
-          //       focus: 'series'
-          //     },
-          //     data:data3
-          //   }
-          // ]
         };
         option && s5zhiLiangMuBiao.setOption(option);
       }

src/views/statistics/item/s1zhiLiangMuBiaoCol.vue

@@ -0,0 +1,398 @@
+<template>
+  <div @click="toDetailed()" class="statisticsPage" :style="{width:width}">
+    <div :id="id" :style="{height:height}"/>
+    <!-- 打开详情弹窗-->
+    <!-- <div>2323</div> -->
+    <div v-if="dialogOff">
+      <dialogView
+        :dialogOff = "dialogOff"
+        @close = "close"
+        :title="title"
+        :data="data"
+      />
+    </div>
+  </div>
+</template>
+
+<script>
+  import echarts from 'echarts'
+  import {GetPercent,GetMax} from  '../js/config.js'
+  import dialogView from '../properties/s1zhiLiangMuBiaoPro.vue'
+
+  export default {
+    components:{
+      dialogView
+    },
+    props: {
+      data: {
+        type: Object,
+      },
+      width:{
+        type:String,
+        default:"25%"
+      },
+      height:{
+        type:String,
+        default: window.screen.height/5+"px"
+      },
+      id:{
+        type:String,
+        default:"s1zhiLiangMuBiao"
+      },
+      click:{
+        type:String,
+        default:'true'
+      },
+    },
+    data () {
+      return {
+        title:'检测任务及时完成数量',
+        dialogOff:false,
+      }
+    },
+    mounted(){
+      this.drawLine();
+    },
+    methods: {
+      close(){
+        this.dialogOff = false
+      },
+      /* 跳转统计页面*/
+      toDetailed(){
+        if(this.click == "true"){
+        this.dialogOff = true
+       }
+      },
+      drawLine(){
+        let s5zhiLiangMuBiao = echarts.init(document.getElementById(this.id))
+
+        // let data1 = [];
+        // data1.push(0);
+        // data1.push(0);
+        // let data2 = [];
+        // data2.push(83);
+        // data2.push(90);
+        // let data3 = [];
+        // data3.push(70);
+        // data3.push(60);
+        // let data4 = [];
+        // data4.push(2021);
+        // data4.push(2022);
+        // const posList = [
+        //   'left',
+        //   'right',
+        //   'top',
+        //   'bottom',
+        //   'inside',
+        //   'insideTop',
+        //   'insideLeft',
+        //   'insideRight',
+        //   'insideBottom',
+        //   'insideTopLeft',
+        //   'insideTopRight',
+        //   'insideBottomLeft',
+        //   'insideBottomRight'
+        // ];
+        // app.configParameters = {
+        //   rotate: {
+        //     min: -90,
+        //     max: 90
+        //   },
+        //   align: {
+        //     options: {
+        //       left: 'left',
+        //       center: 'center',
+        //       right: 'right'
+        //     }
+        //   },
+        //   verticalAlign: {
+        //     options: {
+        //       top: 'top',
+        //       middle: 'middle',
+        //       bottom: 'bottom'
+        //     }
+        //   },
+        //   position: {
+        //     options: posList.reduce(function (map, pos) {
+        //       map[pos] = pos;
+        //       return map;
+        //     }, {})
+        //   },
+        //   distance: {
+        //     min: 0,
+        //     max: 100
+        //   }
+        // };
+        // app.config = {
+        //   rotate: 90,
+        //   align: 'left',
+        //   verticalAlign: 'center',
+        //   position: 'bottom',
+        //   distance: 0,
+        //   onChange: function () {
+        //     const labelOption = {
+        //       rotate: app.config.rotate,
+        //       align: app.config.align,
+        //       verticalAlign: app.config.verticalAlign,
+        //       position: app.config.position,
+        //       distance: app.config.distance,
+        //       color:'#FE8463'
+        //     };
+        //     myChart.setOption({
+        //       series: [
+        //         {
+        //           label: labelOption
+        //         },
+        //         {
+        //           label: labelOption
+        //         },
+        //         {
+        //           label: labelOption
+        //         },
+        //         {
+        //           label: labelOption
+        //         }
+        //       ]
+        //     });
+        //   }
+        // };
+        // const labelOption = {
+        //   show: true,
+        //   position: app.config.position,
+        //   distance: app.config.distance,
+        //   align: app.config.align,
+        //   verticalAlign: app.config.verticalAlign,
+        //   rotate: app.config.rotate,
+        //   formatter: '{c}  {name|{a}}',
+        //   fontSize: 14,
+        //   rich: {
+        //       name: {
+        //           textBorderColor: '#fff'
+        //       }
+        //   },
+        //   color:'#FE8463'
+        // };
+        // let barData = []
+        // for (let i = 0; i < this.data.t_jchzbNum.date.length; i++) {
+        //   let e=[this.data.t_jchzbNum.date[i],this.data.t_jchzbNum.number[i],this.data.t_jchzbNum.numberAll[i]]
+        //   barData.push(e)
+        // }
+        // }
+
+        // let barData = []
+        // for (let i = 0; i < this.data.t_jchzbNum.date.length; i++) {
+          let e=[]
+          e=[this.data.t_jchzbNum.numberAll[0],this.data.t_jchzbNum.number[0]]
+          // if (this.data.t_jchzbNum.numberAll[i]===0) {
+          //   e =[this.data.t_jchzbNum.date[i], 0]
+          // } else {
+          //   e =[this.data.t_jchzbNum.date[i], Math.floor(this.data.t_jchzbNum.number[i]/this.data.t_jchzbNum.numberAll[i] * 10000) / 100]
+          // }
+          // barData.push(e)
+        // }
+        let option = {
+          //v3
+          legend: {},
+            tooltip: {
+              trigger: 'axis',
+              axisPointer: {
+                type: 'shadow'
+              },
+              // formatter: function (params) {
+              //   return params[0].data[0] + '<br/>满意份数：' + params[0].data[1] + '<br/>调查总份数: ' + params[0].data[2];
+              // }
+            },
+            // dataset: {
+            //   source: barData
+            // },
+            xAxis: { 
+              type: 'category',
+              // data:['按时完成数', '有效任务数', '及时完成率']
+              data:['有效检测任务总数', '按时完成的检测项目数量数量']
+
+            },
+            yAxis: [
+              {
+                type: 'value',
+                scale: true,
+                name: '数量',
+                max: this.data.t_jchzbNum.number[0]>this.data.t_jchzbNum.numberAll[0]?this.data.t_jchzbNum.number[0]+1:this.data.t_jchzbNum.numberAll[0]+1,
+                min: 0,
+                // boundaryGap: [0.2, 0.2]
+              },
+              // {
+              //   type: 'value',
+              //   scale: true,
+              //   name: '任务及时完成率',
+              //   max: this.data.t_jchzbNum.res[0],
+              //   min: 0,
+              //   axisLabel: {
+              //     formatter: '{value} %'
+              //   }
+              // }
+            ],
+            // Declare several bar series, each will be mapped
+            // to a column of dataset.source by default.
+            // series: [{ type: 'bar' }],
+            series: [
+              {
+                data: e,
+                type: 'bar',
+                barWidth: '20%',
+                itemStyle: {
+                  color: '#0099ff'
+                },
+                label: {
+                  show: true,
+                  position: 'top'
+                },
+              }
+            ],
+            grid: {
+              top: '20%',
+              left: '3%',
+              right: '4%',
+              bottom: '10%',
+              containLabel: true
+            },
+            title: {
+              text: this.title,
+              textStyle:{ fontSize:14 }
+
+              // subtext: "        "+beingDate+"-"+endDate
+            },
+          //v2
+          //  legend: {},
+          //   tooltip: {
+          //     trigger: 'axis',
+          //     axisPointer: {
+          //       type: 'shadow'
+          //     },
+          //     formatter: function (params) {
+          //       return params[0].data[0] + '<br/>任务完成率：' + params[0].data[1];
+          //     }
+          //   },
+          //   dataset: {
+          //     source: barData
+          //   },
+          //   xAxis: { type: 'category' },
+          //   yAxis: {
+          //     type: 'value',
+          //     axisLabel: {
+          //       show: true,
+          //       textStyle:{color:'#000'},
+          //       interval: 'auto',
+          //       formatter: '{value} %'
+          //     },
+            
+          //   },
+          //   // Declare several bar series, each will be mapped
+          //   // to a column of dataset.source by default.
+          //   series: [{ type: 'bar',barWidth:50}],
+          //   grid: {
+          //     top: '20%',
+          //     left: '3%',
+          //     right: '4%',
+          //     bottom: '10%',
+          //     containLabel: true
+          //   },
+          //   title: {
+          //     text: this.title,
+          //     subtext: "        "+this.data.t_jchzbNum.date[0]+"-"+this.data.t_jchzbNum.date[this.data.t_jchzbNum.date.length-1]
+          //   },
+
+          //v1
+          // grid: {
+          //   top: '20%',
+          //   left: '3%',
+          //   right: '4%',
+          //   bottom: '10%',
+          //   containLabel: true
+          // },
+          // title: {
+          //   text: this.title,
+          //   subtext: "2021-2022年质量检测目标"
+          // },
+          // color : [
+          //   '#FE8463','#9BCA63','#FCCE10','#E87C25','#27727B',
+          //   '#FE8463','#9BCA63','#FAD860','#F3A43B','#60C0DD',
+          //   '#D7504B','#C6E579','#F4E001','#F0805A','#26C0C0'
+          // ],
+          // tooltip: {
+          //   trigger: 'axis',
+          //   axisPointer: {
+          //     type: 'shadow'
+          //   },
+          //   formatter: function (datas) {
+          //     var res='投诉处理率:'+datas[0].value+"%<BR>"
+          //     res+='满意度:'+datas[1].value+"%<BR>"
+          //     res+='培训完成率:'+datas[2].value+"%"
+          //     return res
+          //   }
+          // },
+          // legend: {show:false},
+          // xAxis: [
+          //   {
+          //     type: 'category',
+          //     axisTick: { show: false },
+          //     data: data4,
+          //     textStyle:{color:'#FE8463'},
+          //   }
+          // ],
+          // yAxis: [
+          //   {
+          //     type: 'value',
+          //     axisLabel: {
+          //       show: true,
+          //       textStyle:{color:'#000'},
+          //       interval: 'auto',
+          //       formatter: '{value} %'
+          //     },
+          //   }
+          // ],
+          // series: [
+          //   {
+          //     name: '投诉处理率',
+          //     type: 'bar',
+          //     barGap: 0,
+          //     label: labelOption,
+          //     emphasis: {
+          //       focus: 'series'
+          //     },
+          //     data: data1
+          //   },
+          //   {
+          //     name: '满意度',
+          //     type: 'bar',
+          //     label: labelOption,
+          //     emphasis: {
+          //       focus: 'series'
+          //     },
+          //     data:data2
+          //   },
+          //   {
+          //     name: '培训完成率',
+          //     type: 'bar',
+          //     label: labelOption,
+          //     emphasis: {
+          //       focus: 'series'
+          //     },
+          //     data:data3
+          //   }
+          // ]
+        };
+        option && s5zhiLiangMuBiao.setOption(option);
+      }
+    }
+  }
+</script>
+<style scoped>
+  #s5zhiLiangMuBiao:hover{
+    transition: all 0.5s;
+    transform:scale(1.03);
+  }
+  .statisticsPage{
+     box-shadow: 0 2px 12px 0 rgba(0, 0, 0, 0.1);
+     float: left;
+  }
+</style>

src/views/statistics/item/s2manYiDu.vue

@@ -28,11 +28,11 @@
       },
       width:{
         type:String,
-        default:"20%"
+        default:"25%"
       },
       height:{
         type:String,
-        default: window.screen.height/4+"px"
+        default: window.screen.height/5+"px"
         // default: "100%"
       },
       id:{
@@ -87,72 +87,107 @@
         //   }
         //   barData.push(e)
         // }
-        let e=[this.data.t_khmydtjbNum.number[0],this.data.t_khmydtjbNum.numberAll[0],this.data.t_khmydtjbNum.res[0]]
+        // let e=[this.data.t_khmydtjbNum.number[0],this.data.t_khmydtjbNum.numberAll[0],this.data.t_khmydtjbNum.res[0]]
+        let e=100-this.data.t_khmydtjbNum.res[0]
 
         let beingDate=this.data.t_myddc2Begin.date
         let endDate=this.data.t_myddc2End.date
         let option = {
-            legend: {},
-            tooltip: {
-              trigger: 'axis',
-              axisPointer: {
-                type: 'shadow'
-              },
-              // formatter: function (params) {
-              //   return params[0].data[0] + '<br/>满意份数：' + params[0].data[1] + '<br/>调查总份数: ' + params[0].data[2];
-              // }
-            },
-            // dataset: {
-            //   source: barData
-            // },
-            xAxis: { type: 'category',data:['满意份数', '调查份数', '满意度']},
-            yAxis: [
-              {
-                type: 'value',
-                scale: true,
-                name: '份数',
-                max: this.data.t_khmydtjbNum.number[0]>this.data.t_khmydtjbNum.numberAll[0]?this.data.t_khmydtjbNum.number[0]+1:this.data.t_khmydtjbNum.numberAll[0]+1,
-                min: 0,
-                // boundaryGap: [0.2, 0.2]
+            title: {
+            text: this.title,
+            // subtext: 'Fake Data',
+            left: 'left',
+            textStyle:{ fontSize:14 }
+          },
+          tooltip: {
+            trigger: 'item'
+          },
+          color:['#00ccff','#cc3333'],
+          series: [
+            {
+              type: 'pie',
+              radius: '50%',
+              label: {
+                formatter: '{b}: {d}%'
               },
-              {
-                type: 'value',
-                scale: true,
-                name: '满意度',
-                max: this.data.t_khmydtjbNum.res[0],
-                min: 0,
-                axisLabel: {
-                  formatter: '{value} %'
-                }
-              }
-            ],
-            // Declare several bar series, each will be mapped
-            // to a column of dataset.source by default.
-            // series: [{ type: 'bar' }],
-            series: [
-              {
-                data: e,
-                type: 'bar',
+              data: [
+                { value: this.data.t_khmydtjbNum.res[0], name: '客户满意率' },
+                { value: e, name: '客户不满意率' }
+              ],
+              emphasis: {
                 itemStyle: {
-                  color: '#66CCCC'
-                },
-                label: {
-                  show: true,
-                  position: 'top'
-                },
+                  shadowBlur: 10,
+                  shadowOffsetX: 0,
+                  shadowColor: 'rgba(0, 0, 0, 0.5)'
+                }
               }
-            ],
-            grid: {
-              top: '20%',
-              left: '3%',
-              right: '4%',
-              bottom: '10%',
-              containLabel: true
-            },
-            title: {
-              text: this.title,
-              // subtext: "        "+beingDate+"-"+endDate
-            },
+            }
+          ]
+
+
+            //v3
+            // legend: {},
+            // tooltip: {
+            //   trigger: 'axis',
+            //   axisPointer: {
+            //     type: 'shadow'
+            //   },
+            //   // formatter: function (params) {
+            //   //   return params[0].data[0] + '<br/>满意份数：' + params[0].data[1] + '<br/>调查总份数: ' + params[0].data[2];
+            //   // }
+            // },
+            // // dataset: {
+            // //   source: barData
+            // // },
+            // xAxis: { type: 'category',data:['满意份数', '调查份数', '满意度']},
+            // yAxis: [
+            //   {
+            //     type: 'value',
+            //     scale: true,
+            //     name: '份数',
+            //     max: this.data.t_khmydtjbNum.number[0]>this.data.t_khmydtjbNum.numberAll[0]?this.data.t_khmydtjbNum.number[0]+1:this.data.t_khmydtjbNum.numberAll[0]+1,
+            //     min: 0,
+            //     // boundaryGap: [0.2, 0.2]
+            //   },
+            //   {
+            //     type: 'value',
+            //     scale: true,
+            //     name: '满意度',
+            //     max: this.data.t_khmydtjbNum.res[0],
+            //     min: 0,
+            //     axisLabel: {
+            //       formatter: '{value} %'
+            //     }
+            //   }
+            // ],
+            // // Declare several bar series, each will be mapped
+            // // to a column of dataset.source by default.
+            // // series: [{ type: 'bar' }],
+            // series: [
+            //   {
+            //     data: e,
+            //     type: 'bar',
+            //     itemStyle: {
+            //       color: '#66CCCC'
+            //     },
+            //     label: {
+            //       show: true,
+            //       position: 'top'
+            //     },
+            //   }
+            // ],
+            // grid: {
+            //   top: '20%',
+            //   left: '3%',
+            //   right: '4%',
+            //   bottom: '10%',
+            //   containLabel: true
+            // },
+            // title: {
+            //   text: this.title,
+            //   // subtext: "        "+beingDate+"-"+endDate
+            // },
+        //v1
         // xAxis: {
         //   data: dataAxis,
         //   axisLabel: {
@@ -236,4 +271,4 @@
      box-shadow: 0 2px 12px 0 rgba(0, 0, 0, 0.1);
      float: left;
   }
-</style>
+</style>

src/views/statistics/item/s2manYiDuPro.vue

@@ -1,6 +1,6 @@
 <template>
   <div @click="toDetailed()" class="statisticsPage" :style="{width:width}">
-    <div id="s2manYiDuPro" :style="{height:height}"/>
+    <div :id="id" :style="{height:height}"/>
     <!-- 打开详情弹窗-->
     <div v-if="dialogOff">
       <dialogView
@@ -28,11 +28,12 @@
       },
       width:{
         type:String,
-        default:"20%"
+        default:"25%"
       },
       height:{
         type:String,
-        default: window.screen.height/4+"px"
+        default: window.screen.height/5+"px"
+        // default: "100%"
       },
       id:{
         type:String,
@@ -65,47 +66,67 @@
       drawLine(){
         let s2manYiDu = echarts.init(document.getElementById(this.id))
 
-        // let beginInof = GetPercent(Number(this.data.t_myddcBegin.number),Number(this.data.t_myddc2Begin.number))
-        // let endInof = GetPercent(Number(this.data.t_myddcEnd.number),Number(this.data.t_myddc2End.number))
+        // let data2 = [];
+        // data2.push(Number(this.data.t_myddc2Begin.number*100))
+        // data2.push(Number(this.data.t_myddc2End.number*100))
+        // data2.push(Number(this.data.t_myddc3Begin.number*100))
+        // data2.push(Number(this.data.t_myddc3End.number*100))
 
-        // let data1 = [];
-        //         data1.push(this.data.t_myddc1Begin.number);
-        //         data1.push(this.data.t_myddc1End.number);
-        //         data1.push(this.data.t_myddc2Begin.number);
-        //         data1.push(this.data.t_myddc2End.number);
-        //         data1.push(this.data.t_myddc3Begin.number);
-        //         data1.push(this.data.t_myddc3End.number);
-        //         data1.push(this.data.t_myddc4Begin.number);
-        //         data1.push(this.data.t_myddc4End.number);
-        //         data1.push(this.data.t_myddc5Begin.number);
-        //         data1.push(this.data.t_myddc5End.number);
-        //         data1.push(this.data.t_myddc6Begin.number);
-        //         data1.push(this.data.t_myddc6End.number);
-
-        //         let data3 = [];
-        //         data3.push(this.data.t_myddcBegin.date+"技术水平");
-        //         data3.push(this.data.t_myddcEnd.date+"技术水平");
-        //         data3.push(this.data.t_myddcBegin.date+"检测效率满意度");
-        //         data3.push(this.data.t_myddcEnd.date+"检测效率满意度");
-        //         data3.push(this.data.t_myddcBegin.date+"工作态度");
-        //         data3.push(this.data.t_myddcEnd.date+"工作态度");
-        //         data3.push(this.data.t_myddcBegin.date+"检测准确性");
-        //         data3.push(this.data.t_myddcEnd.date+"检测准确性");
-        //         data3.push(this.data.t_myddcBegin.date+"报告完成率");
-        //         data3.push(this.data.t_myddcEnd.date+"报告完成率");
-        //         data3.push(this.data.t_myddcBegin.date+"检测效率");
-        //         data3.push(this.data.t_myddcEnd.date+"检测效率");
-        
+        // let dataAxis = [];
+        // dataAxis.push("检测")
+        // dataAxis.push("检测")
+        // dataAxis.push("满意率")
+        // dataAxis.push("满意率")
         // let barData = []
         // for (let i = 0; i < this.data.t_khmydtjbNum.date.length; i++) {
-          let e=[this.data.t_khmydtjbNum.number[0],this.data.t_khmydtjbNum.numberAll[0],this.data.t_khmydtjbNum.res[0]]
+        //   let e=[]
+        //   if (this.data.t_khmydtjbNum.numberAll[i]===0) {
+        //     e =[this.data.t_khmydtjbNum.date[i], 0]
+        //   } else {
+        //     e =[this.data.t_khmydtjbNum.date[i], Math.floor(this.data.t_khmydtjbNum.number[i]/this.data.t_khmydtjbNum.numberAll[i] * 10000) / 100]
+        //   }
         //   barData.push(e)
         // }
-        console.log(e,'e')
+        let e=[this.data.t_khmydtjbNum.numberAll[0],this.data.t_khmydtjbNum.number[0]]
+        // let e=100-this.data.t_khmydtjbNum.res[0]
+
         let beingDate=this.data.t_myddc2Begin.date
         let endDate=this.data.t_myddc2End.date
-        var option = {
-          legend: {},
+        let option = {
+          //   title: {
+          //   text: this.title,
+          //   // subtext: 'Fake Data',
+          //   left: 'left',
+          //   textStyle:{ fontSize:14 }
+          // },
+          // tooltip: {
+          //   trigger: 'item'
+          // },
+          // color:['#00ccff','#cc3333'],
+          // series: [
+          //   {
+          //     type: 'pie',
+          //     radius: '50%',
+          //     label: {
+          //       formatter: '{b}: {d}%'
+          //     },
+          //     data: [
+          //       { value: this.data.t_khmydtjbNum.res[0], name: '客户满意率' },
+          //       { value: e, name: '客户不满意率' }
+          //     ],
+          //     emphasis: {
+          //       itemStyle: {
+          //         shadowBlur: 10,
+          //         shadowOffsetX: 0,
+          //         shadowColor: 'rgba(0, 0, 0, 0.5)'
+          //       }
+          //     }
+          //   }
+          // ]
+
+
+            //v3
+            legend: {},
             tooltip: {
               trigger: 'axis',
               axisPointer: {
@@ -118,7 +139,11 @@
             // dataset: {
             //   source: barData
             // },
-            xAxis: { type: 'category',data:['满意份数', '调查份数', '满意度']},
+            xAxis: { 
+              type: 'category',
+              // data:['满意份数', '调查份数', '满意度']
+              data:['调查份数','满意份数']
+            },
             yAxis: [
               {
                 type: 'value',
@@ -128,16 +153,16 @@
                 min: 0,
                 // boundaryGap: [0.2, 0.2]
               },
-              {
-                type: 'value',
-                scale: true,
-                name: '满意度',
-                max: this.data.t_khmydtjbNum.res[0],
-                min: 0,
-                axisLabel: {
-                  formatter: '{value} %'
-                }
-              }
+              // {
+              //   type: 'value',
+              //   scale: true,
+              //   name: '满意度',
+              //   max: this.data.t_khmydtjbNum.res[0],
+              //   min: 0,
+              //   axisLabel: {
+              //     formatter: '{value} %'
+              //   }
+              // }
             ],
             // Declare several bar series, each will be mapped
             // to a column of dataset.source by default.
@@ -146,6 +171,7 @@
               {
                 data: e,
                 type: 'bar',
+                barWidth: '20%',
                 itemStyle: {
                   color: '#66CCCC'
                 },
@@ -164,65 +190,80 @@
             },
             title: {
               text: this.title,
-              subtext: "        "+endDate+"年度"
+              textStyle:{ fontSize:14 }
+              // subtext: "        "+beingDate+"-"+endDate
             },
-        //     grid: {
-        //         top: '20%',
-        //         left: '3%',
-        //         right: '4%',
-        //         bottom: '10%',
-        //         containLabel: true
-        //     },
-        // title: [
+        //v1
+        // xAxis: {
+        //   data: dataAxis,
+        //   axisLabel: {
+        //     inside: false,
+        //     color: '#000',
+        //     interval:0
+        //   },
+        //   axisTick: {
+        //     show: true
+        //   },
+        //   axisLine: {
+        //     show: true
+        //   },
+        //   z: 10
+        // },
+        // yAxis: {
+        //   axisLine: {
+        //     show: false
+        //   },
+        //   axisTick: {
+        //     show: false
+        //   },
+        //   axisLabel: {
+        //                          show: true,
+        //                          textStyle:{color:'#000'},
+        //                          interval: 'auto',
+        //                          formatter: '{value} %'
+        //                          },
+        // },
+        // dataZoom: [
         //   {
-        //    text: this.title,
-        //    subtext: this.data.t_myddcBegin.date+"-"+this.data.t_myddcEnd.date+"年数据统计"
+        //     type: 'inside'
         //   }
         // ],
-        // polar: {
-        //   radius: [15, '90%']
-        // },
-        // angleAxis: {
-        //   max: GetMax(data1)+0.1,
-        //   startAngle: 75
-        // },
-        // radiusAxis: {
-        //   type: 'category',
-        //   data: data3
-        // },
         // tooltip: {
-        //               formatter: function (datas) {
-        //                   var res=datas.name+': '+((datas.value-0.01)*100).toFixed(2)+"%"
-        //                   return res
-        //               }
-        //           },
-        // series: {
-        //   itemStyle:{
-        //     normal:{
-        //       color:function(params){
-        //         var colorList = [
-        //           '#FE8463','#9BCA63','#FCCE10','#E87C25','#27727B',
-        //            '#FE8463','#9BCA63','#FAD860','#F3A43B','#60C0DD',
-        //            '#D7504B','#C6E579','#F4E001','#F0805A','#26C0C0'
-        //         ];
-        //         return colorList[params.dataIndex%4];
+        //        trigger: 'axis',
+        //        axisPointer: {
+        //          type: 'shadow'
+        //        },
+        //        formatter: function (datas) {
+        //            let year1 = datas[0].dataIndex==0||datas[0].dataIndex==2;
+        //            var res=(year1?beingDate+':':endDate+':')+datas[0].name+':'+((datas[0].value-1))+"%"
+        //            return res
+        //        }
+        // },
+        // series: [
+        //   {
+        //     type: 'bar',
+        //     showBackground: true,
+        //     itemStyle: {
+        //       color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
+        //         { offset: 0, color: '#83bff6' },
+        //         { offset: 0.5, color: '#188df0' },
+        //         { offset: 1, color: '#188df0' }
+        //       ])
+        //     },
+        //     emphasis: {
+        //       itemStyle: {
+        //         color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
+        //           { offset: 0, color: '#2378f7' },
+        //           { offset: 0.7, color: '#2378f7' },
+        //           { offset: 1, color: '#83bff6' }
+        //         ])
         //       }
-        //     }
-        //   },
-        //   type: 'bar',
-        //   data: data1,
-        //   coordinateSystem: 'polar',
-        //   label: {
-        //     show: true,
-        //     position: 'middle',
-        //     formatter: function(a,b,c){
-        //       return '{b}: {c}'
-        //     }
+        //     },
+        //     data: data2
         //   }
-        // }
-        };
-
-       option && s2manYiDu.setOption(option);
+        // ]
+      };
+      option && s2manYiDu.setOption(option);
       }
     }
   }
@@ -236,4 +277,4 @@
      box-shadow: 0 2px 12px 0 rgba(0, 0, 0, 0.1);
      float: left;
   }
-</style>
+</style>

src/views/statistics/item/s3tousu.vue

@@ -31,7 +31,7 @@
       },
       height:{
         type:String,
-        default: window.screen.height/4+"px"
+        default: window.screen.height/5+"px"
       },
       id:{
         type:String,
@@ -69,7 +69,7 @@
         let s3tousu = echarts.init(document.getElementById(this.id))
         // let beingDate=this.data.t_complaintBegin.date
         // let endDate=this.data.t_complaintEnd.date
-        var option;
+        let option;
         //v2
         // let that = this
         // for (let i = 0; i < that.data.t_complaintNum.date.length; i++) {
@@ -83,139 +83,40 @@
         //   // console.log(that.data.t_complaintNum.number[i], that.data.t_mjwtsqbNum.number[i], result, 'res')
         // }
         //v3
-         let e=[this.data.t_complaintNum.number[0],this.data.t_complaintNum.numberAll[0],this.data.t_complaintNum.res[0]]
+        //  let e=[this.data.t_complaintNum.number[0],this.data.t_complaintNum.numberAll[0],this.data.t_complaintNum.res[0]]
+        let e = 100-this.data.t_complaintNum.res[0]
 
         option = {
-          //v3
-              legend: {},
-            tooltip: {
-              trigger: 'axis',
-              axisPointer: {
-                type: 'shadow'
+          title: {
+            text: this.title,
+            // subtext: 'Fake Data',
+            left: 'left',
+            textStyle:{ fontSize:14 }
+          },
+          tooltip: {
+            trigger: 'item'
+          },
+          color:['#00ccff','#cc3333'],
+          series: [
+            {
+              type: 'pie',
+              radius: '50%',
+              label: {
+                formatter: '{b}: {d}%'
               },
-              // formatter: function (params) {
-              //   return params[0].data[0] + '<br/>满意份数：' + params[0].data[1] + '<br/>调查总份数: ' + params[0].data[2];
-              // }
-            },
-            // dataset: {
-            //   source: barData
-            // },
-            xAxis: { type: 'category',data:['投诉总数', '委托总数', '客户投诉率']},
-            yAxis: [
-              {
-                type: 'value',
-                scale: true,
-                name: '次数',
-                max: this.data.t_complaintNum.number[0]>this.data.t_complaintNum.numberAll[0]?this.data.t_complaintNum.number[0]+1:this.data.t_complaintNum.numberAll[0]+1,
-                min: 0,
-                // boundaryGap: [0.2, 0.2]
-              },
-              {
-                type: 'value',
-                scale: true,
-                name: '客户投诉率',
-                max: this.data.t_complaintNum.res[0],
-                min: 0,
-                axisLabel: {
-                  formatter: '{value} %'
-                }
-              }
-            ],
-            // Declare several bar series, each will be mapped
-            // to a column of dataset.source by default.
-            // series: [{ type: 'bar' }],
-            series: [
-              {
-                data: e,
-                type: 'bar',
+              data: [
+                { value: this.data.t_complaintNum.res[0], name: '客户投诉率' },
+                { value: e, name: '客户未投诉率' }
+              ],
+              emphasis: {
                 itemStyle: {
-                  color: '#cccc33'
-                },
-                label: {
-                  show: true,
-                  position: 'top'
-                },
+                  shadowBlur: 10,
+                  shadowOffsetX: 0,
+                  shadowColor: 'rgba(0, 0, 0, 0.5)'
+                }
               }
-            ],
-            grid: {
-              top: '20%',
-              left: '3%',
-              right: '4%',
-              bottom: '10%',
-              containLabel: true
-            },
-            title: {
-              text: this.title,
-              // subtext: "        "+beingDate+"-"+endDate
-            },
-          //v2
-        //   rotate: {
-        //     min: -90,
-        //     max: 90
-        //   },
-        //   grid: {
-        //         top: '20%',
-        //         left: '3%',
-        //         right: '4%',
-        //         bottom: '10%',
-        //         containLabel: true
-        //     },
-        //   title: {
-        //      text: this.title,
-        //      subtext: '    '+this.data.t_complaintNum.date[0]+'-'+this.data.t_complaintNum.date[this.data.t_complaintNum.date.length-1],
-        //    },
-        //  xAxis: {
-        //    type: 'category',
-        //    data: this.data.t_complaintNum.date
-        //  },
-        //  yAxis: {
-        //   //  max:this.data.t_complaintBegin.number>this.data.t_complaintEnd.number?this.data.t_complaintBegin.number+1:this.data.t_complaintEnd.number+1,
-        //   // max: Math.max(...this.measured),
-        //   // min:0,
-        //   type: 'value',
-        //   axisLabel: {
-        //     show: true,
-        //     textStyle:{color:'#000'},
-        //     interval: 'auto',
-        //     formatter: '{value} %'
-        //   },
-        //  },
-        //  tooltip: {
-        //         trigger: 'axis',
-        //         axisPointer: {
-        //           type: 'shadow'
-        //         },
-        //         formatter: function (params) {
-        //           // console.log(params,'tousu ')
-        //           return params[0].axisValue + '<br/>客户投诉率：' + params[0].data;
-        //         }
-        //         // formatter: 
-        //         // function (datas) {
-        //         //     let year1 = datas[0].dataIndex==0||datas[0].dataIndex==2;
-        //         //     var res=(year1?beingDate+':':endDate+':')+datas[0].name+':'+datas[0].value
-        //         //     return res
-        //         // }
-        //  },
-        //  series: [
-        //    {
-        //      itemStyle: {
-        //             normal: {
-        //                 color: function(params) {
-        //                     var colorList = [
-        //                       '#F0805A','#B5C334','#FCCE10','#E87C25','#27727B',
-        //                        '#FE8463','#9BCA63','#FAD860','#F3A43B','#60C0DD',
-        //                        '#D7504B','#C6E579','#F4E001','#F0805A','#26C0C0'
-        //                     ];
-        //                     return colorList[params.dataIndex]
-        //                 },
-        //             }
-        //         },
-
-        //      data: this.measured,
-        //      type: 'bar',
-        //      barWidth:50
-        //    }
-        //  ]
+            }
+          ]
        };
 
        option && s3tousu.setOption(option);

src/views/statistics/item/s3tousuCol.vue

@@ -0,0 +1,244 @@
+<template>
+  <div @click="toDetailed()" class="statisticsPage" :style="{width:width}">
+    <div :id="id" :style="{height:height}"/>
+    <!-- 打开详情弹窗-->
+    <div v-if="dialogOff">
+      <dialogView
+        :dialogOff = "dialogOff"
+        @close = "close"
+        :title="title"
+        :data="data"
+      />
+    </div>
+  </div>
+</template>
+
+<script>
+  import echarts from 'echarts'
+  import dialogView from '../properties/s3tousuPro.vue'
+  import {GetPercent,GetMax} from  '../js/config.js'
+  export default {
+    components:{
+      dialogView
+    },
+    props: {
+      data: {
+        type: Object,
+      },
+      width:{
+        type:String,
+        default:"20%"
+      },
+      height:{
+        type:String,
+        default: window.screen.height/4+"px"
+      },
+      id:{
+        type:String,
+        default:"s3tousu"
+      },
+      click:{
+        type:String,
+        default:'true'
+      },
+    },
+    data () {
+      return {
+        title:'客户投诉数量',
+        dialogOff:false,
+        measured:[]
+      }
+    },
+    mounted(){
+      this.drawLine();
+    },
+    methods: {
+      close(){
+        this.dialogOff = false
+      },
+      /* 跳转统计页面*/
+      toDetailed(){
+        if(this.click == "true"){
+        this.dialogOff = true
+       }
+      },
+      drawLine(){
+
+        // let beginInof = Number(this.data.t_complaintBegin.number)
+        // let endInof = Number(this.data.t_complaintEnd.number)
+        let s3tousu = echarts.init(document.getElementById(this.id))
+        // let beingDate=this.data.t_complaintBegin.date
+        // let endDate=this.data.t_complaintEnd.date
+        var option;
+        //v2
+        // let that = this
+        // for (let i = 0; i < that.data.t_complaintNum.date.length; i++) {
+        //   let result = 0
+        //   if(that.data.t_mjwtsqbNum.number[i] === 0){
+        //     result = Math.floor(that.data.t_complaintNum.number[i]/1 * 10000) / 100
+        //   }else{
+        //     result = Math.floor(that.data.t_complaintNum.number[i]/that.data.t_mjwtsqbNum.number[i] * 10000) / 100
+        //   }
+        //   that.measured.push(result)
+        //   // console.log(that.data.t_complaintNum.number[i], that.data.t_mjwtsqbNum.number[i], result, 'res')
+        // }
+        //v3
+        //  let e=[this.data.t_complaintNum.number[0],this.data.t_complaintNum.numberAll[0],this.data.t_complaintNum.res[0]]
+         let e=[this.data.t_complaintNum.numberAll[0],this.data.t_complaintNum.number[0]]
+        
+
+        option = {
+          //v3
+              legend: {},
+            tooltip: {
+              trigger: 'axis',
+              axisPointer: {
+                type: 'shadow'
+              },
+              // formatter: function (params) {
+              //   return params[0].data[0] + '<br/>满意份数：' + params[0].data[1] + '<br/>调查总份数: ' + params[0].data[2];
+              // }
+            },
+            // dataset: {
+            //   source: barData
+            // },
+            xAxis: { 
+              type: 'category',
+              // data:['投诉总数', '委托总数', '客户投诉率']
+              data:['委托总数','投诉总数']
+            },
+            yAxis: [
+              {
+                type: 'value',
+                scale: true,
+                name: '次数',
+                max: this.data.t_complaintNum.number[0]>this.data.t_complaintNum.numberAll[0]?this.data.t_complaintNum.number[0]+1:this.data.t_complaintNum.numberAll[0]+1,
+                min: 0,
+                // boundaryGap: [0.2, 0.2]
+              },
+              // {
+              //   type: 'value',
+              //   scale: true,
+              //   name: '客户投诉率',
+              //   max: this.data.t_complaintNum.res[0],
+              //   min: 0,
+              //   axisLabel: {
+              //     formatter: '{value} %'
+              //   }
+              // }
+            ],
+            // Declare several bar series, each will be mapped
+            // to a column of dataset.source by default.
+            // series: [{ type: 'bar' }],
+            series: [
+              {
+                data: e,
+                type: 'bar',
+                barWidth: '20%',
+                itemStyle: {
+                  color: '#cccc33'
+                },
+                label: {
+                  show: true,
+                  position: 'top'
+                },
+              }
+            ],
+            grid: {
+              top: '20%',
+              left: '3%',
+              right: '4%',
+              bottom: '10%',
+              containLabel: true
+            },
+            title: {
+              text: this.title,
+              textStyle:{ fontSize:14 }
+
+              // subtext: "        "+beingDate+"-"+endDate
+            },
+          //v2
+        //   rotate: {
+        //     min: -90,
+        //     max: 90
+        //   },
+        //   grid: {
+        //         top: '20%',
+        //         left: '3%',
+        //         right: '4%',
+        //         bottom: '10%',
+        //         containLabel: true
+        //     },
+        //   title: {
+        //      text: this.title,
+        //      subtext: '    '+this.data.t_complaintNum.date[0]+'-'+this.data.t_complaintNum.date[this.data.t_complaintNum.date.length-1],
+        //    },
+        //  xAxis: {
+        //    type: 'category',
+        //    data: this.data.t_complaintNum.date
+        //  },
+        //  yAxis: {
+        //   //  max:this.data.t_complaintBegin.number>this.data.t_complaintEnd.number?this.data.t_complaintBegin.number+1:this.data.t_complaintEnd.number+1,
+        //   // max: Math.max(...this.measured),
+        //   // min:0,
+        //   type: 'value',
+        //   axisLabel: {
+        //     show: true,
+        //     textStyle:{color:'#000'},
+        //     interval: 'auto',
+        //     formatter: '{value} %'
+        //   },
+        //  },
+        //  tooltip: {
+        //         trigger: 'axis',
+        //         axisPointer: {
+        //           type: 'shadow'
+        //         },
+        //         formatter: function (params) {
+        //           // console.log(params,'tousu ')
+        //           return params[0].axisValue + '<br/>客户投诉率：' + params[0].data;
+        //         }
+        //         // formatter: 
+        //         // function (datas) {
+        //         //     let year1 = datas[0].dataIndex==0||datas[0].dataIndex==2;
+        //         //     var res=(year1?beingDate+':':endDate+':')+datas[0].name+':'+datas[0].value
+        //         //     return res
+        //         // }
+        //  },
+        //  series: [
+        //    {
+        //      itemStyle: {
+        //             normal: {
+        //                 color: function(params) {
+        //                     var colorList = [
+        //                       '#F0805A','#B5C334','#FCCE10','#E87C25','#27727B',
+        //                        '#FE8463','#9BCA63','#FAD860','#F3A43B','#60C0DD',
+        //                        '#D7504B','#C6E579','#F4E001','#F0805A','#26C0C0'
+        //                     ];
+        //                     return colorList[params.dataIndex]
+        //                 },
+        //             }
+        //         },
+
+        //      data: this.measured,
+        //      type: 'bar',
+        //      barWidth:50
+        //    }
+        //  ]
+       };
+
+       option && s3tousu.setOption(option);
+      }
+    }
+  }
+</script>
+<style scoped>
+  #s3tousu:hover{
+    transition: all 0.5s;
+    transform:scale(1.03);
+  }
+  .statisticsPage{
+     box-shadow: 0 2px 12px 0 rgba(0, 0, 0, 0.1);
+     float: left;
+  }
+</style>

src/views/statistics/item/s4renYuanPeiXun.vue

@@ -32,7 +32,7 @@
       },
       height:{
         type:String,
-        default: window.screen.height/4+"px"
+        default: window.screen.height/5+"px"
       },
       id:{
         type:String,
@@ -45,7 +45,7 @@
     },
     data () {
       return {
-        title:'人员培训',
+        title:'人员培训完成率',
         dialogOff:false,
       }
     },
@@ -65,202 +65,42 @@
       drawLine(){
         let s4renYuanPeiXun = echarts.init(document.getElementById(this.id))
 
-        // let beginInof = GetPercent(Number(this.data.t_rypxjlnkBegin.number),Number(this.data.t_ryndpxjhBegin.number))
-        // let endInof = GetPercent(Number(this.data.t_rypxjlnkEnd.number),Number(this.data.t_ryndpxjhEnd.number))
-
-        //  let data1 = [];
-        //  data1.push(this.data.t_ryndpxjhBegin.number);
-        //  data1.push(this.data.t_ryndpxjhEnd.number);
-        //  let data2 = [];
-        //  data2.push(this.data.t_rypxjlnkBegin.number);
-        //  data2.push(this.data.t_rypxjlnkEnd.number);
-        //  let data3 = [];
-        //  data3.push(this.data.t_rypxjlnkBegin.date);
-        //  data3.push(this.data.t_rypxjlnkEnd.date);
-
-
-        // let barData = []
-        // for (let i = 0; i < this.data.t_ryywpxjlNum.date.length; i++) {
-        //   let e=[this.data.t_ryywpxjlNum.date[i],this.data.t_ryywpxjlNum.number[i],this.data.t_ryywpxjlNum.numberAll[i]]
-        //   barData.push(e)
-        // }
-         let e=[this.data.t_ryywpxjlNum.number[0],this.data.t_ryywpxjlNum.numberAll[0],this.data.t_ryywpxjlNum.res[0]]
-
+        // let e=[this.data.t_ryywpxjlNum.number[0],this.data.t_ryywpxjlNum.numberAll[0],this.data.t_ryywpxjlNum.res[0]]
 
+        let e = 100 -this.data.t_ryywpxjlNum.res[0]
         var option;
         option = {
           //v3
-              legend: {},
-            tooltip: {
-              trigger: 'axis',
-              axisPointer: {
-                type: 'shadow'
-              },
-              // formatter: function (params) {
-              //   return params[0].data[0] + '<br/>满意份数：' + params[0].data[1] + '<br/>调查总份数: ' + params[0].data[2];
-              // }
-            },
-            // dataset: {
-            //   source: barData
-            // },
-            xAxis: { type: 'category',data:['已完成数量', '所有数量', '培训完成率']},
-            yAxis: [
-              {
-                type: 'value',
-                scale: true,
-                name: '数量',
-                max: this.data.t_ryywpxjlNum.number[0]>this.data.t_ryywpxjlNum.numberAll[0]?this.data.t_ryywpxjlNum.number[0]+1:this.data.t_ryywpxjlNum.numberAll[0]+1,
-                min: 0,
-                // boundaryGap: [0.2, 0.2]
+          title: {
+            text: this.title,
+            // subtext: 'Fake Data',
+            left: 'left',
+            textStyle:{ fontSize:14 }
+          },
+          tooltip: {
+            trigger: 'item'
+          },
+          color:['#cccc00','#ff6633'],
+          series: [
+            {
+              type: 'pie',
+              radius: '50%',
+              label: {
+                formatter: '{b}: {d}%'
               },
-              {
-                type: 'value',
-                scale: true,
-                name: '培训完成率',
-                max: this.data.t_ryywpxjlNum.res[0],
-                min: 0,
-                axisLabel: {
-                  formatter: '{value} %'
-                }
-              }
-            ],
-            // Declare several bar series, each will be mapped
-            // to a column of dataset.source by default.
-            // series: [{ type: 'bar' }],
-            series: [
-              {
-                data: e,
-                type: 'bar',
+              data: [
+                { value: this.data.t_ryywpxjlNum.res[0], name: '培训完成率' },
+                { value: e, name: '培训未完成率' }
+              ],
+              emphasis: {
                 itemStyle: {
-                  color: '#cc3366'
-                },
-                label: {
-                  show: true,
-                  position: 'top'
-                },
+                  shadowBlur: 10,
+                  shadowOffsetX: 0,
+                  shadowColor: 'rgba(0, 0, 0, 0.5)'
+                }
               }
-            ],
-            grid: {
-              top: '20%',
-              left: '3%',
-              right: '4%',
-              bottom: '10%',
-              containLabel: true
-            },
-            title: {
-              text: this.title,
-              // subtext: "        "+beingDate+"-"+endDate
-            },
-          //v2
-        //     legend: {},
-        //     tooltip: {
-        //       trigger: 'axis',
-        //       axisPointer: {
-        //         type: 'shadow'
-        //       },
-        //       formatter: function (params) {
-        //         return params[0].data[0] + '<br/>已完成培训数量：' + params[0].data[1]+ '<br/>所有培训数量：' + params[0].data[2];
-        //       }
-        //     },
-        //     dataset: {
-        //       source: barData
-        //     },
-        //     xAxis: { type: 'category' },
-        //     yAxis: {
-        //       type: 'value',
-        //       axisLabel: {
-        //         show: true,
-        //         textStyle:{color:'#000'},
-        //         interval: 'auto',
-        //         // formatter: '{value} %'
-        //       },
-            
-        //     },
-        //     // Declare several bar series, each will be mapped
-        //     // to a column of dataset.source by default.
-        //     series: [{ type: 'bar'},{ type: 'bar'}],
-        //     grid: {
-        //       top: '20%',
-        //       left: '3%',
-        //       right: '4%',
-        //       bottom: '10%',
-        //       containLabel: true
-        //     },
-        //     title: {
-        //       text: this.title,
-        //       subtext: "        "+this.data.t_ryywpxjlNum.date[0]+"-"+this.data.t_ryywpxjlNum.date[this.data.t_ryywpxjlNum.date.length-1]
-        //     },
-        //v1
-          // title: {
-          //   text: this.title,
-          //   subtext: this.data.t_rypxjlnkBegin.date+"-"+this.data.t_rypxjlnkEnd.date+"年培训次数"
-          // },
-          // tooltip: {
-          //        trigger: 'axis',
-          //        axisPointer: {
-          //          type: 'shadow'
-          //        },
-          //        formatter: function (datas) {
-          //            var res='计划:'+datas[0].value+"<BR>"
-          //            res+='记录:'+datas[1].value+"<BR>"
-          //            res+='百分比:'+(datas[0].value==null||datas[0].value==0?"0.00":(datas[1].value/datas[0].value*100).toFixed(2))+"%"
-          //            return res
-          //        }
-          // },
-          // legend: {show:false},
-          //  grid: {
-          //       top: '20%',
-          //       left: '3%',
-          //       right: '4%',
-          //       bottom: '10%',
-          //       containLabel: true
-          //   },
-          // xAxis: {
-          //   type: 'category',
-          //   data: data3
-            
-          // },
-          // yAxis: {
-          //   type: 'value',
-          //   boundaryGap: [0, 0.01]
-          // },
-          // series: [
-
-          //   {
-          //     name: ['计划'],
-          //     type: 'bar',
-          //     data: data1,
-          //     itemStyle: {
-          //           normal: {
-          //               color: function(params) {
-          //                   var colorList = [
-          //                     '#FE8463','#9BCA63','#FCCE10','#E87C25','#27727B',
-          //                      '#FE8463','#9BCA63','#FAD860','#F3A43B','#60C0DD',
-          //                      '#D7504B','#C6E579','#F4E001','#F0805A','#26C0C0'
-          //                   ];
-          //                   return colorList[params.dataIndex]
-          //               },
-          //           }
-          //       },
-          //   },
-          //   {
-          //     name: ['记录'],
-          //     type: 'bar',
-          //     data: data2,
-          //     itemStyle: {
-          //           normal: {
-          //               color: function(params) {
-          //                   var colorList = [
-          //                     '#E87C25','#FAD860','#FCCE10','#E87C25','#27727B',
-          //                      '#FE8463','#9BCA63','#FAD860','#F3A43B','#60C0DD',
-          //                      '#D7504B','#C6E579','#F4E001','#F0805A','#26C0C0'
-          //                   ];
-          //                   return colorList[params.dataIndex]
-          //               },
-          //           }
-          //       },
-          //   }
-          // ]
+            }
+          ]
         };
 
 

src/views/statistics/item/s4renYuanPeiXunCol.vue

@@ -0,0 +1,290 @@
+<template>
+  <div @click="toDetailed()" class="statisticsPage" :style="{width:width}">
+    <div :id="id" :style="{height:height}"/>
+    <!-- 打开详情弹窗-->
+    <div v-if="dialogOff">
+      <dialogView
+        :dialogOff = "dialogOff"
+        @close = "close"
+        :title="title"
+        :data="data"
+      />
+    </div>
+  </div>
+</template>
+
+<script>
+  import echarts from 'echarts'
+  import {GetPercent,GetMax} from  '../js/config.js'
+  import dialogView from '../properties/s4renYuanPeiXunPro.vue'
+
+  export default {
+    components:{
+      dialogView
+    },
+    props: {
+      data: {
+        type: Object,
+      },
+      width:{
+        type:String,
+        default:"20%"
+      },
+      height:{
+        type:String,
+        default: window.screen.height/5+"px"
+      },
+      id:{
+        type:String,
+        default:"s4renyuanPeiXun"
+      },
+      click:{
+        type:String,
+        default:'true'
+      },
+    },
+    data () {
+      return {
+        title:'人员培训数量',
+        dialogOff:false,
+      }
+    },
+    mounted(){
+      this.drawLine();
+    },
+    methods: {
+      close(){
+        this.dialogOff = false
+      },
+      /* 跳转统计页面*/
+      toDetailed(){
+        if(this.click == "true"){
+        this.dialogOff = true
+       }
+      },
+      drawLine(){
+        let s4renYuanPeiXun = echarts.init(document.getElementById(this.id))
+
+        // let beginInof = GetPercent(Number(this.data.t_rypxjlnkBegin.number),Number(this.data.t_ryndpxjhBegin.number))
+        // let endInof = GetPercent(Number(this.data.t_rypxjlnkEnd.number),Number(this.data.t_ryndpxjhEnd.number))
+
+        //  let data1 = [];
+        //  data1.push(this.data.t_ryndpxjhBegin.number);
+        //  data1.push(this.data.t_ryndpxjhEnd.number);
+        //  let data2 = [];
+        //  data2.push(this.data.t_rypxjlnkBegin.number);
+        //  data2.push(this.data.t_rypxjlnkEnd.number);
+        //  let data3 = [];
+        //  data3.push(this.data.t_rypxjlnkBegin.date);
+        //  data3.push(this.data.t_rypxjlnkEnd.date);
+
+
+        // let barData = []
+        // for (let i = 0; i < this.data.t_ryywpxjlNum.date.length; i++) {
+        //   let e=[this.data.t_ryywpxjlNum.date[i],this.data.t_ryywpxjlNum.number[i],this.data.t_ryywpxjlNum.numberAll[i]]
+        //   barData.push(e)
+        // }
+        //  let e=[this.data.t_ryywpxjlNum.number[0],this.data.t_ryywpxjlNum.numberAll[0],this.data.t_ryywpxjlNum.res[0]]
+         let e=[this.data.t_ryywpxjlNum.numberAll[0],this.data.t_ryywpxjlNum.number[0]]
+
+
+        var option;
+        option = {
+          //v3
+            legend: {},
+            tooltip: {
+              trigger: 'axis',
+              axisPointer: {
+                type: 'shadow'
+              },
+              // formatter: function (params) {
+              //   return params[0].data[0] + '<br/>满意份数：' + params[0].data[1] + '<br/>调查总份数: ' + params[0].data[2];
+              // }
+            },
+            // dataset: {
+            //   source: barData
+            // },
+            xAxis: { 
+              type: 'category',
+              // data:['已完成数量', '所有数量', '培训完成率']
+              data:['所有培训数量','已完成培训数量']
+
+            },
+            yAxis: [
+              {
+                type: 'value',
+                scale: true,
+                name: '次数',
+                max: this.data.t_ryywpxjlNum.number[0]>this.data.t_ryywpxjlNum.numberAll[0]?this.data.t_ryywpxjlNum.number[0]+1:this.data.t_ryywpxjlNum.numberAll[0]+1,
+                min: 0,
+                // boundaryGap: [0.2, 0.2]
+              },
+              // {
+              //   type: 'value',
+              //   scale: true,
+              //   name: '培训完成率',
+              //   max: this.data.t_ryywpxjlNum.res[0],
+              //   min: 0,
+              //   axisLabel: {
+              //     formatter: '{value} %'
+              //   }
+              // }
+            ],
+            // Declare several bar series, each will be mapped
+            // to a column of dataset.source by default.
+            // series: [{ type: 'bar' }],
+            series: [
+              {
+                data: e,
+                type: 'bar',
+                barWidth: '20%',
+                itemStyle: {
+                  color: '#cc3366'
+                },
+                label: {
+                  show: true,
+                  position: 'top'
+                },
+              }
+            ],
+            grid: {
+              top: '20%',
+              left: '3%',
+              right: '4%',
+              bottom: '10%',
+              containLabel: true
+            },
+            title: {
+              text: this.title,
+              textStyle:{ fontSize:14 }
+
+              // subtext: "        "+beingDate+"-"+endDate
+            },
+          //v2
+        //     legend: {},
+        //     tooltip: {
+        //       trigger: 'axis',
+        //       axisPointer: {
+        //         type: 'shadow'
+        //       },
+        //       formatter: function (params) {
+        //         return params[0].data[0] + '<br/>已完成培训数量：' + params[0].data[1]+ '<br/>所有培训数量：' + params[0].data[2];
+        //       }
+        //     },
+        //     dataset: {
+        //       source: barData
+        //     },
+        //     xAxis: { type: 'category' },
+        //     yAxis: {
+        //       type: 'value',
+        //       axisLabel: {
+        //         show: true,
+        //         textStyle:{color:'#000'},
+        //         interval: 'auto',
+        //         // formatter: '{value} %'
+        //       },
+            
+        //     },
+        //     // Declare several bar series, each will be mapped
+        //     // to a column of dataset.source by default.
+        //     series: [{ type: 'bar'},{ type: 'bar'}],
+        //     grid: {
+        //       top: '20%',
+        //       left: '3%',
+        //       right: '4%',
+        //       bottom: '10%',
+        //       containLabel: true
+        //     },
+        //     title: {
+        //       text: this.title,
+        //       subtext: "        "+this.data.t_ryywpxjlNum.date[0]+"-"+this.data.t_ryywpxjlNum.date[this.data.t_ryywpxjlNum.date.length-1]
+        //     },
+        //v1
+          // title: {
+          //   text: this.title,
+          //   subtext: this.data.t_rypxjlnkBegin.date+"-"+this.data.t_rypxjlnkEnd.date+"年培训次数"
+          // },
+          // tooltip: {
+          //        trigger: 'axis',
+          //        axisPointer: {
+          //          type: 'shadow'
+          //        },
+          //        formatter: function (datas) {
+          //            var res='计划:'+datas[0].value+"<BR>"
+          //            res+='记录:'+datas[1].value+"<BR>"
+          //            res+='百分比:'+(datas[0].value==null||datas[0].value==0?"0.00":(datas[1].value/datas[0].value*100).toFixed(2))+"%"
+          //            return res
+          //        }
+          // },
+          // legend: {show:false},
+          //  grid: {
+          //       top: '20%',
+          //       left: '3%',
+          //       right: '4%',
+          //       bottom: '10%',
+          //       containLabel: true
+          //   },
+          // xAxis: {
+          //   type: 'category',
+          //   data: data3
+            
+          // },
+          // yAxis: {
+          //   type: 'value',
+          //   boundaryGap: [0, 0.01]
+          // },
+          // series: [
+
+          //   {
+          //     name: ['计划'],
+          //     type: 'bar',
+          //     data: data1,
+          //     itemStyle: {
+          //           normal: {
+          //               color: function(params) {
+          //                   var colorList = [
+          //                     '#FE8463','#9BCA63','#FCCE10','#E87C25','#27727B',
+          //                      '#FE8463','#9BCA63','#FAD860','#F3A43B','#60C0DD',
+          //                      '#D7504B','#C6E579','#F4E001','#F0805A','#26C0C0'
+          //                   ];
+          //                   return colorList[params.dataIndex]
+          //               },
+          //           }
+          //       },
+          //   },
+          //   {
+          //     name: ['记录'],
+          //     type: 'bar',
+          //     data: data2,
+          //     itemStyle: {
+          //           normal: {
+          //               color: function(params) {
+          //                   var colorList = [
+          //                     '#E87C25','#FAD860','#FCCE10','#E87C25','#27727B',
+          //                      '#FE8463','#9BCA63','#FAD860','#F3A43B','#60C0DD',
+          //                      '#D7504B','#C6E579','#F4E001','#F0805A','#26C0C0'
+          //                   ];
+          //                   return colorList[params.dataIndex]
+          //               },
+          //           }
+          //       },
+          //   }
+          // ]
+        };
+
+
+       option && s4renYuanPeiXun.setOption(option);
+      }
+    }
+  }
+</script>
+<style scoped>
+  #s4renyuanPeiXun:hover{
+    transition: all 0.5s;
+    transform:scale(1.03);
+  }
+  .statisticsPage{
+     box-shadow: 0 2px 12px 0 rgba(0, 0, 0, 0.1);
+     float: left;
+  }
+</style>

src/views/statistics/item/s5renYuanJianDu.vue

@@ -32,7 +32,7 @@
       },
       height:{
         type:String,
-        default: window.screen.height/4+"px"
+        default: window.screen.height/5+"px"
       },
       id:{
         type:String,
@@ -64,285 +64,42 @@
       },
       drawLine(){
         let s5renYuanJianDu = echarts.init(document.getElementById(this.id))
-        let beginInof = GetPercent(Number(this.data.t_zljdssBegin.number),Number(this.data.t_zljdBegin.number))
-        let endInof = GetPercent(Number(this.data.t_zljdssEnd.number),Number(this.data.t_zljdEnd.number))
-
-         let data1 = [];
-         data1.push(this.data.t_zljdBegin.number);
-         data1.push(this.data.t_zljdEnd.number);
-         let data2 = [];
-         data2.push(this.data.t_zljdssBegin.number);
-         data2.push(this.data.t_zljdssEnd.number);
-         let data3 = [];
-         data3.push(this.data.t_zljdssBegin.date);
-         data3.push(this.data.t_zljdssEnd.date);
-         const posList = [
-          'left',
-          'right',
-          'top',
-          'bottom',
-          'inside',
-          'insideTop',
-          'insideLeft',
-          'insideRight',
-          'insideBottom',
-          'insideTopLeft',
-          'insideTopRight',
-          'insideBottomLeft',
-          'insideBottomRight'
-        ];
-        app.configParameters = {
-          rotate: {
-            min: -90,
-            max: 90
-          },
-          align: {
-            options: {
-              left: 'left',
-              center: 'center',
-              right: 'right'
-            }
-          },
-          verticalAlign: {
-            options: {
-              top: 'top',
-              middle: 'middle',
-              bottom: 'bottom'
-            }
-          },
-          position: {
-            options: posList.reduce(function (map, pos) {
-              map[pos] = pos;
-              return map;
-            }, {})
-          },
-          distance: {
-            min: 0,
-            max: 100
-          }
-        };
-        app.config = {
-          rotate: 90,
-          align: 'left',
-          verticalAlign: 'middle',
-          position: 'bottom',
-          distance: 0,
-          onChange: function () {
-            const labelOption = {
-              rotate: app.config.rotate,
-              align: app.config.align,
-              verticalAlign: app.config.verticalAlign,
-              position: app.config.position,
-              distance: app.config.distance
-            };
-            myChart.setOption({
-              series: [
-                {
-                  label: labelOption
-                },
-                {
-                  label: labelOption
-                },
-                {
-                  label: labelOption
-                },
-                {
-                  label: labelOption
-                }
-              ]
-            });
-          }
-        };
-        const labelOption = {
-          show: true,
-          position: app.config.position,
-          distance: app.config.distance,
-          align: app.config.align,
-          verticalAlign: app.config.verticalAlign,
-          rotate: app.config.rotate,
-          formatter: '{c}  {name|{a}}',
-          fontSize: 16,
-          rich: {
-              name: {
-                  textBorderColor: '#fff'
-              }
-          }
-        };
-
-        //v2
-        // let barData = []
-        // for (let i = 0; i < this.data.t_zljdNum.date.length; i++) {
-        //   let e=[this.data.t_zljdNum.date[i],this.data.t_zljdNum.number[i],this.data.t_zljdNum.numberAll[i]]
-        //   barData.push(e)
-        // }
+      
         //v3
-         let e=[this.data.t_zljdNum.number[0],this.data.t_zljdNum.numberAll[0],this.data.t_zljdNum.res[0]]
+        // let e=[this.data.t_zljdNum.number[0],this.data.t_zljdNum.numberAll[0],this.data.t_zljdNum.res[0]]
+        let e=100-this.data.t_zljdNum.res[0]
 
         let option = {
-          //v3
-            legend: {},
-            tooltip: {
-              trigger: 'axis',
-              axisPointer: {
-                type: 'shadow'
-              },
-              // formatter: function (params) {
-              //   return params[0].data[0] + '<br/>满意份数：' + params[0].data[1] + '<br/>调查总份数: ' + params[0].data[2];
-              // }
-            },
-            // dataset: {
-            //   source: barData
-            // },
-            xAxis: { type: 'category',data:['已完成数量', '所有数量', '监督完成率']},
-            yAxis: [
-              {
-                type: 'value',
-                scale: true,
-                name: '数量',
-                max: this.data.t_zljdNum.number[0]>this.data.t_zljdNum.numberAll[0]?this.data.t_zljdNum.number[0]+1:this.data.t_zljdNum.numberAll[0]+1,
-                min: 0,
-                // boundaryGap: [0.2, 0.2]
+          title: {
+            text: this.title,
+            // subtext: 'Fake Data',
+            left: 'left',
+            textStyle:{ fontSize:14 }
+          },
+          tooltip: {
+            trigger: 'item'
+          },
+          color:['#cccc00','#ff6633'],
+          series: [
+            {
+              type: 'pie',
+              radius: '50%',
+              label: {
+                formatter: '{b}: {d}%'
               },
-              {
-                type: 'value',
-                scale: true,
-                name: '监督完成率',
-                max: this.data.t_zljdNum.res[0],
-                min: 0,
-                axisLabel: {
-                  formatter: '{value} %'
-                }
-              }
-            ],
-            // Declare several bar series, each will be mapped
-            // to a column of dataset.source by default.
-            // series: [{ type: 'bar' }],
-            series: [
-              {
-                data: e,
-                type: 'bar',
+              data: [
+                { value: this.data.t_zljdNum.res[0], name: '监督完成率' },
+                { value: e, name: '监督未完成率' }
+              ],
+              emphasis: {
                 itemStyle: {
-                  color: '#9933cc'
-                },
-                label: {
-                  show: true,
-                  position: 'top'
-                },
+                  shadowBlur: 10,
+                  shadowOffsetX: 0,
+                  shadowColor: 'rgba(0, 0, 0, 0.5)'
+                }
               }
-            ],
-            grid: {
-              top: '20%',
-              left: '3%',
-              right: '4%',
-              bottom: '10%',
-              containLabel: true
-            },
-            title: {
-              text: this.title,
-              // subtext: "        "+beingDate+"-"+endDate
-            },
-          //v2
-            // legend: {},
-            // tooltip: {
-            //   trigger: 'axis',
-            //   axisPointer: {
-            //     type: 'shadow'
-            //   },
-            //   formatter: function (params) {
-            //     return params[0].data[0] + '<br/>已完成监督数量：' + params[0].data[1]+ '<br/>所有监督数量：' + params[0].data[2];
-            //   }
-            // },
-            // dataset: {
-            //   source: barData
-            // },
-            // xAxis: { type: 'category' },
-            // yAxis: {
-            //   type: 'value',
-            //   axisLabel: {
-            //     show: true,
-            //     textStyle:{color:'#000'},
-            //     interval: 'auto',
-            //     // formatter: '{value} %'
-            //   },
-            
-            // },
-            // // Declare several bar series, each will be mapped
-            // // to a column of dataset.source by default.
-            // series: [{ type: 'bar'},{ type: 'bar'}],
-            // grid: {
-            //   top: '20%',
-            //   left: '3%',
-            //   right: '4%',
-            //   bottom: '10%',
-            //   containLabel: true
-            // },
-            // title: {
-            //   text: this.title,
-            //   subtext: "        "+this.data.t_zljdNum.date[0]+"-"+this.data.t_zljdNum.date[this.data.t_zljdNum.date.length-1]
-            // },
-            //v1
-          // grid: {
-          //               top: '20%',
-          //               left: '3%',
-          //               right: '4%',
-          //               bottom: '10%',
-          //               containLabel: true
-          //           },
-          // title: {
-          //           text: this.title,
-          //           subtext: this.data.t_zljdssBegin.date+"-"+this.data.t_zljdssEnd.date+"年监督次数"
-          //         },
-          // color : [
-          //                             '#C6E579','#B5C334','#FCCE10','#E87C25','#27727B',
-          //                              '#FE8463','#9BCA63','#FAD860','#F3A43B','#60C0DD',
-          //                              '#D7504B','#C6E579','#F4E001','#F0805A','#26C0C0'
-          //                           ],
-          // tooltip: {
-          //        trigger: 'axis',
-          //        axisPointer: {
-          //          type: 'shadow'
-          //        },
-          //        formatter: function (datas) {
-          //            var res='计划:'+datas[0].value+"<BR>"
-          //            res+='记录:'+datas[1].value+"<BR>"
-          //            res+='百分比:'+(datas[0].value==null||datas[0].value==0?"0.00":(datas[1].value/datas[0].value*100).toFixed(2))+"%"
-          //            return res
-          //        }
-          // },
-          // legend: {show:false},
-          // xAxis: [
-          //   {
-          //     type: 'category',
-          //     axisTick: { show: false },
-          //     data: data3
-          //   }
-          // ],
-          // yAxis: [
-          //   {
-          //     type: 'value'
-          //   }
-          // ],
-          // series: [
-          //   {
-          //     name: '计划',
-          //     type: 'bar',
-          //     barGap: 0,
-          //     label: labelOption,
-          //     emphasis: {
-          //       focus: 'series'
-          //     },
-          //     data: data1
-          //   },
-          //   {
-          //     name: '记录',
-          //     type: 'bar',
-          //     label: labelOption,
-          //     emphasis: {
-          //       focus: 'series'
-          //     },
-          //     data:data2
-          //   }
-          // ]
+            }
+          ]
         };
 
         option && s5renYuanJianDu.setOption(option);

src/views/statistics/item/s5renYuanJianDuCol.vue

@@ -0,0 +1,365 @@
+<template>
+  <div @click="toDetailed()" class="statisticsPage" :style="{width:width}">
+    <div :id="id" :style="{height:height}"/>
+    <!-- 打开详情弹窗-->
+    <div v-if="dialogOff">
+      <dialogView
+        :dialogOff = "dialogOff"
+        @close = "close"
+        :title="title"
+        :data="data"
+      />
+    </div>
+  </div>
+</template>
+
+<script>
+  import echarts from 'echarts'
+  import {GetPercent,GetMax} from  '../js/config.js'
+  import dialogView from '../properties/s5renYuanJianDuPro.vue'
+
+  export default {
+    components:{
+      dialogView
+    },
+    props: {
+      data: {
+        type: Object,
+      },
+      width:{
+        type:String,
+        default:"20%"
+      },
+      height:{
+        type:String,
+        default: window.screen.height/4+"px"
+      },
+      id:{
+        type:String,
+        default:"s5renyuanJianDu"
+      },
+      click:{
+        type:String,
+        default:'true'
+      },
+    },
+    data () {
+      return {
+        title:'人员监督',
+        dialogOff:false,
+      }
+    },
+    mounted(){
+      this.drawLine();
+    },
+    methods: {
+      close(){
+        this.dialogOff = false
+      },
+      /* 跳转统计页面*/
+      toDetailed(){
+        if(this.click == "true"){
+        this.dialogOff = true
+       }
+      },
+      drawLine(){
+        let s5renYuanJianDu = echarts.init(document.getElementById(this.id))
+        let beginInof = GetPercent(Number(this.data.t_zljdssBegin.number),Number(this.data.t_zljdBegin.number))
+        let endInof = GetPercent(Number(this.data.t_zljdssEnd.number),Number(this.data.t_zljdEnd.number))
+
+         let data1 = [];
+         data1.push(this.data.t_zljdBegin.number);
+         data1.push(this.data.t_zljdEnd.number);
+         let data2 = [];
+         data2.push(this.data.t_zljdssBegin.number);
+         data2.push(this.data.t_zljdssEnd.number);
+         let data3 = [];
+         data3.push(this.data.t_zljdssBegin.date);
+         data3.push(this.data.t_zljdssEnd.date);
+         const posList = [
+          'left',
+          'right',
+          'top',
+          'bottom',
+          'inside',
+          'insideTop',
+          'insideLeft',
+          'insideRight',
+          'insideBottom',
+          'insideTopLeft',
+          'insideTopRight',
+          'insideBottomLeft',
+          'insideBottomRight'
+        ];
+        app.configParameters = {
+          rotate: {
+            min: -90,
+            max: 90
+          },
+          align: {
+            options: {
+              left: 'left',
+              center: 'center',
+              right: 'right'
+            }
+          },
+          verticalAlign: {
+            options: {
+              top: 'top',
+              middle: 'middle',
+              bottom: 'bottom'
+            }
+          },
+          position: {
+            options: posList.reduce(function (map, pos) {
+              map[pos] = pos;
+              return map;
+            }, {})
+          },
+          distance: {
+            min: 0,
+            max: 100
+          }
+        };
+        app.config = {
+          rotate: 90,
+          align: 'left',
+          verticalAlign: 'middle',
+          position: 'bottom',
+          distance: 0,
+          onChange: function () {
+            const labelOption = {
+              rotate: app.config.rotate,
+              align: app.config.align,
+              verticalAlign: app.config.verticalAlign,
+              position: app.config.position,
+              distance: app.config.distance
+            };
+            myChart.setOption({
+              series: [
+                {
+                  label: labelOption
+                },
+                {
+                  label: labelOption
+                },
+                {
+                  label: labelOption
+                },
+                {
+                  label: labelOption
+                }
+              ]
+            });
+          }
+        };
+        const labelOption = {
+          show: true,
+          position: app.config.position,
+          distance: app.config.distance,
+          align: app.config.align,
+          verticalAlign: app.config.verticalAlign,
+          rotate: app.config.rotate,
+          formatter: '{c}  {name|{a}}',
+          fontSize: 16,
+          rich: {
+              name: {
+                  textBorderColor: '#fff'
+              }
+          }
+        };
+
+        //v2
+        // let barData = []
+        // for (let i = 0; i < this.data.t_zljdNum.date.length; i++) {
+        //   let e=[this.data.t_zljdNum.date[i],this.data.t_zljdNum.number[i],this.data.t_zljdNum.numberAll[i]]
+        //   barData.push(e)
+        // }
+        //v3
+         let e=[this.data.t_zljdNum.number[0],this.data.t_zljdNum.numberAll[0],this.data.t_zljdNum.res[0]]
+
+        let option = {
+          //v3
+            legend: {},
+            tooltip: {
+              trigger: 'axis',
+              axisPointer: {
+                type: 'shadow'
+              },
+              // formatter: function (params) {
+              //   return params[0].data[0] + '<br/>满意份数：' + params[0].data[1] + '<br/>调查总份数: ' + params[0].data[2];
+              // }
+            },
+            // dataset: {
+            //   source: barData
+            // },
+            xAxis: { type: 'category',data:['已完成数量', '所有数量', '监督完成率']},
+            yAxis: [
+              {
+                type: 'value',
+                scale: true,
+                name: '数量',
+                max: this.data.t_zljdNum.number[0]>this.data.t_zljdNum.numberAll[0]?this.data.t_zljdNum.number[0]+1:this.data.t_zljdNum.numberAll[0]+1,
+                min: 0,
+                // boundaryGap: [0.2, 0.2]
+              },
+              {
+                type: 'value',
+                scale: true,
+                name: '监督完成率',
+                max: this.data.t_zljdNum.res[0],
+                min: 0,
+                axisLabel: {
+                  formatter: '{value} %'
+                }
+              }
+            ],
+            // Declare several bar series, each will be mapped
+            // to a column of dataset.source by default.
+            // series: [{ type: 'bar' }],
+            series: [
+              {
+                data: e,
+                type: 'bar',
+                barWidth: '20%',
+                itemStyle: {
+                  color: '#9933cc'
+                },
+                label: {
+                  show: true,
+                  position: 'top'
+                },
+              }
+            ],
+            grid: {
+              top: '20%',
+              left: '3%',
+              right: '4%',
+              bottom: '10%',
+              containLabel: true
+            },
+            title: {
+              text: this.title,
+              textStyle:{ fontSize:14 }
+
+              // subtext: "        "+beingDate+"-"+endDate
+            },
+          //v2
+            // legend: {},
+            // tooltip: {
+            //   trigger: 'axis',
+            //   axisPointer: {
+            //     type: 'shadow'
+            //   },
+            //   formatter: function (params) {
+            //     return params[0].data[0] + '<br/>已完成监督数量：' + params[0].data[1]+ '<br/>所有监督数量：' + params[0].data[2];
+            //   }
+            // },
+            // dataset: {
+            //   source: barData
+            // },
+            // xAxis: { type: 'category' },
+            // yAxis: {
+            //   type: 'value',
+            //   axisLabel: {
+            //     show: true,
+            //     textStyle:{color:'#000'},
+            //     interval: 'auto',
+            //     // formatter: '{value} %'
+            //   },
+            
+            // },
+            // // Declare several bar series, each will be mapped
+            // // to a column of dataset.source by default.
+            // series: [{ type: 'bar'},{ type: 'bar'}],
+            // grid: {
+            //   top: '20%',
+            //   left: '3%',
+            //   right: '4%',
+            //   bottom: '10%',
+            //   containLabel: true
+            // },
+            // title: {
+            //   text: this.title,
+            //   subtext: "        "+this.data.t_zljdNum.date[0]+"-"+this.data.t_zljdNum.date[this.data.t_zljdNum.date.length-1]
+            // },
+            //v1
+          // grid: {
+          //               top: '20%',
+          //               left: '3%',
+          //               right: '4%',
+          //               bottom: '10%',
+          //               containLabel: true
+          //           },
+          // title: {
+          //           text: this.title,
+          //           subtext: this.data.t_zljdssBegin.date+"-"+this.data.t_zljdssEnd.date+"年监督次数"
+          //         },
+          // color : [
+          //                             '#C6E579','#B5C334','#FCCE10','#E87C25','#27727B',
+          //                              '#FE8463','#9BCA63','#FAD860','#F3A43B','#60C0DD',
+          //                              '#D7504B','#C6E579','#F4E001','#F0805A','#26C0C0'
+          //                           ],
+          // tooltip: {
+          //        trigger: 'axis',
+          //        axisPointer: {
+          //          type: 'shadow'
+          //        },
+          //        formatter: function (datas) {
+          //            var res='计划:'+datas[0].value+"<BR>"
+          //            res+='记录:'+datas[1].value+"<BR>"
+          //            res+='百分比:'+(datas[0].value==null||datas[0].value==0?"0.00":(datas[1].value/datas[0].value*100).toFixed(2))+"%"
+          //            return res
+          //        }
+          // },
+          // legend: {show:false},
+          // xAxis: [
+          //   {
+          //     type: 'category',
+          //     axisTick: { show: false },
+          //     data: data3
+          //   }
+          // ],
+          // yAxis: [
+          //   {
+          //     type: 'value'
+          //   }
+          // ],
+          // series: [
+          //   {
+          //     name: '计划',
+          //     type: 'bar',
+          //     barGap: 0,
+          //     label: labelOption,
+          //     emphasis: {
+          //       focus: 'series'
+          //     },
+          //     data: data1
+          //   },
+          //   {
+          //     name: '记录',
+          //     type: 'bar',
+          //     label: labelOption,
+          //     emphasis: {
+          //       focus: 'series'
+          //     },
+          //     data:data2
+          //   }
+          // ]
+        };
+
+        option && s5renYuanJianDu.setOption(option);
+      }
+    }
+  }
+</script>
+<style scoped>
+  #s5renyuanJianDu:hover{
+    transition: all 0.5s;
+    transform:scale(1.03);
+  }
+  .statisticsPage{
+     box-shadow: 0 2px 12px 0 rgba(0, 0, 0, 0.1);
+     float: left;
+  }
+</style>

src/views/statistics/item/s7sheBeiJiaoZhun.vue

@@ -32,7 +32,7 @@
       },
       height:{
         type:String,
-        default: window.screen.height/2+"px"
+        default: window.screen.height/5+"px"
       },
       id:{
         type:String,
@@ -45,7 +45,7 @@
     },
     data () {
       return {
-        title:'设备鉴定/校验计划',
+        title:'设备检定/校验计划完成情况',
         dialogOff:false,
       }
     },
@@ -85,6 +85,8 @@
         //   barData.push(e)
         // }
         //  let e=[this.data.t_ryywpxjlNum.number[0],this.data.t_ryywpxjlNum.numberAll[0],this.data.t_ryywpxjlNum.res[0]]
+        let e=100-this.data.t_mjsbjdxzjhzbNum.valna
+
 
 
         var option;
@@ -92,192 +94,35 @@
           //v3
           title: {
             text: this.title,
-            subtext: this.data.t_mjsbjdxzjhzbNum.date+"年校准次数"
+            // subtext: 'Fake Data',
+            left: 'left',
+            textStyle:{ fontSize:14 }
           },
           tooltip: {
-                        trigger: 'axis',
-                        axisPointer: {
-                          type: 'shadow'
-                        },
-                        formatter: function (datas) {
-                            var res=datas[0].name+"<BR>"+'完成:'+datas[0].value+"<BR>"
-                            res+='计划:'+datas[1].value+"<BR>"
-                            res+='百分比:'+(datas[1].value==null||datas[1].value==0?"0.00":(datas[0].value/datas[1].value*100).toFixed(2))+"%"
-                            return res
-                        }
-          },
-          legend: {},
-          grid: {
-                        top: '10%',
-                        left: '3%',
-                        right: '4%',
-                        bottom: '5%',
-                        containLabel: true
-                    },
-          xAxis: {
-            type: 'value',
-            boundaryGap: [0, 0.01]
-          },
-          yAxis: {
-            type: 'category',
-            data: this.data.t_mjsbjdxzjhzbNum.name,
-            axisLabel: {
-                show: true, // 是否显示X轴的内容，不包含两端的文字
-                interval: 0,
-                // rotate: '50', // 旋转50°
-                lineHeight: 18,
-                // formatter: function(params) {
-                //   //  console.log('formatter', params, params.length)
-                //   var newParamsName = ''// 最终拼接成的字符串
-                //   var paramsNameNumber = params.length// 实际标签的个数
-                //   var provideNumber = 3// 每行能显示的字的个数
-                //   // 判断标签的个数是否大于规定的个数， 如果大于，则进行换行处理 如果不大于，即等于或小于，就返回原标签
-                //   if (paramsNameNumber > provideNumber) {
-                //   // ********重点在这里********
-                //     newParamsName = params.substring(0, 3) + '..'// 最终拼成的字符串
-                //   } else { // 将旧标签的值赋给新标签
-                //     newParamsName = params
-                //   }
-                //   // 将最终的字符串返回
-                //   return newParamsName
-                // }
-              },
+            trigger: 'item'
           },
+          color:['#9999ff','#cccc00'],
           series: [
             {
-              type: 'bar',
-              data: this.data.t_mjsbjdxzjhzbNum.number,
+              type: 'pie',
+              radius: '50%',
               label: {
-                show: true,
-                position: 'right'
+                formatter: '{b}: {d}%'
               },
-            },
-            {
-              type: 'bar',
-              data: this.data.t_mjsbjdxzjhzbNum.numberAll,
-              label: {
-                show: true,
-                position: 'right'
-              },
-            },
-          ],dataZoom: [
-        {
-            id: 'dataZoomY',
-            type: 'inside',
-            yAxisIndex: [0],
-            filterMode: 'empty'
-        }
-      ],
-          //v2
-        //     legend: {},
-        //     tooltip: {
-        //       trigger: 'axis',
-        //       axisPointer: {
-        //         type: 'shadow'
-        //       },
-        //       formatter: function (params) {
-        //         return params[0].data[0] + '<br/>已完成培训数量：' + params[0].data[1]+ '<br/>所有培训数量：' + params[0].data[2];
-        //       }
-        //     },
-        //     dataset: {
-        //       source: barData
-        //     },
-        //     xAxis: { type: 'category' },
-        //     yAxis: {
-        //       type: 'value',
-        //       axisLabel: {
-        //         show: true,
-        //         textStyle:{color:'#000'},
-        //         interval: 'auto',
-        //         // formatter: '{value} %'
-        //       },
-            
-        //     },
-        //     // Declare several bar series, each will be mapped
-        //     // to a column of dataset.source by default.
-        //     series: [{ type: 'bar'},{ type: 'bar'}],
-        //     grid: {
-        //       top: '20%',
-        //       left: '3%',
-        //       right: '4%',
-        //       bottom: '10%',
-        //       containLabel: true
-        //     },
-        //     title: {
-        //       text: this.title,
-        //       subtext: "        "+this.data.t_ryywpxjlNum.date[0]+"-"+this.data.t_ryywpxjlNum.date[this.data.t_ryywpxjlNum.date.length-1]
-        //     },
-        //v1
-          // title: {
-          //   text: this.title,
-          //   subtext: this.data.t_rypxjlnkBegin.date+"-"+this.data.t_rypxjlnkEnd.date+"年培训次数"
-          // },
-          // tooltip: {
-          //        trigger: 'axis',
-          //        axisPointer: {
-          //          type: 'shadow'
-          //        },
-          //        formatter: function (datas) {
-          //            var res='计划:'+datas[0].value+"<BR>"
-          //            res+='记录:'+datas[1].value+"<BR>"
-          //            res+='百分比:'+(datas[0].value==null||datas[0].value==0?"0.00":(datas[1].value/datas[0].value*100).toFixed(2))+"%"
-          //            return res
-          //        }
-          // },
-          // legend: {show:false},
-          //  grid: {
-          //       top: '20%',
-          //       left: '3%',
-          //       right: '4%',
-          //       bottom: '10%',
-          //       containLabel: true
-          //   },
-          // xAxis: {
-          //   type: 'category',
-          //   data: data3
-            
-          // },
-          // yAxis: {
-          //   type: 'value',
-          //   boundaryGap: [0, 0.01]
-          // },
-          // series: [
-
-          //   {
-          //     name: ['计划'],
-          //     type: 'bar',
-          //     data: data1,
-          //     itemStyle: {
-          //           normal: {
-          //               color: function(params) {
-          //                   var colorList = [
-          //                     '#FE8463','#9BCA63','#FCCE10','#E87C25','#27727B',
-          //                      '#FE8463','#9BCA63','#FAD860','#F3A43B','#60C0DD',
-          //                      '#D7504B','#C6E579','#F4E001','#F0805A','#26C0C0'
-          //                   ];
-          //                   return colorList[params.dataIndex]
-          //               },
-          //           }
-          //       },
-          //   },
-          //   {
-          //     name: ['记录'],
-          //     type: 'bar',
-          //     data: data2,
-          //     itemStyle: {
-          //           normal: {
-          //               color: function(params) {
-          //                   var colorList = [
-          //                     '#E87C25','#FAD860','#FCCE10','#E87C25','#27727B',
-          //                      '#FE8463','#9BCA63','#FAD860','#F3A43B','#60C0DD',
-          //                      '#D7504B','#C6E579','#F4E001','#F0805A','#26C0C0'
-          //                   ];
-          //                   return colorList[params.dataIndex]
-          //               },
-          //           }
-          //       },
-          //   }
-          // ]
+              data: [
+                { value: this.data.t_mjsbjdxzjhzbNum.valna, name: '检定完成率' },
+                { value: e, name: '检定未完成率' }
+              ],
+              emphasis: {
+                itemStyle: {
+                  shadowBlur: 10,
+                  shadowOffsetX: 0,
+                  shadowColor: 'rgba(0, 0, 0, 0.5)'
+                }
+              }
+            }
+          ]
+       
         };
 
 

src/views/statistics/item/s7sheBeiJiaoZhunCol.vue

@@ -0,0 +1,164 @@
+<template>
+  <div @click="toDetailed()" class="statisticsPage" :style="{width:width}">
+    <div :id="id" :style="{height:height}"/>
+    <!-- 打开详情弹窗-->
+    <div v-if="dialogOff">
+      <dialogView
+        :dialogOff = "dialogOff"
+        @close = "close"
+        :title="title"
+        :data="data"
+      />
+    </div>
+  </div>
+</template>
+
+<script>
+  import echarts from 'echarts'
+  import {GetPercent,GetMax} from  '../js/config.js'
+  import dialogView from '../properties/s7sheBeiJiaoZhunPro.vue'
+
+  export default {
+    components:{
+      dialogView
+    },
+    props: {
+      data: {
+        type: Object,
+      },
+      width:{
+        type:String,
+        default:"20%"
+      },
+      height:{
+        type:String,
+        default: window.screen.height/5+"px"
+      },
+      id:{
+        type:String,
+        default:"s7sheBeiJiaoZhun"
+      },
+      click:{
+        type:String,
+        default:'true'
+      },
+    },
+    data () {
+      return {
+        title:'设备检定/校验计划完成情况',
+        dialogOff:false,
+      }
+    },
+    mounted(){
+      this.drawLine();
+    },
+    methods: {
+      close(){
+        this.dialogOff = false
+      },
+      /* 跳转统计页面*/
+      toDetailed(){
+        if(this.click == "true"){
+        this.dialogOff = true
+       }
+      },
+      drawLine(){
+        let s7sheBeiJiaoZhun = echarts.init(document.getElementById(this.id))
+
+        // let beginInof = GetPercent(Number(this.data.t_rypxjlnkBegin.number),Number(this.data.t_ryndpxjhBegin.number))
+        // let endInof = GetPercent(Number(this.data.t_rypxjlnkEnd.number),Number(this.data.t_ryndpxjhEnd.number))
+
+        //  let data1 = [];
+        //  data1.push(this.data.t_ryndpxjhBegin.number);
+        //  data1.push(this.data.t_ryndpxjhEnd.number);
+        //  let data2 = [];
+        //  data2.push(this.data.t_rypxjlnkBegin.number);
+        //  data2.push(this.data.t_rypxjlnkEnd.number);
+        //  let data3 = [];
+        //  data3.push(this.data.t_rypxjlnkBegin.date);
+        //  data3.push(this.data.t_rypxjlnkEnd.date);
+
+
+        // let barData = []
+        // for (let i = 0; i < this.data.t_ryywpxjlNum.date.length; i++) {
+        //   let e=[this.data.t_ryywpxjlNum.date[i],this.data.t_ryywpxjlNum.number[i],this.data.t_ryywpxjlNum.numberAll[i]]
+        //   barData.push(e)
+        // }
+        //  let e=[this.data.t_ryywpxjlNum.number[0],this.data.t_ryywpxjlNum.numberAll[0],this.data.t_ryywpxjlNum.res[0]]
+
+        let e=[this.data.t_mjsbjdxzjhzbNum.valAll,this.data.t_mjsbjdxzjhzbNum.valnum]
+        var option;
+        option = {
+          //v3
+          legend: {},
+            tooltip: {
+              trigger: 'axis',
+              axisPointer: {
+                type: 'shadow'
+              },
+              // formatter: function (params) {
+              //   return params[0].data[0] + '<br/>满意份数：' + params[0].data[1] + '<br/>调查总份数: ' + params[0].data[2];
+              // }
+            },
+            // dataset: {
+            //   source: barData
+            // },
+            xAxis: { 
+              type: 'category',
+              data:['设备检定/校验计划总数', '设备检定/校验计划已完成数量']
+
+            },
+            yAxis: [
+              {
+                type: 'value',
+                scale: true,
+                name: '数量',
+                max: this.data.t_mjsbjdxzjhzbNum.valnum>this.data.t_mjsbjdxzjhzbNum.valAll?this.data.t_mjsbjdxzjhzbNum.valnum+1:this.data.t_mjsbjdxzjhzbNum.valAll+1,
+                min: 0,
+              },
+            ],
+            series: [
+              {
+                data: e,
+                type: 'bar',
+                barWidth: '20%',
+                itemStyle: {
+                  color: '#0099ff'
+                },
+                label: {
+                  show: true,
+                  position: 'top'
+                },
+              }
+            ],
+            grid: {
+              top: '20%',
+              left: '3%',
+              right: '4%',
+              bottom: '10%',
+              containLabel: true
+            },
+            title: {
+              text: this.title,
+              textStyle:{ fontSize:14 }
+
+              // subtext: "        "+beingDate+"-"+endDate
+            },
+        };
+
+
+       option && s7sheBeiJiaoZhun.setOption(option);
+      }
+    }
+  }
+</script>
+<style scoped>
+  #s7sheBeiJiaoZhun:hover{
+    transition: all 0.5s;
+    transform:scale(1.03);
+  }
+  .statisticsPage{
+     box-shadow: 0 2px 12px 0 rgba(0, 0, 0, 0.1);
+     float: left;
+  }
+</style>

src/views/statistics/item/s7sheBeiJiaoZhunCol2.vue

@@ -0,0 +1,300 @@
+<template>
+  <div @click="toDetailed()" class="statisticsPage" :style="{width:width}">
+    <div :id="id" :style="{height:height}"/>
+    <!-- 打开详情弹窗-->
+    <div v-if="dialogOff">
+      <dialogView
+        :dialogOff = "dialogOff"
+        @close = "close"
+        :title="title"
+        :data="data"
+      />
+    </div>
+  </div>
+</template>
+
+<script>
+  import echarts from 'echarts'
+  import {GetPercent,GetMax} from  '../js/config.js'
+  import dialogView from '../properties/s7sheBeiJiaoZhunPro.vue'
+
+  export default {
+    components:{
+      dialogView
+    },
+    props: {
+      data: {
+        type: Object,
+      },
+      width:{
+        type:String,
+        default:"20%"
+      },
+      height:{
+        type:String,
+        default: window.screen.height/5+"px"
+      },
+      id:{
+        type:String,
+        default:"s7sheBeiJiaoZhun"
+      },
+      click:{
+        type:String,
+        default:'true'
+      },
+    },
+    data () {
+      return {
+        title:'各个设备鉴定/校验计划数量',
+        dialogOff:false,
+      }
+    },
+    mounted(){
+      this.drawLine();
+    },
+    methods: {
+      close(){
+        this.dialogOff = false
+      },
+      /* 跳转统计页面*/
+      toDetailed(){
+        if(this.click == "true"){
+        this.dialogOff = true
+       }
+      },
+      drawLine(){
+        let s7sheBeiJiaoZhun = echarts.init(document.getElementById(this.id))
+
+        // let beginInof = GetPercent(Number(this.data.t_rypxjlnkBegin.number),Number(this.data.t_ryndpxjhBegin.number))
+        // let endInof = GetPercent(Number(this.data.t_rypxjlnkEnd.number),Number(this.data.t_ryndpxjhEnd.number))
+
+        //  let data1 = [];
+        //  data1.push(this.data.t_ryndpxjhBegin.number);
+        //  data1.push(this.data.t_ryndpxjhEnd.number);
+        //  let data2 = [];
+        //  data2.push(this.data.t_rypxjlnkBegin.number);
+        //  data2.push(this.data.t_rypxjlnkEnd.number);
+        //  let data3 = [];
+        //  data3.push(this.data.t_rypxjlnkBegin.date);
+        //  data3.push(this.data.t_rypxjlnkEnd.date);
+
+
+        // let barData = []
+        // for (let i = 0; i < this.data.t_ryywpxjlNum.date.length; i++) {
+        //   let e=[this.data.t_ryywpxjlNum.date[i],this.data.t_ryywpxjlNum.number[i],this.data.t_ryywpxjlNum.numberAll[i]]
+        //   barData.push(e)
+        // }
+        //  let e=[this.data.t_ryywpxjlNum.number[0],this.data.t_ryywpxjlNum.numberAll[0],this.data.t_ryywpxjlNum.res[0]]
+
+
+        var option;
+        option = {
+          //v3
+          title: {
+            text: this.title,
+            textStyle:{ fontSize:14 }
+
+            // subtext: this.data.t_mjsbjdxzjhzbNum.date+"年校准次数"
+          },
+          tooltip: {
+                        trigger: 'axis',
+                        axisPointer: {
+                          type: 'shadow'
+                        },
+                        formatter: function (datas) {
+                            var res=datas[0].name+"<BR>"+'完成:'+datas[0].value+"<BR>"
+                            res+='计划:'+datas[1].value+"<BR>"
+                            res+='百分比:'+(datas[1].value==null||datas[1].value==0?"0.00":(datas[0].value/datas[1].value*100).toFixed(2))+"%"
+                            return res
+                        }
+          },
+          legend: {},
+          grid: {
+                        top: '10%',
+                        left: '3%',
+                        right: '4%',
+                        bottom: '5%',
+                        containLabel: true
+                    },
+          xAxis: {
+            type: 'value',
+            boundaryGap: [0, 0.01]
+          },
+          yAxis: {
+            type: 'category',
+            data: this.data.t_mjsbjdxzjhzbNum.name,
+            axisLabel: {
+                show: true, // 是否显示X轴的内容，不包含两端的文字
+                interval: 0,
+                // rotate: '50', // 旋转50°
+                lineHeight: 18,
+                // formatter: function(params) {
+                //   //  console.log('formatter', params, params.length)
+                //   var newParamsName = ''// 最终拼接成的字符串
+                //   var paramsNameNumber = params.length// 实际标签的个数
+                //   var provideNumber = 3// 每行能显示的字的个数
+                //   // 判断标签的个数是否大于规定的个数， 如果大于，则进行换行处理 如果不大于，即等于或小于，就返回原标签
+                //   if (paramsNameNumber > provideNumber) {
+                //   // ********重点在这里********
+                //     newParamsName = params.substring(0, 3) + '..'// 最终拼成的字符串
+                //   } else { // 将旧标签的值赋给新标签
+                //     newParamsName = params
+                //   }
+                //   // 将最终的字符串返回
+                //   return newParamsName
+                // }
+              },
+          },
+          series: [
+            {
+              type: 'bar',
+              data: this.data.t_mjsbjdxzjhzbNum.number,
+              label: {
+                show: true,
+                position: 'right'
+              },
+            },
+            {
+              type: 'bar',
+              data: this.data.t_mjsbjdxzjhzbNum.numberAll,
+              label: {
+                show: true,
+                position: 'right'
+              },
+            },
+          ],dataZoom: [
+        {
+            id: 'dataZoomY',
+            type: 'inside',
+            yAxisIndex: [0],
+            filterMode: 'empty'
+        }
+      ],
+          //v2
+        //     legend: {},
+        //     tooltip: {
+        //       trigger: 'axis',
+        //       axisPointer: {
+        //         type: 'shadow'
+        //       },
+        //       formatter: function (params) {
+        //         return params[0].data[0] + '<br/>已完成培训数量：' + params[0].data[1]+ '<br/>所有培训数量：' + params[0].data[2];
+        //       }
+        //     },
+        //     dataset: {
+        //       source: barData
+        //     },
+        //     xAxis: { type: 'category' },
+        //     yAxis: {
+        //       type: 'value',
+        //       axisLabel: {
+        //         show: true,
+        //         textStyle:{color:'#000'},
+        //         interval: 'auto',
+        //         // formatter: '{value} %'
+        //       },
+            
+        //     },
+        //     // Declare several bar series, each will be mapped
+        //     // to a column of dataset.source by default.
+        //     series: [{ type: 'bar'},{ type: 'bar'}],
+        //     grid: {
+        //       top: '20%',
+        //       left: '3%',
+        //       right: '4%',
+        //       bottom: '10%',
+        //       containLabel: true
+        //     },
+        //     title: {
+        //       text: this.title,
+        //       subtext: "        "+this.data.t_ryywpxjlNum.date[0]+"-"+this.data.t_ryywpxjlNum.date[this.data.t_ryywpxjlNum.date.length-1]
+        //     },
+        //v1
+          // title: {
+          //   text: this.title,
+          //   subtext: this.data.t_rypxjlnkBegin.date+"-"+this.data.t_rypxjlnkEnd.date+"年培训次数"
+          // },
+          // tooltip: {
+          //        trigger: 'axis',
+          //        axisPointer: {
+          //          type: 'shadow'
+          //        },
+          //        formatter: function (datas) {
+          //            var res='计划:'+datas[0].value+"<BR>"
+          //            res+='记录:'+datas[1].value+"<BR>"
+          //            res+='百分比:'+(datas[0].value==null||datas[0].value==0?"0.00":(datas[1].value/datas[0].value*100).toFixed(2))+"%"
+          //            return res
+          //        }
+          // },
+          // legend: {show:false},
+          //  grid: {
+          //       top: '20%',
+          //       left: '3%',
+          //       right: '4%',
+          //       bottom: '10%',
+          //       containLabel: true
+          //   },
+          // xAxis: {
+          //   type: 'category',
+          //   data: data3
+            
+          // },
+          // yAxis: {
+          //   type: 'value',
+          //   boundaryGap: [0, 0.01]
+          // },
+          // series: [
+
+          //   {
+          //     name: ['计划'],
+          //     type: 'bar',
+          //     data: data1,
+          //     itemStyle: {
+          //           normal: {
+          //               color: function(params) {
+          //                   var colorList = [
+          //                     '#FE8463','#9BCA63','#FCCE10','#E87C25','#27727B',
+          //                      '#FE8463','#9BCA63','#FAD860','#F3A43B','#60C0DD',
+          //                      '#D7504B','#C6E579','#F4E001','#F0805A','#26C0C0'
+          //                   ];
+          //                   return colorList[params.dataIndex]
+          //               },
+          //           }
+          //       },
+          //   },
+          //   {
+          //     name: ['记录'],
+          //     type: 'bar',
+          //     data: data2,
+          //     itemStyle: {
+          //           normal: {
+          //               color: function(params) {
+          //                   var colorList = [
+          //                     '#E87C25','#FAD860','#FCCE10','#E87C25','#27727B',
+          //                      '#FE8463','#9BCA63','#FAD860','#F3A43B','#60C0DD',
+          //                      '#D7504B','#C6E579','#F4E001','#F0805A','#26C0C0'
+          //                   ];
+          //                   return colorList[params.dataIndex]
+          //               },
+          //           }
+          //       },
+          //   }
+          // ]
+        };
+
+
+       option && s7sheBeiJiaoZhun.setOption(option);
+      }
+    }
+  }
+</script>
+<style scoped>
+  #s7sheBeiJiaoZhun:hover{
+    transition: all 0.5s;
+    transform:scale(1.03);
+  }
+  .statisticsPage{
+     box-shadow: 0 2px 12px 0 rgba(0, 0, 0, 0.1);
+     float: left;
+  }
+</style>

src/views/statistics/item/s8sheBeiHeCha.vue

@@ -31,7 +31,7 @@
       },
       height:{
         type:String,
-        default: window.screen.height/2+"px"
+        default: window.screen.height/5+"px"
       },
       id:{
         type:String,
@@ -44,7 +44,7 @@
     },
     data () {
       return {
-        title:'设备核查计划',
+        title:'设备期间核查完成情况',
         dialogOff:false,
       }
     },
@@ -82,148 +82,39 @@
         //  let max2=GetMax(data2)+1;
         //  let maxVal=max1>max2?max1:max2;
         //  console.log("max1:",max1,"max2:",max2);
-        console.log( this.data.t_sbhcjlbNum.name,'nameddd')
+       let e = 100 -this.data.t_sbhcjlbNum.valna
 
        let option = {
-           //v3
-          title: {
+           title: {
             text: this.title,
-            subtext: this.data.t_sbhcjlbNum.date+"年核查次数"
+            // subtext: 'Fake Data',
+            left: 'left',
+            textStyle:{ fontSize:14 }
           },
           tooltip: {
-                        trigger: 'axis',
-                        axisPointer: {
-                          type: 'shadow'
-                        },
-                        formatter: function (datas) {
-                          console.log(datas)
-                            var res=datas[0].name+"<BR>"+'计划外核查:'+datas[0].data+"<BR>"
-                            res+='年度核查'+datas[1].data+"<BR>"
-                            // res+='百分比:'+(datas[1].value==null||datas[1].value==0?"0.00":(datas[0].value/datas[1].value*100).toFixed(2))+"%"
-                            return res
-                        }
-          },
-          legend: {},
-          grid: {
-                top: '10%',
-                left: '3%',
-                right: '4%',
-                bottom: '5%',
-                containLabel: true
-                    },
-          xAxis: {
-            type: 'value',
-            boundaryGap: [0, 0.01]
-          },
-          yAxis: {
-            type: 'category',
-            data: this.data.t_sbhcjlbNum.name,
-            axisLabel: {
-                show: true, // 是否显示X轴的内容，不包含两端的文字
-                interval: 0,
-                // rotate: '50', // 旋转50°
-                lineHeight: 18,
-                // formatter: function(params) {
-                //   //  console.log('formatter', params, params.length)
-                //   var newParamsName = ''// 最终拼接成的字符串
-                //   var paramsNameNumber = params.length// 实际标签的个数
-                //   var provideNumber = 3// 每行能显示的字的个数
-                //   // 判断标签的个数是否大于规定的个数， 如果大于，则进行换行处理 如果不大于，即等于或小于，就返回原标签
-                //   if (paramsNameNumber > provideNumber) {
-                //   // ********重点在这里********
-                //     newParamsName = params.substring(0, 3) + '..'// 最终拼成的字符串
-                //   } else { // 将旧标签的值赋给新标签
-                //     newParamsName = params
-                //   }
-                //   // 将最终的字符串返回
-                //   return newParamsName
-                // }
-              },
+            trigger: 'item'
           },
+          color:['#33cc33','#cc33cc'],
           series: [
             {
-              type: 'bar',
-              data: this.data.t_sbhcjlbNum.number,
-              label: {
-                show: true,
-                position: 'right'
-              },
-            },
-            {
-              type: 'bar',
-              data: this.data.t_sbhcjlbNum.numberAll,
+              type: 'pie',
+              radius: '50%',
               label: {
-                show: true,
-                position: 'right'
+                formatter: '{b}: {d}%'
               },
-            },
-          ],
-                dataZoom: [
-        {
-            id: 'dataZoomY',
-            type: 'inside',
-            yAxisIndex: [0],
-            filterMode: 'empty'
-        }
-      ],
-         //v1
-        //   grid: {
-        //         top: '20%',
-        //         left: '3%',
-        //         right: '4%',
-        //         bottom: '10%',
-        //         containLabel: true
-        //     },
-        //    tooltip: {
-        //           trigger: 'axis',
-        //           axisPointer: {
-        //             type: 'shadow'
-        //           },
-        //           formatter: function (datas) {
-        //               var res='计划:'+datas[0].value+"<BR>"
-        //               res+='记录:'+datas[1].value+"<BR>"
-        //               res+='百分比:'+(datas[0].value==null||datas[0].value==0?"0.00":(datas[1].value/datas[0].value*100).toFixed(2))+"%"
-        //               return res
-        //           }
-        //    },
-        // title: {
-        //      text: this.title,
-        //      subtext: this.data.t_sbhcjlbBegin.date+"-"+this.data.t_sbhcjlbEnd.date+"年核查次数"
-        //      //subtext: this.data.t_sbhcjhBegin.date+'完成率为:' + beginInof +'\n'+this.data.t_sbhcjhEnd.date+'完成率为:'+endInof,
-        // },
-        // color: ['#003366', '#006699', '#4cabce', '#e5323e'],
-        //    legend: {
-        //      show:false
-        //  },
-        //  xAxis: [
-        //      {
-        //          type: 'category',
-        //          axisTick: {show: false},
-        //          data: data3
-        //      }
-        //  ],
-        //  yAxis:  [
-        //      {
-        //        max:maxVal,
-        //        min:0,
-        //          type: 'value'
-        //      }
-        //  ] 
-        //  ,
-        //  series: [
-        //     {
-        //          name: '计划条数',
-        //          type: 'bar',
-        //          barGap: 0,
-        //          data: data1
-        //    },
-        //     {
-        //          name: '记录条数',
-        //          type: 'bar',
-        //          barGap: 0,
-        //          data: data2
-        //    },
-        //  ]
+              data: [
+                { value: this.data.t_sbhcjlbNum.valna, name: '设备期间核查完成率' },
+                { value: e, name: '设备期间核查未完成率' }
+              ],
+              emphasis: {
+                itemStyle: {
+                  shadowBlur: 10,
+                  shadowOffsetX: 0,
+                  shadowColor: 'rgba(0, 0, 0, 0.5)'
+                }
+              }
+            }
+          ]
        };
 
        option && s8sheBeiHeCha.setOption(option);

src/views/statistics/item/s8sheBeiHeChaCol.vue

@@ -0,0 +1,158 @@
+<template>
+  <div @click="toDetailed()" class="statisticsPage" :style="{width:width}">
+    <div :id="id" :style="{height:height}"/>
+    <!-- 打开详情弹窗-->
+    <div v-if="dialogOff">
+      <dialogView
+        :dialogOff = "dialogOff"
+        @close = "close"
+        :title="title"
+        :data="data"
+      />
+    </div>
+  </div>
+</template>
+
+<script>
+  import echarts from 'echarts'
+  import dialogView from '../properties/s8sheBeiHeChaPro.vue'
+  import {GetPercent,GetMax} from  '../js/config.js'
+  export default {
+    components:{
+      dialogView
+    },
+    props: {
+      data: {
+        type: Object,
+      },
+      width:{
+        type:String,
+        default:"20%"
+      },
+      height:{
+        type:String,
+        default: window.screen.height/5+"px"
+      },
+      id:{
+        type:String,
+        default:"s8sheBeiHeCha"
+      },
+      click:{
+        type:String,
+        default:'true'
+      },
+    },
+    data () {
+      return {
+        title:'设备期间核查计划完成情况总数量',
+        dialogOff:false,
+      }
+    },
+    mounted(){
+      this.drawLine();
+    },
+    methods: {
+      close(){
+        this.dialogOff = false
+      },
+      /* 跳转统计页面*/
+      toDetailed(){
+        if(this.click == "true"){
+        this.dialogOff = true
+       }
+      },
+      drawLine(){
+        let s8sheBeiHeCha = echarts.init(document.getElementById(this.id))
+         
+
+          
+        // let beginInof = GetPercent(Number(this.data.t_sbhcjlbBegin.number),Number(this.data.t_sbhcjhBegin.number))
+        // let endInof = GetPercent(Number(this.data.t_sbhcjlbEnd.number),Number(this.data.t_sbhcjhEnd.number))
+         
+        //  let data1 = [];
+        //  data1.push(this.data.t_sbhcjhBegin.number);
+        //  data1.push(this.data.t_sbhcjhEnd.number);
+        //  let data2 = [];
+        //  data2.push(this.data.t_sbhcjlbBegin.number);
+        //  data2.push(this.data.t_sbhcjlbEnd.number);
+        //  let data3 = [];
+        //  data3.push(this.data.t_sbhcjlbBegin.date);
+        //  data3.push(this.data.t_sbhcjlbEnd.date);
+        //  let max1=GetMax(data1)+1;
+        //  let max2=GetMax(data2)+1;
+        //  let maxVal=max1>max2?max1:max2;
+        //  console.log("max1:",max1,"max2:",max2);
+        let e=[this.data.t_sbhcjlbNum.valAll,this.data.t_sbhcjlbNum.valnum]
+        let option = {
+           //v3
+          legend: {},
+            tooltip: {
+              trigger: 'axis',
+              axisPointer: {
+                type: 'shadow'
+              },
+              // formatter: function (params) {
+              //   return params[0].data[0] + '<br/>满意份数：' + params[0].data[1] + '<br/>调查总份数: ' + params[0].data[2];
+              // }
+            },
+            // dataset: {
+            //   source: barData
+            // },
+            xAxis: { 
+              type: 'category',
+              data:['设备期间核查总数', '设备期间核查已完成数量']
+
+            },
+            yAxis: [
+              {
+                type: 'value',
+                scale: true,
+                name: '数量',
+                max: this.data.t_sbhcjlbNum.valnum>this.data.t_sbhcjlbNum.valAll?this.data.t_sbhcjlbNum.valnum+1:this.data.t_sbhcjlbNum.valAll+1,
+                min: 0,
+              },
+            ],
+            series: [
+              {
+                data: e,
+                type: 'bar',
+                barWidth: '20%',
+                itemStyle: {
+                  color: '#0099ff'
+                },
+                label: {
+                  show: true,
+                  position: 'top'
+                },
+              }
+            ],
+            grid: {
+              top: '20%',
+              left: '3%',
+              right: '4%',
+              bottom: '10%',
+              containLabel: true
+            },
+            title: {
+              text: this.title,
+              textStyle:{ fontSize:14 }
+
+              // subtext: "        "+beingDate+"-"+endDate
+            },
+       };
+
+       option && s8sheBeiHeCha.setOption(option);
+      }
+    }
+  }
+</script>
+<style scoped>
+  #s8sheBeiHeCha:hover{
+    transition: all 0.5s;
+    transform:scale(1.03);
+  }
+  .statisticsPage{
+     box-shadow: 0 2px 12px 0 rgba(0, 0, 0, 0.1);
+     float: left;
+  }
+</style>

src/views/statistics/item/s8sheBeiHeChaCol2.vue

@@ -0,0 +1,244 @@
+<template>
+  <div @click="toDetailed()" class="statisticsPage" :style="{width:width}">
+    <div :id="id" :style="{height:height}"/>
+    <!-- 打开详情弹窗-->
+    <div v-if="dialogOff">
+      <dialogView
+        :dialogOff = "dialogOff"
+        @close = "close"
+        :title="title"
+        :data="data"
+      />
+    </div>
+  </div>
+</template>
+
+<script>
+  import echarts from 'echarts'
+  import dialogView from '../properties/s8sheBeiHeChaPro.vue'
+  import {GetPercent,GetMax} from  '../js/config.js'
+  export default {
+    components:{
+      dialogView
+    },
+    props: {
+      data: {
+        type: Object,
+      },
+      width:{
+        type:String,
+        default:"20%"
+      },
+      height:{
+        type:String,
+        default: window.screen.height/5+"px"
+      },
+      id:{
+        type:String,
+        default:"s8sheBeiHeCha"
+      },
+      click:{
+        type:String,
+        default:'true'
+      },
+    },
+    data () {
+      return {
+        title:'各个设备期间核查计划数量',
+        dialogOff:false,
+      }
+    },
+    mounted(){
+      this.drawLine();
+    },
+    methods: {
+      close(){
+        this.dialogOff = false
+      },
+      /* 跳转统计页面*/
+      toDetailed(){
+        if(this.click == "true"){
+        this.dialogOff = true
+       }
+      },
+      drawLine(){
+        let s8sheBeiHeCha = echarts.init(document.getElementById(this.id))
+         
+
+          
+        // let beginInof = GetPercent(Number(this.data.t_sbhcjlbBegin.number),Number(this.data.t_sbhcjhBegin.number))
+        // let endInof = GetPercent(Number(this.data.t_sbhcjlbEnd.number),Number(this.data.t_sbhcjhEnd.number))
+         
+        //  let data1 = [];
+        //  data1.push(this.data.t_sbhcjhBegin.number);
+        //  data1.push(this.data.t_sbhcjhEnd.number);
+        //  let data2 = [];
+        //  data2.push(this.data.t_sbhcjlbBegin.number);
+        //  data2.push(this.data.t_sbhcjlbEnd.number);
+        //  let data3 = [];
+        //  data3.push(this.data.t_sbhcjlbBegin.date);
+        //  data3.push(this.data.t_sbhcjlbEnd.date);
+        //  let max1=GetMax(data1)+1;
+        //  let max2=GetMax(data2)+1;
+        //  let maxVal=max1>max2?max1:max2;
+        //  console.log("max1:",max1,"max2:",max2);
+
+       let option = {
+           //v3
+          title: {
+            text: this.title,
+            textStyle:{ fontSize:14 }
+
+            // subtext: this.data.t_sbhcjlbNum.date+"年核查次数"
+          },
+          tooltip: {
+                        trigger: 'axis',
+                        axisPointer: {
+                          type: 'shadow'
+                        },
+                        formatter: function (datas) {
+                          console.log(datas)
+                            var res=datas[0].name+"<BR>"+'计划外核查:'+datas[0].data+"<BR>"
+                            res+='年度核查'+datas[1].data+"<BR>"
+                            // res+='百分比:'+(datas[1].value==null||datas[1].value==0?"0.00":(datas[0].value/datas[1].value*100).toFixed(2))+"%"
+                            return res
+                        }
+          },
+          legend: {},
+          grid: {
+                top: '10%',
+                left: '3%',
+                right: '4%',
+                bottom: '5%',
+                containLabel: true
+                    },
+          xAxis: {
+            type: 'value',
+            boundaryGap: [0, 0.01]
+          },
+          yAxis: {
+            type: 'category',
+            data: this.data.t_sbhcjlbNum.name,
+            axisLabel: {
+                show: true, // 是否显示X轴的内容，不包含两端的文字
+                interval: 0,
+                // rotate: '50', // 旋转50°
+                lineHeight: 18,
+                // formatter: function(params) {
+                //   //  console.log('formatter', params, params.length)
+                //   var newParamsName = ''// 最终拼接成的字符串
+                //   var paramsNameNumber = params.length// 实际标签的个数
+                //   var provideNumber = 3// 每行能显示的字的个数
+                //   // 判断标签的个数是否大于规定的个数， 如果大于，则进行换行处理 如果不大于，即等于或小于，就返回原标签
+                //   if (paramsNameNumber > provideNumber) {
+                //   // ********重点在这里********
+                //     newParamsName = params.substring(0, 3) + '..'// 最终拼成的字符串
+                //   } else { // 将旧标签的值赋给新标签
+                //     newParamsName = params
+                //   }
+                //   // 将最终的字符串返回
+                //   return newParamsName
+                // }
+              },
+          },
+          series: [
+            {
+              type: 'bar',
+              data: this.data.t_sbhcjlbNum.number,
+              label: {
+                show: true,
+                position: 'right'
+              },
+            },
+            {
+              type: 'bar',
+              data: this.data.t_sbhcjlbNum.numberAll,
+              label: {
+                show: true,
+                position: 'right'
+              },
+            },
+          ],
+                dataZoom: [
+        {
+            id: 'dataZoomY',
+            type: 'inside',
+            yAxisIndex: [0],
+            filterMode: 'empty'
+        }
+      ],
+         //v1
+        //   grid: {
+        //         top: '20%',
+        //         left: '3%',
+        //         right: '4%',
+        //         bottom: '10%',
+        //         containLabel: true
+        //     },
+        //    tooltip: {
+        //           trigger: 'axis',
+        //           axisPointer: {
+        //             type: 'shadow'
+        //           },
+        //           formatter: function (datas) {
+        //               var res='计划:'+datas[0].value+"<BR>"
+        //               res+='记录:'+datas[1].value+"<BR>"
+        //               res+='百分比:'+(datas[0].value==null||datas[0].value==0?"0.00":(datas[1].value/datas[0].value*100).toFixed(2))+"%"
+        //               return res
+        //           }
+        //    },
+        // title: {
+        //      text: this.title,
+        //      subtext: this.data.t_sbhcjlbBegin.date+"-"+this.data.t_sbhcjlbEnd.date+"年核查次数"
+        //      //subtext: this.data.t_sbhcjhBegin.date+'完成率为:' + beginInof +'\n'+this.data.t_sbhcjhEnd.date+'完成率为:'+endInof,
+        // },
+        // color: ['#003366', '#006699', '#4cabce', '#e5323e'],
+        //    legend: {
+        //      show:false
+        //  },
+        //  xAxis: [
+        //      {
+        //          type: 'category',
+        //          axisTick: {show: false},
+        //          data: data3
+        //      }
+        //  ],
+        //  yAxis:  [
+        //      {
+        //        max:maxVal,
+        //        min:0,
+        //          type: 'value'
+        //      }
+        //  ] 
+        //  ,
+        //  series: [
+        //     {
+        //          name: '计划条数',
+        //          type: 'bar',
+        //          barGap: 0,
+        //          data: data1
+        //    },
+        //     {
+        //          name: '记录条数',
+        //          type: 'bar',
+        //          barGap: 0,
+        //          data: data2
+        //    },
+        //  ]
+       };
+
+       option && s8sheBeiHeCha.setOption(option);
+      }
+    }
+  }
+</script>
+<style scoped>
+  #s8sheBeiHeCha:hover{
+    transition: all 0.5s;
+    transform:scale(1.03);
+  }
+  .statisticsPage{
+     box-shadow: 0 2px 12px 0 rgba(0, 0, 0, 0.1);
+     float: left;
+  }
+</style>

src/views/statistics/item/s9neiBuZhiLiang.vue

@@ -31,7 +31,7 @@
       },
       height:{
         type:String,
-        default: window.screen.height/4+"px"
+        default: window.screen.height/5+"px"
       },
       id:{
         type:String,
@@ -44,7 +44,7 @@
     },
     data () {
       return {
-        title:'质量控制计划',
+        title:'质量控制计划完成率',
         dialogOff:false,
         measured:[]
       }
@@ -73,56 +73,39 @@
 
         //v3
         // let e=[this.data.t_complaintNum.number[0],this.data.t_complaintNum.numberAll[0],this.data.t_complaintNum.res[0]]
+        let e = 100 -this.data.t_mjzlkzxbNum.valna
 
         option = {
-            grid: {
-              top: '20%',
-              left: '3%',
-              right: '4%',
-              bottom: '10%',
-              containLabel: true
-            },
-            title: {
-              text: this.title,
-              // subtext: "        "+beingDate+"-"+endDate
-            },
-            legend: {},
-            tooltip: {
-                trigger: 'axis',
-                axisPointer: {
-                  type: 'shadow'
-                },
-                formatter: function (datas) {
-                    console.log(datas,'sdsdds')
-                    var res=datas[0].data[0]+"<BR>"+'已完成：'+datas[0].data[1]+"<BR>"
-                    res+='总计划：'+datas[0].data[2]+"<BR>"
-                    res+='百分比:'+(datas[0].data[2]==null||datas[0].data[2]==0?"0.00":(datas[0].data[1]/datas[0].data[2]*100).toFixed(2))+"%"
-                    return res
-                }
-            },
-            dataset: {
-                source: this.data.t_mjzlkzxbNum.val
-            },
-            xAxis: { type: 'category' },
-            yAxis: {},
-            // Declare several bar series, each will be mapped
-            // to a column of dataset.source by default.
-            series: [{ 
-              type: 'bar',
-              itemStyle: {color: '#cccc33'},
-              label: {
-                show: true,
-                position: 'top'
-              },
-            },
-            { 
-              type: 'bar',
-              itemStyle: {color: '#66CCCC'},
+          title: {
+            text: this.title,
+            // subtext: 'Fake Data',
+            left: 'left',
+            textStyle:{ fontSize:14 }
+          },
+          tooltip: {
+            trigger: 'item'
+          },
+          color:['#0099ff','#ffcccc'],
+          series: [
+            {
+              type: 'pie',
+              radius: '50%',
               label: {
-                show: true,
-                position: 'top'
+                formatter: '{b}: {d}%'
               },
-            }]
+              data: [
+                { value: this.data.t_mjzlkzxbNum.valna, name: '质量控制计划完成率' },
+                { value: e, name: '质量控制计划未完成率' }
+              ],
+              emphasis: {
+                itemStyle: {
+                  shadowBlur: 10,
+                  shadowOffsetX: 0,
+                  shadowColor: 'rgba(0, 0, 0, 0.5)'
+                }
+              }
+            }
+          ]
         };
 
         option && s9neibu.setOption(option);

src/views/statistics/item/s9neiBuZhiLiangCol.vue

@@ -0,0 +1,147 @@
+<template>
+  <div @click="toDetailed()" class="statisticsPage" :style="{width:width}">
+    <div :id="id" :style="{height:height}"/>
+    <!-- 打开详情弹窗-->
+    <div v-if="dialogOff">
+      <dialogView
+        :dialogOff = "dialogOff"
+        @close = "close"
+        :title="title"
+        :data="data"
+      />
+    </div>
+  </div>
+</template>
+
+<script>
+  import echarts from 'echarts'
+  import dialogView from '../properties/s9neiBuZhiLiangPro.vue'
+  import {GetPercent,GetMax} from  '../js/config.js'
+  export default {
+    components:{
+      dialogView
+    },
+    props: {
+      data: {
+        type: Object,
+      },
+      width:{
+        type:String,
+        default:"20%"
+      },
+      height:{
+        type:String,
+        default: window.screen.height/5+"px"
+      },
+      id:{
+        type:String,
+        default:"s9neibu"
+      },
+      click:{
+        type:String,
+        default:'true'
+      },
+    },
+    data () {
+      return {
+        title:'质量控制计划数量',
+        dialogOff:false,
+        measured:[]
+      }
+    },
+    mounted(){
+      this.drawLine();
+    },
+    methods: {
+      close(){
+        this.dialogOff = false
+      },
+      /* 跳转统计页面*/
+      toDetailed(){
+        if(this.click == "true"){
+        this.dialogOff = true
+       }
+      },
+      drawLine(){
+
+        // let beginInof = Number(this.data.t_complaintBegin.number)
+        // let endInof = Number(this.data.t_complaintEnd.number)
+        let s9neibu = echarts.init(document.getElementById(this.id))
+        // let beingDate=this.data.t_complaintBegin.date
+        // let endDate=this.data.t_complaintEnd.date
+        var option;
+
+        //v3
+        // let e=[this.data.t_complaintNum.number[0],this.data.t_complaintNum.numberAll[0],this.data.t_complaintNum.res[0]]
+
+        option = {
+            grid: {
+              top: '20%',
+              left: '3%',
+              right: '4%',
+              bottom: '10%',
+              containLabel: true
+            },
+            title: {
+              text: this.title,
+              textStyle:{ fontSize:14 }
+
+              // subtext: "        "+beingDate+"-"+endDate
+            },
+            legend: {},
+            tooltip: {
+                trigger: 'axis',
+                axisPointer: {
+                  type: 'shadow'
+                },
+                formatter: function (datas) {
+                    console.log(datas,'sdsdds')
+                    var res=datas[0].data[0]+"<BR>"+'已完成：'+datas[0].data[1]+"<BR>"
+                    res+='总计划：'+datas[0].data[2]+"<BR>"
+                    res+='百分比:'+(datas[0].data[2]==null||datas[0].data[2]==0?"0.00":(datas[0].data[1]/datas[0].data[2]*100).toFixed(2))+"%"
+                    return res
+                }
+            },
+            dataset: {
+                source: this.data.t_mjzlkzxbNum.val
+            },
+            xAxis: { type: 'category' },
+            yAxis: {},
+            // Declare several bar series, each will be mapped
+            // to a column of dataset.source by default.
+            series: [{ 
+              type: 'bar',
+              itemStyle: {color: '#cccc33'},
+              barWidth: '20%',
+              label: {
+                show: true,
+                position: 'top'
+              },
+            },
+            { 
+              type: 'bar',
+              itemStyle: {color: '#66CCCC'},
+              barWidth: '20%',
+
+              label: {
+                show: true,
+                position: 'top'
+              },
+            }]
+        };
+
+        option && s9neibu.setOption(option);
+      }
+    }
+  }
+</script>
+<style scoped>
+  #s9neibu:hover{
+    transition: all 0.5s;
+    transform:scale(1.03);
+  }
+  .statisticsPage{
+     box-shadow: 0 2px 12px 0 rgba(0, 0, 0, 0.1);
+     float: left;
+  }
+</style>

src/views/statistics/js/selectDB.js

@@ -15,11 +15,11 @@ export const gethechaObj = (end)=>{
 }
 export const getnengliObj = (end)=>{
   // return "select a.t_mjsbjdxzjhzbName,a.t_mjsbjdxzjhzb,b.t_mjsbjdxzjhzbS FROM (select she_bei_ming_chen as t_mjsbjdxzjhzbName, COUNT(she_bei_ming_chen) as t_mjsbjdxzjhzb from t_mjsbjdxzjhzb where YEAR(create_time_)='2022' GROUP BY she_bei_ming_chen HAVING COUNT(she_bei_ming_chen)>=1) as a left join  (select she_bei_ming_chen, COUNT(she_bei_ming_chen) as t_mjsbjdxzjhzbS from t_mjsbjdxzjhzb where YEAR(create_time_)= '2022' AND DATE(yi_jian_xiao_ri_q) >= DATE(ji_hua_ri_qi_) GROUP BY she_bei_ming_chen HAVING COUNT(she_bei_ming_chen)>=1 )as b on a.t_mjsbjdxzjhzbName=b.she_bei_ming_chen"
-  return "select she_bei_bian_hao_ as enname, suo_yong_she_bei_ as zhname, COUNT(she_bei_bian_hao_) as num from t_nlsysxb where YEAR(yu_ji_shi_jian_)="+end+" GROUP BY she_bei_bian_hao_ HAVING COUNT(she_bei_bian_hao_)>=1"
+  return "select a.enname,a.zhname,ifnull(a.num,0) as num,  ifnull(b.num,0) as numS from(select she_bei_bian_hao_ as enname, suo_yong_she_bei_ as zhname, COUNT(she_bei_bian_hao_) as num from t_nlsysxb where YEAR(yu_ji_shi_jian_)="+end+" GROUP BY she_bei_bian_hao_ HAVING COUNT(she_bei_bian_hao_)>=1) as a LEFT JOIN (select she_bei_bian_hao_ as enname, suo_yong_she_bei_ as zhname, COUNT(she_bei_bian_hao_) as num from t_nlsysxb as c LEFT JOIN t_sysbdhnlyzjh as d on c.parent_id_ = d.id_ where YEAR(c.create_time_)="+end+" and d.shi_fou_guo_shen_='1' GROUP BY she_bei_bian_hao_ HAVING COUNT(she_bei_bian_hao_)>=1) as b on a.enname = b.enname"
 }
 export const getbiaozhunObj = (end)=>{
   // return "select a.t_mjsbjdxzjhzbName,a.t_mjsbjdxzjhzb,b.t_mjsbjdxzjhzbS FROM (select she_bei_ming_chen as t_mjsbjdxzjhzbName, COUNT(she_bei_ming_chen) as t_mjsbjdxzjhzb from t_mjsbjdxzjhzb where YEAR(create_time_)='2022' GROUP BY she_bei_ming_chen HAVING COUNT(she_bei_ming_chen)>=1) as a left join  (select she_bei_ming_chen, COUNT(she_bei_ming_chen) as t_mjsbjdxzjhzbS from t_mjsbjdxzjhzb where YEAR(create_time_)= '2022' AND DATE(yi_jian_xiao_ri_q) >= DATE(ji_hua_ri_qi_) GROUP BY she_bei_ming_chen HAVING COUNT(she_bei_ming_chen)>=1 )as b on a.t_mjsbjdxzjhzbName=b.she_bei_ming_chen"
-  return "select biao_wu_ming_chen as name, COUNT(biao_wu_ming_chen) as num from t_bzwzhcjhxxb where YEAR(create_time_)="+end+" GROUP BY biao_wu_ming_chen HAVING COUNT(biao_wu_ming_chen)>=1"
+  return "select a.name as name, a.num ,IFNULL(b.numS,0) as numS from(select biao_wu_ming_chen as name, COUNT(biao_wu_ming_chen) as num from t_bzwzhcjhxxb where YEAR(create_time_)="+end+" GROUP BY biao_wu_ming_chen HAVING COUNT(biao_wu_ming_chen)>=1) as a LEFT JOIN (select biao_wu_ming_chen as name, COUNT(biao_wu_ming_chen) as numS from t_bzwzhcjhxxb as c LEFT JOIN t_bzwzhcjhb as d on c.parent_id_ = d.id_ where YEAR(c.create_time_)="+end+" and d.shi_fou_guo_shen_='1' GROUP BY biao_wu_ming_chen HAVING COUNT(biao_wu_ming_chen)>=1) as b on a.name = b.name"
 }
 export const DBData = (begin,end,scope)=>{
   // return "select tt.*,cast(1-(t_gdyrqcwt4"+begin+"/t_gdyrqcwt"+begin+")  AS decimal(32,2)) as t_gdyrqcwt6"+begin+

src/views/statistics/properties/s10waiBuNengLiPro.vue

@@ -15,25 +15,34 @@
       <div>
 
     <el-container>
-      <el-aside style="border:0px;width: 13%;"></el-aside>
+      <!-- <el-aside style="border:0px;width: 13%;"></el-aside> -->
       <!-- 放统计内容-->
-      <el-aside style="border:0px;width: 50%;">
+      <el-aside style="border:0px;width: 70%;">
           <s10s10waiBuNengLiItem
             :data="data"
-            width="95%"
+            width="50%"
             :height="height"
             id="s10waiBuNengLiPro"
             click="false"
           />
+          <s10s10waiBuNengLiCItem
+            :data="data"
+            width="50%"
+            :height="height"
+            id="s10waiBuNengCLiPro"
+            click="false"
+          />
       </el-aside>
         <!-- 参数页面列 -->
-        <el-aside style="border:0px;width: 37%; height: 700px;overflow: auto;">
+        <el-aside style="border:0px;width: 30%; height: 700px;overflow: auto;">
               <br>
 
           <div>{{data.Num.date}} 年度</div>
           <div v-for="(item,i) in data.Num.name" :key="i">
               <el-divider content-position="left">{{data.Num.name[i]}}</el-divider>
-              外部质量计划 ：<el-tag>{{data.Num.number[i]}} 次</el-tag>
+              能力验证计划完成次数 ：<el-tag>{{data.Num.numberAll[i]}} 次</el-tag>
+              <br>
+              能力验证计划次数 ：<el-tag>{{data.Num.number[i]}} 次</el-tag>
               <br>
               <!-- 年度核查 ：<el-tag>{{data.Num.numberAll[i]}} 次</el-tag>
               <br> -->
@@ -73,12 +82,13 @@
         },
         height:{
           type:String,
-          default:window.screen.height * 0.75 +'px'
+          default:window.screen.height * 0.5 +'px'
         }
       },
       beforeCreate: function () {
           // 官方文档给出的是require
            this.$options.components.s10s10waiBuNengLiItem = () => import('../item/s10waiBuNengLi.vue')
+           this.$options.components.s10s10waiBuNengLiCItem = () => import('../item/s10waiBuNengLiCol.vue')
           },
 
     watch:{

src/views/statistics/properties/s11biaoZhunWuPro.vue

@@ -15,25 +15,41 @@
       <div>
 
     <el-container>
-      <el-aside style="border:0px;width: 13%;"></el-aside>
+      <!-- <el-aside style="border:0px;width: 13%;"></el-aside> -->
       <!-- 放统计内容-->
-      <el-aside style="border:0px;width: 50%;">
+      <el-aside style="border:0px;width: 70%;">
           <s11biaoZhunWuItem
             :data="data"
-            width="95%"
+            width="50%"
             :height="height"
             id="s11biaoZhunWuPro"
             click="false"
           />
+          <s11biaoZhunWuCItem
+            :data="data"
+            width="50%"
+            :height="height"
+            id="s11biaoZhunWuCPro"
+            click="false"
+          />
+          <s11biaoZhunWuC2Item
+            :data="data"
+            width="100%"
+            :height="height"
+            id="s11biaoZhunWuC2Pro"
+            click="false"
+          />
       </el-aside>
         <!-- 参数页面列 -->
-        <el-aside style="border:0px;width: 37%; height: 700px;overflow: auto;">
+        <el-aside style="border:0px;width: 30%; height: 700px;overflow: auto;">
               <br>
 
           <div>{{data.Num.date}} 年度</div>
           <div v-for="(item,i) in data.Num.name" :key="i">
               <el-divider content-position="left">{{data.Num.name[i]}}</el-divider>
-              核查次数：<el-tag>{{data.Num.number[i]}} 次</el-tag>
+              标准物质期间核查已完成次数：<el-tag>{{data.Num.numberAll[i]}} 次</el-tag>
+              <br>
+              标准物质期间核查次数：<el-tag>{{data.Num.number[i]}} 次</el-tag>
               <br>
             </div>
            <!-- <div class="dataCont" style="font-size: 14px;">
@@ -71,12 +87,14 @@
         },
         height:{
           type:String,
-          default:window.screen.height * 0.75 +'px'
+          default:window.screen.height * 0.4 +'px'
         }
       },
       beforeCreate: function () {
           // 官方文档给出的是require
            this.$options.components.s11biaoZhunWuItem = () => import('../item/s11biaoZhunWu.vue')
+           this.$options.components.s11biaoZhunWuCItem = () => import('../item/s11biaoZhunWuCol.vue')
+           this.$options.components.s11biaoZhunWuC2Item = () => import('../item/s11biaoZhunWuCol2.vue')
           },
 
     watch:{

src/views/statistics/properties/s12fengXianPro.vue

@@ -15,25 +15,32 @@
       <div>
 
     <el-container>
-      <el-aside style="border:0px;width: 13%;"></el-aside>
+      <!-- <el-aside style="border:0px;width: 13%;"></el-aside> -->
       <!-- 放统计内容-->
-      <el-aside style="border:0px;width: 50%;">
+      <el-aside style="border:0px;width: 70%;margin-top:2%;">
           <s12fengXianItem
             :data="data"
-            width="95%"
+            width="50%"
             :height="height"
             id="s5renYuanJianDuPro"
             click="false"
           />
+          <s12fengXianCItem
+            :data="data"
+            width="50%"
+            :height="height"
+            id="s5renYuanJianDuCPro"
+            click="false"
+          />
       </el-aside>
         <!-- 参数页面列 -->
-        <el-aside style="border:0px;width: 37%;">
+        <el-aside style="border:0px;width: 30%;">
           <el-divider content-position="left">{{data.t_mjsyshdfxsbykzjhxbNum.date}} 年度</el-divider>
-            已完成数量 ：<el-tag>{{data.t_mjsyshdfxsbykzjhxbNum.number[0]}} 次</el-tag>
+            实验室活动风险识别与控制计划已完成数量 ：<el-tag>{{data.t_mjsyshdfxsbykzjhxbNum.number[0]}} 次</el-tag>
             <br>
-            总数 ：<el-tag>{{data.t_mjsyshdfxsbykzjhxbNum.numberAll[0]}} 次</el-tag>
+            实验室活动风险识别与控制计划总数 ：<el-tag>{{data.t_mjsyshdfxsbykzjhxbNum.numberAll[0]}} 次</el-tag>
             <br>
-            计划完成率 ：<el-tag>{{data.t_mjsyshdfxsbykzjhxbNum.res[0]}} %</el-tag>
+            实验室活动风险识别与控制计划完成率 ：<el-tag>{{data.t_mjsyshdfxsbykzjhxbNum.res[0]}} %</el-tag>
             <br>
           <!-- <div v-for="(item,i) in data.t_zljdNum.date" :key="i">
             <el-divider content-position="left">{{data.t_zljdNum.date[i]}} 年度</el-divider>
@@ -79,12 +86,13 @@
         },
         height:{
           type:String,
-          default:window.screen.height * 0.75 +'px'
+          default:window.screen.height * 0.5 +'px'
         }
       },
       beforeCreate: function () {
           // 官方文档给出的是require
            this.$options.components.s12fengXianItem = () => import('../item/s12fengXian.vue')
+           this.$options.components.s12fengXianCItem = () => import('../item/s12fengXianCol.vue')
           },
 
     watch:{

src/views/statistics/properties/s1jianCePro.vue

@@ -15,20 +15,27 @@
       <div>
 
     <el-container>
-      <el-aside style="border:0px;width: 13%;"></el-aside>
+      <!-- <el-aside style="border:0px;width: 1%;"></el-aside> -->
       <!-- 放统计内容-->
-      <el-aside style="border:0px;width: 50%;">
+      <el-aside style="border:0px;width: 70%;margin-top: 2%;">
           <s1jianCeItem
             :data="data"
-            width="95%"
+            width="50%"
             :height="height"
             id="s1jianCePro"
             click="false"
           />
+          <s1jianCeItemC
+            :data="data"
+            width="50%"
+            :height="height"
+            id="s1jianCeCPro"
+            click="false"
+          />
       </el-aside>
       
         <!-- 参数页面列 -->
-        <el-aside style="border:0px;width: 37%;">
+        <el-aside style="border:0px;width: 30%;">
            <div class="dataCont" style="font-size: 14px;">
             <el-divider content-position="left">{{data.t_mjjcbgNum.date}} 年度</el-divider>
             统计期内检测报告的差错次数 ：<el-tag>{{data.t_mjjcbgNum.number[0]}} 次</el-tag>
@@ -97,12 +104,14 @@
         },
         height:{
           type:String,
-          default:window.screen.height * 0.75 +'px'
+          default:window.screen.height * 0.50 +'px'
         }
+        
       },
       beforeCreate: function () {
           // 官方文档给出的是require
            this.$options.components.s1jianCeItem = () => import('../item/s1jianCe.vue')
+           this.$options.components.s1jianCeItemC = () => import('../item/s1jianCeColumnar.vue')
           },
 
     watch:{

src/views/statistics/properties/s1zhiLiangMuBiaoPro.vue

@@ -15,25 +15,34 @@
       <div>
         <el-container>
           <!-- 放统计内容-->
-          <el-aside style="border:0px;width: 13%;"></el-aside>
-          <el-aside style="border:0px;width: 50%;">
+          <!-- <el-aside style="border:0px;width: 13%;"></el-aside> -->
+          <el-aside style="border:0px;width: 70%;margin-top: 2%;">
               <s5zhiLiangMuBiaoItem
                 :data="data"
-                width="95%"
+                width="50%"
                 :height="height"
                 id="s5zhiLiangMuBiaoPro"
                 click="false"
               />
+              <s5zhiLiangMuBiaoItemC
+                :data="data"
+                width="50%"
+                :height="height"
+                id="s5zhiLiangMuBiaoCPro"
+                click="false"
+              />
           </el-aside>
             <!-- 参数页面列 -->
-            <el-aside style="border:0px;width: 37%;">
-              <el-divider content-position="left">{{data.t_jchzbNum.date}} 年度</el-divider>
-              按时完成的检测项目数量 ：<el-tag>{{data.t_jchzbNum.number[0]}} 次</el-tag>
-              <br>
-              有效检测任务总数 ：<el-tag>{{data.t_jchzbNum.numberAll[0]}} 次</el-tag>
-              <br>
-              任务及时完成率 ：<el-tag>{{data.t_jchzbNum.res[0]}} %</el-tag>
-              <br>
+            <el-aside style="border:0px;width: 30%;">
+              <div class="dataCont" style="font-size: 14px;">
+                <el-divider content-position="left">{{data.t_jchzbNum.date}} 年度</el-divider>
+                按时完成的检测项目数量 ：<el-tag>{{data.t_jchzbNum.number[0]}} 次</el-tag>
+                <br>
+                有效检测任务总数 ：<el-tag>{{data.t_jchzbNum.numberAll[0]}} 次</el-tag>
+                <br>
+                任务及时完成率 ：<el-tag>{{data.t_jchzbNum.res[0]}} %</el-tag>
+                <br>
+              </div>
               <!-- <div class="dataCont" style="font-size: 14px;">
               <el-divider content-position="left">2021 年度</el-divider>
                 投诉处理率 ：<el-tag>90%</el-tag>
@@ -80,12 +89,13 @@
         },
         height:{
           type:String,
-          default:window.screen.height * 0.75 +'px'
+          default:window.screen.height * 0.5 +'px'
         }
       },
       beforeCreate: function () {
           // 官方文档给出的是require
            this.$options.components.s5zhiLiangMuBiaoItem = () => import('../item/s1zhiLiangMuBiao.vue')
+           this.$options.components.s5zhiLiangMuBiaoItemC = () => import('../item/s1zhiLiangMuBiaoCol.vue')
           },
 
     watch:{

src/views/statistics/properties/s2manYiDuPro.vue

@@ -15,20 +15,27 @@
       <div>
 
     <el-container>
-      <el-aside style="border:0px;width: 13%;"></el-aside>
+      <!-- <el-aside style="border:0px;width: 13%;"></el-aside> -->
       <!-- 放统计内容-->
-      <el-aside style="border:0px;width: 50%;">
+      <el-aside style="border:0px;width: 70%;margin-top: 2%;">
           <s2manYiDuItem
             :data="data"
-            width="95%"
+            width="50%"
             :height="height"
             id="s2manYiDuPro"
             click="false"
           />
+          <s2manYiDuProItem
+            :data="data"
+            width="50%"
+            :height="height"
+            id="s2manYiDucPro"
+            click="false"
+          />
 
       </el-aside>
         <!-- 参数页面列 -->
-        <el-aside style="border:0px;width: 37%;">
+        <el-aside style="border:0px;width: 30%;">
            <div  class="dataCont" style="font-size: 14px;">
               <el-divider content-position="left">{{data.t_khmydtjbNum.date}} 年度</el-divider>
               调查表满意份数 ：<el-tag>{{data.t_khmydtjbNum.number[0]}} 次</el-tag>
@@ -70,12 +77,13 @@
         },
         height:{
           type:String,
-          default:window.screen.height * 0.75 +'px'
+          default:window.screen.height * 0.5 +'px'
         }
       },
       beforeCreate: function () {
           // 官方文档给出的是require
-           this.$options.components.s2manYiDuItem = () => import('../item/s2manYiDuPro.vue')
+           this.$options.components.s2manYiDuItem = () => import('../item/s2manYiDu.vue')
+           this.$options.components.s2manYiDuProItem = () => import('../item/s2manYiDuPro.vue')
           },
 
     watch:{
@@ -88,98 +96,98 @@
       }
     },
 
-    drawLine(){
-      let s2manYiDu = echarts.init(document.getElementById("s2manYiDuPro"))
-
-      // let beginInof = GetPercent(Number(this.data.t_myddcBegin.number),Number(this.data.t_myddc2Begin.number))
-      // let endInof = GetPercent(Number(this.data.t_myddcEnd.number),Number(this.data.t_myddc2End.number))
-
-      let data1 = [];
-              data1.push(this.data.t_myddc1Begin.number);
-              data1.push(this.data.t_myddc1End.number);
-              data1.push(this.data.t_myddc2Begin.number);
-              data1.push(this.data.t_myddc2End.number);
-              data1.push(this.data.t_myddc3Begin.number);
-              data1.push(this.data.t_myddc3End.number);
-              data1.push(this.data.t_myddc4Begin.number);
-              data1.push(this.data.t_myddc4End.number);
-              data1.push(this.data.t_myddc5Begin.number);
-              data1.push(this.data.t_myddc5End.number);
-              data1.push(this.data.t_myddc6Begin.number);
-              data1.push(this.data.t_myddc6End.number);
-
-              let data3 = [];
-              data3.push(this.data.t_myddcBegin.date+"技术水平");
-              data3.push(this.data.t_myddcEnd.date+"技术水平");
-              data3.push(this.data.t_myddcBegin.date+"检测效率满意度");
-              data3.push(this.data.t_myddcEnd.date+"检测效率满意度");
-              data3.push(this.data.t_myddcBegin.date+"工作态度");
-              data3.push(this.data.t_myddcEnd.date+"工作态度");
-              data3.push(this.data.t_myddcBegin.date+"检测准确性");
-              data3.push(this.data.t_myddcEnd.date+"检测准确性");
-              data3.push(this.data.t_myddcBegin.date+"报告完成率");
-              data3.push(this.data.t_myddcEnd.date+"报告完成率");
-              data3.push(this.data.t_myddcBegin.date+"检测效率");
-              data3.push(this.data.t_myddcEnd.date+"检测效率");
-
-       var option = {
-          grid: {
-              top: '20%',
-              left: '3%',
-              right: '4%',
-              bottom: '10%',
-              containLabel: true
-          },
-      title: [
-        {
-         text: this.title,
-         subtext: this.data.t_myddcEnd.date+"年数据统计"
-        }
-      ],
-      polar: {
-        radius: [15, '90%']
-      },
-      angleAxis: {
-        max: GetMax(data1)+0.1,
-        startAngle: 75
-      },
-      radiusAxis: {
-        type: 'category',
-        data: data3
-      },
-      tooltip: {
-                    formatter: function (datas) {
-                        var res=datas.name+': '+((datas.value-0.01)*100).toFixed(2)+"%"
-                        return res
-                    }
-                },
-      series: {
-        itemStyle:{
-          normal:{
-            color:function(params){
-              var colorList = [
-                '#FE8463','#9BCA63','#FCCE10','#E87C25','#27727B',
-                 '#FE8463','#9BCA63','#FAD860','#F3A43B','#60C0DD',
-                 '#D7504B','#C6E579','#F4E001','#F0805A','#26C0C0'
-              ];
-              return colorList[params.dataIndex%4];
-            }
-          }
-        },
-        type: 'bar',
-        data: data1,
-        coordinateSystem: 'polar',
-        label: {
-          show: true,
-          position: 'middle',
-          formatter: function(a,b,c){
-            return '{b}: {c}'
-          }
-        }
-      }
-    };
-     option && s2manYiDu.setOption(option);
-    },
+    // drawLine(){
+    //   let s2manYiDu = echarts.init(document.getElementById("s2manYiDuPro"))
+
+    //   // let beginInof = GetPercent(Number(this.data.t_myddcBegin.number),Number(this.data.t_myddc2Begin.number))
+    //   // let endInof = GetPercent(Number(this.data.t_myddcEnd.number),Number(this.data.t_myddc2End.number))
+
+    //   let data1 = [];
+    //           data1.push(this.data.t_myddc1Begin.number);
+    //           data1.push(this.data.t_myddc1End.number);
+    //           data1.push(this.data.t_myddc2Begin.number);
+    //           data1.push(this.data.t_myddc2End.number);
+    //           data1.push(this.data.t_myddc3Begin.number);
+    //           data1.push(this.data.t_myddc3End.number);
+    //           data1.push(this.data.t_myddc4Begin.number);
+    //           data1.push(this.data.t_myddc4End.number);
+    //           data1.push(this.data.t_myddc5Begin.number);
+    //           data1.push(this.data.t_myddc5End.number);
+    //           data1.push(this.data.t_myddc6Begin.number);
+    //           data1.push(this.data.t_myddc6End.number);
+
+    //           let data3 = [];
+    //           data3.push(this.data.t_myddcBegin.date+"技术水平");
+    //           data3.push(this.data.t_myddcEnd.date+"技术水平");
+    //           data3.push(this.data.t_myddcBegin.date+"检测效率满意度");
+    //           data3.push(this.data.t_myddcEnd.date+"检测效率满意度");
+    //           data3.push(this.data.t_myddcBegin.date+"工作态度");
+    //           data3.push(this.data.t_myddcEnd.date+"工作态度");
+    //           data3.push(this.data.t_myddcBegin.date+"检测准确性");
+    //           data3.push(this.data.t_myddcEnd.date+"检测准确性");
+    //           data3.push(this.data.t_myddcBegin.date+"报告完成率");
+    //           data3.push(this.data.t_myddcEnd.date+"报告完成率");
+    //           data3.push(this.data.t_myddcBegin.date+"检测效率");
+    //           data3.push(this.data.t_myddcEnd.date+"检测效率");
+
+    //    var option = {
+    //       grid: {
+    //           top: '20%',
+    //           left: '3%',
+    //           right: '4%',
+    //           bottom: '10%',
+    //           containLabel: true
+    //       },
+    //   title: [
+    //     {
+    //      text: this.title,
+    //      subtext: this.data.t_myddcEnd.date+"年数据统计"
+    //     }
+    //   ],
+    //   polar: {
+    //     radius: [15, '90%']
+    //   },
+    //   angleAxis: {
+    //     max: GetMax(data1)+0.1,
+    //     startAngle: 75
+    //   },
+    //   radiusAxis: {
+    //     type: 'category',
+    //     data: data3
+    //   },
+    //   tooltip: {
+    //                 formatter: function (datas) {
+    //                     var res=datas.name+': '+((datas.value-0.01)*100).toFixed(2)+"%"
+    //                     return res
+    //                 }
+    //             },
+    //   series: {
+    //     itemStyle:{
+    //       normal:{
+    //         color:function(params){
+    //           var colorList = [
+    //             '#FE8463','#9BCA63','#FCCE10','#E87C25','#27727B',
+    //              '#FE8463','#9BCA63','#FAD860','#F3A43B','#60C0DD',
+    //              '#D7504B','#C6E579','#F4E001','#F0805A','#26C0C0'
+    //           ];
+    //           return colorList[params.dataIndex%4];
+    //         }
+    //       }
+    //     },
+    //     type: 'bar',
+    //     data: data1,
+    //     coordinateSystem: 'polar',
+    //     label: {
+    //       show: true,
+    //       position: 'middle',
+    //       formatter: function(a,b,c){
+    //         return '{b}: {c}'
+    //       }
+    //     }
+    //   }
+    // };
+    //  option && s2manYiDu.setOption(option);
+    // },
     data() {
       return {
         visible:false,

src/views/statistics/properties/s3tousuPro.vue

@@ -15,19 +15,26 @@
       <div>
 
     <el-container>
-      <el-aside style="border:0px;width: 13%;"></el-aside>
+      <!-- <el-aside style="border:0px;width: 13%;"></el-aside> -->
       <!-- 放统计内容-->
-      <el-aside style="border:0px;width: 50%;">
+      <el-aside style="border:0px;width: 70%;margin-top: 2%;">
           <s3tousuItem
             :data="data"
-            width="95%"
+            width="50%"
             :height="height"
             id="s3tousuPro"
             click="false"
           />
+          <s3tousuCItem
+            :data="data"
+            width="50%"
+            :height="height"
+            id="s3tousuCPro"
+            click="false"
+          />
       </el-aside>
         <!-- 参数页面列 -->
-        <el-aside style="border:0px;width: 37%;">
+        <el-aside style="border:0px;width: 30%;">
            <div class="dataCont" style="font-size: 14px;">
             <el-divider content-position="left">{{data.t_complaintNum.date}} 年度</el-divider>
               投诉总数次数 ：<el-tag>{{data.t_complaintNum.number[0]}} 次</el-tag>
@@ -68,12 +75,13 @@
         },
         height:{
           type:String,
-          default:window.screen.height * 0.75 +'px'
+          default:window.screen.height * 0.5 +'px'
         }
       },
       beforeCreate: function () {
           // 官方文档给出的是require
            this.$options.components.s3tousuItem = () => import('../item/s3tousu.vue')
+           this.$options.components.s3tousuCItem = () => import('../item/s3tousuCol.vue')
           },
 
     watch:{

src/views/statistics/properties/s4renYuanPeiXunPro.vue

@@ -15,26 +15,36 @@
       <div>
 
     <el-container>
-      <el-aside style="border:0px;width: 13%;"></el-aside>
+      <!-- <el-aside style="border:0px;width: 13%;"></el-aside> -->
       <!-- 放统计内容-->
-      <el-aside style="border:0px;width: 50%;">
+      <el-aside style="border:0px;width: 70%;margin-top: 2%;">
           <s4renYuanPeiXunItem
             :data="data"
-            width="95%"
+            width="50%"
             :height="height"
             id="s4renYuanPeiXunPro"
             click="false"
           />
+          <s4renYuanPeiXunCItem
+            :data="data"
+            width="50%"
+            :height="height"
+            id="s4renYuanPeiXunCPro"
+            click="false"
+          />
       </el-aside>
         <!-- 参数页面列 -->
-        <el-aside style="border:0px;width: 37%;">
-          <el-divider content-position="left">{{data.t_ryywpxjlNum.date}} 年度</el-divider>
-            已完成培训数量 ：<el-tag>{{data.t_ryywpxjlNum.number[0]}} 次</el-tag>
-            <br>
-            所有培训数量 ：<el-tag>{{data.t_ryywpxjlNum.numberAll[0]}} 次</el-tag>
-            <br>
-            培训完成率 ：<el-tag>{{data.t_ryywpxjlNum.res[0]}} %</el-tag>
-            <br>
+        <el-aside style="border:0px;width: 30%;">
+          <div class="dataCont" style="font-size: 14px;">
+
+            <el-divider content-position="left">{{data.t_ryywpxjlNum.date}} 年度</el-divider>
+              已完成培训数量 ：<el-tag>{{data.t_ryywpxjlNum.number[0]}} 次</el-tag>
+              <br>
+              所有培训数量 ：<el-tag>{{data.t_ryywpxjlNum.numberAll[0]}} 次</el-tag>
+              <br>
+              培训完成率 ：<el-tag>{{data.t_ryywpxjlNum.res[0]}} %</el-tag>
+              <br>
+          </div>
           <!-- <div v-for="(item,i) in data.t_ryywpxjlNum.date" :key="i">
             <el-divider content-position="left">{{data.t_ryywpxjlNum.date[i]}} 年度</el-divider>
             已完成培训数量 ：<el-tag>{{data.t_ryywpxjlNum.number[i]}} 次</el-tag>
@@ -79,12 +89,13 @@
         },
         height:{
           type:String,
-          default:window.screen.height * 0.75 +'px'
+          default:window.screen.height * 0.5 +'px'
         }
       },
       beforeCreate: function () {
           // 官方文档给出的是require
            this.$options.components.s4renYuanPeiXunItem = () => import('../item/s4renYuanPeiXun.vue')
+           this.$options.components.s4renYuanPeiXunCItem = () => import('../item/s4renYuanPeiXunCol.vue')
           },
 
     watch:{

src/views/statistics/properties/s5renYuanJianDuPro.vue

@@ -15,26 +15,36 @@
       <div>
 
     <el-container>
-      <el-aside style="border:0px;width: 13%;"></el-aside>
+      <!-- <el-aside style="border:0px;width: 13%;"></el-aside> -->
       <!-- 放统计内容-->
-      <el-aside style="border:0px;width: 50%;">
+      <el-aside style="border:0px;width: 70%;margin-top: 2%;">
           <s5renYuanJianDuItem
             :data="data"
-            width="95%"
+            width="50%"
             :height="height"
             id="s5renYuanJianDuPro"
             click="false"
           />
+          <s5renYuanJianDuCItem
+            :data="data"
+            width="50%"
+            :height="height"
+            id="s5renYuanJianDuCPro"
+            click="false"
+          />
       </el-aside>
         <!-- 参数页面列 -->
-        <el-aside style="border:0px;width: 37%;">
-          <el-divider content-position="left">{{data.t_zljdNum.date}} 年度</el-divider>
-            已完成监督数量 ：<el-tag>{{data.t_zljdNum.number[0]}} 次</el-tag>
-            <br>
-            所有监督数量 ：<el-tag>{{data.t_zljdNum.numberAll[0]}} 次</el-tag>
-            <br>
-            监督完成率 ：<el-tag>{{data.t_zljdNum.res[0]}} %</el-tag>
-            <br>
+        <el-aside style="border:0px;width: 30%;">
+          <div class="dataCont" style="font-size: 14px;">
+
+            <el-divider content-position="left">{{data.t_zljdNum.date}} 年度</el-divider>
+              已完成监督数量 ：<el-tag>{{data.t_zljdNum.number[0]}} 次</el-tag>
+              <br>
+              所有监督数量 ：<el-tag>{{data.t_zljdNum.numberAll[0]}} 次</el-tag>
+              <br>
+              监督完成率 ：<el-tag>{{data.t_zljdNum.res[0]}} %</el-tag>
+              <br>
+          </div>
           <!-- <div v-for="(item,i) in data.t_zljdNum.date" :key="i">
             <el-divider content-position="left">{{data.t_zljdNum.date[i]}} 年度</el-divider>
             已完成监督数量 ：<el-tag>{{data.t_zljdNum.number[i]}} 次</el-tag>
@@ -79,12 +89,13 @@
         },
         height:{
           type:String,
-          default:window.screen.height * 0.75 +'px'
+          default:window.screen.height * 0.5 +'px'
         }
       },
       beforeCreate: function () {
           // 官方文档给出的是require
            this.$options.components.s5renYuanJianDuItem = () => import('../item/s5renYuanJianDu.vue')
+           this.$options.components.s5renYuanJianDuCItem = () => import('../item/s5renYuanJianDuCol.vue')
           },
 
     watch:{

src/views/statistics/properties/s7sheBeiJiaoZhunPro.vue

@@ -15,19 +15,33 @@
       <div>
 
     <el-container>
-      <el-aside style="border:0px;width: 13%;"></el-aside>
+      <!-- <el-aside style="border:0px;width: 13%;"></el-aside> -->
       <!-- 放统计内容-->
-      <el-aside style="border:0px;width: 50%;">
+      <el-aside style="border:0px;width: 70%;margin-top:2%;">
           <s7sheBeiJiaoZhunItem
             :data="data"
-            width="95%"
+            width="50%"
             :height="height"
             id="s7sheBeiJiaoZhunPro"
             click="false"
           />
+          <s7sheBeiJiaoZhunCItem
+            :data="data"
+            width="50%"
+            :height="height"
+            id="s7sheBeiJiaoZhunCPro"
+            click="false"
+          />
+          <s7sheBeiJiaoZhunC2Item
+            :data="data"
+            width="100%"
+            :height="height"
+            id="s7sheBeiJiaoZhunC2Pro"
+            click="false"
+          />
       </el-aside>
         <!-- 参数页面列 -->
-        <el-aside style="border:0px;width: 37%; height: 700px;overflow: auto;">
+        <el-aside style="border:0px;width: 30%; height: 700px;overflow: auto;">
               <br>
 
           <div>{{data.t_mjsbjdxzjhzbNum.date}} 年度</div>
@@ -76,13 +90,16 @@
         },
         height:{
           type:String,
-          default:window.screen.height * 0.75 +'px'
+          default:window.screen.height * 0.4 +'px'
         }
       },
       beforeCreate: function () {
           // 官方文档给出的是require
            this.$options.components.s7sheBeiJiaoZhunItem = () => import('../item/s7sheBeiJiaoZhun.vue')
-          },
+           this.$options.components.s7sheBeiJiaoZhunCItem = () => import('../item/s7sheBeiJiaoZhunCol.vue')
+           this.$options.components.s7sheBeiJiaoZhunC2Item = () => import('../item/s7sheBeiJiaoZhunCol2.vue')
+
+      },
 
     watch:{
      dialogOff: {

src/views/statistics/properties/s8sheBeiHeChaPro.vue

@@ -15,19 +15,33 @@
       <div>
 
     <el-container>
-      <el-aside style="border:0px;width: 13%;"></el-aside>
+      <!-- <el-aside style="border:0px;width: 13%;"></el-aside> -->
       <!-- 放统计内容-->
-      <el-aside style="border:0px;width: 50%;">
+      <el-aside style="border:0px;width: 70%;margin-top:2%;">
           <s8sheBeiHeChaItem
             :data="data"
-            width="95%"
+            width="50%"
             :height="height"
             id="s8sheBeiHeChaPro"
             click="false"
           />
+          <s8sheBeiHeChaCItem
+            :data="data"
+            width="50%"
+            :height="height"
+            id="s8sheBeiHeChaCPro"
+            click="false"
+          />
+          <s8sheBeiHeChaC2Item
+            :data="data"
+            width="100%"
+            :height="height"
+            id="s8sheBeiHeChaC2Pro"
+            click="false"
+          />
       </el-aside>
         <!-- 参数页面列 -->
-        <el-aside style="border:0px;width: 37%; height: 700px;overflow: auto;">
+        <el-aside style="border:0px;width: 30%; height: 700px;overflow: auto;">
               <br>
 
           <div>{{data.t_sbhcjlbNum.date}} 年度</div>
@@ -74,12 +88,14 @@
         },
         height:{
           type:String,
-          default:window.screen.height * 0.75 +'px'
+          default:window.screen.height * 0.4 +'px'
         }
       },
       beforeCreate: function () {
           // 官方文档给出的是require
            this.$options.components.s8sheBeiHeChaItem = () => import('../item/s8sheBeiHeCha.vue')
+           this.$options.components.s8sheBeiHeChaCItem = () => import('../item/s8sheBeiHeChaCol.vue')
+           this.$options.components.s8sheBeiHeChaC2Item = () => import('../item/s8sheBeiHeChaCol2.vue')
           },
 
     watch:{

src/views/statistics/properties/s9neiBuZhiLiangPro.vue

@@ -15,33 +15,40 @@
       <div>
 
     <el-container>
-      <el-aside style="border:0px;width: 13%;"></el-aside>
+      <!-- <el-aside style="border:0px;width: 13%;"></el-aside> -->
       <!-- 放统计内容-->
-      <el-aside style="border:0px;width: 50%;">
+      <el-aside style="border:0px;width: 70%;margin-top:2%;">
           <s9neiBuZhiLiangItem
             :data="data"
-            width="95%"
+            width="50%"
             :height="height"
             id="s9neibuPro"
             click="false"
           />
+          <s9neiBuZhiLiangCItem
+            :data="data"
+            width="50%"
+            :height="height"
+            id="s9neibuCPro"
+            click="false"
+          />
       </el-aside>
         <!-- 参数页面列 -->
-        <el-aside style="border:0px;width: 37%;">
+        <el-aside style="border:0px;width: 30%;">
            <div class="dataCont" style="font-size: 14px;">
             <el-divider content-position="left">{{data.t_mjzlkzxbNum.date}} 年度</el-divider>
-              年度质量控制计划完成数量 ：<el-tag>{{data.t_mjzlkzxbNum.number[1]}} 次</el-tag>
+              计划内质量控制计划完成数量 ：<el-tag>{{data.t_mjzlkzxbNum.number[1]}} 次</el-tag>
               <br>
-              年度质量控制计划总数 ：<el-tag>{{data.t_mjzlkzxbNum.number[2]}} 次</el-tag>
+              计划内质量控制计划总数 ：<el-tag>{{data.t_mjzlkzxbNum.number[2]}} 次</el-tag>
               <br>
-              年度质量控制计划完成率 ：<el-tag>{{data.t_mjzlkzxbNum.number[2]==null||data.t_mjzlkzxbNum.number[2]==0?"0.00":(data.t_mjzlkzxbNum.number[1]/data.t_mjzlkzxbNum.number[2]*100).toFixed(2)}} %</el-tag>
+              计划内质量控制计划完成率 ：<el-tag>{{data.t_mjzlkzxbNum.number[2]==null||data.t_mjzlkzxbNum.number[2]==0?"0.00":(data.t_mjzlkzxbNum.number[1]/data.t_mjzlkzxbNum.number[2]*100).toFixed(2)}} %</el-tag>
               <br>
               <br>
-              部门质量控制计划完成数量 ：<el-tag>{{data.t_mjzlkzxbNum.numberAll[1]}} 次</el-tag>
+              计划外质量控制计划完成数量 ：<el-tag>{{data.t_mjzlkzxbNum.numberAll[1]}} 次</el-tag>
               <br>
-              部门质量控制计划总数 ：<el-tag>{{data.t_mjzlkzxbNum.numberAll[2]}} 次</el-tag>
+              计划外质量控制计划总数 ：<el-tag>{{data.t_mjzlkzxbNum.numberAll[2]}} 次</el-tag>
               <br>
-              部门质量控制计划完成率 ：<el-tag>{{data.t_mjzlkzxbNum.numberAll[2]==null||data.t_mjzlkzxbNum.numberAll[2]==0?"0.00":(data.t_mjzlkzxbNum.numberAll[1]/data.t_mjzlkzxbNum.numberAll[2]*100).toFixed(2)}} %</el-tag>
+              计划外质量控制计划完成率 ：<el-tag>{{data.t_mjzlkzxbNum.numberAll[2]==null||data.t_mjzlkzxbNum.numberAll[2]==0?"0.00":(data.t_mjzlkzxbNum.numberAll[1]/data.t_mjzlkzxbNum.numberAll[2]*100).toFixed(2)}} %</el-tag>
               <br>
             <br>
               <!-- <div v-for="(item,i) in data.t_complaintNum.number" :key="i">
@@ -76,12 +83,13 @@
         },
         height:{
           type:String,
-          default:window.screen.height * 0.75 +'px'
+          default:window.screen.height * 0.5 +'px'
         }
       },
       beforeCreate: function () {
           // 官方文档给出的是require
            this.$options.components.s9neiBuZhiLiangItem = () => import('../item/s9neiBuZhiLiang.vue')
+           this.$options.components.s9neiBuZhiLiangCItem = () => import('../item/s9neiBuZhiLiangCol.vue')
           },
 
     watch:{

src/views/statistics/sendDatas.js

@@ -32,6 +32,9 @@ export default {
                         let valAll = []
                         let e = []
                         let that = this
+                        let a=0
+                        let b=0
+                        let c=0
                         for (let i = 0; i < that.jiaoyanObj.length; i++) {
                                 let num=0
                                 let nameMid =''
@@ -55,10 +58,22 @@ export default {
                                 e.push(num)
 
                                 // name.push(that.jiaoyanObj[i].t_mjsbjdxzjhzbName)
+                                
 
+                        }
+                        val.forEach( function(item){
+                                a += item ;
+                        });
+                        valAll.forEach( function(item){
+                                b += item ;
+                        });
+                        if(b===0){
+                                c=0
+                        }else{
+                                c= Math.floor(a/b * 10000) / 100
                         }
                         return {
-                                "t_mjsbjdxzjhzbNum" :{"date": this.endDate,"number": val, "numberAll": valAll, "val": e, "name": name},
+                                "t_mjsbjdxzjhzbNum" :{"date": this.endDate,"number": val, "numberAll": valAll, "val": e, "name": name, "valnum":a,"valAll":b,"valna":c},
                                 "config":this.getMyConfig("检测") //返回需要的对应参数
                         }
                 },
@@ -68,6 +83,9 @@ export default {
                         let valAll = []
                         let e = []
                         let that = this
+                        let a=0
+                        let b=0
+                        let c=0
                         for (let i = 0; i < that.hechaObj.length; i++) {
                                 let nameMid = ''
                                 // let num=0
@@ -88,9 +106,19 @@ export default {
                                 
 
                         }
-                        console.log(val,valAll,name,that.hechaObj,'ssdddsdwew1231')
+                        val.forEach( function(item){
+                                a += item ;
+                        });
+                        valAll.forEach( function(item){
+                                b += item ;
+                        });
+                        if(b===0){
+                                c=0
+                        }else{
+                                c= Math.floor(a/b * 10000) / 100
+                        }
                         return {
-                                "t_sbhcjlbNum" :{"date": this.endDate,"number": val, "numberAll": valAll, "name": name},
+                                "t_sbhcjlbNum" :{"date": this.endDate,"number": val, "numberAll": valAll, "name": name,"valnum":a,"valAll":b,"valna":c},
                                 "config":this.getMyConfig("检测") //返回需要的对应参数
                         }
                 },
@@ -100,6 +128,10 @@ export default {
                         let valAll = []
                         let e = []
                         let that = this
+                        
+                        let a=0
+                        let b=0
+                        let c=0
                         for (let i = 0; i < that.nengliObj.length; i++) {
                                 // let num=0
                                 // if (that.hechaObj[i].t_sbhcjlb===0) {
@@ -109,6 +141,7 @@ export default {
                                 // }
                                 // valAll.push(that.hechaObj[i].t_sbhcjlb)
                                 val.push(that.nengliObj[i].num)
+                                valAll.push(that.nengliObj[i].numS)
                                 // e.push(num)
                                 let nameMid = that.nengliObj[i].enname.split("—")
                                 if(nameMid.length===2){
@@ -118,8 +151,19 @@ export default {
                                 }
 
                         }
+                        val.forEach( function(item){
+                                a += item ;
+                        });
+                        valAll.forEach( function(item){
+                                b += item ;
+                        });
+                        if(b===0){
+                                c=0
+                        }else{
+                                c= Math.floor(b/a * 10000) / 100
+                        }
                         return {
-                                "Num" :{"date": this.endDate,"number": val, "name": name},
+                                "Num" :{"date": this.endDate,"number": val, "name": name,"numberAll":valAll,"valnum":a,"valAll":b,"valna":c},
                                 "config":this.getMyConfig("检测") //返回需要的对应参数
                         }
                 },
@@ -128,6 +172,9 @@ export default {
                         let val =[]
                         let valAll = []
                         let e = []
+                        let a=0
+                        let b=0
+                        let c=0
                         let that = this
                         for (let i = 0; i < that.biaozhunObj.length; i++) {
                                 // let num=0
@@ -138,12 +185,24 @@ export default {
                                 // }
                                 // valAll.push(that.hechaObj[i].t_sbhcjlb)
                                 val.push(that.biaozhunObj[i].num)
+                                valAll.push(that.biaozhunObj[i].numS)
                                 // e.push(num)
                                 name.push(that.biaozhunObj[i].name)
 
                         }
+                        val.forEach( function(item){
+                                a += item ;
+                        });
+                        valAll.forEach( function(item){
+                                b += item ;
+                        });
+                        if(b===0){
+                                c=0
+                        }else{
+                                c= Math.floor(b/a * 10000) / 100
+                        }
                         return {
-                                "Num" :{"date": this.endDate,"number": val, "name": name},
+                                "Num" :{"date": this.endDate,"number": val, "name": name, "numberAll": valAll,"valnum":a,"valAll":b,"valna":c},
                                 "config":this.getMyConfig("检测") //返回需要的对应参数
                         }
                 },
@@ -358,6 +417,9 @@ export default {
                         let numData = []
                         let numAData = []
                         let barData = []
+                        let a=0
+                        let b=0
+                        let c=0
                         // for (let i = 0; i < this.dataScope.length; i++) {
                         // let e=0
                         // if (mjzlkzxbSNum[0]===0) {
@@ -373,9 +435,16 @@ export default {
                         numAData.push(mjzlkzjlbNum[0])
                         barData.push(numData)
                         barData.push(numAData)
+                        a=mjzlkzxbSNum[0]+mjzlkzjlbSNum[0]
+                        b=mjzlkzxbNum[0]+mjzlkzjlbNum[0]
+                        if(b===0){
+                                c=0
+                        }else{
+                                c= Math.floor(a/b * 10000) / 100
+                        }
                         // }
                         return {
-                                "t_mjzlkzxbNum" :{"date": this.endDate,"number": numData, "numberAll": numAData,'val':barData},
+                                "t_mjzlkzxbNum" :{"date": this.endDate,"number": numData, "numberAll": numAData,'val':barData,"valnum":a,"valAll":b,"valna":c},
                                 "config":this.getMyConfig("内部质量") //返回需要的对应参数
                         }
                 },