jhbigscreen/src/pages/projectEngin.vue

<template>
    <div class="project-engin-index">
         <!--大屏背景-->
         <background-video></background-video>
        <!--大屏内容-->
        <div class="screen-content-max">
            <screen-header :nav="7" @itemdata="onItemData"></screen-header>
        
        <div class="screen-content">
            <el-row>
                <el-col :span="8">
                    <module-one-1-1 label="现场管理标准化" style="position: relative;">
                        <imageItem :images="list1" v-if="list1.length>0 && !loading"></imageItem>
                        <div v-if="list1.length==0 && !loading" style="text-align: center;margin-top: 40px;">
                            <img src="images/nodata.png" style="width: 240px;">
                            <div style="text-align: center;">暂无数据</div>
                        </div>
                    </module-one-1-1>
                    <module-one-1-1 label="作业标准" style="position: relative;">
                        <imageItem :images="list2" v-if="list2.length>0 && !loading"></imageItem>
                        <div v-if="list2.length==0 && !loading" style="text-align: center;margin-top: 40px;">
                            <img src="images/nodata.png" style="width: 240px;">
                            <div style="text-align: center;">暂无数据</div>
                        </div>
                    </module-one-1-1>
                    <module-one-1-1 label="安全技术标准" style="position: relative;">
                        <imageItem :images="list3" v-if="list3.length>0 && !loading"></imageItem>
                        <div v-if="list3.length==0 && !loading" style="text-align: center;margin-top: 40px;">
                            <img src="images/nodata.png" style="width: 240px;">
                            <div style="text-align: center;">暂无数据</div>
                        </div>
                    </module-one-1-1>
                </el-col>
                <el-col :span="8">
                    <module-one-1-1 label="审批进度" :border="1">
                        <chart-bar :height="280" :optData="chart1Data" :fn="changeChart1" :key="elChart2"></chart-bar>
                    </module-one-1-1>
                    <module-one-1-1 label="待审批" :border="1" class="chart2">
                        <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>
                    </module-one-1-1>
                    <module-one-1-1 label="集团期刊"  style="position: relative;">
                        <imageItem :images="periodicalList" v-if="periodicalList.length>0 && !loading" mode="periodical"></imageItem>
                        <div v-if="periodicalList.length==0 && !loading" style="text-align: center;margin-top: 40px;">
                            <img src="images/nodata.png" style="width: 240px;">
                            <div style="text-align: center;">暂无数据</div>
                        </div>
                    </module-one-1-1>
                </el-col>
                <el-col :span="8">
                    <module-one-1-1 label="设备管理标准"  style="position: relative;">
                        <imageItem :images="list4" v-if="list4.length>0 && !loading"></imageItem>
                        <div v-if="list4.length==0 && !loading" style="text-align: center;margin-top: 40px;">
                            <img src="images/nodata.png" style="width: 240px;">
                            <div style="text-align: center;">暂无数据</div>
                        </div>
                    </module-one-1-1>
                    <module-one-1-1 label="文明施工标准"  style="position: relative;">
                        <imageItem :images="list5" v-if="list5.length>0 && !loading"></imageItem>
                        <div v-if="list5.length==0 && !loading" style="text-align: center;margin-top: 40px;">
                            <img src="images/nodata.png" style="width: 240px;">
                            <div style="text-align: center;">暂无数据</div>
                        </div>
                    </module-one-1-1>
                    <module-one-1-1 label="环境保护标准"  style="position: relative;">
                        <imageItem :images="list6" v-if="list6.length>0 && !loading"></imageItem>
                        <div v-if="list6.length==0 && !loading" style="text-align: center;margin-top: 40px;">
                            <img src="images/nodata.png" style="width: 240px;">
                            <div style="text-align: center;">暂无数据</div>
                        </div>
                    </module-one-1-1>
                </el-col>
            </el-row>
        </div>
    </div>
    </div>
</template>

