fix：人员管理看板

src/components/ibps-tree-select/index.vue

@@ -1,103 +1,87 @@
 <template>
-  <div
-    v-if="editable"
-    v-clickoutside="handleClose"
-    class="el-tree-select"
-    @click="toggleTree"
-  >
-    <div
-      v-if="multiple"
-      ref="tags"
-      :style="{ 'max-width': inputWidth - 32 + 'px' }"
-      class="el-tree-select__tags"
-    >
+  <div v-if="editable"
+       v-clickoutside="handleClose"
+       class="el-tree-select"
+       @click="toggleTree">
+    <div v-if="multiple"
+         ref="tags"
+         :style="{ 'max-width': inputWidth - 32 + 'px' }"
+         class="el-tree-select__tags">
       <transition-group @after-leave="resetInputHeight">
         <template v-for="(item,i) in selected">
-          <el-tag
-            :key="item.value+i"
-            :closable="!selectDisabled"
-            :size="collapseTagSize"
-            type="info"
-            disable-transitions
-            @close.stop="deleteTag(item)"
-          >
+          <el-tag :key="item.value+i"
+                  :closable="!selectDisabled"
+                  :size="collapseTagSize"
+                  type="info"
+                  disable-transitions
+                  @close.stop="deleteTag(item)">
             <span class="el-tree-select__tags-text">{{ displayMode==="name"? item.label:item.path }}</span>
           </el-tag>
         </template>
       </transition-group>
-      <input
-        v-if="filterable"
-        ref="input"
-        v-model="query"
-        :disabled="selectDisabled"
-        :placeholder="currentPlaceholder"
-        :autocomplete="false"
-        :style="{ width: inputLength + 'px'}"
-        type="text"
-        class="el-tree-select__input"
-        @focus="handleFocus"
-        @keydown.esc.stop.prevent="visible = false"
-        @keydown.delete="deletePrevTag"
-        @input="e => handleQueryChange(e.target.value)"
-      >
+      <input v-if="filterable"
+             ref="input"
+             v-model="query"
+             :disabled="selectDisabled"
+             :placeholder="currentPlaceholder"
+             :autocomplete="false"
+             :style="{ width: inputLength + 'px'}"
+             type="text"
+             class="el-tree-select__input"
+             @focus="handleFocus"
+             @keydown.esc.stop.prevent="visible = false"
+             @keydown.delete="deletePrevTag"
+             @input="e => handleQueryChange(e.target.value)">
     </div>
-    <el-input
-      ref="reference"
-      v-model="selectedLabel"
-      :disabled="selectDisabled"
-      :readonly="selectReadonly"
-      :validate-event="false"
-      :size="selectSize"
-      :class="{ 'is-focus': visible }"
-      :placeholder="currentPlaceholder"
-      type="text"
-      @focus="handleFocus"
-      @keyup.native="onInputChange"
-      @mouseenter.native="inputHovering = true"
-      @mouseleave.native="inputHovering = false"
-    >
-      <template v-if="$slots.prefix" slot="prefix">
+    <el-input ref="reference"
+              v-model="selectedLabel"
+              :disabled="selectDisabled"
+              :readonly="selectReadonly"
+              :validate-event="false"
+              :size="selectSize"
+              :class="{ 'is-focus': visible }"
+              :placeholder="currentPlaceholder"
+              type="text"
+              @focus="handleFocus"
+              @keyup.native="onInputChange"
+              @mouseenter.native="inputHovering = true"
+              @mouseleave.native="inputHovering = false">
+      <template v-if="$slots.prefix"
+                slot="prefix">
         <slot name="prefix" />
       </template>
-      <i
-        slot="suffix"
-        :class="suffixIconClass"
-        @click="handleIconClick"
-      />
+      <i slot="suffix"
+         :class="suffixIconClass"
+         @click="handleIconClick" />
     </el-input>
     <transition name="el-zoom-in-top">
-      <div
-        v-show="visible"
-        ref="popper"
-        :style="{minWidth: inputWidth + 'px'}"
-        class="el-tree-select-dropdown el-popper"
-      >
-        <el-scrollbar
-          wrap-class="el-tree-select-dropdown__wrap"
-        >
-          <el-tree
-            ref="tree"
-            :data="data"
-            :lazy="lazy"
-            :load="load"
-            :check-on-click-node="checkOnClickNode"
-            :props="treeProps"
-            :show-checkbox="showCheckbox"
-            :expand-on-click-node="false"
-            :check-strictly="checkStrictly"
-            :filter-node-method="filterNodeMethod"
-            :default-checked-keys="checkedKeys"
-            :node-key="nodeKey"
-            :empty-text="emptyText"
-            :current-node-key="currentNodeKey"
-            default-expand-all
-            highlight-current
-            @check="handleCheck"
-            @node-click="handleNodeClick"
-          >
+      <div v-show="visible"
+           ref="popper"
+           :style="{minWidth: inputWidth + 'px'}"
+           class="el-tree-select-dropdown el-popper">
+        <el-scrollbar wrap-class="el-tree-select-dropdown__wrap">
+          <el-tree ref="tree"
+                   :data="data"
+                   :lazy="lazy"
+                   :load="load"
+                   :check-on-click-node="checkOnClickNode"
+                   :props="treeProps"
+                   :show-checkbox="showCheckbox"
+                   :expand-on-click-node="false"
+                   :check-strictly="checkStrictly"
+                   :filter-node-method="filterNodeMethod"
+                   :default-checked-keys="checkedKeys"
+                   :node-key="nodeKey"
+                   :empty-text="emptyText"
+                   :current-node-key="currentNodeKey"
+                   default-expand-all
+                   highlight-current
+                   @check="handleCheck"
+                   @node-click="handleNodeClick">
             <template v-slot="scope">
               <span class="el-tree-node__label">
