fix:设备管理看板，人员管理看板

src/views/peopleManages/personComcont/BarChart.vue

@@ -0,0 +1,55 @@
+<template>
+  <div class="pieView">
+    <div style="height: 10%;line-height: 30px;text-align: left;padding-left: 10px;width: 100%;">{{config.title}}</div>   
+    <div style="width:100%;height:90%;display: inline-block;overflow: hidden;box-sizing: border-box;">
+      <div :id="config.id" style="width:100%;height:100%;"> </div>
+    </div>
+  </div>
+</template>
+
+<script>
+import * as echarts from "echarts";
+export default {
+  data() {
+    return {};
+  },
+  props: {
+    info: {
+      type: Object,
+      default: {},
+    },
+    config:{
+      type:Object,
+      default:{
+        title:"title",
+        id:"idSelector"
+      }
+    }
+  },
+  mounted() {
+    let this_ = this;
+    this.$nextTick(()=>{
+      this_.getMiddleLeft();
+  })
+},
+  methods: {
+    getMiddleLeft() {
+      var chartDom = document.getElementById(this.config.id);
+      var myChart = echarts.init(chartDom);
+      // var option;
+      this.info && myChart.setOption(this.info);
+    },
+  },
+};
+</script>
+<style lang="scss" scoped>
+.pieView {
+  // display: flex;
+  width: 100%;
+  height: 100%;
+  box-sizing: border-box;
+  overflow: hidden;
+  color: white;
+  background-color: rgba(6,30,93,.5);
+}
+</style>

src/views/peopleManages/personComcont/RingChart.vue

@@ -0,0 +1,103 @@
+<template>
+  <div class="pieView">
+    <div style="height: 20%;line-height: 30px;text-align: left;padding-left: 10px;color: white;">{{info.config.title||""}}</div>
+    <div style="width:100%;height:80%;display: inline-block; overflow: hidden;">
+      <div :id="info.config.idSelector" style="width:100%;height:95%;overflow: hidden;"> </div>
+    </div>
+  </div>
+</template>
+
+<script>
+import * as echarts from "echarts";
+export default {
+  data() {
+    return {};
+  },
+  props: {
+    info: {
+      type: Object,
+      default: {},
+    },
+  },
+  mounted() {
+    let this_ = this;
+    this.$nextTick(() => {
+      this_.getMiddleLeft();
+    });
+  },
+  methods: {
+    getMiddleLeft() {
+      let chartDom = document.getElementById(this.info.config.idSelector);
+      var myChart = echarts.init(chartDom);
+      var option;
+      option = {
+        title: {
+          show: true,
+          left: "center",
+          textStyle: {
+            color: "#fff",
+            fontSize: 20,
+            fontWeight: "600",
+          },
+        },
+        tooltip: {
+          trigger: "item",
+          formatter: ''
+        },
+        color: this.info.color,
+        legend: {
+          // show: true,
+          z: 3,
+          orient: 'vertical',
+          left: 'right',
+          textStyle:{
+            color: '#fff'
+          }
+        },
+        label: {
+          formatter: '{b}:{c}个'
+        },
+        series: [
+          {
+            // name: "Access From",
+            type: "pie",
+            radius: ["40%", "70%"],
+            avoidLabelOverlap: false,
+            label: {
+              show: true,
+              // fontSize: 20,
+              position: "outside",
+              fontWeight: "bold",
+              fontSize:16,
+              padding:[0, 0, 0, 0]
+              // color:'#fff'
+            },
+            emphasis: {
+              // label: {
+              //   show: true,
+              //   fontSize: 40,
+              //   fontWeight: "bold",
+              // },
+            },
+            labelLine: {
+              show: false,
+            },
+            data: this.info.data,
+          },
+        ],
+      };
+      option && myChart.setOption(option);
+    },
+  },
+};
+</script>
+<style lang="scss" scoped>
+.pieView {
+  // display: flex;
+  width: 100%;
+  color: white;
+  height: 100%;
+  overflow: hidden;
+  background-color: rgba(6, 30, 93, 0.5);
+}
+</style>

src/views/peopleManages/taskStatistics/index.vue

@@ -1,452 +1,734 @@
 <template>
