chengdandan
/
qiuwang
1
0
Fork 0
Code Issues Pull Requests Projects Releases Wiki Activity

代码提交

This commit is contained in:
lixiaobang 2023-03-22 18:03:46 +08:00
parent 55cfbc7a0a
commit d2e1cb4541
8 changed files with 1156 additions and 926 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

47
src/api/api.js
View File

@ -7,8 +7,7 @@ if (process.env.NODE_ENV === 'development') {
axios.defaults.baseURL = '/' axios.defaults.baseURL = '/'
} }
//设置公共请求头 //设置公共请求头
let access_token = JSON.parse(sessionStorage.getItem("token"))
axios.defaults.headers.common['Blade-Auth'] = access_token;
//获取token登录接口 //获取token登录接口
export const getToken = (data) => { export const getToken = (data) => {
// axios.defaults.headers.common['Authorization'] = `Basic c2FiZXI6c2FiZXJfc2VjcmV0`; // axios.defaults.headers.common['Authorization'] = `Basic c2FiZXI6c2FiZXJfc2VjcmV0`;
@ -22,6 +21,8 @@ export const getToken = (data) => {
}; };
//项目信息接口 //项目信息接口
export const getProjectInfo = (params) => { export const getProjectInfo = (params) => {
let access_token = JSON.parse(sessionStorage.getItem("token"))
axios.defaults.headers.common['Blade-Auth'] = access_token;
return axios.get('api/ems-third-party-service/project/list', return axios.get('api/ems-third-party-service/project/list',
params, params,
) )
@ -45,6 +46,48 @@ export const getProjectStatus = (params) => {
{params}, {params},
) )
}; };
//安全检查统计
export const getProjectCheckCensus = (params) => {
return axios.get('api/ems-third-party-service/project/checkCensus',
{params},
)
};
//安全检查跟踪
export const getProjectCheckInfo = (params) => {
return axios.get('api/ems-third-party-service/project/checkInfo',
{params},
)
};
//工程工期
export const getProjectDuration = (params) => {
return axios.get('api/ems-third-party-service/project/projectDuration',
{params},
)
};
//投资进度
export const getProjectInvestment = (params) => {
return axios.get('api/ems-third-party-service/project/projectInvestment',
{params},
)
};
//计划进度
export const getPlanProgress = (params) => {
return axios.get('api/ems-third-party-service/project/planProgress',
{params},
)
};
//实时进度
export const getActualProgress = (params) => {
return axios.get('api/ems-third-party-service/project/actualProgress',
{params},
)
};
//本月任务完成情况
export const getCompleteMonthStatus = (params) => {
return axios.get('api/ems-third-party-service/project/completeMonthStatus',
{params},
)
};
export function filterCompanyAPI (params) { export function filterCompanyAPI (params) {
return request({ return request({
url: '/rcm/company-credit/filterCompany', url: '/rcm/company-credit/filterCompany',

BIN
src/assets/img/centerBg.png Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 3.7 KiB

39
src/components/common/BarChart.vue
View File

@ -7,10 +7,11 @@
width="100%" width="100%"
height="100%" height="100%"
></Chart> ></Chart>
<div class="lineBox"></div> <!-- <div class="lineBox"></div> -->
</div> </div>
</template> </template>
<script> <script>
import { forEach } from 'element-resize-detector/src/collection-utils'
import Chart from '../chart.vue' import Chart from '../chart.vue'
const MAX_LABEL = 8 const MAX_LABEL = 8
export default { export default {
@ -52,6 +53,10 @@ export default {
yAxisPadding: { yAxisPadding: {
type: Array, type: Array,
default: null default: null
},
securityCheck:{
type:Array,
default:null
} }
}, },
@ -68,9 +73,16 @@ export default {
watch: { watch: {
// 监听父组件中的数据变化，重新触发Echarts // 监听父组件中的数据变化，重新触发Echarts
chartData: { // chartData: {
// deep: true,
// handler () {
// this.resetOption()
// }
// },
//安全检查数据
securityCheck: {
deep: true, deep: true,
handler () { handler (newVal) {
this.resetOption() this.resetOption()
} }
} }
@ -99,6 +111,14 @@ export default {
} }
}, },
option () { option () {
let checkTimes = [] //检查次数,
let errorTimes = [] //错误次数,
let month = [] //月
this.securityCheck.forEach((item,index) => {
checkTimes.push(item.checkTimes)
errorTimes.push(item.errorTimes)
month.push(item.month + '月')
});
const self = this const self = this
return { return {
tooltip: { tooltip: {
@ -113,7 +133,7 @@ export default {
legend: { //对图形的解释部分 legend: { //对图形的解释部分
orient: 'vertical', orient: 'vertical',
right: 28, right: 28,
y: 68, y: 60,
itemHeight: 8, itemHeight: 8,
icon:'rect', icon:'rect',
data: ['检查次数', '有问题检查次数'], data: ['检查次数', '有问题检查次数'],
@ -123,7 +143,7 @@ export default {
} }
}, },
grid: { grid: {
top: '138', top: '100',
left: '29', left: '29',
right:'28', right:'28',
bottom: '24', bottom: '24',
@ -157,7 +177,8 @@ export default {
}, },
triggerEvent: true, triggerEvent: true,
type: 'category', type: 'category',
data: this.xAxisData // data: this.xAxisData,
data: month
}, },
yAxis: { yAxis: {
name: '次数', name: '次数',
@ -194,7 +215,8 @@ export default {
series: [ series: [
{ {
name:'检查次数', name:'检查次数',
data: this.chartData, // data: this.chartData,
data:checkTimes,
type: 'bar', type: 'bar',
barGap: 0, barGap: 0,
barWidth:8, barWidth:8,
@ -202,7 +224,8 @@ export default {
}, },
{ {
name:'有问题检查次数', name:'有问题检查次数',
data: this.chartData, // data: this.chartData,
data:errorTimes,
type: 'bar', type: 'bar',
color: '#fe9b37', color: '#fe9b37',
barWidth: 8, barWidth: 8,

199
src/components/common/lineBarChart.vue
View File

@ -1,238 +1,265 @@
<template> <template>
<div style="position: relative"> <div style="position: relative">
<Chart ref="chart" :chartOption="option" :className="className" width="100%" height="100%"></Chart> <Chart
ref="chart"
:chartOption="option"
:className="className"
width="100%"
height="100%"
></Chart>
<div class="lineBox"></div> <div class="lineBox"></div>
<div class="line2Box"></div> <div class="line2Box"></div>
</div> </div>
</template> </template>
<script> <script>
import Chart from '../chart.vue' import Chart from "../chart.vue";
const MAX_LABEL = 8 const MAX_LABEL = 8;
export default { export default {
props: { props: {
className: { className: {
type: String, type: String,
default: '' default: "",
}, },
// 父组件传递过来的图表数据 // 父组件传递过来的图表数据
chartData: { chartData: {
type: Array, type: Array,
required: true required: true,
}, },
colorArray: { colorArray: {
type: Array, type: Array,
default: () => { default: () => {
return ['#84F5DE', '#56E8F2', '#4CC5F8'] return ["#84F5DE", "#56E8F2", "#4CC5F8"];
} },
}, },
yAxisName: { yAxisName: {
type: String, type: String,
default: '' default: "",
}, },
// x轴数据 // x轴数据
xAxisData: { xAxisData: {
type: Array, type: Array,
default: () => { default: () => {
return [] return [];
} },
}, },
tooltipFormatter: { tooltipFormatter: {
type: Function | String, type: Function | String,
default: null default: null,
}, },
yAxisPosition: { yAxisPosition: {
type: String, type: String,
default: 'left' default: "left",
}, },
yAxisPadding: { yAxisPadding: {
type: Array, type: Array,
default: null default: null,
} },
projectInvestment: {
type: Array,
default: null,
},
}, },
components: { components: {
Chart Chart,
}, },
data() { data() {
return { return {
tipStyle: { visibility: 'hidden', position: 'absolute', top: 0, left: 0 }, tipStyle: { visibility: "hidden", position: "absolute", top: 0, left: 0 },
tipContent: '' tipContent: "",
} };
}, },
watch: { watch: {
// 监听父组件中的数据变化，重新触发Echarts // 监听父组件中的数据变化，重新触发Echarts
chartData: { // chartData: {
// deep: true,
// handler() {
// this.resetOption()
// }
// },
projectInvestment: {
deep: true, deep: true,
handler() { handler() {
this.resetOption() this.resetOption();
} },
} },
}, },
computed: { computed: {
option() { option() {
const self = this let date = []; //时间
let total = []; //总投资
let rate = []; //环比
this.projectInvestment.forEach((item, index) => {
date.push(item.date);
total.push(item.total);
rate.push(item.rate);
});
const self = this;
return { return {
tooltip: { tooltip: {
trigger: "axis", trigger: "axis",
axisPointer: { axisPointer: {
type: "shadow", type: "shadow",
label: { label: {
show: false show: false,
} },
} },
}, },
legend: [ legend: [
{ //对图形的解释部分 {
//对图形的解释部分
left: 160, left: 160,
y: 45, y: 45,
itemHeight: 12, itemHeight: 12,
data: ['金额',], data: ["金额"],
textStyle: { textStyle: {
fontSize: 12, //字体大小 fontSize: 12, //字体大小
color: '#64D5CD', //字体颜色 color: "#64D5CD", //字体颜色
}
}, },
{ //对图形的解释部分 },
{
//对图形的解释部分
left: 231, left: 231,
y: 45, y: 45,
itemHeight: 12, itemHeight: 12,
data: ['百分比',], data: ["百分比"],
icon: 'roundRect', icon: "roundRect",
itemHeight: 2, // 粗细 itemHeight: 2, // 粗细
textStyle: { textStyle: {
fontSize: 12, //字体大小 fontSize: 12, //字体大小
color: '#64D5CD', //字体颜色 color: "#64D5CD", //字体颜色
} },
} },
], ],
grid: { grid: {
top: '80', top: "80",
left: '25', left: "25",
right: '17', right: "17",
bottom: '23', bottom: "23",
containLabel: true containLabel: true,
}, },
xAxis: { xAxis: {
axisLine: { axisLine: {
// x轴线的颜色以及宽度 // x轴线的颜色以及宽度
show: true, show: true,
lineStyle: { lineStyle: {
color: '#ffff', color: "#ffff",
height: 0 height: 0,
} },
}, },
axisTick: { axisTick: {
show: false show: false,
}, },
axisLabel: { axisLabel: {
interval: 0, // 横轴信息全部显示 interval: 0, // 横轴信息全部显示
margin: 6, // 刻度标签与轴线之间的距离 margin: 6, // 刻度标签与轴线之间的距离
align: 'center', align: "center",
fontSize: 12, // 横轴字体大小 fontSize: 12, // 横轴字体大小
color: '#D5FFFC', // 颜色 color: "#D5FFFC", // 颜色
}, },
triggerEvent: true, triggerEvent: true,
type: 'category', type: "category",
data: this.xAxisData // data: this.xAxisData
data: date,
}, },
yAxis: [ yAxis: [
{ {
name: '金额/万元', name: "金额/万元",
type: 'value', type: "value",
position: 'left', position: "left",
nameTextStyle: { nameTextStyle: {
color: '#36BAB1', color: "#36BAB1",
padding: this.yAxisPadding || [0, 0, 2, 6], padding: this.yAxisPadding || [0, 0, 2, 6],
fontSize: 12, fontSize: 12,
}, },
axisLine: { axisLine: {
show: true, show: true,
lineStyle: { lineStyle: {
color: 'white' color: "white",
}, },
}, },
splitLine: { splitLine: {
// 分割线配置 // 分割线配置
show: false, show: false,
lineStyle: { lineStyle: {
color: '#078DF0', color: "#078DF0",
opacity: 0.3 opacity: 0.3,
} },
}, },
axisLabel: { axisLabel: {
color: '#D5FFFC', color: "#D5FFFC",
fontSize: 12, fontSize: 12,
}, },
axisTick: { axisTick: {
show: false show: false,
}, },
}, },
{ {
name: '百分比%', name: "百分比%",
type: 'value', type: "value",
position: 'right', position: "right",
max: 100, max: 100,
nameTextStyle: { nameTextStyle: {
color: '#36BAB1', color: "#36BAB1",
padding: this.yAxisPadding || [0, 0, 2, 6], padding: this.yAxisPadding || [0, 0, 2, 6],
fontSize: 12, fontSize: 12,
}, },
axisLine: { axisLine: {
show: true, show: true,
lineStyle: { lineStyle: {
color: 'white' color: "white",
}, },
}, },
splitLine: { splitLine: {
// 分割线配置 // 分割线配置
show: false, show: false,
lineStyle: { lineStyle: {
color: '#078DF0', color: "#078DF0",
opacity: 0.3 opacity: 0.3,
} },
}, },
axisLabel: { axisLabel: {
color: '#D5FFFC', color: "#D5FFFC",
fontSize: 12, fontSize: 12,
}, },
axisTick: { axisTick: {
show: false show: false,
},
}, },
}
], ],
series: [ series: [
{ {
name: '金额', name: "金额",
data: this.chartData, // data: this.chartData,
type: 'bar', data: total,
type: "bar",
barWidth: 10, barWidth: 10,
color: '#0DFFFF' color: "#0DFFFF",
}, },
{ {
name: '百分比', name: "百分比",
data: this.chartData, // data: this.chartData,
data: rate,
yAxisIndex: 1, yAxisIndex: 1,
type: 'line', type: "line",
barWidth: 10, barWidth: 10,
color: '#76E679' color: "#76E679",
},
],
};
}, },
]
}
}
}, },
methods: { methods: {
resetOption() { resetOption() {
this.$refs.chart.setOption(this.option) this.$refs.chart.setOption(this.option);
}, },
},
} };
}
</script> </script>
<style scoped lang="scss"> <style scoped lang="scss">

2
src/components/common/mdScreenPie.vue
View File

@ -59,7 +59,6 @@
projectUser: { projectUser: {
deep: true, deep: true,
handler(newVal) { handler(newVal) {
console.log(newVal,'==============');
this.initCharts(newVal) this.initCharts(newVal)
} }
} }
@ -67,7 +66,6 @@
methods: { methods: {
initCharts(value) { initCharts(value) {
let myChart = this.$echarts.init(this.$refs.chart) let myChart = this.$echarts.init(this.$refs.chart)
console.log(value,'============');
var val1data2 = [{ var val1data2 = [{
value: 33, value: 33,
name: '电工', name: '电工',

158
src/components/common/pieChartUnImg.vue
View File

@ -1,7 +1,7 @@
<template> <template>
<div style="width:100%;height:100%;position: relative;"> <div style="width: 100%; height: 100%; position: relative">
<div ref="chartEvas" style="width:100%;height:100%;"></div> <div ref="chartEvas" style="width: 100%; height: 100%"></div>
<div class="boxPeople aa"> <!-- <div class="boxPeople aa">
<div class="name" style="color: #CACACA;">未开始</div> <div class="name" style="color: #CACACA;">未开始</div>
<div class="nucm" style="color: #f6f7f7;">33<span style=" font-size: 18px; font-weight: 400;color: #CACACA;">%</span></div> <div class="nucm" style="color: #f6f7f7;">33<span style=" font-size: 18px; font-weight: 400;color: #CACACA;">%</span></div>
</div> </div>
@ -16,138 +16,114 @@
<div class="boxPeople dd"> <div class="boxPeople dd">
<div class="name" style="color: #53E3FF">进行中</div> <div class="name" style="color: #53E3FF">进行中</div>
<div class="nucm" style="color: #e3faff;">40<span style=" font-size: 18px; font-weight: 400;color:#e3faff">%</span></div> <div class="nucm" style="color: #e3faff;">40<span style=" font-size: 18px; font-weight: 400;color:#e3faff">%</span></div>
</div> </div>-->
</div> </div>
</template> </template>
<script>
import { List } from 'echarts/lib/export' <script>
export default { export default {
props: { props: {
picIsShow: { picIsShow: {
type: Boolean, type: Boolean,
default: true default: true,
}, },
colorList: { colorList: {
type: Array, type: Array,
default() { default() {
return ['#00A572', '#007EC1', '#DA9300', '#878787'] return ["#00A572", "#007EC1", "#DA9300", "#878787"];
}
}, },
}, },
executionInfo: {
components: { type: Array,
default: [],
}, },
},
components: {},
data() { data() {
return { return {};
}
}, },
mounted() { mounted() {
this.initCharts() // this.initCharts()
}, },
watch: { watch: {
// 监听父组件中的数据变化，重新触发Echarts // // 监听父组件中的数据变化，重新触发Echarts
chartData: { // chartData: {
// deep: true,
// handler() {
// this.resetOption()
// }
// }
executionInfo: {
deep: true, deep: true,
handler() { handler(newValue) {
this.resetOption() this.initCharts(newValue);
} },
} },
}, },
methods: { methods: {
initCharts() { initCharts(dataList) {
let myChart = this.$echarts.init(this.$refs.chartEvas) let myChart = this.$echarts.init(this.$refs.chartEvas);
var val1data2 = [{ var val1data2 = [];
value: 33, val1data2 = Object.keys(dataList).map((item, index) => {
name: '电工', return { value: dataList[item].rate, name: dataList[item].status };
itemStyle: { // 此配置 });
normal: { var arr = ["middleLost", 0.6, val1data2, "今日完成进度"];
borderWidth: 2,
borderColor: '#52FFC1'
}
},
},
{
value: 53,
name: '项目监理组' , itemStyle: { // 此配置
normal: {
borderWidth: 2,
borderColor: '#B6F9FF'
}
},
},
{
value: 14,
name: '土建专工',
itemStyle: { // 此配置
normal: {
borderWidth: 2,
borderColor: '#FFE593'
}
},
},
{
value: 23,
name: '未开始',
itemStyle: { // 此配置
normal: {
borderWidth:2,
borderColor: '#ffffff'
}
},
}
]
var arr = ['middleLost', 0.6, val1data2, '今日完成进度']
// 绘制图表 // 绘制图表
myChart.setOption({ myChart.setOption({
series: [ series: [
{ {
type: 'pie', type: "pie",
radius: ['52%', '69%'] , radius: ["52%", "69%"],
center: ['50%', '50%'], center: ["50%", "50%"],
color: this.colorList, color: this.colorList,
hoverAnimation: true, /// /设置饼图默认的展开样式 hoverAnimation: true, /// /设置饼图默认的展开样式
label: { label: {
show: false, show: true,
formatter: '{b}{c}%', itemStyle: {
// 此配置
normal: {
borderWidth: 2,
borderColor: "#52FFC1",
},
},
formatter: "{b}{c}%",
rich: { rich: {
d: { d: {
color: '#fff', color: "#fff",
fontSize: 16, fontSize: 20,
lineHeight: 24, lineHeight: 24,
height: 24 height: 24,
}, },
c: { c: {
color: "red", color: "red",
fontSize: 14, fontSize: 20,
lineHeight: 20, lineHeight: 20,
align: 'left', align: "left",
}
}, },
position: '', },
position: "",
}, },
labelLine: { labelLine: {
normal: { normal: {
show: false show: false,
}
}, },
itemStyle: { // 此配置 },
itemStyle: {
// 此配置
normal: { normal: {
borderWidth: 2, borderWidth: 2,
borderColor: '#FFF6DA' borderColor: "#FFF6DA",
}
}, },
data: arr[2] },
} data: arr[2],
] },
}) ],
} });
} },
} },
};
</script> </script>
<style scoped lang="scss"> <style scoped lang="scss">
@ -165,7 +141,7 @@
} }
.bb { .bb {
top: 30px; top: 30px;
right: -36px right: -36px;
} }
.boxPeople { .boxPeople {
@ -179,8 +155,6 @@
.name { .name {
font-size: 14px; font-size: 14px;
font-weight: 500; font-weight: 500;
} }
} }
</style> </style>

702
src/views/modelScreenComponents.vue
View File

File diff suppressed because it is too large Load Diff

211
src/views/progressComponents.vue
View File

@ -13,7 +13,15 @@
<span></span> <span></span>
</div> </div>
<div class="concet"> <div class="concet">
<div class="ftahBox topBox"> <div class="ftahBox topBox" v-for="(item,index) in projectDuration" :key="index">
<span class="ysg">{{item.label}}</span>
<div style="display: flex;">
<!-- <span class="iconBox3 dayIcon"></span> -->
<img :src="item.icon" style="width: 20px;height: 20px;"/>
<span class="numb">{{item.value}}</span>
</div>
</div>
<!-- <div class="ftahBox topBox">
<span class="ysg">计划开始时间</span> <span class="ysg">计划开始时间</span>
<div style="display: flex;"> <div style="display: flex;">
<span class="iconBox3 dayIcon"></span> <span class="iconBox3 dayIcon"></span>
@ -42,7 +50,7 @@
<span class="numb">100</span> <span class="numb">100</span>
<span class="day">天</span> <span class="day">天</span>
</div> </div>
</div> </div> -->
@ -57,7 +65,7 @@
</div> </div>
<div class="pieBox"> <div class="pieBox">
<lineBar style="width: 100%; height: 100%" grid-bottom="1%" :color-array="['#021C9F', '#01B1FF']" <lineBar style="width: 100%; height: 100%" grid-bottom="1%" :color-array="['#021C9F', '#01B1FF']"
:chart-data="qyList" :x-axis-data="qyList.map(item => item.name)" /> :chart-data="qyList" :x-axis-data="qyList.map(item => item.name)" :projectInvestment="projectInvestment"/>
</div> </div>
</div> </div>
<!-- 左侧模块3 --> <!-- 左侧模块3 -->
@ -69,14 +77,14 @@
</div> </div>
<div class="btnIcon" @click="gantDialog"></div> <div class="btnIcon" @click="gantDialog"></div>
<div class="tableBox"> <div class="tableBox">
<el-table height="270" :row-style="{ height: '0' }" :cell-style="{ padding: '8px' }" <el-table height="237" :row-style="{ height: '0' }" :cell-style="{ padding: '8px' }"
:row-class-name="tableRowClassName" :data="tableData" style="width: 100%"> :row-class-name="tableRowClassName" :data="tableData" style="width: 100%">
<el-table-column header-align="center" align="center" show-overflow-tooltip prop="entName" <el-table-column header-align="center" align="center" show-overflow-tooltip prop="name"
label="任务名称"> label="任务名称">
</el-table-column> </el-table-column>
<el-table-column prop="start" align="center" label="开始日期"> <el-table-column prop="startDate" align="center" label="开始日期">
</el-table-column> </el-table-column>
<el-table-column prop="end" align="center" label="结束日期"> <el-table-column prop="endDate" align="center" label="结束日期">
</el-table-column> </el-table-column>
</el-table> </el-table>
</div> </div>
@ -90,10 +98,23 @@
</div> </div>
<div class="videoBox"> <div class="videoBox">
<pieChartUnImg :colorList="colorList" :picIsShow="false" style="width: 100%; height: 100%" color="#1ffdfa" <pieChartUnImg :colorList="colorList" :picIsShow="false" style="width: 100%; height: 100%" color="#1ffdfa"
chart-title="扫描数量分析" :chart-data="chartData" :x-axis-data="xArry" /> chart-title="扫描数量分析" :chart-data="chartData" :x-axis-data="xArry" :executionInfo="executionInfo"/>
</div> </div>
<div class="fxBox"> <div class="fxBox">
<div class="fxBoxChild"> <div class="fxBoxChild" v-for="(item,index) in executionList" :key="index">
<span style="color:#7FFFFC;display: block;width: 100%;">任务名称：<span
style="color:#fff;">{{item.name}}</span></span>
<span style="color:#7FFFFC;display: block;text-align:left;width: 50%;margin:8px 0">开始时间：<span
style="color:#fff;">{{item.startTime}}</span></span>
<span
style="color:#7FFFFC;display: block;margin: 8px -6px;text-align:center;width: 50%;margin:8px -6px">计划工期：<span
style="color:#fff;">{{item.planTime}}</span></span>
<span style="color:#7FFFFC;display: block;text-align:left;width: 50%;">结束时间：<span
style="color:#fff;">{{item.endTime}}</span></span>
<span style="color:#7FFFFC;display: block;text-align:center;width: 50%;margin-bottom: 10px;">当前状态：<span
style="color:#00CD69;">{{item.status}}</span></span>
</div>
<!-- <div class="fxBoxChild" style="border-bottom:0;">
<span style="color:#7FFFFC;display: block;width: 100%;">任务名称：<span <span style="color:#7FFFFC;display: block;width: 100%;">任务名称：<span
style="color:#fff;">项目选址与物料配备</span></span> style="color:#fff;">项目选址与物料配备</span></span>
<span style="color:#7FFFFC;display: block;text-align:left;width: 50%;margin:8px 0">开始时间：<span <span style="color:#7FFFFC;display: block;text-align:left;width: 50%;margin:8px 0">开始时间：<span
@ -105,20 +126,7 @@
style="color:#fff;">2023-01-02</span></span> style="color:#fff;">2023-01-02</span></span>
<span style="color:#7FFFFC;display: block;text-align:center;width: 50%;margin-bottom: 10px;">当前状态：<span <span style="color:#7FFFFC;display: block;text-align:center;width: 50%;margin-bottom: 10px;">当前状态：<span
style="color:#00CD69;">已完成</span></span> style="color:#00CD69;">已完成</span></span>
</div> </div> -->
<div class="fxBoxChild" style="border-bottom:0;">
<span style="color:#7FFFFC;display: block;width: 100%;">任务名称：<span
style="color:#fff;">项目选址与物料配备</span></span>
<span style="color:#7FFFFC;display: block;text-align:left;width: 50%;margin:8px 0">开始时间：<span
style="color:#fff;">2023-01-02</span></span>
<span
style="color:#7FFFFC;display: block;margin: 8px -6px;text-align:center;width: 50%;margin:8px -6px">计划工期：<span
style="color:#fff;">28天</span></span>
<span style="color:#7FFFFC;display: block;text-align:left;width: 50%;">结束时间：<span
style="color:#fff;">2023-01-02</span></span>
<span style="color:#7FFFFC;display: block;text-align:center;width: 50%;margin-bottom: 10px;">当前状态：<span
style="color:#00CD69;">已完成</span></span>
</div>
</div> </div>
</div> </div>
<!-- 右侧模块2 --> <!-- 右侧模块2 -->
@ -129,17 +137,17 @@
<span></span> <span></span>
</div> </div>
<div class="table2Box"> <div class="table2Box">
<el-table height="300" :row-class-name="tableRowClassName" :data="table2Data" style="width: 100%" :cell-style="{ padding: '8px' }"> <el-table height="270" :row-class-name="tableRowClassName" :data="table2Data" style="width: 100%" :cell-style="{ padding: '5px' }">
<el-table-column header-align="center" align="center" show-overflow-tooltip prop="entName" label="任务名称"> <el-table-column header-align="center" align="center" show-overflow-tooltip prop="name" label="任务名称">
</el-table-column> </el-table-column>
<el-table-column align="center" prop="start" label="开始时间"> <el-table-column align="center" prop="startDate" label="开始时间">
</el-table-column> </el-table-column>
<el-table-column align="center" prop="end" label="结束时间"> <el-table-column align="center" prop="endDate" label="结束时间">
</el-table-column> </el-table-column>
<el-table-column align="center" prop="zt" label="状态"> <el-table-column align="center" prop="status" label="状态">
<template slot-scope="{ row }"> <template slot-scope="{ row }">
<span class="" <span class=""
:style="{ color: row.zt == '逾期中' || row.zt == '逾期完成' ? '#d09610' : '#ADFFFE' }">{{ row.zt :style="{ color: row.status == '逾期中' || row.status == '逾期完成' ? '#d09610' : '#ADFFFE' }">{{ row.status
}}</span> }}</span>
</template> </template>
@ -270,6 +278,7 @@ import pieChartUnImg from "@/components/common/pieChartUnImg";
import pieDateChart from "@/components/common/pieDateChart"; import pieDateChart from "@/components/common/pieDateChart";
import Resize from '../utils/Resize.vue' import Resize from '../utils/Resize.vue'
import tabGtt from '@/components/common/tableGantt' import tabGtt from '@/components/common/tableGantt'
import {getProjectInfo,getProjectDuration,getProjectInvestment,getPlanProgress,getActualProgress,getCompleteMonthStatus} from "@/api/api";
export default { export default {
name: "report", name: "report",
@ -282,6 +291,32 @@ export default {
}, },
data() { data() {
return { return {
executionList:[], //本月任务
executionInfo:[], //本月完成情况
projectDuration:[
{
label:'计划开始时间',
icon: require('../assets/pic/icontime.png'),
value:''
},
{
label:'计划结束时间',
icon: require('../assets/pic/icontime.png'),
value:''
},
{
label:'计划总工期',
icon: require('../assets/pic/iconpre.png'),
value:''
},
{
label:'实际已施工',
icon: require('../assets/pic/iconsj.png'),
value:''
},
],//工程工期
projectId:'',//项目Id
projectInvestment:[],//投资进度
dialogShow: false, dialogShow: false,
colorList: ['#00A572', '#007EC1', '#DA9300', '#878787'], colorList: ['#00A572', '#007EC1', '#DA9300', '#878787'],
iconPicList: [ iconPicList: [
@ -322,68 +357,8 @@ export default {
tem: "ppm" tem: "ppm"
} }
], ],
table2Data: [ table2Data: [],
{ tableData: [],
entName: "开工",
start: '2021-02-01',
end: '2023-01-03',
zt: '正常完成'
},
{
entName: "勘察现场",
start: '2021-02-01',
end: '2023-01-03',
zt: '逾期中'
},
{
entName: "临时设施",
start: '2021-02-01',
end: '2023-01-03',
zt: '逾期完成'
},
{
entName: "桩基工程",
start: '2021-02-01',
end: '2023-01-03',
zt: '实施中'
},
{
entName: "水电安装",
start: '2021-02-01',
end: '2023-01-03',
zt: '未开始'
},
],
tableData: [
{
entName: "开工奠基仪式",
start: '2021-02-01',
end: '2023-01-03'
},
{
entName: "准备工作",
start: '2021-02-01',
end: '2023-01-03'
},
{
entName: "临时设施，道",
start: '2021-02-01',
end: '2023-01-03'
},
{
entName: "桩基工程",
start: '2021-02-01',
end: '2023-01-03'
},
{
entName: "攻城试桩施工",
start: '2021-02-01',
end: '2023-01-03'
},
],
qyList: [ qyList: [
{ {
name: "2023-1", name: "2023-1",
@ -503,6 +478,47 @@ export default {
} }
}, },
mounted() { mounted() {
//查询项目Id
getProjectInfo().then((res)=>{
this.projectId = res.data.data[0].id;
//工成工期
getProjectDuration({
projectId:this.projectId
}).then((res)=>{
this.projectDuration[0].value = res.data.data.planStartDate
this.projectDuration[1].value = res.data.data.planEndDate
this.projectDuration[2].value = res.data.data.planTotalDay + '天'
this.projectDuration[3].value = res.data.data.actualDay + '天'
})
//投资进度
getProjectInvestment({
projectId:this.projectId,
size:10,
}).then((res)=>{
this.projectInvestment = res.data.data
})
//计划进度
getPlanProgress({
projectId:this.projectId,
}).then((res)=>{
this.tableData = res.data.data
})
//实施进度
getActualProgress({
projectId:this.projectId,
}).then((res)=>{
this.table2Data = res.data.data
})
//本月任务完成情况
getCompleteMonthStatus({
projectId:this.projectId,
}).then((res)=>{
this.executionInfo = res.data.data.list
this.executionList = Object.keys(res.data.data.progress).map((item,index)=>{
return {name:res.data.data.progress[item].name,status:res.data.data.progress[item].status,startTime:res.data.data.progress[item].startDate,endTime:res.data.data.progress[item].endDate,planTime:res.data.data.progress[item].planDay}
})
})
})
this.switchDiv(); this.switchDiv();
window.onresize = () => { window.onresize = () => {
return (() => { return (() => {
@ -840,11 +856,11 @@ export default {
} }
.videoBox { .videoBox {
width: 200px; width: 400px;
height: 200px; height: 200px;
position: absolute; position: absolute;
top: 51px; top: 51px;
left: 138px; left: 28px;
} }
.fxBox { .fxBox {
@ -857,6 +873,7 @@ export default {
border: 1px solid #007b7b52; border: 1px solid #007b7b52;
left: 50%; left: 50%;
transform: translateX(-50%); transform: translateX(-50%);
overflow: auto;
} }
.fxBoxChild { .fxBoxChild {
@ -868,7 +885,6 @@ export default {
margin: 10px auto 0; margin: 10px auto 0;
width: 90%; width: 90%;
border-bottom: 1px solid rgba(96, 213, 205, 0.4); border-bottom: 1px solid rgba(96, 213, 205, 0.4);
;
} }
.pieBox { .pieBox {
@ -914,7 +930,8 @@ export default {
left: 70px; left: 70px;
display: flex; display: flex;
flex-wrap: wrap; flex-wrap: wrap;
width: 73%;
justify-content: space-between;
@media only screen and (max-height: 1000px) { @media only screen and (max-height: 1000px) {
top: 42px; top: 42px;
} }
@ -925,8 +942,8 @@ export default {
} }
.ftahBox { .ftahBox {
padding-top: 20px; padding-top: 15px;
width: 150px;
.iconBox1 { .iconBox1 {
background: url("~@/assets/pic/iconsj.png") no-repeat; background: url("~@/assets/pic/iconsj.png") no-repeat;
} }