-                <i v-if="icon" :class="icon(scope.data)" /> {{ scope.node.label }}
+                <i v-if="icon"
+                   :class="icon(scope.data)" /> {{ scope.node.label }}
               </span>
             </template>
           </el-tree>
@@ -107,20 +91,17 @@
   </div>
 
   <!--只读 文本样式-->
-  <div v-else class="el-tree-select">
+  <div v-else
+       class="el-tree-select">
     <template v-if="$utils.isNotEmpty(selected)">
-      <div
-        v-if="multiple"
-        class="el-tree-select__tags_readonly"
-      >
+      <div v-if="multiple"
+           class="el-tree-select__tags_readonly">
         <template v-for="(item,i) in selected">
-          <el-tag
-            v-if="$utils.isNotEmpty(item.value)"
-            :key="item.value+i"
-            type="info"
-            disable-transitions
-            class="el-tree-select__tags-text ibps-mr-5 "
-          >
+          <el-tag v-if="$utils.isNotEmpty(item.value)"
+                  :key="item.value+i"
+                  type="info"
+                  disable-transitions
+                  class="el-tree-select__tags-text ibps-mr-5 ">
             <template v-if="displayMode === 'name'">
               {{ item.label }}
             </template>
@@ -130,11 +111,9 @@
           </el-tag>
         </template>
       </div>
-      <el-tag
-        v-else
-        type="info"
-        disable-transitions
-      >
+      <el-tag v-else
+              type="info"
+              disable-transitions>
         {{ selectedLabel }}
       </el-tag>
     </template>
