admin/zhgdyun
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

merge dev-jack info shenzhen-dev

Browse Source
This commit is contained in:
Jack 2022-08-11 18:49:46 +08:00
commit 4dfe1f8a18
2 changed files with 393 additions and 278 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

465
src/assets/js/http.js
View File

@ -3,232 +3,239 @@ import axios from 'axios'
// import QS from 'qs' // import QS from 'qs'
import store from '@/store' import store from '@/store'
// import router from '../../router' // import router from '../../router'
import { import { Loading, Message } from 'element-ui'
Loading,
Message
} from 'element-ui'
Vue.prototype.$http = axios Vue.prototype.$http = axios
// Vue.prototype.qs = QS; // Vue.prototype.qs = QS;
// Vue.use(ElementUI) // Vue.use(ElementUI)
var loading; var loading
let needLoadingRequestCount = 0; let needLoadingRequestCount = 0
let showLoadingConfig = ''; let showLoadingConfig = ''
function getLang() { function getLang() {
let currentLanguage = store.state.currentLanguage let currentLanguage = store.state.currentLanguage
let langParam = '' let langParam = ''
switch (currentLanguage) { switch (currentLanguage) {
case 'zh': case 'zh':
langParam = 'zh_CN' langParam = 'zh_CN'
break; break
case 'en': case 'en':
langParam = 'en_US' langParam = 'en_US'
break; break
} }
return langParam return langParam
} }
// 环境的切换 // 环境的切换
if (process.env.NODE_ENV == 'development') { if (process.env.NODE_ENV == 'development') {
// axios.defaults.baseURL = 'http://8.142.139.165:7080' // 湖里区 // axios.defaults.baseURL = 'http://8.142.139.165:7080' // 湖里区
// axios.defaults.baseURL = 'http://124.71.87.250/' // axios.defaults.baseURL = 'http://124.71.87.250/'
// axios.defaults.baseURL = 'http://139.9.66.234:30/' // axios.defaults.baseURL = 'http://139.9.66.234:30/'
// axios.defaults.baseURL = 'http://14.29.220.211:6023/' // axios.defaults.baseURL = 'http://14.29.220.211:6023/'
// axios.defaults.baseURL = 'https://zhgd.loganwy.com/' //龙光 // axios.defaults.baseURL = 'https://zhgd.loganwy.com/' //龙光
// axios.defaults.baseURL = 'https://zhgd-uat.logan.com.cn/' // axios.defaults.baseURL = 'https://zhgd-uat.logan.com.cn/'
// axios.defaults.baseURL = 'http://36.137.53.203:9090/'; // 南昌地铁 17512009894 123456789 gdjt 123456789 // axios.defaults.baseURL = 'http://36.137.53.203:9090/' // 南昌地铁 17512009894 123456789 gdjt 87654321
// axios.defaults.baseURL = 'http://192.168.34.125:6023/' // axios.defaults.baseURL = 'http://192.168.34.125:6023/'
// axios.defaults.baseURL = 'http://124.71.178.44:100/' // 河南 // axios.defaults.baseURL = 'http://124.71.178.44:100/' // 河南
// tag: 本地 // tag: 本地
// axios.defaults.baseURL = 'http://192.168.34.174:6023/' // 老大本地 // axios.defaults.baseURL = 'http://192.168.34.174:6023/' // 老大本地
axios.defaults.baseURL = 'http://192.168.34.125:6023/'; //杨意本地 http/1.1 axios.defaults.baseURL = 'http://192.168.34.125:6023/' //杨意本地 http/1.1
// axios.defaults.baseURL = 'http://q59pa4.natappfree.cc/'; //杨 // axios.defaults.baseURL = 'http://192.168.34.231:6023/'; //杨思瑞本地
// axios.defaults.baseURL = 'http://192.168.34.231:6023/'; //杨思瑞本地 // axios.defaults.baseURL = 'http://47.97.202.104:6023/';
// axios.defaults.baseURL = 'http://47.97.202.104:6023/'; // axios.defaults.baseURL = 'http://124.71.178.44:9500/'; // 星璇
// axios.defaults.baseURL = 'http://124.71.178.44:9500/'; // 星璇 // axios.defaults.baseURL = 'http://120.196.217.6:7000/';
// axios.defaults.baseURL = 'http://120.196.217.6:7000/'; // axios.defaults.baseURL = 'http://139.9.66.234:8/';
// axios.defaults.baseURL = 'http://139.9.66.234:8/'; // axios.defaults.baseURL = 'http://120.196.217.6:7000/'; // 鹤洲
// axios.defaults.baseURL = 'http://120.196.217.6:7000/'; // 鹤洲 // axios.defaults.baseURL = 'http://182.90.224.237:7000/'; // 广西
// axios.defaults.baseURL = 'http://182.90.224.237:7000/'; // 广西 // axios.defaults.baseURL = 'http://120.196.217.6:7000/' //鹤洲
// axios.defaults.baseURL = 'http://120.196.217.6:7000/' //鹤洲
// axios.defaults.baseURL = 'http://117.156.17.59:9090/'; // // axios.defaults.baseURL = 'http://117.156.17.59:9090/'; //
// axios.defaults.baseURL = 'http://120.236.247.200:9000/'; //横琴线上 // axios.defaults.baseURL = 'http://120.236.247.200:9000/'; //横琴线上
// axios.defaults.baseURL = 'http://223.82.100.80:9000/'; //南昌地铁 // axios.defaults.baseURL = 'http://223.82.100.80:9000/'; //南昌地铁
// axios.defaults.baseURL = 'http://139.9.66.234:40001/'; //南昌地铁二期 // axios.defaults.baseURL = 'http://139.9.66.234:40001/'; //南昌地铁二期
// axios.defaults.baseURL = 'http://124.71.178.44:30/'; // axios.defaults.baseURL = 'http://124.71.178.44:30/';
// axios.defaults.baseURL = 'http://192.168.34.125:9090/'; // axios.defaults.baseURL = 'http://192.168.34.125:9090/';
// axios.defaults.baseURL = 'http://192.168.88.220:6023/'; // axios.defaults.baseURL = 'http://192.168.88.220:6023/';
// axios.defaults.baseURL = 'https://192.168.34.125:6688/'; //本地 http/2 // axios.defaults.baseURL = 'https://192.168.34.125:6688/'; //本地 http/2
// axios.defaults.baseURL = 'http://124.71.178.44:8/'; //本地 http/3 // axios.defaults.baseURL = 'http://124.71.178.44:8/'; //本地 http/3
// axios.defaults.baseURL = 'http://124.71.178.44:9000/'; //中建 cscec101 123456 // axios.defaults.baseURL = 'http://124.71.178.44:9000/'; //中建 cscec101 123456
// axios.defaults.baseURL = 'https://jk.cscec1b1.com:5138/';//沃尔 // axios.defaults.baseURL = 'https://jk.cscec1b1.com:5138/';//沃尔
// axios.defaults.baseURL = 'http://61.190.32.219:9050/' // axios.defaults.baseURL = 'http://61.190.32.219:9050/'
// axios.defaults.baseURL = 'http://183.95.84.54:5800/'//合展-宿迁 zxsd 123456 // axios.defaults.baseURL = 'http://183.95.84.54:5800/'//合展-宿迁 zxsd 123456
// axios.defaults.baseURL = 'http://183.95.84.54:9500/'//贵州-敏尚 17512075572 123456 // axios.defaults.baseURL = 'http://183.95.84.54:9500/'//贵州-敏尚 17512075572 123456
// axios.defaults.baseURL = 'http://183.95.84.34:7185/' //测试服 // axios.defaults.baseURL = 'http://183.95.84.34:7185/' //测试服
// axios.defaults.baseURL = 'http://183.60.227.61:30246/' // axios.defaults.baseURL = 'http://183.60.227.61:30246/'
// axios.defaults.baseURL = 'http://183.60.227.61:30249/' //测试服2 // axios.defaults.baseURL = 'http://183.60.227.61:30249/' //测试服2
// axios.defaults.baseURL = 'http://183.60.227.61:20561/' //龙光地产 龙光地产 123456 // axios.defaults.baseURL = 'http://183.60.227.61:20561/' //龙光地产 龙光地产 123456
// axios.defaults.baseURL = 'http://218.92.215.138:9090/' //盐城 新佳城小区 123456 // axios.defaults.baseURL = 'http://218.92.215.138:9090/' //盐城 新佳城小区 123456
// axios.defaults.baseURL = 'http://36.137.53.203:9090/' //盐城 gdjt 123456789 // axios.defaults.baseURL = 'http://36.137.53.203:9090/' //盐城 gdjt 123456789
// axios.defaults.baseURL = 'http://183.234.150.152:9090/' //华发 huaxin 123456789 // axios.defaults.baseURL = 'http://183.234.150.152:9090/' //华发 huaxin 123456789
} } else if (process.env.NODE_ENV == 'debug') {
else if (process.env.NODE_ENV == 'debug') { axios.defaults.baseURL = 'https://www.ceshi.com'
axios.defaults.baseURL = 'https://www.ceshi.com';
} else if (process.env.NODE_ENV == 'production') { } else if (process.env.NODE_ENV == 'production') {
let host = window.location.host; let host = window.location.host
axios.defaults.baseURL = window.location.protocol + "//" + host + "/" axios.defaults.baseURL = window.location.protocol + '//' + host + '/'
// axios.defaults.baseURL ='http://192.168.34.125:6023/' // axios.defaults.baseURL ='http://192.168.34.125:6023/'
// axios.defaults.baseURL = window.location.protocol + "//" + host.split(":")[0] + ":6023" + "/" // axios.defaults.baseURL = window.location.protocol + "//" + host.split(":")[0] + ":6023" + "/"
// axios.defaults.baseURL = 'http://zhgd.loganwy.com/' // axios.defaults.baseURL = 'http://zhgd.loganwy.com/'
} }
// tag: 河南 // tag: 河南
if (COMPANY == 'henan') { if (COMPANY == 'henan') {
axios.defaults.baseURL = 'http://124.71.178.44:100/' axios.defaults.baseURL = 'http://124.71.178.44:100/'
} }
// axios.defaults.baseURL = store.getters.BASEURL //'http://124.71.178.44:100/'axios.defaults.timeout = 600000; // axios.defaults.baseURL = store.getters.BASEURL //'http://124.71.178.44:100/'axios.defaults.timeout = 600000;
// console.log('store.state.userInfo',store) // console.log('store.state.userInfo',store)
if (store.state.userInfo) { if (store.state.userInfo) {
axios.defaults.headers.common['Authorization'] = 'Bearer' + ' ' + store.state.userInfo.token; axios.defaults.headers.common['Authorization'] = 'Bearer' + ' ' + store.state.userInfo.token
axios.defaults.headers.common['operateId'] = store.state.userInfo.userId; axios.defaults.headers.common['operateId'] = store.state.userInfo.userId
} }
// http请求拦截器 // http请求拦截器
axios.interceptors.request.use(config => { axios.interceptors.request.use(
config => {
// 分屏插件兼容配置 // 分屏插件兼容配置
const screensBaseURL = sessionStorage.getItem('screens-baseURL') const screensBaseURL = sessionStorage.getItem('screens-baseURL')
if (config.url.indexOf(screensBaseURL) !== -1) { if (config.url.indexOf(screensBaseURL) !== -1) {
delete config.headers.common['operateId'] delete config.headers.common['operateId']
if(config.url === screensBaseURL + '/login') { if (config.url === screensBaseURL + '/login') {
const Authorization = sessionStorage.getItem('screens-Authorization') const Authorization = sessionStorage.getItem('screens-Authorization')
config.headers.common['Authorization'] = Authorization config.headers.common['Authorization'] = Authorization
} else { } else {
delete config.headers.common['Authorization'] delete config.headers.common['Authorization']
const token = sessionStorage.getItem('screens-token') const token = sessionStorage.getItem('screens-token')
config.headers.common['token'] = token config.headers.common['token'] = token
} }
return config return config
} }
if (showLoadingConfig == '' || showLoadingConfig == undefined) { if (showLoadingConfig == '' || showLoadingConfig == undefined) {
showFullScreenLoading() showFullScreenLoading()
} }
return config return config
}, error => { },
error => {
tryHideFullScreenLoading() tryHideFullScreenLoading()
// Message.error('加载超时'); // Message.error('加载超时');
return Promise.reject(error) return Promise.reject(error)
}) }
)
// 响应拦截器 // 响应拦截器
axios.interceptors.response.use( axios.interceptors.response.use(
response => { response => {
tryHideFullScreenLoading() tryHideFullScreenLoading()
if (response.status === 200) { if (response.status === 200) {
return Promise.resolve(response); return Promise.resolve(response)
} else { } else {
return Promise.reject(response); return Promise.reject(response)
}
},
// 服务器状态码不是2开头的的情况
// 这里可以跟你们的后台开发人员协商好统一的错误状态码
// 然后根据返回的状态码进行一些操作，例如登录过期提示，错误提示等等
// 下面列举几个常见的操作，其他需求可自行扩展
error => {
tryHideFullScreenLoading()
if (error.response.status) {
console.log('----------',error.response)
let errorUrl = error.response.config.baseURL
console.log('-----------------',errorUrl)
let screensUrl = sessionStorage.getItem('screens-baseURL')
if(errorUrl == screensUrl){
return
}else {
switch (error.response.status) {
// 401: 未登录
// 未登录则跳转登录页面，并携带当前页面的路径
// 在登录成功后返回当前页面，这一步需要在登录页操作。
case 401:
Message.error('会话已失效，请重新登录');
logout()
break;
// 403 token过期
// 登录过期对用户进行提示
// 清除本地token和清空vuex中token对象
// 跳转登录页面
case 403:
Message.error('登录过期，请重新登录');
logout()
break;
// 404请求不存在
case 404:
Message.error('网络请求不存在');
break;
case 500:
Message.error('服务器错误');
break;
}
return Promise.reject(error.response);
}
}
} }
); },
// 服务器状态码不是2开头的的情况
// 这里可以跟你们的后台开发人员协商好统一的错误状态码
// 然后根据返回的状态码进行一些操作，例如登录过期提示，错误提示等等
// 下面列举几个常见的操作，其他需求可自行扩展
error => {
tryHideFullScreenLoading()
if (error.response.status) {
console.log('----------', error.response)
let errorUrl = error.response.config.baseURL
console.log('-----------------', errorUrl)
let screensUrl = sessionStorage.getItem('screens-baseURL')
const url = error.response.url
if (errorUrl == screensUrl || url === '26938512:7zS9LX2X8u4tW4Ps0ZjN/login') {
return
} else {
switch (error.response.status) {
// 401: 未登录
// 未登录则跳转登录页面，并携带当前页面的路径
// 在登录成功后返回当前页面，这一步需要在登录页操作。
case 401:
Message.error('会话已失效，请重新登录')
logout()
break
// 403 token过期
// 登录过期对用户进行提示
// 清除本地token和清空vuex中token对象
// 跳转登录页面
case 403:
Message.error('登录过期，请重新登录')
logout()
break
// 404请求不存在
case 404:
Message.error('网络请求不存在')
break
case 500:
Message.error('服务器错误')
break
}
return Promise.reject(error.response)
}
}
}
)
/** /**
* get方法，对应get请求 * get方法，对应get请求
* @param {String} url [请求的url地址] * @param {String} url [请求的url地址]
* @param {Object} params [请求时携带的参数] * @param {Object} params [请求时携带的参数]
*/ */
function logout() { function logout() {
store.commit('setUserInfo', null) store.commit('setUserInfo', null)
store.commit('setMapBackArr', []) store.commit('setMapBackArr', [])
store.commit('setMoudle', null) store.commit('setMoudle', null)
store.commit('setProDetail', null) store.commit('setProDetail', null)
sessionStorage.clear() sessionStorage.clear()
let json = { let json = {
name: '工作站', name: '工作站',
id: 1, id: 1,
url: '/projectV2/taskList', url: '/projectV2/taskList',
menuList: [{ menuList: [
id: 100000, {
menuName: "任务清单", id: 100000,
path: "/projectV2/taskList" menuName: '任务清单',
}, { path: '/projectV2/taskList'
id: 100001, },
menuName: "通知公告", {
path: "/projectV2/noticeList" id: 100001,
}, { menuName: '通知公告',
id: 100002, path: '/projectV2/noticeList'
menuName: "工作日程", },
path: "/projectV2/workerSchedule" {
}] id: 100002,
menuName: '工作日程',
path: '/projectV2/workerSchedule'
}
]
} }
this.$store.commit("setCurModule", json); this.$store.commit('setCurModule', json)
setTimeout(() => { setTimeout(() => {
window.location.href = "/index.html#/login" window.location.href = '/index.html#/login'
}, 1000) }, 1000)
} }
export function get(url, params, config) { export function get(url, params, config) {
showLoadingConfig = config showLoadingConfig = config
url = url + '?lang=' + getLang() url = url + '?lang=' + getLang()
return new Promise((resolve, reject) => { return new Promise((resolve, reject) => {
axios.get(url, { axios
params: params .get(url, {
}).then(res => { params: params
if (res.data.code == 200) { })
resolve(res.data); .then(res => {
} else { if (res.data.code == 200) {
Message.error(res.data.message); resolve(res.data)
} } else {
}).catch(err => { Message.error(res.data.message)
reject(err.data) }
}) })
}); .catch(err => {
reject(err.data)
})
})
} }
/** /**
@ -237,25 +244,26 @@ export function get(url, params, config) {
* @param {Object} params [请求时携带的参数] * @param {Object} params [请求时携带的参数]
*/ */
export function post(url, params, config) { export function post(url, params, config) {
showLoadingConfig = config showLoadingConfig = config
url = url + '?lang=' + getLang() url = url + '?lang=' + getLang()
return new Promise((resolve, reject) => { return new Promise((resolve, reject) => {
axios.post(url, params) axios
.then(res => { .post(url, params)
if (res.data.code == 200) { .then(res => {
resolve(res.data); if (res.data.code == 200) {
} else { resolve(res.data)
if (res.data.status !== 'SUCCESS') { } else {
Message.error(res.data.message); if (res.data.status !== 'SUCCESS') {
}else{ Message.error(res.data.message)
resolve(res.data); } else {
} resolve(res.data)
} }
}) }
.catch(err => { })
reject(err.data) .catch(err => {
}) reject(err.data)
}); })
})
} }
/** /**
* put方法，对应put请求 * put方法，对应put请求
@ -263,46 +271,47 @@ export function post(url, params, config) {
* @param {Object} params [请求时携带的参数] * @param {Object} params [请求时携带的参数]
*/ */
export function put(url, params, config) { export function put(url, params, config) {
showLoadingConfig = config showLoadingConfig = config
url = url + '?lang=' + getLang() url = url + '?lang=' + getLang()
return new Promise((resolve, reject) => { return new Promise((resolve, reject) => {
axios.put(url, params) axios
.then(res => { .put(url, params)
if (res.data.code == 200) { .then(res => {
resolve(res.data); if (res.data.code == 200) {
} else { resolve(res.data)
Message.error(res.data.message); } else {
} Message.error(res.data.message)
}) }
.catch(err => { })
reject(err.data) .catch(err => {
}) reject(err.data)
}); })
})
} }
export function showFullScreenLoading() { export function showFullScreenLoading() {
if (needLoadingRequestCount === 0) { if (needLoadingRequestCount === 0) {
startLoading() startLoading()
} }
needLoadingRequestCount++ needLoadingRequestCount++
} }
export function tryHideFullScreenLoading() { export function tryHideFullScreenLoading() {
if (needLoadingRequestCount <= 0) return if (needLoadingRequestCount <= 0) return
needLoadingRequestCount-- needLoadingRequestCount--
if (needLoadingRequestCount === 0) { if (needLoadingRequestCount === 0) {
endLoading() endLoading()
} }
} }
function startLoading() { function startLoading() {
loading = Loading.service({ loading = Loading.service({
lock: true, lock: true,
text: '加载中...', text: '加载中...',
spinner: 'el-icon-loading', spinner: 'el-icon-loading',
background: 'rgba(0, 0, 0, 0.5)' background: 'rgba(0, 0, 0, 0.5)'
}) })
} }
function endLoading() { function endLoading() {
loading.close() loading.close()
} }