-    <div>
-        <div class="jbd-title-cont"> 检测人员任务统计 </div>
-        <div class="contain">
-            <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 class="chart">
-                <div id="echart-line" :style="{ width: '100%', height: '100%', paddingRight: '10px' }"></div>
-            </div>
-
+  <div class="personView">
+    <div class="topView" style="width: 100%;height: 11%;">
+      <!-- <div class="jbd-title"> 人员管理看板 </div> -->
+      <dv-decoration-7 class="jbd-title">人员管理看板</dv-decoration-7>
+      <div class="contain">
+        <div class="personNum">员工数量:{{ employeeNum }}</div>
+        <!-- <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>
-
-        <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>
-
-        </el-dialog>
+      </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" />
+        </div>
+        <dv-decoration-2 :reverse="true" style="width:2%;height: 100%;" />
+        <div class="viewCenter">
+          <RingChart v-if="ranksPieData.data[2].value" :info="ranksPieData" />
+        </div>
+        <dv-decoration-2 :reverse="true" style="width:2%;height: 100%;" />
+        <div class="viewRight">
+          <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="this.option.yAxis.data[0]" :info="option" :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>
+          </div>
+        </div>
+      </el-dialog> -->
+      </div>
+    </dv-border-box-1>
+  </div>
 </template>
-
+  
 <script>
