update code

src/api/attendance/index.js

@@ -30,9 +30,18 @@ const todayAttendance=(data)=>{
     method: 'post'
   })
 }
+
+const selectList=(data,pageNum,pageSize)=>{
+  return request({
+    url: `bgscreen/attendance/selectList?pageNum=${pageNum}&pageSize=${pageSize}`,
+    data:data,
+    method: 'post'
+  })
+}
 export default{
     getDeptWorksList,
     getWorkAttendanceList,
     groupByComany,
-    todayAttendance
+    todayAttendance,
+    selectList
 }

src/components/project-overview-chart.js

@@ -5,11 +5,14 @@ Vue.component("project-overview-chart", {
             <div :style="{'height': height+'px'}" ref="warningPieChart">
  
             </div>
-            <div class="chart-gif chart-overview-gif"></div>
+            <div class="chart-gif chart-overview-gif" style="{'top':gifTop}"></div>
-        </div>
+        </div>            
-            
     `,
     props: {
+        gifTop:{
+            type:String,
+            default:'63px'
+        },
         fn:{
             type:Function              
         },

src/components/project-overview-chart.vue

@@ -0,0 +1,221 @@
+<template>
+   <div class='project-overview-chart' style="position: relative" @click="doClick">
+            <div :style="{'height': height+'px'}" ref="warningPieChart">
+ 
+            </div>
+            <div class="chart-gif chart-overview-gif" :style="'top:'+gifTop"></div>
+        </div>  
+</template>
+
+<script>
+export default {
+    name: 'JhbigscreenProjectOverviewChart',
+
+    props: {
+        txtTop:{
+            type:String,
+            default:'0'
+        },
+        gifTop:{
+            type:String,
+            default:'63px'
+        },
+        fn:{
+            type:Function              
+        },
+        typedata:{
+            type: Array,
+        },
+        height:{
+            type:Number
+        },
+        text:{
+            type:String
+        },
+        legendOpt:{
+            type:Object,
+            default:()=>{}
+        },
+        maintitle:{
+            type:[String,Number],
+            default:''
+        },
+        sp:{
+            type:String,
+            default:"\n"
+        }
+    },
+    data() {
+        return {
+            active:0,
+            option:{}
+        }
+    },
+    mounted(){
+        this.init()
+    },
+    methods: {
+        doClick(){            
+            this.$emit("clickme");
+        },  
+        init(){
+            this.getChartData()
+        },
+        getChartData(){
+            //品类金额占比 饼图
+            var chChartPie = echarts.init(this.$refs.warningPieChart);
+            this.echartPie(chChartPie,this.typedata)
+        },
+        echartPie(chChart,chartData){
+            let newPromise = new Promise((resolve) => {
+                resolve()
+            })
+
+            //然后异步执行echarts的初始化函数
+            newPromise.then(() => {
+                var total_datas = 0;
+                var data = [];
+                var legendData = [];
+                var color = ['#4974ff','#52aef7','#6863d7','#1d5d89','#20e6ff','#67feef']
+                for (let i = 0; i <chartData.length ; i++) {
+                    total_datas += Number(chartData[i].value);
+                    legendData.push(chartData[i].name)
+                    data.push(
+                        {
+                            value: chartData[i].value,
+                            name:  chartData[i].name,
+                            itemStyle: {                                
+                                //颜色渐变
+                                color: color[i]                                
+                            },
+                        },
+                    )
+                }              
+                /*     let total = chartData.reduce((a, b) => {
+                         return a + b.value;
+                     }, 0);*/
+
+                let legendOption = {
+
+                    top: "center",
+
+                    orient: "vertical",
+                    icon: "circle",
+                    itemWidth: 12,
+                    itemGap: 8,
+                    textStyle: {
+                        color: "#c3dbfd",
+                        fontSize: 14,
+                        rich: {                           
+                            name: {
+                                color: "#c3dbfd",
+                                padding: [10, 5, 20, 5],                                
+                            },
+                            percent: {
+                                color: "#18DB9F",
+                                fontSize: 16,
+                                padding: [0, 5, 0, 5],                                
+                            },
+                        },
+                    },
+                    formatter:  (name) =>{
+                        let res = chartData.filter((v) => v.name === name);
+                        let percent = ((res[0].value * 100) / total_datas).toFixed(1);
+                        if(total_datas==0){
+                            percent=0;
+                        }
+                        return "{name| " + name + "}"+this.sp+"{val|" + res[0].value + "}   {percent|" + percent + "%}";
+                    },
+                };                
+                let opt={...legendOption,...(this.legendOpt||{})};
+                this.option =  {                   
+                    title: {
+                        text: this.maintitle||total_datas,
+                        subtext: this.text,
+                        textAlign:'center',
+                        top:this.txtTop,
+                        itemGap :10,
+                        textStyle: {
+                            color: "#0dd2fd",
+                            fontSize: 24,
+                            fontWeight: "bold",
+                            align: "center",                           
+                        },
+                        subtextStyle: {
+                            color: "#a5b5f0",
+                            fontSize: 12,
+                            align: "center",
+                        },
+                        padding:[95,0,0,110],
+                        left:'left'
+                       
+                    },
+                    tooltip: {
+                        trigger: 'item',
+                        formatter: "{b} <br/>{c} ({d}%)"
+                    },
+                    
+                    legend: [
+                        {
+                            right: 10,
+                            data: legendData,
+                            align: "left",
+                            ...opt,
+                        },
+                    ],
+
+                    series: [
+                        {
+                            name: "品类金额占比",
+                            type: "pie",
+                            center: ["25%", "50%"],
+                            radius: ["46%", "63%"],
+                            data: data,
+                            label: {
+                                show: false,
+                            },
+                            itemStyle: {
+                                normal: {
+                                    borderWidth: 5,
+                                    borderColor: "#051a36"
+                                }
+                            },
+
+                        },
+                        {
+                            name: "外边框",
+                            type: "pie",
+                            clockWise: false, //顺时加载
+                            hoverAnimation: false, //鼠标移入变大
+                            center: ["25%", "50%"],
+                            radius: ["70%", "70%"],
+                            label: {
+                                normal: {
+                                    show: false,
+                                },
+                            },
+                            data: [
+                                {
+                                    value: 9,
+                                    name: "",
+                                    itemStyle: {
+                                        normal: {
+                                            borderWidth: 3,
+                                            borderColor: "#152c65",
+                                        },
+                                    },
+                                },
+                            ],
+                        },
+                    ],
+                }
+                if(this.fn){
+                    this.option=this.fn(this.option);
+                }
+                chChart.setOption(this.option);
+                window.onresize = chChart.resize;
+            })
+        },
+    }
+};
+</script>

src/pages/components/JobWorkerDialog.vue

@@ -0,0 +1,115 @@
+<template>
+    <MyDialog v-if="show" v-model="show" width="1600px" height="850px" class="job-worker-dialog">
+        <template slot="title">在岗人数({{ cnt}})</template>        
+        <el-table :data="tableData" class="mytable"  max-height="750" style="width: 100%;background: transparent;"  ref="fbsubordinateUnit" :show-summary="tableData.length>1">
+      <el-table-column label="项目名称" align="left" prop="projectName" />
+      <el-table-column label="部门" align="left" prop="deptName" ></el-table-column>
+      <el-table-column label="劳务人数" align="center" prop="servicePersonnel" />      
+      <el-table-column label="监理人数" align="center" prop="supervisorPersonnel" />
+      <el-table-column label="总包人数" align="center" prop="contractorPersonnel" />           
+        </el-table>
+       
+        <el-pagination  layout="total,prev, pager, next" :hide-on-single-page="true" @current-change="handleCurrentChange" :total="total"  :page-size="size"  :current-page.sync="index" class="bg-pagination"></el-pagination>
+
+    </MyDialog>
+</template>
+
+<script>
+
+import MyDialog from '../components/MyDialog'
+export default {
+    components: {
+        MyDialog,
+    },
+    name: 'JhbigscreenIndexDlg1',
+
+    data() {
+        return {
+            show: false,
+            tableData: [],
+            projectId:0,
+            deptId:0,
+            size:10,
+            index:1,
+            total:0,
+            nav:1,
+            cnt:0,
+        };
+    },
+
+    mounted() {
+       
+    },
+
+    methods: {
+        handleCurrentChange(n){
+            this.index=n;
+            this.loadData();
+        },
+        doNav(n){
+            this.nav=n;
+            this.index=1;
+            this.loadData();
+        },
+        showDialog(data) {
+            this.projectId=data?.projectId||0;
+            this.deptId=data?.deptId||0;
+            this.size=10;
+            this.index=1;
+            this.loadData();
+            this.show = true
+        },
+        loadData(){
+            let postData={
+                projectId:this.projectId,
+                deptId:this.deptId,               
+                id:this.nav
+            }
+            this.$api.attendance.selectList(postData,this.index,this.size).then(d=>{                
+                let cnt=0;
+                this.total=(d.total||0)                
+                this.tableData=(d.rows||[]).map(it=>{                    
+                    cnt+=(it.servicePersonnel||0);
+                    cnt+=(it.supervisorPersonnel||0);
+                    cnt+=(it.contractorPersonnel||0);
+                    return it;
+                });
+                this.cnt=cnt;
+            })
+        }
+    },
+};
+</script>
+
+<style lang="less" scoped>
+.mytable{
+    /deep/ th .cell{
+        color: aquamarine;
+    }
+}
+.job-worker-dialog{
+   /deep/ .quality-table {
+    .el-table__footer-wrapper td{
+        background: transparent;
+        background-image: none !important;        
+        border-bottom:solid 1px rgba(60,170,255,0.3);
+    }
+    .el-table .el-table__row{
+        background-image: none !important;
+        td{
+            border-bottom:solid 1px rgba(60,170,255,0.3);
+        }
+    }
+}
+}
+</style>
+<style lang="less">
+.job-worker-dialog{
+ .popup-project-introduction-min {
+        transform: translateY(100px);
+        .bg-pagination{
+            margin-top:20px;
+        }
+ }
+}
+</style>

src/pages/index.vue

@@ -34,8 +34,8 @@
                                 <div :class="qualityNav == 0 ? 'active' : ''" @click="qualityNavClick(0)">安全管理</div>
                                 <div :class="qualityNav == 1 ? 'active' : ''" @click="qualityNavClick(1)">质量管理</div>
                             </div>
-                            <project-overview-chart :sp="'\n'" :maintitle="qualityNavTotal" :legend-opt="legendOpt2"
+                            <project-overview-chart :sp="'\n'" :maintitle="qualityNavTotal" :legend-opt="legendOpt2" txtTop="12"
-                                :key="elKey" :typedata="dangersDatas" :text="qualityNavTitle" :height="260"
+                                :key="elKey" :typedata="dangersDatas" :text="qualityNavTitle" :height="260" gifTop="77px"
                                 style="top:-30px"></project-overview-chart>
                         </module-one-1-1>
                     </el-col>
@@ -224,8 +224,6 @@
 </template>
 <script>
 import '../components/module/module-one-2-1'
-import '../components/background_video'
-import '../components/project-overview-chart'
 import '../components/rank-chart'
 import '../components/staff-survey-chart'
 import indexDlg1 from './index/indexDlg1'

src/pages/init.js

@@ -9,6 +9,7 @@ import { Loading } from 'element-ui';
 import BorderBox6 from './components/BorderBox6.vue'
 import BorderBox1 from './components/BorderBox1.vue'
 import moduleOne11 from '../components/module/module-one-1-1.vue'
+import projectOverviewChart from '../components/project-overview-chart.vue'
 import peopleNumber from '../components/people-number.vue'
 import header from '../components/header.vue'
 Loading.install(Vue);
@@ -20,6 +21,7 @@ Vue.component("border-box6",BorderBox6)
 Vue.component("border-box1",BorderBox1)
 Vue.component("module-one-1-1",moduleOne11)
 Vue.component("people-number",peopleNumber)
+Vue.component("project-overview-chart",projectOverviewChart)
 Vue.prototype.$api=Api;
 Vue.prototype.$bus=vue;
 Vue.prototype.$apiPath="/jhapi"

src/pages/projectDetail.vue

@@ -84,7 +84,7 @@
                                     <div :class="infoNav == 1 ? 'active' : ''" @click="onWarningInfoNav(1, '今日出勤')">今日出勤
                                     </div>
                                 </div>
-                                <img src="images/icon2001.png" v-if="infoNav == 1" style="position: absolute;cursor: pointer;right: 20px;top: 48px;"
+                                <img src="images/icon2001.png"  style="position: absolute;cursor: pointer;right: 20px;top: 48px;"
                                 @click="doShowAttendanceDetail">
                                 <el-row :key="elDeptWorks">
                                     <el-col :span="8">
@@ -612,22 +612,23 @@
             </div>        
         <project-info-dlg ref="prjInfoDlg"></project-info-dlg>
         <AttendanceDetailDialog ref="attDetailDlg"></AttendanceDetailDialog>
+        <JobWorkerDialog ref="jobWorkerdlg"></JobWorkerDialog>
     </div>
 </template>
 
 <script>
 import '../components/module/module-one-1-2'
-import '../components/background_video'
 import '../components/staff-survey-chart'
 import mapModle from './detail/mapModle.vue'
 import MonitAndWarning from './components/MonitAndWarning.vue'
 import projectInfoDlg from './detail/projectInfoDlg.vue'
 import debounce from 'lodash.debounce'
 import AttendanceDetailDialog from './components/AttendanceDetailDialog.vue'
+import JobWorkerDialog from './components/JobWorkerDialog.vue'
 export default {
     components: {
         MonitAndWarning, projectInfoDlg,
-        mapModle,AttendanceDetailDialog
+        mapModle,AttendanceDetailDialog,JobWorkerDialog
     },
     data() {
         return {
@@ -787,13 +788,17 @@ export default {
         }
     },
     methods: {
-        doShowAttendanceDetail(){
+        doShowAttendanceDetail(){            
             let data={
                 deptId:this.dept.id||0,
                 projectId:this.project.id||0,
                 attendanceTime: this.$dt(new Date()).format("YYYY-MM-DD")
             }
-            this.$refs.attDetailDlg.showDialog(data);
+            if(this.infoNav == 1){
+                this.$refs.attDetailDlg.showDialog(data);
+            }else{
+                this.$refs.jobWorkerdlg.showDialog(data);
+            }
         },
         initMe(){
             this.project=this.$root.project||{};

src/pages/projectEngin.vue

@@ -34,7 +34,7 @@
                         <img src="images/icon2001.png" style="position: absolute;cursor: pointer;right: 20px;top: 32px;z-index:9;" @click="doUnitDlg">
                         <project-overview-chart :key="elChart2" :fn="changeChart2" :sp="'\n'" :maintitle="flowTotal" :legend-opt="legendOpt2"
                                 :typedata="chart2Data" :text="flowTitle" :height="280"
-                                style="top:0px"></project-overview-chart>
+                                txtTop="52" gifTop="90px"     style="top:0px"></project-overview-chart>
                     </module-one-1-1>
                     <module-one-1-1 label="集团期刊"  style="position: relative;">
                         <imageItem :images="periodicalList" v-if="periodicalList.length>0 && !loading" mode="periodical"></imageItem>
@@ -76,10 +76,8 @@
 
 <script>
 import '../components/module/module-one-1-2'
-import '../components/background_video'
 import '../components/staff-survey-chart'
 import '../components/chart-bar'
-import '../components/project-overview-chart'
 import BorderBox6 from './components/BorderBox6.vue'
 import debounce from 'lodash.debounce'
 import imageItem from './engin/enginImageItems.vue'

src/pages/projectProgress.vue

@@ -363,7 +363,6 @@
 <script>
 import '../components/module/module-one-1-2'
 import '../components/module/module-one-3-1'
-import '../components/background_video'
 import '../components/staff-survey-chart'
 import '../components/idle-list-chart'
 import '../components/screen-select'

src/pages/projectQuality.vue

@@ -210,8 +210,6 @@
 <script>
 
 import '../components/module/module-one-3-1'
-import '../components/background_video'
-import '../components/project-overview-chart'
 import '../components/project-overview-chart2'
 import '../components/rank-chart'
 import '../components/idle-list-chart'

src/pages/projectSafety.vue

@@ -274,8 +274,6 @@
 
 import '../components/module/module-one-2-1'
 import '../components/module/module-one-3-1'
-import '../components/background_video'
-import '../components/project-overview-chart'
 import '../components/project-overview-chart2'
 import '../components/rank-chart'
 import '../components/staff-survey-chart'

src/pages/projectVideo.vue

@@ -182,7 +182,6 @@ import '../components/module/module-one-2-1'
 import '../components/module/module-one-3-1'
 import '../components/module/module-one-0-5'
 import '../components/module/module-one-video'
-import '../components/background_video'
 import '../components/staff-survey-chart'
 import '../components/classify-bar'
 import '../components/amplify/shipinguanli/amplify-spjk'

src/pages/toAIVideoProject.vue

@@ -22,11 +22,11 @@
                                 <span>{{overviewTotal}}</span> 次
                             </div>
                          </div></div>
-                        <project-overview-chart :key="overviewDay" :sp="''"
+                        <project-overview-chart :key="overviewDay" :sp="''"  txtTop="12" gifTop="70px" 
                             :maintitle="overviewTotalDay" :legend-opt="legendOpt2" :typedata="typeDistributionDataDay"
                             :text="overviewTextDay" :height="250"></project-overview-chart>
 
-                        <project-overview-chart :key="overview" :sp="''"
+                        <project-overview-chart :key="overview" :sp="''"  txtTop="12" gifTop="70px" 
                         :maintitle="overviewTotal" :legend-opt="legendOpt1" :typedata="typeDistributionData"
                         :text="overviewText" :height="250"></project-overview-chart>
                     </module-one-2-1>
@@ -133,11 +133,9 @@ import '../components/module/module-one-2-1'
 import '../components/module/module-one-3-1'
 import '../components/module/module-one-0-5'
 import '../components/module/module-one-video'
-import '../components/background_video'
 import '../components/staff-survey-chart'
 import '../components/classify-bar'
 import '../components/amplify/shipinguanli/amplify-spjk'
-import '../components/project-overview-chart'
 import '../components/rank-chart'
 import debounce from 'lodash.debounce'
 import gsap from 'gsap'