diff --git a/src/api/api.js b/src/api/api.js index d6b4122..ab21b61 100644 --- a/src/api/api.js +++ b/src/api/api.js @@ -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', diff --git a/src/assets/img/centerBg.png b/src/assets/img/centerBg.png new file mode 100644 index 0000000..b3e2042 Binary files /dev/null and b/src/assets/img/centerBg.png differ diff --git a/src/components/common/BarChart.vue b/src/components/common/BarChart.vue index 62b4d9d..8c17836 100644 --- a/src/components/common/BarChart.vue +++ b/src/components/common/BarChart.vue @@ -7,10 +7,11 @@ width="100%" height="100%" > -
+ diff --git a/src/components/common/mdScreenPie.vue b/src/components/common/mdScreenPie.vue index aabf4f7..2e464ce 100644 --- a/src/components/common/mdScreenPie.vue +++ b/src/components/common/mdScreenPie.vue @@ -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: '电工', diff --git a/src/components/common/pieChartUnImg.vue b/src/components/common/pieChartUnImg.vue index c972648..7a8ce72 100644 --- a/src/components/common/pieChartUnImg.vue +++ b/src/components/common/pieChartUnImg.vue @@ -1,186 +1,160 @@ - - - - + + + + + diff --git a/src/views/modelScreenComponents.vue b/src/views/modelScreenComponents.vue index 6631e24..69ec91a 100644 --- a/src/views/modelScreenComponents.vue +++ b/src/views/modelScreenComponents.vue @@ -1,7 +1,7 @@ @@ -237,217 +337,181 @@ import BarChart from "@/components/common/BarChart"; import mdScreenPie from "@/components/common/mdScreenPie"; import Swiper from "@/components/common/carousel"; -import Resize from '../utils/Resize.vue' -import axios from 'axios'; -import {getProjectInfo,getUserMonitorInfo,getUserGroup} from "@/api/api"; +import Resize from "../utils/Resize.vue"; +import axios from "axios"; +import { + getProjectInfo, + getUserMonitorInfo, + getUserGroup, + getProjectStatus, + getProjectCheckCensus, + getProjectCheckInfo, +} from "@/api/api"; export default { name: "report", components: { mdScreenPie, BarChart, Swiper, - Resize + Resize, }, data() { return { - introduction:'',//基本情况 - projectId:'',//项目Id - projectUser:[],//项目人员 - getWeek:'星期四', - dateNew:'2023年2月17日', - time:'14:26', - temperature:'12', - weather:'晴', - weatherItem: {}, - tienum: '', + securityCheck: [], //安全检查统计 + introduction: "", //基本情况 + projectId: "", //项目Id + projectUser: [], //项目人员 + getWeek: "星期四", + dateNew: "2023年2月17日", + time: "14:26", + temperature: "12", + weather: "晴", + weatherItem: {}, + tienum: "", showType: true, - boxList: [{ - c1: '开工', - c2: "2023-1-4", - c3: "2023-1-4", - c4: '正常完成' - }, - { - c1: '勘察现场', - c2: "2023-1-4", - c3: "2023-1-4", - c4: '逾期完成' - }, - { - c1: '启动会议', - c2: "2023-1-4", - c3: "2023-1-4", - c4: '正常完成' - }, { - c1: '结构施工', - c2: "2023-1-4", - c3: "--", - c4: '逾期中' - }, { - c1: '水电安装', - c2: "2023-1-4", - c3: "--", - c4: '未开始' - }, { - c1: '完工', - c2: "2023-1-4", - c3: "--", - c4: '实施中' - }, + boxList: [ + { + c1: "开工", + c2: "2023-1-4", + c3: "2023-1-4", + c4: "正常完成", + }, + { + c1: "勘察现场", + c2: "2023-1-4", + c3: "2023-1-4", + c4: "逾期完成", + }, + { + c1: "启动会议", + c2: "2023-1-4", + c3: "2023-1-4", + c4: "正常完成", + }, + { + c1: "结构施工", + c2: "2023-1-4", + c3: "--", + c4: "逾期中", + }, + { + c1: "水电安装", + c2: "2023-1-4", + c3: "--", + c4: "未开始", + }, + { + c1: "完工", + c2: "2023-1-4", + c3: "--", + c4: "实施中", + }, ], - dataList: [{ - src: '@/assets/pic/23.png' - }], // 专题数据列表 + dataList: [ + { + src: "@/assets/pic/23.png", + }, + ], // 专题数据列表 iconPicList: [ { icon: "wendu", name: "温度", val: "19.8", - tem: "℃" + tem: "℃", }, { icon: "shidu", name: "湿度", val: "19.8", - tem: "%" + tem: "%", }, { icon: "yangqi", name: "氧气值", val: "19.8", - tem: "%VOL" + tem: "%VOL", }, { icon: "co2", name: "二氧化碳", val: "19.8", - tem: "%VOL" + tem: "%VOL", }, { icon: "ch4", name: "甲烷", val: "19.8", - tem: "ppm" + tem: "ppm", }, { icon: "h2s", name: "硫化氢", val: "19.8", - tem: "ppm" - } - ], - tableData: [ - { - entName: "开工建设", - start: '2021-02-01', - end: '张三', - zt: '正常完成' - }, - { - entName: "勘察现场", - start: '2021-02-01', - end: '张三', - zt: '未完成' - }, - { - entName: "临时设施", - start: '2021-02-01', - end: '张三', - zt: '未完成' - }, - { - entName: "桩基工程", - start: '2021-02-01', - end: '张三', - zt: '实施中' - }, - { - entName: "水电安装", - start: '2021-02-01', - end: '张三', - zt: '未开始' - }, - { - entName: "水电安装", - start: '2021-02-01', - end: '张三', - zt: '实施中' - }, - { - entName: "桩基工程", - start: '2021-02-01', - end: '张三', - zt: '实施中' - }, - { - entName: "水电安装", - start: '2021-02-01', - end: '张三', - zt: '未开始' - }, - { - entName: "完工建设", - start: '2021-02-01', - end: '张三', - zt: '实施中' + tem: "ppm", }, ], + tableData: [], qyList: [ { name: "1月", - value: 12 + value: 12, }, { name: "2月", - value: 21 + value: 21, }, { name: "3月", - value: 22 + value: 22, }, { name: "4月", - value: 12 + value: 12, }, { name: "5月", - value: 10 + value: 10, }, { name: "6月", - value: 3 + value: 3, }, { name: "7月", - value: 4 - }, { + value: 4, + }, + { name: "8月", - value: 76 - }, { + value: 76, + }, + { name: "9月", - value: 22 - }, { + value: 22, + }, + { name: "10月", - value: 1 - }, { + value: 1, + }, + { name: "11月", - value: 32 - }, { + value: 32, + }, + { name: "12月", - value: 12 - } + value: 12, + }, ], xArry: [], chartData: [], peopleList: [ - { - label: "姓名:", - name1: "王刚", - label1: "岗位:", - name2:'施工人员', - label2:'出勤时间:', - time:'2022-11-26 08:22:13' - }, + // { + // label: "姓名:", + // name1: "王刚", + // label1: "岗位:", + // name2:'施工人员', + // label2:'出勤时间:', + // time:'2022-11-26 08:22:13' + // }, ], vdaH: 0, type: false, @@ -455,106 +519,107 @@ export default { attendanceNumber: [], //今日出勤 onSiteNumber: [], //今日出勤 boxNone: true, - topicSends:[] + topicSends: [], }; }, created() { let h = document.documentElement.clientHeight || document.body.clientHeight; this.vdaH = h - 0 + "px"; - this.createMqtt() - this.getWeather() - this.getTime() + this.createMqtt(); + this.getWeather(); + this.getTime(); }, methods: { - createMqtt() { - - this.topicSends = ['webdata']; - console.log("this.topicSends",this.topicSends) - window.PubScribe(this.topicSends, this.realInfo); - }, - /** 实时数据分类 */ + createMqtt() { + this.topicSends = ["webdata"]; + console.log("this.topicSends", this.topicSends); + window.PubScribe(this.topicSends, this.realInfo); + }, + /** 实时数据分类 */ realInfo(topic, message) { - // console.log("topic",topic) + // console.log("topic",topic) switch (topic) { // 接收托片 - case "webdata": - try { - console.log("message",message) + case "webdata": + try { + console.log("message", message); // const utf8decoder = new TextDecoder() // const u8arr = new Uint8Array(message) // const temp = utf8decoder.decode(u8arr) // 将二进制数据转为字符串 // const msg = JSON.parse(temp) //这一步报错则返回的是二进制流图片，不报错则返回的是JSON的错误提示数据 // console.log("hert", msg) //msg为转换后的JSON数据 - - } catch (error) { - - } - break; + } catch (error) {} + break; } }, //获取当前时间 - getTime(){ - let myDate = new Date() - let wk = myDate.getDay() - //年 - let year = new Date().getFullYear(); - //月份是从0月开始获取的，所以要+1; - let month = new Date().getMonth() +1; - //日 - let day = new Date().getDate(); - //时 - let hour = new Date().getHours(); - //分 - let minute = new Date().getMinutes(); - //秒 - // let second = new Date().getSeconds(); - let weeks = ['星期日', '星期一', '星期二', '星期三', '星期四', '星期五', '星期六'] - let week = weeks[wk] - this.getWeek = week; - this.dateNew = year + '年' + month + '月' + day + '日' - this.time = hour +':'+ minute + getTime() { + let myDate = new Date(); + let wk = myDate.getDay(); + //年 + let year = new Date().getFullYear(); + //月份是从0月开始获取的，所以要+1; + let month = new Date().getMonth() + 1; + //日 + let day = new Date().getDate(); + //时 + let hour = new Date().getHours(); + //分 + let minute = new Date().getMinutes(); + //秒 + // let second = new Date().getSeconds(); + let weeks = [ + "星期日", + "星期一", + "星期二", + "星期三", + "星期四", + "星期五", + "星期六", + ]; + let week = weeks[wk]; + this.getWeek = week; + this.dateNew = year + "年" + month + "月" + day + "日"; + this.time = hour + ":" + minute; }, //获取天气数据 - getWeather () { - axios({ - url: 'https://restapi.amap.com/v3/weather/weatherInfo?key=e979d73682c0c69059e4cb6740c9dacd&city=320100', - methods: '' - }).then(res => { - this.weatherItem = res.data.lives[0]; - }); - } , + getWeather() { + axios({ + url: "https://restapi.amap.com/v3/weather/weatherInfo?key=e979d73682c0c69059e4cb6740c9dacd&city=320100", + methods: "", + }).then((res) => { + this.weatherItem = res.data.lives[0]; + }); + }, changeMessage(val) { - this.tienum = val + this.tienum = val; }, disBox() { - this.boxNone = !this.boxNone - this.$refs.screenBox.style.animationPlayState = 'running' - - + this.boxNone = !this.boxNone; + this.$refs.screenBox.style.animationPlayState = "running"; }, tableRowClassName({ row, rowIndex }) { if (rowIndex % 2 === 0) { return "success-row"; } else { return "warning-row"; - } }, // 菜单点击 childBoxClick(val) { this.menuType = val; if (val === 3) { - this.$router.push('/progress') + this.$router.push("/progress"); } else if (val === 2) { - this.$router.push('/videoSurveillance') + this.$router.push("/videoSurveillance"); } else if (val === 4) { - this.$router.push('/management') + this.$router.push("/management"); } else if (val === 1) { - this.$router.push('/personnel') + this.$router.push("/personnel"); } }, switchDiv() { - let that = this + let that = this; if (this.type) { this.type = false; this.$refs.switchBtn.style.display = "none"; @@ -563,41 +628,93 @@ export default { setTimeout(() => { // 俩秒之后让模块消失 that.$refs.switchBtn.style.display = "block"; - }, 800) + }, 800); } - } + }, }, mounted() { //基本情况 - getProjectInfo().then((res)=>{ - this.introduction = res.data.data[0].introduction - this.projectId = res.data.data[0].id + getProjectInfo().then((res) => { + this.introduction = res.data.data[0].introduction; + this.projectId = res.data.data[0].id; //人员监控信息 - getUserMonitorInfo({ - projectId: this.projectId - }).then((res)=>{ - this.attendanceNumber.push(res.data.data.attendanceNumber) - this.onSiteNumber.push(res.data.data.onSiteNumber) - this.peopleList = Object.keys(res.data.data.users).map((item,index)=>{ - return {label:'姓名:',label1:'岗位',label2:'出勤时间',name1:res.data.data.users[item].name,name2:res.data.data.users[item].post,time:res.data.data.users[item].inTime} - }) - }) - //项目人员分组信息接口 - getUserGroup({ - projectId: this.projectId - }).then((res)=>{ - this.projectUser = res.data.data - }) - }) - + getUserMonitorInfo({ + projectId: this.projectId, + }).then((res) => { + this.attendanceNumber.push(res.data.data.attendanceNumber); + this.onSiteNumber.push(res.data.data.onSiteNumber); + this.peopleList = Object.keys(res.data.data.users).map( + (item, index) => { + return { + label: "姓名:", + label1: "岗位", + label2: "出勤时间", + name1: res.data.data.users[item].name, + name2: res.data.data.users[item].post, + time: res.data.data.users[item].inTime, + }; + } + ); + }); + //项目人员分组信息接口 + getUserGroup({ + projectId: this.projectId, + }).then((res) => { + this.projectUser = res.data.data; + }); + //项目进度 + getProjectStatus({ + projectId: this.projectId, + }).then((res) => { + this.boxList = Object.keys(res.data.data).map((item, index) => { + if (res.data.data[item].planEndTime != null) { + res.data.data[item].planEndTime = res.data.data[ + item + ].planEndTime.substring(0, 10); + } + if (res.data.data[item].relEndTime != null) { + res.data.data[item].relEndTime = res.data.data[ + item + ].relEndTime.substring(0, 10); + } + return { + c1: res.data.data[item].name, + c2: res.data.data[item].planEndTime, + c3: res.data.data[item].relEndTime, + c4: res.data.data[item].completionStatusValue, + }; + }); + }); + //安全检查统计 + getProjectCheckCensus({ + projectId: this.projectId, + }).then((res) => { + this.securityCheck = res.data.data; + }); + //安全检查跟踪 + getProjectCheckInfo({ + projectId: this.projectId, + }).then((res) => { + for (let i = 0; i < res.data.data.length; i++) { + if (res.data.data[i].status == true) { + res.data.data[i].status = "已完成"; + } else if (res.data.data[i].status == false) { + res.data.data[i].status = "未完成"; + } + } + this.tableData = res.data.data; + }); + }); + window.onresize = () => { return (() => { - let h = document.documentElement.clientHeight || document.body.clientHeight; + let h = + document.documentElement.clientHeight || document.body.clientHeight; this.vdaH = h - 0 + "px"; - })() - } - } + })(); + }; + }, }; @@ -614,113 +731,113 @@ export default { @keyframes mce2st { 1% { - bottom: 339px + bottom: 339px; } 100% { - bottom: 150px + bottom: 150px; } } @keyframes mcest { 100% { - bottom: 339px + bottom: 339px; } 1% { - bottom: 150px + bottom: 150px; } } @keyframes mytest { 100% { - bottom: 20px + bottom: 20px; } 90% { - bottom: 40px + bottom: 40px; } 80% { - bottom: 60px + bottom: 60px; } 70% { - bottom: 80px + bottom: 80px; } 60% { - bottom: 100px + bottom: 100px; } 50% { - bottom: 120px + bottom: 120px; } 40% { - bottom: 140px + bottom: 140px; } 30% { - bottom: 160px + bottom: 160px; } 20% { - bottom: 180px + bottom: 180px; } 10% { - bottom: 200px + bottom: 200px; } 1% { - bottom: 220px + bottom: 220px; } } @keyframes myt2est { 1% { - bottom: 20px + bottom: 20px; } 10% { - bottom: 40px + bottom: 40px; } 20% { - bottom: 60px + bottom: 60px; } 30% { - bottom: 80px + bottom: 80px; } 40% { - bottom: 100px + bottom: 100px; } 50% { - bottom: 120px + bottom: 120px; } 60% { - bottom: 140px + bottom: 140px; } 70% { - bottom: 160px + bottom: 160px; } 80% { - bottom: 180px + bottom: 180px; } 90% { - bottom: 200px + bottom: 200px; } 100% { - bottom: 220px + bottom: 220px; } } @@ -737,7 +854,8 @@ export default { .screenBox { width: 46px; height: 46px; - background: url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAADAAAAAwCAYAAABXAvmHAAAAAXNSR0IArs4c6QAAA3RJREFUaENjZMAHGhqYfLVUIv4x/OfBq27AJP+eZcRnt++qJdXvHj0OfHv//oA5EZfFggryDELycrNwesB39ZLcD0+exJ9ZvJzhz+/fg84DynY2DMr2ttg94LtqacLn1y9yTi1cxvD7+/dB53iQg3B6wHfl4uBvHz5UnFywmPHnly+D0vE4PeC7eonbj8+fW07OX8T0/cPHQet4rB7wW7nE+sePb72nFi5l+fr69aB2PIYH/JYvNPz998/k04uXcXx89nzQOx7FA17rVqgx/Pg+69yy1TxvHz4YEo5H8YD3qsVp94+eSLu9b/+QcTyGB+4ePJx299CRUQ/QMwTg9QAoCY3GAD2DHmoXxTEQvWKxMTZ3H+jsvfn0/AWUKtyjpVFNWEWJF58/l0bEniUlHEY9AIuBt3fufX5989ZnWOjd2rPv7efnz38hh6aah5swr6goG0xMWE2ZR1RVlQ9ZzYDFwI2tO56dXbyU6Opb2tiIx7YgR5WZlZVpyHkA2fF/f//+9+7Bgy+wmBj0MYDu+MMTptyW0NLk1fD2kALFBN09IG1oAO4nf3rx8hd6mkcvTbA5/unZc1+MY6MlB8wDxBZ5uBwP0j/oPYDP8SAPgEonJRtrYRB7R039LWIDhS6NOUKOJ8Wx2NRSXJHhcwCtHU+VGAA1D0AG3Tty9O2tHbvewjxED8dTxQOwmhi5IqOX42niAXIczyspycYnIQ5uYqA3AAnlEYrzAHIMvLh2/TOseQCqYUGVFKicJ+SIAS1GYR54ffv2JyEFBR5Q24YUxw94PYDeHyDV8YPOA6CYeHvrLjzZfH79+hdy6QRyMCjNq7k4gSsuEBBVV+OFdXTo3hbC1SODOQ7UT0CvXUHtJ4fyYnVseWPUA6PjQoTKTCrLU1wPUNk9JBs36gGSg4zKGoZ0DLBx8zCYxUUzcAsL1jEOtbFRNm4uBrO4GAYuYZFpW8Nj5g0pD7BxcTGYxUcz8IiITd8cFj0XlCqHjAdAjjeNi2bgEROZsSU0dg4sSw0JD8AczysqMmtzWOws5PJg0HuAlYuTwSw2ioFXXGz25tDYmeiF2aD2ACsnJ4NpXCQDj5j43K1hsdOxlcRgD7x7+Cjt/YOHVC6pKTdOXF2dgU9SfN7m0JhpuExj9F61wJiBgRnrZAXlTqDMBCZGppebQ6M34jMFAIXEIruaoXY4AAAAAElFTkSuQmCC) no-repeat; + background: url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAADAAAAAwCAYAAABXAvmHAAAAAXNSR0IArs4c6QAAA3RJREFUaENjZMAHGhqYfLVUIv4x/OfBq27AJP+eZcRnt++qJdXvHj0OfHv//oA5EZfFggryDELycrNwesB39ZLcD0+exJ9ZvJzhz+/fg84DynY2DMr2ttg94LtqacLn1y9yTi1cxvD7+/dB53iQg3B6wHfl4uBvHz5UnFywmPHnly+D0vE4PeC7eonbj8+fW07OX8T0/cPHQet4rB7wW7nE+sePb72nFi5l+fr69aB2PIYH/JYvNPz998/k04uXcXx89nzQOx7FA17rVqgx/Pg+69yy1TxvHz4YEo5H8YD3qsVp94+eSLu9b/+QcTyGB+4ePJx299CRUQ/QMwTg9QAoCY3GAD2DHmoXxTEQvWKxMTZ3H+jsvfn0/AWUKtyjpVFNWEWJF58/l0bEniUlHEY9AIuBt3fufX5989ZnWOjd2rPv7efnz38hh6aah5swr6goG0xMWE2ZR1RVlQ9ZzYDFwI2tO56dXbyU6Opb2tiIx7YgR5WZlZVpyHkA2fF/f//+9+7Bgy+wmBj0MYDu+MMTptyW0NLk1fD2kALFBN09IG1oAO4nf3rx8hd6mkcvTbA5/unZc1+MY6MlB8wDxBZ5uBwP0j/oPYDP8SAPgEonJRtrYRB7R039LWIDhS6NOUKOJ8Wx2NRSXJHhcwCtHU+VGAA1D0AG3Tty9O2tHbvewjxED8dTxQOwmhi5IqOX42niAXIczyspycYnIQ5uYqA3AAnlEYrzAHIMvLh2/TOseQCqYUGVFKicJ+SIAS1GYR54ffv2JyEFBR5Q24YUxw94PYDeHyDV8YPOA6CYeHvrLjzZfH79+hdy6QRyMCjNq7k4gSsuEBBVV+OFdXTo3hbC1SODOQ7UT0CvXUHtJ4fyYnVseWPUA6PjQoTKTCrLU1wPUNk9JBs36gGSg4zKGoZ0DLBx8zCYxUUzcAsL1jEOtbFRNm4uBrO4GAYuYZFpW8Nj5g0pD7BxcTGYxUcz8IiITd8cFj0XlCqHjAdAjjeNi2bgEROZsSU0dg4sSw0JD8AczysqMmtzWOws5PJg0HuAlYuTwSw2ioFXXGz25tDYmeiF2aD2ACsnJ4NpXCQDj5j43K1hsdOxlcRgD7x7+Cjt/YOHVC6pKTdOXF2dgU9SfN7m0JhpuExj9F61wJiBgRnrZAXlTqDMBCZGppebQ6M34jMFAIXEIruaoXY4AAAAAElFTkSuQmCC) + no-repeat; background-size: 100% 100%; position: absolute; bottom: 210px; @@ -760,7 +878,7 @@ export default { right: 0; font-size: 12px; font-weight: 500; - color: #FFFFFF; + color: #ffffff; text-align: center; line-height: 28px; } @@ -774,7 +892,6 @@ export default { transform: translateX(-50%); } - .centerBottom2 { width: calc(100% - 968px); height: 166px; @@ -784,10 +901,15 @@ export default { transform: translateX(-50%); background: url("~@/assets/pic/jdin.png") no-repeat; background-size: 100% 100%; - display: flex; - overflow-x: hidden; + // display: flex; + // display: -webkit-box; + // flex-direction: row; + // overflow-x: hidden; transition: bottom 0.6s; - overflow-y: hidden; //重点 + // overflow-y: hidden; //重点 + ::-webkit-scrollbar { + display: none; + } @media only screen and (max-height: 1000px) { bottom: -64px; } @@ -797,39 +919,62 @@ export default { height: 166px; position: absolute; bottom: 35px; - left: 50%; - transform: translateX(-50%); + left: 25%; + // transform: translateX(-50%); background: url("~@/assets/pic/jdin.png") no-repeat; background-size: 100% 100%; - display: flex; + // display: flex; + // display: -webkit-box; + // flex-direction: row; overflow-x: hidden; transition: bottom 0.6s; - overflow-y: hidden; //重点 - + // overflow-y: hidden; //重点 + // z-index: 999; + padding: 0px 70px 0 70px; + box-sizing: border-box; + ::-webkit-scrollbar { + display: none; + } @media only screen and (max-height: 1000px) { bottom: 164px; } } - +.centerBottom3{ + width: 100%; + height: 100%; + // display: flex; + z-index: 999; + display: -webkit-box; + ::-webkit-scrollbar { + display: none; + } +} .lineBox { width: 810px; height: 9px; - background: #ffffff; - border-radius: 5px; - opacity: 0.1; + // background: #ffffff; + // border-radius: 5px; + // opacity: 0.5; position: absolute; top: 80px; - left: 80px; + left: 20px; + z-index: 10 !important; } .boxChild { - margin-left: 88px; + // margin-left: 70px; text-align: center; - + width: 140px !important; + height: 100%; + z-index: 999 !important; + // display: inline; + position: relative; + // left: 80px; + // float: left; div:nth-child(1) { font-size: 16px; font-weight: 500; - color: #1DFFFA; + color: #1dfffa; margin-bottom: 12px; margin-top: 20px; } @@ -837,7 +982,7 @@ export default { div:nth-child(2) { font-size: 12px; font-weight: 400; - color: #00DAD3; + color: #00dad3; } div:nth-child(3) { @@ -846,20 +991,19 @@ export default { // background: url("~@/assets/pic/finish.png") no-repeat; background-size: 100% 100%; margin: 6px auto; - } div:nth-child(4) { - font-size: 13px; + font-size: 12px; font-weight: 500; margin-bottom: 8px; - color: #0AFFFC; + color: #0afffc; } div:nth-child(5) { font-size: 14px; font-weight: bold; - color: #00FFF6; + color: #00fff6; } } @@ -915,7 +1059,6 @@ export default { overflow-y: hidden; //重点 } - .tableBox { width: 90%; height: 75%; @@ -924,8 +1067,8 @@ export default { left: 50%; transform: translateX(-50%); ::-webkit-scrollbar { - display: none; -} + display: none; + } } .securityCheck { @@ -946,7 +1089,7 @@ export default { .spoChild { margin: auto; padding: 1px; - border: 1px solid #00EBEB; + border: 1px solid #00ebeb; img { width: 100%; @@ -971,7 +1114,6 @@ export default { height: 100%; } } - } .pieBox { @@ -1032,7 +1174,7 @@ export default { position: absolute; left: 33px; top: 113px; - border: 1px solid #007B7B; + border: 1px solid #007b7b; @media only screen and (max-height: 1000px) { height: 86px; @@ -1133,14 +1275,14 @@ export default { .titLeft { width: 138px; height: 40px; - background: #025A5F; + background: #025a5f; line-height: 40px; text-align: center; span:nth-child(1), span:nth-child(2) { font-size: 14px; - color: #3CFFF9; + color: #3cfff9; letter-spacing: 1px; font-weight: 400; } @@ -1150,7 +1292,6 @@ export default { color: #fff; letter-spacing: 1px; font-weight: bold; - } } @@ -1159,7 +1300,7 @@ export default { padding-right: 25px; font-size: 14px; font-weight: 400; - color: #D1FFFE; + color: #d1fffe; span:nth-child(2) { display: inline-block; @@ -1171,7 +1312,6 @@ export default { background-size: 100% 100%; } } - } .title { @@ -1215,7 +1355,6 @@ export default { } } - .leftOneBox { height: 282px; width: 444px; @@ -1509,7 +1648,7 @@ export default { padding-right: 0 !important; } -/deep/ .el-table th>.cell { +/deep/ .el-table th > .cell { color: rgba(254, 254, 254, 1) !important; font-weight: 700 !important; } @@ -1534,7 +1673,7 @@ export default { border-radius: 6px; } -/deep/ .el-table--enable-row-hover .el-table__body tr:hover>td { +/deep/ .el-table--enable-row-hover .el-table__body tr:hover > td { background-color: transparent !important; /* color: #f19944; */ /* 设置文字颜色，可以选择不设置 */ @@ -1547,8 +1686,17 @@ export default { /deep/ .el-table .success-row { background: transparent; } +/* element滚动条组件 隐藏水平滚动条 */ +/deep/.el-scrollbar__thumb { + //可设置滚动条颜色 + background: greenyellow;//这里我设置成了透明色,可以根据需求添加自己想要的颜色 +} +/deep/ .el-scrollbar__wrap{ + margin-bottom:10px !important +} - diff --git a/src/views/progressComponents.vue b/src/views/progressComponents.vue index 03c0734..f5ffddd 100644 --- a/src/views/progressComponents.vue +++ b/src/views/progressComponents.vue @@ -13,7 +13,15 @@
-
+
+ {{item.label}} +
+ + + {{item.value}} +
+
+ @@ -57,7 +65,7 @@
+ :chart-data="qyList" :x-axis-data="qyList.map(item => item.name)" :projectInvestment="projectInvestment"/>
@@ -69,14 +77,14 @@
- - - + - +
@@ -90,10 +98,23 @@
+ chart-title="扫描数量分析" :chart-data="chartData" :x-axis-data="xArry" :executionInfo="executionInfo"/>
-
+
+ 任务名称：{{item.name}} + 开始时间：{{item.startTime}} + 计划工期：{{item.planTime}} + 结束时间：{{item.endTime}} + 当前状态：{{item.status}} +
+
@@ -129,17 +137,17 @@
- - + + - + - + - + @@ -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; }