<script>
import '../components/module/module-one-1-2'
import '../components/background_video'
import '../components/header'
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'
export default {
    name: 'JhbigscreenProjectEngin',
    components: {
        BorderBox6,
        imageItem
    },
    data() {
        return {
            elChart2:0,
            loading:true,
            index1:0,
            index2:0,
            index3:0,
            index4:0,
            index5:0,
            index6:0,
            list1:[],
            list2:[],
            list3:[],
            list4:[],
            list5:[],
            list6:[],
            chart1Data:[],
            chart2Data:[],
            legendOpt2:{
                icon: "rect",
                orient: "vertical",
                left: '70%',
                top: '0',
                itemGap: 10,
                itemWidth:20,
                itemHeight:40,
                textStyle: {
                    fontSize: 14,
                    rich: {
                        name: {
                            color: "#c3dbfd",
                            padding: [0, 2, 10, 2],
                        },
                        value: {
                            color: "#ffffff",
                            fontSize: 16,
                        },
                        percent: {
                            color: "#4676FD",
                            fontSize: 16,
                            padding: [0, 2, 0, 2],
                        },
                    },
                }          
            },
            flowTitle:'待审批',
            flowTotal:0,
            periodicalList:[]
        };
    },

    mounted() {
        this.$bus.$on("loadProjects", debounce(prjs => {
            this.prjs = prjs;
        }));
        this.$bus.$on("projectChange",debounce(res => {
            this.project = res;            
            this.loadData();
        }));
        this.$bus.$on("deptChange",debounce(dept => {
            this.dept = dept;
            this.loadData();
        }));
        this.loadPeriodical();
    },

    methods: {
        loadPeriodical(){
            this.$api.periodical.getList().then(d=>{
               this.periodicalList=(d.data||[]).map(it=>{
                    it.fileUrl=JSON.parse(it.fileUrl);
                    it.imageFile=it.imageUrl;
                    it.standardDesc=it.name;
                    return it;
               })
            });
        },
        changeChart1(opt){            
            console.log("--opt->",opt)
            //opt.xAxis.axisLabel={width:50}
            //opt.xAxis.data=this.chartInfo;
            return opt;
        },
        changeChart2(opt){
            opt.title.left=135;
            opt.title.top=20;
            opt.series[0].center=["40%","50%"];
            opt.series[1].center=["40%","50%"];
            return opt;
        },
        getProjectId(cb) {
            let func = () => {
                let prjId = this.project?.id||0;
                if (prjId == 0) {
                    if (!this.prjs||this.prjs.length == 0) {
                        setTimeout(func, 100);
                    } else {
                        cb && cb(this.prjs[1].id);
                    }
                } else {
                    cb && cb(prjId);
                }
            }
            func();
        },
        addBr(s){
            let out="";
            for(let i=0;i<s.length;i++){
                out+=s.charAt(i);
                if((i+1)%3==0 && i<s.length-2){
                    out+="\n";
                }
            }
            return out;
        },
        loadData(){
            this.getProjectId(id => {
                let ajaxs=[
                    this.$api.standard.getList(id,this.dept?.id||0),
                    this.$api.flow.groupByCategory(this.project?.id||0,this.dept?.id||0),
                    this.$api.flow.groupByUnit(this.project?.id||0,this.dept?.id||0),
                ];
                this.$api.http.all(ajaxs).then(res=>{                    
                   let d=res[0];
                   let tmps=d.data||[];
                   this.list1=tmps.filter(it=>it.standardType==1);
                   this.list2=tmps.filter(it=>it.standardType==2);
                   this.list3=tmps.filter(it=>it.standardType==3);
                   this.list4=tmps.filter(it=>it.standardType==4);
                   this.list5=tmps.filter(it=>it.standardType==5);
                   this.list6=tmps.filter(it=>it.standardType==6);
                   this.loading=false;
                   let chartData=[ ['分类', '总计', '审批中', '已完成']];
                   this.chartInfo=[];
                   (res[1].data||[]).forEach(it=>{
                    let o= {
                        title:it.taskName,
                        comp:it.assigneeId||0,
                        uncomp:it.procDefVersion||0,
                        total:0
                    }                  
                    o.total=o.comp+o.uncomp;
                    chartData.push([this.addBr(o.title),o.total,o.uncomp,o.comp])
                   })
                   this.chart1Data=chartData;
                   let tmps2=[{title:'总包单位',count:0},
                    {title:'监理单位',count:0},
                    {title:'设计单位',count:0},
                    {title:'甲方代表',count:0},
                    {title:'子公司',count:0},
                   ];
                   let objs=res[2].data||[];
                   this.flowTotal=0;
                   tmps2.forEach(it=>{
                    let o=objs.find(item=>it.title==item.taskName);
                    if(o){
                        it.count=o.assigneeId
                        this.flowTotal+=o.assigneeId;
                    }
                    it.name=it.title;
                    it.value=it.count;
                   });
                   this.chart2Data=tmps2;
                   
                   this.elChart2++;
                   console.log("-2->",this.chart2Data);
                });
            });
        },
        onItemData(e) {
            if (e.type == 1) {
                location.href = 'index.html'
            }
            this.getProjectOverview(e.id)
        },
    },
};
</script>

<style lang="less" scoped>
.project-engin-index{
    /deep/ .border-1{
        padding-left:0px;
    }
    .chart2{
        /deep/ .chart-gif{
            top:89px;
            left:196px;
        }
    }
}
</style>