206
src/views/projectAdmin/jlw/planProgress/centerTop.vue
View File

@ -1,13 +1,13 @@
<template> <template>
<Card :title="title"> <Card :title="title">
<div class="gantt-chart"> <div class="gantt-chart">
<div class="table"> <div class="table" @scroll="handleScroll">
<div class="thead"> <div class="thead">
<div class="row"> <div class="row">
<div class="td">分部分项工程名称</div> <div class="td">分部分项工程名称</div>
<div class="td">开始日期</div> <div class="td">开始日期</div>
<div class="td">完成日期</div> <div class="td">完成日期</div>
<div class="td" v-for="date in dates" :key="date"> <div class="td" v-for="date in dateList" :key="date">
<div class="date"> <div class="date">
<div class="month"> <div class="month">
{{ date }} {{ date }}
@ -25,33 +25,39 @@
<div class="td" @click="handleOpen(i)">{{ p.pName }}</div> <div class="td" @click="handleOpen(i)">{{ p.pName }}</div>
<div class="td">{{ p.startTime }}</div> <div class="td">{{ p.startTime }}</div>
<div class="td">{{ p.endTime }}</div> <div class="td">{{ p.endTime }}</div>
<div class="td" v-for="date in dates" :key="date + 'grid-date'"> <div class="td" v-for="date in dateList" :key="date + 'grid-date'">
<div class="grids"> <div class="grids">
<div class="grid" v-for="day in getDays(date)" :key="'grid' + day.num" :ref="p.pName + '-' + day.date"></div> <div class="grid" v-for="day in getDays(date)" :key="'grid' + day.num" :ref="p.pName + '-' + day.date"></div>
</div> </div>
</div> </div>
<div class="progress" :style="{ left: gantt.left, width: gantt.width }" v-for="(gantt, index) in p.gantts" :key="index"></div> <div
class="progress"
:style="gantt"
v-for="(gantt, index) in p.gantts"
:key="index"
@mouseenter="handleHover"
@mouseleave="handleLeave"
></div>
</div> </div>
<div class="children"> <div class="children">
<div class="row" v-for="child in p.children" :key="'child-' + child.pName"> <div class="row" v-for="child in p.children" :key="'child-' + child.pName">
<div class="td">{{ child.pName }}</div> <div class="td">{{ child.pName }}</div>
<div class="td">{{ child.startTime }}</div> <div class="td">{{ child.startTime }}</div>
<div class="td">{{ child.endTime }}</div> <div class="td">{{ child.endTime }}</div>
<div class="td" v-for="date in dates" :key="date + 'grid-date'"> <div class="td" v-for="date in dateList" :key="date + 'grid-date'">
<div class="grids"> <div class="grids">
<div class="grid" v-for="day in getDays(date)" :key="'grid' + day.num" :ref="child.pName + '-' + day.date"></div> <div class="grid" v-for="day in getDays(date)" :key="'grid' + day.num" :ref="child.pName + '-' + day.date"></div>
</div> </div>
</div> </div>
<div <div class="progress" :style="gantt" v-for="(gantt, index) in child.gantts" :key="index"></div>
class="progress"
:style="{ left: gantt.left, width: gantt.width }"
v-for="(gantt, index) in child.gantts"
:key="index"
></div>
</div> </div>
</div> </div>
</div> </div>
</div> </div>
<div class="tooltips" :style="tooltipsStyle">
<div class="status">已逾期5天</div>
<div class="charger">负责人：史蒂夫</div>
</div>
</div> </div>
</div> </div>
</Card> </Card>
@ -75,64 +81,86 @@ export default {
}, },
data() { data() {
return { return {
dates: ['2020/03', '2020/04', '2020/05', '2020/06', '2020/07', '2020/08'],
projects: [ projects: [
{ {
pName: '地基与基础工程', pName: '地基与基础工程',
startTime: '2020/04/06', startTime: '2020/04/06',
endTime: '2020/05/09', endTime: '2020/05/09',
delay: 10,
status: 0,
gantts: [], gantts: [],
// gantts: [{ left: '420px', width: '100px', status: '' }], // gantts: [{ left: '420px', width: '100px', status: '' }],
children: [ children: [
{ pName: '无支护土方工程', startTime: '2020/04/06', endTime: '2020/04/09', gantts: [] }, { pName: '无支护土方工程', startTime: '2020/04/06', endTime: '2020/04/09', status: 1 },
{ pName: '有支护土方工程', startTime: '2020/04/10', endTime: '2020/05/08', gantts: [] } { pName: '有支护土方工程', startTime: '2020/04/10', endTime: '2020/05/08', status: 3 }
] ]
}, },
{ pName: '主体结构', startTime: '2020/03/12', endTime: '2020/06/04' }, { pName: '主体结构', startTime: '2020/03/12', endTime: '2020/06/04', status: 2 },
{ pName: '建筑装饰装修', startTime: '2020/04/21', endTime: '2020/07/30', gantts: [] } { pName: '建筑装饰装修', startTime: '2020/04/21', endTime: '2020/07/30', status: 1 }
], ],
openedIndex: 9999 openedIndex: 9999,
colors: ['#4C87FF', '#54CF8E', '#F2D026', '#FF6C7F'],
tooltipsStyle: {
display: 'none',
left: 0,
top: 0
},
scrollLeft: 0,
scrollTimer: 0
} }
}, },
methods: { methods: {
getGanttStyle(project) {
let { startTime, endTime, pName } = project
const startArr = startTime.split('/')
const endArr = endTime.split('/')
let startRef = null
let endRef = null
if (!(startArr[2] % 2)) {
const day = startArr[2] - 1
startArr[2] = day < 10 ? '0' + day : day
startTime = startArr.join('/')
console.log(startTime, 'xxx')
}
if (!(endArr[2] % 2)) {
const day = endArr[2] - 1
endArr[2] = day < 10 ? '0' + day : day
endTime = endArr.join('/')
console.log(endTime, 'xxx')
}
startRef = this.$refs[`${pName}-${startTime}`][0]
const startLeft = startRef.offsetLeft
endRef = this.$refs[`${pName}-${endTime}`][0]
const endWidth = endRef.offsetWidth
const endLeft = endRef.offsetLeft
const ganttWidth = endLeft - startLeft + endWidth
return { left: startLeft + 'px', width: ganttWidth + 'px' }
},
setGantts() { setGantts() {
const configGantts = projects => { const configGantts = projects => {
projects.map(project => { projects.map(project => {
let { startTime, endTime, pName, gantts } = project let { endTime, pName, gantts } = project
const startArr = startTime.split('/') const gantt = this.getGanttStyle(project)
const endArr = endTime.split('/') gantt.background = this.colors[project.status]
let startRef = null
let endRef = null
if (!(startArr[2] % 2)) {
const day = startArr[2] - 1
startArr[2] = day < 10 ? '0' + day : day
startTime = startArr.join('/')
console.log(startTime, 'xxx')
}
if (!(endArr[2] % 2)) {
const day = endArr[2] - 1
endArr[2] = day < 10 ? '0' + day : day
endTime = endArr.join('/')
console.log(endTime, 'xxx')
}
startRef = this.$refs[`${pName}-${startTime}`][0]
const startLeft = startRef.offsetLeft
endRef = this.$refs[`${pName}-${endTime}`][0]
const endWidth = endRef.offsetWidth
const endLeft = endRef.offsetLeft
const ganttWidth = endLeft - startLeft + endWidth
const gantt = { left: startLeft + 'px', width: ganttWidth + 'px' }
if (gantts) { if (gantts) {
gantts.push(gantt) gantts.push(gantt)
} else { } else {
project.gantts = [gantt] project.gantts = [gantt]
} }
console.log(startLeft, ganttWidth, '丢雷', `${pName}-${endTime}`) if (project.delay) {
const delayStartTime = this.increaseDate(endTime, 1)
const delayEndTime = this.increaseDate(endTime, project.delay)
const gantt = this.getGanttStyle({ startTime: delayStartTime, endTime: delayEndTime, pName })
gantt.background = this.colors[3]
gantts.push(gantt)
console.log(gantt, '是的发生的范范')
}
// debugger // debugger
project.children && configGantts(project.children) project.children && configGantts(project.children)
@ -140,6 +168,13 @@ export default {
} }
configGantts(this.projects) configGantts(this.projects)
}, },
increaseDate(date, delay) {
const timestamp = new Date(date).getTime() + (delay + 1) * 1000 * 60 * 60 * 24
return new Date(timestamp)
.toISOString()
.replace(/-/g, '/')
.slice(0, 10)
},
getDays(date) { getDays(date) {
const year = date.split('/')[0] const year = date.split('/')[0]
const month = +date.split('/')[1] const month = +date.split('/')[1]
@ -182,6 +217,46 @@ export default {
} else { } else {
this.openedIndex = index this.openedIndex = index
} }
},
handleScroll(e) {
if (this.scrollTimer) {
clearTimeout(this.scrollTimer)
}
this.scrollTimer = setTimeout(() => {
this.scrollLeft = e.target.scrollLeft
this.scrollTimer = null
}, 100)
},
handleHover(e) {
const { clientX, clientY } = e
const decreaseLeft = clientX - 680
const decreaseTop = clientY - 200
this.tooltipsStyle = {
left: decreaseLeft + this.scrollLeft + 'px',
top: decreaseTop + 'px',
display: 'block'
}
},
handleLeave() {
this.tooltipsStyle = {
display: 'none'
}
}
},
computed: {
dateList() {
let dates = []
const mapDates = data => {
data.map(p => {
dates.push(p.startTime)
dates.push(p.endTime)
p.children && mapDates(p.children)
})
}
mapDates(this.projects)
dates = dates.map(date => date.slice(0, 7)).sort()
dates = [...new Set(dates)]
return dates
} }
} }
} }
@ -191,8 +266,19 @@ export default {
.gantt-chart { .gantt-chart {
height: 100%; height: 100%;
.table { .table {
position: relative;
height: 100%; height: 100%;
overflow-x: auto; overflow-x: auto;
&::-webkit-scrollbar {
width: 10px;
height: 8px;
cursor: pointer;
}
&::-webkit-scrollbar-thumb {
border-radius: 10px;
background-color: skyblue;
}
.thead { .thead {
border-bottom: 1px solid #234d5f; border-bottom: 1px solid #234d5f;
.row { .row {
@ -234,6 +320,7 @@ export default {
border-left: 1px solid #234d5f; border-left: 1px solid #234d5f;
.row-groups { .row-groups {
position: relative; position: relative;
height: 42px;
&::before { &::before {
content: ''; content: '';
position: absolute; position: absolute;
@ -248,13 +335,11 @@ export default {
z-index: 99; z-index: 99;
} }
&.open { &.open {
height: unset;
&::before { &::before {
border-left-color: transparent; border-left-color: transparent;
border-top-color: #5be1f4; border-top-color: #5be1f4;
} }
.children {
display: block;
}
} }
> .row .td:first-child { > .row .td:first-child {
user-select: none; user-select: none;
@ -302,11 +387,10 @@ export default {
top: calc(50% - 7px); top: calc(50% - 7px);
width: 20px; width: 20px;
height: 14px; height: 14px;
background: pink; background: #557dee;
} }
} }
.children { .children {
display: none;
.td { .td {
height: 38px; height: 38px;
line-height: 38px; line-height: 38px;
@ -315,6 +399,28 @@ export default {
} }
} }
} }
.tooltips {
position: absolute;
box-sizing: border-box;
padding: 10px;
width: 130px;
height: 65px;
font-size: 14px;
color: #fff;
border-radius: 8px;
background-color: #50a6b3;
.status {
display: inline-block;
margin-bottom: 6px;
padding: 0 10px;
height: 20px;
min-width: 60px;
line-height: 20px;
font-size: 12px;
border-radius: 10px;
background-color: #ff6c7f;
}
}
} }
} }
</style> </style>