merge dev-jack info shenzhen-dev
This commit is contained in:
Jack
commit
4dfe1f8a18
@ -3,232 +3,239 @@ import axios from 'axios'
|
||||
// import QS from 'qs'
|
||||
import store from '@/store'
|
||||
// import router from '../../router'
|
||||
import {
|
||||
Loading,
|
||||
Message
|
||||
} from 'element-ui'
|
||||
import { Loading, Message } from 'element-ui'
|
||||
|
||||
Vue.prototype.$http = axios
|
||||
// Vue.prototype.qs = QS;
|
||||
// Vue.use(ElementUI)
|
||||
var loading;
|
||||
let needLoadingRequestCount = 0;
|
||||
let showLoadingConfig = '';
|
||||
var loading
|
||||
let needLoadingRequestCount = 0
|
||||
let showLoadingConfig = ''
|
||||
|
||||
function getLang() {
|
||||
let currentLanguage = store.state.currentLanguage
|
||||
let langParam = ''
|
||||
switch (currentLanguage) {
|
||||
case 'zh':
|
||||
langParam = 'zh_CN'
|
||||
break;
|
||||
case 'en':
|
||||
langParam = 'en_US'
|
||||
break;
|
||||
}
|
||||
return langParam
|
||||
let currentLanguage = store.state.currentLanguage
|
||||
let langParam = ''
|
||||
switch (currentLanguage) {
|
||||
case 'zh':
|
||||
langParam = 'zh_CN'
|
||||
break
|
||||
case 'en':
|
||||
langParam = 'en_US'
|
||||
break
|
||||
}
|
||||
return langParam
|
||||
}
|
||||
// 环境的切换
|
||||
if (process.env.NODE_ENV == 'development') {
|
||||
// axios.defaults.baseURL = 'http://8.142.139.165:7080' // 湖里区
|
||||
// axios.defaults.baseURL = 'http://124.71.87.250/'
|
||||
// axios.defaults.baseURL = 'http://139.9.66.234:30/'
|
||||
// axios.defaults.baseURL = 'http://14.29.220.211:6023/'
|
||||
// axios.defaults.baseURL = 'https://zhgd.loganwy.com/' //龙光
|
||||
// axios.defaults.baseURL = 'https://zhgd-uat.logan.com.cn/'
|
||||
// axios.defaults.baseURL = 'http://8.142.139.165:7080' // 湖里区
|
||||
// axios.defaults.baseURL = 'http://124.71.87.250/'
|
||||
// axios.defaults.baseURL = 'http://139.9.66.234:30/'
|
||||
// axios.defaults.baseURL = 'http://14.29.220.211:6023/'
|
||||
// axios.defaults.baseURL = 'https://zhgd.loganwy.com/' //龙光
|
||||
// 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://124.71.178.44:100/' // 河南
|
||||
// tag: 本地
|
||||
// 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://q59pa4.natappfree.cc/'; //杨
|
||||
// axios.defaults.baseURL = 'http://192.168.34.231:6023/'; //杨思瑞本地
|
||||
// axios.defaults.baseURL = 'http://47.97.202.104:6023/';
|
||||
// axios.defaults.baseURL = 'http://124.71.178.44:9500/'; // 星璇
|
||||
// axios.defaults.baseURL = 'http://120.196.217.6:7000/';
|
||||
// axios.defaults.baseURL = 'http://139.9.66.234:8/';
|
||||
// axios.defaults.baseURL = 'http://120.196.217.6:7000/'; // 鹤洲
|
||||
// axios.defaults.baseURL = 'http://182.90.224.237:7000/'; // 广西
|
||||
// axios.defaults.baseURL = 'http://120.196.217.6:7000/' //鹤洲
|
||||
|
||||
// axios.defaults.baseURL = 'http://192.168.34.125:6023/'
|
||||
// axios.defaults.baseURL = 'http://124.71.178.44:100/' // 河南
|
||||
// tag: 本地
|
||||
// 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.231:6023/'; //杨思瑞本地
|
||||
// axios.defaults.baseURL = 'http://47.97.202.104:6023/';
|
||||
// axios.defaults.baseURL = 'http://124.71.178.44:9500/'; // 星璇
|
||||
// axios.defaults.baseURL = 'http://120.196.217.6:7000/';
|
||||
// axios.defaults.baseURL = 'http://139.9.66.234:8/';
|
||||
// axios.defaults.baseURL = 'http://120.196.217.6:7000/'; // 鹤洲
|
||||
// axios.defaults.baseURL = 'http://182.90.224.237:7000/'; // 广西
|
||||
// axios.defaults.baseURL = 'http://120.196.217.6:7000/' //鹤洲
|
||||
|
||||
// axios.defaults.baseURL = 'http://117.156.17.59:9090/'; //
|
||||
// axios.defaults.baseURL = 'http://120.236.247.200:9000/'; //横琴线上
|
||||
// axios.defaults.baseURL = 'http://223.82.100.80:9000/'; //南昌地铁
|
||||
// axios.defaults.baseURL = 'http://139.9.66.234:40001/'; //南昌地铁二期
|
||||
// axios.defaults.baseURL = 'http://124.71.178.44:30/';
|
||||
// axios.defaults.baseURL = 'http://192.168.34.125:9090/';
|
||||
// axios.defaults.baseURL = 'http://192.168.88.220:6023/';
|
||||
// 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:9000/'; //中建 cscec101 123456
|
||||
// axios.defaults.baseURL = 'https://jk.cscec1b1.com:5138/';//沃尔
|
||||
// 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:9500/'//贵州-敏尚 17512075572 123456
|
||||
// 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:30249/' //测试服2
|
||||
// axios.defaults.baseURL = 'http://183.60.227.61:20561/' //龙光地产 龙光地产 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://183.234.150.152:9090/' //华发 huaxin 123456789
|
||||
}
|
||||
else if (process.env.NODE_ENV == 'debug') {
|
||||
axios.defaults.baseURL = 'https://www.ceshi.com';
|
||||
// axios.defaults.baseURL = 'http://117.156.17.59:9090/'; //
|
||||
// axios.defaults.baseURL = 'http://120.236.247.200:9000/'; //横琴线上
|
||||
// axios.defaults.baseURL = 'http://223.82.100.80:9000/'; //南昌地铁
|
||||
// axios.defaults.baseURL = 'http://139.9.66.234:40001/'; //南昌地铁二期
|
||||
// axios.defaults.baseURL = 'http://124.71.178.44:30/';
|
||||
// axios.defaults.baseURL = 'http://192.168.34.125:9090/';
|
||||
// axios.defaults.baseURL = 'http://192.168.88.220:6023/';
|
||||
// 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:9000/'; //中建 cscec101 123456
|
||||
// axios.defaults.baseURL = 'https://jk.cscec1b1.com:5138/';//沃尔
|
||||
// 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:9500/'//贵州-敏尚 17512075572 123456
|
||||
// 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:30249/' //测试服2
|
||||
// axios.defaults.baseURL = 'http://183.60.227.61:20561/' //龙光地产 龙光地产 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://183.234.150.152:9090/' //华发 huaxin 123456789
|
||||
} else if (process.env.NODE_ENV == 'debug') {
|
||||
axios.defaults.baseURL = 'https://www.ceshi.com'
|
||||
} else if (process.env.NODE_ENV == 'production') {
|
||||
let host = window.location.host;
|
||||
axios.defaults.baseURL = window.location.protocol + "//" + host + "/"
|
||||
// axios.defaults.baseURL ='http://192.168.34.125:6023/'
|
||||
// axios.defaults.baseURL = window.location.protocol + "//" + host.split(":")[0] + ":6023" + "/"
|
||||
// axios.defaults.baseURL = 'http://zhgd.loganwy.com/'
|
||||
let host = window.location.host
|
||||
axios.defaults.baseURL = window.location.protocol + '//' + host + '/'
|
||||
// axios.defaults.baseURL ='http://192.168.34.125:6023/'
|
||||
// axios.defaults.baseURL = window.location.protocol + "//" + host.split(":")[0] + ":6023" + "/"
|
||||
// axios.defaults.baseURL = 'http://zhgd.loganwy.com/'
|
||||
}
|
||||
|
||||
// tag: 河南
|
||||
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;
|
||||
|
||||
// console.log('store.state.userInfo',store)
|
||||
if (store.state.userInfo) {
|
||||
axios.defaults.headers.common['Authorization'] = 'Bearer' + ' ' + store.state.userInfo.token;
|
||||
axios.defaults.headers.common['operateId'] = store.state.userInfo.userId;
|
||||
axios.defaults.headers.common['Authorization'] = 'Bearer' + ' ' + store.state.userInfo.token
|
||||
axios.defaults.headers.common['operateId'] = store.state.userInfo.userId
|
||||
}
|
||||
// http请求拦截器
|
||||
axios.interceptors.request.use(config => {
|
||||
axios.interceptors.request.use(
|
||||
config => {
|
||||
// 分屏插件兼容配置
|
||||
const screensBaseURL = sessionStorage.getItem('screens-baseURL')
|
||||
if (config.url.indexOf(screensBaseURL) !== -1) {
|
||||
delete config.headers.common['operateId']
|
||||
if(config.url === screensBaseURL + '/login') {
|
||||
const Authorization = sessionStorage.getItem('screens-Authorization')
|
||||
config.headers.common['Authorization'] = Authorization
|
||||
} else {
|
||||
delete config.headers.common['Authorization']
|
||||
const token = sessionStorage.getItem('screens-token')
|
||||
config.headers.common['token'] = token
|
||||
}
|
||||
return config
|
||||
delete config.headers.common['operateId']
|
||||
if (config.url === screensBaseURL + '/login') {
|
||||
const Authorization = sessionStorage.getItem('screens-Authorization')
|
||||
config.headers.common['Authorization'] = Authorization
|
||||
} else {
|
||||
delete config.headers.common['Authorization']
|
||||
const token = sessionStorage.getItem('screens-token')
|
||||
config.headers.common['token'] = token
|
||||
}
|
||||
return config
|
||||
}
|
||||
|
||||
if (showLoadingConfig == '' || showLoadingConfig == undefined) {
|
||||
showFullScreenLoading()
|
||||
showFullScreenLoading()
|
||||
}
|
||||
return config
|
||||
}, error => {
|
||||
},
|
||||
error => {
|
||||
tryHideFullScreenLoading()
|
||||
// Message.error('加载超时');
|
||||
return Promise.reject(error)
|
||||
})
|
||||
}
|
||||
)
|
||||
// 响应拦截器
|
||||
axios.interceptors.response.use(
|
||||
response => {
|
||||
tryHideFullScreenLoading()
|
||||
if (response.status === 200) {
|
||||
return Promise.resolve(response);
|
||||
} else {
|
||||
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);
|
||||
}
|
||||
}
|
||||
response => {
|
||||
tryHideFullScreenLoading()
|
||||
if (response.status === 200) {
|
||||
return Promise.resolve(response)
|
||||
} else {
|
||||
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')
|
||||
|
||||
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请求
|
||||
* @param {String} url [请求的url地址]
|
||||
* @param {Object} params [请求时携带的参数]
|
||||
*/
|
||||
function logout() {
|
||||
store.commit('setUserInfo', null)
|
||||
store.commit('setMapBackArr', [])
|
||||
store.commit('setMoudle', null)
|
||||
store.commit('setProDetail', null)
|
||||
sessionStorage.clear()
|
||||
let json = {
|
||||
name: '工作站',
|
||||
id: 1,
|
||||
url: '/projectV2/taskList',
|
||||
menuList: [{
|
||||
id: 100000,
|
||||
menuName: "任务清单",
|
||||
path: "/projectV2/taskList"
|
||||
}, {
|
||||
id: 100001,
|
||||
menuName: "通知公告",
|
||||
path: "/projectV2/noticeList"
|
||||
}, {
|
||||
id: 100002,
|
||||
menuName: "工作日程",
|
||||
path: "/projectV2/workerSchedule"
|
||||
}]
|
||||
store.commit('setUserInfo', null)
|
||||
store.commit('setMapBackArr', [])
|
||||
store.commit('setMoudle', null)
|
||||
store.commit('setProDetail', null)
|
||||
sessionStorage.clear()
|
||||
let json = {
|
||||
name: '工作站',
|
||||
id: 1,
|
||||
url: '/projectV2/taskList',
|
||||
menuList: [
|
||||
{
|
||||
id: 100000,
|
||||
menuName: '任务清单',
|
||||
path: '/projectV2/taskList'
|
||||
},
|
||||
{
|
||||
id: 100001,
|
||||
menuName: '通知公告',
|
||||
path: '/projectV2/noticeList'
|
||||
},
|
||||
{
|
||||
id: 100002,
|
||||
menuName: '工作日程',
|
||||
path: '/projectV2/workerSchedule'
|
||||
}
|
||||
]
|
||||
}
|
||||
this.$store.commit("setCurModule", json);
|
||||
setTimeout(() => {
|
||||
window.location.href = "/index.html#/login"
|
||||
}, 1000)
|
||||
this.$store.commit('setCurModule', json)
|
||||
setTimeout(() => {
|
||||
window.location.href = '/index.html#/login'
|
||||
}, 1000)
|
||||
}
|
||||
export function get(url, params, config) {
|
||||
showLoadingConfig = config
|
||||
url = url + '?lang=' + getLang()
|
||||
return new Promise((resolve, reject) => {
|
||||
axios.get(url, {
|
||||
params: params
|
||||
}).then(res => {
|
||||
if (res.data.code == 200) {
|
||||
resolve(res.data);
|
||||
} else {
|
||||
Message.error(res.data.message);
|
||||
}
|
||||
}).catch(err => {
|
||||
reject(err.data)
|
||||
})
|
||||
});
|
||||
showLoadingConfig = config
|
||||
url = url + '?lang=' + getLang()
|
||||
return new Promise((resolve, reject) => {
|
||||
axios
|
||||
.get(url, {
|
||||
params: params
|
||||
})
|
||||
.then(res => {
|
||||
if (res.data.code == 200) {
|
||||
resolve(res.data)
|
||||
} else {
|
||||
Message.error(res.data.message)
|
||||
}
|
||||
})
|
||||
.catch(err => {
|
||||
reject(err.data)
|
||||
})
|
||||
})
|
||||
}
|
||||
|
||||
/**
|
||||
@ -237,25 +244,26 @@ export function get(url, params, config) {
|
||||
* @param {Object} params [请求时携带的参数]
|
||||
*/
|
||||
export function post(url, params, config) {
|
||||
showLoadingConfig = config
|
||||
url = url + '?lang=' + getLang()
|
||||
return new Promise((resolve, reject) => {
|
||||
axios.post(url, params)
|
||||
.then(res => {
|
||||
if (res.data.code == 200) {
|
||||
resolve(res.data);
|
||||
} else {
|
||||
if (res.data.status !== 'SUCCESS') {
|
||||
Message.error(res.data.message);
|
||||
}else{
|
||||
resolve(res.data);
|
||||
}
|
||||
}
|
||||
})
|
||||
.catch(err => {
|
||||
reject(err.data)
|
||||
})
|
||||
});
|
||||
showLoadingConfig = config
|
||||
url = url + '?lang=' + getLang()
|
||||
return new Promise((resolve, reject) => {
|
||||
axios
|
||||
.post(url, params)
|
||||
.then(res => {
|
||||
if (res.data.code == 200) {
|
||||
resolve(res.data)
|
||||
} else {
|
||||
if (res.data.status !== 'SUCCESS') {
|
||||
Message.error(res.data.message)
|
||||
} else {
|
||||
resolve(res.data)
|
||||
}
|
||||
}
|
||||
})
|
||||
.catch(err => {
|
||||
reject(err.data)
|
||||
})
|
||||
})
|
||||
}
|
||||
/**
|
||||
* put方法，对应put请求
|
||||
@ -263,46 +271,47 @@ export function post(url, params, config) {
|
||||
* @param {Object} params [请求时携带的参数]
|
||||
*/
|
||||
export function put(url, params, config) {
|
||||
showLoadingConfig = config
|
||||
url = url + '?lang=' + getLang()
|
||||
return new Promise((resolve, reject) => {
|
||||
axios.put(url, params)
|
||||
.then(res => {
|
||||
if (res.data.code == 200) {
|
||||
resolve(res.data);
|
||||
} else {
|
||||
Message.error(res.data.message);
|
||||
}
|
||||
})
|
||||
.catch(err => {
|
||||
reject(err.data)
|
||||
})
|
||||
});
|
||||
showLoadingConfig = config
|
||||
url = url + '?lang=' + getLang()
|
||||
return new Promise((resolve, reject) => {
|
||||
axios
|
||||
.put(url, params)
|
||||
.then(res => {
|
||||
if (res.data.code == 200) {
|
||||
resolve(res.data)
|
||||
} else {
|
||||
Message.error(res.data.message)
|
||||
}
|
||||
})
|
||||
.catch(err => {
|
||||
reject(err.data)
|
||||
})
|
||||
})
|
||||
}
|
||||
export function showFullScreenLoading() {
|
||||
if (needLoadingRequestCount === 0) {
|
||||
startLoading()
|
||||
}
|
||||
needLoadingRequestCount++
|
||||
if (needLoadingRequestCount === 0) {
|
||||
startLoading()
|
||||
}
|
||||
needLoadingRequestCount++
|
||||
}
|
||||
|
||||
export function tryHideFullScreenLoading() {
|
||||
if (needLoadingRequestCount <= 0) return
|
||||
needLoadingRequestCount--
|
||||
if (needLoadingRequestCount === 0) {
|
||||
endLoading()
|
||||
}
|
||||
if (needLoadingRequestCount <= 0) return
|
||||
needLoadingRequestCount--
|
||||
if (needLoadingRequestCount === 0) {
|
||||
endLoading()
|
||||
}
|
||||
}
|
||||
|
||||
function startLoading() {
|
||||
loading = Loading.service({
|
||||
lock: true,
|
||||
text: '加载中...',
|
||||
spinner: 'el-icon-loading',
|
||||
background: 'rgba(0, 0, 0, 0.5)'
|
||||
})
|
||||
loading = Loading.service({
|
||||
lock: true,
|
||||
text: '加载中...',
|
||||
spinner: 'el-icon-loading',
|
||||
background: 'rgba(0, 0, 0, 0.5)'
|
||||
})
|
||||
}
|
||||
|
||||
function endLoading() {
|
||||
loading.close()
|
||||
loading.close()
|
||||
}
|
||||
|
||||
@ -1,13 +1,13 @@
|
||||
<template>
|
||||
<Card :title="title">
|
||||
<div class="gantt-chart">
|
||||
<div class="table">
|
||||
<div class="table" @scroll="handleScroll">
|
||||
<div class="thead">
|
||||
<div class="row">
|
||||
<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="month">
|
||||
{{ date }}
|
||||
@ -25,33 +25,39 @@
|
||||
<div class="td" @click="handleOpen(i)">{{ p.pName }}</div>
|
||||
<div class="td">{{ p.startTime }}</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="grid" v-for="day in getDays(date)" :key="'grid' + day.num" :ref="p.pName + '-' + day.date"></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 class="children">
|
||||
<div class="row" v-for="child in p.children" :key="'child-' + child.pName">
|
||||
<div class="td">{{ child.pName }}</div>
|
||||
<div class="td">{{ child.startTime }}</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="grid" v-for="day in getDays(date)" :key="'grid' + day.num" :ref="child.pName + '-' + day.date"></div>
|
||||
</div>
|
||||
</div>
|
||||
<div
|
||||
class="progress"
|
||||
:style="{ left: gantt.left, width: gantt.width }"
|
||||
v-for="(gantt, index) in child.gantts"
|
||||
:key="index"
|
||||
></div>
|
||||
<div class="progress" :style="gantt" v-for="(gantt, index) in child.gantts" :key="index"></div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="tooltips" :style="tooltipsStyle">
|
||||
<div class="status">已逾期5天</div>
|
||||
<div class="charger">负责人：史蒂夫</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</Card>
|
||||
@ -75,64 +81,86 @@ export default {
|
||||
},
|
||||
data() {
|
||||
return {
|
||||
dates: ['2020/03', '2020/04', '2020/05', '2020/06', '2020/07', '2020/08'],
|
||||
projects: [
|
||||
{
|
||||
pName: '地基与基础工程',
|
||||
startTime: '2020/04/06',
|
||||
endTime: '2020/05/09',
|
||||
delay: 10,
|
||||
status: 0,
|
||||
gantts: [],
|
||||
// gantts: [{ left: '420px', width: '100px', status: '' }],
|
||||
children: [
|
||||
{ pName: '无支护土方工程', startTime: '2020/04/06', endTime: '2020/04/09', gantts: [] },
|
||||
{ pName: '有支护土方工程', startTime: '2020/04/10', endTime: '2020/05/08', gantts: [] }
|
||||
{ pName: '无支护土方工程', startTime: '2020/04/06', endTime: '2020/04/09', status: 1 },
|
||||
{ pName: '有支护土方工程', startTime: '2020/04/10', endTime: '2020/05/08', status: 3 }
|
||||
]
|
||||
},
|
||||
{ pName: '主体结构', startTime: '2020/03/12', endTime: '2020/06/04' },
|
||||
{ pName: '建筑装饰装修', startTime: '2020/04/21', endTime: '2020/07/30', gantts: [] }
|
||||
{ pName: '主体结构', startTime: '2020/03/12', endTime: '2020/06/04', status: 2 },
|
||||
{ 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: {
|
||||
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() {
|
||||
const configGantts = projects => {
|
||||
projects.map(project => {
|
||||
let { startTime, endTime, pName, gantts } = project
|
||||
const startArr = startTime.split('/')
|
||||
const endArr = endTime.split('/')
|
||||
let startRef = null
|
||||
let endRef = null
|
||||
let { endTime, pName, gantts } = project
|
||||
const gantt = this.getGanttStyle(project)
|
||||
gantt.background = this.colors[project.status]
|
||||
|
||||
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) {
|
||||
gantts.push(gantt)
|
||||
} else {
|
||||
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
|
||||
project.children && configGantts(project.children)
|
||||
@ -140,6 +168,13 @@ export default {
|
||||
}
|
||||
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) {
|
||||
const year = date.split('/')[0]
|
||||
const month = +date.split('/')[1]
|
||||
@ -182,6 +217,46 @@ export default {
|
||||
} else {
|
||||
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 {
|
||||
height: 100%;
|
||||
.table {
|
||||
position: relative;
|
||||
height: 100%;
|
||||
overflow-x: auto;
|
||||
&::-webkit-scrollbar {
|
||||
width: 10px;
|
||||
height: 8px;
|
||||
cursor: pointer;
|
||||
}
|
||||
&::-webkit-scrollbar-thumb {
|
||||
border-radius: 10px;
|
||||
background-color: skyblue;
|
||||
}
|
||||
|
||||
.thead {
|
||||
border-bottom: 1px solid #234d5f;
|
||||
.row {
|
||||
@ -234,6 +320,7 @@ export default {
|
||||
border-left: 1px solid #234d5f;
|
||||
.row-groups {
|
||||
position: relative;
|
||||
height: 42px;
|
||||
&::before {
|
||||
content: '';
|
||||
position: absolute;
|
||||
@ -248,13 +335,11 @@ export default {
|
||||
z-index: 99;
|
||||
}
|
||||
&.open {
|
||||
height: unset;
|
||||
&::before {
|
||||
border-left-color: transparent;
|
||||
border-top-color: #5be1f4;
|
||||
}
|
||||
.children {
|
||||
display: block;
|
||||
}
|
||||
}
|
||||
> .row .td:first-child {
|
||||
user-select: none;
|
||||
@ -302,11 +387,10 @@ export default {
|
||||
top: calc(50% - 7px);
|
||||
width: 20px;
|
||||
height: 14px;
|
||||
background: pink;
|
||||
background: #557dee;
|
||||
}
|
||||
}
|
||||
.children {
|
||||
display: none;
|
||||
.td {
|
||||
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>
|
||||
|
||||
Loading…
x
Reference in New Issue
Block a user