@@ -247,14 +226,14 @@ export default {
     selectMode: { // 选值模式 leaf、any
       type: String,
       default: 'any',
-      validator: function(value) {
+      validator: function (value) {
         return ['any', 'leaf'].indexOf(value) !== -1
       }
     },
     displayMode: { // 显示模式 path 、name
       type: String,
       default: 'name',
-      validator: function(value) {
+      validator: function (value) {
         return ['name', 'path'].indexOf(value) !== -1
       }
     },
@@ -304,12 +283,12 @@ export default {
     suffixIconClass() {
       let classes = ['el-tree-select__caret', 'el-input__icon']
       const criteria = this.clearable &&
-          !this.selectDisabled &&
-          this.inputHovering &&
-          !this.multiple &&
-          this.value !== undefined &&
-          this.value !== null &&
-          this.value !== ''
+        !this.selectDisabled &&
+        this.inputHovering &&
+        !this.multiple &&
+        this.value !== undefined &&
+        this.value !== null &&
+        this.value !== ''
       if (criteria) {
         classes = [...classes, 'el-icon-circle-close', 'is-show-close']
       } else {
@@ -544,6 +523,7 @@ export default {
     },
     getNodeData(value) {
       let node = null
+      console.log('value',value)
       if (Array.isArray(this.data)) {
         const traverse = (arr, lablePrefix = []) => {
           for (let i = 0; i < arr.length; i++) {
@@ -671,5 +651,5 @@ export default {
 }
 </script>
 <style lang="scss">
-@import '~@/assets/styles/components/tree-select.scss'
+@import "~@/assets/styles/components/tree-select.scss";
 </style>

src/views/component/selectPositions.vue

@@ -0,0 +1,96 @@
+<template>
+  <el-cascader ref="cascader"
+               v-model="selectDatas"
+               :options="options"
+               :props="props"
+               :collapse-tags="true"
+               :filterable="true">
+  </el-cascader>
+</template>
+  
+  <script>
+import curdPost from "@/business/platform/form/utils/custom/joinCURD.js";
+import TreeUtils from '@/utils/tree'
+
+export default {
+  data() {
+    const { level, userId, userInfo } = this.$store.getters
+    return {
+      level, userId, userInfo,
+      props: {
+        children: 'children',
+        label: 'NAME_',
+        value: 'ID_',
+        multiple: true,
+        expandTrigger: 'hover',
+      },
+      options: [],
+      selectDatas: []
+    };
+  },
+  mounted() {
+    this.getPositionList()
+  },
+  methods: {
+    // 获取本账户所在的部门
+    getPositionList() {
+      let positonsSql = ''
+      // 金通账号id
+      if (this.userId == '702117247933480960') {
+        positonsSql = `select * from ibps_party_entity where party_type_ = 'position' `
+      } else {
+        // 所属医院的系统管理员
+        let isAdmin = this.userInfo.role.some(so => {
+          return so.name == '系统管理角色'
+        })
+        if (isAdmin) {
+          positonsSql = `select * from ibps_party_entity where party_type_ = 'position' and PATH_ like '%${this.level.first}%'  and DEPTH_ > 2`
+        } else {
+          let allPositions = []
+          for (var i of this.userInfo.positions) {
+            for (var item of i.path.split('.')) {
+              if (item !== '') {
+                allPositions.push(`id_ like '%${item}%'`)
+              }
+            }
+          }
+          allPositions = [...new Set(allPositions)];
+          // 如果是单纯的是普通账户登录，就只显示所属部门的信息
+          positonsSql = `select * from ibps_party_entity where ${allPositions.join(' or ')}`
+        }
+      }
+      curdPost('sql', positonsSql).then((res) => {
+        if (res.state === 200) {
+          const datas = res.variables.data
+          if (datas.length > 0) {
+            this.options = this.toTree(datas)
+            for (var i of this.options) {
+              if (i.children !== undefined) {
+                const getTail = item => item.children && item.children.length > 0 ? item.children.map(m => getTail(m)) : [item]
+                let result = _.flattenDeep(i.children.map(m => getTail(m)))
+                for (var item of result) {
+                  let itemArr = item.PATH_.split('.')
+                  itemArr.splice(itemArr.length - 1, 1)
+                  this.selectDatas.push(itemArr)
+                }
+              }
+            }
+          }
+        }
+      })
+    },
+    toTree(data) {
+      return TreeUtils.transformToTreeFormat(data, {
+        idKey: 'ID_',
+        pIdKey: 'PARENT_ID_',
+        childrenKey: 'children'
+      })
+    },
+  },
+  watch: {
+    selectDatas(v) {
+      this.$emit("change-data", v);
+    }
+  }
+};
+</script>

src/views/peopleManages/taskStatistics/index.vue

@@ -1,6 +1,7 @@
 <template>
   <div class="personView">
-    <div class="topView" style="width: 100%;height: 11%;">
+    <div class="topView"
+         style="width: 100%;height: 11%;">
       <!-- <div class="jbd-title"> 人员管理看板 </div> -->
       <div class="jbd-title">
         <dv-decoration-8 style="width:20%;height:50px;position: absolute;left: 0px;top: 0px;" />
@@ -8,68 +9,103 @@
           <div style="height:40%;font-size: 22px;margin-top: 10px;">人员管理看板</div>
           <dv-decoration-5 style="width:30%;height: 50%;margin: 0 auto;" />
         </div>
-        <dv-decoration-8 :reverse="true" style="width:20%;height:50px;position:absolute;right: 0px;top: 0px;" />
+        <dv-decoration-8 :reverse="true"
+                         style="width:20%;height:50px;position:absolute;right: 0px;top: 0px;" />
       </div>
-      <!-- <dv-decoration-7 class="jbd-title">人员管理看板</dv-decoration-7> -->
-
       <div class="contain">
-        <!-- <div class="personNum">员工数量:{{ employeeNum }}</div> -->
-        <dv-decoration-11  class="personNum" style="margin-left:10%"><i class="el-icon-user" style="color:#4ea5d6;margin-right: 3px;"></i> 员工数量:{{ employeeNum   }}人</dv-decoration-11>
-        <dv-border-box-8 class="date" style="margin-right:10%; display: flex; align-items: center;">
-          <div style="width:25%;display: inline-block;margin-right: 3px;">统计时间:</div>
-          <el-date-picker style="width:75%;" v-model="monthValues" type="monthrange" align="right" unlink-panels range-separator="至" start-placeholder="开始月份" end-placeholder="结束月份" :picker-options="pickerOptions" @change="changeDate">
+        <dv-decoration-11 class="personNum"
+                          style="margin-left:10%"><i class="el-icon-user"
+             style="color:#4ea5d6;margin-right: 3px;"></i> 员工数量：{{ employeeNum   }}人</dv-decoration-11>
+        <dv-border-box-8 class="date"
+                         style="margin-right:10%; display: flex; align-items: center;">
+          <!-- 部门选择 -->
+          <!-- <el-cascader v-model="value"
+                       :options="options"
+                       :props="props"
+                       :collapse-tags="true"
+                       :filterable="true"
+                       @change="handleChange"></el-cascader> -->
+          <SelectPositions @change-data="changeData" />
+          <div style="width:30%;display: inline-block;margin-right: 3px;">统计时间：</div>
+          <el-date-picker style="width:75%;"
+                          v-model="monthValues"
+                          type="monthrange"
+                          align="right"
+                          unlink-panels
+                          range-separator="至"
+                          start-placeholder="开始月份"
+                          end-placeholder="结束月份"
+                          :picker-options="pickerOptions"
+                          @change="changeDate">
           </el-date-picker>
         </dv-border-box-8>
-        <!-- <dv-border-box-9 >员工数量:8</dv-border-box-9> -->
-        <!-- <div class="date">
-          统计时间:
-          <el-date-picker v-model="monthValues" type="monthrange" align="right" unlink-panels range-separator="至" start-placeholder="开始月份" end-placeholder="结束月份" :picker-options="pickerOptions" @change="changeDate">
-          </el-date-picker>
-        </div> -->
       </div>
     </div>
     <dv-border-box-1 style="width:100%;height:89%; box-sizing: border-box; overflow: hidden;">
       <div style="height:3%"></div>
-      <!-- <dv-decoration-10 style="height:2%;width:100%;" /> -->
       <div class="middleView">
         <div class="viewLeft">
-          <pieView v-if="degreePieData.data[0].value" :info="degreePieData" />
+          <pieView v-if="degreePieData.data[0].value"
+                   :info="degreePieData" />
         </div>
-        <dv-decoration-2 :reverse="true" style="width:2%;height: 100%;" />
+        <dv-decoration-2 :reverse="true"
+                         style="width:2%;height: 100%;" />
         <div class="viewCenter">
-          <RingChart v-if="ranksPieData.data[2].value" :info="ranksPieData" />
+          <RingChart v-if="ranksPieData.data[2].value"
+                     :info="ranksPieData" />
         </div>
-        <dv-decoration-2 :reverse="true" style="width:2%;height: 100%;" />
+        <dv-decoration-2 :reverse="true"
+                         style="width:2%;height: 100%;" />
         <div class="viewRight">
-          <CarouselTabl v-if="personInfoData.data.length" :info="personInfoData" title="员工基本信息列表" />
+          <CarouselTabl v-if="personInfoData.data.length"
+                        :info="personInfoData"
+                        title="员工基本信息列表" />
         </div>
       </div>
       <dv-decoration-10 style="height:2%;width:96%; margin: 0 auto;" />
       <div class="bottomView">
-        <div class="detectionTask">
-          <!-- <div id="echart-line" :style="{ width: '100%', height: '100%', paddingRight: '10px' }"></div> -->
-          <BarChart v-if="this.option.yAxis.data[0]" :info="option" :config="{title:'检测任务统计',id:'textJob'}" />
-        </div>
-        <dv-decoration-2 :reverse="true" style="width:2%;height: 100%;" />
         <div class="taskMatters">
-          <BarChart v-if="optionPersonShow" :info="optionPerson" :config="{title:'任务事宜统计',id:'taskMatters'}" />
+          <BarChart v-if="optionPersonShow"
+                    :info="optionPerson"
+                    :config="{title:'任务事宜统计',id:'taskMatters'}" />
         </div>
-        <!-- <dv-decoration-2 :reverse="true" style="width:2%;height: 100%;" /> -->
-        <!-- <el-dialog :visible.sync="dialogTableVisible">
-        <div class="dialogbox">
-          <div class="jbd-title-cont"> {{ setParams.seriesName }}-{{ setParams.name }} </div>
-          <div class="ibps">
-            <ibps-crud key="istree" ref="crud" :data="formDataFiiter" :toolbars="listConfig.toolbars" :search-form="listConfig.searchForm" :pk-key="pkKey" :columns="listConfig.columns" :loading="loading" @action-event="handleAction" :pagination="pagination" @pagination-change="handlePaginationChange">
-              <template slot="jianceyuan" slot-scope="scope">
-                <ibps-user-selector :value="scope.row.jian_ce_yuan_" type="user" :multiple="true" :disabled="true" readonly-text="text" @callback="data => formId = data.id" />
-              </template>
-              <template slot="fuheyuan" slot-scope="scope">
-                <ibps-user-selector :value="scope.row.fu_he_yuan_" type="user" :multiple="true" :disabled="true" readonly-text="text" @callback="data => formId = data.id" />
-              </template>
-            </ibps-crud>
+        <el-dialog :visible.sync="dialogTableVisible">
+          <div class="dialogbox">
+            <div class="jbd-title-cont"> {{ setParams.seriesName }}-{{ setParams.name }} </div>
+            <div class="ibps">
+              <ibps-crud key="istree"
+                         ref="crud"
+                         :data="formDataFiiter"
+                         :toolbars="listConfig.toolbars"
+                         :search-form="listConfig.searchForm"
+                         :pk-key="pkKey"
+                         :columns="listConfig.columns"
+                         :loading="loading"
+                         @action-event="handleAction"
+                         :pagination="pagination"
+                         @pagination-change="handlePaginationChange">
+                <template slot="jianceyuan"
+                          slot-scope="scope">
+                  <ibps-user-selector :value="scope.row.jian_ce_yuan_"
+                                      type="user"
+                                      :multiple="true"
+                                      :disabled="true"
+                                      readonly-text="text"
+                                      @callback="data => formId = data.id" />
+                </template>
+                <template slot="fuheyuan"
+                          slot-scope="scope">
+                  <ibps-user-selector :value="scope.row.fu_he_yuan_"
+                                      type="user"
+                                      :multiple="true"
+                                      :disabled="true"
+                                      readonly-text="text"
+                                      @callback="data => formId = data.id" />
+                </template>
+              </ibps-crud>
+            </div>
           </div>
-        </div>
-      </el-dialog> -->
+        </el-dialog>
       </div>
     </dv-border-box-1>
   </div>
@@ -78,7 +114,6 @@
 <script>
 import * as echarts from "echarts";
 import curdPost from "@/business/platform/form/utils/custom/joinCURD.js";
-import IbpsUserSelector from "@/business/platform/org/selector";
 import pieView from "@/views/system/jbdHome/board/component/getPieView";
 import CarouselTabl from "@/views/system/jbdHome/board/component/CarouselTabl";
 // import { pending, handledTask } from '@/api/platform/office/bpmReceived'
@@ -86,16 +121,21 @@ import CarouselTabl from "@/views/system/jbdHome/board/component/CarouselTabl";
 import ActionUtils from "@/utils/action";
 import { sync } from "@/api/platform/mail/outMail";
 import data from "@/components/ibps-icon-select/data";
+// import ibpsTreeSelect from '@/components/ibps-tree-select'
+import TreeUtils from '@/utils/tree'
+import SelectPositions from "@/views/component/selectPositions";
+
+
 export default {
   name: "checkBoard1",
   components: {
-    "ibps-user-selector": IbpsUserSelector,
     pieView,
     CarouselTabl,
+    SelectPositions,
     RingChart: () => import("../personComcont/RingChart"),
     BarChart: () => import("../personComcont/BarChart"),
   },
-  props: {},
+  //   props: {},
   data() {
     return {
       pkKey: "id", // 主键  如果主键不是pk需要传主键
@@ -451,13 +491,25 @@ export default {
         //员工基本信息轮播表
         header: ["姓名", "学历学位", "职称", "员工编号", "入职时间"],
         data: [],
-        columnWidth: ["90", "90","80", "120","120"],
+        columnWidth: ["140", "90", "80", "120", "120"],
         rowNum: 7,
         align: "center",
         hoverPause: true,
       },
       employeeNum: 0,
       employeeInfo: [],
+      selectData: '',
+      props: {
+        children: 'children',
+        label: 'NAME_',
+        multiple: true,
+        expandTrigger: 'hover',
+
+      },
+      nodeKey: 'ID_',
+      clearable: true,
+      value: [],
+      options: []
     };
   },
   computed: {},
@@ -519,38 +571,6 @@ export default {
       }
       this.optionPersonShow = true;
     },
-    // initChart() {
-    //   this.getchart = echarts.init(document.getElementById("echart-line"));
-    //   // document.getElementById("echart-line").setAttribute("_echarts_instance_", "");
-    //   this.getchart.setOption(this.option);
-    //   // //随着屏幕大小调节图表
-    //   // window.addEventListener("resize", () => {
-    //   //   this.getchart.resize();
-    //   // });
-    //   // this.getchart.on("click", (params) => {
-    //   //   this.pagination = { limit: 20, page: 1 };
-    //   //   this.dialogTableVisible = true;
-    //   //   this.setParams["dataIndex"] = params.dataIndex;
-    //   //   this.setParams["name"] = params.name;
-    //   //   switch (params.seriesName) {
-    //   //     case "检测未完成数":
-    //   //       this.setParams["seriesName"] = "未完成检测项目情况";
-    //   //       break;
-    //   //     case "检测已完成数":
-    //   //       this.setParams["seriesName"] = "已完成检测项目情况";
-    //   //       break;
-    //   //     case "复核未完成数":
-    //   //       this.setParams["seriesName"] = "未完成复核项目情况";
-    //   //       break;
-    //   //     case "复核已完成数":
-    //   //       this.setParams["seriesName"] = "已完成复核项目情况";
-    //   //       break;
-    //   //     default:
-    //   //       break;
-    //   //   }
-    //   //   this.formLoading();
-    //   // });
-    // },
     /**
      * 处理按钮事件
      */
@@ -575,150 +595,62 @@ export default {
     },
     // 图表数据加载
     async chartLoading() {
-      // 获取所有检测人员任务统计
-      let this_ = this;
-      const sql = `select  *FROM (SELECT ie.ID_ AS jcId,ie.NAME_ AS jcName,COUNT(tj.zhuang_tai_ = '待数据输入' OR NULL) AS jianCeWeiWanCheng,COUNT(tj.zhuang_tai_ = '待数据校验' OR tj.zhuang_tai_ = '已完成' OR NULL) AS jianCeYiWanCheng FROM
-                          t_lhjczb tj,ibps_party_employee ie
-                          WHERE ie.positions_ like '%1040709034740547584%' and tj.jian_ce_yuan_ = ie.ID_ AND tj.update_time_ BETWEEN '${this.startDate}' AND '${this.endDate}' GROUP BY jian_ce_yuan_
-                          ) jc  LEFT JOIN
-                          (
-                          SELECT ie.ID_ AS fhId,ie.NAME_ AS fhName,COUNT(tj.zhuang_tai_ = '待数据校验' OR NULL) AS fuHeWeiWanCheng,COUNT(tj.zhuang_tai_ = '已完成' OR NULL) AS fuHeYiWanCheng FROM
-                          t_lhjczb tj,ibps_party_employee ie
-                          WHERE ie.positions_ like '%1040709034740547584%' and tj.fu_he_yuan_ = ie.ID_ AND tj.update_time_ BETWEEN  '${this.startDate}' AND '${this.endDate}' GROUP BY fu_he_yuan_
-                          ) fh ON jc.jcName = fh.fhName
-                          UNION (
-                          SELECT  *FROM (SELECT ie.ID_ AS jcId, ie.NAME_ AS jcName,COUNT(tj.zhuang_tai_ = '待数据输入' OR NULL) AS jianCeWeiWanCheng,COUNT(tj.zhuang_tai_ = '待数据校验' OR tj.zhuang_tai_ = '已完成' OR NULL) AS jianCeYiWanCheng FROM
-                          t_lhjczb tj,ibps_party_employee ie
-                          WHERE tj.jian_ce_yuan_ = ie.ID_ AND tj.update_time_ BETWEEN  '${this.startDate}' AND '${this.endDate}' GROUP BY jian_ce_yuan_
-                          ) jc  RIGHT JOIN
-                          (
-                          SELECT ie.ID_ AS fhId,ie.NAME_ AS fhName,COUNT(tj.zhuang_tai_ = '待数据校验' OR NULL) AS fuHeWeiWanCheng,COUNT(tj.zhuang_tai_ = '已完成' OR NULL) AS fuHeYiWanCheng FROM
-                          t_lhjczb tj,ibps_party_employee ie
-                          WHERE ie.positions_ like '%1040709034740547584%' and tj.fu_he_yuan_ = ie.ID_ AND tj.update_time_ BETWEEN  '${this.startDate}' AND '${this.endDate}' GROUP BY fu_he_yuan_
-                          ) fh ON jc.jcName = fh.fhName
-                          )`;
-      // console.log(sql,"sql")
-      this.option.yAxis.data = [];
-      this.option.series[0].data = [];
-      this.option.series[1].data = [];
-      this.option.series[2].data = [];
-      this.option.series[3].data = [];
-      this.chartData = [];
-      await curdPost("sql", sql)
-        .then((res) => {
-          const data = res.variables.data;
-          for (let i of data) {
-            this_.option.yAxis.data.push(i.jcName ? i.jcName : i.fhName);
-            // 检测未完成数
-            this_.option.series[0].data.push(
-              i.jianCeWeiWanCheng ? i.jianCeWeiWanCheng : 0
-            );
-            // 检测已完成数
-            this_.option.series[1].data.push(
-              i.jianCeYiWanCheng ? i.jianCeYiWanCheng : 0
-            );
-            // 复核未完成数
-            this_.option.series[2].data.push(
-              i.fuHeWeiWanCheng ? i.fuHeWeiWanCheng : 0
-            );
-            // 复核已完成数
-            this_.option.series[3].data.push(
-              i.fuHeYiWanCheng ? i.fuHeYiWanCheng : 0
-            );
-            this_.chartData.push(i);
-          }
-        })
-        .catch((error) => {
-          console.log(error);
-        });
-    },
-    formLoading() {
-      this.loading = true;
-      let formsql = `select zhuang_tai_,fu_jian_,yang_pin_bian_hao,yang_pin_ming_che,shi_fou_he_ge_,
-                     ji_lu_bian_hao_,wei_tuo_lei_xing_,jian_ce_yuan_,fu_he_yuan_,yang_pin_lei_xing FROM t_lhjczb
-                     where update_time_ BETWEEN '${this.startDate}' AND '${this.endDate}' and `;
-      let sql = "";
-
-      const params = this.$refs["crud"]
-        ? this.$refs["crud"].getSearcFormData()
-        : {};
-      // console.log("params:", params)
-
-      switch (this.setParams.seriesName) {
-        case "未完成检测项目情况":
-          sql =
-            formsql +
-            `zhuang_tai_ = '待数据输入' and jian_ce_yuan_='${
-              this.chartData[this.setParams.dataIndex].jcId
-            }'`;
-          break;
-        case "已完成检测项目情况":
-          sql =
-            formsql +
-            `(zhuang_tai_ = '待数据校验' or zhuang_tai_ = '已完成') and jian_ce_yuan_='${
-              this.chartData[this.setParams.dataIndex].jcId
-            }'`;
-          break;
-        case "未完成复核项目情况":
-          sql =
-            formsql +
-            `zhuang_tai_ = '待数据校验' and fu_he_yuan_='${
-              this.chartData[this.setParams.dataIndex].fhId
-            }'`;
-          break;
-        case "已完成复核项目情况":
-          sql =
-            formsql +
-            `zhuang_tai_ = '已完成' and fu_he_yuan_='${
-              this.chartData[this.setParams.dataIndex].fhId
-            }'`;
-          break;
-        default:
-          break;
-      }
-      sql =
-        sql +
-        `${
-          params.yang_pin_lei_xing
-            ? ` and yang_pin_lei_xing like '%${params.yang_pin_lei_xing}%'`
-            : ``
-        }`;
-      sql =
-        sql +
-        `${
-          params.shi_fou_he_ge_
-            ? ` and shi_fou_he_ge_ like '%${params.shi_fou_he_ge_}%'`
-            : ``
-        }`;
-      sql =
-        sql +
-        `${
-          params.yang_pin_bian_hao
-            ? ` and yang_pin_bian_hao like '%${params.yang_pin_bian_hao}%'`
-            : ``
-        }`;
-      sql =
-        sql +
-        `${
-          params.yang_pin_ming_che
-            ? ` and yang_pin_ming_che like '%${params.yang_pin_ming_che}%'`
-            : ``
-        }`;
-
-      curdPost("sql", sql)
-        .then((res) => {
-          this.loading = false;
-          const data = res.variables.data;
-          this.formData = res.variables.data;
-          document.getElementsByClassName(
-            "el-pagination__rightwrapper"
-          )[0].style.display = "none";
-          this.paginationFunc(res.variables.data);
-        })
-        .catch((error) => {
-          console.log(error);
-          this.loading = false;
-        });
+      //   // 获取所有检测人员任务统计
+      //   let this_ = this;
+      //   const sql = `select  *FROM (SELECT ie.ID_ AS jcId,ie.NAME_ AS jcName,COUNT(tj.zhuang_tai_ = '待数据输入' OR NULL) AS jianCeWeiWanCheng,COUNT(tj.zhuang_tai_ = '待数据校验' OR tj.zhuang_tai_ = '已完成' OR NULL) AS jianCeYiWanCheng FROM
+      //                       t_lhjczb tj,ibps_party_employee ie
+      //                       WHERE ie.positions_ like '%1040709034740547584%' and tj.jian_ce_yuan_ = ie.ID_ AND tj.update_time_ BETWEEN '${this.startDate}' AND '${this.endDate}' GROUP BY jian_ce_yuan_
+      //                       ) jc  LEFT JOIN
+      //                       (
+      //                       SELECT ie.ID_ AS fhId,ie.NAME_ AS fhName,COUNT(tj.zhuang_tai_ = '待数据校验' OR NULL) AS fuHeWeiWanCheng,COUNT(tj.zhuang_tai_ = '已完成' OR NULL) AS fuHeYiWanCheng FROM
+      //                       t_lhjczb tj,ibps_party_employee ie
+      //                       WHERE ie.positions_ like '%1040709034740547584%' and tj.fu_he_yuan_ = ie.ID_ AND tj.update_time_ BETWEEN  '${this.startDate}' AND '${this.endDate}' GROUP BY fu_he_yuan_
+      //                       ) fh ON jc.jcName = fh.fhName
+      //                       UNION (
+      //                       SELECT  *FROM (SELECT ie.ID_ AS jcId, ie.NAME_ AS jcName,COUNT(tj.zhuang_tai_ = '待数据输入' OR NULL) AS jianCeWeiWanCheng,COUNT(tj.zhuang_tai_ = '待数据校验' OR tj.zhuang_tai_ = '已完成' OR NULL) AS jianCeYiWanCheng FROM
+      //                       t_lhjczb tj,ibps_party_employee ie
+      //                       WHERE tj.jian_ce_yuan_ = ie.ID_ AND tj.update_time_ BETWEEN  '${this.startDate}' AND '${this.endDate}' GROUP BY jian_ce_yuan_
+      //                       ) jc  RIGHT JOIN
+      //                       (
+      //                       SELECT ie.ID_ AS fhId,ie.NAME_ AS fhName,COUNT(tj.zhuang_tai_ = '待数据校验' OR NULL) AS fuHeWeiWanCheng,COUNT(tj.zhuang_tai_ = '已完成' OR NULL) AS fuHeYiWanCheng FROM
+      //                       t_lhjczb tj,ibps_party_employee ie
+      //                       WHERE ie.positions_ like '%1040709034740547584%' and tj.fu_he_yuan_ = ie.ID_ AND tj.update_time_ BETWEEN  '${this.startDate}' AND '${this.endDate}' GROUP BY fu_he_yuan_
+      //                       ) fh ON jc.jcName = fh.fhName
+      //                       )`;
+      //   // console.log(sql,"sql")
+      //   this.option.yAxis.data = [];
+      //   this.option.series[0].data = [];
+      //   this.option.series[1].data = [];
+      //   this.option.series[2].data = [];
+      //   this.option.series[3].data = [];
+      //   this.chartData = [];
+      //   await curdPost("sql", sql)
+      //     .then((res) => {
+      //       const data = res.variables.data;
+      //       for (let i of data) {
+      //         this_.option.yAxis.data.push(i.jcName ? i.jcName : i.fhName);
+      //         // 检测未完成数
+      //         this_.option.series[0].data.push(
+      //           i.jianCeWeiWanCheng ? i.jianCeWeiWanCheng : 0
+      //         );
+      //         // 检测已完成数
+      //         this_.option.series[1].data.push(
+      //           i.jianCeYiWanCheng ? i.jianCeYiWanCheng : 0
+      //         );
+      //         // 复核未完成数
+      //         this_.option.series[2].data.push(
+      //           i.fuHeWeiWanCheng ? i.fuHeWeiWanCheng : 0
+      //         );
+      //         // 复核已完成数
+      //         this_.option.series[3].data.push(
+      //           i.fuHeYiWanCheng ? i.fuHeYiWanCheng : 0
+      //         );
+      //         this_.chartData.push(i);
+      //       }
+      //     })
+      //     .catch((error) => {
+      //       console.log(error);
+      //     });
     },
     /**
      * 数据分页
@@ -784,10 +716,10 @@ export default {
         personInfo = [];
         personInfo.push(item.name_);
         personInfo.push(item.zui_gao_xue_li_x_ || `   `);
-        personInfo.push(item.zhi_cheng_deng_ji ||  `   `);
-        personInfo.push(item.jian_ding_zi_ge_z ||  `   `);
-        personInfo.push(item.ru_zhi_shi_jian_ ||  `   `);
-        this.personInfoData.data.push(personInfo ||  `   `);
+        personInfo.push(item.zhi_cheng_deng_ji || `   `);
+        personInfo.push(item.jian_ding_zi_ge_z || `   `);
+        personInfo.push(item.ru_zhi_shi_jian_ || `   `);
+        this.personInfoData.data.push(personInfo || `   `);
       }
     },
     //饼图 环形图数据
@@ -839,6 +771,9 @@ export default {
       dateString = newDate.getFullYear() + "-" + monthString + "-" + dayString;
       return dateString;
     },
+    changeData(v) {
+      console.log('changeDataVVVV',v)
+    }
   },
   created() {
     const initendDate = new Date();
@@ -857,10 +792,10 @@ export default {
       new Date(this.startDate),
       new Date(
         initendDate.getFullYear() +
-          "-" +
-          (initendDate.getMonth() + 1) +
-          "-" +
-          initendDate.getDate()
+        "-" +
+        (initendDate.getMonth() + 1) +
+        "-" +
+        initendDate.getDate()
       ),
     ];
     this.chartLoading();
@@ -878,6 +813,7 @@ export default {
   width: 100%;
   height: calc(100vh - 100px);
   background-image: url("~@/assets/images/screen/bg.png");
+  z-index: -1;
 }
 .topView {
   overflow: hidden;
@@ -906,10 +842,10 @@ export default {
       text-align: right;
       // padding-right: 20px;
       display: flex;
-      width: 300px;
+      width: 700px;
       height: 80%;
     }
-    /deep/.dv-border-box-8 .border-box-content{
+    /deep/.dv-border-box-8 .border-box-content {
       display: flex;
       align-items: center;
       padding: 0px 2px;

src/views/system/jbdHome/board/component/getPieView.vue

@@ -1,8 +1,9 @@
 <template>
   <div class="pieView">
-    <div style="height: 14%;line-height: 30px;text-align: left;padding-left: 10px;color: white;">{{info.config.title||""}}</div>   
+    <div style="height: 14%;line-height: 30px;text-align: left;padding-left: 10px;color: white;">{{info.config.title||""}}</div>
     <div style="width:100%;height:86%;display: inline-block; overflow: hidden;">
-      <div :id="info.config.idselector" style="width:100%;height:95%;overflow: hidden;"> </div>
+      <div :id="info.config.idSelector"
+           style="width:100%;height:95%;overflow: hidden;"> </div>
     </div>
   </div>
 </template>
@@ -10,25 +11,25 @@
 <script>
 import * as echarts from "echarts";
 export default {
-  data(){
-    return{
+  data() {
+    return {
     }
   },
-  props:{
-    info:{
-      type:Object,
-      default:{}
+  props: {
+    info: {
+      type: Object,
+      default: {}
     }
   },
   mounted() {
     let this_ = this;
-    this.$nextTick(()=>{
+    this.$nextTick(() => {
       this_.getMiddleLeft();
     })
   },
-  methods:{
-    getMiddleLeft(){ 
-      let chartDom = document.getElementById(this.info.config.idselector);
+  methods: {
+    getMiddleLeft() {
+      let chartDom = document.getElementById(this.info.config.idSelector);
       var myChart = echarts.init(chartDom);
       var option;
       option = {
@@ -39,9 +40,9 @@ export default {
             color: '#fff',
             fontSize: 20,
             fontWeight: '600'
+          },
         },
-        },
-        color:this.info.color,
+        color: this.info.color,
         tooltip: {
           trigger: 'item',
           formatter: '{d}%'
@@ -50,12 +51,12 @@ export default {
           formatter: '{b}\n({d}%)',
           edgeDistance: "20%"
         },
-        
+
         legend: {
           show: true,
           z: 3,
           left: 'right',
-          textStyle:{
+          textStyle: {
             color: '#fff'
           }
         },
@@ -63,7 +64,7 @@ export default {
           type: 'pie',
           radius: '70%',
           center: ['50%', '50%'],
-          data:this.info.data,
+          data: this.info.data,
           emphasis: {
             itemStyle: {
               shadowBlur: 10,
@@ -72,8 +73,8 @@ export default {
             }
           },
           labelLine: {
-              distanceToLabelLine: 0,
-            },
+            distanceToLabelLine: 0,
+          },
         }]
       };
       myChart.setOption(option);
@@ -82,10 +83,10 @@ export default {
 };
 </script>
 <style lang="scss" scoped>
-.pieView{
+.pieView {
   width: 100%;
   height: 100%;
   overflow: hidden;
-  background-color: rgba(6,30,93,.5);
+  background-color: rgba(6, 30, 93, 0.5);
 }
 </style>