-import * as echarts from 'echarts';
-import curdPost from '@/business/platform/form/utils/custom/joinCURD.js'
-import IbpsUserSelector from '@/business/platform/org/selector'
-import ActionUtils from '@/utils/action'
+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'
+// import { queryPageList } from '@/api/platform/bpmn/bpmTask'
+import ActionUtils from "@/utils/action";
+import { sync } from '@/api/platform/mail/outMail';
+import data from '@/components/ibps-icon-select/data';
 export default {
-    components: {
-        'ibps-user-selector': IbpsUserSelector
-    },
-    props: {},
-    data() {
-        return {
-            pkKey: 'id', // 主键  如果主键不是pk需要传主键
-            pickerOptions: {
-                shortcuts: [{
-                    text: '本月',
-                    onClick(picker) {
-                        const start = new Date();
-                        start.setDate(1);
-                        picker.$emit('pick', [start, new Date()]);
-                    }
-                }, {
-                    text: '今年至今',
-                    onClick(picker) {
-                        const end = new Date();
-                        const start = new Date(new Date().getFullYear(), 0);
-                        picker.$emit('pick', [start, end]);
-                    }
-                }, {
-                    text: '最近六个月',
-                    onClick(picker) {
-                        const end = new Date();
-                        const start = new Date();
-                        start.setMonth(start.getMonth() - 6);
-                        start.setDate(1);
-                        picker.$emit('pick', [start, end]);
-                    }
-                }]
+  name: "checkBoard1",
+  components: {
+    "ibps-user-selector": IbpsUserSelector,
+    pieView,
+    CarouselTabl,
+    RingChart: () => import("../personComcont/RingChart"),
+    BarChart: () => import("../personComcont/BarChart"),
+  },
+  props: {},
+  data() {
+    return {
+      pkKey: "id", // 主键  如果主键不是pk需要传主键
+      pickerOptions: {
+        shortcuts: [
+          {
+            text: "本月",
+            onClick(picker) {
+              const start = new Date();
+              start.setDate(1);
+              picker.$emit("pick", [start, new Date()]);
             },
-            monthValues: [],
-            dialogTableVisible: false,
-            getchart: null,
-            option: {
-                title: {
-                    text: ''
-                },
-                tooltip: {
-                    trigger: 'axis',
-                    axisPointer: {
-                        type: 'shadow'
-                    }
-                },
-                legend: {
-                    orient: 'vertical',
-                    right: '5',
-                    top: 'top'
-                },
-                grid: {
-                    left: '2%',
-                    right: '10%',
-                    bottom: '3%',
-                    containLabel: true
-                },
-                xAxis: {
-                    type: 'value',
-                    name: '任务数量(项)',
-                    axisLabel: {
-                        formatter: function (v) {
-                            return parseInt(v)//表示整数。其他数值类型以此类推
-                        }
-                    }
-                },
-                yAxis: {
-                    type: 'category',
-                    name: '检测人员',
-                    data: []
-                },
-                series: [
-                    {
-                        name: '检测未完成数',
-                        type: 'bar',
-                        data: [],
-                        label: {
-                            show: true,
-                            position: 'right',
-                            valueAnimation: true
-                        }
-                    },
-                    {
-                        name: '检测已完成数',
-                        type: 'bar',
-                        data: [],
-                        label: {
-                            show: true,
-                            position: 'right',
-                            valueAnimation: true
-                        }
-                    },
-                    {
-                        name: '复核未完成数',
-                        type: 'bar',
-                        data: [],
-                        label: {
-                            show: true,
-                            position: 'right',
-                            valueAnimation: true
-                        }
-                    },
-                    {
-                        name: '复核已完成数',
-                        type: 'bar',
-                        data: [],
-                        label: {
-                            show: true,
-                            position: 'right',
-                            valueAnimation: true
-                        }
-                    }
-                ],
-                dataZoom: [
-                    {
-                        type: 'inside',
-                        xAxisIndex: 0,
-                        filterMode: 'filter'
-                    },
-                    {
-                        type: 'inside',
-                        left: 'left',
-                        yAxisIndex: 0,
-                        filterMode: 'none'
-                    }
-                ]
+          },
+          {
+            text: "今年至今",
+            onClick(picker) {
+              const end = new Date();
+              const start = new Date(new Date().getFullYear(), 0);
+              picker.$emit("pick", [start, end]);
             },
-            setParams: {},
-            formData: [],
-            formDataFiiter: [],
-            listConfig: {
-                // 工具栏
-                toolbars: [
-                    { key: 'search' }
-                ],
-                // 查询条件
-                searchForm: {
-                    forms: [
-                        { prop: 'yang_pin_bian_hao', label: '样品编号' },
-                        { prop: 'yang_pin_ming_che', label: '样品名称' },
-                        { prop: 'yang_pin_lei_xing', label: '样品类型' },
-                        { prop: 'shi_fou_he_ge_', label: '是否合格' },
-                    ]
-                },
-                // 表格字段配置
-                columns: [
-                    { prop: 'wei_tuo_lei_xing_', label: '委托类型' },
-                    { prop: 'jian_ce_zhuang_ta', label: '检测状态' },
-                    { prop: 'yang_pin_lei_xing', label: '样品类型' },
-                    { prop: 'yang_pin_bian_hao', label: '样品编号' },
-                    { prop: 'yang_pin_ming_che', label: '样品名称' },
-                    { prop: 'ji_lu_bian_hao_', label: '记录编号' },
-                    { prop: 'shi_fou_he_ge_', label: '是否合格' },
-                    { prop: 'jian_ce_yuan_', label: '检测员', slotName: "jianceyuan" },
-                    { prop: 'fu_he_yuan_', label: '复核员', slotName: "fuheyuan" }
-                ]
+          },
+          {
+            text: "最近六个月",
+            onClick(picker) {
+              const end = new Date();
+              const start = new Date();
+              start.setMonth(start.getMonth() - 6);
+              start.setDate(1);
+              picker.$emit("pick", [start, end]);
             },
-            startDate: '2022-1-1',
-            endDate: '',
-            chartData: [],
-            pagination: { limit: 20, page: 1 },
-            loading: false
-        };
-    },
-    computed: {},
-    methods: {
-        initChart() {
-            this.getchart = echarts.init(document.getElementById('echart-line'));
-            document.getElementById('echart-line').setAttribute('_echarts_instance_', '');
-            this.getchart.setOption(this.option, true);
-            //随着屏幕大小调节图表
-            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()
-            });
+          },
+        ],
+      },
+      monthValues: [],
+      dialogTableVisible: false,
+      getchart: null,
+      option: {
+        title: {
+          text: "",
         },
-        /**
-        * 处理按钮事件
-        */
-        handleAction(command, position, selection, data) {
-            switch (command) {
-                case 'search':// 查询
-                    console.log("搜索")
-                    const params = this.$refs['crud'] ? this.$refs['crud'].getSearcFormData() : {}
-                    console.log("params:", params)
-                    this.formLoading()
-                    break
-                default:
-                    break
-            }
+        textAlign: "left",
+        tooltip: {
+          trigger: "axis",
+          axisPointer: {
+            type: "shadow",
+          },
         },
-        /**
-     * 处理分页事件
-     */
-        handlePaginationChange(page) {
-            this.pagination = page
-            this.paginationFunc(this.formData)
+        legend: {
+          // show: true,
+          left: "0%",
+          itemGap: 2,
+          itemWidth: 16,
+          textStyle: {
+            color:'#fff',
+          },
         },
-        // 图表数据加载
-        chartLoading() {
-            // 获取所有检测人员任务统计
-            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 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 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 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
-                        )`
-            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 = []
-            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)
-                }
-                this.initChart()
-            }).catch(error => {
-                console.log(error)
-            })
+        grid: {
+          left: "2%",
+          right: "10%",
+          bottom: "3%",
+          containLabel: true,
         },
-        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)
+        xAxis: {
+          type: "value",
+          name: "任务数量(项)",
 
-            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
-            })
+          axisLabel: {
+            formatter: function (v) {
+              return parseInt(v); //表示整数。其他数值类型以此类推
+            },
+            color:'#fff',
+          },
         },
-        /**
-         * 数据分页
-         * par:[]
-         * pagination: { limit: 20, page: 1 },
-         */
-        paginationFunc(par) {
-            this.formDataFiiter = []
-            for (var i = (this.pagination.limit * this.pagination.page - this.pagination.limit); i < (this.pagination.limit * this.pagination.page); i++) {
-                if (i < this.formData.length) {
-                    this.formDataFiiter.push(this.formData[i])
-                }
-            }
+        yAxis: {
+          type: "category",
+          name: "检测人员",
+          data: [],
+          axisLabel:{
+            color:'#fff'
+          }
+        },
+        series: [
+          {
+            name: "检测未完成数",
+            type: "bar",
+            data: [],
+            label: {
+              show: true,
+              position: "right",
+              valueAnimation: true,
+            },
+          },
+          {
+            name: "检测已完成数",
+            type: "bar",
+            data: [],
+            label: {
+              show: true,
+              position: "right",
+              valueAnimation: true,
+            },
+          },
+          {
+            name: "复核未完成数",
+            type: "bar",
+            data: [],
+            label: {
+              show: true,
+              position: "right",
+              valueAnimation: true,
+            },
+          },
+          {
+            name: "复核已完成数",
+            type: "bar",
+            data: [],
+            label: {
+              show: true,
+              position: "right",
+              valueAnimation: true,
+            },
+          },
+        ],
+        dataZoom: [
+          {
+            type: "inside",
+            xAxisIndex: 0,
+            filterMode: "filter",
+          },
+          {
+            type: "inside",
+            left: "left",
+            yAxisIndex: 0,
+            filterMode: "none",
+          },
+        ],
+      },
+      setParams: {},
+      formData: [],
+      formDataFiiter: [],
+      listConfig: {
+        // 工具栏
+        toolbars: [{ key: "search" }],
+        // 查询条件
+        searchForm: {
+          forms: [
+            { prop: "yang_pin_bian_hao", label: "样品编号" },
+            { prop: "yang_pin_ming_che", label: "样品名称" },
+            { prop: "yang_pin_lei_xing", label: "样品类型" },
+            { prop: "shi_fou_he_ge_", label: "是否合格" },
+          ],
         },
-        changeDate(value) {
-            let year = value[1].getFullYear()
-            let month = value[1].getMonth() + 1
-            // 这里传入的是整数时间，返回的是下个月的第一天，因为月份是0-11
-            let nextMonthFirthDay = new Date(year, month, 1) // 下个月的第一天
-            let oneDay = 1000 * 60 * 60 * 24 // 一天的时间毫秒数
-            let endDay = new Date(nextMonthFirthDay - oneDay)
-            let day = endDay.getDate() // 本月最后一天
-            this.endDate = value[1].getFullYear() + '-' + (value[1].getMonth() + 1) + '-' + day
-            this.startDate = value[0].getFullYear() + '-' + (value[0].getMonth() + 1) + '-' + value[0].getDate()
-            this.chartLoading()
+        // 表格字段配置
+        columns: [
+          { prop: "wei_tuo_lei_xing_", label: "委托类型" },
+          { prop: "jian_ce_zhuang_ta", label: "检测状态" },
+          { prop: "yang_pin_lei_xing", label: "样品类型" },
+          { prop: "yang_pin_bian_hao", label: "样品编号" },
+          { prop: "yang_pin_ming_che", label: "样品名称" },
+          { prop: "ji_lu_bian_hao_", label: "记录编号" },
+          { prop: "shi_fou_he_ge_", label: "是否合格" },
+          { prop: "jian_ce_yuan_", label: "检测员", slotName: "jianceyuan" },
+          { prop: "fu_he_yuan_", label: "复核员", slotName: "fuheyuan" },
+        ],
+      },
+      startDate: "2022-1-1",
+      endDate: "",
+      chartData: [],
+      pagination: { limit: 20, page: 1 },
+      loading: false,
+      degreePieData: { //学位学历
+        data: [
+          {
+            name: "博士",
+            value: 0,
+          },
+          {
+            name: "硕士",
+            value: 0,
+          },
+          {
+            name: "本科",
+            value: 0,
+          },
+        ],
+        color: ["#FFFF00", "#99CC00", "#6666FF"],
+        config: { title: "学历学位统计", idSelector: "degreeId" },
+      },
+      ranksPieData: { //职称
+        data: [
+          {
+            name: "高级",
+            value: 0,
+          },
+          {
+            name: "中级",
+            value: 0,
+          },
+          {
+            name: "初级",
+            value: 0,
+          },
+        ],
+        color: ["#FFFF00", "#99CC00", "#6666FF"],
+        config: { title: "职称显示", idSelector: "ranksid" },
+      },
+      personInfoData: { //员工基本信息轮播表
+        header: ["姓名", "学历学位", "职称", "员工编号", "入职时间"],
+        data: [],
+        columnWidth: ["100", "90"],
+        rowNum: 6,
+        align:'center',
+        hoverPause:true,
+      },
+      employeeNum:0,
+      employeeInfo:[],
+    };
+  },
+  computed: {},
+  methods: {
+    async getTtaskMattersData(){
+      let create_by_ = ''
+      let data =[];
+      let csData = [];
+      for(let item of this.employeeInfo){
+        create_by_  += create_by_+ ',' + item.id_;
+      }
+      create_by_ = create_by_.slice(0,create_by_.length - 1);
+      let sql = `select  executor_,count(executor_) as num ,c.name_ FROM  IBPS_BPM_TASKS as a join IBPS_BPM_TASK_ASSIGN as b  on a.task_id_ = b.task_id_ join ibps_party_employee as c on b.executor_ = c.id_  GROUP BY  executor_`
+      await curdPost("sql", sql).then(res=>{
+        data = res.variables.data;
+      })
+      //超时
+      let cssql = `SELECT  executor_ ,count(executor_) as num ,c.name_,a.create_time_ FROM  IBPS_BPM_TASKS as a join IBPS_BPM_TASK_ASSIGN as b  on a.task_id_ = b.task_id_ join ibps_party_employee as c on b.executor_ = c.id_  
+                  where now()> SUBDATE(a.create_time_,interval - 3 day) GROUP BY  executor_ `
+      await curdPost("sql", cssql).then(res=>{
+        csData = res.variables.data;
+      })
+     
+    },
+    // 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();
+    //   // });
+    // },
+    /**
+     * 处理按钮事件
+     */
+    handleAction(command, position, selection, data) {
+      switch (command) {
+        case "search": // 查询
+          console.log("搜索");
+          const params = this.$refs["crud"]
+            ? this.$refs["crud"].getSearcFormData()
+            : {};
+          console.log("params:", params);
+          this.formLoading();
+          break;
+        default:
+          break;
+      }
+    },
+    /**
+     * 处理分页事件
+     */
+    handlePaginationChange(page) {
+      this.pagination = page;
+      this.paginationFunc(this.formData);
+    },
+    // 图表数据加载
+    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;
+        });
+    },
+    /**
+     * 数据分页
+     * par:[]
+     * pagination: { limit: 20, page: 1 },
+     */
+    paginationFunc(par) {
+      this.formDataFiiter = [];
+      for (
+        var i =
+          this.pagination.limit * this.pagination.page - this.pagination.limit;
+        i < this.pagination.limit * this.pagination.page;
+        i++
+      ) {
+        if (i < this.formData.length) {
+          this.formDataFiiter.push(this.formData[i]);
         }
+      }
     },
-    created() {
-        const initendDate = new Date();
-        this.endDate = initendDate.getFullYear() + '-' + (initendDate.getMonth() + 1) + '-' + initendDate.getDate()
-        this.monthValues = [new Date(this.startDate), new Date(initendDate.getFullYear() + '-' + (initendDate.getMonth() + 1) + '-' + initendDate.getDate())]
-        this.chartLoading()
+    changeDate(value) {
+      let year = value[1].getFullYear();
+      let month = value[1].getMonth() + 1;
+      // 这里传入的是整数时间，返回的是下个月的第一天，因为月份是0-11
+      let nextMonthFirthDay = new Date(year, month, 1); // 下个月的第一天
+      let oneDay = 1000 * 60 * 60 * 24; // 一天的时间毫秒数
+      let endDay = new Date(nextMonthFirthDay - oneDay);
+      let day = endDay.getDate(); // 本月最后一天
+      this.endDate =
+        value[1].getFullYear() + "-" + (value[1].getMonth() + 1) + "-" + day;
+      this.startDate =
+        value[0].getFullYear() +
+        "-" +
+        (value[0].getMonth() + 1) +
+        "-" +
+        value[0].getDate();
+      this.chartLoading();
     },
-    mounted() {
-        this.initChart()
+    //员工基本信息 轮播表数据
+    async employeeInfoData(){
+      let this_ = this;
+      this.personInfoData.data =[];
+      let data = [];
+      let personInfo = [];
+      // let ranksObj = {};
+      let sql = `select a.id_,a.parent_id_,b.name_,a.zui_gao_xue_li_x_,a.zhi_cheng_deng_ji,b.jian_ding_zi_ge_z,a.ru_zhi_shi_jian_ from  t_ryjbqk as a join  ibps_party_employee as b on a.parent_id_= b.id_`
+      await curdPost("sql", sql).then(res=>{
+        data = res.variables.data;
+      })
+      this.employeeInfo = data;
+      this.employeeNum = data.length;
+      for(let item of data){
+        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||"　　");
+      }
+    },
+    //饼图 环形图数据
+    async degreeGradeInfoData(){
+      let data = [];
+      let sql = `select 
+                sum(a.zui_gao_xue_li_x_ = '博士') as doctor,
+                sum(a.zui_gao_xue_li_x_ = '硕士') as Master,
+                sum(a.zui_gao_xue_li_x_ = '本科') as undergraduate,
+                sum(a.zhi_cheng_deng_ji = '初级') as elementary,
+                sum(a.zhi_cheng_deng_ji = '中级') as middleRank,
+                sum(a.zhi_cheng_deng_ji = '高级') as senior
+                from t_ryjbqk as a join  ibps_party_employee as b on a.parent_id_= b.id_`
+      await curdPost("sql", sql).then(res=>{
+        data = res.variables.data;
+      })
+      this.degreePieData.data[0].value = data[0].doctor;
+      this.degreePieData.data[1].value = data[0].Master;
+      this.degreePieData.data[2].value = data[0].undergraduate;
+      this.ranksPieData.data[0].value = data[0].senior;
+      this.ranksPieData.data[1].value = data[0].middleRank;
+      this.ranksPieData.data[2].value = data[0].elementary;
+
     }
+  },
+  created() {
+    const initendDate = new Date();
+    this.endDate =initendDate.getFullYear() +"-" +(initendDate.getMonth() + 1) +"-" +initendDate.getDate();
+    this.monthValues = [
+      new Date(this.startDate),
+      new Date(initendDate.getFullYear() +"-" +(initendDate.getMonth() + 1) +"-" +initendDate.getDate()),
+    ];
+    this.chartLoading();
+    this.employeeInfoData();
+    this.degreeGradeInfoData();
+    this.getTtaskMattersData();
+  },
+  mounted() {
+    // this.initChart();
+  },
 };
 </script>
-<style lang="less" scoped>
-.contain {
-    width: 100%;
-    height: 800px;
-    border-left: 1px solid #dfdcdc;
+  <style lang="less" scoped>
+.personView {
+  width: 100%;
+  height: 100%;
+  background-image: url("~@/views/system/jbdHome/board/img/bg.png");
 }
-
-.date {
-    text-align: right;
-    padding-right: 20px;
-}
-
-.chart {
-    width: 95%;
-    height: 800px;
-}
-
-.jbd-title-cont {
+.topView {
+  overflow: hidden;
+  box-sizing: border-box;
+  .jbd-title {
     text-align: center;
     font-weight: bold;
-    background-color: rgb(249, 255, 255);
+    // background-color: rgb(249, 255, 255);
     width: 100%;
+    color: white;
     font-size: 18px;
+    height: 50%;
+  }
+  .contain {
+    width: 100%;
+    height: 50%;
+    display: flex;
+    justify-content: space-between;
+    border-left: 1px solid #dfdcdc;
+    color: white;
+    .personNum {
+      margin-left: 20px;
+    }
+    .date {
+      text-align: right;
+      padding-right: 20px;
+    }
+  }
 }
 
-.dialogbox {
-    display: flex;
-    flex-direction: column;
+.middleView {
+  height: 36%;
+  width: 96%;
+  margin: 0 auto;
+  display: flex;
+  justify-content: left;
+  overflow: hidden;
+  box-sizing: border-box;
+  .viewLeft {
+    width: 28%;
+    height: 100%;
+    overflow: hidden;
+    box-sizing: border-box;
+  }
+  .viewCenter {
+    width: 28%;
+    height: 100%;
+    overflow: hidden;
+    box-sizing: border-box;
+  }
+  .viewRight {
+    width: 40%;
+    height: 100%;
+    overflow: hidden;
+    box-sizing: border-box;
+  }
 }
+.bottomView {
+  width: 96%;
+  margin: 0 auto;
+  height: 56%;
 
-.ibps {
+  //   background: red;
+  overflow: hidden;
+  box-sizing: border-box;
+  display: flex;
+  .dialogbox {
+    display: flex;
+    flex-direction: column;
+  }
+  .detectionTask {
+    width: 49%;
+    height: 100%;
+  }
+  .taskMatters {
+    width: 49%;
+    height: 100%;
+  }
+  .ibps {
     top: 55px;
     border: 1px solid rgb(241, 238, 238);
-}
+  }
+  // /deep/ .el-dialog {
+  //   height: 80%;
+  //   width: 80%;
+  // }
 
+  // /deep/ .el-dialog__header {
+  //   border: 0;
+  // }
 
+  // /deep/ .el-pagination__rightwrapper1 {
+  //   display: none;
+  // }
 
-/deep/ .el-dialog {
-    height: 700px;
-    width: 80%;
-}
-
-/deep/ .el-dialog__header {
-    border: 0;
-}
-
-/deep/ .el-pagination__rightwrapper1 {
-    display: none;
-}
-
-/deep/ .ibps-container-crud__header {
-    margin-top: 55px;
-}
+  // /deep/ .ibps-container-crud__header {
+  //   margin-top: 55px;
+  // }
 
-/deep/ .el-dialog__headerbtn {
-    z-index: 9999;
+  // /deep/ .el-dialog__headerbtn {
+  //   z-index: 9999;
+  // }
 }
 </style>

src/views/platform/office/bpmInitiatedProcess/myRequest.vue

@@ -179,7 +179,7 @@ export default {
         },
         // 表格字段配置
         columns: [
-          { prop: 'subject', label: '事务名称', link: 'dialog' },
+          { prop: 'subject', label: '事务名称1', link: 'dialog' },
           { prop: 'procDefName', label: '事务类型', width: 120 },
            { prop: 'createTime', label: '创建时间', width: 140 },
           // { prop: 'status', label: '状态', slotName: 'statusCloum', width: 150 }

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

@@ -1,6 +1,6 @@
 <template>
   <div style="width: 100%;height: 100%;overflow: hidden;">
-    <div class="title" style="vertical-align: top; height: 10%;font-size: 16px;">{{ title }}</div>
+    <div class="title" style="vertical-align: top; height: 10%;font-size: 16px;color: white;">{{ title }}</div>
     <div style="width:100%;height: 90%;display: inline-block;background-color: #06163f;">
       <dv-scroll-board :config="info" style="width:100%;height:100%" />
     </div>

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

@@ -25,7 +25,6 @@ export default {
     this.$nextTick(()=>{
       this_.getMiddleLeft();
     })
-    
   },
   methods:{
     getMiddleLeft(){ 
@@ -87,7 +86,8 @@ export default {
 </script>
 <style lang="scss" scoped>
 .pieView{
-  display: flex;
+  // display: flex;
+  color: white;
   width: 100%;
   height: 100%;
   overflow: hidden;

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

@@ -1,7 +1,7 @@
 <template>
   <div class="pieView">
     <div style="height: 10%;line-height: 30px;text-align: left;padding-left: 10px;width: 100%;">{{info.config.title}}</div>   
-    <div style="width:100%;height:90%;display: inline-block;overflow: hidden;box-sizing: border-box;">
+    <div style="width:100%;height:90%;display: inline-block;">
       <div :id="info.config.idSelector" style="width:100%;height:100%;"> </div>
     </div>
   </div>
@@ -11,7 +11,9 @@
 import * as echarts from "echarts";
 export default {
   data() {
-    return {};
+    return {
+      yAxisNum:1,
+    };
   },
   props: {
     info: {
@@ -19,16 +21,28 @@ export default {
       default: {},
     },
   },
+  mounted() {
+    let this_ = this;
+    this.$nextTick(()=>{
+      this_.getMiddleLeft();
+    })
+    
+  },
   methods: {
     getMiddleLeft() {
       var chartDom = document.getElementById(this.info.config.idSelector);
       var myChart = echarts.init(chartDom);
-      const setEchartWH = {
-        //设置控制图表大小变量
-        width: 250,
-        height: 300,
-      };
-      var myChart = echarts.init(chartDom, null, setEchartWH);
+      // const setEchartWH = {
+      //   //设置控制图表大小变量
+      //   width: 250,
+      //   height: 300,
+      // };
+      let ay =this.info.data;
+      let yc;
+      ay[0] > ay[1]?yc=ay[0]:yc=ay[1];
+      this.yAxisNum =parseInt(yc / 6) ;
+      this.yAxisNum ==0? this.yAxisNum =1:'';
+      var myChart = echarts.init(chartDom);
       var option;
       option = {
         tooltip: {
@@ -47,14 +61,13 @@ export default {
           {
             type: "category",
             data: this.info.xData,
-            interval: 1,
+            interval: 2,
             axisTick: {
               alignWithLabel: false,
             },
             axisLabel: {
-              // rotate: -1,
-              // margin: 0,
               fontSize: 12,
+              rotate: 25,
               formatter:function(value){  
                 var str = ""; 
                 var num = 6; //每行显示字数 
@@ -93,7 +106,7 @@ export default {
               color: "#fff"
             }
           },
-          interval:1
+          interval:15
         },
         ],
         series: [
@@ -109,7 +122,7 @@ export default {
             itemStyle: {
             normal: {
                 color: function(params) {
-                    var colorList = ['#5c7bd9', '#9fe080', '#ffdc60', '#ff7070','#7ed3f4', '#ff915a'];
+                    var colorList = ['#5c7bd9', '#9fe080', '#339933', '#ffdc60','#f9210b', '#ff915a'];
                     return colorList[params.dataIndex]
                 }
             }
@@ -118,7 +131,7 @@ export default {
           
         ],
       };
-      option && myChart.setOption(option);
+      myChart.setOption(option);
     },
   },
 };
@@ -128,8 +141,6 @@ export default {
   display: flex;
   width: 100%;
   height: 100%;
-  box-sizing: border-box;
-  overflow: hidden;
   background-color: rgba(6,30,93,.5);
 }
 </style>

src/views/system/jbdHome/board/equipmentBoard.vue

@@ -42,7 +42,11 @@
         </div>
         <dv-decoration-10 style="height:2%;display:flex;" />
         <div class="bottomCard">
-          <div style="width:32%;height: 100%;overflow: hidden;box-sizing: border-box;display:flex;">
+          <div style="width:24%">
+            <zhuzhuangtu v-if="sheBeiData.data.length" :info="sheBeiData" ref="sheBeiDataDataref" />
+          </div>
+          <dv-decoration-2 :reverse="true" style="width:1%;height:100%;overflow: hidden;box-sizing: border-box;" />
+          <div style="width:25%;height: 100%;overflow: hidden;box-sizing: border-box;display:flex;">
             <div class="bottomCardLeft0">
               <middleCard v-if="weiHuSheBeiData.data.length" :info="weiHuSheBeiData" ref="sheBeiWeiHuRef" />
             </div>
@@ -52,7 +56,7 @@
             </div> -->
           </div>
           <dv-decoration-2 :reverse="true" style="width:1%;height:100%;overflow: hidden;box-sizing: border-box;" />
-          <div style="width:34%;display:flex;">
+          <div style="width:25%;display:flex;">
             <!-- <div style="width:40%">
               <zhuzhuangtu v-if="zhuantaiEData.data.length" :info="zhuantaiEData" ref="zhuantaiEDataref" />
             </div> -->
@@ -62,7 +66,7 @@
             </div>
           </div>
           <dv-decoration-2 :reverse="true" style="width:1%;height:100%;overflow: hidden;box-sizing: border-box;" />
-          <div style="width:32%;overflow: hidden;box-sizing: border-box;display:flex;">
+          <div style="width:24%;overflow: hidden;box-sizing: border-box;display:flex;">
             <div class="bottomCardLeft">
               <middleCard v-if="sheBeiHeChaData.data.length" :info="sheBeiHeChaData" ref="sheBeiHeChaRef"/>
             </div>
@@ -114,6 +118,8 @@ export default {
       },
       bottomData: {},
       zhuantaiEData: {},
+      sheBeiData: { xData: [], data: [], config: { idSelector: "" } },
+      sheBeiDataShow:false,
       sheBeiweiHuData: {},
       config: {},
       zichan: 0,
@@ -155,9 +161,11 @@ export default {
         rowNum: 6,
         color: [],
       };
+      this_.sheBeiDataShow = false;
       this.eBgRateData = { data: [], config: {} };
       this.sheBeiHeChaData = { data: [], config: {} };
       this.jianDingjiaoZhunSheBeiData = { data: [], config: {} };
+      this.sheBeiData={ xData: [], data: [], config: { idSelector: "" } };
       this.weiHuSheBeiData = { data: [], config: {} };
       this.bottomData = { xData: [], data: [], config: { idSelector: "" } };
       this.zhuantaiEData = { xData: [], data: [], config: { idSelector: "" } };
@@ -331,6 +339,23 @@ export default {
               ],
             },
           ];
+          //设备数量统计
+          this_.sheBeiData.xData = [
+            "设备总数",
+            "新增数",
+            "良好数",
+            "受限数",
+            "报废停用数",
+          ];
+          
+          this_.sheBeiData.data.push(data[0].Equipments);
+          this_.sheBeiData.data.push(data[0].addEquipments);
+          this_.sheBeiData.data.push(data[0].goodEquipments);
+          this_.sheBeiData.data.push(data[0].limitedEquipments);
+          this_.sheBeiData.data.push(data[0].scrapEquipments);
+          this_.sheBeiData.config.title = "设备数量情况一览";
+          this_.sheBeiData.config.idSelector = "main8";
+          this_.sheBeiDataShow = true;
           //
           this_.bottomData.xData = ["本月计划核查数", "本月已核查数"];
           this_.bottomData.data.push(data[0].checkNoEquipments);
@@ -433,7 +458,6 @@ export default {
       let this_ = this;
       // const sql = `select she_bei_ming_chen,she_bei_bian_hao_ ,create_time_,she_bei_zhuang_ku,COUNT(*) AS pinlv FROM t_mjsbsy GROUP BY she_bei_bian_hao_  HAVING create_time_ LIKE '${this.month}%' ORDER BY pinlv DESC`;
       const sql = `select a.she_bei_ming_chen ,a.create_time_,a.shi_yong_qian_qin,b.name_,c.cun_fang_di_dian_,COUNT(*) AS pinlv FROM  t_yqsbsydjb as a join ibps_party_employee as b on a.shi_yong_ren_ = b.ID_ join t_sbdj as c on a.yi_qi_bian_hao_ = c.id_ GROUP BY create_time_  HAVING create_time_ LIKE '${this.month}%' ORDER BY pinlv DESC`;
-      console.log(sql, "设备使用");
       let data1 = [];
       let res1 = [];
       this_.shiyonglvConfig.data = [];