Merge branch 'dev' of http://62.234.3.186:3000/sxyanzhu/jhbigscreen into dev
# Conflicts: # public/index.htmlprv
姜玉琦
commit
6478ec809d
|
|
@ -57,6 +57,9 @@
|
|||
height: 970px;
|
||||
background: url("../images/one/3x3.png") no-repeat center/100% 100%;
|
||||
}
|
||||
.screen-one-3-3.no-title{
|
||||
background: url("../images/one/3x32.png") no-repeat center/100% 100%;
|
||||
}
|
||||
.screen-one-3-4{
|
||||
height: 970px;
|
||||
background: url("../images/one/3x4.png") no-repeat center/100% 100%;
|
||||
|
|
|
|||
Binary file not shown.
|
After Width: | Height: | Size: 59 KiB |
|
|
@ -13,6 +13,29 @@ const groupByUnit=(projectId,deptId)=> {
|
|||
method: 'get'
|
||||
})
|
||||
}
|
||||
|
||||
const groupByUnitFinish=(projectId,deptId)=> {
|
||||
return request({
|
||||
url: `bgscreen/flow/groupByUnitFinish?projectId=${projectId}&deptId=${deptId}`,
|
||||
method: 'get'
|
||||
})
|
||||
}
|
||||
|
||||
const groupByUnitTotal=(projectId,deptId)=> {
|
||||
return request({
|
||||
url: `bgscreen/flow/groupByUnitTotal?projectId=${projectId}&deptId=${deptId}`,
|
||||
method: 'get'
|
||||
})
|
||||
}
|
||||
|
||||
const groupByProject=()=> {
|
||||
return request({
|
||||
url: `bgscreen/flow/groupByProject`,
|
||||
method: 'get'
|
||||
})
|
||||
}
|
||||
|
||||
|
||||
const listByUnit=(projectId,deptId,unit,pageNum,pageSize)=>{
|
||||
return request({
|
||||
url: `bgscreen/flow/listByUnit?pageNum=${pageNum}&pageSize=${pageSize}`,
|
||||
|
|
@ -39,6 +62,9 @@ const listByState=(projectId,deptId,state,pageNum,pageSize)=>{
|
|||
export default{
|
||||
groupByCategory,
|
||||
groupByUnit,
|
||||
groupByUnitFinish,
|
||||
groupByUnitTotal,
|
||||
listByUnit,
|
||||
listByState
|
||||
listByState,
|
||||
groupByProject
|
||||
}
|
||||
|
|
|
|||
|
|
@ -92,7 +92,12 @@ const getInfo=()=>{
|
|||
method:'get'
|
||||
})
|
||||
}
|
||||
|
||||
const listPhotography=id=>{
|
||||
return request({
|
||||
url: `bgscreen/photography/listPhotography?projectId=${id}`,
|
||||
method: 'get'
|
||||
});
|
||||
}
|
||||
|
||||
export default{
|
||||
findProjectByDept,
|
||||
|
|
@ -102,7 +107,8 @@ export default{
|
|||
groupByCategory,
|
||||
groupByLevel,
|
||||
getProjectUser,
|
||||
getInfo
|
||||
getInfo,
|
||||
listPhotography
|
||||
}
|
||||
|
||||
|
||||
|
|
|
|||
|
|
@ -7,6 +7,25 @@ const getList=(projectId,deptId)=> {
|
|||
})
|
||||
}
|
||||
|
||||
export default{
|
||||
getList
|
||||
const groupByType=data=>{
|
||||
return request({
|
||||
url:'bgscreen/standard/groupByType',
|
||||
method:'post',
|
||||
data:data
|
||||
})
|
||||
}
|
||||
|
||||
|
||||
const groupByProject=()=>{
|
||||
return request({
|
||||
url:'bgscreen/standard/groupByProject',
|
||||
method:'get'
|
||||
})
|
||||
}
|
||||
|
||||
|
||||
export default{
|
||||
getList,
|
||||
groupByType,
|
||||
groupByProject
|
||||
}
|
||||
|
|
|
|||
Binary file not shown.
|
After Width: | Height: | Size: 806 B |
|
|
@ -54,7 +54,7 @@ Vue.component("chart-bar", {
|
|||
dataset: {
|
||||
source: this.optData
|
||||
},
|
||||
xAxis: { type: 'category' },
|
||||
xAxis: { type: 'category' , axisLabel: {color:"#fff"}},
|
||||
yAxis: {},
|
||||
series: [{ type: 'bar' }, { type: 'bar' }, { type: 'bar' }]
|
||||
}
|
||||
|
|
|
|||
|
|
@ -21,7 +21,7 @@
|
|||
@click="pageJump(61, '#/video')">视频监控</button>
|
||||
<button type="button" :class="nav == 62 ? 'active' : ''" class="sub-btn"
|
||||
@click="pageJump(62, '#/aiVideo')">AI识别监控</button>
|
||||
<button v-if="1==2" type="button" :class="nav == 63 ? 'active' : ''" class="sub-btn"
|
||||
<button v-if="1==1" type="button" :class="nav == 63 ? 'active' : ''" class="sub-btn"
|
||||
@click="pageJump(63, '#/photography')">延时摄影</button>
|
||||
</div>
|
||||
</div>
|
||||
|
|
@ -188,7 +188,7 @@ export default {
|
|||
return it;
|
||||
})]
|
||||
}
|
||||
this.deptChange();
|
||||
this.deptChange((()=>{}));
|
||||
});
|
||||
}
|
||||
this.$root.isTypeBuser = this.isTypeBuser;
|
||||
|
|
@ -268,11 +268,11 @@ export default {
|
|||
this.loadProject(true);
|
||||
}
|
||||
},
|
||||
deptChange() {
|
||||
deptChange(cb) {
|
||||
if(!this.dept1){
|
||||
if(this.depts.length>0){
|
||||
this.dept1=this.depts[0].text;
|
||||
this.loadProject(true);
|
||||
this.loadProject(true,cb);
|
||||
}
|
||||
}
|
||||
let tmps = this.depts.filter(d => d.text == this.dept1);
|
||||
|
|
@ -331,7 +331,7 @@ export default {
|
|||
this.deptChange();
|
||||
this.loadProject();
|
||||
},
|
||||
loadProject(init) {
|
||||
loadProject(init,cb) {
|
||||
if (this.isTypeBuser) {
|
||||
return;
|
||||
}
|
||||
|
|
@ -348,6 +348,9 @@ export default {
|
|||
} else {
|
||||
this.setScreenLiSel2(null);
|
||||
}
|
||||
if(cb){
|
||||
cb();
|
||||
}
|
||||
});
|
||||
},
|
||||
setScreenLiSel2(item, init) {
|
||||
|
|
|
|||
|
|
@ -2,7 +2,7 @@ import Vue from 'vue'
|
|||
Vue.component('module-one-3-3', {
|
||||
template:`
|
||||
<div class="screen-module">
|
||||
<div class="screen-one-3-3">
|
||||
<div class="screen-one-3-3" :class="notitle?'no-title':''">
|
||||
<div class="module-title"><span>{{label}}</span></div>
|
||||
<slot></slot>
|
||||
</div>
|
||||
|
|
@ -11,6 +11,9 @@ Vue.component('module-one-3-3', {
|
|||
props: {
|
||||
label:{
|
||||
type:String
|
||||
},
|
||||
notitle:{
|
||||
type:Boolean
|
||||
}
|
||||
},
|
||||
|
||||
|
|
|
|||
|
|
@ -0,0 +1,57 @@
|
|||
<template>
|
||||
<div class='engin-chart1' style="position: relative" >
|
||||
<div :style="{ 'height': height + 'px' }" ref="warningPieChart">
|
||||
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
export default {
|
||||
props: {
|
||||
fn: {
|
||||
type: Function
|
||||
},
|
||||
height: {
|
||||
type: Number
|
||||
}
|
||||
},
|
||||
data() {
|
||||
return {
|
||||
options:{},
|
||||
opt:null
|
||||
};
|
||||
},
|
||||
mounted() {
|
||||
|
||||
},
|
||||
methods: {
|
||||
init(opt) {
|
||||
this.opt=opt;
|
||||
this.getChartData()
|
||||
},
|
||||
getChartData() {
|
||||
//品类金额占比 饼图
|
||||
var chChartPie = echarts.init(this.$refs.warningPieChart);
|
||||
this.echartPie(chChartPie)
|
||||
},
|
||||
echartPie(chChart) {
|
||||
let newPromise = new Promise((resolve) => {
|
||||
resolve()
|
||||
})
|
||||
|
||||
//然后异步执行echarts的初始化函数
|
||||
newPromise.then(() => {
|
||||
this.option = {
|
||||
...this.opt||{}
|
||||
}
|
||||
if (this.fn) {
|
||||
this.option = this.fn(this.option);
|
||||
}
|
||||
chChart.setOption(this.option);
|
||||
window.onresize = chChart.resize;
|
||||
})
|
||||
},
|
||||
},
|
||||
};
|
||||
</script>
|
||||
|
|
@ -277,9 +277,9 @@ export default {
|
|||
icon: "rect",
|
||||
orient: "horizontal",
|
||||
left: '50%',
|
||||
top: '0',
|
||||
itemGap: 0,
|
||||
|
||||
top: '10%',
|
||||
itemGap: 20,
|
||||
itemHeight:30,
|
||||
textStyle: {
|
||||
padding:[0,0,2,0],
|
||||
fontSize: 10,
|
||||
|
|
@ -611,7 +611,7 @@ export default {
|
|||
roleType: 0
|
||||
};
|
||||
this.$api.problemmodify.safetySummary(postData).then(d => {
|
||||
this.dangersDatas = (d || []).map(it => {
|
||||
let tmps= (d || []).map(it => {
|
||||
return {
|
||||
text: it.problemArea,
|
||||
prop: '0.0',
|
||||
|
|
@ -619,6 +619,8 @@ export default {
|
|||
value: +it.roleType || 0
|
||||
}
|
||||
});
|
||||
tmps.splice(6)
|
||||
this.dangersDatas =tmps;
|
||||
let sum = 0;
|
||||
this.dangersDatas.forEach(it => {
|
||||
sum += it.value * 1;
|
||||
|
|
@ -633,7 +635,7 @@ export default {
|
|||
};
|
||||
this.qualityNavTitle = "质量隐患总数";
|
||||
this.$api.problemmodify.qualitySummary(postData).then(d => {
|
||||
this.dangersDatas = (d || []).map(it => {
|
||||
let tmps = (d || []).map(it => {
|
||||
return {
|
||||
text: it.problemArea,
|
||||
prop: '0.0',
|
||||
|
|
@ -641,6 +643,8 @@ export default {
|
|||
value: +it.roleType || 0
|
||||
}
|
||||
});
|
||||
tmps.splice(6)
|
||||
this.dangersDatas=tmps;
|
||||
let sum = 0;
|
||||
this.dangersDatas.forEach(it => {
|
||||
sum += it.value * 1;
|
||||
|
|
|
|||
|
|
@ -0,0 +1,216 @@
|
|||
<template>
|
||||
<div class="prj-photography-main">
|
||||
<div class="screen-content">
|
||||
<el-row>
|
||||
<el-col :span="6">
|
||||
<module-one-3-1 label="延时摄影列表">
|
||||
<div class="left-list scroll">
|
||||
<template v-if="dataList && dataList.length>0">
|
||||
<el-collapse v-model="activeNames" >
|
||||
<el-collapse-item v-for="(it, idx) in dataList" :key="idx" :name="it.videoDate">
|
||||
<template slot="title">
|
||||
<div style="position:relative;padding-left:20px;width: 100%;">
|
||||
<span>{{ it.videoDate }}</span>
|
||||
<i class="header-icon el-icon-camera-solid" @click.stop="playVideo(it)"
|
||||
style="position: absolute;right: 30px;top: 10px;font-size: 30px;"></i>
|
||||
</div>
|
||||
</template>
|
||||
<div class="img-items">
|
||||
<div v-for="(item, index) in it.images" :key="index" class="img-item">
|
||||
<el-image :src="item.url + '.min.jpg'" style="width: 90%;"
|
||||
:preview-src-list="[item.url]" />
|
||||
<div class="div-date">{{ item.date }}</div>
|
||||
</div>
|
||||
</div>
|
||||
</el-collapse-item>
|
||||
</el-collapse>
|
||||
</template>
|
||||
<div v-else style="text-align: center;" class="div-no-data">
|
||||
<img src="images/nodata.png" style="width: 120px;">
|
||||
<div style="text-align: center;font-size: 12px;color:#888;">暂无数据</div>
|
||||
</div>
|
||||
</div>
|
||||
</module-one-3-1>
|
||||
</el-col>
|
||||
<el-col :span="18" class="no-title">
|
||||
<module-one-3-3 label="" :notitle="true">
|
||||
<template v-if="info">
|
||||
<div class="right-title">
|
||||
<span class="sp-title">{{info.videoDate }}</span>
|
||||
</div>
|
||||
<video controls v-if="info">
|
||||
<source :src="info.videoUrl" type="video/mp4" />
|
||||
您的浏览器不支持Video标签。
|
||||
</video>
|
||||
</template>
|
||||
<div v-else style="text-align: center;" class="div-no-data">
|
||||
<img src="images/nodata.png" style="width: 120px;">
|
||||
<div style="text-align: center;font-size: 12px;color:#888;">暂无数据</div>
|
||||
</div>
|
||||
</module-one-3-3>
|
||||
</el-col>
|
||||
</el-row>
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import '../components/module/module-one-3-1'
|
||||
import '../components/module/module-one-3-3'
|
||||
import debounce from 'lodash.debounce'
|
||||
export default {
|
||||
name: 'JhbigscreenPhotography',
|
||||
|
||||
data() {
|
||||
return {
|
||||
prj: {},
|
||||
prjs: [],
|
||||
dataList: [],
|
||||
activeNames: [],
|
||||
info: null,
|
||||
};
|
||||
},
|
||||
|
||||
mounted() {
|
||||
this.$bus.$on("loadProjects", debounce(prjs => {
|
||||
this.prjs = prjs;
|
||||
}));
|
||||
this.$bus.$on("projectChange", debounce(res => {
|
||||
this.prj = res;
|
||||
this.loadData();
|
||||
}));
|
||||
if (this.$root.hasInitHeader) {
|
||||
this.initMe();
|
||||
}
|
||||
},
|
||||
|
||||
methods: {
|
||||
playVideo(it){
|
||||
this.info=it;
|
||||
},
|
||||
loadData() {
|
||||
this.info=null;
|
||||
this.getProjectId(id => {
|
||||
this.$api.project.listPhotography(id).then(d => {
|
||||
this.dataList = (d.data || []).map(it => {
|
||||
it.images = this.$tryToJson(it.imageUrl);
|
||||
return it;
|
||||
})
|
||||
if (this.dataList.length > 0) {
|
||||
this.activeNames = [this.dataList[0].videoDate];
|
||||
this.info = this.dataList[0];
|
||||
}
|
||||
})
|
||||
|
||||
});
|
||||
},
|
||||
initMe() {
|
||||
this.project = this.$root.project || {};
|
||||
this.prjs = this.$root.projects || [];
|
||||
this.loadData();
|
||||
},
|
||||
getProjectId(cb) {
|
||||
let func = () => {
|
||||
let prjId = this.prj?.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();
|
||||
},
|
||||
},
|
||||
};
|
||||
</script>
|
||||
|
||||
<style lang="less" scoped>
|
||||
.prj-photography-main {
|
||||
.div-no-data{
|
||||
text-align: center;
|
||||
height: 600px;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
}
|
||||
.no-title {
|
||||
/deep/ .screen-one-3-3 {
|
||||
background-image: none;
|
||||
border: solid 1px #409eff5c;
|
||||
.module-title{
|
||||
display: none;
|
||||
}
|
||||
.right-title{
|
||||
height: 200px;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center
|
||||
}
|
||||
.sp-title{
|
||||
display: inline-block;
|
||||
line-height: 72px;
|
||||
padding: 0px 40px;
|
||||
font-size: 40px;
|
||||
background-size: 100% 100%;
|
||||
background-image: url('../assets/images/bgphoto.png');
|
||||
}
|
||||
video{
|
||||
width: 100%;
|
||||
height: calc(100% - 201px);
|
||||
}
|
||||
}
|
||||
}
|
||||
.left-list{
|
||||
max-height: calc(100% - 40px);
|
||||
overflow-y: auto;
|
||||
&::-webkit-scrollbar {
|
||||
width: 4px;
|
||||
height: 4px;
|
||||
}
|
||||
}
|
||||
/deep/ .screen-one-3-1 {
|
||||
.el-collapse {
|
||||
border: none;
|
||||
margin-top: 4px;
|
||||
|
||||
.el-collapse-item {}
|
||||
|
||||
.el-collapse-item__header {
|
||||
background-color: #097fca2e;
|
||||
color: #089fff;
|
||||
border: none;
|
||||
}
|
||||
|
||||
.el-collapse-item__content {
|
||||
padding-bottom: 12px;
|
||||
}
|
||||
|
||||
.el-collapse-item__wrap {
|
||||
background-color: transparent;
|
||||
border: none;
|
||||
.img-item {
|
||||
margin-top: 8px;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
flex-direction: column;
|
||||
color: #fff;
|
||||
position: relative;
|
||||
|
||||
.div-date {
|
||||
width: calc(90% - 24px);
|
||||
text-align: left;
|
||||
position: absolute;
|
||||
bottom: 0px;
|
||||
background-color: #ffffff38;
|
||||
padding-left: 24px;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}</style>
|
||||
|
|
@ -3,79 +3,84 @@
|
|||
<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 :label="label1" style="position: relative;">
|
||||
<enginChart ref="chart1" :height="300"></enginChart>
|
||||
</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>
|
||||
<module-one-2-1 label="作业标准" style="position: relative;">
|
||||
<div class="scroll" style="max-height: 580px;overflow-y: auto;margin-top: 20px;">
|
||||
<table class="tb-list1">
|
||||
<tr>
|
||||
<th>排名</th>
|
||||
<th>项目名称</th>
|
||||
<th>上传数量</th>
|
||||
<th>上传占比</th>
|
||||
</tr>
|
||||
<tr v-for="(it, idx) in list1" :key="idx">
|
||||
<td>{{ it.no }}</td>
|
||||
<td>{{ it.name }}</td>
|
||||
<td>{{ it.value }}</td>
|
||||
<td>{{ it.percent }}%</td>
|
||||
</tr>
|
||||
</table>
|
||||
</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>
|
||||
</module-one-2-1>
|
||||
</el-col>
|
||||
<el-col :span="8">
|
||||
<module-one-1-1 label="审批进度" :border="1" style="position: relative;">
|
||||
<img src="images/icon2001.png" style="position: absolute;cursor: pointer;right: 20px;top: 32px;z-index: 9;" @click="doStateDlg">
|
||||
<module-one-1-1 :label="lablel3" :border="1" style="position: relative;">
|
||||
<img src="images/icon2001.png"
|
||||
style="position: absolute;cursor: pointer;right: 20px;top: 32px;z-index: 9;"
|
||||
@click="doStateDlg">
|
||||
<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" style="position: relative;">
|
||||
<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"
|
||||
txtTop="52" gifTop="90px" style="top:0px"></project-overview-chart>
|
||||
<module-one-1-1 label="项目审批排名" :border="1" class="chart2" style="position: relative;">
|
||||
<div class="scroll" style="margin-top: 30px;max-height: 240px;overflow-y: auto;">
|
||||
<table class="tb-list1">
|
||||
<tr>
|
||||
<th>排名</th>
|
||||
<th>申请项目</th>
|
||||
<th>申请数量</th>
|
||||
<th>申请占比</th>
|
||||
</tr>
|
||||
<tr v-for="(it, idx) in list1" :key="idx">
|
||||
<td>{{ it.no }}</td>
|
||||
<td>{{ it.name }}</td>
|
||||
<td>{{ it.value }}</td>
|
||||
<td>{{ it.percent }}%</td>
|
||||
</tr>
|
||||
</table>
|
||||
</div>
|
||||
</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;">
|
||||
<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;"
|
||||
:key="elList4">
|
||||
<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 :label="label6" style="position: relative;">
|
||||
<enginChart ref="chart3" :height="300"></enginChart>
|
||||
</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 :label="label7" style="position: relative;">
|
||||
<enginChart ref="chart4" :height="300"></enginChart>
|
||||
</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 :label="label8" style="position: relative;">
|
||||
<enginChart ref="chart5" :height="300"></enginChart>
|
||||
</module-one-1-1>
|
||||
</el-col>
|
||||
</el-row>
|
||||
</div>
|
||||
<unitDialog ref="unitDlg"></unitDialog>
|
||||
<stateDialog ref="stateDlg"></stateDialog>
|
||||
</el-row>
|
||||
</div>
|
||||
<unitDialog ref="unitDlg"></unitDialog>
|
||||
<stateDialog ref="stateDlg"></stateDialog>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import '../components/module/module-one-1-2'
|
||||
import '../components/module/module-one-2-1'
|
||||
import '../components/staff-survey-chart'
|
||||
import '../components/chart-bar'
|
||||
import BorderBox6 from './components/BorderBox6.vue'
|
||||
|
|
@ -83,60 +88,42 @@ import debounce from 'lodash.debounce'
|
|||
import imageItem from './engin/enginImageItems.vue'
|
||||
import unitDialog from './engin/flowDetailByUnitDialog.vue'
|
||||
import stateDialog from './engin/flowDetailByStateDialog.vue'
|
||||
import enginChart from './engin/enginChart.vue'
|
||||
import { tryToJson } from '@/utils/tools'
|
||||
export default {
|
||||
name: 'JhbigscreenProjectEngin',
|
||||
components: {
|
||||
BorderBox6,
|
||||
imageItem,unitDialog,stateDialog
|
||||
imageItem, unitDialog, stateDialog, enginChart
|
||||
},
|
||||
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:[]
|
||||
label1: '项目标准化管理',
|
||||
lablel3: '审批进度',
|
||||
label6: '审批总数',
|
||||
label7: '已完成审批',
|
||||
label8: '待审批',
|
||||
elChart2: 0,
|
||||
elChart3: 0,
|
||||
elList4: 0,
|
||||
loading: true,
|
||||
index1: 0,
|
||||
index2: 0,
|
||||
index3: 0,
|
||||
index4: 0,
|
||||
index5: 0,
|
||||
index6: 0,
|
||||
list1: [],
|
||||
list2: [],
|
||||
list3: [],
|
||||
list4: [],
|
||||
list5: [],
|
||||
list6: [],
|
||||
chart1Data: [],
|
||||
chart2Data: [],
|
||||
flowTitle: '待审批',
|
||||
flowTotal: 0,
|
||||
periodicalList: []
|
||||
};
|
||||
},
|
||||
|
||||
|
|
@ -144,64 +131,70 @@ export default {
|
|||
this.$bus.$on("loadProjects", debounce(prjs => {
|
||||
this.prjs = prjs;
|
||||
}));
|
||||
this.$bus.$on("projectChange",debounce(res => {
|
||||
this.project = res;
|
||||
this.$bus.$on("projectChange", debounce(res => {
|
||||
this.project = res;
|
||||
this.loadData();
|
||||
}));
|
||||
this.$bus.$on("deptChange",debounce(dept => {
|
||||
this.$bus.$on("deptChange", debounce(dept => {
|
||||
this.dept = dept;
|
||||
this.loadData();
|
||||
}));
|
||||
this.loadPeriodical();
|
||||
if(this.$root.hasInitHeader){
|
||||
if (this.$root.hasInitHeader) {
|
||||
this.initMe();
|
||||
}
|
||||
},
|
||||
|
||||
methods: {
|
||||
initMe(){
|
||||
this.project=this.$root.project||{};
|
||||
this.dept=this.$root.dept||{};
|
||||
this.prjs=this.$root.projects||[];
|
||||
initMe() {
|
||||
this.project = this.$root.project || {};
|
||||
this.dept = this.$root.dept || {};
|
||||
this.prjs = this.$root.projects || [];
|
||||
this.loadData();
|
||||
},
|
||||
doStateDlg(){
|
||||
doStateDlg() {
|
||||
this.$refs.stateDlg.showDialog({
|
||||
deptId:this.dept?.id||0,
|
||||
projectId:this.project?.id||0
|
||||
deptId: this.dept?.id || 0,
|
||||
projectId: this.project?.id || 0
|
||||
});
|
||||
},
|
||||
doUnitDlg(){
|
||||
doUnitDlg() {
|
||||
this.$refs.unitDlg.showDialog({
|
||||
deptId:this.dept?.id||0,
|
||||
projectId:this.project?.id||0
|
||||
deptId: this.dept?.id || 0,
|
||||
projectId: this.project?.id || 0
|
||||
});
|
||||
},
|
||||
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;
|
||||
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){
|
||||
changeChart1(opt) {
|
||||
opt.legend = {
|
||||
textStyle: {
|
||||
color: "#fff"
|
||||
}
|
||||
};
|
||||
return opt;
|
||||
},
|
||||
changeChart2(opt){
|
||||
opt.title.left=135;
|
||||
opt.title.top=20;
|
||||
opt.series[0].center=["40%","50%"];
|
||||
opt.series[1].center=["40%","50%"];
|
||||
changeChart2(opt) {
|
||||
opt.title.left = 135;
|
||||
opt.title.top = 20;
|
||||
opt.legend = {};
|
||||
opt.series[0].center = ["40%", "50%"];
|
||||
opt.series[1].center = ["40%", "50%"];
|
||||
return opt;
|
||||
},
|
||||
getProjectId(cb) {
|
||||
let func = () => {
|
||||
let prjId = this.project?.id||0;
|
||||
let prjId = this.project?.id || 0;
|
||||
if (prjId == 0) {
|
||||
if (!this.prjs||this.prjs.length == 0) {
|
||||
if (!this.prjs || this.prjs.length == 0) {
|
||||
setTimeout(func, 100);
|
||||
} else {
|
||||
cb && cb(this.prjs[1].id);
|
||||
|
|
@ -212,66 +205,324 @@ export default {
|
|||
}
|
||||
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";
|
||||
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;
|
||||
showChart1(data) {
|
||||
let tmps = data.data || [];
|
||||
let datas = tmps.map(d => (d.status || 0) * 1);
|
||||
let sum = 0;
|
||||
datas.forEach(d => {
|
||||
sum += d;
|
||||
});
|
||||
this.label1 = `项目标准化管理(${sum})`
|
||||
let lbls = tmps.map(d => d.dictLabel);
|
||||
let opt = {
|
||||
xAxis: {
|
||||
type: 'category',
|
||||
boundaryGap: false,
|
||||
data: lbls,
|
||||
axisLabel: {
|
||||
show: true,
|
||||
interval: 0,
|
||||
color: "#fff"
|
||||
}
|
||||
it.name=it.title;
|
||||
it.value=it.count;
|
||||
});
|
||||
this.chart2Data=tmps2;
|
||||
|
||||
this.elChart2++;
|
||||
},
|
||||
yAxis: {
|
||||
type: 'value'
|
||||
},
|
||||
series: [
|
||||
{
|
||||
data: datas,
|
||||
type: 'line',
|
||||
smooth: true,
|
||||
areaStyle: {
|
||||
color: "rgba(58, 145, 227, 0.68)"
|
||||
}
|
||||
}
|
||||
]
|
||||
}
|
||||
this.$refs.chart1.init(opt);
|
||||
},
|
||||
showList1(res) {
|
||||
let tmps = (res.data || []).map((d, i) => {
|
||||
return {
|
||||
id: d.projectId,
|
||||
no: i + 1,
|
||||
name: d.standardDesc,
|
||||
value: d.deptId || 0,
|
||||
percent: 0,
|
||||
}
|
||||
});
|
||||
let sum = 0;
|
||||
tmps.forEach(d => {
|
||||
sum += d.value;
|
||||
});
|
||||
if (sum > 0) {
|
||||
tmps.forEach(d => {
|
||||
d.percent = (d.value * 100.0 / sum).toFixed(2);
|
||||
});
|
||||
}
|
||||
let objs = [];
|
||||
let prjIds = this.prjs.map(d => d.id).filter(d => d > 0);
|
||||
tmps.forEach(d => {
|
||||
if (prjIds.indexOf(d.id) >= 0) {
|
||||
objs.push(d);
|
||||
}
|
||||
})
|
||||
if (this.project?.id != 0) {
|
||||
let out = objs.filter(d => d.id == this.project.id);
|
||||
if (out.length == 0) {
|
||||
this.list1 = [{ id: this.project.id, name: this.project.projectName, value: 0, percent: 0, no: '-' }];
|
||||
} else {
|
||||
this.list1 = out;
|
||||
}
|
||||
} else {
|
||||
this.list1 = objs;
|
||||
}
|
||||
},
|
||||
showChart2(res) {
|
||||
let chartData = [['分类', '总计', '审批中', '已完成']];
|
||||
this.chartInfo = [];
|
||||
let sum = 0;
|
||||
(res.data || []).forEach(it => {
|
||||
let o = {
|
||||
title: it.taskName,
|
||||
comp: it.assigneeId || 0,
|
||||
uncomp: it.procDefVersion || 0,
|
||||
total: 0
|
||||
}
|
||||
o.total = o.comp + o.uncomp;
|
||||
sum += o.total;
|
||||
chartData.push([this.addBr(o.title), o.total, o.uncomp, o.comp])
|
||||
})
|
||||
this.chart1Data = chartData;
|
||||
this.lablel3 = `审批进度 (${sum})`;
|
||||
this.elChart2++;
|
||||
},
|
||||
showList2(res) {
|
||||
let tmps = (res.data || []).map((it, idx) => {
|
||||
return {
|
||||
no: idx + 1,
|
||||
id: it.businessKey,
|
||||
name: it.businessKeyName,
|
||||
value: it.duration * 1,
|
||||
percent: 0
|
||||
}
|
||||
});
|
||||
let sum = 0;
|
||||
tmps.forEach(d => {
|
||||
sum += d.value;
|
||||
});
|
||||
if (sum > 0) {
|
||||
tmps.forEach(d => {
|
||||
d.percent = (d.value * 100.0 / sum).toFixed(2);
|
||||
});
|
||||
}
|
||||
let objs = [];
|
||||
let prjIds = this.prjs.map(d => d.id).filter(d => d > 0);
|
||||
tmps.forEach(d => {
|
||||
if (prjIds.indexOf(d.id) >= 0) {
|
||||
objs.push(d);
|
||||
}
|
||||
})
|
||||
if (this.project?.id != 0) {
|
||||
let out = objs.filter(d => d.id == this.project.id);
|
||||
if (out.length == 0) {
|
||||
this.list2 = [{ id: this.project.id, name: this.project.projectName, value: 0, percent: 0, no: '-' }];
|
||||
} else {
|
||||
this.list2 = out;
|
||||
}
|
||||
} else {
|
||||
this.list2 = objs;
|
||||
}
|
||||
},
|
||||
showList3(res) {
|
||||
this.periodicalList = (res.data || []).map(it => {
|
||||
it.fileUrl = JSON.parse(it.fileUrl);
|
||||
it.imageFile = it.imageUrl;
|
||||
it.standardDesc = it.name;
|
||||
return it;
|
||||
})
|
||||
this.elList4++;
|
||||
},
|
||||
showChart3(res) {
|
||||
let tmps = (res.data || []).map(d => {
|
||||
return {
|
||||
name: d.taskName,
|
||||
value: (d.assigneeId || 0) * 1
|
||||
}
|
||||
})
|
||||
let sum = 0;
|
||||
tmps.forEach(it => {
|
||||
sum += it.value;
|
||||
})
|
||||
let opt = {
|
||||
tooltip: {
|
||||
trigger: 'item'
|
||||
},
|
||||
legend: {
|
||||
orient: 'vertical',
|
||||
left: 'right',
|
||||
top: 'middle',
|
||||
textStyle: {
|
||||
color: "#fff"
|
||||
}
|
||||
},
|
||||
series: [
|
||||
{
|
||||
|
||||
type: 'pie',
|
||||
radius: '50%',
|
||||
data: tmps,
|
||||
label: {
|
||||
color: "#fff"
|
||||
}
|
||||
|
||||
}
|
||||
]
|
||||
};
|
||||
this.label6 = `审批总数 (${sum})`
|
||||
this.$refs.chart3.init(opt);
|
||||
},
|
||||
showChart4(res) {
|
||||
let tmps = (res.data || []).map(d => {
|
||||
return {
|
||||
name: d.taskName,
|
||||
value: (d.assigneeId || 0) * 1
|
||||
}
|
||||
})
|
||||
let sum = 0;
|
||||
tmps.forEach(it => {
|
||||
sum += it.value;
|
||||
})
|
||||
this.label7 = `已完成审批 (${sum})`
|
||||
let opt = {
|
||||
tooltip: {
|
||||
trigger: 'axis',
|
||||
axisPointer: {
|
||||
type: 'shadow'
|
||||
}
|
||||
},
|
||||
color: ['#409eff'],
|
||||
xAxis: {
|
||||
type: 'category',
|
||||
data: tmps.map(d => d.name),
|
||||
axisLabel: {
|
||||
color: "#fff"
|
||||
}
|
||||
},
|
||||
yAxis: {
|
||||
type: 'value',
|
||||
axisLabel: {
|
||||
color: "#fff"
|
||||
}
|
||||
},
|
||||
series: [
|
||||
{
|
||||
data: tmps.map(d => d.value),
|
||||
type: 'bar'
|
||||
|
||||
}
|
||||
]
|
||||
};
|
||||
this.$refs.chart4.init(opt);
|
||||
},
|
||||
showChart5(res) {
|
||||
let tmps = (res.data || []).map(d => {
|
||||
return {
|
||||
name: d.taskName,
|
||||
value: (d.assigneeId || 0) * 1,
|
||||
max: 0
|
||||
}
|
||||
})
|
||||
let sum = 0;
|
||||
let max = 10;
|
||||
tmps.forEach(it => {
|
||||
sum += it.value;
|
||||
if (it.value > max) {
|
||||
max = it.value;
|
||||
}
|
||||
})
|
||||
max = (max / 5 + 1) * 5;
|
||||
tmps.forEach(it => {
|
||||
it.max = max;
|
||||
});
|
||||
this.label8 = `待审批 (${sum})`
|
||||
let opt = {
|
||||
radar: {
|
||||
indicator: tmps,
|
||||
},
|
||||
series: [
|
||||
{
|
||||
type: 'radar',
|
||||
data: [
|
||||
{
|
||||
value: tmps.map(d=>d.max-5),
|
||||
symbol: 'rect',
|
||||
symbolSize: 12,
|
||||
lineStyle: {
|
||||
type: 'dashed'
|
||||
},
|
||||
label: {
|
||||
show: true,
|
||||
color:"#409eff"
|
||||
}
|
||||
},
|
||||
{
|
||||
value: tmps.map(d=>d.value),
|
||||
label: {
|
||||
show: true,
|
||||
color:"#fff"
|
||||
},
|
||||
areaStyle: {
|
||||
color: new echarts.graphic.RadialGradient(0.1, 0.6, 1, [
|
||||
{
|
||||
color: 'rgba(255, 145, 124, 0.1)',
|
||||
offset: 0
|
||||
},
|
||||
{
|
||||
color: 'rgba(255, 145, 124, 0.9)',
|
||||
offset: 1
|
||||
}
|
||||
])
|
||||
}
|
||||
}
|
||||
]
|
||||
}
|
||||
]
|
||||
};
|
||||
this.$refs.chart5.init(opt);
|
||||
},
|
||||
loadData() {
|
||||
this.getProjectId(id => {
|
||||
let ajaxs = [
|
||||
this.$api.standard.groupByType({ projectId: this.project?.id || 0, deptId: this.dept?.id || 0 }),
|
||||
this.$api.standard.groupByProject(),
|
||||
this.$api.flow.groupByCategory(this.project?.id || 0, this.dept?.id || 0),
|
||||
this.$api.flow.groupByProject(),
|
||||
this.$api.periodical.getList(),
|
||||
this.$api.flow.groupByUnitTotal(this.project?.id || 0, this.dept?.id || 0),
|
||||
this.$api.flow.groupByUnitFinish(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 => {
|
||||
this.showChart1(res[0]);
|
||||
this.showList1(res[1]);
|
||||
this.showChart2(res[2]);
|
||||
this.showList2(res[3]);
|
||||
this.showList3(res[4]);
|
||||
this.showChart3(res[5]);
|
||||
this.showChart4(res[6]);
|
||||
this.showChart5(res[7]);
|
||||
this.loading = false;
|
||||
});
|
||||
});
|
||||
},
|
||||
|
|
@ -286,14 +537,35 @@ export default {
|
|||
</script>
|
||||
|
||||
<style lang="less" scoped>
|
||||
.project-engin-index{
|
||||
/deep/ .border-1{
|
||||
padding-left:0px;
|
||||
.project-engin-index {
|
||||
/deep/ .border-1 {
|
||||
padding-left: 0px;
|
||||
}
|
||||
.chart2{
|
||||
/deep/ .chart-gif{
|
||||
top:89px;
|
||||
left:196px;
|
||||
|
||||
.chart2 {
|
||||
/deep/ .chart-gif {
|
||||
top: 89px;
|
||||
left: 196px;
|
||||
}
|
||||
}
|
||||
|
||||
.tb-list1 {
|
||||
margin: 12px;
|
||||
width: calc(100% - 24px);
|
||||
border-collapse: collapse;
|
||||
border: solid 1px #ffffff52;
|
||||
|
||||
th {
|
||||
font-size: 14px;
|
||||
border: solid 1px #ffffff52;
|
||||
line-height: 60px;
|
||||
}
|
||||
|
||||
td {
|
||||
font-size: 12px;
|
||||
text-align: center;
|
||||
border: solid 1px #ffffff52;
|
||||
line-height: 40px;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
|
|
|||
|
|
@ -272,6 +272,7 @@ export default {
|
|||
itemWidth:50,
|
||||
textStyle: {
|
||||
fontSize: 14,
|
||||
color: "#c3dbfd",
|
||||
rich: {
|
||||
name: {
|
||||
color: "#c3dbfd",
|
||||
|
|
|
|||
|
|
@ -46,6 +46,11 @@ const routes = [
|
|||
path: '/engin',
|
||||
name: 'engin',
|
||||
component: () => import(/* webpackChunkName: "video" */ '../pages/projectEngin.vue')
|
||||
},
|
||||
{
|
||||
path: '/photography',
|
||||
name: 'photography',
|
||||
component: () => import(/* webpackChunkName: "video" */ '../pages/photography.vue')
|
||||
}
|
||||
]
|
||||
const router = new VueRouter({
|
||||
|
|
|
|||
Loading…
Reference in New Issue