代码提交
This commit is contained in:
parent
55cfbc7a0a
commit
d2e1cb4541
|
|
@ -7,8 +7,7 @@ if (process.env.NODE_ENV === 'development') {
|
|||
axios.defaults.baseURL = '/'
|
||||
}
|
||||
//设置公共请求头
|
||||
let access_token = JSON.parse(sessionStorage.getItem("token"))
|
||||
axios.defaults.headers.common['Blade-Auth'] = access_token;
|
||||
|
||||
//获取token登录接口
|
||||
export const getToken = (data) => {
|
||||
// axios.defaults.headers.common['Authorization'] = `Basic c2FiZXI6c2FiZXJfc2VjcmV0`;
|
||||
|
|
@ -22,6 +21,8 @@ export const getToken = (data) => {
|
|||
};
|
||||
//项目信息接口
|
||||
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',
|
||||
params,
|
||||
)
|
||||
|
|
@ -45,6 +46,48 @@ export const getProjectStatus = (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) {
|
||||
return request({
|
||||
url: '/rcm/company-credit/filterCompany',
|
||||
|
|
|
|||
Binary file not shown.
|
After Width: | Height: | Size: 3.7 KiB |
|
|
@ -7,10 +7,11 @@
|
|||
width="100%"
|
||||
height="100%"
|
||||
></Chart>
|
||||
<div class="lineBox"></div>
|
||||
<!-- <div class="lineBox"></div> -->
|
||||
</div>
|
||||
</template>
|
||||
<script>
|
||||
import { forEach } from 'element-resize-detector/src/collection-utils'
|
||||
import Chart from '../chart.vue'
|
||||
const MAX_LABEL = 8
|
||||
export default {
|
||||
|
|
@ -52,6 +53,10 @@ export default {
|
|||
yAxisPadding: {
|
||||
type: Array,
|
||||
default: null
|
||||
},
|
||||
securityCheck:{
|
||||
type:Array,
|
||||
default:null
|
||||
}
|
||||
},
|
||||
|
||||
|
|
@ -68,9 +73,16 @@ export default {
|
|||
|
||||
watch: {
|
||||
// 监听父组件中的数据变化，重新触发Echarts
|
||||
chartData: {
|
||||
// chartData: {
|
||||
// deep: true,
|
||||
// handler () {
|
||||
// this.resetOption()
|
||||
// }
|
||||
// },
|
||||
//安全检查数据
|
||||
securityCheck: {
|
||||
deep: true,
|
||||
handler () {
|
||||
handler (newVal) {
|
||||
this.resetOption()
|
||||
}
|
||||
}
|
||||
|
|
@ -99,6 +111,14 @@ export default {
|
|||
}
|
||||
},
|
||||
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
|
||||
return {
|
||||
tooltip: {
|
||||
|
|
@ -113,7 +133,7 @@ export default {
|
|||
legend: { //对图形的解释部分
|
||||
orient: 'vertical',
|
||||
right: 28,
|
||||
y: 68,
|
||||
y: 60,
|
||||
itemHeight: 8,
|
||||
icon:'rect',
|
||||
data: ['检查次数', '有问题检查次数'],
|
||||
|
|
@ -123,7 +143,7 @@ export default {
|
|||
}
|
||||
},
|
||||
grid: {
|
||||
top: '138',
|
||||
top: '100',
|
||||
left: '29',
|
||||
right:'28',
|
||||
bottom: '24',
|
||||
|
|
@ -157,7 +177,8 @@ export default {
|
|||
},
|
||||
triggerEvent: true,
|
||||
type: 'category',
|
||||
data: this.xAxisData
|
||||
// data: this.xAxisData,
|
||||
data: month
|
||||
},
|
||||
yAxis: {
|
||||
name: '次数',
|
||||
|
|
@ -194,7 +215,8 @@ export default {
|
|||
series: [
|
||||
{
|
||||
name:'检查次数',
|
||||
data: this.chartData,
|
||||
// data: this.chartData,
|
||||
data:checkTimes,
|
||||
type: 'bar',
|
||||
barGap: 0,
|
||||
barWidth:8,
|
||||
|
|
@ -202,7 +224,8 @@ export default {
|
|||
},
|
||||
{
|
||||
name:'有问题检查次数',
|
||||
data: this.chartData,
|
||||
// data: this.chartData,
|
||||
data:errorTimes,
|
||||
type: 'bar',
|
||||
color: '#fe9b37',
|
||||
barWidth: 8,
|
||||
|
|
|
|||
|
|
@ -1,254 +1,281 @@
|
|||
<template>
|
||||
<div style="position: relative">
|
||||
<Chart ref="chart" :chartOption="option" :className="className" width="100%" height="100%"></Chart>
|
||||
<div class="lineBox"></div>
|
||||
<div class="line2Box"></div>
|
||||
</div>
|
||||
<div style="position: relative">
|
||||
<Chart
|
||||
ref="chart"
|
||||
:chartOption="option"
|
||||
:className="className"
|
||||
width="100%"
|
||||
height="100%"
|
||||
></Chart>
|
||||
<div class="lineBox"></div>
|
||||
<div class="line2Box"></div>
|
||||
</div>
|
||||
</template>
|
||||
<script>
|
||||
import Chart from '../chart.vue'
|
||||
const MAX_LABEL = 8
|
||||
import Chart from "../chart.vue";
|
||||
const MAX_LABEL = 8;
|
||||
export default {
|
||||
props: {
|
||||
className: {
|
||||
type: String,
|
||||
default: ''
|
||||
},
|
||||
// 父组件传递过来的图表数据
|
||||
chartData: {
|
||||
type: Array,
|
||||
required: true
|
||||
},
|
||||
colorArray: {
|
||||
type: Array,
|
||||
default: () => {
|
||||
return ['#84F5DE', '#56E8F2', '#4CC5F8']
|
||||
}
|
||||
},
|
||||
yAxisName: {
|
||||
type: String,
|
||||
default: ''
|
||||
},
|
||||
// x轴数据
|
||||
xAxisData: {
|
||||
type: Array,
|
||||
default: () => {
|
||||
return []
|
||||
}
|
||||
},
|
||||
tooltipFormatter: {
|
||||
type: Function | String,
|
||||
default: null
|
||||
},
|
||||
yAxisPosition: {
|
||||
type: String,
|
||||
default: 'left'
|
||||
},
|
||||
yAxisPadding: {
|
||||
type: Array,
|
||||
default: null
|
||||
}
|
||||
props: {
|
||||
className: {
|
||||
type: String,
|
||||
default: "",
|
||||
},
|
||||
|
||||
components: {
|
||||
Chart
|
||||
// 父组件传递过来的图表数据
|
||||
chartData: {
|
||||
type: Array,
|
||||
required: true,
|
||||
},
|
||||
|
||||
data() {
|
||||
return {
|
||||
tipStyle: { visibility: 'hidden', position: 'absolute', top: 0, left: 0 },
|
||||
tipContent: ''
|
||||
}
|
||||
colorArray: {
|
||||
type: Array,
|
||||
default: () => {
|
||||
return ["#84F5DE", "#56E8F2", "#4CC5F8"];
|
||||
},
|
||||
},
|
||||
|
||||
watch: {
|
||||
// 监听父组件中的数据变化，重新触发Echarts
|
||||
chartData: {
|
||||
deep: true,
|
||||
handler() {
|
||||
this.resetOption()
|
||||
}
|
||||
}
|
||||
yAxisName: {
|
||||
type: String,
|
||||
default: "",
|
||||
},
|
||||
// x轴数据
|
||||
xAxisData: {
|
||||
type: Array,
|
||||
default: () => {
|
||||
return [];
|
||||
},
|
||||
},
|
||||
tooltipFormatter: {
|
||||
type: Function | String,
|
||||
default: null,
|
||||
},
|
||||
yAxisPosition: {
|
||||
type: String,
|
||||
default: "left",
|
||||
},
|
||||
yAxisPadding: {
|
||||
type: Array,
|
||||
default: null,
|
||||
},
|
||||
projectInvestment: {
|
||||
type: Array,
|
||||
default: null,
|
||||
},
|
||||
},
|
||||
|
||||
computed: {
|
||||
option() {
|
||||
const self = this
|
||||
return {
|
||||
tooltip: {
|
||||
trigger: "axis",
|
||||
axisPointer: {
|
||||
components: {
|
||||
Chart,
|
||||
},
|
||||
|
||||
data() {
|
||||
return {
|
||||
tipStyle: { visibility: "hidden", position: "absolute", top: 0, left: 0 },
|
||||
tipContent: "",
|
||||
};
|
||||
},
|
||||
|
||||
watch: {
|
||||
// 监听父组件中的数据变化，重新触发Echarts
|
||||
// chartData: {
|
||||
// deep: true,
|
||||
// handler() {
|
||||
// this.resetOption()
|
||||
// }
|
||||
// },
|
||||
projectInvestment: {
|
||||
deep: true,
|
||||
handler() {
|
||||
this.resetOption();
|
||||
},
|
||||
},
|
||||
},
|
||||
|
||||
computed: {
|
||||
option() {
|
||||
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 {
|
||||
tooltip: {
|
||||
trigger: "axis",
|
||||
axisPointer: {
|
||||
type: "shadow",
|
||||
label: {
|
||||
show: false
|
||||
}
|
||||
}
|
||||
},
|
||||
|
||||
legend: [
|
||||
{ //对图形的解释部分
|
||||
left: 160,
|
||||
y: 45,
|
||||
itemHeight: 12,
|
||||
data: ['金额',],
|
||||
textStyle: {
|
||||
fontSize: 12, //字体大小
|
||||
color: '#64D5CD', //字体颜色
|
||||
}
|
||||
},
|
||||
{ //对图形的解释部分
|
||||
left: 231,
|
||||
y: 45,
|
||||
itemHeight: 12,
|
||||
data: ['百分比',],
|
||||
icon: 'roundRect',
|
||||
itemHeight: 2, // 粗细
|
||||
textStyle: {
|
||||
fontSize: 12, //字体大小
|
||||
color: '#64D5CD', //字体颜色
|
||||
}
|
||||
}
|
||||
],
|
||||
grid: {
|
||||
top: '80',
|
||||
left: '25',
|
||||
right: '17',
|
||||
bottom: '23',
|
||||
containLabel: true
|
||||
},
|
||||
xAxis: {
|
||||
axisLine: {
|
||||
// x轴线的颜色以及宽度
|
||||
show: true,
|
||||
lineStyle: {
|
||||
color: '#ffff',
|
||||
height: 0
|
||||
}
|
||||
},
|
||||
axisTick: {
|
||||
show: false
|
||||
},
|
||||
axisLabel: {
|
||||
interval: 0, // 横轴信息全部显示
|
||||
margin: 6, // 刻度标签与轴线之间的距离
|
||||
align: 'center',
|
||||
fontSize: 12, // 横轴字体大小
|
||||
color: '#D5FFFC', // 颜色
|
||||
},
|
||||
triggerEvent: true,
|
||||
type: 'category',
|
||||
data: this.xAxisData
|
||||
},
|
||||
yAxis: [
|
||||
{
|
||||
name: '金额/万元',
|
||||
type: 'value',
|
||||
position: 'left',
|
||||
nameTextStyle: {
|
||||
color: '#36BAB1',
|
||||
padding: this.yAxisPadding || [0, 0, 2, 6],
|
||||
fontSize: 12,
|
||||
},
|
||||
axisLine: {
|
||||
show: true,
|
||||
lineStyle: {
|
||||
color: 'white'
|
||||
},
|
||||
},
|
||||
splitLine: {
|
||||
// 分割线配置
|
||||
show: false,
|
||||
lineStyle: {
|
||||
color: '#078DF0',
|
||||
opacity: 0.3
|
||||
}
|
||||
},
|
||||
axisLabel: {
|
||||
color: '#D5FFFC',
|
||||
fontSize: 12,
|
||||
},
|
||||
axisTick: {
|
||||
show: false
|
||||
},
|
||||
},
|
||||
{
|
||||
name: '百分比%',
|
||||
type: 'value',
|
||||
position: 'right',
|
||||
max: 100,
|
||||
nameTextStyle: {
|
||||
color: '#36BAB1',
|
||||
padding: this.yAxisPadding || [0, 0, 2, 6],
|
||||
fontSize: 12,
|
||||
},
|
||||
axisLine: {
|
||||
show: true,
|
||||
lineStyle: {
|
||||
color: 'white'
|
||||
},
|
||||
},
|
||||
splitLine: {
|
||||
// 分割线配置
|
||||
show: false,
|
||||
lineStyle: {
|
||||
color: '#078DF0',
|
||||
opacity: 0.3
|
||||
}
|
||||
},
|
||||
axisLabel: {
|
||||
color: '#D5FFFC',
|
||||
fontSize: 12,
|
||||
},
|
||||
axisTick: {
|
||||
show: false
|
||||
},
|
||||
}
|
||||
],
|
||||
series: [
|
||||
{
|
||||
name: '金额',
|
||||
data: this.chartData,
|
||||
type: 'bar',
|
||||
barWidth: 10,
|
||||
color: '#0DFFFF'
|
||||
},
|
||||
{
|
||||
name: '百分比',
|
||||
data: this.chartData,
|
||||
|
||||
yAxisIndex: 1,
|
||||
type: 'line',
|
||||
barWidth: 10,
|
||||
color: '#76E679'
|
||||
},
|
||||
]
|
||||
}
|
||||
}
|
||||
},
|
||||
|
||||
methods: {
|
||||
resetOption() {
|
||||
this.$refs.chart.setOption(this.option)
|
||||
show: false,
|
||||
},
|
||||
},
|
||||
},
|
||||
|
||||
}
|
||||
}
|
||||
legend: [
|
||||
{
|
||||
//对图形的解释部分
|
||||
left: 160,
|
||||
y: 45,
|
||||
itemHeight: 12,
|
||||
data: ["金额"],
|
||||
textStyle: {
|
||||
fontSize: 12, //字体大小
|
||||
color: "#64D5CD", //字体颜色
|
||||
},
|
||||
},
|
||||
{
|
||||
//对图形的解释部分
|
||||
left: 231,
|
||||
y: 45,
|
||||
itemHeight: 12,
|
||||
data: ["百分比"],
|
||||
icon: "roundRect",
|
||||
itemHeight: 2, // 粗细
|
||||
textStyle: {
|
||||
fontSize: 12, //字体大小
|
||||
color: "#64D5CD", //字体颜色
|
||||
},
|
||||
},
|
||||
],
|
||||
grid: {
|
||||
top: "80",
|
||||
left: "25",
|
||||
right: "17",
|
||||
bottom: "23",
|
||||
containLabel: true,
|
||||
},
|
||||
xAxis: {
|
||||
axisLine: {
|
||||
// x轴线的颜色以及宽度
|
||||
show: true,
|
||||
lineStyle: {
|
||||
color: "#ffff",
|
||||
height: 0,
|
||||
},
|
||||
},
|
||||
axisTick: {
|
||||
show: false,
|
||||
},
|
||||
axisLabel: {
|
||||
interval: 0, // 横轴信息全部显示
|
||||
margin: 6, // 刻度标签与轴线之间的距离
|
||||
align: "center",
|
||||
fontSize: 12, // 横轴字体大小
|
||||
color: "#D5FFFC", // 颜色
|
||||
},
|
||||
triggerEvent: true,
|
||||
type: "category",
|
||||
// data: this.xAxisData
|
||||
data: date,
|
||||
},
|
||||
yAxis: [
|
||||
{
|
||||
name: "金额/万元",
|
||||
type: "value",
|
||||
position: "left",
|
||||
nameTextStyle: {
|
||||
color: "#36BAB1",
|
||||
padding: this.yAxisPadding || [0, 0, 2, 6],
|
||||
fontSize: 12,
|
||||
},
|
||||
axisLine: {
|
||||
show: true,
|
||||
lineStyle: {
|
||||
color: "white",
|
||||
},
|
||||
},
|
||||
splitLine: {
|
||||
// 分割线配置
|
||||
show: false,
|
||||
lineStyle: {
|
||||
color: "#078DF0",
|
||||
opacity: 0.3,
|
||||
},
|
||||
},
|
||||
axisLabel: {
|
||||
color: "#D5FFFC",
|
||||
fontSize: 12,
|
||||
},
|
||||
axisTick: {
|
||||
show: false,
|
||||
},
|
||||
},
|
||||
{
|
||||
name: "百分比%",
|
||||
type: "value",
|
||||
position: "right",
|
||||
max: 100,
|
||||
nameTextStyle: {
|
||||
color: "#36BAB1",
|
||||
padding: this.yAxisPadding || [0, 0, 2, 6],
|
||||
fontSize: 12,
|
||||
},
|
||||
axisLine: {
|
||||
show: true,
|
||||
lineStyle: {
|
||||
color: "white",
|
||||
},
|
||||
},
|
||||
splitLine: {
|
||||
// 分割线配置
|
||||
show: false,
|
||||
lineStyle: {
|
||||
color: "#078DF0",
|
||||
opacity: 0.3,
|
||||
},
|
||||
},
|
||||
axisLabel: {
|
||||
color: "#D5FFFC",
|
||||
fontSize: 12,
|
||||
},
|
||||
axisTick: {
|
||||
show: false,
|
||||
},
|
||||
},
|
||||
],
|
||||
series: [
|
||||
{
|
||||
name: "金额",
|
||||
// data: this.chartData,
|
||||
data: total,
|
||||
type: "bar",
|
||||
barWidth: 10,
|
||||
color: "#0DFFFF",
|
||||
},
|
||||
{
|
||||
name: "百分比",
|
||||
// data: this.chartData,
|
||||
data: rate,
|
||||
yAxisIndex: 1,
|
||||
type: "line",
|
||||
barWidth: 10,
|
||||
color: "#76E679",
|
||||
},
|
||||
],
|
||||
};
|
||||
},
|
||||
},
|
||||
|
||||
methods: {
|
||||
resetOption() {
|
||||
this.$refs.chart.setOption(this.option);
|
||||
},
|
||||
},
|
||||
};
|
||||
</script>
|
||||
|
||||
<style scoped lang="scss">
|
||||
.lineBox {
|
||||
height: 13px;
|
||||
position: absolute;
|
||||
top: 67px;
|
||||
left: 54px;
|
||||
border-left: 1px solid #fff;
|
||||
height: 13px;
|
||||
position: absolute;
|
||||
top: 67px;
|
||||
left: 54px;
|
||||
border-left: 1px solid #fff;
|
||||
}
|
||||
|
||||
.line2Box {
|
||||
height: 13px;
|
||||
position: absolute;
|
||||
top: 67px;
|
||||
right: 45px;
|
||||
border-left: 1px solid #fff;
|
||||
height: 13px;
|
||||
position: absolute;
|
||||
top: 67px;
|
||||
right: 45px;
|
||||
border-left: 1px solid #fff;
|
||||
}
|
||||
</style>
|
||||
|
|
|
|||
|
|
@ -59,7 +59,6 @@
|
|||
projectUser: {
|
||||
deep: true,
|
||||
handler(newVal) {
|
||||
console.log(newVal,'==============');
|
||||
this.initCharts(newVal)
|
||||
}
|
||||
}
|
||||
|
|
@ -67,7 +66,6 @@
|
|||
methods: {
|
||||
initCharts(value) {
|
||||
let myChart = this.$echarts.init(this.$refs.chart)
|
||||
console.log(value,'============');
|
||||
var val1data2 = [{
|
||||
value: 33,
|
||||
name: '电工',
|
||||
|
|
|
|||
|
|
@ -1,7 +1,7 @@
|
|||
<template>
|
||||
<div style="width:100%;height:100%;position: relative;">
|
||||
<div ref="chartEvas" style="width:100%;height:100%;"></div>
|
||||
<div class="boxPeople aa">
|
||||
<div style="width: 100%; height: 100%; position: relative">
|
||||
<div ref="chartEvas" style="width: 100%; height: 100%"></div>
|
||||
<!-- <div class="boxPeople aa">
|
||||
<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>
|
||||
|
|
@ -16,171 +16,145 @@
|
|||
<div class="boxPeople dd">
|
||||
<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>
|
||||
</div>
|
||||
</template>
|
||||
<script>
|
||||
</div>-->
|
||||
</div>
|
||||
</template>
|
||||
|
||||
import { List } from 'echarts/lib/export'
|
||||
export default {
|
||||
props: {
|
||||
picIsShow: {
|
||||
type: Boolean,
|
||||
default: true
|
||||
},
|
||||
colorList: {
|
||||
type: Array,
|
||||
default(){
|
||||
return ['#00A572', '#007EC1', '#DA9300', '#878787']
|
||||
}
|
||||
<script>
|
||||
export default {
|
||||
props: {
|
||||
picIsShow: {
|
||||
type: Boolean,
|
||||
default: true,
|
||||
},
|
||||
colorList: {
|
||||
type: Array,
|
||||
default() {
|
||||
return ["#00A572", "#007EC1", "#DA9300", "#878787"];
|
||||
},
|
||||
},
|
||||
|
||||
components: {
|
||||
executionInfo: {
|
||||
type: Array,
|
||||
default: [],
|
||||
},
|
||||
},
|
||||
components: {},
|
||||
|
||||
data() {
|
||||
return {
|
||||
data() {
|
||||
return {};
|
||||
},
|
||||
mounted() {
|
||||
// this.initCharts()
|
||||
},
|
||||
watch: {
|
||||
// // 监听父组件中的数据变化，重新触发Echarts
|
||||
// chartData: {
|
||||
// deep: true,
|
||||
// handler() {
|
||||
// this.resetOption()
|
||||
// }
|
||||
// }
|
||||
executionInfo: {
|
||||
deep: true,
|
||||
handler(newValue) {
|
||||
this.initCharts(newValue);
|
||||
},
|
||||
},
|
||||
},
|
||||
|
||||
}
|
||||
},
|
||||
mounted() {
|
||||
this.initCharts()
|
||||
},
|
||||
watch: {
|
||||
// 监听父组件中的数据变化，重新触发Echarts
|
||||
chartData: {
|
||||
deep: true,
|
||||
handler() {
|
||||
this.resetOption()
|
||||
}
|
||||
}
|
||||
},
|
||||
|
||||
methods: {
|
||||
initCharts() {
|
||||
let myChart = this.$echarts.init(this.$refs.chartEvas)
|
||||
var val1data2 = [{
|
||||
value: 33,
|
||||
name: '电工',
|
||||
itemStyle: { // 此配置
|
||||
methods: {
|
||||
initCharts(dataList) {
|
||||
let myChart = this.$echarts.init(this.$refs.chartEvas);
|
||||
var val1data2 = [];
|
||||
val1data2 = Object.keys(dataList).map((item, index) => {
|
||||
return { value: dataList[item].rate, name: dataList[item].status };
|
||||
});
|
||||
var arr = ["middleLost", 0.6, val1data2, "今日完成进度"];
|
||||
// 绘制图表
|
||||
myChart.setOption({
|
||||
series: [
|
||||
{
|
||||
type: "pie",
|
||||
radius: ["52%", "69%"],
|
||||
center: ["50%", "50%"],
|
||||
color: this.colorList,
|
||||
hoverAnimation: true, /// /设置饼图默认的展开样式
|
||||
label: {
|
||||
show: true,
|
||||
itemStyle: {
|
||||
// 此配置
|
||||
normal: {
|
||||
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({
|
||||
series: [
|
||||
{
|
||||
type: 'pie',
|
||||
radius: ['52%', '69%'] ,
|
||||
center: ['50%', '50%'],
|
||||
color: this.colorList,
|
||||
hoverAnimation: true, /// /设置饼图默认的展开样式
|
||||
label: {
|
||||
show: false,
|
||||
formatter: '{b}{c}%',
|
||||
rich: {
|
||||
d: {
|
||||
color: '#fff',
|
||||
fontSize: 16,
|
||||
lineHeight: 24,
|
||||
height: 24
|
||||
},
|
||||
c: {
|
||||
color: "red",
|
||||
fontSize: 14,
|
||||
lineHeight: 20,
|
||||
align: 'left',
|
||||
}
|
||||
borderColor: "#52FFC1",
|
||||
},
|
||||
position: '',
|
||||
},
|
||||
labelLine: {
|
||||
normal: {
|
||||
show: false
|
||||
}
|
||||
formatter: "{b}{c}%",
|
||||
rich: {
|
||||
d: {
|
||||
color: "#fff",
|
||||
fontSize: 20,
|
||||
lineHeight: 24,
|
||||
height: 24,
|
||||
},
|
||||
c: {
|
||||
color: "red",
|
||||
fontSize: 20,
|
||||
lineHeight: 20,
|
||||
align: "left",
|
||||
},
|
||||
},
|
||||
itemStyle: { // 此配置
|
||||
normal: {
|
||||
borderWidth: 2,
|
||||
borderColor: '#FFF6DA'
|
||||
}
|
||||
position: "",
|
||||
},
|
||||
labelLine: {
|
||||
normal: {
|
||||
show: false,
|
||||
},
|
||||
data: arr[2]
|
||||
}
|
||||
]
|
||||
})
|
||||
}
|
||||
}
|
||||
}
|
||||
</script>
|
||||
},
|
||||
itemStyle: {
|
||||
// 此配置
|
||||
normal: {
|
||||
borderWidth: 2,
|
||||
borderColor: "#FFF6DA",
|
||||
},
|
||||
},
|
||||
data: arr[2],
|
||||
},
|
||||
],
|
||||
});
|
||||
},
|
||||
},
|
||||
};
|
||||
</script>
|
||||
|
||||
<style scoped lang="scss">
|
||||
.dd{
|
||||
bottom: 56px;
|
||||
right: -51px;
|
||||
}
|
||||
.cc{
|
||||
bottom: 38px;
|
||||
left: -31px;
|
||||
}
|
||||
.aa{
|
||||
top: 26px;
|
||||
left: -35px;
|
||||
}
|
||||
.bb{
|
||||
top: 30px;
|
||||
right: -36px
|
||||
}
|
||||
<style scoped lang="scss">
|
||||
.dd {
|
||||
bottom: 56px;
|
||||
right: -51px;
|
||||
}
|
||||
.cc {
|
||||
bottom: 38px;
|
||||
left: -31px;
|
||||
}
|
||||
.aa {
|
||||
top: 26px;
|
||||
left: -35px;
|
||||
}
|
||||
.bb {
|
||||
top: 30px;
|
||||
right: -36px;
|
||||
}
|
||||
|
||||
.boxPeople{
|
||||
position: absolute;
|
||||
|
||||
display: flex;
|
||||
align-items: center;
|
||||
.nucm{
|
||||
font-size: 20px;
|
||||
}
|
||||
.name{
|
||||
font-size: 14px;
|
||||
font-weight: 500;
|
||||
|
||||
}
|
||||
.boxPeople {
|
||||
position: absolute;
|
||||
|
||||
display: flex;
|
||||
align-items: center;
|
||||
.nucm {
|
||||
font-size: 20px;
|
||||
}
|
||||
</style>
|
||||
.name {
|
||||
font-size: 14px;
|
||||
font-weight: 500;
|
||||
}
|
||||
}
|
||||
</style>
|
||||
|
|
|
|||
File diff suppressed because it is too large
Load Diff
|
|
@ -13,7 +13,15 @@
|
|||
<span></span>
|
||||
</div>
|
||||
<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>
|
||||
<div style="display: flex;">
|
||||
<span class="iconBox3 dayIcon"></span>
|
||||
|
|
@ -42,7 +50,7 @@
|
|||
<span class="numb">100</span>
|
||||
<span class="day">天</span>
|
||||
</div>
|
||||
</div>
|
||||
</div> -->
|
||||
|
||||
|
||||
|
||||
|
|
@ -57,7 +65,7 @@
|
|||
</div>
|
||||
<div class="pieBox">
|
||||
<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>
|
||||
<!-- 左侧模块3 -->
|
||||
|
|
@ -69,14 +77,14 @@
|
|||
</div>
|
||||
<div class="btnIcon" @click="gantDialog"></div>
|
||||
<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%">
|
||||
<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="任务名称">
|
||||
</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 prop="end" align="center" label="结束日期">
|
||||
<el-table-column prop="endDate" align="center" label="结束日期">
|
||||
</el-table-column>
|
||||
</el-table>
|
||||
</div>
|
||||
|
|
@ -90,10 +98,23 @@
|
|||
</div>
|
||||
<div class="videoBox">
|
||||
<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 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
|
||||
style="color:#fff;">项目选址与物料配备</span></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>
|
||||
<span style="color:#7FFFFC;display: block;text-align:center;width: 50%;margin-bottom: 10px;">当前状态：<span
|
||||
style="color:#00CD69;">已完成</span></span>
|
||||
</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>
|
||||
<!-- 右侧模块2 -->
|
||||
|
|
@ -129,17 +137,17 @@
|
|||
<span></span>
|
||||
</div>
|
||||
<div class="table2Box">
|
||||
<el-table height="300" :row-class-name="tableRowClassName" :data="table2Data" style="width: 100%" :cell-style="{ padding: '8px' }">
|
||||
<el-table-column header-align="center" align="center" show-overflow-tooltip prop="entName" label="任务名称">
|
||||
<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="name" label="任务名称">
|
||||
</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 align="center" prop="end" label="结束时间">
|
||||
<el-table-column align="center" prop="endDate" label="结束时间">
|
||||
</el-table-column>
|
||||
<el-table-column align="center" prop="zt" label="状态">
|
||||
<el-table-column align="center" prop="status" label="状态">
|
||||
<template slot-scope="{ row }">
|
||||
<span class=""
|
||||
:style="{ color: row.zt == '逾期中' || row.zt == '逾期完成' ? '#d09610' : '#ADFFFE' }">{{ row.zt
|
||||
:style="{ color: row.status == '逾期中' || row.status == '逾期完成' ? '#d09610' : '#ADFFFE' }">{{ row.status
|
||||
}}</span>
|
||||
</template>
|
||||
|
||||
|
|
@ -270,6 +278,7 @@ import pieChartUnImg from "@/components/common/pieChartUnImg";
|
|||
import pieDateChart from "@/components/common/pieDateChart";
|
||||
import Resize from '../utils/Resize.vue'
|
||||
import tabGtt from '@/components/common/tableGantt'
|
||||
import {getProjectInfo,getProjectDuration,getProjectInvestment,getPlanProgress,getActualProgress,getCompleteMonthStatus} from "@/api/api";
|
||||
|
||||
export default {
|
||||
name: "report",
|
||||
|
|
@ -282,6 +291,32 @@ export default {
|
|||
},
|
||||
data() {
|
||||
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,
|
||||
colorList: ['#00A572', '#007EC1', '#DA9300', '#878787'],
|
||||
iconPicList: [
|
||||
|
|
@ -322,68 +357,8 @@ export default {
|
|||
tem: "ppm"
|
||||
}
|
||||
],
|
||||
table2Data: [
|
||||
{
|
||||
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'
|
||||
},
|
||||
|
||||
],
|
||||
table2Data: [],
|
||||
tableData: [],
|
||||
qyList: [
|
||||
{
|
||||
name: "2023-1",
|
||||
|
|
@ -503,6 +478,47 @@ export default {
|
|||
}
|
||||
},
|
||||
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();
|
||||
window.onresize = () => {
|
||||
return (() => {
|
||||
|
|
@ -840,11 +856,11 @@ export default {
|
|||
}
|
||||
|
||||
.videoBox {
|
||||
width: 200px;
|
||||
width: 400px;
|
||||
height: 200px;
|
||||
position: absolute;
|
||||
top: 51px;
|
||||
left: 138px;
|
||||
left: 28px;
|
||||
}
|
||||
|
||||
.fxBox {
|
||||
|
|
@ -857,6 +873,7 @@ export default {
|
|||
border: 1px solid #007b7b52;
|
||||
left: 50%;
|
||||
transform: translateX(-50%);
|
||||
overflow: auto;
|
||||
}
|
||||
|
||||
.fxBoxChild {
|
||||
|
|
@ -868,7 +885,6 @@ export default {
|
|||
margin: 10px auto 0;
|
||||
width: 90%;
|
||||
border-bottom: 1px solid rgba(96, 213, 205, 0.4);
|
||||
;
|
||||
}
|
||||
|
||||
.pieBox {
|
||||
|
|
@ -914,7 +930,8 @@ export default {
|
|||
left: 70px;
|
||||
display: flex;
|
||||
flex-wrap: wrap;
|
||||
|
||||
width: 73%;
|
||||
justify-content: space-between;
|
||||
@media only screen and (max-height: 1000px) {
|
||||
top: 42px;
|
||||
}
|
||||
|
|
@ -925,8 +942,8 @@ export default {
|
|||
}
|
||||
|
||||
.ftahBox {
|
||||
padding-top: 20px;
|
||||
|
||||
padding-top: 15px;
|
||||
width: 150px;
|
||||
.iconBox1 {
|
||||
background: url("~@/assets/pic/iconsj.png") no-repeat;
|
||||
}
|
||||
|
|
|
|||
Loading…
Reference in New Issue