修改西电问题-后台和大屏19-23
parent
6b09750145
commit
ebc8dea288
|
|
@ -1,98 +0,0 @@
|
|||
import request from '@/utils/request'
|
||||
import { Date } from 'core-js'
|
||||
// 查询劳务实名制管理列表
|
||||
const listAttendance=(query)=> {
|
||||
return request({
|
||||
url: '/project/attendance/list',
|
||||
method: 'get',
|
||||
params: query
|
||||
})
|
||||
}
|
||||
const getDeptWorksList=(deptId,projectId)=> {
|
||||
return request({
|
||||
url: `bgscreen/attendance/getDeptWorksList?deptId=${deptId||0}&projectId=${projectId||0}`,
|
||||
method: 'get'
|
||||
})
|
||||
}
|
||||
|
||||
const getWorkAttendanceList=(deptId,projectId)=> {
|
||||
return request({
|
||||
url: `bgscreen/attendance/getWorkAttendanceList?deptId=${deptId||0}&projectId=${projectId||0}`,
|
||||
method: 'get'
|
||||
})
|
||||
}
|
||||
|
||||
|
||||
const groupByComany=(data)=> {
|
||||
return request({
|
||||
url: `bgscreen/attendance/groupByComany`,
|
||||
data:data,
|
||||
method: 'post'
|
||||
})
|
||||
}
|
||||
const groupAllByComany=(data)=> {
|
||||
return request({
|
||||
url: `bgscreen/attendance/groupAllByComany`,
|
||||
data:data,
|
||||
method: 'post'
|
||||
})
|
||||
}
|
||||
const todayAttendance=(data)=>{
|
||||
return request({
|
||||
url: `bgscreen/attendance/todayAttendance`,
|
||||
data:data,
|
||||
method: 'post'
|
||||
})
|
||||
}
|
||||
|
||||
const workerOnDuty=(data)=>{
|
||||
return request({
|
||||
url:"bgscreen/attendance/workerOnDuty",
|
||||
method:"get",
|
||||
params:data
|
||||
})
|
||||
}
|
||||
const queryWorkerByState=(data)=>{
|
||||
return request({
|
||||
url:"bgscreen/attendance/queryWorkerByState",
|
||||
method:"get",
|
||||
params:data
|
||||
})
|
||||
}
|
||||
|
||||
const groupByWorkerOnDuty=(data)=>{
|
||||
return request({
|
||||
url:"bgscreen/attendance/groupByWorkerOnDuty",
|
||||
method:"get",
|
||||
params:data
|
||||
})
|
||||
}
|
||||
|
||||
const groupByWorkerState=(data)=>{
|
||||
return request({
|
||||
url:"bgscreen/attendance/groupByWorkerState",
|
||||
method:"get",
|
||||
params:data
|
||||
})
|
||||
}
|
||||
|
||||
const selectList=(data,pageNum,pageSize)=>{
|
||||
return request({
|
||||
url: `bgscreen/attendance/selectList?pageNum=${pageNum}&pageSize=${pageSize}`,
|
||||
data:data,
|
||||
method: 'post'
|
||||
})
|
||||
}
|
||||
export default{
|
||||
getDeptWorksList,
|
||||
getWorkAttendanceList,
|
||||
groupByComany,
|
||||
todayAttendance,
|
||||
selectList,
|
||||
groupAllByComany,
|
||||
listAttendance,
|
||||
workerOnDuty,
|
||||
groupByWorkerOnDuty,
|
||||
groupByWorkerState,
|
||||
queryWorkerByState
|
||||
}
|
||||
|
|
@ -1,320 +0,0 @@
|
|||
import request from "@/utils/request";
|
||||
import { tryToJson } from "../../utils/tools";
|
||||
import $dt from "dayjs";
|
||||
|
||||
const updateItemState = (it) => {
|
||||
let dt0 = +$dt($dt(new Date()).format("YYYY-MM-DD")); //当时时间
|
||||
let dt1 = it.planStartDate ? +$dt(it.planStartDate) : 0; //计划开始
|
||||
let dt2 = it.planEndDate ? +$dt(it.planEndDate) : 0; //计划结束
|
||||
let dt3 = it.startDate ? +$dt(it.startDate) : 0; //实际开始
|
||||
let dt4 = it.endDate ? +$dt(it.endDate) : 0; //实际结束
|
||||
if (!it.planStartDate) {
|
||||
return;
|
||||
}
|
||||
if (it.endDate) {
|
||||
if (!it.planEndDate) {
|
||||
it.finish = "正常完成";
|
||||
it.finishState = 3;
|
||||
return;
|
||||
}
|
||||
if (dt4 > dt2) {
|
||||
it.finish = "逾期完成";
|
||||
it.finishState = 1;
|
||||
} else {
|
||||
it.finish = "正常完成";
|
||||
it.finishState = 3;
|
||||
}
|
||||
return;
|
||||
}
|
||||
if (it.startDate) {
|
||||
if (!it.planEndDate) {
|
||||
it.finish = "进行中";
|
||||
it.finishState = 2;
|
||||
return;
|
||||
}
|
||||
if (dt2 < dt0) {
|
||||
it.finish = "逾期" + (dt0 - dt2) / 3600 / 1000 / 24 + "天";
|
||||
it.finishState = 1;
|
||||
} else {
|
||||
it.finish = "进行中";
|
||||
it.finishState = 2;
|
||||
}
|
||||
return;
|
||||
}
|
||||
|
||||
if (!it.startDate) {
|
||||
it.finish = "未开始";
|
||||
it.finishState = 4;
|
||||
}
|
||||
};
|
||||
|
||||
// 节点计划预警
|
||||
const selectScheduledAlerts = (data) => {
|
||||
return new Promise((resolve) => {
|
||||
request({
|
||||
url: "bgscreen/projectBuildNode/selectScheduledAlerts",
|
||||
method: "post",
|
||||
data: data,
|
||||
}).then((d) => {
|
||||
let tmps = (d.data || []).map((it) => {
|
||||
it.lvl = it.baseBuildNode.nodeLvl;
|
||||
it.projectName = it.project?.projectName || "";
|
||||
it.parentLvl = it.lvl.substring(0, it.lvl.length - 2);
|
||||
it.nodeText = it.baseBuildNode.nodeText;
|
||||
it.file = tryToJson(it.files, []);
|
||||
updateItemState(it);
|
||||
return it;
|
||||
});
|
||||
resolve(tmps);
|
||||
});
|
||||
});
|
||||
};
|
||||
|
||||
// 获取当前节点及叶子节点
|
||||
const selectCurrent = (data) => {
|
||||
return request({
|
||||
url: "bgscreen/projectBuildNode/selectCurrent",
|
||||
method: "post",
|
||||
data: data,
|
||||
});
|
||||
};
|
||||
|
||||
const toTree = (nodes) => {
|
||||
let tmps = nodes.map((it) => {
|
||||
it.lvl = it.baseBuildNode.nodeLvl;
|
||||
it.parentLvl = it.lvl.substring(0, it.lvl.length - 2);
|
||||
it.nodeText = it.baseBuildNode.nodeText;
|
||||
it.file = tryToJson(it.files, []);
|
||||
it.expend = true;
|
||||
updateItemState(it);
|
||||
return it;
|
||||
});
|
||||
let objs = tmps.filter((d) => d.parentLvl.length == 0);
|
||||
objs.forEach((it) => {
|
||||
it.children = tmps.filter((item) => item.parentLvl == it.lvl);
|
||||
it.children.forEach((item) => {
|
||||
item.children = tmps.filter(
|
||||
(item3) => item3.planStartDate && item3.parentLvl == item.lvl
|
||||
);
|
||||
});
|
||||
it.children = it.children.filter(
|
||||
(item) => item.children.length > 0 || item.planStartDate
|
||||
);
|
||||
});
|
||||
return objs;
|
||||
};
|
||||
|
||||
const listByProject = (projectId) => {
|
||||
return new Promise((resolve) => {
|
||||
request({
|
||||
url: `bgscreen/projectBuildNode/listByProject?projectId=${projectId}`,
|
||||
method: "get",
|
||||
}).then((d) => {
|
||||
let tmps = (d.data || []).map((it) => {
|
||||
it.lvl = it.baseBuildNode.nodeLvl;
|
||||
it.parentLvl = it.lvl.substring(0, it.lvl.length - 2);
|
||||
it.nodeText = it.baseBuildNode.nodeText;
|
||||
it.file = tryToJson(it.files, []);
|
||||
it.expend = true;
|
||||
updateItemState(it);
|
||||
return it;
|
||||
});
|
||||
let objs = tmps.filter((d) => d.parentLvl.length == 0);
|
||||
objs.forEach((it) => {
|
||||
it.children = tmps.filter((item) => item.parentLvl == it.lvl);
|
||||
it.children.forEach((item) => {
|
||||
item.children = tmps.filter(
|
||||
(item3) => item3.planStartDate && item3.parentLvl == item.lvl
|
||||
);
|
||||
});
|
||||
it.children = it.children.filter(
|
||||
(item) => item.children.length > 0 || item.planStartDate
|
||||
);
|
||||
});
|
||||
resolve(objs);
|
||||
});
|
||||
});
|
||||
};
|
||||
|
||||
const covertData = (objs) => {
|
||||
let tmps = objs.map((it) => {
|
||||
it.lvl = it.baseBuildNode.nodeLvl;
|
||||
it.parentLvl = it.lvl.substring(0, it.lvl.length - 2);
|
||||
it.nodeText = it.baseBuildNode.nodeText;
|
||||
it.file = tryToJson(it.files, []);
|
||||
return it;
|
||||
});
|
||||
return tmps.map((it) => {
|
||||
updateItemState(it);
|
||||
/*
|
||||
let dt0 = +$dt($dt(new Date()).format("YYYY-MM-DD")); //当时时间
|
||||
let dt1 = it.planStartDate ? +$dt(it.planStartDate) : 0; //计划开始
|
||||
let dt2 = it.planEndDate ? +$dt(it.planEndDate) : 0; //计划结束
|
||||
let dt3 = it.startDate ? +$dt(it.startDate) : 0; //实际开始
|
||||
let dt4 = it.endDate ? +$dt(it.endDate) : 0; //实际结束
|
||||
if (it.lvl.length == 2) {
|
||||
if (!it.planStartDate || !it.planEndDate) {
|
||||
it.finish = "";
|
||||
it.finishState = -1;
|
||||
return it;
|
||||
}
|
||||
if (it.endDate) {
|
||||
if (dt4 > dt2) {
|
||||
it.finishState = 1;
|
||||
it.finish = "逾期" + (dt4 - dt2) / 3600 / 1000 / 24 + "天";
|
||||
} else {
|
||||
it.finish = "正常完成";
|
||||
it.finishState = 3;
|
||||
}
|
||||
} else {
|
||||
if (it.startDate) {
|
||||
if (dt2 >= dt0) {
|
||||
it.finish = "进行中";
|
||||
it.finishState = 2;
|
||||
} else {
|
||||
it.finishState = 1;
|
||||
it.finish = "逾期" + (dt2 - dt0) / 3600 / 1000 / 24 + "天";
|
||||
}
|
||||
} else {
|
||||
it.finish = "未开始";
|
||||
it.finishState = 4;
|
||||
}
|
||||
}
|
||||
} else {
|
||||
if (!it.planStartDate &&!it.planEndDate &&!it.startDate &&!it.endDate) {
|
||||
it.finish = "";
|
||||
it.finishState = -1;
|
||||
return it;
|
||||
}
|
||||
if (it.planStartDate && !it.startDate) {
|
||||
it.finish = "未开始";
|
||||
it.finishState = 4;
|
||||
return it;
|
||||
}
|
||||
if (!it.endDate) {
|
||||
it.finish = "进行中";
|
||||
it.finishState = 2;
|
||||
}
|
||||
if(it.endDate && !it.planEndDate){
|
||||
it.finish = "正常完成";
|
||||
it.finishState = 3;
|
||||
return it;
|
||||
}
|
||||
if(it.endDate && it.planEndDate){
|
||||
if(dt4>dt2){
|
||||
it.finishState = 1;
|
||||
it.finish = "逾期" + (dt4 - dt2) / 3600 / 1000 / 24 + "天";
|
||||
} else {
|
||||
it.finish = "正常完成";
|
||||
it.finishState = 3;
|
||||
}
|
||||
}
|
||||
}
|
||||
*/
|
||||
return it;
|
||||
});
|
||||
};
|
||||
|
||||
/**
|
||||
* 节点完成率统计
|
||||
* @param {*} data
|
||||
* @returns
|
||||
*/
|
||||
const countCompletionRate = (data,prjs) => {
|
||||
return new Promise((resolve) => {
|
||||
if(!prjs || prjs.length==0){
|
||||
resolve([]);
|
||||
return;
|
||||
}
|
||||
request({
|
||||
url: "bgscreen/projectBuildNode/countCompletionRate",
|
||||
method: "post",
|
||||
data: data,
|
||||
}).then((d) => {
|
||||
let tmps = (d.data || []).map((it) => {
|
||||
it.lvl = it.baseBuildNode.nodeLvl;
|
||||
it.projectName = it.project?.projectName || "";
|
||||
it.parentLvl = it.lvl.substring(0, it.lvl.length - 2);
|
||||
it.nodeText = it.baseBuildNode.nodeText;
|
||||
it.file = tryToJson(it.files, []);
|
||||
it.percent = 0;
|
||||
if (+it.id > 0) {
|
||||
it.percent = (((it.nodeId * 100.0) / it.id) * 1.0).toFixed(2);
|
||||
}
|
||||
return it;
|
||||
}).sort((a,b)=>a.projectId-b.projectId);
|
||||
let retTmps=prjs.filter(it=>it.id>0).map(it=>{
|
||||
let o={...it};
|
||||
let finds=tmps.filter(item=>item.projectId==it.id);
|
||||
if(finds.length>0){
|
||||
o={...it,...finds[0]};
|
||||
}
|
||||
return o;
|
||||
});
|
||||
|
||||
resolve(retTmps);
|
||||
});
|
||||
});
|
||||
};
|
||||
|
||||
const queryByProjectType = (type) => {
|
||||
return new Promise((resolve) => {
|
||||
request({
|
||||
url: "bgscreen/projectBuildNode/queryByProjectType?type=" + type,
|
||||
method: "get",
|
||||
}).then((d) => {
|
||||
resolve(toTree(d.data || []));
|
||||
});
|
||||
});
|
||||
};
|
||||
|
||||
|
||||
const queryByProjectTypeNoTree = (type) => {
|
||||
return new Promise((resolve) => {
|
||||
request({
|
||||
url: "bgscreen/projectBuildNode/queryByProjectType?type=" + type,
|
||||
method: "get",
|
||||
}).then((d) => {
|
||||
let tmps = (d.data || []).map((it) => {
|
||||
it.lvl = it.baseBuildNode.nodeLvl;
|
||||
it.projectName = it.project?.projectName || "";
|
||||
it.parentLvl = it.lvl.substring(0, it.lvl.length - 2);
|
||||
it.nodeText = it.baseBuildNode.nodeText;
|
||||
updateItemState(it);
|
||||
return it;
|
||||
});
|
||||
resolve(tmps);
|
||||
});
|
||||
});
|
||||
};
|
||||
|
||||
const queryFinishProject=projectId=>{
|
||||
return new Promise((resolve)=>{
|
||||
request({
|
||||
url: "bgscreen/projectBuildNode/queryFinishProject?projectId=" + projectId,
|
||||
method: "get",
|
||||
}).then(d=>{
|
||||
let tmps = (d.data || []).map((it) => {
|
||||
it.lvl = it.baseBuildNode.nodeLvl;
|
||||
it.projectName = it.project?.projectName || "";
|
||||
it.parentLvl = it.lvl.substring(0, it.lvl.length - 2);
|
||||
it.nodeText = it.baseBuildNode.nodeText;
|
||||
return it;
|
||||
});
|
||||
resolve(tmps);
|
||||
})
|
||||
});
|
||||
}
|
||||
|
||||
|
||||
export default {
|
||||
selectScheduledAlerts,
|
||||
selectCurrent,
|
||||
covertData,
|
||||
listByProject,
|
||||
countCompletionRate,
|
||||
queryByProjectType,
|
||||
queryByProjectTypeNoTree,
|
||||
toTree,
|
||||
queryFinishProject
|
||||
};
|
||||
|
|
@ -1,30 +0,0 @@
|
|||
import request from '@/utils/request'
|
||||
|
||||
const groupByCheckType=(data)=> {
|
||||
return request({
|
||||
url: `bgscreen/checkDetection/groupByCheckType`,
|
||||
method: 'post',
|
||||
data:data
|
||||
})
|
||||
}
|
||||
|
||||
const getList=(data,pageSize,pageNum)=>{
|
||||
return request({
|
||||
url: `bgscreen/checkDetection/getList?pageNum=${pageNum}&pageSize=${pageSize}`,
|
||||
method: 'post',
|
||||
data:data
|
||||
})
|
||||
}
|
||||
|
||||
const groupCheckType=data=>{
|
||||
return request({
|
||||
url: `bgscreen/checkDetection/groupCheckType`,
|
||||
method: 'post',
|
||||
data:data
|
||||
})
|
||||
}
|
||||
export default{
|
||||
groupByCheckType,
|
||||
getList,
|
||||
groupCheckType
|
||||
}
|
||||
|
|
@ -1,187 +0,0 @@
|
|||
import request from '@/utils/request'
|
||||
|
||||
import {axios} from '@/utils/request'
|
||||
const selectYearAndMonth=(data)=> {
|
||||
return new Promise(reslove=>{
|
||||
let data2={...data};
|
||||
let y=data2.year;
|
||||
let m=data2.month-1;
|
||||
if(m==0){
|
||||
m=12;
|
||||
y--;
|
||||
}
|
||||
data2.year=y;
|
||||
data2.month=m;
|
||||
var ajaxs=[request({
|
||||
url: `/bgscreen/costOut/selectYearAndMonth`,
|
||||
method: 'post',
|
||||
data:data
|
||||
}),
|
||||
request({
|
||||
url: `/bgscreen/costOut/selectYearAndMonth`,
|
||||
method: 'post',
|
||||
data:data2
|
||||
})];
|
||||
|
||||
axios.all(ajaxs).then(res=>{
|
||||
let d=res[0]
|
||||
const getValue=(tmps,type)=>{
|
||||
let objs=tmps.filter(d=>d.costType==type);
|
||||
return objs.length>0?objs[0]:{};
|
||||
}
|
||||
let tmps=(d.data||[]).map(it=>{
|
||||
it.money=it.money?it.money/10000.0:0;
|
||||
return it;
|
||||
});
|
||||
let y=data.year;
|
||||
let m=data.month-1;
|
||||
if(m==0){
|
||||
m=12;
|
||||
y--;
|
||||
}
|
||||
let tmps2=(res[1].data||[]).map(it=>{
|
||||
it.money=it.money?it.money/10000.0:0;
|
||||
return it;
|
||||
});
|
||||
let curM=tmps2.filter(it=>it.costType==9 && it.year==y && it.month==m);
|
||||
curM=curM.length>0?curM[0]:{};
|
||||
|
||||
let totalObjs=tmps.filter(it=>it.costType==9);
|
||||
let total=0;
|
||||
totalObjs.forEach(it=>{
|
||||
if(it.money){
|
||||
total+=it.money;
|
||||
}
|
||||
});
|
||||
let yearObjs=tmps.filter(it=>it.costType==9 && it.year==y);
|
||||
let totalY=0;
|
||||
yearObjs.forEach(it=>{
|
||||
if(it.money){
|
||||
totalY+=it.money;
|
||||
}
|
||||
});
|
||||
let obj={
|
||||
totalInv:getValue(tmps,1).money||0,//总投资
|
||||
curYear:getValue(tmps,2).money||0,//年总投资
|
||||
contract1:getValue(tmps,3).money||0,//合同金额
|
||||
contract2:getValue(tmps,4).money||0,//合同支付金额
|
||||
contract3:getValue(tmps,5).money||0,//合同挂账金额
|
||||
safety1:getValue(tmps,6).money||0,//安措金额
|
||||
safety2:getValue(tmps,7).money||0,//安措支付金额
|
||||
safety3:getValue(tmps,8).money||0,//安措挂账金额
|
||||
curMonth:curM.money||0,//当月投资
|
||||
totalMonth:total,//开累投资
|
||||
totalYear:totalY,//本年完成
|
||||
}
|
||||
reslove(obj);
|
||||
})
|
||||
})
|
||||
}
|
||||
const sumByDeptId=data=>{
|
||||
return new Promise(reslove=>{
|
||||
request({
|
||||
url: `/bgscreen/costOut/sumByDeptId`,
|
||||
method: 'post',
|
||||
data:data
|
||||
}).then(d=>{
|
||||
let tmps=d.data||[];
|
||||
const getValue=(tmps,type)=>{
|
||||
let objs=tmps.filter(d=>d.costType==type);
|
||||
return objs.length>0?objs[0]:{};
|
||||
}
|
||||
let obj={
|
||||
totalMonth:(getValue(tmps,10).money||0)/10000.0,
|
||||
curYear:(getValue(tmps,2).money||0)/10000.0,
|
||||
curMonth:(getValue(tmps,9).money||0)/10000.0,
|
||||
};
|
||||
reslove(obj);
|
||||
});
|
||||
});
|
||||
}
|
||||
const sumForBsEnginAuditing=data=>{
|
||||
return new Promise(reslove=>{
|
||||
request({
|
||||
url:'/bgscreen/costOut/sumForBsEnginAuditing',
|
||||
method: 'post',
|
||||
data:data
|
||||
}).then(d=>{
|
||||
const getValue=(t)=>{
|
||||
let tmps=(d.data||[]).filter(it=>it.costType==t);
|
||||
return tmps.length>0?tmps[0].money/10000.0:0;
|
||||
}
|
||||
let obj={
|
||||
data1:getValue(1),
|
||||
data2:getValue(2),
|
||||
data3:getValue(3),
|
||||
data4:getValue(4),
|
||||
data5:getValue(5),
|
||||
data6:getValue(6),
|
||||
data7:getValue(7),
|
||||
};
|
||||
obj.percent=obj.data2==0?0:obj.data3*100.0/obj.data2;
|
||||
if(obj.percent>100){
|
||||
obj.percent=100;
|
||||
}
|
||||
reslove(obj);
|
||||
})
|
||||
});
|
||||
};
|
||||
const selectForBigEnginList=data=>{
|
||||
return new Promise(reslove=>{
|
||||
request({
|
||||
url:'/bgscreen/costOut/selectForBigEnginList',
|
||||
method: 'post',
|
||||
data:data
|
||||
}).then(d=>{
|
||||
let data=d.data;
|
||||
let names=[];
|
||||
for(let k in data){
|
||||
let v=data[k];
|
||||
names.push(k);
|
||||
let sum1=0;
|
||||
let sum2=0;
|
||||
let sumTotal=0;
|
||||
let sum3=0;
|
||||
v.forEach(it=>{
|
||||
it.forEach(item=>{
|
||||
item.money=item.money||0;
|
||||
item.money2=item.money2||0;
|
||||
item.money3=item.money3||0;
|
||||
item.money/=10000.0;
|
||||
item.money2/=10000.0;
|
||||
item.money3/=10000.0;
|
||||
item.moneyTotal=item.money-item.money2;
|
||||
sum1+=item.money;
|
||||
sum2+=item.money2;
|
||||
sum3+=item.money3;
|
||||
sumTotal+=item.moneyTotal;
|
||||
})
|
||||
});
|
||||
v.push({
|
||||
sum1:sum1,
|
||||
sum2:sum2,
|
||||
sum3:sum3,
|
||||
sumTotal:sumTotal
|
||||
});
|
||||
}
|
||||
reslove({
|
||||
data:data,
|
||||
names:names
|
||||
});
|
||||
});
|
||||
});
|
||||
};
|
||||
const groupBYProject=data=>{
|
||||
return request({
|
||||
url:'/project/costOutput/groupBYProject',
|
||||
method: 'post',
|
||||
data:data
|
||||
})
|
||||
}
|
||||
export default{
|
||||
selectYearAndMonth,
|
||||
sumByDeptId,
|
||||
sumForBsEnginAuditing,
|
||||
selectForBigEnginList,
|
||||
groupBYProject
|
||||
}
|
||||
|
|
@ -1,14 +0,0 @@
|
|||
|
||||
import request from '@/utils/request'
|
||||
|
||||
// 查询流程表单列表
|
||||
const list=()=> {
|
||||
return request({
|
||||
url: 'bgscreen/dept/list',
|
||||
method: 'get'
|
||||
})
|
||||
}
|
||||
|
||||
export default{
|
||||
list
|
||||
}
|
||||
|
|
@ -1,48 +0,0 @@
|
|||
import request from '@/utils/request'
|
||||
// 查询塔基配置列表
|
||||
const findTowerConfigGroupOnline=(deptId, projectId)=> {
|
||||
return request({
|
||||
url: `bgscreen/tower/findTowerConfigGroupOnline?deptId=${deptId||0}&projectId=${projectId||0}`,
|
||||
method: 'get'
|
||||
})
|
||||
}
|
||||
|
||||
// 查询塔基配置列表
|
||||
const findTowerConfigListByProjectId=(deptId, projectId)=> {
|
||||
return request({
|
||||
url: `bgscreen/tower/findTowerConfigListByProjectId?deptId=${deptId||0}&projectId=${projectId||0}`,
|
||||
method: 'get'
|
||||
})
|
||||
}
|
||||
|
||||
// 查询塔基运行统计
|
||||
const findTowerStatisticsView=(deviceSn)=> {
|
||||
return request({
|
||||
url: `bgscreen/tower/findTowerStatisticsView?deviceKey=${deviceSn}`,
|
||||
method: 'get'
|
||||
})
|
||||
}
|
||||
|
||||
// 查询塔基限位数据
|
||||
const selectDevTowerDataLimitList=(deviceSn)=> {
|
||||
return request({
|
||||
url: `bgscreen/tower/selectDevTowerDataLimitList?deviceKey=${deviceSn}&pageNum=1&pageSize=10`,
|
||||
method: 'get'
|
||||
})
|
||||
}
|
||||
|
||||
// 查询塔基实时数据
|
||||
const selectDevTowerDataRunList=(deviceSn)=> {
|
||||
return request({
|
||||
url: `bgscreen/tower/selectDevTowerDataRunList?deviceKey=${deviceSn}&pageNum=1&pageSize=10`,
|
||||
method: 'get'
|
||||
})
|
||||
}
|
||||
|
||||
export default{
|
||||
findTowerConfigGroupOnline,
|
||||
findTowerConfigListByProjectId,
|
||||
findTowerStatisticsView,
|
||||
selectDevTowerDataLimitList,
|
||||
selectDevTowerDataRunList
|
||||
}
|
||||
|
|
@ -1,25 +0,0 @@
|
|||
import request from '@/utils/request'
|
||||
|
||||
const getDict=(dictName)=> {
|
||||
let key='dict_'+dictName;
|
||||
let obj=window.xdcaches[key];
|
||||
if(obj && obj.length>0){
|
||||
return new Promise((resolve)=>{
|
||||
resolve(obj);
|
||||
})
|
||||
}else{
|
||||
return new Promise(async (resolve)=>{
|
||||
let data=await request({
|
||||
url: `system/dict/data/type/${dictName}`,
|
||||
method: 'get'
|
||||
});
|
||||
let obj=data.data||[];
|
||||
if(obj && obj.length>0){
|
||||
window.xdcaches[key]=obj;
|
||||
}
|
||||
resolve(obj);
|
||||
});
|
||||
}
|
||||
}
|
||||
|
||||
export default getDict;
|
||||
|
|
@ -1,136 +0,0 @@
|
|||
import request from '@/utils/request'
|
||||
import dayjs from 'dayjs'
|
||||
const magList=()=>{
|
||||
return request({
|
||||
url:`base/mag/list?pageSize=1000&pageNum=1`,
|
||||
method:'get'
|
||||
})
|
||||
}
|
||||
const magDetailList=(data)=>{
|
||||
return request({
|
||||
url:'base/magDetail/list',
|
||||
method:'get',
|
||||
params:data
|
||||
})
|
||||
}
|
||||
const magGroupByTopic=()=>{
|
||||
return new Promise((resolve) => {
|
||||
request({
|
||||
url: `base/magDetail/groupByTopic`,
|
||||
method: 'get'
|
||||
}).then(d=>{
|
||||
let total=0;
|
||||
let tmps=(d.data||[]).map(it=>{
|
||||
total+=it.id||0;
|
||||
return {
|
||||
magid:it.magid,
|
||||
mag:it.title,
|
||||
magOrd:it.ord,
|
||||
magDate:+dayjs(it.createTime).$d,
|
||||
topicId:it.topic,
|
||||
topic:it.authorName,
|
||||
cnt:it.id
|
||||
};
|
||||
});
|
||||
let datas=[];
|
||||
tmps.forEach(it=>{
|
||||
let objs=datas.filter(item=>item.mag==it.mag);
|
||||
let obj={};
|
||||
if(objs.length==0){
|
||||
obj={
|
||||
magid:it.magid,
|
||||
mag:it.mag,
|
||||
ord:it.magOrd,
|
||||
date:it.magDate,
|
||||
list:[]
|
||||
}
|
||||
datas.push(obj);
|
||||
}else{
|
||||
obj=objs[0];
|
||||
}
|
||||
obj.list.push({id:it.topicId,topic:it.topic,cnt:it.cnt})
|
||||
});
|
||||
datas.sort((a,b)=>{
|
||||
if(a.ord==b.ord){
|
||||
return b.date-a.date;
|
||||
}
|
||||
return b.ord-a.ord;
|
||||
})
|
||||
datas.forEach(item=>{
|
||||
item.list.sort((a,b)=>a.id-b.id);
|
||||
})
|
||||
let titles=datas.length>0?datas[0].list.map(it=>it.topic):[];
|
||||
|
||||
resolve({
|
||||
titles:titles,
|
||||
datas:datas,
|
||||
total:total,
|
||||
})
|
||||
})
|
||||
});
|
||||
}
|
||||
|
||||
const groupByMag=(magId)=>{
|
||||
return new Promise((resolve) => {
|
||||
request({
|
||||
url:'base/magDetail/groupByMag',
|
||||
data:{
|
||||
magid:magId
|
||||
},
|
||||
method: 'post',
|
||||
}).then(d=>{
|
||||
let tmps=d.data||[];
|
||||
let max=0;
|
||||
tmps.forEach(it=>{
|
||||
max=it.id>max?it.id:max;
|
||||
});
|
||||
tmps.forEach(it=>{
|
||||
let t=(max-(it.id||0))*100.0/max+"%";
|
||||
it.ord=`width:calc((100% - ${t}) - 40px)`;
|
||||
});
|
||||
resolve(tmps);
|
||||
})
|
||||
});
|
||||
}
|
||||
const committeeList=()=>{
|
||||
return request({
|
||||
url:`base/committee/list?pageSize=1000&pageNum=1`,
|
||||
method:'get'
|
||||
})
|
||||
}
|
||||
const committeeSumGroupByType=(data)=>{
|
||||
return new Promise((resolve) => {
|
||||
request({
|
||||
url:'project/projectCommittee/sumGroupByType',
|
||||
data:data,
|
||||
method: 'post',
|
||||
}).then(d=>{
|
||||
let tmps=d.data||[];
|
||||
let sum=0;
|
||||
tmps.forEach(it=>{
|
||||
sum+=(it.id||0)/10000.0;
|
||||
it.id=(it.id||0)/10000.0;
|
||||
})
|
||||
resolve({
|
||||
total:sum,
|
||||
data:tmps
|
||||
})
|
||||
})
|
||||
});
|
||||
}
|
||||
const selectByWorkingType=(data)=>{
|
||||
return request({
|
||||
url:'project/projectCommittee/selectByWorkingType',
|
||||
method:"post",
|
||||
data:data
|
||||
})
|
||||
}
|
||||
export default {
|
||||
magGroupByTopic,
|
||||
magList,
|
||||
groupByMag,
|
||||
committeeList,
|
||||
committeeSumGroupByType,
|
||||
selectByWorkingType,
|
||||
magDetailList
|
||||
}
|
||||
|
|
@ -1,133 +0,0 @@
|
|||
import request from '@/utils/request'
|
||||
|
||||
const groupByCategory=(projectId,deptId)=> {
|
||||
return request({
|
||||
url: `bgscreen/flow/groupByCategory?projectId=${projectId}&deptId=${deptId}`,
|
||||
method: 'get'
|
||||
})
|
||||
}
|
||||
|
||||
const groupByUnit=(projectId,deptId)=> {
|
||||
return request({
|
||||
url: `bgscreen/flow/groupByUnit?projectId=${projectId}&deptId=${deptId}`,
|
||||
method: 'get'
|
||||
})
|
||||
}
|
||||
|
||||
const groupByUnitFinish=(projectId,deptId)=> {
|
||||
return request({
|
||||
url: `bgscreen/flow/groupByUnitFinish?projectId=${projectId}&deptId=${deptId}`,
|
||||
method: 'get'
|
||||
})
|
||||
}
|
||||
|
||||
const groupByUnitTotal=(projectId,deptId)=> {
|
||||
return request({
|
||||
url: `bgscreen/flow/groupByUnitTotal?projectId=${projectId}&deptId=${deptId}`,
|
||||
method: 'get'
|
||||
})
|
||||
}
|
||||
|
||||
const groupByProject=(deptId)=> {
|
||||
return request({
|
||||
url: `bgscreen/flow/groupByProject?deptId=${deptId}`,
|
||||
method: 'get'
|
||||
})
|
||||
}
|
||||
|
||||
|
||||
const listByUnit=(projectId,deptId,unit,pageNum,pageSize)=>{
|
||||
return request({
|
||||
url: `bgscreen/flow/listByUnit?pageNum=${pageNum}&pageSize=${pageSize}`,
|
||||
method: 'post',
|
||||
data:{
|
||||
taskId:unit,
|
||||
deptId:deptId,
|
||||
projectId:projectId
|
||||
}
|
||||
})
|
||||
}
|
||||
const listByCategory=(projectId,deptId,category,pageNum,pageSize)=>{
|
||||
return request({
|
||||
url: `bgscreen/flow/listByCategory?pageNum=${pageNum}&pageSize=${pageSize}`,
|
||||
method: 'post',
|
||||
data:{
|
||||
category:category,
|
||||
deptId:deptId,
|
||||
projectId:projectId
|
||||
}
|
||||
})
|
||||
}
|
||||
const listByState=(projectId,deptId,state,pageNum,pageSize)=>{
|
||||
return request({
|
||||
url: `bgscreen/flow/listByState?pageNum=${pageNum}&pageSize=${pageSize}`,
|
||||
method: 'post',
|
||||
data:{
|
||||
taskId:state,
|
||||
deptId:deptId,
|
||||
projectId:projectId
|
||||
}
|
||||
})
|
||||
}
|
||||
|
||||
const findSafetyWorkList=(deptId,projectId,flowType)=> {
|
||||
return request({
|
||||
url: `bgscreen/flow/findSafetyWorkList?projectId=${projectId}&deptId=${deptId}&flowType=${flowType}`,
|
||||
method: 'get'
|
||||
})
|
||||
}
|
||||
|
||||
const findFormDatasByProcInsId=(procInsId)=> {
|
||||
return request({
|
||||
url: `bgscreen/flow/findFormDatasByProcInsId/${procInsId}`,
|
||||
method: 'get'
|
||||
})
|
||||
}
|
||||
|
||||
const findFlowLabourList=(projId,nv,pageNum,pageSize)=> {
|
||||
return request({
|
||||
url: `bgscreen/flow/findFlowLabourList?projectId=${projId}&activeName=${nv}&pageNum=${pageNum}&pageSize=${pageSize}`,
|
||||
method: 'get'
|
||||
})
|
||||
}
|
||||
|
||||
const findFlowLabourGroupCountByApprove=(deptId,projectId)=> {
|
||||
return request({
|
||||
url: `bgscreen/flow/findFlowLabourGroupCountByApprove?projectId=${projectId}&deptId=${deptId}`,
|
||||
method: 'get'
|
||||
})
|
||||
}
|
||||
|
||||
//工程管理-分包单位占比
|
||||
const groupFlowBySubDeptType=(data)=>{
|
||||
return request({
|
||||
url:'bgscreen/flow/groupFlowBySubDeptType',
|
||||
method:'post',
|
||||
data:data
|
||||
})
|
||||
}
|
||||
|
||||
const listFlowBySubDeptType=(data,pageNum,pageSize)=>{
|
||||
return request({
|
||||
url:`bgscreen/flow/listFlowBySubDeptType?pageNum=${pageNum}&pageSize=${pageSize}`,
|
||||
method:'post',
|
||||
data:data
|
||||
})
|
||||
}
|
||||
|
||||
export default{
|
||||
groupByCategory,
|
||||
groupByUnit,
|
||||
groupByUnitFinish,
|
||||
groupByUnitTotal,
|
||||
listByUnit,
|
||||
listByState,
|
||||
groupByProject,
|
||||
findSafetyWorkList,
|
||||
findFormDatasByProcInsId,
|
||||
listByCategory,
|
||||
findFlowLabourList,
|
||||
findFlowLabourGroupCountByApprove,
|
||||
groupFlowBySubDeptType,
|
||||
listFlowBySubDeptType
|
||||
}
|
||||
|
|
@ -1,25 +0,0 @@
|
|||
import request from '@/utils/requestOthers'
|
||||
|
||||
const getDict = (dictName) => {
|
||||
let key = 'dict_' + dictName;
|
||||
let obj = window.xdcaches[key];
|
||||
if (obj && obj.length > 0) {
|
||||
return new Promise((resolve) => {
|
||||
resolve(obj);
|
||||
})
|
||||
} else {
|
||||
return new Promise(async (resolve) => {
|
||||
let data = await request({
|
||||
url: `/publics/aiBox/dicts`,
|
||||
method: 'get'
|
||||
});
|
||||
let obj = data.data || [];
|
||||
if (obj && obj.length > 0) {
|
||||
window.xdcaches[key] = obj;
|
||||
}
|
||||
resolve(obj);
|
||||
});
|
||||
}
|
||||
}
|
||||
|
||||
export default getDict;
|
||||
|
|
@ -1,29 +0,0 @@
|
|||
import request from '@/utils/requestOthers'
|
||||
|
||||
const listView=(deptId,projectId)=> {
|
||||
return request({
|
||||
url: `/publics/aiBox/v1/listView?deptId=${deptId||0}&projectId=${projectId||0}&pageSize=20&pageNum=1`,
|
||||
method: 'get'
|
||||
})
|
||||
}
|
||||
|
||||
const list=(data,pageNum,pageSize)=> {
|
||||
return request({
|
||||
url: `/publics/aiBox/list?pageNum=${pageNum}&pageSize=${pageSize}`,
|
||||
data:data,
|
||||
method: 'post'
|
||||
})
|
||||
}
|
||||
|
||||
const groupCountByAlarmType=(deptId,projectId,now)=> {
|
||||
return request({
|
||||
url: `/publics/aiBox/groupCountByAlarmType?deptId=${deptId||0}&projectId=${projectId||0}&now=${now}`,
|
||||
method: 'get'
|
||||
})
|
||||
}
|
||||
|
||||
export default{
|
||||
list,
|
||||
listView,
|
||||
groupCountByAlarmType
|
||||
}
|
||||
|
|
@ -1,65 +0,0 @@
|
|||
import project from './project/index'
|
||||
import dept from './dept/index'
|
||||
import schedule from './schedule/index'
|
||||
import quarterlyAssess from './quarterlyAssess/index'
|
||||
import problemmodify from './problemmodify/index'
|
||||
import workFile from './workFile/index'
|
||||
import workTrain from './workTrain/index'
|
||||
import special from './special/index'
|
||||
import dict from './dict/index'
|
||||
import attendance from './attendance/index'
|
||||
import insurance from './insurance/index'
|
||||
import journalism from './journalism/index'
|
||||
import buildNode from './buildNode'
|
||||
import projectChecking from './projectChecking/index'
|
||||
import measure from './measure/index'
|
||||
import materialSeal from './materialSeal/index'
|
||||
import costOut from './costOut/index'
|
||||
import checkDetection from './checkDetection/index'
|
||||
import standard from './standard/index'
|
||||
import flow from './flow/index'
|
||||
import video from './video/index'
|
||||
import aiBoxVideo from './video/aiBoxVideo'
|
||||
import gzAiBoxVideo from './gzaiBox/index'
|
||||
import gzDict from './gzaiBox/dict'
|
||||
import plan from './plan/index'
|
||||
import periodical from './periodical/index'
|
||||
import engin from './engin'
|
||||
import tower from './device/tower/index'
|
||||
import quality from './quality'
|
||||
import pitmonit from './pitmonit'
|
||||
import {axios,download} from '@/utils/request'
|
||||
export default {
|
||||
project,
|
||||
dept,
|
||||
schedule,
|
||||
quarterlyAssess,
|
||||
problemmodify,
|
||||
workFile,
|
||||
workTrain,
|
||||
special,
|
||||
dict,
|
||||
periodical,
|
||||
costOut,
|
||||
attendance,
|
||||
insurance,
|
||||
journalism,
|
||||
buildNode,
|
||||
projectChecking,
|
||||
measure,
|
||||
materialSeal,
|
||||
checkDetection,
|
||||
http:axios,
|
||||
video,
|
||||
aiBoxVideo,
|
||||
standard,
|
||||
flow,
|
||||
plan,
|
||||
downFile:download,
|
||||
engin,
|
||||
gzAiBoxVideo,
|
||||
gzDict,
|
||||
tower,
|
||||
quality,
|
||||
pitmonit
|
||||
}
|
||||
|
|
@ -1,19 +0,0 @@
|
|||
import request from '@/utils/request'
|
||||
|
||||
const getProjectInsuranceList=(deptId,projectId)=> {
|
||||
return request({
|
||||
url: `bgscreen/insurance/getProjectInsuranceList?deptId=${deptId||0}&projectId=${projectId||0}`,
|
||||
method: 'get'
|
||||
})
|
||||
}
|
||||
|
||||
const getProjectInsurance=id=>{
|
||||
return request({
|
||||
url: `bgscreen/insurance/getProjectInsurance?id=${id}`,
|
||||
method: 'get'
|
||||
})
|
||||
}
|
||||
export default{
|
||||
getProjectInsuranceList,
|
||||
getProjectInsurance
|
||||
}
|
||||
|
|
@ -1,19 +0,0 @@
|
|||
import request from '@/utils/request'
|
||||
|
||||
const getJournalismList=()=> {
|
||||
return request({
|
||||
url: `bgscreen/journalism/getJournalismList`,
|
||||
method: 'get'
|
||||
})
|
||||
}
|
||||
|
||||
const getJournalismInfo=(id)=> {
|
||||
return request({
|
||||
url: `bgscreen/journalism/getJournalismInfo?id=${id}`,
|
||||
method: 'get'
|
||||
})
|
||||
}
|
||||
export default{
|
||||
getJournalismList,
|
||||
getJournalismInfo
|
||||
}
|
||||
|
|
@ -1,47 +0,0 @@
|
|||
import request from '@/utils/request'
|
||||
|
||||
// 登录方法
|
||||
function login(username, password, code, uuid) {
|
||||
const data = {
|
||||
username,
|
||||
password,
|
||||
code,
|
||||
uuid
|
||||
}
|
||||
return request({
|
||||
url: '/login',
|
||||
headers: {
|
||||
isToken: false
|
||||
},
|
||||
method: 'post',
|
||||
data: data
|
||||
})
|
||||
}
|
||||
|
||||
|
||||
// 获取用户详细信息
|
||||
function getInfo() {
|
||||
return request({
|
||||
url: '/system/user/getInfo',
|
||||
method: 'get'
|
||||
})
|
||||
}
|
||||
|
||||
// 退出方法
|
||||
function logout() {
|
||||
return request({
|
||||
url: '/auth/logout',
|
||||
method: 'post'
|
||||
})
|
||||
}
|
||||
|
||||
export {
|
||||
login,
|
||||
logout,
|
||||
getInfo
|
||||
}
|
||||
export default {
|
||||
login,
|
||||
logout,
|
||||
getInfo
|
||||
}
|
||||
|
|
@ -1,88 +0,0 @@
|
|||
import request from '@/utils/request'
|
||||
|
||||
const selectTop20=(data)=> {
|
||||
return request({
|
||||
url: `bgscreen/materialSeal/selectTop20`,
|
||||
method: 'post',
|
||||
data:data
|
||||
})
|
||||
}
|
||||
const groupTop12Month=data=>{
|
||||
return new Promise(resolve=>{
|
||||
return request({
|
||||
url: `bgscreen/materialSeal/groupTop12Month`,
|
||||
method: 'post',
|
||||
data:data
|
||||
}).then(d=>{
|
||||
let m=new Date().getMonth()+1;
|
||||
let y=new Date().getFullYear();
|
||||
let objs=[];
|
||||
if(m<12){
|
||||
for(let i=(12-(12-m-1));i<=12;i++){
|
||||
objs.push({y:y-1,m:i,cnt:0});
|
||||
}
|
||||
}
|
||||
for(let i=1;i<=m;i++){
|
||||
objs.push({y:y,m:i,cnt:0});
|
||||
}
|
||||
let tmps=d.data||[];
|
||||
objs.forEach(it=>{
|
||||
let find=tmps.find(item=>item.projectId==it.y && item.deptId==it.m);
|
||||
if(find){
|
||||
it.cnt=find.id||0;
|
||||
}
|
||||
});
|
||||
resolve(objs);
|
||||
});
|
||||
});
|
||||
}
|
||||
const groupByApprove=data=>{
|
||||
return new Promise(resolve=>{
|
||||
return request({
|
||||
url: `bgscreen/materialSeal/groupByApprove`,
|
||||
method: 'post',
|
||||
data:data
|
||||
}).then(d=>{
|
||||
let sum1=0;//审批中 非4
|
||||
let sum2=0;//审批通过 4
|
||||
let sum3=0;//合计
|
||||
(d.data||[]).forEach(it=>{
|
||||
let cnt=(it.id||0);
|
||||
sum3+=cnt;
|
||||
if(it.projectId==4){
|
||||
sum2+=cnt;
|
||||
}else{
|
||||
sum1+=cnt;
|
||||
}
|
||||
});
|
||||
resolve( {
|
||||
sum:sum3,
|
||||
data:[
|
||||
{name:"审批中",value:sum1},
|
||||
{name:"审批通过",value:sum2},
|
||||
]
|
||||
});
|
||||
});
|
||||
});
|
||||
}
|
||||
const selectTop12Month=(data,pageNum,pageSize)=>{
|
||||
return request({
|
||||
url: `bgscreen/materialSeal/selectTop12Month?pageNum=${pageNum}&pageSize=${pageSize}`,
|
||||
method: 'post',
|
||||
data:data
|
||||
})
|
||||
}
|
||||
const selectByApprove=(data,pageNum,pageSize)=>{
|
||||
return request({
|
||||
url: `bgscreen/materialSeal/selectByApprove?pageNum=${pageNum}&pageSize=${pageSize}`,
|
||||
method: 'post',
|
||||
data:data
|
||||
})
|
||||
}
|
||||
export default{
|
||||
selectTop20,
|
||||
groupTop12Month,
|
||||
selectTop12Month,
|
||||
groupByApprove,
|
||||
selectByApprove
|
||||
}
|
||||
|
|
@ -1,29 +0,0 @@
|
|||
import request from '@/utils/request'
|
||||
|
||||
const groupMeasureInfo=(data)=> {
|
||||
return request({
|
||||
url: `bgscreen/measure/groupMeasureInfo`,
|
||||
method: 'post',
|
||||
data:data
|
||||
})
|
||||
}
|
||||
const getList=(data,pageSize,pageNum)=>{
|
||||
return request({
|
||||
url: `bgscreen/measure/getList?pageNum=${pageNum}&pageSize=${pageSize}`,
|
||||
method: 'post',
|
||||
data:data
|
||||
})
|
||||
}
|
||||
const groupMeasureType=data=>{
|
||||
return request({
|
||||
url: `bgscreen/measure/groupMeasureType`,
|
||||
method: 'post',
|
||||
data:data
|
||||
})
|
||||
};
|
||||
|
||||
export default{
|
||||
groupMeasureInfo,
|
||||
getList,
|
||||
groupMeasureType
|
||||
}
|
||||
|
|
@ -1,12 +0,0 @@
|
|||
import request from '@/utils/request'
|
||||
|
||||
const getList=()=> {
|
||||
return request({
|
||||
url: `bgscreen/periodical/getList`,
|
||||
method: 'get'
|
||||
})
|
||||
}
|
||||
|
||||
export default{
|
||||
getList
|
||||
}
|
||||
|
|
@ -1,45 +0,0 @@
|
|||
import request from '@/utils/request'
|
||||
|
||||
const totalCount=(prjId)=>{
|
||||
return request({
|
||||
url: `bgscreen/pitmonit/totalCount?prjId=${prjId}`,
|
||||
method: 'get'
|
||||
})
|
||||
}
|
||||
|
||||
const alarmList=(prjId)=>{
|
||||
return request({
|
||||
url: `bgscreen/pitmonit/alarm?prjId=${prjId}`,
|
||||
method: 'get'
|
||||
})
|
||||
}
|
||||
|
||||
const getLastDataForElement=(prjId)=>{
|
||||
return request({
|
||||
url: `bgscreen/pitmonit/getLastDataForElement?prjId=${prjId}`,
|
||||
method: 'get'
|
||||
})
|
||||
}
|
||||
|
||||
const selectByDate=data=>{
|
||||
return request({
|
||||
url: `bgscreen/pitmonit/selectByDate`,
|
||||
method: 'post',
|
||||
data:data
|
||||
})
|
||||
}
|
||||
|
||||
const monitDays=(prjId)=>{
|
||||
return request({
|
||||
url: `bgscreen/pitmonit/monitDays?prjId=${prjId}`,
|
||||
method: 'get'
|
||||
})
|
||||
}
|
||||
|
||||
export default{
|
||||
totalCount,
|
||||
alarmList,
|
||||
getLastDataForElement,
|
||||
selectByDate,
|
||||
monitDays
|
||||
}
|
||||
|
|
@ -1,21 +0,0 @@
|
|||
|
||||
import request from '@/utils/request'
|
||||
|
||||
const listAllTop3=()=>{
|
||||
return request({
|
||||
url: `bgscreen/projectPlan/listAllTop3`,
|
||||
method: 'get'
|
||||
})
|
||||
}
|
||||
|
||||
const listAll=(type)=>{
|
||||
return request({
|
||||
url: `bgscreen/projectPlan/listAll/${type}`,
|
||||
method: 'get'
|
||||
})
|
||||
}
|
||||
|
||||
export default{
|
||||
listAllTop3,
|
||||
listAll
|
||||
}
|
||||
|
|
@ -1,70 +0,0 @@
|
|||
|
||||
import request from '@/utils/request'
|
||||
|
||||
|
||||
//质量整改-安全分类汇总(按分类)
|
||||
const safetySummary=(data)=>{
|
||||
return request({
|
||||
url: `bgscreen/problemmodify/safetySummary`,
|
||||
method: 'post',
|
||||
data:data
|
||||
})
|
||||
}
|
||||
|
||||
//质量整改-质量分类汇总(按分类)
|
||||
const qualitySummary=(data)=>{
|
||||
return request({
|
||||
url: `bgscreen/problemmodify/qualitySummary`,
|
||||
method: 'post',
|
||||
data:data
|
||||
})
|
||||
}
|
||||
|
||||
|
||||
//质量整改-安全分类汇总(按项目)
|
||||
const safetySummaryByProject=(data)=>{
|
||||
return request({
|
||||
url: `bgscreen/problemmodify/safetySummaryByProject`,
|
||||
method: 'post',
|
||||
data:data
|
||||
})
|
||||
}
|
||||
|
||||
//质量整改-安全分类汇总(按项目)
|
||||
const qualitySummaryByProject=(data)=>{
|
||||
return request({
|
||||
url: `bgscreen/problemmodify/qualitySummaryByProject`,
|
||||
method: 'post',
|
||||
data:data
|
||||
})
|
||||
}
|
||||
|
||||
//项目监测预警查询，用于大屏项目概况
|
||||
const getMonitAndWarning=(deptId,projectId=0)=>{
|
||||
return request({
|
||||
url: `bgscreen/problemmodify/getMonitAndWarning?deptId=${deptId}&projectId=${projectId}`,
|
||||
method: 'get'
|
||||
})
|
||||
}
|
||||
|
||||
|
||||
const listSspProblemmodify=(data,pageSize,pageNum)=>{
|
||||
return request({
|
||||
url: `bgscreen/problemmodify/listSspProblemmodify?pageNum=${pageNum}&pageSize=${pageSize}`,
|
||||
method: 'post',
|
||||
data:data
|
||||
})
|
||||
}
|
||||
|
||||
const groupByInfotypeCheckState=data=>{
|
||||
return request({
|
||||
url: `bgscreen/problemmodify/groupByInfotypeCheckState`,
|
||||
method: 'post',
|
||||
data:data
|
||||
})
|
||||
}
|
||||
|
||||
|
||||
export default{
|
||||
safetySummary,qualitySummary,safetySummaryByProject,qualitySummaryByProject,getMonitAndWarning,listSspProblemmodify,groupByInfotypeCheckState
|
||||
}
|
||||
|
|
@ -1,122 +0,0 @@
|
|||
import request from '@/utils/request'
|
||||
|
||||
const findProjectByDept=(deptId)=> {
|
||||
return request({
|
||||
url: `bgscreen/project/findProjectByDept?deptId=${deptId||0}`,
|
||||
method: 'get'
|
||||
})
|
||||
}
|
||||
|
||||
const getProjectBuildNode=projectId=>{
|
||||
return request({
|
||||
url: `bgscreen/project/getProjectBuildNode?projectId=${projectId}`,
|
||||
method: 'get'
|
||||
})
|
||||
}
|
||||
const getProgressProjects=()=>{
|
||||
return request({
|
||||
url:`bgscreen/project/getProgressProjects`,
|
||||
method: 'get'
|
||||
})
|
||||
};
|
||||
|
||||
const groupByProjectCategory=(deptId,cb)=>{
|
||||
request({
|
||||
url:`bgscreen/project/groupByProjectCategory?deptId=${deptId||0}`,
|
||||
method: 'get'
|
||||
}).then(res=>{
|
||||
let objs=(res.data||[]).map(it=>{
|
||||
return {
|
||||
id:it.deptName,
|
||||
label:it.projectName,
|
||||
schedule:it.projectSchedule,
|
||||
cnt:it.deptId
|
||||
}
|
||||
});
|
||||
const getItems=(id,schedule)=>{
|
||||
let tmps=objs.filter(d=>d.id==id && d.schedule==schedule);
|
||||
if(tmps.length>0){
|
||||
return tmps[0];
|
||||
}
|
||||
return {
|
||||
id:id,schedule:schedule,cnt:0
|
||||
}
|
||||
}
|
||||
let ret1= [getItems(1,1),getItems(1,2)];
|
||||
let ret2= [getItems(2,1),getItems(2,2)];
|
||||
let ret3= [getItems(3,1),getItems(3,2)];
|
||||
let ret4= [getItems(4,1),getItems(4,2)];
|
||||
let rets= [
|
||||
ret1,ret2,ret3,ret4
|
||||
];
|
||||
if(cb){
|
||||
cb(rets);
|
||||
}
|
||||
});
|
||||
};
|
||||
|
||||
const groupByCategory=(deptId,type,year)=>{
|
||||
return request({
|
||||
url: `bgscreen/project/groupByCategory`,
|
||||
method: 'post',
|
||||
data:{
|
||||
deptId:deptId,
|
||||
id:type,
|
||||
isDel:year
|
||||
}
|
||||
})
|
||||
}
|
||||
|
||||
const groupByLevel=(deptId,type,year)=>{
|
||||
return request({
|
||||
url: `bgscreen/project/groupByLevel`,
|
||||
method: 'post',
|
||||
data:{
|
||||
deptId:deptId,
|
||||
id:type,
|
||||
isDel:year
|
||||
}
|
||||
})
|
||||
}
|
||||
|
||||
const getProjectUser=(projectId)=>{
|
||||
return request({
|
||||
url: `bgscreen/project/getProjectUser?projectId=${projectId}`,
|
||||
method: 'get'
|
||||
});
|
||||
}
|
||||
|
||||
const getInfo=()=>{
|
||||
return request({
|
||||
url:'getInfo',
|
||||
method:'get'
|
||||
})
|
||||
}
|
||||
const listPhotography=(id,deptId)=>{
|
||||
return request({
|
||||
url: `bgscreen/photography/listPhotography?projectId=${id}&deptId=${deptId}`,
|
||||
method: 'get'
|
||||
});
|
||||
}
|
||||
|
||||
const selectLastPhotography=id=>{
|
||||
return request({
|
||||
url: `bgscreen/photography/selectLastPhotography?projectId=${id}`,
|
||||
method: 'get'
|
||||
});
|
||||
}
|
||||
|
||||
export default{
|
||||
findProjectByDept,
|
||||
getProjectBuildNode,
|
||||
getProgressProjects,
|
||||
groupByProjectCategory,
|
||||
groupByCategory,
|
||||
groupByLevel,
|
||||
getProjectUser,
|
||||
getInfo,
|
||||
listPhotography,
|
||||
selectLastPhotography
|
||||
}
|
||||
|
||||
|
||||
|
|
@ -1,45 +0,0 @@
|
|||
import request from '@/utils/request'
|
||||
|
||||
const getProjectCheckingList=(deptId,projectId)=> {
|
||||
return request({
|
||||
url: `bgscreen/projectChecking/getProjectCheckingList?deptId=${deptId||0}&projectId=${projectId||0}`,
|
||||
method: 'get'
|
||||
})
|
||||
}
|
||||
|
||||
const getProjectCheckingView=(deptId,projectId)=> {
|
||||
return request({
|
||||
url: `bgscreen/projectChecking/getProjectCheckingView?deptId=${deptId||0}&projectId=${projectId||0}`,
|
||||
method: 'get'
|
||||
})
|
||||
}
|
||||
|
||||
const getProjectCheckingGroupFoChart=(deptId,projectId)=> {
|
||||
return request({
|
||||
url: `bgscreen/projectChecking/getProjectCheckingGroupFoChart?deptId=${deptId||0}&projectId=${projectId||0}`,
|
||||
method: 'get'
|
||||
})
|
||||
}
|
||||
|
||||
const groupCheckingByProjectId=(lvl,deptId,projectId)=> {
|
||||
return request({
|
||||
url: `bgscreen/projectChecking/groupCheckingByProjectId?lvl=${lvl}&deptId=${deptId||0}&projectId=${projectId||0}`,
|
||||
method: 'get'
|
||||
})
|
||||
}
|
||||
const queryProjectCheckingList=(pageNum,pageSize,data)=> {
|
||||
return request({
|
||||
url: `bgscreen/projectChecking/queryProjectCheckingList??pageNum=${pageNum}&pageSize=${pageSize}`,
|
||||
method: 'post',
|
||||
data:data
|
||||
})
|
||||
}
|
||||
|
||||
|
||||
export default{
|
||||
getProjectCheckingList,
|
||||
getProjectCheckingView,
|
||||
getProjectCheckingGroupFoChart,
|
||||
groupCheckingByProjectId,
|
||||
queryProjectCheckingList
|
||||
}
|
||||
|
|
@ -1,20 +0,0 @@
|
|||
import request from '@/utils/request'
|
||||
|
||||
const projectFunVerifyGroupByCheckType=(deptId,projectId)=>{
|
||||
return request({
|
||||
url: `/project/projectFunVerify/groupByCheckType?deptId=${deptId||0}&projectId=${projectId||0}`,
|
||||
method: 'get'
|
||||
})
|
||||
}
|
||||
|
||||
const listFunVerify=data=>{
|
||||
return request({
|
||||
url: `/project/projectFunVerify/list`,
|
||||
method: 'get',
|
||||
params:data
|
||||
})
|
||||
}
|
||||
export default{
|
||||
projectFunVerifyGroupByCheckType,
|
||||
listFunVerify
|
||||
}
|
||||
|
|
@ -1,23 +0,0 @@
|
|||
|
||||
import request from '@/utils/request'
|
||||
|
||||
// 查询流程表单列表
|
||||
const currentListByDept=(deptId)=> {
|
||||
return request({
|
||||
url: `bgscreen/asscess/currentListByDept?deptId=${deptId}`,
|
||||
method: 'get'
|
||||
})
|
||||
}
|
||||
|
||||
const queryByProjectType=data=>{
|
||||
return request({
|
||||
url: `bgscreen/asscess/queryByProjectType`,
|
||||
method: 'post',
|
||||
data:data
|
||||
})
|
||||
};
|
||||
|
||||
export default{
|
||||
currentListByDept,
|
||||
queryByProjectType
|
||||
}
|
||||
|
|
@ -1,29 +0,0 @@
|
|||
import request from '@/utils/request'
|
||||
|
||||
const projectConstructionProgress=(projectId)=> {
|
||||
return request({
|
||||
url: `bgscreen/schedule/projectConstructionProgress?projectId=${projectId}`,
|
||||
method: 'get'
|
||||
})
|
||||
}
|
||||
|
||||
|
||||
const selectByProjectType=(type,deptId)=>{
|
||||
return request({
|
||||
url: `bgscreen/schedule/selectByProjectType?type=${type}&deptId=${deptId}`,
|
||||
method: 'get'
|
||||
})
|
||||
}
|
||||
|
||||
const constructionProgressByDept=deptId=>{
|
||||
return request({
|
||||
url: `bgscreen/schedule/constructionProgressByDept?deptId=${deptId}`,
|
||||
method: 'get'
|
||||
})
|
||||
}
|
||||
|
||||
export default{
|
||||
projectConstructionProgress,
|
||||
selectByProjectType,
|
||||
constructionProgressByDept
|
||||
}
|
||||
|
|
@ -1,28 +0,0 @@
|
|||
import request from '@/utils/request'
|
||||
|
||||
const getProjectSpecialView=(deptId,projectId)=> {
|
||||
return request({
|
||||
url: `bgscreen/projectspecial/getProjectSpecialView?deptId=${deptId||0}&projectId=${projectId||0}`,
|
||||
method: 'get'
|
||||
})
|
||||
}
|
||||
|
||||
const getProjectSpecialList=(projectId,activeName,specialType)=> {
|
||||
return request({
|
||||
url: `bgscreen/projectspecial/getProjectSpecialList?projectId=${projectId||0}&activeName=${activeName||''}&specialType=${specialType||0}`,
|
||||
method: 'get'
|
||||
})
|
||||
}
|
||||
|
||||
const findWorkSpecialCount=(projectId,specialType)=> {
|
||||
return request({
|
||||
url: `bgscreen/projectspecial/findWorkSpecialCount?projectId=${projectId||0}&specialType=${specialType||0}`,
|
||||
method: 'get'
|
||||
})
|
||||
}
|
||||
|
||||
export default{
|
||||
getProjectSpecialView,
|
||||
getProjectSpecialList,
|
||||
findWorkSpecialCount
|
||||
}
|
||||
|
|
@ -1,39 +0,0 @@
|
|||
import request from '@/utils/request'
|
||||
|
||||
const getList=(projectId,deptId)=> {
|
||||
return request({
|
||||
url: `bgscreen/standard/getList?projectId=${projectId}&deptId=${deptId}`,
|
||||
method: 'get'
|
||||
})
|
||||
}
|
||||
|
||||
const groupByType=data=>{
|
||||
return request({
|
||||
url:'bgscreen/standard/groupByType',
|
||||
method:'post',
|
||||
data:data
|
||||
})
|
||||
}
|
||||
|
||||
const selectList=(pageNum,pageSize,data)=> {
|
||||
return request({
|
||||
url: `bgscreen/standard/selectList?pageNum=${pageNum}&pageSize=${pageSize}`,
|
||||
method: 'post',
|
||||
data:data
|
||||
})
|
||||
}
|
||||
|
||||
const groupByProject=()=>{
|
||||
return request({
|
||||
url:'bgscreen/standard/groupByProject',
|
||||
method:'get'
|
||||
})
|
||||
}
|
||||
|
||||
|
||||
export default{
|
||||
getList,
|
||||
groupByType,
|
||||
groupByProject,
|
||||
selectList
|
||||
}
|
||||
|
|
@ -1,55 +0,0 @@
|
|||
import request from '@/utils/request'
|
||||
|
||||
const listView=(deptId,projectId)=> {
|
||||
return request({
|
||||
url: `/bgscreen/aiBoxVideo/listView?deptId=${deptId||0}&projectId=${projectId||0}&pageSize=20&pageNum=1`,
|
||||
method: 'get'
|
||||
})
|
||||
}
|
||||
|
||||
const list=(data,pageNum,pageSize)=> {
|
||||
return request({
|
||||
url: `/bgscreen/aiBoxVideo/list?pageNum=${pageNum}&pageSize=${pageSize}`,
|
||||
data:data,
|
||||
method: 'post'
|
||||
})
|
||||
}
|
||||
|
||||
const getVideoPassage=(deptId,projectId,passageType,importance)=> {
|
||||
return request({
|
||||
url: `/bgscreen/aiBoxVideo/getVideoPassage?deptId=${deptId||0}&projectId=${projectId||0}&passageType=${passageType}&importance=${importance}`,
|
||||
method: 'get'
|
||||
})
|
||||
}
|
||||
|
||||
const groupCountByAlarmType=(deptId,projectId,now)=> {
|
||||
return request({
|
||||
url: `/bgscreen/aiBoxVideo/groupCountByAlarmType?deptId=${deptId||0}&projectId=${projectId||0}&now=${now}`,
|
||||
method: 'get'
|
||||
})
|
||||
}
|
||||
|
||||
const groupCountByProject=(deptId,projectId)=> {
|
||||
return request({
|
||||
url: `/bgscreen/aiBoxVideo/groupCountByProject?deptId=${deptId||0}&projectId=${projectId||0}`,
|
||||
method: 'get'
|
||||
})
|
||||
}
|
||||
|
||||
// 查询视频分布汇总
|
||||
const selectGroupCountVideoConfig=(deptId,projectId)=> {
|
||||
return request({
|
||||
url: `/bgscreen/aiBoxVideo/selectGroupCountVideoConfig?deptId=${deptId||0}&projectId=${projectId||0}`,
|
||||
method: 'get'
|
||||
})
|
||||
}
|
||||
|
||||
|
||||
export default{
|
||||
list,
|
||||
listView,
|
||||
getVideoPassage,
|
||||
groupCountByAlarmType,
|
||||
selectGroupCountVideoConfig,
|
||||
groupCountByProject
|
||||
}
|
||||
|
|
@ -1,28 +0,0 @@
|
|||
import request from '@/utils/request'
|
||||
|
||||
const listView=(deptId,projectId)=> {
|
||||
return request({
|
||||
url: `/bgscreen/video/listView?deptId=${deptId||0}&projectId=${projectId||0}`,
|
||||
method: 'get'
|
||||
})
|
||||
}
|
||||
|
||||
const getVideoPassage=(videoDvrNumberd)=> {
|
||||
return request({
|
||||
url: `/bgscreen/video/getVideoPassage?videoDvrNumberd=${videoDvrNumberd}`,
|
||||
method: 'get'
|
||||
})
|
||||
}
|
||||
|
||||
const editPassageState=(id,videoDvrNumber,passageState)=> {
|
||||
return request({
|
||||
url: `/bgscreen/video/editPassageState?iid=${id||0}&videoDvrNumber=${videoDvrNumber}&passageState=${passageState}`,
|
||||
method: 'get'
|
||||
})
|
||||
}
|
||||
|
||||
export default{
|
||||
listView,
|
||||
getVideoPassage,
|
||||
editPassageState
|
||||
}
|
||||
|
|
@ -1,20 +0,0 @@
|
|||
import request from '@/utils/request'
|
||||
|
||||
const getWorkFileList=(fileBelong,deptId)=> {
|
||||
return request({
|
||||
url: `bgscreen/workfile/getWorkFileList?fileBelong=${fileBelong}&deptId=${deptId||0}`,
|
||||
method: 'get'
|
||||
})
|
||||
}
|
||||
|
||||
const workFileRead=(fileId)=> {
|
||||
return request({
|
||||
url: `bgscreen/workfile/workFileRead?fileId=${fileId}`,
|
||||
method: 'get'
|
||||
})
|
||||
}
|
||||
|
||||
export default{
|
||||
getWorkFileList,
|
||||
workFileRead
|
||||
}
|
||||
|
|
@ -1,28 +0,0 @@
|
|||
import request from '@/utils/request'
|
||||
|
||||
const getWorkTrainList=(trainType,deptId,projectId)=> {
|
||||
return request({
|
||||
url: `bgscreen/workTrain/getWorkTrainList?trainType=${trainType}&deptId=${deptId||0}&projectId=${projectId||0}`,
|
||||
method: 'get'
|
||||
})
|
||||
}
|
||||
const getGroupByDataType=(deptId,projectId)=> {
|
||||
return request({
|
||||
url: `bgscreen/workTrain/getGroupByDataType?deptId=${deptId||0}&projectId=${projectId||0}`,
|
||||
method: 'get'
|
||||
})
|
||||
}
|
||||
|
||||
const queryWorkTrainList=(pageNum,pageSize,data)=> {
|
||||
return request({
|
||||
url: `bgscreen/workTrain/queryWorkTrainList?pageNum=${pageNum}&pageSize=${pageSize}`,
|
||||
method: 'post',
|
||||
data:data
|
||||
})
|
||||
}
|
||||
|
||||
export default{
|
||||
getWorkTrainList,
|
||||
getGroupByDataType,
|
||||
queryWorkTrainList
|
||||
}
|
||||
|
|
@ -114,6 +114,12 @@ const getPlanList=projectId=>{
|
|||
method: "get"
|
||||
});
|
||||
}
|
||||
const getDefaultViewPoint=(projectId,viewType)=>{
|
||||
return request({
|
||||
url: `/manage/api/bim/viewpoint/getDefaultViewPoint?projectId=${projectId}&viewType=${viewType||1}`,
|
||||
method: "get"
|
||||
});
|
||||
}
|
||||
|
||||
export default {
|
||||
listBimModel,
|
||||
|
|
@ -129,5 +135,6 @@ export default {
|
|||
getTreeAllLeafChild,
|
||||
viewpointGet,
|
||||
roamingGet,
|
||||
getPlanList
|
||||
getPlanList,
|
||||
getDefaultViewPoint
|
||||
};
|
||||
|
|
|
|||
|
|
@ -1,336 +0,0 @@
|
|||
import Vue from 'vue'
|
||||
var vms = Vue.component("amplify-cbcsfb", {
|
||||
template: `
|
||||
<div>
|
||||
<div class="amplify-title-icon">
|
||||
<img src="/cdn/images/WEB_DBD5893450984E50AFF356EF44FF4139.png" @click="openAmplify">
|
||||
</div>
|
||||
<transition name="el-zoom-in-top">
|
||||
<div class="amplify-fixed" v-show="show" style="display: none" @click="closeAmplifyAll">
|
||||
<div class="amplify-max">
|
||||
<div class="amplify-title">
|
||||
<div>超标次数分布</div>
|
||||
<div class="amplify-close" @click="closeAmplify"><i class="el-icon-close"></i></div>
|
||||
</div>
|
||||
<div class="amplify-content">
|
||||
<!--内容区域-->
|
||||
<!--头部tab栏-->
|
||||
<div class="amplify-warning-info">
|
||||
<div class="amplify-warning-info-title">
|
||||
<div :class="infoNav==0?'active':''" @click="onWarningInfoNav(0)">今日</div>
|
||||
<div :class="infoNav==1?'active':''" @click="onWarningInfoNav(1)">本周</div>
|
||||
<div :class="infoNav==2?'active':''" @click="onWarningInfoNav(2)">本月</div>
|
||||
</div>
|
||||
</div>
|
||||
<!--数据图展示-->
|
||||
<div class="amplify-warning-info">
|
||||
<div class="amplify-overproof" ref="warningPieChart"></div>
|
||||
<div class="amplify-chart-gif amplify-chart-overview-gif" v-if="typeDistributionData.length > 0" style="top: 99px;left:149px"></div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</transition>
|
||||
</div>
|
||||
`,
|
||||
props: {
|
||||
|
||||
},
|
||||
data() {
|
||||
return {
|
||||
show:false,
|
||||
infoNav:0,
|
||||
dayStartTime:'',
|
||||
dayEndTime:'',
|
||||
weekStartTime:'',
|
||||
weekEndTime:'',
|
||||
monthStartTime:'',
|
||||
monthEndTime:'',
|
||||
typeDistributionData:[],
|
||||
text:'累计超标',
|
||||
height:401
|
||||
}
|
||||
},
|
||||
created(){
|
||||
this.getTime()
|
||||
},
|
||||
mounted(){
|
||||
|
||||
},
|
||||
methods: {
|
||||
openAmplify() {
|
||||
this.show = true
|
||||
this.getTypeDistributionData()
|
||||
},
|
||||
closeAmplify() {
|
||||
this.show = false
|
||||
},
|
||||
closeAmplifyAll(e) {
|
||||
if (e.target.className == 'amplify-fixed') {
|
||||
this.show = false
|
||||
}
|
||||
},
|
||||
getTime() {
|
||||
var that = this
|
||||
this.uploadTime = that.dateFormat("yyyy-MM-dd HH:mm:ss",new Date());
|
||||
//今日
|
||||
that.dayStartTime = that.dateFormat("yyyy-MM-dd HH:mm:ss",new Date(new Date().setHours(0,0,0)));
|
||||
that.dayEndTime = that.dateFormat("yyyy-MM-dd HH:mm:ss",new Date(new Date().setHours(23,59,59)));
|
||||
// //本周
|
||||
let now = new Date();
|
||||
let day = now.getDay() || 7;
|
||||
that.weekStartTime = that.dateFormat("yyyy-MM-dd HH:mm:ss",new Date(new Date(now.getFullYear(), now.getMonth(), now.getDate() + 1 - day).setHours(0,0,0)))
|
||||
that.weekEndTime = that.dateFormat("yyyy-MM-dd HH:mm:ss",new Date(new Date(now.getFullYear(), now.getMonth(), now.getDate() + 7 - day).setHours(23,59,59)))
|
||||
// //本月
|
||||
let now2 = new Date();
|
||||
let day1 = new Date(now2.getFullYear(),now2.getMonth()+1,0).getDate();
|
||||
that.monthStartTime= that.dateFormat("yyyy-MM-dd HH:mm:ss",new Date(new Date(now2.getFullYear(), now2.getMonth(), 1).setHours(0,0,0)))
|
||||
that.monthEndTime= that.dateFormat("yyyy-MM-dd HH:mm:ss",new Date(new Date(now2.getFullYear(),now2.getMonth(),day1).setHours(23,59,59)))
|
||||
},
|
||||
dateFormat(fmt, date) {
|
||||
let ret;
|
||||
const opt = {
|
||||
"y+": date.getFullYear().toString(), // 年
|
||||
"M+": (date.getMonth() + 1).toString(), // 月
|
||||
"d+": date.getDate().toString(), // 日
|
||||
"H+": date.getHours().toString(), // 时
|
||||
"m+": date.getMinutes().toString(), // 分
|
||||
"s+": date.getSeconds().toString() // 秒
|
||||
// 有其他格式化字符需求可以继续添加，必须转化成字符串
|
||||
};
|
||||
for (let k in opt) {
|
||||
ret = new RegExp("(" + k + ")").exec(fmt);
|
||||
if (ret) {
|
||||
fmt = fmt.replace(ret[1], (ret[1].length == 1) ? (opt[k]) : (opt[k].padStart(ret[1].length, "0")))
|
||||
};
|
||||
};
|
||||
return fmt;
|
||||
},
|
||||
//当日预警信息
|
||||
onWarningInfoNav(n) {
|
||||
this.infoNav = n
|
||||
this.getTypeDistributionData()
|
||||
},
|
||||
//超标次数分布
|
||||
getTypeDistributionData() {
|
||||
var startTime = this.dayStartTime;
|
||||
var endTime = this.dayEndTime;
|
||||
if (this.infoNav == 0) {
|
||||
startTime = this.dayStartTime;
|
||||
endTime = this.dayEndTime;
|
||||
} else if (this.infoNav == 1) {
|
||||
startTime = this.weekStartTime;
|
||||
endTime = this.weekEndTime;
|
||||
} else if (this.infoNav == 2) {
|
||||
startTime = this.monthStartTime;
|
||||
endTime = this.monthEndTime;
|
||||
}
|
||||
//今日超标次数分布
|
||||
axios.get("/mkl/api/getEnvironmentWaringNumber", {
|
||||
params: {
|
||||
projectId: JSON.parse(localStorage.getItem("data1")).id,
|
||||
startTime: startTime,
|
||||
endTime: endTime
|
||||
}
|
||||
}).then(res => {
|
||||
if (res.data.code == "200") {
|
||||
var tempData = [
|
||||
// { name:'PM2.5', value:'30' },
|
||||
{name: 'PM10', value: '20'},
|
||||
{name: '噪音', value: '20'},
|
||||
// { name:'风速', value:'10' },
|
||||
{name: '温度', value: '10'},
|
||||
{name: '湿度', value: '20'}
|
||||
]
|
||||
tempData.map(x => {
|
||||
if (x.name == "PM2.5") {
|
||||
x.value = res.data.data.PM25WaringNumber
|
||||
} else if (x.name == "PM10") {
|
||||
x.value = res.data.data.PM10WaringNumber
|
||||
} else if (x.name == "噪音") {
|
||||
x.value = res.data.data.noiseNumber
|
||||
} else if (x.name == "风速") {
|
||||
x.value = res.data.data.windSpeedNumber
|
||||
} else if (x.name == "温度") {
|
||||
x.value = res.data.data.temperatureWaringNumber
|
||||
} else if (x.name == "湿度") {
|
||||
x.value = res.data.data.humidityNumber
|
||||
}
|
||||
})
|
||||
this.typeDistributionData = tempData
|
||||
this.getChartData()
|
||||
}
|
||||
}).catch(err => {
|
||||
|
||||
})
|
||||
},
|
||||
//数据图渲染接口
|
||||
getChartData() {
|
||||
//品类金额占比 饼图
|
||||
var chChartPie = echarts.init(this.$refs.warningPieChart);
|
||||
this.echartPie(chChartPie, this.typeDistributionData)
|
||||
},
|
||||
echartPie(chChart, chartData) {
|
||||
var that = this
|
||||
let newPromise = new Promise((resolve) => {
|
||||
resolve()
|
||||
})
|
||||
|
||||
//然后异步执行echarts的初始化函数
|
||||
newPromise.then(() => {
|
||||
var total_datas = 0;
|
||||
var data = [];
|
||||
var legendData = [];
|
||||
var color = ['#4974ff', '#52aef7', '#6863d7', '#1d5d89', '#20e6ff', '#67feef']
|
||||
for (let i = 0; i < chartData.length; i++) {
|
||||
total_datas += Number(chartData[i].value);
|
||||
legendData.push(chartData[i].name)
|
||||
data.push(
|
||||
{
|
||||
value: chartData[i].value,
|
||||
name: chartData[i].name,
|
||||
itemStyle: {
|
||||
normal: {
|
||||
//颜色渐变
|
||||
color: color[i]
|
||||
},
|
||||
},
|
||||
},
|
||||
)
|
||||
}
|
||||
/* let total = chartData.reduce((a, b) => {
|
||||
return a + b.value;
|
||||
}, 0);*/
|
||||
|
||||
let legendOption = {
|
||||
top: "center",
|
||||
orient: "vertical",
|
||||
icon: "circle",
|
||||
itemWidth: 25,
|
||||
itemGap: 16,
|
||||
textStyle: {
|
||||
fontSize: 25,
|
||||
rich: {
|
||||
name: {
|
||||
color: "#c3dbfd",
|
||||
padding: [25, 10, 40, 10],
|
||||
// align: 'right'
|
||||
// width: '300px'
|
||||
fontSize: 25,
|
||||
},
|
||||
percent: {
|
||||
color: "#18DB9F",
|
||||
fontSize: 25,
|
||||
padding: [0, 10, 0, 10],
|
||||
// align: 'right'
|
||||
},
|
||||
},
|
||||
},
|
||||
formatter: function (name) {
|
||||
let res = chartData.filter((v) => v.name === name);
|
||||
let percent = total_datas == 0 ? 0 : (((res[0].value * 100) / total_datas).toFixed(1));
|
||||
return "{name| " + name + "}\n{percent|" + res[0].value + "}{percent|" + percent + "%}";
|
||||
},
|
||||
};
|
||||
this.option = {
|
||||
title: {
|
||||
text: total_datas,
|
||||
subtext: this.text,
|
||||
x: "180",
|
||||
y: "150",
|
||||
textStyle: {
|
||||
color: "#0dd2fd",
|
||||
fontSize: 48,
|
||||
fontWeight: "bold",
|
||||
align: "center",
|
||||
width: "200px",
|
||||
},
|
||||
subtextStyle: {
|
||||
color: "#a5b5f0",
|
||||
fontSize: 25,
|
||||
align: "center",
|
||||
},
|
||||
},
|
||||
tooltip: {
|
||||
show: false,
|
||||
trigger: 'item',
|
||||
formatter: "{b} <br/>{c} ({d}%)"
|
||||
},
|
||||
legend: [
|
||||
{
|
||||
right: 20,
|
||||
data: legendData,
|
||||
align: "left",
|
||||
...legendOption,
|
||||
},
|
||||
],
|
||||
|
||||
series: [
|
||||
{
|
||||
name: "品类金额占比",
|
||||
type: "pie",
|
||||
center: ["25%", "50%"],
|
||||
radius: ["46%", "63%"],
|
||||
data: data,
|
||||
label: {
|
||||
show: false,
|
||||
},
|
||||
itemStyle: {
|
||||
normal: {
|
||||
borderWidth: 10,
|
||||
borderColor: "#051a36"
|
||||
}
|
||||
},
|
||||
|
||||
},
|
||||
{
|
||||
name: "外边框",
|
||||
type: "pie",
|
||||
clockWise: false, //顺时加载
|
||||
hoverAnimation: false, //鼠标移入变大
|
||||
center: ["25%", "50%"],
|
||||
radius: ["70%", "70%"],
|
||||
label: {
|
||||
normal: {
|
||||
show: false,
|
||||
},
|
||||
},
|
||||
data: [
|
||||
{
|
||||
value: 9,
|
||||
name: "",
|
||||
itemStyle: {
|
||||
normal: {
|
||||
borderWidth: 6,
|
||||
borderColor: "#152c65",
|
||||
},
|
||||
},
|
||||
},
|
||||
],
|
||||
},
|
||||
],
|
||||
}
|
||||
chChart.setOption(this.option);
|
||||
window.onresize = chChart.resize;
|
||||
|
||||
chChart.off('click')
|
||||
|
||||
chChart.on('click', function (params) {
|
||||
for (let i = 0; i < chartData.length; i++) {
|
||||
if (params.name == chartData[i].name) {
|
||||
that.$emit('ledger', chartData[i]);
|
||||
break
|
||||
}
|
||||
}
|
||||
})
|
||||
})
|
||||
},
|
||||
|
||||
},
|
||||
watch:{
|
||||
|
||||
},
|
||||
|
||||
})
|
||||
|
||||
|
||||
|
|
@ -1,128 +0,0 @@
|
|||
import Vue from 'vue'
|
||||
var vms = Vue.component("amplify-sbqd", {
|
||||
template: `
|
||||
<div>
|
||||
<div class="amplify-title-icon">
|
||||
<img src="/cdn/images/WEB_DBD5893450984E50AFF356EF44FF4139.png" @click="openAmplify">
|
||||
</div>
|
||||
<transition name="el-zoom-in-top">
|
||||
<div class="amplify-fixed" v-show="show" style="display: none" @click="closeAmplifyAll">
|
||||
<div class="amplify-max">
|
||||
<div class="amplify-title">
|
||||
<div>设备概况</div>
|
||||
<div class="amplify-close" @click="closeAmplify"><i class="el-icon-close"></i></div>
|
||||
</div>
|
||||
<div class="amplify-content">
|
||||
<!--内容区域-->
|
||||
<div class="amplify-equipment-list-max">
|
||||
<el-row>
|
||||
<el-col :span="12">
|
||||
<div class="amplify-equipment-list-min">
|
||||
<div class="amplify-equipment-list-gif">
|
||||
<img src="/images/hj_shebeizongshu.png">
|
||||
</div>
|
||||
<div class="amplify-equipment-list-data">
|
||||
<p>设备总数</p>
|
||||
<div v-cloak><span>{{deviceNum}}</span>个</div>
|
||||
</div>
|
||||
</div>
|
||||
</el-col>
|
||||
<el-col :span="12">
|
||||
<div class="amplify-equipment-list-min">
|
||||
<div class="amplify-equipment-list-gif">
|
||||
<img src="/images/hj_zaixianshebei.png">
|
||||
</div>
|
||||
<div class="amplify-equipment-list-data">
|
||||
<p>在线设备</p>
|
||||
<div v-cloak><span>{{onlineNum}}</span>个</div>
|
||||
</div>
|
||||
</div>
|
||||
</el-col>
|
||||
<el-col :span="12">
|
||||
<div class="amplify-equipment-list-min">
|
||||
<div class="amplify-equipment-list-gif">
|
||||
<img src="/images/hj_baojingshebei.png">
|
||||
</div>
|
||||
<div class="amplify-equipment-list-data">
|
||||
<p>报警设备</p>
|
||||
<div v-cloak><span>{{warnNum}}</span>个</div>
|
||||
</div>
|
||||
</div>
|
||||
</el-col>
|
||||
<el-col :span="12">
|
||||
<div class="amplify-equipment-list-min">
|
||||
<div class="amplify-equipment-list-gif">
|
||||
<img src="/images/hj_lixianshebei.png">
|
||||
</div>
|
||||
<div class="amplify-equipment-list-data">
|
||||
<p>离线设备</p>
|
||||
<div v-cloak><span>{{offlineNum}}</span>个</div>
|
||||
</div>
|
||||
</div>
|
||||
</el-col>
|
||||
</el-row>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</transition>
|
||||
</div>
|
||||
`,
|
||||
props: {
|
||||
|
||||
},
|
||||
data() {
|
||||
return {
|
||||
show:false,
|
||||
//设备清单
|
||||
deviceNum:0,
|
||||
onlineNum:0,
|
||||
warnNum:0,
|
||||
offlineNum:0,
|
||||
}
|
||||
},
|
||||
mounted(){
|
||||
|
||||
},
|
||||
methods: {
|
||||
openAmplify(){
|
||||
this.show = true
|
||||
this.getDeviceInfo()
|
||||
},
|
||||
closeAmplify(){
|
||||
this.show = false
|
||||
},
|
||||
closeAmplifyAll(e){
|
||||
if(e.target.className == 'amplify-fixed'){
|
||||
this.show = false
|
||||
}
|
||||
},
|
||||
//设备清单
|
||||
getDeviceInfo() {
|
||||
var projectId = JSON.parse(localStorage.getItem("data1")).id
|
||||
if(projectId == 98 || projectId == 132) {
|
||||
this.deviceNum = 1,
|
||||
this.onlineNum = 1,
|
||||
this.warnNum = 0,
|
||||
this.offlineNum = 0
|
||||
this.showDevice = true;
|
||||
this.selectData = [{text:'扬尘监测设备#1',id:1},]
|
||||
} else {
|
||||
this.deviceNum = 0,
|
||||
this.onlineNum = 0,
|
||||
this.warnNum = 0,
|
||||
this.offlineNum = 0
|
||||
this.showDevice = false
|
||||
this.selectData = [{text:'暂无数据',id:1}]
|
||||
|
||||
}
|
||||
},
|
||||
|
||||
},
|
||||
watch:{
|
||||
|
||||
},
|
||||
|
||||
})
|
||||
|
||||
|
||||
|
|
@ -1,349 +0,0 @@
|
|||
import Vue from 'vue'
|
||||
var vms = Vue.component("amplify-gqgk", {
|
||||
template: `
|
||||
<div>
|
||||
<div class="amplify-title-icon">
|
||||
<img src="/cdn/images/WEB_DBD5893450984E50AFF356EF44FF4139.png" @click="openAmplify">
|
||||
</div>
|
||||
<transition name="el-zoom-in-top">
|
||||
<div class="amplify-fixed" v-show="show" style="display: none" @click="closeAmplifyAll">
|
||||
<div class="amplify-max">
|
||||
<div class="amplify-title">
|
||||
<div>工期概况</div>
|
||||
<div class="amplify-close" @click="closeAmplify"><i class="el-icon-close"></i></div>
|
||||
</div>
|
||||
<div class="amplify-content">
|
||||
<!--内容区域-->
|
||||
<!--头部区域-->
|
||||
<div class="amplify-pcd-duration-survey-max">
|
||||
<div class="amplify-pcd-duration-survey">
|
||||
<div class="amplify-pcd-duration-survey-left">
|
||||
<div class="amplify-glr-title">合同工期</div>
|
||||
<div style="display: flex;align-items: center">
|
||||
<div class="amplify-people-number-con" style="margin-left: 30px">
|
||||
<div v-for="item in people" v-html="item"></div>
|
||||
</div>
|
||||
<div v-if="unit" style="">{{unit}}</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="amplify-pcd-duration-survey-time">
|
||||
2022-09-01 至 2024-08-21
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<!-- 数据百分比展示-->
|
||||
<el-row>
|
||||
<el-col :span="12">
|
||||
<div class="amplify-row-circle" ref="chart1"></div>
|
||||
</el-col>
|
||||
<el-col :span="12">
|
||||
<div class="amplify-row-circle" ref="chart2"></div>
|
||||
</el-col>
|
||||
</el-row>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</transition>
|
||||
</div>
|
||||
`,
|
||||
props: {},
|
||||
data() {
|
||||
return {
|
||||
show: false,
|
||||
people: [],
|
||||
number: 720,
|
||||
unit: '天',
|
||||
shiJiPro:0,
|
||||
timePro:0,
|
||||
text:'时间进度',
|
||||
text1:'实际产值进度',
|
||||
projectId:JSON.parse(localStorage.getItem("data1")).id,
|
||||
}
|
||||
},
|
||||
mounted() {
|
||||
|
||||
},
|
||||
methods: {
|
||||
openAmplify() {
|
||||
this.show = true
|
||||
this.setData()
|
||||
this.gainProBase()
|
||||
},
|
||||
closeAmplify() {
|
||||
this.show = false
|
||||
},
|
||||
closeAmplifyAll(e) {
|
||||
if (e.target.className == 'amplify-fixed') {
|
||||
this.show = false
|
||||
}
|
||||
},
|
||||
setData() {
|
||||
var people = this.number != undefined ? this.number.toString().split('') : 0;
|
||||
this.people = people
|
||||
},
|
||||
//数据接口
|
||||
gainProBase() {
|
||||
axios.post("/api/building/proBaseInfo?projectId=" + this.projectId).then(res => {
|
||||
if(res.data.code == "200") {
|
||||
this.shiJiPro = parseInt((res.data.data.kailei_money / 67640 * 100).toFixed(0))
|
||||
this.timePro = parseInt(((moment().diff(moment(res.data.data.actual_start_date), 'days') / 720) * 100).toFixed(0))
|
||||
}
|
||||
this.getChartData()
|
||||
this.getChartData1()
|
||||
}).catch(err => {
|
||||
|
||||
})
|
||||
},
|
||||
//数据展示图1
|
||||
getChartData(){
|
||||
var chChartBar = echarts.init(this.$refs.chart1);
|
||||
this.echartBar(chChartBar,this.timePro,this.text)
|
||||
},
|
||||
echartBar(chChart,value,text){
|
||||
let newPromise = new Promise((resolve) => {
|
||||
resolve()
|
||||
})
|
||||
//然后异步执行echarts的初始化函数
|
||||
newPromise.then(() => {
|
||||
var placeHolderStyle = {
|
||||
normal: {
|
||||
label: {
|
||||
show: false,
|
||||
},
|
||||
labelLine: {
|
||||
show: false,
|
||||
},
|
||||
color: "rgba(0,0,0,0)",
|
||||
borderWidth: 0,
|
||||
},
|
||||
emphasis: {
|
||||
color: "rgba(0,0,0,0)",
|
||||
borderWidth: 0,
|
||||
},
|
||||
};
|
||||
|
||||
var dataStyle = {
|
||||
|
||||
};
|
||||
this.option ={
|
||||
title: [
|
||||
{
|
||||
text: value+'%',
|
||||
textAlign: "center",
|
||||
left: "48%",
|
||||
top: "30%",
|
||||
textStyle: {
|
||||
color: "#67abf2",
|
||||
fontSize: 23,
|
||||
},
|
||||
},
|
||||
{
|
||||
text: text,
|
||||
left: "48%",
|
||||
top: "80%",
|
||||
textAlign: "center",
|
||||
textStyle: {
|
||||
color: "#cdd7fa",
|
||||
fontWeight: "normal",
|
||||
fontSize: "16",
|
||||
textAlign: "center",
|
||||
},
|
||||
},
|
||||
],
|
||||
series: [
|
||||
{
|
||||
type: "pie",
|
||||
hoverAnimation: false,
|
||||
radius: ["60%", "59%"],
|
||||
center: ["50%", "40%"],
|
||||
labelLine: {
|
||||
normal: {
|
||||
show: false,
|
||||
},
|
||||
},
|
||||
label: {
|
||||
normal: {
|
||||
position: "center",
|
||||
},
|
||||
},
|
||||
data: [
|
||||
{
|
||||
value: 100,
|
||||
itemStyle: {
|
||||
normal: {
|
||||
color: "#255788",
|
||||
},
|
||||
},
|
||||
},
|
||||
|
||||
],
|
||||
},
|
||||
{
|
||||
type: "pie",
|
||||
hoverAnimation: false,
|
||||
radius: ["53%", "60%"],
|
||||
center: ["50%", "40%"],
|
||||
labelLine: {
|
||||
normal: {
|
||||
show: false,
|
||||
},
|
||||
},
|
||||
label: {
|
||||
normal: {
|
||||
position: "center",
|
||||
},
|
||||
},
|
||||
data: [
|
||||
{
|
||||
value: value,
|
||||
itemStyle: {
|
||||
normal: {
|
||||
color: "#68a8f2",
|
||||
},
|
||||
},
|
||||
normal: {
|
||||
show: false,
|
||||
},
|
||||
},
|
||||
{
|
||||
value: 100-value,
|
||||
itemStyle: placeHolderStyle,
|
||||
},
|
||||
],
|
||||
},
|
||||
],
|
||||
};
|
||||
chChart.setOption(this.option);
|
||||
window.onresize = chChart.resize;
|
||||
})
|
||||
},
|
||||
//数据展示图2
|
||||
getChartData1(){
|
||||
var chChartBar = echarts.init(this.$refs.chart2);
|
||||
this.echartBar(chChartBar,this.shiJiPro,this.text1)
|
||||
},
|
||||
echartBar(chChart,value,text){
|
||||
let newPromise = new Promise((resolve) => {
|
||||
resolve()
|
||||
})
|
||||
//然后异步执行echarts的初始化函数
|
||||
newPromise.then(() => {
|
||||
var placeHolderStyle = {
|
||||
normal: {
|
||||
label: {
|
||||
show: false,
|
||||
},
|
||||
labelLine: {
|
||||
show: false,
|
||||
},
|
||||
color: "rgba(0,0,0,0)",
|
||||
borderWidth: 0,
|
||||
},
|
||||
emphasis: {
|
||||
color: "rgba(0,0,0,0)",
|
||||
borderWidth: 0,
|
||||
},
|
||||
};
|
||||
|
||||
var dataStyle = {
|
||||
|
||||
};
|
||||
this.option ={
|
||||
title: [
|
||||
{
|
||||
text: value+'%',
|
||||
textAlign: "center",
|
||||
left: "48%",
|
||||
top: "30%",
|
||||
textStyle: {
|
||||
color: "#67abf2",
|
||||
fontSize: 23,
|
||||
},
|
||||
},
|
||||
{
|
||||
text: text,
|
||||
left: "48%",
|
||||
top: "80%",
|
||||
textAlign: "center",
|
||||
textStyle: {
|
||||
color: "#cdd7fa",
|
||||
fontWeight: "normal",
|
||||
fontSize: "16",
|
||||
textAlign: "center",
|
||||
},
|
||||
},
|
||||
],
|
||||
series: [
|
||||
{
|
||||
type: "pie",
|
||||
hoverAnimation: false,
|
||||
radius: ["60%", "59%"],
|
||||
center: ["50%", "40%"],
|
||||
labelLine: {
|
||||
normal: {
|
||||
show: false,
|
||||
},
|
||||
},
|
||||
label: {
|
||||
normal: {
|
||||
position: "center",
|
||||
},
|
||||
},
|
||||
data: [
|
||||
{
|
||||
value: 100,
|
||||
itemStyle: {
|
||||
normal: {
|
||||
color: "#255788",
|
||||
},
|
||||
},
|
||||
},
|
||||
|
||||
],
|
||||
},
|
||||
{
|
||||
type: "pie",
|
||||
hoverAnimation: false,
|
||||
radius: ["53%", "60%"],
|
||||
center: ["50%", "40%"],
|
||||
labelLine: {
|
||||
normal: {
|
||||
show: false,
|
||||
},
|
||||
},
|
||||
label: {
|
||||
normal: {
|
||||
position: "center",
|
||||
},
|
||||
},
|
||||
data: [
|
||||
{
|
||||
value: value,
|
||||
itemStyle: {
|
||||
normal: {
|
||||
color: "#68a8f2",
|
||||
},
|
||||
},
|
||||
normal: {
|
||||
show: false,
|
||||
},
|
||||
},
|
||||
{
|
||||
value: 100-value,
|
||||
itemStyle: placeHolderStyle,
|
||||
},
|
||||
],
|
||||
},
|
||||
],
|
||||
};
|
||||
chChart.setOption(this.option);
|
||||
window.onresize = chChart.resize;
|
||||
})
|
||||
},
|
||||
|
||||
},
|
||||
watch: {},
|
||||
|
||||
})
|
||||
|
||||
|
||||
|
|
@ -1,255 +0,0 @@
|
|||
import Vue from 'vue'
|
||||
var vms = Vue.component("amplify-bgqr", {
|
||||
template: `
|
||||
<div>
|
||||
<div class="amplify-title-icon">
|
||||
<img src="/cdn/images/WEB_DBD5893450984E50AFF356EF44FF4139.png" @click="openAmplify">
|
||||
</div>
|
||||
<transition name="el-zoom-in-top">
|
||||
<div class="amplify-fixed" v-show="show" style="display: none" @click="closeAmplifyAll">
|
||||
<div class="amplify-max">
|
||||
<div class="amplify-title">
|
||||
<div>设计文件管理</div>
|
||||
<div class="amplify-close" @click="closeAmplify"><i class="el-icon-close"></i></div>
|
||||
</div>
|
||||
<div class="amplify-content">
|
||||
<!--内容区域-->
|
||||
<!--头部切换-->
|
||||
<div class="sjk-chart-line-title">
|
||||
<div :class="schemeNav==1?'active':''" @click="onSchemeBtn(0)" v-cloak="" style="padding: 15px 25px;font-size: 22px">变更签认（{{constructionNum}}）</div>
|
||||
<div :class="schemeNav==2?'active':''" @click="onSchemeBtn(1)" v-cloak="" style="padding: 15px 25px;font-size: 22px">工程签认（{{alterationNum}}）</div>
|
||||
</div>
|
||||
<!--表格展示数据-->
|
||||
<div class="amplify-quality-table">
|
||||
<el-table ref="pxjy"
|
||||
:data="data.data"
|
||||
style="width: 100%"
|
||||
:height="height+'px'"
|
||||
:row-style="rowStyle"
|
||||
:header-row-style="headerStyle"
|
||||
@cell-mouse-enter="MouseEnter"
|
||||
@cell-mouse-leave="MouseLeave"
|
||||
class="elTable"
|
||||
|
||||
>
|
||||
<el-table-column :label="item.label" :width="item.width" v-for="item in data.label" show-overflow-tooltip >
|
||||
<template slot-scope="scope">
|
||||
<div v-if="item.type==''" :style="{'color':item.color}">{{scope.row[item.data]}}</div>
|
||||
<div v-if="item.type=='img'" style="padding-top: 8px;">
|
||||
<el-image style="width: 80px; height: 80px" :src="scope.row[item.data]" fit="cover"
|
||||
></el-image>
|
||||
</div>
|
||||
<div v-if="item.type=='state'">
|
||||
<div :style="{'color':scope.row[item.type_color]}">{{scope.row[item.data]}}</div>
|
||||
</div>
|
||||
</template>
|
||||
</el-table-column>
|
||||
</el-table>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</transition>
|
||||
</div>
|
||||
`,
|
||||
props: {},
|
||||
data() {
|
||||
return {
|
||||
show: false,
|
||||
schemeNav: 1,
|
||||
constructionNum: 0,
|
||||
alterationNum: 0,
|
||||
height: 395,
|
||||
data: {},
|
||||
rowStyle:{
|
||||
fontSize:'25px',
|
||||
height:'64px'
|
||||
},
|
||||
headerStyle:{
|
||||
fontSize:'22px',
|
||||
padding:'10px'
|
||||
},
|
||||
}
|
||||
},
|
||||
mounted() {
|
||||
this.interval = setInterval(this.scroll, 50);
|
||||
},
|
||||
methods: {
|
||||
openAmplify() {
|
||||
this.show = true
|
||||
this.getSchemeTableData('0')
|
||||
},
|
||||
closeAmplify() {
|
||||
this.show = false
|
||||
},
|
||||
closeAmplifyAll(e) {
|
||||
if (e.target.className == 'amplify-fixed') {
|
||||
this.show = false
|
||||
}
|
||||
},
|
||||
//变更签认
|
||||
onSchemeBtn(n) {
|
||||
this.schemeNav = n == 0 ? 1 : 2
|
||||
this.getSchemeTableData(n)
|
||||
},
|
||||
getSchemeTableData(type){
|
||||
var data = null;
|
||||
if(type == 0){
|
||||
data = {
|
||||
label: [
|
||||
{
|
||||
label: '序号',
|
||||
width: '100',
|
||||
color:'',
|
||||
isShow:true,
|
||||
type:'',
|
||||
type_color:'',
|
||||
data: 'sort',
|
||||
},
|
||||
/* {
|
||||
label: 'idStr',
|
||||
width: '50',
|
||||
color:'',
|
||||
isShow:false,
|
||||
type:'',
|
||||
type_color:'',
|
||||
data: 'id',
|
||||
},*/
|
||||
{
|
||||
label: '变更名称',
|
||||
width: '',
|
||||
color:'#50a2eb',
|
||||
isShow:true,
|
||||
type:'',
|
||||
type_color:'',
|
||||
data: 'name'
|
||||
},
|
||||
{
|
||||
label: '变更内容',
|
||||
width: '',
|
||||
color:'',
|
||||
isShow:true,
|
||||
type:'',
|
||||
type_color:'',
|
||||
data: 'content'
|
||||
},
|
||||
{
|
||||
label: '业主批复情况',
|
||||
width: '',
|
||||
color:'',
|
||||
isShow:true,
|
||||
type:'state',
|
||||
type_color:'situation_color',
|
||||
data: 'situation'
|
||||
},
|
||||
|
||||
],
|
||||
data: [],
|
||||
}
|
||||
} else{
|
||||
data = {
|
||||
label: [
|
||||
{
|
||||
label: '序号',
|
||||
width: '50',
|
||||
color:'',
|
||||
type:'',
|
||||
type_color:'',
|
||||
data: 'sort',
|
||||
},
|
||||
{
|
||||
label: '工程名称',
|
||||
width: '',
|
||||
color:'#50a2eb',
|
||||
type:'',
|
||||
type_color:'',
|
||||
data: 'name'
|
||||
},
|
||||
{
|
||||
label: '工程内容',
|
||||
width: '',
|
||||
color:'',
|
||||
type:'',
|
||||
type_color:'',
|
||||
data: 'content'
|
||||
},
|
||||
{
|
||||
label: '业主批复情况',
|
||||
width: '',
|
||||
color:'',
|
||||
type:'state',
|
||||
type_color:'situation_color',
|
||||
data: 'situation'
|
||||
},
|
||||
|
||||
],
|
||||
data: [],
|
||||
}
|
||||
}
|
||||
axios.post("/system/alterationEndorseConfig/list1",{pageNum:1,pageSize:9999,projectId:this.projectId}).then(res=>{
|
||||
let result = res.data
|
||||
if(result.code == 0){
|
||||
this.constructionNum = result.rows.filter(item=>item.alterationType == 0).length
|
||||
this.alterationNum = result.rows.filter(item=>item.alterationType == 1).length
|
||||
|
||||
data.data = result.rows.filter(item=>{
|
||||
if(item.alterationType == type){
|
||||
return item
|
||||
}
|
||||
}).map((item,index)=>{
|
||||
return {
|
||||
sort: index + 1,
|
||||
id:item.id,
|
||||
name:item.alterationName,
|
||||
content:item.alterationContext,
|
||||
situation: item.alterationStatus == '0' ? "已通过":"未通过",
|
||||
situation_color: item.alterationStatus == '0' ? "#39c30b":"#f73647"
|
||||
}
|
||||
})
|
||||
}
|
||||
if(data.data.length > 3){
|
||||
for (let i = 0; i <3 ; i++) {
|
||||
data.data.push(data.data[i])
|
||||
}
|
||||
}
|
||||
this.data = data
|
||||
|
||||
})
|
||||
|
||||
|
||||
},
|
||||
|
||||
// 表格隔行变色
|
||||
|
||||
//左边信息表
|
||||
scroll() {
|
||||
let maxHeight = this.$refs.pxjy.$el.querySelectorAll('.el-table__body')[0].offsetHeight;
|
||||
let clientHeight = this.$refs.pxjy.bodyWrapper.clientHeight;
|
||||
if (Math.abs(this.$refs.pxjy.bodyWrapper.scrollTop - (maxHeight - clientHeight)) < 5) { //预留5像素误差
|
||||
this.$refs.pxjy.bodyWrapper.scrollTop = 0;
|
||||
} else {
|
||||
this.$refs.pxjy.bodyWrapper.scrollTop += 1;//32是每一行表格的高度，每秒滚一行
|
||||
}
|
||||
}
|
||||
,
|
||||
MouseEnter() {//鼠标移入停止滚动
|
||||
clearInterval(this.interval);
|
||||
}
|
||||
,
|
||||
MouseLeave() {//鼠标离开继续滚动
|
||||
this.interval = setInterval(this.scroll, 50);
|
||||
},
|
||||
onClickPoint(n) {
|
||||
this.btnNav = n;
|
||||
},
|
||||
},
|
||||
watch: {
|
||||
data:function () {
|
||||
clearInterval(this.interval);
|
||||
this.interval = setInterval(this.scroll, 50);
|
||||
},
|
||||
},
|
||||
|
||||
})
|
||||
|
||||
|
||||
|
|
@ -1,159 +0,0 @@
|
|||
import Vue from 'vue'
|
||||
var vms = Vue.component("amplify-gczljdagl", {
|
||||
template: `
|
||||
<div>
|
||||
<div class="amplify-title-icon">
|
||||
<img src="/cdn/images/WEB_DBD5893450984E50AFF356EF44FF4139.png" @click="openAmplify">
|
||||
</div>
|
||||
<transition name="el-zoom-in-top">
|
||||
<div class="amplify-fixed" v-show="show" style="display: none" @click="closeAmplifyAll">
|
||||
<div class="amplify-max">
|
||||
<div class="amplify-title">
|
||||
<div v-cloak>{{label}}</div>
|
||||
<div class="amplify-close" @click="closeAmplify"><i class="el-icon-close"></i></div>
|
||||
</div>
|
||||
<div class="amplify-content">
|
||||
<!--内容区域-->
|
||||
<div class="quality-table">
|
||||
<el-table ref="pxjy"
|
||||
:data="data.data"
|
||||
style="width: 100%"
|
||||
:height="height+'px'"
|
||||
@cell-mouse-enter="MouseEnter"
|
||||
@cell-mouse-leave="MouseLeave"
|
||||
class="elTable"
|
||||
:cell-class-name="tableRowClassName"
|
||||
>
|
||||
<el-table-column :label="item.label" :width="item.width" v-for="item in data.label" show-overflow-tooltip>
|
||||
<template slot-scope="scope">
|
||||
<div v-if="item.type==''" :style="{'color':item.color}">{{scope.row[item.data]}}</div>
|
||||
<div v-if="item.type=='img'" style="padding-top: 3px;">
|
||||
<el-image style="width: 40px; height: 40px" :src="scope.row[item.data]" fit="cover"
|
||||
></el-image>
|
||||
</div>
|
||||
<div v-if="item.type=='state'">
|
||||
<div :style="{'color':scope.row[item.type_color]}">{{scope.row[item.data]}}</div>
|
||||
</div>
|
||||
</template>
|
||||
</el-table-column>
|
||||
</el-table>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</transition>
|
||||
</div>
|
||||
`,
|
||||
props: {
|
||||
projectId:{
|
||||
type:Number
|
||||
},
|
||||
label:{
|
||||
type:String
|
||||
}
|
||||
},
|
||||
data() {
|
||||
return {
|
||||
projectId:JSON.parse(window.localStorage.getItem("data1")).id,
|
||||
show:false,
|
||||
height:515,
|
||||
data:{
|
||||
label: [
|
||||
{
|
||||
label: '序号',
|
||||
width: '50',
|
||||
color:'',
|
||||
type:'',
|
||||
type_color:'',
|
||||
data: 'sort'
|
||||
},
|
||||
{
|
||||
label: '楼号名称',
|
||||
width: '',
|
||||
color:'#50a2eb',
|
||||
type:'',
|
||||
type_color:'',
|
||||
data: 'dict_label'
|
||||
},
|
||||
{
|
||||
label: '检验批类型',
|
||||
width: '',
|
||||
color:'',
|
||||
type:'',
|
||||
type_color:'',
|
||||
data: 'batchName'
|
||||
},
|
||||
{
|
||||
label: '检验次数',
|
||||
width: '',
|
||||
color:'',
|
||||
type:'',
|
||||
type_color:'',
|
||||
data: 'num'
|
||||
},
|
||||
],
|
||||
data: [{GCsort:'1',GCName:'****名称',GCNum:'2023-05-13',type:''},{GCsort:'1',GCName:'****名称',GCNum:'2023-05-13'},{GCsort:'1',GCName:'****名称',GCNum:'2023-05-13'},{GCsort:'1',GCName:'****名称',GCNum:'2023-05-13'},{GCsort:'1',GCName:'****名称',GCNum:'2023-05-13'},{GCsort:'1',GCName:'****名称',GCNum:'2023-05-13'},{GCsort:'1',GCName:'****名称',GCNum:'2023-05-13'},{GCsort:'1',GCName:'****名称',GCNum:'2023-05-13'},{GCsort:'1',GCName:'****名称',GCNum:'2023-05-13'},{GCsort:'1',GCName:'****名称',GCNum:'2023-05-13'},{GCsort:'1',GCName:'****名称',GCNum:'2023-05-13'}],
|
||||
},
|
||||
}
|
||||
},
|
||||
mounted(){
|
||||
this.interval = setInterval(this.scroll, 50);
|
||||
},
|
||||
methods: {
|
||||
openAmplify(){
|
||||
this.show = true
|
||||
this.gainFloorCheck()
|
||||
},
|
||||
closeAmplify(){
|
||||
this.show = false
|
||||
},
|
||||
closeAmplifyAll(e){
|
||||
if(e.target.className == 'amplify-fixed'){
|
||||
this.show = false
|
||||
}
|
||||
},
|
||||
gainFloorCheck() {
|
||||
this.data.data = []
|
||||
axios.post("/api/building/gainFloorCheck",{projectId:this.projectId}).then(res=>{
|
||||
this.data.data = res.data.data
|
||||
})
|
||||
},
|
||||
//左边信息表
|
||||
scroll() {
|
||||
let maxHeight = this.$refs.pxjy.$el.querySelectorAll('.el-table__body')[0].offsetHeight;
|
||||
let clientHeight = this.$refs.pxjy.bodyWrapper.clientHeight;
|
||||
if (Math.abs(this.$refs.pxjy.bodyWrapper.scrollTop - (maxHeight - clientHeight)) < 5) { //预留5像素误差
|
||||
this.$refs.pxjy.bodyWrapper.scrollTop = 0;
|
||||
} else {
|
||||
this.$refs.pxjy.bodyWrapper.scrollTop += 1;//32是每一行表格的高度，每秒滚一行
|
||||
}
|
||||
}
|
||||
,
|
||||
MouseEnter() {//鼠标移入停止滚动
|
||||
clearInterval(this.interval);
|
||||
}
|
||||
,
|
||||
MouseLeave() {//鼠标离开继续滚动
|
||||
this.interval = setInterval(this.scroll, 50);
|
||||
},
|
||||
onClickPoint(n) {
|
||||
this.btnNav = n;
|
||||
},
|
||||
// 表格隔行变色
|
||||
tableRowClassName({row, rowIndex}) {
|
||||
if (rowIndex % 2 === 0) {
|
||||
return 'warning-row' //这是类名
|
||||
} else {
|
||||
return ''
|
||||
}
|
||||
},
|
||||
},
|
||||
watch:{
|
||||
projectId:function (n,o) {
|
||||
this.openAmplify()
|
||||
}
|
||||
},
|
||||
|
||||
})
|
||||
|
||||
|
||||
|
|
@ -1,144 +0,0 @@
|
|||
import Vue from 'vue'
|
||||
|
||||
var vms = Vue.component("amplify-jsfh", {
|
||||
template: `
|
||||
<div>
|
||||
<div class="amplify-title-icon">
|
||||
<img src="/cdn/images/WEB_DBD5893450984E50AFF356EF44FF4139.png" @click="openAmplify">
|
||||
</div>
|
||||
<transition name="el-zoom-in-top">
|
||||
<div class="amplify-fixed" v-show="show" style="display: none" @click="closeAmplifyAll">
|
||||
<div class="amplify-max">
|
||||
<div class="amplify-title">
|
||||
<div>技术复核</div>
|
||||
<div class="amplify-close" @click="closeAmplify"><i class="el-icon-close"></i></div>
|
||||
</div>
|
||||
<div class="amplify-content">
|
||||
<!--内容区域-->
|
||||
<div style="padding-top: 35px;">
|
||||
<div class="amplify-rank-chart">
|
||||
<!--<div class="rank-chart-title" v-cloak>****技术总结（{{srcList.length}}）</div>-->
|
||||
</div>
|
||||
<!-- 图片展示-->
|
||||
<div @mouseout="costMouseout" @mouseover="costMouseover">
|
||||
<slot></slot>
|
||||
<div class="amplify-bzh-flex">
|
||||
<div class="amplify-bzh-btn">
|
||||
<img src="/images/carousel_left.png" @click="carouselLeft">
|
||||
</div>
|
||||
<div class="amplify-bzh-content" ref="rollImgMax" :style="{'width': number*400+'px'}">
|
||||
<div class="amplify-bzh-content-img" v-for="item in list">
|
||||
<el-image style="width: 360px; height: 360px"
|
||||
:src="item" fit="cover" :preview-src-list="list"></el-image>
|
||||
</div>
|
||||
</div>
|
||||
<div class="amplify-bzh-btn">
|
||||
<img src="/images/carousel_right.png" @click="carouselRight">
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</transition>
|
||||
</div>
|
||||
`,
|
||||
props: {
|
||||
|
||||
},
|
||||
data() {
|
||||
return {
|
||||
show:false,
|
||||
costIndex:0,
|
||||
imgRollInterval:undefined,
|
||||
direction:'left',
|
||||
list:[],
|
||||
number:2,
|
||||
projectId:JSON.parse(window.localStorage.getItem("data1")).id,
|
||||
}
|
||||
},
|
||||
mounted(){
|
||||
// 图片轮播 定时器
|
||||
this.imgRollInterval = setInterval(this.imgRoll,5000);
|
||||
},
|
||||
methods: {
|
||||
openAmplify(){
|
||||
this.show = true
|
||||
this.getTypeSonListB("11","21")
|
||||
},
|
||||
closeAmplify(){
|
||||
this.show = false
|
||||
},
|
||||
closeAmplifyAll(e){
|
||||
if(e.target.className == 'amplify-fixed'){
|
||||
this.show = false
|
||||
}
|
||||
},
|
||||
getTypeSonListB(typeMain, typeId) {
|
||||
this.list = []
|
||||
axios.post("/api/building/photoList?projectId=" + this.projectId + "&typeMain=" + typeMain + "&typeId=" + typeId).then(res => {
|
||||
if(res.data.code == "200") {
|
||||
var list = []
|
||||
res.data.data.forEach((item)=>{
|
||||
list.push(item.photo_url)
|
||||
})
|
||||
this.list = list
|
||||
}
|
||||
}).catch(err => {
|
||||
|
||||
})
|
||||
},
|
||||
|
||||
carouselLeft(){
|
||||
this.direction = 'left'
|
||||
this.manufacturingCostRoll()
|
||||
},
|
||||
carouselRight(){
|
||||
this.direction = 'right'
|
||||
this.manufacturingCostRoll()
|
||||
},
|
||||
manufacturingCostRoll(){
|
||||
var width = $(".bzh-content-img").innerWidth()
|
||||
if(this.direction == 'right'){
|
||||
if(this.costIndex == this.list.length - this.number){
|
||||
this.costIndex = 0
|
||||
}else{
|
||||
this.costIndex = this.costIndex + 1
|
||||
}
|
||||
}else{
|
||||
if(this.costIndex == 0){
|
||||
this.costIndex = this.list.length - this.number
|
||||
}else{
|
||||
this.costIndex = this.costIndex - 1
|
||||
}
|
||||
}
|
||||
$(this.$refs.rollImgMax).animate({scrollLeft:(this.number*width*this.costIndex)+'px'})
|
||||
this.direction = 'right'
|
||||
},
|
||||
|
||||
|
||||
imgRoll(){
|
||||
var width = $(".bzh-content-img").innerWidth()
|
||||
if(this.costIndex == this.list.length - this.number){
|
||||
this.costIndex = 0
|
||||
}else{
|
||||
this.costIndex = this.costIndex + 1
|
||||
}
|
||||
$(this.$refs.rollImgMax).animate({scrollLeft:(this.number*width*this.costIndex)+'px'})
|
||||
},
|
||||
costMouseover(){
|
||||
clearInterval(this.imgRollInterval);
|
||||
},
|
||||
costMouseout(){
|
||||
this.imgRollInterval=setInterval(this.imgRoll,5000);
|
||||
},
|
||||
|
||||
},
|
||||
watch:{
|
||||
|
||||
},
|
||||
|
||||
})
|
||||
|
||||
|
||||
|
|
@ -1,184 +0,0 @@
|
|||
import Vue from 'vue'
|
||||
|
||||
var vms = Vue.component("amplify-kjcx", {
|
||||
template: `
|
||||
<div>
|
||||
<div class="amplify-title-icon">
|
||||
<img src="/cdn/images/WEB_DBD5893450984E50AFF356EF44FF4139.png" @click="openAmplify">
|
||||
</div>
|
||||
<transition name="el-zoom-in-top">
|
||||
<div class="amplify-fixed" v-show="show" style="display: none" @click="closeAmplifyAll">
|
||||
<div class="amplify-max">
|
||||
<div class="amplify-title">
|
||||
<div>科技创新({{sciencelnnovateDataList.length}})</div>
|
||||
<div class="amplify-close" @click="closeAmplify"><i class="el-icon-close"></i></div>
|
||||
</div>
|
||||
<div class="amplify-content">
|
||||
<!--内容区域-->
|
||||
<div class="amplify-craft-video-flex">
|
||||
<div class="amplify-craft-video-btn">
|
||||
<img src="/images/carousel_left.png" @click="craftCarouselLeft" style="height: 100px;">
|
||||
</div>
|
||||
<div class="amplify-technical-overflow-max" ref="craftVollVideo" style="width: 760px;height: 550px;">
|
||||
<div class="amplify-technical-overflow-min" :style="{'width': (sciencelnnovateDataList.length * 760)+'px'}">
|
||||
<div class="amplify-technical-innovation-max" style="width: 760px;" v-for="sciencelnnovateData of sciencelnnovateDataList">
|
||||
<div class="amplify-technical-innovation">
|
||||
<div class="amplify-technical-innovation-text">课题名称：</div>
|
||||
<div class="amplify-technical-innovation-info">{{sciencelnnovateData.name}}</div>
|
||||
</div>
|
||||
<div class="amplify-technical-innovation">
|
||||
<div class="amplify-technical-innovation-text">技术指标：</div>
|
||||
</div>
|
||||
<div class="amplify-technical-index-max">
|
||||
<ul class="amplify-technical-index-min">
|
||||
<li v-for="(item,index) in sciencelnnovateData.context" :key="index">
|
||||
<div class="amplify-technical-index-text">{{item.name}}</div>
|
||||
<div class="amplify-technical-index-hr"></div>
|
||||
<div class="technical-index-state">
|
||||
<div v-if="item.status == '已完成'" class="amplify-technical-index-state-tag active">{{item.status}}</div>
|
||||
<div v-else-if="item.status == ''" class="amplify-technical-index-state-tag active" style="border: 2px solid grey;background: grey;color: #c0c0c0;">未涉及</div>
|
||||
<div v-else class="amplify-technical-index-state-tag">{{item.status}}</div>
|
||||
</div>
|
||||
</li>
|
||||
</ul>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="ampligy-craft-video-btn">
|
||||
<img src="/images/carousel_right.png" @click="craftCarouselRight" style="height: 100px;">
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</transition>
|
||||
</div>
|
||||
`,
|
||||
props: {
|
||||
|
||||
},
|
||||
data() {
|
||||
return {
|
||||
show:false,
|
||||
//科技创新
|
||||
sciencelnnovateDataList:[],
|
||||
craftVideoIndex:0,
|
||||
craftInterval:'',
|
||||
}
|
||||
},
|
||||
mounted(){
|
||||
//科技创新 知道滚动
|
||||
this.rollCraftInterval = setInterval(this.rollCraftCarousel,5000);
|
||||
},
|
||||
methods: {
|
||||
openAmplify(){
|
||||
this.show = true
|
||||
this.scienceInnovateData()
|
||||
},
|
||||
closeAmplify(){
|
||||
this.show = false
|
||||
},
|
||||
closeAmplifyAll(e){
|
||||
if(e.target.className == 'amplify-fixed'){
|
||||
this.show = false
|
||||
}
|
||||
},
|
||||
//科技创新
|
||||
scienceInnovateData(){
|
||||
axios.post("/system/scienceInnovateConfig/list1",{pageNum:1,pageSize:9999,projectId:this.projectId}).then(res=>{
|
||||
let result = res.data
|
||||
let tempData = []
|
||||
this.sciencelnnovateDataList = []
|
||||
let tmp = {}
|
||||
if(result.code == 0){
|
||||
result.rows.forEach(item=>{
|
||||
if(!tmp[item.name]){
|
||||
tmp[item.name] = {
|
||||
name:item.name,
|
||||
context:[]
|
||||
}
|
||||
}
|
||||
|
||||
if(item.type == '0'){
|
||||
name = '研究报告'
|
||||
}else if(item.type == '1'){
|
||||
name = '知识产权'
|
||||
}else if(item.type == '2'){
|
||||
name = '论文'
|
||||
}else{
|
||||
name = '工法'
|
||||
}
|
||||
|
||||
if(item.status =='0'){
|
||||
status = '进行中'
|
||||
}else if(item.status =='1'){
|
||||
status = '已完成'
|
||||
}else if(item.status =='4'){
|
||||
status = ''
|
||||
}else{
|
||||
status = '未开始'
|
||||
}
|
||||
tmp[item.name] .context.push({
|
||||
name,
|
||||
status
|
||||
})
|
||||
|
||||
})
|
||||
for(let k in tmp ){
|
||||
this.sciencelnnovateDataList.push(tmp[k])
|
||||
}
|
||||
|
||||
}
|
||||
})
|
||||
},
|
||||
craftCarouselLeft(){
|
||||
if(this.craftVideoIndex == 0){
|
||||
this.craftVideoIndex = this.sciencelnnovateDataList.length - 1
|
||||
}else {
|
||||
this.craftVideoIndex = this.craftVideoIndex - 1
|
||||
}
|
||||
$(this.$refs.craftVollVideo).animate({scrollLeft:(760*this.craftVideoIndex)+'px'})
|
||||
},
|
||||
craftCarouselRight(){
|
||||
if(this.craftVideoIndex == this.sciencelnnovateDataList.length - 1){
|
||||
this.craftVideoIndex = 0
|
||||
}else {
|
||||
this.craftVideoIndex = this.craftVideoIndex + 1
|
||||
}
|
||||
$(this.$refs.craftVollVideo).animate({scrollLeft:(760*this.craftVideoIndex)+'px'})
|
||||
},
|
||||
rollCraftCarousel(){
|
||||
if(this.craftDirection == 'right'){
|
||||
if(this.craftVideoIndex == this.sciencelnnovateDataList.length - 1){
|
||||
this.craftVideoIndex = 0
|
||||
}else {
|
||||
this.craftVideoIndex = this.craftVideoIndex + 1
|
||||
}
|
||||
}else{
|
||||
if(this.craftVideoIndex == 0){
|
||||
this.craftVideoIndex = this.sciencelnnovateDataList.length - 1
|
||||
}else {
|
||||
this.craftVideoIndex = this.craftVideoIndex - 1
|
||||
}
|
||||
this.craftDirection = 'right'
|
||||
}
|
||||
$(this.$refs.craftVollVideo).animate({scrollLeft:(760*this.craftVideoIndex)+'px'})
|
||||
},
|
||||
|
||||
craftCostMouseout(){
|
||||
clearInterval(this.rollCraftInterval);
|
||||
},
|
||||
craftCostMouseover(){
|
||||
this.rollCraftInterval = setInterval(this.rollCraftCarousel,5000);
|
||||
},
|
||||
|
||||
},
|
||||
watch:{
|
||||
|
||||
},
|
||||
|
||||
})
|
||||
|
||||
|
||||
|
|
@ -1,164 +0,0 @@
|
|||
import Vue from 'vue'
|
||||
|
||||
var vms = Vue.component("amplify-sgbzgf", {
|
||||
template: `
|
||||
<div>
|
||||
<div class="amplify-title-icon">
|
||||
<img src="/cdn/images/WEB_DBD5893450984E50AFF356EF44FF4139.png" @click="openAmplify">
|
||||
</div>
|
||||
<transition name="el-zoom-in-top">
|
||||
<div class="amplify-fixed" v-show="show" style="display: none" @click="closeAmplifyAll">
|
||||
<div class="amplify-max">
|
||||
<div class="amplify-title">
|
||||
<div v-cloak>{{label}}</div>
|
||||
<div class="amplify-close" @click="closeAmplify"><i class="el-icon-close"></i></div>
|
||||
</div>
|
||||
<div class="amplify-content">
|
||||
<!--内容区域-->
|
||||
<div class="quality-table">
|
||||
<el-table ref="pxjy"
|
||||
:data="data.data"
|
||||
style="width: 100%"
|
||||
:height="height+'px'"
|
||||
@cell-mouse-enter="MouseEnter"
|
||||
@cell-mouse-leave="MouseLeave"
|
||||
class="elTable"
|
||||
:cell-class-name="tableRowClassName"
|
||||
>
|
||||
<el-table-column :label="item.label" :width="item.width" v-for="item in data.label" show-overflow-tooltip>
|
||||
<template slot-scope="scope">
|
||||
<div v-if="item.type==''" :style="{'color':item.color}">{{scope.row[item.data]}}</div>
|
||||
<div v-if="item.type=='img'" style="padding-top: 3px;">
|
||||
<el-image style="width: 40px; height: 40px" :src="scope.row[item.data]" fit="cover"
|
||||
></el-image>
|
||||
</div>
|
||||
<div v-if="item.type=='state'">
|
||||
<div :style="{'color':scope.row[item.type_color]}">{{scope.row[item.data]}}</div>
|
||||
</div>
|
||||
</template>
|
||||
</el-table-column>
|
||||
</el-table>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</transition>
|
||||
</div>
|
||||
`,
|
||||
props: {
|
||||
projectId:{
|
||||
type:Number
|
||||
},
|
||||
label:{
|
||||
type:String
|
||||
}
|
||||
|
||||
},
|
||||
data() {
|
||||
return {
|
||||
show:false,
|
||||
height:515,
|
||||
data:{
|
||||
label: [
|
||||
{
|
||||
label: '序号',
|
||||
width: '50',
|
||||
color:'',
|
||||
type:'',
|
||||
type_color:'',
|
||||
data: 'sort'
|
||||
},
|
||||
{
|
||||
label: '标准名称',
|
||||
width: '',
|
||||
color:'#50a2eb',
|
||||
type:'',
|
||||
type_color:'',
|
||||
data: 'bianName'
|
||||
},
|
||||
{
|
||||
label: '编号',
|
||||
width: '',
|
||||
color:'',
|
||||
type:'',
|
||||
type_color:'',
|
||||
data: 'bianNum'
|
||||
},
|
||||
],
|
||||
data: [],
|
||||
},
|
||||
}
|
||||
},
|
||||
mounted(){
|
||||
this.interval = setInterval(this.scroll, 50);
|
||||
},
|
||||
methods: {
|
||||
openAmplify(){
|
||||
this.show = true
|
||||
this.getBiaoZhun()
|
||||
},
|
||||
closeAmplify(){
|
||||
this.show = false
|
||||
},
|
||||
closeAmplifyAll(e){
|
||||
if(e.target.className == 'amplify-fixed'){
|
||||
this.show = false
|
||||
}
|
||||
},
|
||||
//施工标准规范
|
||||
getBiaoZhun() {
|
||||
let that = this
|
||||
axios.post("/system/standardinfo/list?projectId="+this.projectId, {
|
||||
projectId:this.projectId
|
||||
}).then(res => {
|
||||
res = res.data.rows
|
||||
let result = res.map((item,index)=>{
|
||||
return {
|
||||
sort:(index + 1),
|
||||
bianName:item.standardName,
|
||||
bianNum:item.standardNum
|
||||
}
|
||||
})
|
||||
|
||||
that.data.data = result
|
||||
})
|
||||
},
|
||||
//左边信息表
|
||||
scroll() {
|
||||
let maxHeight = this.$refs.pxjy.$el.querySelectorAll('.el-table__body')[0].offsetHeight;
|
||||
let clientHeight = this.$refs.pxjy.bodyWrapper.clientHeight;
|
||||
if (Math.abs(this.$refs.pxjy.bodyWrapper.scrollTop - (maxHeight - clientHeight)) < 5) { //预留5像素误差
|
||||
this.$refs.pxjy.bodyWrapper.scrollTop = 0;
|
||||
} else {
|
||||
this.$refs.pxjy.bodyWrapper.scrollTop += 1;//32是每一行表格的高度，每秒滚一行
|
||||
}
|
||||
}
|
||||
,
|
||||
MouseEnter() {//鼠标移入停止滚动
|
||||
clearInterval(this.interval);
|
||||
}
|
||||
,
|
||||
MouseLeave() {//鼠标离开继续滚动
|
||||
this.interval = setInterval(this.scroll, 50);
|
||||
},
|
||||
onClickPoint(n) {
|
||||
this.btnNav = n;
|
||||
},
|
||||
// 表格隔行变色
|
||||
tableRowClassName({row, rowIndex}) {
|
||||
if (rowIndex % 2 === 0) {
|
||||
return 'warning-row' //这是类名
|
||||
} else {
|
||||
return ''
|
||||
}
|
||||
},
|
||||
},
|
||||
watch:{
|
||||
projectId:function (n,o) {
|
||||
this.openAmplify()
|
||||
}
|
||||
},
|
||||
|
||||
})
|
||||
|
||||
|
||||
|
|
@ -1,144 +0,0 @@
|
|||
import Vue from 'vue'
|
||||
|
||||
var vms = Vue.component("amplify-sjgk", {
|
||||
template: `
|
||||
<div>
|
||||
<div class="amplify-title-icon">
|
||||
<img src="/cdn/images/WEB_DBD5893450984E50AFF356EF44FF4139.png" @click="openAmplify">
|
||||
</div>
|
||||
<transition name="el-zoom-in-top">
|
||||
<div class="amplify-fixed" v-show="show" style="display: none" @click="closeAmplifyAll">
|
||||
<div class="amplify-max">
|
||||
<div class="amplify-title">
|
||||
<div v-cloak>{{label}}</div>
|
||||
<div class="amplify-close" @click="closeAmplify"><i class="el-icon-close"></i></div>
|
||||
</div>
|
||||
<div class="amplify-content">
|
||||
|
||||
<!--内容区域-->
|
||||
<div class="amplify-new-technical-max">
|
||||
<el-row>
|
||||
<el-col :span="12">
|
||||
<div class="amplify-czz-number-content1 amplify-new-technical">
|
||||
<div class="amplify-czz-number-img amplify-czz-number-img-blue">
|
||||
<img src="/images/circle_icon_23.png">
|
||||
</div>
|
||||
<div class="amplify-survey_content_number">
|
||||
<p>管理交底</p>
|
||||
<div class="amplify-survey_content_value amplify-date-font-size"><span v-cloak>{{fourClarificaiton.gljd}}</span> </div>
|
||||
</div>
|
||||
</div>
|
||||
</el-col>
|
||||
<el-col :span="12">
|
||||
<div class="amplify-czz-number-content1 amplify-new-technical">
|
||||
<div class="amplify-czz-number-img amplify-czz-number-img-green">
|
||||
<img src="/images/circle_icon_20.png">
|
||||
</div>
|
||||
<div class="amplify-survey_content_number">
|
||||
<p>施组交底</p>
|
||||
<div class="amplify-survey_content_value amplify-survey_content_value_color_green amplify-date-font-size" >
|
||||
<span v-cloak>{{fourClarificaiton.szjd}}</span> </div>
|
||||
</div>
|
||||
</div>
|
||||
</el-col>
|
||||
<el-col :span="12">
|
||||
<div class="amplify-czz-number-content1 amplify-new-technical">
|
||||
<div class="amplify-czz-number-img amplify-czz-number-img-blue">
|
||||
<img src="/images/circle_icon_21.png">
|
||||
</div>
|
||||
<div class="amplify-survey_content_number">
|
||||
<p>危大工程交底</p>
|
||||
<div class="amplify-survey_content_value"><span v-cloak>{{fourClarificaiton.zxfajd}}</span> 次</div>
|
||||
</div>
|
||||
</div>
|
||||
</el-col>
|
||||
<el-col :span="12">
|
||||
<div class="amplify-czz-number-content1 amplify-new-technical">
|
||||
<div class="amplify-czz-number-img amplify-czz-number-img-green">
|
||||
<img src="/images/circle_icon_22.png">
|
||||
</div>
|
||||
<div class="amplify-survey_content_number">
|
||||
<p>技术交底</p>
|
||||
<div class="amplify-survey_content_value amplify-survey_content_value_color_green">
|
||||
<span v-cloak>{{fourClarificaiton.jsjd}}</span> 次</div>
|
||||
</div>
|
||||
</div>
|
||||
</el-col>
|
||||
</el-row>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</transition>
|
||||
</div>
|
||||
`,
|
||||
props: {
|
||||
label:{
|
||||
type:String
|
||||
},
|
||||
projectId:{
|
||||
type:Number
|
||||
}
|
||||
},
|
||||
data() {
|
||||
return {
|
||||
show:false,
|
||||
fourClarificaiton:{
|
||||
}
|
||||
}
|
||||
},
|
||||
mounted(){
|
||||
|
||||
},
|
||||
methods: {
|
||||
openAmplify(){
|
||||
this.show = true
|
||||
this.getFourData()
|
||||
},
|
||||
closeAmplify(){
|
||||
this.show = false
|
||||
},
|
||||
closeAmplifyAll(e){
|
||||
if(e.target.className == 'amplify-fixed'){
|
||||
this.show = false
|
||||
}
|
||||
},
|
||||
//四级交底情况
|
||||
getFourData(){
|
||||
let that = this
|
||||
axios.get("//api-tmp.makalu.cc/szhjzgkpt/four/clarificaiton").then(res => {
|
||||
that.fourClarificaiton = res.data
|
||||
axios.post("/api/project/selectTechnicalDisclosureInformationList",{
|
||||
projectId:this.projectId,
|
||||
}).then(res => {
|
||||
let zx = 0
|
||||
let js = 0
|
||||
that.fourDataList = res.data.data
|
||||
for(let tmp of res.data.data){
|
||||
switch (tmp.type) {
|
||||
case 1:
|
||||
js++
|
||||
tmp.sort = js
|
||||
break
|
||||
case 2:
|
||||
zx++
|
||||
tmp.sort = zx
|
||||
break
|
||||
}
|
||||
}
|
||||
that.fourClarificaiton.zxfajd = zx
|
||||
that.fourClarificaiton.jsjd = js
|
||||
})
|
||||
})
|
||||
},
|
||||
|
||||
},
|
||||
watch:{
|
||||
projectId:function (n,o) {
|
||||
this.openAmplify()
|
||||
}
|
||||
},
|
||||
|
||||
})
|
||||
|
||||
|
||||
|
|
@ -1,224 +0,0 @@
|
|||
import Vue from 'vue'
|
||||
|
||||
var vms = Vue.component("amplify-czzqk", {
|
||||
template: `
|
||||
<div>
|
||||
<div class="amplify-title-icon">
|
||||
<img src="/cdn/images/WEB_DBD5893450984E50AFF356EF44FF4139.png" @click="openAmplify">
|
||||
</div>
|
||||
<transition name="el-zoom-in-top">
|
||||
<div class="amplify-fixed" v-show="show" style="display: none" @click="closeAmplifyAll">
|
||||
<div class="amplify-max">
|
||||
<div class="amplify-title">
|
||||
<div>操作证情况</div>
|
||||
<div class="amplify-close" @click="closeAmplify"><i class="el-icon-close"></i></div>
|
||||
</div>
|
||||
<div class="amplify-content">
|
||||
<!--内容区域-->
|
||||
<!--操作证-->
|
||||
<div class="amplify-czz-number" >
|
||||
<div class="amplify-czz-number-content" @click="getCertInfoList(1)">
|
||||
<div class="amplify-czz-number-img amplify-czz-number-img-blue">
|
||||
<img src="/images/circle_icon_1.png">
|
||||
</div>
|
||||
<div class="amplify-survey_content_numbers">
|
||||
<p>操作证数量</p>
|
||||
<div class="amplify-survey_content_value"><span v-cloak>{{certInfoData.count}}</span> 个</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="amplify-czz-number-content" @click="getCertInfoList(2)">
|
||||
<div class="amplify-czz-number-img amplify-czz-number-img-green">
|
||||
<img src="/images/circle_icon_2.png">
|
||||
</div>
|
||||
<div class="amplify-survey_content_number">
|
||||
<p>已绑定数量</p>
|
||||
<div class=" amplify-survey_content_value amplify-survey_content_value_color_green"><span v-cloak>{{certInfoData.bindCount}}</span> 台</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<!-- 职工、劳务派遣、其他-->
|
||||
<div class="amplify-workers" ref="chart">
|
||||
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</transition>
|
||||
</div>
|
||||
`,
|
||||
props: {},
|
||||
data() {
|
||||
return {
|
||||
certInfoData:{},
|
||||
//操作证数据
|
||||
certificateData:[
|
||||
{
|
||||
text:"职工",
|
||||
value:0
|
||||
},{
|
||||
text:"劳务派遣",
|
||||
value:0
|
||||
},{
|
||||
text:"其他",
|
||||
value:0
|
||||
},
|
||||
],
|
||||
show: false,
|
||||
}
|
||||
},
|
||||
mounted() {
|
||||
|
||||
},
|
||||
methods: {
|
||||
openAmplify() {
|
||||
this.show = true
|
||||
this.getCertInfoData()
|
||||
},
|
||||
closeAmplify() {
|
||||
this.show = false
|
||||
},
|
||||
closeAmplifyAll(e) {
|
||||
if (e.target.className == 'amplify-fixed') {
|
||||
this.show = false
|
||||
}
|
||||
},
|
||||
//操作证情况统计
|
||||
getCertInfoData(){
|
||||
axios.post(requestUrl+"getCertInfoData?deptId="+deptId+"&projectId="+JSON.parse(localStorage.getItem("data1")).jzgj, {
|
||||
}).then(res => {
|
||||
this.certInfoData = res.data.data;
|
||||
this.certificateData = [{text:"职工",value:res.data.data.zgCount},{text:"劳务派遣",value:res.data.data.lwCount},{text:"其他",value:res.data.data.qtCount}]
|
||||
this.getChartData()
|
||||
}).catch(err => {
|
||||
})
|
||||
},
|
||||
//职工、劳务数据图
|
||||
getChartData() {
|
||||
//品类金额占比 饼图
|
||||
var chChart = echarts.init(this.$refs.chart);
|
||||
this.echart(chChart, this.certificateData)
|
||||
},
|
||||
echart(chChart, chartData) {
|
||||
let newPromise = new Promise((resolve) => {
|
||||
resolve()
|
||||
})
|
||||
//然后异步执行echarts的初始化函数
|
||||
newPromise.then(() => {
|
||||
var value = []
|
||||
var text = []
|
||||
var total = 0
|
||||
var bgd = []
|
||||
for (let i = 0; i < chartData.length; i++) {
|
||||
value.push(chartData[i].value)
|
||||
text.push(chartData[i].text)
|
||||
bgd.push(100)
|
||||
total += chartData[i].value
|
||||
}
|
||||
|
||||
var prop = []
|
||||
for (let j = 0; j < value.length; j++) {
|
||||
prop.push((value[j] / total * 100).toFixed(1))
|
||||
}
|
||||
|
||||
this.option = {
|
||||
grid: {
|
||||
left: "5%",
|
||||
right: "5%",
|
||||
bottom: "-10%",
|
||||
top: "2%",
|
||||
containLabel: true,
|
||||
},
|
||||
xAxis: {
|
||||
show: false,
|
||||
type: "value",
|
||||
},
|
||||
yAxis: [
|
||||
{
|
||||
type: "category",
|
||||
inverse: true,
|
||||
axisLabel: {
|
||||
show: true,
|
||||
textStyle: {
|
||||
color: "#cbdaff",
|
||||
fontSize: "25",
|
||||
},
|
||||
},
|
||||
splitLine: {
|
||||
show: false,
|
||||
},
|
||||
axisTick: {
|
||||
show: false,
|
||||
},
|
||||
axisLine: {
|
||||
show: false,
|
||||
},
|
||||
data: text,
|
||||
},
|
||||
{
|
||||
type: "category",
|
||||
inverse: true,
|
||||
axisTick: "none",
|
||||
axisLine: "none",
|
||||
show: true,
|
||||
axisLabel: {
|
||||
textStyle: {
|
||||
color: "#cbdaff",
|
||||
fontSize: "25",
|
||||
},
|
||||
formatter: function (params, i) {
|
||||
var text = "{a|" + value[i] + "}{a| " + prop[i] + "%}";
|
||||
return text;
|
||||
},
|
||||
rich: {
|
||||
a: {
|
||||
fontSize: '25px',
|
||||
color: "#cbdaff",
|
||||
},
|
||||
},
|
||||
},
|
||||
data: prop,
|
||||
},
|
||||
],
|
||||
series: [
|
||||
{
|
||||
type: "bar",
|
||||
zlevel: 1,
|
||||
itemStyle: {
|
||||
normal: {
|
||||
color: "#6ab9fe",
|
||||
},
|
||||
},
|
||||
barWidth: 20,
|
||||
data: prop,
|
||||
},
|
||||
{
|
||||
type: "bar",
|
||||
barWidth: 20,
|
||||
barGap: "-100%",
|
||||
data: bgd,
|
||||
itemStyle: {
|
||||
normal: {
|
||||
color: "rgba(24,31,68,1)",
|
||||
},
|
||||
},
|
||||
},
|
||||
],
|
||||
};
|
||||
|
||||
chChart.setOption(this.option);
|
||||
window.onresize = chChart.resize;
|
||||
})
|
||||
},
|
||||
},
|
||||
watch: {
|
||||
data: function (n, o) {
|
||||
this.getChartData(this.data)
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
|
||||
|
||||
})
|
||||
|
||||
|
||||
|
|
@ -1,142 +0,0 @@
|
|||
import Vue from 'vue'
|
||||
|
||||
var vms = Vue.component("amplify-dkgk", {
|
||||
template: `
|
||||
<div>
|
||||
<div class="amplify-title-icon">
|
||||
<img src="/cdn/images/WEB_DBD5893450984E50AFF356EF44FF4139.png" @click="openAmplify">
|
||||
</div>
|
||||
<transition name="el-zoom-in-top">
|
||||
<div class="amplify-fixed" v-show="show" style="display: none" @click="closeAmplifyAll">
|
||||
<div class="amplify-max">
|
||||
<div class="amplify-title">
|
||||
<div>打卡管控提示</div>
|
||||
<div class="amplify-close" @click="closeAmplify"><i class="el-icon-close"></i></div>
|
||||
</div>
|
||||
<div class="amplify-content">
|
||||
<!--内容区域-->
|
||||
<!--打卡管控-->
|
||||
<div class="amplify-warning-info">
|
||||
<div class="amplify-warning-info-title">
|
||||
<div :class="abnormalNav==0?'active':''" @click="onAbnormalNav(0)">位置异常</div>
|
||||
<div :class="abnormalNav==1?'active':''" @click="onAbnormalNav(1)">工时异常</div>
|
||||
<div :class="abnormalNav==2?'active':''" @click="onAbnormalNav(2)">操作证到期</div>
|
||||
</div>
|
||||
<!--表格数据-->
|
||||
<div class="amplify-warning-info-table">
|
||||
<el-table ref="wgzp" :data="showTableData" height="460" :header-row-style="headerRow" :row-style="rowStyle" @cell-mouse-enter="MouseEnter" @cell-mouse-leave="MouseLeave" class="elTable">
|
||||
<el-table-column v-for="st in showTableTile" :prop="st.value" :label="st.name" width="200" show-overflow-tooltip></el-table-column>
|
||||
</el-table>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</transition>
|
||||
</div>
|
||||
`,
|
||||
props: {
|
||||
|
||||
},
|
||||
data() {
|
||||
return {
|
||||
show:false,
|
||||
//打卡管控提示
|
||||
abnormalNav:0,
|
||||
//打卡管控提示 表格数据
|
||||
interval:'',
|
||||
intervalOne:'',
|
||||
rowStyle:{
|
||||
color:'#ffffff',
|
||||
fontSize:'24px',
|
||||
height:'64px'
|
||||
},
|
||||
tableData:[],
|
||||
tableTile:[],
|
||||
showTableData:[],
|
||||
showTableTile: [],
|
||||
headerRow:{
|
||||
fontSize: '20px'
|
||||
}
|
||||
}
|
||||
},
|
||||
mounted(){
|
||||
// //打卡管控提示 自动滚动
|
||||
this.interval = setInterval(this.scroll,50);
|
||||
},
|
||||
methods: {
|
||||
|
||||
openAmplify(){
|
||||
this.show = true
|
||||
this.getClockInException()
|
||||
},
|
||||
closeAmplify(){
|
||||
this.show = false
|
||||
},
|
||||
closeAmplifyAll(e){
|
||||
if(e.target.className == 'amplify-fixed'){
|
||||
this.show = false
|
||||
}
|
||||
},
|
||||
|
||||
//打卡管控提示
|
||||
onAbnormalNav(n){
|
||||
this.abnormalNav = n;
|
||||
this.showTableData = this.tableData[n];
|
||||
this.showTableTile = this.tableTile[n];
|
||||
},
|
||||
//打卡管控提示
|
||||
getClockInException(){
|
||||
axios.post(requestUrl+"getClockInException?deptId="+deptId+"&projectId="+JSON.parse(localStorage.getItem("data1")).jzgj+"&pageSize=50", {
|
||||
}).then(res => {
|
||||
this.tableData = [
|
||||
res.data.data.signExceptionList,
|
||||
res.data.data.workTimeExceptionList,
|
||||
res.data.data.certExceptionList
|
||||
]
|
||||
this.tableTile = [
|
||||
[{name:"项目名称",value:"projectName"},{name:"姓名",value:"userName"},{name:"打卡设备",value:"deviceName"},{name:"打卡时间",value:"dataTime"}],
|
||||
[{name:"项目名称",value:"projectName"},{name:"设备名称",value:"deviceName"},{name:"异常原因",value:"errorReason"},{name:"打卡时间",value:"date"}],
|
||||
[{name:"项目名称",value:"projectAbbreviation"},{name:"姓名",value:"certificateName"},{name:"过期天数",value:"date"},{name:"到期时间",value:"validityDate"}]
|
||||
];
|
||||
let num = 0;
|
||||
if(res.data.data.signExceptionList.length > 0){
|
||||
num = 0;
|
||||
}else if(res.data.data.workTimeExceptionList.length > 0){
|
||||
num = 1;
|
||||
}else if(res.data.data.certExceptionList.length >0){
|
||||
num = 2
|
||||
}else{
|
||||
num = 0;
|
||||
}
|
||||
this.abnormalNav = num;
|
||||
this.showTableData = this.tableData[num];
|
||||
this.showTableTile = this.tableTile[num];
|
||||
}).catch(err => {
|
||||
})
|
||||
},
|
||||
// 表格滚动 方法 --------- 开始
|
||||
scroll(){
|
||||
let maxHeight=this.$refs.wgzp.$el.querySelectorAll ('.el-table__body')[0].offsetHeight;
|
||||
let clientHeight=this.$refs.wgzp.bodyWrapper.clientHeight;
|
||||
if(Math.abs(this.$refs.wgzp.bodyWrapper.scrollTop-(maxHeight-clientHeight))<5){ //预留5像素误差
|
||||
this.$refs.wgzp.bodyWrapper.scrollTop=0;
|
||||
}else{
|
||||
this.$refs.wgzp.bodyWrapper.scrollTop+= 1;//32是每一行表格的高度，每秒滚一行
|
||||
}
|
||||
},
|
||||
MouseEnter(){//鼠标移入停止滚动
|
||||
clearInterval(this.interval);
|
||||
},
|
||||
MouseLeave(){//鼠标离开继续滚动
|
||||
this.interval=setInterval(this.scroll,30);
|
||||
},
|
||||
// 表格滚动 方法 ------ 结束
|
||||
},
|
||||
watch:{
|
||||
|
||||
},
|
||||
|
||||
})
|
||||
|
||||
|
||||
|
|
@ -1,298 +0,0 @@
|
|||
import Vue from 'vue'
|
||||
|
||||
var vms = Vue.component("amplify-fljgs", {
|
||||
template: `
|
||||
<div>
|
||||
<div class="amplify-title-icon">
|
||||
<img src="/cdn/images/WEB_DBD5893450984E50AFF356EF44FF4139.png" @click="openAmplify">
|
||||
</div>
|
||||
<transition name="el-zoom-in-top">
|
||||
<div class="amplify-fixed" v-show="show" style="display: none" @click="closeAmplifyAll">
|
||||
<div class="amplify-max">
|
||||
<div class="amplify-title">
|
||||
<div>分类及工时情况</div>
|
||||
<div class="amplify-close" @click="closeAmplify"><i class="el-icon-close"></i></div>
|
||||
</div>
|
||||
<div class="amplify-content">
|
||||
<!--内容区域-->
|
||||
<!--头部切换-->
|
||||
<div class="amplify-warning-info">
|
||||
<div class="amplify-warning-info-title">
|
||||
<div :class="infoNav==0?'active':''" @click="onWarningInfoNav(0)">设备数量</div>
|
||||
<div :class="infoNav==1?'active':''" @click="onWarningInfoNav(1)">昨日工时</div>
|
||||
<div :class="infoNav==2?'active':''" @click="onWarningInfoNav(2)">当月工时</div>
|
||||
</div>
|
||||
<div class="amplify-pictable" ref="chart"></div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</transition>
|
||||
</div>
|
||||
`,
|
||||
props: {},
|
||||
data() {
|
||||
return {
|
||||
show: false,
|
||||
infoNav: 0,
|
||||
classifyBarData: [],
|
||||
showClassifyBarData: [],
|
||||
}
|
||||
},
|
||||
mounted() {
|
||||
|
||||
},
|
||||
methods: {
|
||||
openAmplify() {
|
||||
this.show = true
|
||||
this.getClassifyBarData()
|
||||
},
|
||||
closeAmplify() {
|
||||
this.show = false
|
||||
},
|
||||
closeAmplifyAll(e) {
|
||||
if (e.target.className == 'amplify-fixed') {
|
||||
this.show = false
|
||||
}
|
||||
},
|
||||
|
||||
//分类及工时情况
|
||||
getClassifyBarData() {
|
||||
axios.post(requestUrl + "getClassifyWorks?deptId=" + deptId + "&pageSize=4&projectId=" + JSON.parse(localStorage.getItem("data1")).jzgj, {}).then(res => {
|
||||
this.classifyBarData = [res.data.data.num, res.data.data.dayWorkTime, res.data.data.monthWorkTime];
|
||||
this.showClassifyBarData = this.classifyBarData[0];
|
||||
this.getChartData()
|
||||
}).catch(err => {
|
||||
})
|
||||
},
|
||||
//数据图展示
|
||||
getChartData() {
|
||||
//品类金额占比 饼图
|
||||
var chChartPie = echarts.init(this.$refs.chart);
|
||||
this.echartPie(chChartPie, this.showClassifyBarData)
|
||||
},
|
||||
echartPie(chChart, data) {
|
||||
let newPromise = new Promise((resolve) => {
|
||||
resolve()
|
||||
})
|
||||
|
||||
//然后异步执行echarts的初始化函数
|
||||
newPromise.then(() => {
|
||||
|
||||
if (data.length > 0) {
|
||||
var max = data[0].total
|
||||
} else {
|
||||
var max = 0
|
||||
}
|
||||
var nameData = [];
|
||||
var totalData = []
|
||||
var background = []
|
||||
var yesMonitor = []
|
||||
var notMonitor = []
|
||||
var yesProp = []
|
||||
var notProp = []
|
||||
var unitData = []
|
||||
|
||||
for (let i = data.length - 1; i >= 0; i--) {
|
||||
nameData.push(data[i].name);
|
||||
totalData.push(data[i].total)
|
||||
unitData.push(data[i].unit)
|
||||
background.push(100);
|
||||
yesMonitor.push(data[i].yesMonitor);
|
||||
notMonitor.push(data[i].notMonitor);
|
||||
yesProp.push((data[i].yesMonitor / max) * 100)
|
||||
notProp.push((data[i].notMonitor / max) * 100)
|
||||
}
|
||||
|
||||
var legend = ["已监控", "未监控"]
|
||||
if (this.legend) {
|
||||
legend = this.legend
|
||||
}
|
||||
|
||||
this.option = {
|
||||
grid: {
|
||||
//图表的位置
|
||||
top: "8%",
|
||||
left: "3%",
|
||||
right: "5%",
|
||||
bottom: "-12%",
|
||||
containLabel: true,
|
||||
},
|
||||
legend: {
|
||||
right: "0",
|
||||
top: "0",
|
||||
//icon: "circle",
|
||||
itemWidth: 22,
|
||||
itemHeight: 20,
|
||||
itemGap: 16,
|
||||
textStyle: {
|
||||
fontSize: 25,
|
||||
color: '#c6d9fa',
|
||||
},
|
||||
data: legend,
|
||||
},
|
||||
xAxis: [{
|
||||
show: false,
|
||||
},
|
||||
//由于下边X轴已经是百分比刻度了,所以需要在顶部加一个X轴,刻度是金额,也隐藏掉
|
||||
{
|
||||
show: false,
|
||||
}
|
||||
],
|
||||
yAxis: [
|
||||
{
|
||||
type: 'category',
|
||||
axisLabel: {
|
||||
show: false, //让Y轴数据不显示
|
||||
},
|
||||
itemStyle: {},
|
||||
axisTick: {
|
||||
show: false, //隐藏Y轴刻度
|
||||
},
|
||||
axisLine: {
|
||||
show: false, //隐藏Y轴线段
|
||||
},
|
||||
data: [],
|
||||
}, {
|
||||
show: false,
|
||||
data: [],
|
||||
axisLine: {
|
||||
show: false
|
||||
}
|
||||
}],
|
||||
series: [
|
||||
//数据条--------------------我是分割线君------------------------------//
|
||||
{
|
||||
show: true,
|
||||
type: 'bar',
|
||||
xAxisIndex: 1, //代表使用第二个X轴刻度!!!!!!!!!!!!!!!!!!!!!!!!
|
||||
barGap: '-100%',
|
||||
barWidth: '20', //统计条宽度
|
||||
itemStyle: {
|
||||
normal: {
|
||||
color: 'rgba(22,203,115,0.05)'
|
||||
},
|
||||
},
|
||||
label: {
|
||||
normal: {
|
||||
show: true,
|
||||
//label 的position位置可以是top bottom left,right,也可以是固定值
|
||||
//在这里需要上下统一对齐,所以用固定值
|
||||
position: [0, '-40'],
|
||||
rich: { //富文本
|
||||
prop: { //自定义颜色
|
||||
color: '#c6d9fa',
|
||||
fontSize: '25',
|
||||
},
|
||||
unit: {
|
||||
color: '#6c829a',
|
||||
fontSize: '25',
|
||||
},
|
||||
yes: {
|
||||
color: '#55adf7',
|
||||
fontSize: '25',
|
||||
},
|
||||
not: {
|
||||
color: '#4677fa',
|
||||
fontSize: '25',
|
||||
},
|
||||
index: {
|
||||
color: '#fcbc02',
|
||||
fontStyle: 'italic',
|
||||
padding: [0, 0, 0, 5],
|
||||
fontSize: '25',
|
||||
},
|
||||
name: {
|
||||
width: 480,
|
||||
color: '#c6d9fa',
|
||||
padding: [0, 0, 0, 10],
|
||||
fontSize: '25',
|
||||
},
|
||||
color: {
|
||||
color: '#8ca2be',
|
||||
fontSize: '20',
|
||||
},
|
||||
arrow: {
|
||||
width: 20,
|
||||
height: 15,
|
||||
backgroundColor: {
|
||||
image: "/cdn/images/WEB_2B7C06210CD44D55BFEE6205A35DE4A7.png",
|
||||
},
|
||||
},
|
||||
|
||||
},
|
||||
formatter: function (data) {
|
||||
//富文本固定格式{colorName|这里填你想要写的内容}
|
||||
//return '{arrow|}'
|
||||
return '{arrow|}{index|No.' + (nameData.length - data.dataIndex) + '}{name|' + nameData[data.dataIndex] + '}{prop|' + totalData[data.dataIndex] + '}{unit| ' + unitData[data.dataIndex] + '}{prop|（} {yes|' + yesMonitor[data.dataIndex] + '}{unit| ' + unitData[data.dataIndex] + '/}{not|' + notMonitor[data.dataIndex] + '}{unit| ' + unitData[data.dataIndex] + '}{prop|）} ';
|
||||
},
|
||||
}
|
||||
},
|
||||
data: background
|
||||
},
|
||||
{
|
||||
type: 'bar',
|
||||
|
||||
silent: true,
|
||||
yAxisIndex: 1,
|
||||
barWidth: 20,
|
||||
itemStyle: {
|
||||
normal: {
|
||||
color: 'rgba(0,82,198,0.3)'
|
||||
},
|
||||
emphasis: {
|
||||
color: 'rgba(0,82,198,0.3)'
|
||||
}
|
||||
},
|
||||
data: background
|
||||
},
|
||||
{
|
||||
type: 'bar',
|
||||
name: legend[0],
|
||||
|
||||
stack: '1',
|
||||
legendHoverLink: false,
|
||||
barWidth: 20,
|
||||
itemStyle: {
|
||||
normal: {
|
||||
color: '#52adf4'
|
||||
},
|
||||
emphasis: {
|
||||
color: '#52adf4'
|
||||
}
|
||||
},
|
||||
data: yesProp
|
||||
}, {
|
||||
type: 'bar',
|
||||
name: legend[1],
|
||||
stack: '1',
|
||||
legendHoverLink: false,
|
||||
barWidth: 20,
|
||||
itemStyle: {
|
||||
normal: {
|
||||
color: '#4677ff'
|
||||
},
|
||||
emphasis: {
|
||||
color: '#4677ff'
|
||||
}
|
||||
},
|
||||
data: notProp
|
||||
}]
|
||||
};
|
||||
|
||||
chChart.setOption(this.option);
|
||||
window.onresize = chChart.resize;
|
||||
})
|
||||
},
|
||||
//头部切换
|
||||
onWarningInfoNav(n) {
|
||||
this.infoNav = n
|
||||
this.showClassifyBarData = this.classifyBarData[n];
|
||||
this.getChartData()
|
||||
},
|
||||
},
|
||||
watch: {},
|
||||
|
||||
})
|
||||
|
||||
|
||||
|
|
@ -1,125 +0,0 @@
|
|||
import Vue from 'vue'
|
||||
|
||||
var vms = Vue.component("amplify-jkycyj", {
|
||||
template: `
|
||||
<div>
|
||||
<div class="amplify-title-icon">
|
||||
<img src="/cdn/images/WEB_DBD5893450984E50AFF356EF44FF4139.png" @click="openAmplify">
|
||||
</div>
|
||||
<transition name="el-zoom-in-top">
|
||||
<div class="amplify-fixed" v-show="show" style="display: none" @click="closeAmplifyAll">
|
||||
<div class="amplify-max">
|
||||
<div class="amplify-title">
|
||||
<div>监控异常预警</div>
|
||||
<div class="amplify-close" @click="closeAmplify"><i class="el-icon-close"></i></div>
|
||||
</div>
|
||||
<div class="amplify-content">
|
||||
<!--内容区域-->
|
||||
<div class="amplify-warning-info">
|
||||
<div class="amplify-warning-info-table">
|
||||
<el-table ref="wgzpOne" :data="showTableDataOne" :header-row-style="headerRowOne" height="500" :row-style="rowStyleOne" @cell-mouse-enter="MouseEnterOne" @cell-mouse-leave="MouseLeaveOne" class="elTable">
|
||||
<el-table-column v-for="st in showTableTileOne" :prop="st.value" :label="st.name" width="200" show-overflow-tooltip></el-table-column>
|
||||
</el-table>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</transition>
|
||||
</div>
|
||||
`,
|
||||
props: {
|
||||
|
||||
},
|
||||
data() {
|
||||
return {
|
||||
show:false,
|
||||
//监控异常预警
|
||||
showTableDataOne:[],
|
||||
showTableTileOne: [],
|
||||
rowStyleOne:{
|
||||
color:'#ffffff',
|
||||
fontSize:'24px',
|
||||
height:'64px'
|
||||
},
|
||||
headerRowOne:{
|
||||
fontSize: '20px'
|
||||
}
|
||||
}
|
||||
},
|
||||
mounted(){
|
||||
this.intervalOne = setInterval(this.scrollOne,50);
|
||||
},
|
||||
methods: {
|
||||
openAmplify(){
|
||||
this.show = true
|
||||
this.getExceptionAlert()
|
||||
this.getDeviceWarnData()
|
||||
},
|
||||
closeAmplify(){
|
||||
this.show = false
|
||||
},
|
||||
closeAmplifyAll(e){
|
||||
if(e.target.className == 'amplify-fixed'){
|
||||
this.show = false
|
||||
}
|
||||
},
|
||||
getExceptionAlert(){
|
||||
axios.get(requestUrl+"getExceptionAlert?deptId="+deptId+"&projectId="+JSON.parse(localStorage.getItem("data1")).jzgj+"&size=10", {
|
||||
}).then(res => {
|
||||
this.showTableDataOne = res.data;
|
||||
this.showTableTileOne = [{name:"归属项目",value:"project_abbreviation"},{name:"机械名称",value:"device_name"},{name:"预警类型",value:"alarm_type_name"},{name:"预警地址",value:"address"}];
|
||||
this.getDeviceWarnData();
|
||||
}).catch(err => {
|
||||
})
|
||||
},
|
||||
getDeviceWarnData(){
|
||||
//安全预警
|
||||
axios.get("https://aqzg.makalu.cc/api/statistics/getDeviceWarnData",{params:{"deptId":131,"projectId":JSON.parse(localStorage.getItem("data1")).aqzg}}
|
||||
).then(res => {
|
||||
if(res.data.length>0){
|
||||
let objArray = [];
|
||||
for(let i = 0;i<res.data.length;i++){
|
||||
let obj = {
|
||||
"address":"",
|
||||
"alarm_time":res.data[i].warn_time,
|
||||
"alarm_type_name":res.data[i].warn_context,
|
||||
"device_name":res.data[i].towerName,
|
||||
"project_abbreviation":res.data[i].project_abbreviation,
|
||||
}
|
||||
objArray.push(obj);
|
||||
}
|
||||
|
||||
for(let i = 0;i<this.showTableDataOne.length;i++){
|
||||
objArray.push(this.showTableDataOne[i]);
|
||||
}
|
||||
this.showTableDataOne = objArray;
|
||||
}
|
||||
}).catch(err => {
|
||||
});
|
||||
},
|
||||
//表格滚动
|
||||
scrollOne(){
|
||||
let maxHeight=this.$refs.wgzpOne.$el.querySelectorAll ('.el-table__body')[0].offsetHeight;
|
||||
let clientHeight=this.$refs.wgzpOne.bodyWrapper.clientHeight;
|
||||
if(Math.abs(this.$refs.wgzpOne.bodyWrapper.scrollTop-(maxHeight-clientHeight))<5){ //预留5像素误差
|
||||
this.$refs.wgzpOne.bodyWrapper.scrollTop=0;
|
||||
}else{
|
||||
this.$refs.wgzpOne.bodyWrapper.scrollTop+= 1;//32是每一行表格的高度，每秒滚一行
|
||||
}
|
||||
},
|
||||
MouseEnterOne(){//鼠标移入停止滚动
|
||||
clearInterval(this.intervalOne);
|
||||
},
|
||||
MouseLeaveOne(){//鼠标离开继续滚动
|
||||
this.intervalOne=setInterval(this.scrollOne,50);
|
||||
}
|
||||
|
||||
},
|
||||
watch:{
|
||||
|
||||
},
|
||||
|
||||
})
|
||||
|
||||
|
||||
|
|
@ -1,166 +0,0 @@
|
|||
import Vue from 'vue'
|
||||
|
||||
var vms = Vue.component("amplify-sbgk", {
|
||||
template: `
|
||||
<div>
|
||||
<div class="amplify-title-icon">
|
||||
<img src="/cdn/images/WEB_DBD5893450984E50AFF356EF44FF4139.png" @click="openAmplify">
|
||||
</div>
|
||||
<transition name="el-zoom-in-top">
|
||||
<div class="amplify-fixed" v-show="show" style="display: none" @click="closeAmplifyAll">
|
||||
<div class="amplify-max">
|
||||
<div class="amplify-title">
|
||||
|
||||
<div>设备概况</div>
|
||||
<div class="amplify-close" @click="closeAmplify"><i class="el-icon-close"></i></div>
|
||||
</div>
|
||||
<div class="amplify-content">
|
||||
<div class="amplify-sbgk-survey_title">
|
||||
<div class="amplify-sbgk-survey_title_btn">
|
||||
<div :class="overview==0?'amplify-sbgk-survey_title_btn_min active':'amplify-sbgk-survey_title_btn_min'"
|
||||
@click="onClickoOverview(0)">设备数量
|
||||
</div>
|
||||
</div>
|
||||
<div class="amplify-sbgk-survey_title_btn">
|
||||
<div :class="overview==1?'amplify-sbgk-survey_title_btn_min active':'amplify-sbgk-survey_title_btn_min'"
|
||||
@click="onClickoOverview(1)">绑定数量
|
||||
</div>
|
||||
</div>
|
||||
<div class="amplify-sbgk-survey_title_btn">
|
||||
<div :class="overview==2?'amplify-sbgk-survey_title_btn_min active':'amplify-sbgk-survey_title_btn_min'"
|
||||
@click="onClickoOverview(2)">监控数量
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="amplify-sbgk-survey_content">
|
||||
<div class="amplify-sbgk-survey_content_img">
|
||||
<img :src="surveyUrlSb">
|
||||
</div>
|
||||
<div class="amplify-sbgk-survey_content_number">
|
||||
<p>{{showOverviewLabel}}</p>
|
||||
<div class="amplify-sbgk-survey_content_value">
|
||||
<span>{{showOverviewData.countNum}}</span> 台
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="amplify-sbgk-survey_title">
|
||||
<div class="amplify-sbgk-survey_title_btn">
|
||||
<div class="amplify-sbgk-survey_text amplify-sbgk-survey_text_zy"></div>
|
||||
<div class="amplify-sbgk-survey_text_value">
|
||||
<p>自有</p>
|
||||
<span>{{showOverviewData.zyNum}}</span>
|
||||
</div>
|
||||
</div>
|
||||
<div class="amplify-sbgk-survey_title_btn">
|
||||
<div class="amplify-sbgk-survey_text amplify-sbgk-survey_text_zl"></div>
|
||||
<div class="amplify-sbgk-survey_text_value">
|
||||
<p>租赁</p>
|
||||
<span>{{showOverviewData.zlNum}}</span>
|
||||
</div>
|
||||
</div>
|
||||
<div class="amplify-sbgk-survey_title_btn">
|
||||
<div class="amplify-sbgk-survey_text amplify-sbgk-survey_text_fb"></div>
|
||||
<div class="amplify-sbgk-survey_text_value">
|
||||
<p>分包</p>
|
||||
<span>{{showOverviewData.fbNum}}</span>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</transition>
|
||||
</div>
|
||||
|
||||
`,
|
||||
props: {
|
||||
|
||||
},
|
||||
data() {
|
||||
return {
|
||||
show:false,
|
||||
overview: 0,
|
||||
showOverviewLabel:'设备数量',
|
||||
surveyUrlSb: '/images/survey_icon_1.png',
|
||||
overviewInterval: '',
|
||||
overviewData:[],
|
||||
showOverviewData: {},
|
||||
}
|
||||
},
|
||||
mounted(){
|
||||
|
||||
},
|
||||
methods: {
|
||||
openAmplify(){
|
||||
this.show = true
|
||||
//设备概况点击事件定时器
|
||||
this.overviewInterval = setInterval(this.overviewClick, 5000);
|
||||
this.getOverviewData()
|
||||
},
|
||||
closeAmplify(){
|
||||
this.show = false
|
||||
this.overview = 0
|
||||
this.showOverviewLabel='设备数量'
|
||||
this.surveyUrlSb= '/images/survey_icon_1.png'
|
||||
clearInterval(this.overviewInterval);
|
||||
},
|
||||
closeAmplifyAll(e){
|
||||
if(e.target.className == 'amplify-fixed'){
|
||||
this.show = false
|
||||
this.overview = 0
|
||||
this.showOverviewLabel='设备数量'
|
||||
this.surveyUrlSb= '/images/survey_icon_1.png'
|
||||
clearInterval(this.overviewInterval);
|
||||
}
|
||||
},
|
||||
//设备概况点击事件定时器方法
|
||||
overviewClick() {
|
||||
if (this.overview < 2) {
|
||||
this.overview = this.overview + 1
|
||||
} else {
|
||||
this.overview = 0
|
||||
}
|
||||
this.showOverviewData = this.overviewData[this.overview];
|
||||
if (this.overview == 0) {
|
||||
this.showOverviewLabel = '设备数量'
|
||||
this.surveyUrlSb = '/images/survey_icon_1.png'
|
||||
} else if (this.overview == 1) {
|
||||
this.showOverviewLabel = '绑定数量'
|
||||
this.surveyUrlSb = '/images/survey_icon_2.png'
|
||||
} else {
|
||||
this.showOverviewLabel = '监控数量'
|
||||
this.surveyUrlSb = '/images/survey_icon_3.png'
|
||||
}
|
||||
},
|
||||
//设备概况点击事件
|
||||
onClickoOverview(n) {
|
||||
this.overview = n
|
||||
this.showOverviewData = this.overviewData[this.overview];
|
||||
if (this.overview == 0) {
|
||||
this.showOverviewLabel = '设备数量'
|
||||
this.surveyUrlSb = '/images/survey_icon_1.png'
|
||||
} else if (this.overview == 1) {
|
||||
this.showOverviewLabel = '绑定数量'
|
||||
this.surveyUrlSb = '/images/survey_icon_2.png'
|
||||
} else {
|
||||
this.showOverviewLabel = '监控数量'
|
||||
this.surveyUrlSb = '/images/survey_icon_3.png'
|
||||
}
|
||||
},
|
||||
//设备概况数据
|
||||
getOverviewData(){
|
||||
axios.post(requestUrl+"getEquipmentOverview?deptId="+deptId+"&projectId="+JSON.parse(localStorage.getItem("data1")).jzgj, {
|
||||
}).then(res => {
|
||||
this.overviewData = [res.data.data.count,res.data.data.bind,res.data.data.monitor];
|
||||
this.showOverviewData = this.overviewData[0];
|
||||
}).catch(err => {
|
||||
})
|
||||
},
|
||||
},
|
||||
watch:{
|
||||
|
||||
},
|
||||
|
||||
})
|
||||
|
||||
|
||||
|
|
@ -1,324 +0,0 @@
|
|||
import Vue from 'vue'
|
||||
|
||||
var vms = Vue.component("amplify-sbyxzt", {
|
||||
template: `
|
||||
<div>
|
||||
<div class="amplify-title-icon">
|
||||
<img src="/cdn/images/WEB_DBD5893450984E50AFF356EF44FF4139.png" @click="openAmplify">
|
||||
</div>
|
||||
<transition name="el-zoom-in-top">
|
||||
<div class="amplify-fixed" v-show="show" style="display: none" @click="closeAmplifyAll">
|
||||
<div class="amplify-max">
|
||||
<div class="amplify-title">
|
||||
<div>设备运行状态</div>
|
||||
<div class="amplify-close" @click="closeAmplify"><i class="el-icon-close"></i></div>
|
||||
</div>
|
||||
<div class="amplify-content">
|
||||
<!--内容区域-->
|
||||
<div class="amplify-content-pictrue" ref="warningPieChart"></div>
|
||||
<div class="amplify-chart-gif amplify-chart-work-gif" v-if="typeDistributionData.length > 0"></div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</transition>
|
||||
</div>
|
||||
`,
|
||||
props: {
|
||||
|
||||
},
|
||||
data() {
|
||||
return {
|
||||
show:false,
|
||||
typeDistributionData:[
|
||||
{
|
||||
name:'运行',
|
||||
value:'0'
|
||||
},
|
||||
{
|
||||
name:'静止 ',
|
||||
value:'0'
|
||||
}
|
||||
],
|
||||
}
|
||||
},
|
||||
mounted(){
|
||||
|
||||
},
|
||||
methods: {
|
||||
openAmplify(){
|
||||
this.show = true
|
||||
this.getDeviceInfoByProjectId()
|
||||
},
|
||||
closeAmplify(){
|
||||
this.show = false
|
||||
},
|
||||
closeAmplifyAll(e){
|
||||
if(e.target.className == 'amplify-fixed'){
|
||||
this.show = false
|
||||
}
|
||||
},
|
||||
//设备信息
|
||||
getDeviceInfoByProjectId(){
|
||||
var that = this;
|
||||
axios.post(requestUrl+"getDeviceInfoByProjectId?projectId="+JSON.parse(localStorage.getItem("data1")).jzgj, {
|
||||
}).then(res => {
|
||||
let runNumber = 0;
|
||||
let notRunNumber = 0;
|
||||
let deviceCount = 0;
|
||||
for(let i = 0;i<res.data.length;i++){
|
||||
let deviceNum = res.data[i].deviceNum;
|
||||
let deviceId = res.data[i].deviceId;
|
||||
let smartTerminalNumber = res.data[i].smartTerminalNumber;
|
||||
if(smartTerminalNumber != ""){deviceCount++;}
|
||||
axios.post("https://aqzg.makalu.cc/api/statistics/getTowerTorqueData",{"deviceId":smartTerminalNumber.substring(5,smartTerminalNumber.length)}, {
|
||||
}).then(res => {
|
||||
let deviceInfo = res.data.deviceInfo;
|
||||
//监控设备
|
||||
if(smartTerminalNumber != ""){
|
||||
//运行、静止设备
|
||||
if(deviceInfo == undefined || deviceInfo.angleData == undefined){
|
||||
notRunNumber ++;
|
||||
}else{
|
||||
runNumber ++;
|
||||
}
|
||||
}
|
||||
if(deviceId == 71259 || smartTerminalNumber == "aqzg-415"){
|
||||
that.oneData={
|
||||
rentalAngleOne:deviceInfo== undefined?0:deviceInfo.angleData,
|
||||
rentalRangeOne:deviceInfo== undefined?0:deviceInfo.ampData,
|
||||
rentalBrachiumOne:deviceInfo== undefined?0:deviceInfo.foreArmLength,
|
||||
deviceNumOne:deviceNum,
|
||||
}
|
||||
}else if(deviceId == 71258 || smartTerminalNumber == "aqzg-411"){
|
||||
that.twoData={
|
||||
rentalAngleTwo:deviceInfo== undefined?0:deviceInfo.angleData,
|
||||
rentalRangeTwo:deviceInfo== undefined?0:deviceInfo.ampData,
|
||||
rentalBrachiumTwo:deviceInfo== undefined?0:deviceInfo.foreArmLength,
|
||||
deviceNumTwo:deviceNum,
|
||||
}
|
||||
}else if(deviceId == 71257 || smartTerminalNumber == "aqzg-412"){
|
||||
that.threeData={
|
||||
rentalAngleThree:deviceInfo== undefined?0:deviceInfo.angleData,
|
||||
rentalRangeThree:deviceInfo== undefined?0:deviceInfo.ampData,
|
||||
rentalBrachiumThree:deviceInfo== undefined?0:deviceInfo.foreArmLength,
|
||||
deviceNumThree:deviceNum,
|
||||
}
|
||||
}else if(deviceId == 71804 || smartTerminalNumber == "aqzg-413"){
|
||||
that.fourData={
|
||||
rentalAngleFour:deviceInfo== undefined?0:deviceInfo.angleData,
|
||||
rentalRangeFour:deviceInfo== undefined?0:deviceInfo.ampData,
|
||||
rentalBrachiumFour:deviceInfo== undefined?0:deviceInfo.foreArmLength,
|
||||
deviceNumFour:deviceNum,
|
||||
}
|
||||
}else if(deviceId == 71803 || smartTerminalNumber == "aqzg-414"){
|
||||
that.fiveData={
|
||||
rentalAngleFive:deviceInfo== undefined?0:deviceInfo.angleData,
|
||||
rentalRangeFive:deviceInfo== undefined?0:deviceInfo.ampData,
|
||||
rentalBrachiumFive:deviceInfo== undefined?0:deviceInfo.foreArmLength,
|
||||
deviceNumFive:deviceNum,
|
||||
}
|
||||
}else if(deviceId == 71802 || smartTerminalNumber == "aqzg-410"){
|
||||
that.sixData={
|
||||
rentalAngleSix:deviceInfo== undefined?0:deviceInfo.angleData,
|
||||
rentalRangeSix:deviceInfo== undefined?0:deviceInfo.ampData,
|
||||
rentalBrachiumSix:deviceInfo== undefined?0:deviceInfo.foreArmLength,
|
||||
deviceNumSix:deviceNum,
|
||||
}
|
||||
}
|
||||
if(parseInt(runNumber)+parseInt(notRunNumber) == deviceCount){
|
||||
that.getTypeDistribution(runNumber,notRunNumber);
|
||||
}
|
||||
}).catch(err => {
|
||||
})
|
||||
}
|
||||
}).catch(err => {
|
||||
//console.log(err);
|
||||
})
|
||||
|
||||
},
|
||||
//设备运行状态数据接口
|
||||
getTypeDistribution(runNumber,notRunNumber){
|
||||
var that = this;
|
||||
axios.post(requestUrl+"getRunningDynamics?deptId="+deptId+"&projectId="+JSON.parse(localStorage.getItem("data1")).jzgj, {
|
||||
}).then(res => {
|
||||
let data = res.data.data;
|
||||
|
||||
let array = [];
|
||||
if(data.length > 0) {
|
||||
array = data;
|
||||
} else {
|
||||
array = [{
|
||||
name:'运行',
|
||||
value:'0'
|
||||
},
|
||||
{
|
||||
name:'静止',
|
||||
value:'0'
|
||||
}];
|
||||
}
|
||||
let dataArray = [];
|
||||
for(let i = 0;i<array.length;i++){
|
||||
if(array[i].name == "运行"){
|
||||
dataArray.push({"name":"运行","value":parseInt(array[i].value)+parseInt(runNumber==undefined?0:runNumber)});
|
||||
}else if(array[i].name == "静止"){
|
||||
dataArray.push({"name":"静止","value":parseInt(array[i].value)+parseInt(notRunNumber==undefined?0:notRunNumber)});
|
||||
}else {
|
||||
dataArray.push({"name":array[i].name,"value":array[i].value});
|
||||
}
|
||||
}
|
||||
that.typeDistributionData = dataArray;
|
||||
this.getChartData()
|
||||
}).catch(err => {
|
||||
})
|
||||
},
|
||||
|
||||
//数据图
|
||||
getChartData(){
|
||||
//品类金额占比 饼图
|
||||
var chChartPie = echarts.init(this.$refs.warningPieChart);
|
||||
this.echartPie(chChartPie,this.typeDistributionData)
|
||||
},
|
||||
echartPie(chChart,chartData){
|
||||
let newPromise = new Promise((resolve) => {
|
||||
resolve()
|
||||
})
|
||||
|
||||
//然后异步执行echarts的初始化函数
|
||||
newPromise.then(() => {
|
||||
var total_datas = 0;
|
||||
var data = [];
|
||||
var legendData = [];
|
||||
var color = ['#4474fa','#52aef7','#2075ae']
|
||||
for (let i = 0; i <chartData.length ; i++) {
|
||||
total_datas += Number(chartData[i].value);
|
||||
legendData.push(chartData[i].name)
|
||||
data.push(
|
||||
{
|
||||
value: chartData[i].value,
|
||||
name: chartData[i].name,
|
||||
itemStyle: {
|
||||
normal: {
|
||||
//颜色渐变
|
||||
color: color[i]
|
||||
},
|
||||
},
|
||||
},
|
||||
)
|
||||
}
|
||||
/* let total = chartData.reduce((a, b) => {
|
||||
return a + b.value;
|
||||
}, 0);*/
|
||||
this.option = {
|
||||
title: {
|
||||
text: total_datas,
|
||||
subtext: "台",
|
||||
x: "center",
|
||||
y: "140",
|
||||
textStyle: {
|
||||
color: "#0dd2fd",
|
||||
fontSize: 42,
|
||||
fontWeight: "normal",
|
||||
align: "center",
|
||||
width: "300px",
|
||||
},
|
||||
subtextStyle: {
|
||||
color: "#a5b5f0",
|
||||
fontSize: 25,
|
||||
fontWeight: "normal",
|
||||
align: "center",
|
||||
},
|
||||
},
|
||||
tooltip: {
|
||||
trigger: 'item',
|
||||
formatter: "{b} <br/>{c} ({d}%)"
|
||||
},
|
||||
legend: {
|
||||
width:'100%',
|
||||
left: "center",
|
||||
right: "0",
|
||||
bottom: "5",
|
||||
//icon: "circle",
|
||||
itemWidth: 25,
|
||||
itemGap:52,
|
||||
textStyle: {
|
||||
fontSize: 60,
|
||||
rich: {
|
||||
name: {
|
||||
color: "#c3dbfd",
|
||||
padding: [10, 5, 30, 5],
|
||||
// align: 'right'
|
||||
// width: 60
|
||||
fontSize: 25,
|
||||
},
|
||||
percent: {
|
||||
color: "#18DB9F",
|
||||
fontSize: 16,
|
||||
padding: [0, 5, 0, 5],
|
||||
// align: 'right'
|
||||
fontSize: 25,
|
||||
},
|
||||
},
|
||||
},
|
||||
formatter: function (name) {
|
||||
let res = chartData.filter((v) => v.name === name);
|
||||
let percent = total_datas == 0?0:((res[0].value * 100) / total_datas).toFixed(2);
|
||||
return "{name| " + name + "}\n{percent|" + res[0].value + "}{percent|" + percent + "%}";
|
||||
},
|
||||
},
|
||||
series: [
|
||||
{
|
||||
name: "品类金额占比",
|
||||
type: "pie",
|
||||
center: ["50%", "40%"],
|
||||
radius: ["42%", "60%"],
|
||||
data: data,
|
||||
label: {
|
||||
show: false,
|
||||
},
|
||||
itemStyle: {
|
||||
normal: {
|
||||
borderWidth: 10,
|
||||
borderColor: "#051a36"
|
||||
}
|
||||
},
|
||||
|
||||
},
|
||||
{
|
||||
name: "外边框",
|
||||
type: "pie",
|
||||
clockWise: false, //顺时加载
|
||||
hoverAnimation: false, //鼠标移入变大
|
||||
center: ["50%", "40%"],
|
||||
radius: ["66%", "66%"],
|
||||
label: {
|
||||
normal: {
|
||||
show: false,
|
||||
},
|
||||
},
|
||||
data: [
|
||||
{
|
||||
// value: 9,
|
||||
// name: "",
|
||||
// itemStyle: {
|
||||
// normal: {
|
||||
// borderWidth: 3,
|
||||
// borderColor: "#152c65",
|
||||
// },
|
||||
// },
|
||||
},
|
||||
],
|
||||
},
|
||||
],
|
||||
}
|
||||
chChart.setOption(this.option);
|
||||
window.onresize = chChart.resize;
|
||||
})
|
||||
},
|
||||
},
|
||||
watch:{
|
||||
|
||||
},
|
||||
|
||||
})
|
||||
|
||||
|
||||
|
|
@ -1,505 +0,0 @@
|
|||
import Vue from 'vue'
|
||||
var vms = Vue.component("amplify-aqjy", {
|
||||
template: `
|
||||
<div>
|
||||
<div class="amplify-title-icon">
|
||||
<img src="/cdn/images/WEB_DBD5893450984E50AFF356EF44FF4139.png" @click="openAmplify">
|
||||
</div>
|
||||
<transition name="el-zoom-in-top">
|
||||
<div class="amplify-fixed" v-show="show" style="display: none" @click="closeAmplifyAll">
|
||||
<div class="amplify-max">
|
||||
<div class="amplify-title">
|
||||
<div>安全教育</div>
|
||||
<div class="amplify-close" @click="closeAmplify"><i class="el-icon-close"></i></div>
|
||||
</div>
|
||||
<div class="amplify-content">
|
||||
<!--内容区域-->
|
||||
<div class="amplify-secure">
|
||||
<div class="amplify-accumulate">
|
||||
<div class="amplify-accumulate-amt">
|
||||
<div class="amplify-icons"></div>
|
||||
<div style="font-size: 24px">累计现场教育人数</div>
|
||||
</div>
|
||||
<div class="amplify-accumulate-amt">
|
||||
<div class="amplify-icons"></div>
|
||||
<div style="font-size: 24px">线上教育人数</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="amplify-gifPictrue" >
|
||||
<div class="amplify-gif">
|
||||
<div class="amplify-people-number" v-for="(item,index) in ljaqjy" :key="index">
|
||||
{{item}}
|
||||
</div>
|
||||
<!-- <span style="font-size: 32px;line-height: 80px">人</span>-->
|
||||
</div>
|
||||
<div class="amplify-gif" style="position:absolute;right:310px">
|
||||
<div class="amplify-people-number" >
|
||||
{{lsry}}
|
||||
</div>
|
||||
<!-- <span style="font-size: 32px;line-height: 80px">人</span>-->
|
||||
</div>
|
||||
</div>
|
||||
<div class="amplify-train">
|
||||
<div class="amplify-train-line" ref="charts1">1</div>
|
||||
<!-- <div class="amplify-train-line" ref="charts2">2</div>-->
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</transition>
|
||||
</div>
|
||||
`,
|
||||
props: {},
|
||||
data() {
|
||||
return {
|
||||
ljaqjy: 0,
|
||||
lsry: 0,
|
||||
show: false,
|
||||
safetyEducationData1: [
|
||||
{text: "接受培训率", value: 0},
|
||||
],
|
||||
safetyEducationData2: [
|
||||
{text: "接受培训率", value: 0},
|
||||
],
|
||||
width: 400
|
||||
}
|
||||
},
|
||||
mounted() {
|
||||
|
||||
},
|
||||
methods: {
|
||||
openAmplify() {
|
||||
this.show = true
|
||||
this.getLWData()
|
||||
this.getLSRYData()
|
||||
},
|
||||
closeAmplify() {
|
||||
this.show = false
|
||||
},
|
||||
closeAmplifyAll(e) {
|
||||
if (e.target.className == 'amplify-fixed') {
|
||||
this.show = false
|
||||
}
|
||||
},
|
||||
getLWDatas(){
|
||||
|
||||
},
|
||||
getLWData() {
|
||||
axios.post("https://smz.makalu.cc/mkl/screenApi/getAllUserData?token=" + JSON.parse(localStorage.getItem("data1")).smz_token
|
||||
+ "&deptId=123&typtDeptId=" + JSON.parse(localStorage.getItem("data1")).dept_id + "&typtProjectId=" + JSON.parse(localStorage.getItem("data1")).id, {}).then(res => {
|
||||
|
||||
|
||||
if (res.data.code == "-1") {
|
||||
|
||||
this.ljaqjy = 0;
|
||||
|
||||
}
|
||||
this.ljaqjy = res.data.zcrs + '';
|
||||
var safetyEducationData = [];
|
||||
var safetyEducationData2 = [];
|
||||
// safetyEducationData.push({text:"培训通过率",value:(res.data.jspxrs*res.data.pxtgl/100).toFixed(0)});
|
||||
// safetyEducationData2.push({text:"接受培训率",value:res.data.jspxrs });
|
||||
safetyEducationData.push({text: "接受培训率", value: res.data.zcrs});
|
||||
safetyEducationData2.push({text: "接受培训率", value: res.data.zcrs});
|
||||
this.safetyEducationData1 = safetyEducationData;
|
||||
this.safetyEducationData2 = safetyEducationData2;
|
||||
this.getChartData()
|
||||
this.getChartData1()
|
||||
}).catch(err => {
|
||||
})
|
||||
},
|
||||
getLSRYData() {
|
||||
axios.post("https://smz.makalu.cc/mkl/screenApi/getUserInfoTempList?token=" + JSON.parse(localStorage.getItem("data1")).smz_token
|
||||
+ "&isWork=1&deptId=123&typtDeptId=" + JSON.parse(localStorage.getItem("data1")).dept_id + "&typtProjectId=" + JSON.parse(localStorage.getItem("data1")).id, {}).then(res => {
|
||||
this.lsry = res.data.data.length + '';
|
||||
}).catch(err => {
|
||||
})
|
||||
},
|
||||
getChartData() {
|
||||
//品类金额占比 饼图
|
||||
var chChart = echarts.init(this.$refs.charts1);
|
||||
this.echart1(chChart, this.safetyEducationData1)
|
||||
},
|
||||
//出勤情况-灰名单
|
||||
getChartData1() {
|
||||
//品类金额占比 饼图
|
||||
var chChart = echarts.init(this.$refs.charts2);
|
||||
this.echart2(chChart, this.safetyEducationData2)
|
||||
},
|
||||
echart1(chChart, chartData) {
|
||||
var that = this
|
||||
let newPromise = new Promise((resolve) => {
|
||||
resolve()
|
||||
})
|
||||
//然后异步执行echarts的初始化函数
|
||||
newPromise.then(() => {
|
||||
|
||||
var value = []
|
||||
var text = []
|
||||
var bgData = []
|
||||
var total = 0
|
||||
for (let i = 0; i < chartData.length; i++) {
|
||||
value.push(chartData[i].value)
|
||||
text.push(chartData[i].text)
|
||||
bgData.push(100)
|
||||
if (this.workMax) {
|
||||
total = this.workMax
|
||||
} else {
|
||||
total += chartData[i].value
|
||||
}
|
||||
}
|
||||
|
||||
var prop = []
|
||||
for (let j = 0; j < value.length; j++) {
|
||||
if (total == 0) {
|
||||
prop.push(0)
|
||||
} else {
|
||||
prop.push((value[j] / total * 100).toFixed(1))
|
||||
}
|
||||
}
|
||||
var unit = '人'
|
||||
if (this.unit) {
|
||||
unit = this.unit
|
||||
}
|
||||
|
||||
|
||||
this.option = {
|
||||
grid: {
|
||||
left: "5%",
|
||||
right: "5%",
|
||||
bottom: "0%",
|
||||
top: "0%",
|
||||
containLabel: true,
|
||||
},
|
||||
xAxis: [{
|
||||
show: false,
|
||||
},
|
||||
//由于下边X轴已经是百分比刻度了,所以需要在顶部加一个X轴,刻度是金额,也隐藏掉
|
||||
{
|
||||
show: false,
|
||||
}
|
||||
],
|
||||
yAxis: [
|
||||
{
|
||||
type: 'category',
|
||||
axisLabel: {
|
||||
show: false, //让Y轴数据不显示
|
||||
},
|
||||
itemStyle: {},
|
||||
axisTick: {
|
||||
show: false, //隐藏Y轴刻度
|
||||
},
|
||||
axisLine: {
|
||||
show: false, //隐藏Y轴线段
|
||||
},
|
||||
data: [],
|
||||
}, {
|
||||
show: false,
|
||||
data: [],
|
||||
axisLine: {
|
||||
show: false
|
||||
}
|
||||
}],
|
||||
series: [
|
||||
//数据条--------------------我是分割线君------------------------------//
|
||||
{
|
||||
show: true,
|
||||
type: 'bar',
|
||||
xAxisIndex: 1, //代表使用第二个X轴刻度!!!!!!!!!!!!!!!!!!!!!!!!
|
||||
barGap: '-100%',
|
||||
barWidth: '20', //统计条宽度
|
||||
itemStyle: {
|
||||
normal: {
|
||||
color: 'rgba(22,203,115,0.05)'
|
||||
},
|
||||
},
|
||||
label: {
|
||||
normal: {
|
||||
show: true,
|
||||
//label 的position位置可以是top bottom left,right,也可以是固定值
|
||||
//在这里需要上下统一对齐,所以用固定值
|
||||
position: [0, '-40'],
|
||||
rich: { //富文本
|
||||
prop: { //自定义颜色
|
||||
color: '#c6d9fa',
|
||||
fontSize: '25',
|
||||
},
|
||||
unit: {
|
||||
color: '#6c829a',
|
||||
fontSize: '25',
|
||||
},
|
||||
yes: {
|
||||
color: '#55adf7',
|
||||
fontSize: '25',
|
||||
},
|
||||
not: {
|
||||
color: '#4677fa',
|
||||
fontSize: '25',
|
||||
},
|
||||
index: {
|
||||
color: '#fcbc02',
|
||||
fontStyle: 'italic',
|
||||
padding: [0, 0, 0, 5],
|
||||
fontSize: '25',
|
||||
},
|
||||
name: {
|
||||
width: this.width,
|
||||
color: '#c6d9fa',
|
||||
padding: [0, 0, 0, 5],
|
||||
fontSize: '25',
|
||||
},
|
||||
color: {
|
||||
color: '#8ca2be',
|
||||
fontSize: '20',
|
||||
},
|
||||
arrow: {
|
||||
width: 20,
|
||||
height: 15,
|
||||
backgroundColor: {
|
||||
image: "/cdn/images/WEB_2B7C06210CD44D55BFEE6205A35DE4A7.png",
|
||||
},
|
||||
},
|
||||
|
||||
},
|
||||
formatter: function (data) {
|
||||
//富文本固定格式{colorName|这里填你想要写的内容}
|
||||
//return '{arrow|}'
|
||||
// if(that.show == true){
|
||||
// return '{arrow|}{name|' + text[data.dataIndex] + '}{prop|' + value[data.dataIndex] + '}{color| '+unit+'}';
|
||||
// }else{
|
||||
// return '{arrow|}{name|' + text[data.dataIndex] + '}{prop|' + value[data.dataIndex] + '}{color| '+unit+'} {prop|'+prop[data.dataIndex]+'}{color| %} ';
|
||||
// }
|
||||
return '{arrow|}{name|' + text[data.dataIndex] + '}{prop|' + value[data.dataIndex] + '}{color| 人} {prop|' + prop[data.dataIndex] + '}{color| %} ';
|
||||
},
|
||||
}
|
||||
},
|
||||
data: bgData,
|
||||
},
|
||||
{
|
||||
type: "bar",
|
||||
zlevel: 1,
|
||||
itemStyle: {
|
||||
normal: {
|
||||
color: "#6ab9fe",
|
||||
},
|
||||
},
|
||||
barWidth: 16,
|
||||
data: prop,
|
||||
},
|
||||
{
|
||||
type: "bar",
|
||||
barWidth: 20,
|
||||
barGap: "-100%",
|
||||
data: bgData,
|
||||
itemStyle: {
|
||||
normal: {
|
||||
color: "rgba(24,31,68,1)",
|
||||
},
|
||||
},
|
||||
},
|
||||
],
|
||||
};
|
||||
|
||||
chChart.setOption(this.option);
|
||||
window.onresize = chChart.resize;
|
||||
|
||||
chChart.off('click')
|
||||
|
||||
chChart.on('click', function (params) {
|
||||
that.$emit('personnel', params.dataIndex);
|
||||
})
|
||||
})
|
||||
},
|
||||
//出勤情况-灰名单
|
||||
echart2(chChart, chartData) {
|
||||
var that = this
|
||||
let newPromise = new Promise((resolve) => {
|
||||
resolve()
|
||||
})
|
||||
//然后异步执行echarts的初始化函数
|
||||
newPromise.then(() => {
|
||||
|
||||
var value = []
|
||||
var text = []
|
||||
var bgData = []
|
||||
var total = 0
|
||||
for (let i = 0; i < chartData.length; i++) {
|
||||
value.push(chartData[i].value)
|
||||
text.push(chartData[i].text)
|
||||
bgData.push(100)
|
||||
if (this.workMax) {
|
||||
total = this.workMax
|
||||
} else {
|
||||
total += chartData[i].value
|
||||
}
|
||||
}
|
||||
|
||||
var prop = []
|
||||
for (let j = 0; j < value.length; j++) {
|
||||
if (total == 0) {
|
||||
prop.push(0)
|
||||
} else {
|
||||
prop.push((value[j] / total * 100).toFixed(1))
|
||||
}
|
||||
}
|
||||
var unit = '人'
|
||||
if (this.unit) {
|
||||
unit = this.unit
|
||||
}
|
||||
|
||||
|
||||
this.option = {
|
||||
grid: {
|
||||
left: "5%",
|
||||
right: "5%",
|
||||
bottom: "0%",
|
||||
top: "0%",
|
||||
containLabel: true,
|
||||
},
|
||||
xAxis: [{
|
||||
show: false,
|
||||
},
|
||||
//由于下边X轴已经是百分比刻度了,所以需要在顶部加一个X轴,刻度是金额,也隐藏掉
|
||||
{
|
||||
show: false,
|
||||
}
|
||||
],
|
||||
yAxis: [
|
||||
{
|
||||
type: 'category',
|
||||
axisLabel: {
|
||||
show: false, //让Y轴数据不显示
|
||||
},
|
||||
itemStyle: {},
|
||||
axisTick: {
|
||||
show: false, //隐藏Y轴刻度
|
||||
},
|
||||
axisLine: {
|
||||
show: false, //隐藏Y轴线段
|
||||
},
|
||||
data: [],
|
||||
}, {
|
||||
show: false,
|
||||
data: [],
|
||||
axisLine: {
|
||||
show: false
|
||||
}
|
||||
}],
|
||||
series: [
|
||||
//数据条--------------------我是分割线君------------------------------//
|
||||
{
|
||||
show: true,
|
||||
type: 'bar',
|
||||
xAxisIndex: 1, //代表使用第二个X轴刻度!!!!!!!!!!!!!!!!!!!!!!!!
|
||||
barGap: '-100%',
|
||||
barWidth: '20', //统计条宽度
|
||||
itemStyle: {
|
||||
normal: {
|
||||
color: 'rgba(22,203,115,0.05)'
|
||||
},
|
||||
},
|
||||
label: {
|
||||
normal: {
|
||||
show: true,
|
||||
//label 的position位置可以是top bottom left,right,也可以是固定值
|
||||
//在这里需要上下统一对齐,所以用固定值
|
||||
position: [0, '-40'],
|
||||
rich: { //富文本
|
||||
prop: { //自定义颜色
|
||||
color: '#c6d9fa',
|
||||
fontSize: '25',
|
||||
},
|
||||
unit: {
|
||||
color: '#6c829a',
|
||||
fontSize: '25',
|
||||
},
|
||||
yes: {
|
||||
color: '#55adf7',
|
||||
fontSize: '25',
|
||||
},
|
||||
not: {
|
||||
color: '#4677fa',
|
||||
fontSize: '25',
|
||||
},
|
||||
index: {
|
||||
color: '#fcbc02',
|
||||
fontStyle: 'italic',
|
||||
padding: [0, 0, 0, 5],
|
||||
fontSize: '25',
|
||||
},
|
||||
name: {
|
||||
width: this.width,
|
||||
color: '#c6d9fa',
|
||||
padding: [0, 0, 0, 5],
|
||||
fontSize: '25',
|
||||
},
|
||||
color: {
|
||||
color: '#8ca2be',
|
||||
fontSize: '20',
|
||||
},
|
||||
arrow: {
|
||||
width: 20,
|
||||
height: 15,
|
||||
backgroundColor: {
|
||||
image: "/cdn/images/WEB_2B7C06210CD44D55BFEE6205A35DE4A7.png",
|
||||
},
|
||||
},
|
||||
|
||||
},
|
||||
formatter: function (data) {
|
||||
//富文本固定格式{colorName|这里填你想要写的内容}
|
||||
//return '{arrow|}'
|
||||
if (that.show == true) {
|
||||
return '{arrow|}{name|' + text[data.dataIndex] + '}{prop|' + value[data.dataIndex] + '}{color| ' + unit + '}';
|
||||
} else {
|
||||
return '{arrow|}{name|' + text[data.dataIndex] + '}{prop|' + value[data.dataIndex] + '}{color| ' + unit + '} {prop|' + prop[data.dataIndex] + '}{color| %} ';
|
||||
}
|
||||
|
||||
},
|
||||
}
|
||||
},
|
||||
data: bgData,
|
||||
},
|
||||
{
|
||||
type: "bar",
|
||||
zlevel: 1,
|
||||
itemStyle: {
|
||||
normal: {
|
||||
color: "#6ab9fe",
|
||||
},
|
||||
},
|
||||
barWidth: 16,
|
||||
data: prop,
|
||||
},
|
||||
{
|
||||
type: "bar",
|
||||
barWidth: 20,
|
||||
barGap: "-100%",
|
||||
data: bgData,
|
||||
itemStyle: {
|
||||
normal: {
|
||||
color: "rgba(24,31,68,1)",
|
||||
},
|
||||
},
|
||||
},
|
||||
],
|
||||
};
|
||||
|
||||
chChart.setOption(this.option);
|
||||
window.onresize = chChart.resize;
|
||||
|
||||
chChart.off('click')
|
||||
|
||||
chChart.on('click', function (params) {
|
||||
that.$emit('personnel', params.dataIndex);
|
||||
})
|
||||
})
|
||||
},
|
||||
|
||||
},
|
||||
watch: {},
|
||||
|
||||
})
|
||||
|
||||
|
||||
|
|
@ -1,106 +0,0 @@
|
|||
import Vue from 'vue'
|
||||
var vms = Vue.component("amplify-cjdwfb", {
|
||||
template: `
|
||||
<div>
|
||||
<div class="amplify-title-icon">
|
||||
<img src="/cdn/images/WEB_DBD5893450984E50AFF356EF44FF4139.png" @click="openAmplify">
|
||||
</div>
|
||||
<transition name="el-zoom-in-top">
|
||||
<div class="amplify-fixed" v-show="show" style="display: none" @click="closeAmplifyAll">
|
||||
<div class="amplify-max">
|
||||
<div class="amplify-title">
|
||||
<div>参建单位分布</div>
|
||||
<div class="amplify-close" @click="closeAmplify"><i class="el-icon-close"></i></div>
|
||||
</div>
|
||||
<div class="amplify-content">
|
||||
<!--内容区域-->
|
||||
<el-table ref="seeUnit" :data="seeUnitData" height="500" :row-style="rowStyle" :header-row-style="headerStyle"
|
||||
@cell-mouse-enter="seeUnitMouseEnter" @cell-mouse-leave="seeUnitMouseLeave"
|
||||
class="elTable">
|
||||
<el-table-column align="center" type="index" label="序号" width="120"></el-table-column>
|
||||
<el-table-column align="center" prop="unitName" label="参建单位"
|
||||
show-overflow-tooltip></el-table-column>
|
||||
<el-table-column align="center" :label="showTitle" width="200" prop="rs"></el-table-column>
|
||||
</el-table>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</transition>
|
||||
</div>
|
||||
`,
|
||||
props: {
|
||||
|
||||
},
|
||||
data() {
|
||||
return {
|
||||
//参见单位分布
|
||||
seeUnitData: [],
|
||||
seeUnitInterval: '',
|
||||
show:false,
|
||||
rowStyle: {
|
||||
color: '#B6CFEF',
|
||||
fontSize: '24px',
|
||||
height: '64px'
|
||||
},
|
||||
headerStyle:{
|
||||
color: '#B6CFEF',
|
||||
fontSize: '24px',
|
||||
height: '64px'
|
||||
},
|
||||
showTitle: ""
|
||||
}
|
||||
},
|
||||
mounted(){
|
||||
this.seeUnitInterval = setInterval(this.seeUnitScroll, 50);
|
||||
},
|
||||
methods: {
|
||||
openAmplify(){
|
||||
this.show = true
|
||||
this.getUnitPeopleNum()
|
||||
},
|
||||
closeAmplify(){
|
||||
this.show = false
|
||||
},
|
||||
closeAmplifyAll(e){
|
||||
if(e.target.className == 'amplify-fixed'){
|
||||
this.show = false
|
||||
}
|
||||
},
|
||||
getUnitPeopleNum() {
|
||||
axios.post("https://smz.makalu.cc/mkl/screenApi/getCqUnitPeopleNum?token=" + JSON.parse(localStorage.getItem("data1")).smz_token + "&deptId=123&typtDeptId=" + JSON.parse(localStorage.getItem("data1")).dept_id + "&typtProjectId=" + JSON.parse(localStorage.getItem("data1")).id, {}).then(res => {
|
||||
if (res.data.state == "OK") {
|
||||
let n = 0
|
||||
for(let da of res.data.data){
|
||||
n += da.rs
|
||||
}
|
||||
this.showTitle = "人数(" + n +")"
|
||||
this.seeUnitData = res.data.data
|
||||
} else {
|
||||
this.seeUnitData = [];
|
||||
}
|
||||
}).catch(err => {
|
||||
})
|
||||
},
|
||||
seeUnitScroll() {
|
||||
let maxHeight = this.$refs.seeUnit.$el.querySelectorAll('.el-table__body')[0].offsetHeight;
|
||||
let clientHeight = this.$refs.seeUnit.bodyWrapper.clientHeight;
|
||||
if (Math.abs(this.$refs.seeUnit.bodyWrapper.scrollTop - (maxHeight - clientHeight)) < 5) { //预留5像素误差
|
||||
this.$refs.seeUnit.bodyWrapper.scrollTop = 0;
|
||||
} else {
|
||||
this.$refs.seeUnit.bodyWrapper.scrollTop += 1;//32是每一行表格的高度，每秒滚一行
|
||||
}
|
||||
},
|
||||
seeUnitMouseEnter() {//鼠标移入停止滚动
|
||||
clearInterval(this.seeUnitInterval);
|
||||
},
|
||||
seeUnitMouseLeave() {//鼠标离开继续滚动
|
||||
this.seeUnitInterval = setInterval(this.seeUnitScroll, 50);
|
||||
}
|
||||
},
|
||||
watch:{
|
||||
|
||||
},
|
||||
|
||||
})
|
||||
|
||||
|
||||
|
|
@ -1,483 +0,0 @@
|
|||
import Vue from 'vue'
|
||||
var vms = Vue.component("amplify-gzzb", {
|
||||
template: `
|
||||
<div>
|
||||
<div class="amplify-title-icon">
|
||||
<img src="/cdn/images/WEB_DBD5893450984E50AFF356EF44FF4139.png" @click="openAmplify">
|
||||
</div>
|
||||
<transition name="el-zoom-in-top">
|
||||
<div class="amplify-fixed" v-show="show" style="display: none" @click="closeAmplifyAll">
|
||||
<div class="amplify-max">
|
||||
<div class="amplify-title">
|
||||
<div>工种占比</div>
|
||||
<div class="amplify-close" @click="closeAmplify"><i class="el-icon-close"></i></div>
|
||||
</div>
|
||||
<div class="amplify-content">
|
||||
<!--内容区域-->
|
||||
<el-row>
|
||||
<!--左边内容-->
|
||||
<el-col :span="11">
|
||||
<div class="amplify-leftHeader">
|
||||
<div class="amplify-leftCircle" ref="amplifyBox"></div>
|
||||
<div class="amplify-chart-gifs amplify-chart-work-gifs" v-if="typedata.length>0"></div>
|
||||
</div>
|
||||
</el-col>
|
||||
<!--右边内容-->
|
||||
<el-col :span="13">
|
||||
<div class="amplify-rightHeader" >
|
||||
<div class="amplify-rightPro" ref="amplifyStyle"></div>
|
||||
</div>
|
||||
</el-col>
|
||||
</el-row>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</transition>
|
||||
</div>
|
||||
`,
|
||||
props: {},
|
||||
data() {
|
||||
return {
|
||||
show: false,
|
||||
typedata:[],
|
||||
projectId:JSON.parse(localStorage.getItem("data1")).id,
|
||||
}
|
||||
},
|
||||
mounted() {
|
||||
|
||||
},
|
||||
methods: {
|
||||
openAmplify() {
|
||||
this.show = true
|
||||
this.getGZData()
|
||||
},
|
||||
closeAmplify() {
|
||||
this.show = false
|
||||
},
|
||||
closeAmplifyAll(e) {
|
||||
if (e.target.className == 'amplify-fixed') {
|
||||
this.show = false
|
||||
}
|
||||
},
|
||||
getGZData() {
|
||||
axios.post("https://smz.makalu.cc/mkl/screenApi/getCqWorkTypeData?token=" + JSON.parse(localStorage.getItem("data1")).smz_token + "&deptId=131&typtDeptId=" + JSON.parse(localStorage.getItem("data1")).dept_id + "&typtProjectId=" + JSON.parse(localStorage.getItem("data1")).id, {}).then(res => {
|
||||
var workPropData = [];
|
||||
if (res.data.code != "-1") {
|
||||
var data = res.data.workTypeData;
|
||||
for (let i = 0; i < data.length; i++) {
|
||||
workPropData.push({
|
||||
text: data[i].name,
|
||||
value: data[i].value,
|
||||
prop: data[i].percent,
|
||||
id: data[i].id
|
||||
})
|
||||
}
|
||||
}
|
||||
var workPropDataNew = []
|
||||
var val={
|
||||
id : '',
|
||||
text:'其他工种',
|
||||
prop : 0,
|
||||
value : 0,
|
||||
}
|
||||
|
||||
if(workPropData.length > 0){
|
||||
for (let i = 0; i < workPropData.length ; i++) {
|
||||
if(workPropData[i].text == '其他工种' || workPropData[i].text == '其他'){
|
||||
val.id += workPropData[i].id+','
|
||||
val.prop += Number(workPropData[i].prop)
|
||||
val.value += Number(workPropData[i].value)
|
||||
}else {
|
||||
workPropDataNew.push(workPropData[i])
|
||||
}
|
||||
}
|
||||
}
|
||||
workPropDataNew.push(val)
|
||||
this.typedata = workPropDataNew;
|
||||
|
||||
this.getChartData()
|
||||
this.getChartData1()
|
||||
}).catch(err => {
|
||||
})
|
||||
},
|
||||
//左边圆形图
|
||||
getChartData(){
|
||||
//品类金额占比 饼图
|
||||
var chChartPie = echarts.init(this.$refs.amplifyBox);
|
||||
this.echartPie(chChartPie,this.typedata)
|
||||
},
|
||||
echartPie(chChart,chartData){
|
||||
// console.log(chartData)
|
||||
let newPromise = new Promise((resolve) => {
|
||||
resolve()
|
||||
})
|
||||
|
||||
//然后异步执行echarts的初始化函数
|
||||
newPromise.then(() => {
|
||||
var total_datas = 0;
|
||||
var data = [];
|
||||
var legendData = [];
|
||||
var color = ['#4974ff','#52aef7','#6863d7','#1d5d89','#20e6ff','#67feef']
|
||||
for (let i = 0; i <chartData.length ; i++) {
|
||||
total_datas += Number(chartData[i].value);
|
||||
legendData.push(chartData[i].text)
|
||||
data.push(
|
||||
{
|
||||
value: chartData[i].value,
|
||||
name: chartData[i].text,
|
||||
itemStyle: {
|
||||
normal: {
|
||||
//颜色渐变
|
||||
color: color[i]
|
||||
},
|
||||
},
|
||||
},
|
||||
)
|
||||
}
|
||||
/* let total = chartData.reduce((a, b) => {
|
||||
return a + b.value;
|
||||
}, 0);*/
|
||||
this.option = {
|
||||
title: {
|
||||
text: total_datas,
|
||||
subtext: "总人数",
|
||||
x: "center",
|
||||
y: "143",
|
||||
textStyle: {
|
||||
color: "#0dd2fd",
|
||||
fontSize: 52,
|
||||
fontWeight: "normal",
|
||||
align: "center",
|
||||
width: "200px",
|
||||
},
|
||||
subtextStyle: {
|
||||
color: "#a5b5f0",
|
||||
fontSize: 28,
|
||||
fontWeight: "normal",
|
||||
align: "center",
|
||||
},
|
||||
},
|
||||
tooltip: {
|
||||
trigger: 'item',
|
||||
formatter: "{b} <br/>{c} ({d}%)"
|
||||
},
|
||||
series: [
|
||||
{
|
||||
name: "品类金额占比",
|
||||
type: "pie",
|
||||
center: ["50%", "50%"],
|
||||
radius: ["53%", "70%"],
|
||||
data: data,
|
||||
label: {
|
||||
show: false,
|
||||
},
|
||||
itemStyle: {
|
||||
normal: {
|
||||
borderWidth: 10,
|
||||
borderColor: "#051a36"
|
||||
}
|
||||
},
|
||||
|
||||
},
|
||||
{
|
||||
name: "外边框",
|
||||
type: "pie",
|
||||
clockWise: false, //顺时加载
|
||||
hoverAnimation: false, //鼠标移入变大
|
||||
center: ["50%", "50%"],
|
||||
radius: ["78%", "78%"],
|
||||
label: {
|
||||
normal: {
|
||||
show: false,
|
||||
},
|
||||
},
|
||||
data: [
|
||||
{
|
||||
value: 9,
|
||||
name: "",
|
||||
itemStyle: {
|
||||
normal: {
|
||||
borderWidth: 6,
|
||||
borderColor: "#152c65",
|
||||
},
|
||||
},
|
||||
},
|
||||
],
|
||||
},
|
||||
],
|
||||
}
|
||||
chChart.setOption(this.option);
|
||||
window.onresize = chChart.resize;
|
||||
})
|
||||
},
|
||||
//右边进度图
|
||||
getChartData1(){
|
||||
var chChartBar = echarts.init(this.$refs.amplifyStyle);
|
||||
this.echartBar(chChartBar,this.typedata)
|
||||
},
|
||||
echartBar(chChart,chartData){
|
||||
var that = this
|
||||
|
||||
let newPromise = new Promise((resolve) => {
|
||||
resolve()
|
||||
})
|
||||
//然后异步执行echarts的初始化函数
|
||||
newPromise.then(() => {
|
||||
|
||||
|
||||
var value = [];
|
||||
var prop = [];
|
||||
var text = [];
|
||||
var zero = []
|
||||
|
||||
var total = 0
|
||||
for (let i = chartData.length-1; i >=0; i--) {
|
||||
total += chartData[i].value;
|
||||
value.push(chartData[i].value)
|
||||
prop.push(chartData[i].prop)
|
||||
text.push(chartData[i].text)
|
||||
zero.push(0)
|
||||
}
|
||||
|
||||
|
||||
var data = []
|
||||
var data_all = new Array(prop.length)
|
||||
for (let i = 0; i <prop.length ; i++) {
|
||||
let tmp = new Array(prop.length).fill(0)
|
||||
tmp[i] = prop[i]
|
||||
data.push(tmp)
|
||||
let tmp_all = 0
|
||||
|
||||
for(let j = i;j<prop.length;j++){
|
||||
tmp_all+= prop[j];
|
||||
}
|
||||
data_all[i] = tmp_all;
|
||||
}
|
||||
|
||||
data_all.splice(0,1)
|
||||
data_all.push(0)
|
||||
|
||||
|
||||
var color = ['#4974ff','#52aef7','#6863d7','#1d5d89','#20e6ff','#67feef']
|
||||
|
||||
var series =[
|
||||
//背景色--------------------我是分割线君------------------------------//
|
||||
{
|
||||
show: true,
|
||||
type: 'bar',
|
||||
barGap: '-100%',
|
||||
barWidth: '12', //统计条宽度
|
||||
itemStyle: {
|
||||
normal: {
|
||||
color: 'rgba(27, 61, 133,0.5)',
|
||||
},
|
||||
|
||||
},
|
||||
z: 1,
|
||||
data: [100, 100, 100, 100, 100, 100]
|
||||
},
|
||||
//数据条--------------------我是分割线君------------------------------//
|
||||
{
|
||||
show: true,
|
||||
type: 'bar',
|
||||
xAxisIndex: 1, //代表使用第二个X轴刻度!!!!!!!!!!!!!!!!!!!!!!!!
|
||||
barGap: '-100%',
|
||||
barWidth: '12', //统计条宽度
|
||||
itemStyle: {
|
||||
normal: {
|
||||
color: 'rgba(22,203,115,0.05)'
|
||||
},
|
||||
},
|
||||
label: {
|
||||
normal: {
|
||||
show: true,
|
||||
//label 的position位置可以是top bottom left,right,也可以是固定值
|
||||
//在这里需要上下统一对齐,所以用固定值
|
||||
position: [0, '-40'],
|
||||
rich: { //富文本
|
||||
prop: { //自定义颜色
|
||||
color: '#c6d9fa',
|
||||
fontSize:'28',
|
||||
},
|
||||
value: { //自定义颜色
|
||||
color: '#6cbbfe',
|
||||
fontSize:'28',
|
||||
},
|
||||
index:{
|
||||
color: '#fcbc02',
|
||||
fontStyle: 'italic',
|
||||
padding:[0,0,0,5],
|
||||
fontSize:'28',
|
||||
},
|
||||
name: {
|
||||
width: 160,
|
||||
color: '#c6d9fa',
|
||||
padding:[0,0,0,10],
|
||||
fontSize:'24',
|
||||
},
|
||||
color:{
|
||||
color: '#8ca2be',
|
||||
fontSize:'24',
|
||||
},
|
||||
|
||||
arrow1:{
|
||||
width:20,
|
||||
height:20,
|
||||
backgroundColor: '#4974ff',
|
||||
borderRadius:50
|
||||
},
|
||||
arrow2:{
|
||||
width:20,
|
||||
height:20,
|
||||
backgroundColor: '#52aef7',
|
||||
borderRadius:50
|
||||
},
|
||||
arrow3:{
|
||||
width:20,
|
||||
height:20,
|
||||
backgroundColor: '#6863d7',
|
||||
borderRadius:50
|
||||
},
|
||||
arrow4:{
|
||||
width:20,
|
||||
height:20,
|
||||
backgroundColor: '#1d5d89',
|
||||
borderRadius:50
|
||||
},
|
||||
arrow5:{
|
||||
width:20,
|
||||
height:20,
|
||||
backgroundColor: '#20e6ff',
|
||||
borderRadius:50
|
||||
},
|
||||
arrow6:{
|
||||
width:20,
|
||||
height:20,
|
||||
backgroundColor: '#67feef',
|
||||
borderRadius:50
|
||||
},
|
||||
},
|
||||
formatter: function(data) {
|
||||
//富文本固定格式{colorName|这里填你想要写的内容}
|
||||
if (data.dataIndex == 5) {
|
||||
return '{arrow1|}{name|' + text[data.dataIndex] + '}{value|' + value[data.dataIndex] + '}{color| 人} {prop|' + prop[data.dataIndex] + '} {color| %}';
|
||||
}else if(data.dataIndex == 4){
|
||||
return '{arrow2|}{name|' + text[data.dataIndex] + '}{value|' + value[data.dataIndex] + '}{color| 人} {prop|' + prop[data.dataIndex] + '} {color| %}';
|
||||
}else if(data.dataIndex == 3){
|
||||
return '{arrow3|}{name|' + text[data.dataIndex] + '}{value|' + value[data.dataIndex] + '}{color| 人} {prop|' + prop[data.dataIndex] + '} {color| %}';
|
||||
}else if(data.dataIndex == 2){
|
||||
return '{arrow4|}{name|' + text[data.dataIndex] + '}{value|' + value[data.dataIndex] + '}{color| 人} {prop|' + prop[data.dataIndex] + '} {color| %}';
|
||||
}else if(data.dataIndex == 1){
|
||||
return '{arrow5|}{name|' + text[data.dataIndex] + '}{value|' + value[data.dataIndex] + '}{color| 人} {prop|' + prop[data.dataIndex] + '} {color| %}';
|
||||
}else if(data.dataIndex == 0){
|
||||
return '{arrow6|}{name|' + text[data.dataIndex] + '}{value|' + value[data.dataIndex] + '}{color| 人} {prop|' + prop[data.dataIndex] + '} {color| %}';
|
||||
}
|
||||
|
||||
},
|
||||
}
|
||||
},
|
||||
data: value
|
||||
},
|
||||
{
|
||||
type: "bar",
|
||||
stack: "总",
|
||||
barWidth: 12,
|
||||
itemStyle: {
|
||||
normal: {
|
||||
barBorderColor: 'rgba(0,0,0,0)',
|
||||
color: 'rgba(0,0,0,0)'
|
||||
}
|
||||
},
|
||||
data: data_all
|
||||
},
|
||||
|
||||
|
||||
]
|
||||
for (let i = 0; i < data.length; i++) {
|
||||
series.push({
|
||||
type: "bar",
|
||||
barWidth: 12 ,
|
||||
stack: "总",
|
||||
itemStyle: {
|
||||
normal: {
|
||||
color: color[data.length-1-i]
|
||||
}
|
||||
},
|
||||
/*itemStyle: {
|
||||
normal: {
|
||||
color: new echarts.graphic.LinearGradient(1, 0, 0, 0, [
|
||||
{
|
||||
offset: 0,
|
||||
color: "#41adf5",
|
||||
},
|
||||
{
|
||||
offset: 1,
|
||||
color: "#175eac",
|
||||
},
|
||||
]),
|
||||
barBorderRadius: [5,5,5,5],
|
||||
},
|
||||
},*/
|
||||
data: data[i]
|
||||
})
|
||||
}
|
||||
|
||||
this.option1 = {
|
||||
grid: {
|
||||
left: '2%',
|
||||
right: '10%',
|
||||
bottom: '-8%',
|
||||
top: '3%',
|
||||
containLabel: true
|
||||
},
|
||||
yAxis: {
|
||||
type: 'category',
|
||||
axisLabel: {
|
||||
show: false, //让Y轴数据不显示
|
||||
},
|
||||
itemStyle: {
|
||||
|
||||
},
|
||||
axisTick: {
|
||||
show: false, //隐藏Y轴刻度
|
||||
},
|
||||
axisLine: {
|
||||
show: false, //隐藏Y轴线段
|
||||
},
|
||||
data: text,
|
||||
},
|
||||
|
||||
xAxis: [{
|
||||
show: false,
|
||||
},
|
||||
//由于下边X轴已经是百分比刻度了,所以需要在顶部加一个X轴,刻度是金额,也隐藏掉
|
||||
{
|
||||
show: false,
|
||||
}
|
||||
],
|
||||
series: series
|
||||
};
|
||||
|
||||
chChart.setOption(this.option1);
|
||||
window.onresize = chChart.resize;
|
||||
|
||||
|
||||
chChart.off('click')
|
||||
|
||||
chChart.on('click', function (params) {
|
||||
for(let i= 0;i<chartData.length;i++){
|
||||
if(params.name == chartData[i].text){
|
||||
that.$emit('personnel',chartData[i]);
|
||||
break
|
||||
}
|
||||
}
|
||||
})
|
||||
|
||||
})
|
||||
},
|
||||
},
|
||||
watch: {},
|
||||
|
||||
})
|
||||
|
||||
|
||||
|
|
@ -1,288 +0,0 @@
|
|||
import Vue from 'vue'
|
||||
var vms = Vue.component("amplify-lwrygk", {
|
||||
template: `
|
||||
<div>
|
||||
<div class="amplify-title-icon">
|
||||
<img src="/cdn/images/WEB_DBD5893450984E50AFF356EF44FF4139.png" @click="openAmplify">
|
||||
</div>
|
||||
<transition name="el-zoom-in-top">
|
||||
<div class="amplify-fixed" v-show="show" style="display: none" @click="closeAmplifyAll">
|
||||
<div class="amplify-max">
|
||||
<div class="amplify-title">
|
||||
<div>劳务人员概况</div>
|
||||
<div class="amplify-close" @click="closeAmplify"><i class="el-icon-close"></i></div>
|
||||
</div>
|
||||
<div class="amplify-content">
|
||||
<div class="amplify-lwrygk-info" >
|
||||
<div class="amplify-lwrygk-info-title" >
|
||||
<div :class="nav==1?'active':''" @click="onInfoNav(1,'今日出勤')">今日出勤</div>
|
||||
<div :class="nav==0?'active':''" @click="onInfoNav(0,'在岗人数')">在岗人数</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="amplify-lwrygk-data-content" >
|
||||
<el-row>
|
||||
<el-col :span="8">
|
||||
<div class="amplify-lwrygk-survey_content">
|
||||
<div class="amplify-lwrygk-survey_content_img">
|
||||
<img :src="surveyUrl">
|
||||
</div>
|
||||
</div>
|
||||
<div class="amplify-lwrygk-survey_content_number">
|
||||
<div class="amplify-lwrygk-survey_content_value"><span>{{lwDataTotal}}</span> 人</div>
|
||||
<p>{{staffText}}</p>
|
||||
</div>
|
||||
</el-col>
|
||||
<el-col :span="16">
|
||||
<div style="height: 380px;" ref="chart"></div>
|
||||
</el-col>
|
||||
</el-row>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</transition>
|
||||
</div>
|
||||
|
||||
`,
|
||||
props: {
|
||||
|
||||
},
|
||||
data() {
|
||||
return {
|
||||
show:false,
|
||||
projectId:JSON.parse(localStorage.getItem("data1")).id,
|
||||
nav:1,
|
||||
surveyUrl: '/images/survey_icon_5.png',
|
||||
staffText: '今日出勤',
|
||||
lwDataTotal:0,
|
||||
option:{}
|
||||
}
|
||||
},
|
||||
mounted(){
|
||||
|
||||
},
|
||||
methods: {
|
||||
openAmplify() {
|
||||
this.show = true
|
||||
this.getLWData(1)
|
||||
},
|
||||
closeAmplify() {
|
||||
this.show = false
|
||||
},
|
||||
closeAmplifyAll(e) {
|
||||
if (e.target.className == 'amplify-fixed') {
|
||||
this.show = false
|
||||
}
|
||||
},
|
||||
onInfoNav(n, text) {
|
||||
this.nav = n
|
||||
this.staffText = text
|
||||
this.getLWData(n)
|
||||
if (n == 0) {
|
||||
this.surveyUrl = '../../images/survey_icon_4.png'
|
||||
} else {
|
||||
this.surveyUrl = '../../images/survey_icon_5.png'
|
||||
}
|
||||
},
|
||||
|
||||
//劳务人员概况
|
||||
getLWData(infoNav) {
|
||||
axios.post("https://smz.makalu.cc/mkl/screenApi/getAllUserData?token=" + JSON.parse(localStorage.getItem("data1")).smz_token
|
||||
+ "&deptId=123&typtDeptId=" + JSON.parse(localStorage.getItem("data1")).dept_id + "&typtProjectId=" + JSON.parse(localStorage.getItem("data1")).id, {}).then(res => {
|
||||
this.lwLoading = false;
|
||||
var laborPersonnelData = [];
|
||||
if (infoNav == 0) {
|
||||
laborPersonnelData.push({text: "特种作业人员", value: res.data.userInfo.specialTotal, type: 2})
|
||||
laborPersonnelData.push({text: "劳务人员(不含特种人员)", value: res.data.userInfo.unSpecialTotal, type: 1})
|
||||
laborPersonnelData.push({text: "管理人员", value: res.data.userInfo.glrs, type: 0})
|
||||
this.lwDataTotal = res.data.zgrs
|
||||
} else {
|
||||
laborPersonnelData.push({text: "特种作业人员", value: res.data.cqUserInfo.specialTotal, type: 2})
|
||||
laborPersonnelData.push({text: "劳务人员(不含特种人员)", value: res.data.cqUserInfo.unSpecialTotal, type: 1})
|
||||
laborPersonnelData.push({text: "管理人员", value: res.data.cqUserInfo.glrs, type: 0})
|
||||
this.lwDataTotal = res.data.rcrs
|
||||
}
|
||||
this.$nextTick(() => {
|
||||
this.echart(laborPersonnelData)
|
||||
})
|
||||
}).catch(err => {
|
||||
})
|
||||
|
||||
},
|
||||
|
||||
echart(chartData){
|
||||
var chChart = echarts.init(this.$refs.chart);
|
||||
let newPromise = new Promise((resolve) => {
|
||||
resolve()
|
||||
})
|
||||
//然后异步执行echarts的初始化函数
|
||||
newPromise.then(() => {
|
||||
|
||||
var value = []
|
||||
var text = []
|
||||
var bgData = []
|
||||
var total = 0
|
||||
for (let i = 0; i < chartData.length; i++) {
|
||||
value.push(chartData[i].value)
|
||||
text.push(chartData[i].text)
|
||||
bgData.push(100)
|
||||
total += chartData[i].value
|
||||
}
|
||||
|
||||
var prop = []
|
||||
for (let j = 0; j < value.length; j++) {
|
||||
if(total == 0){
|
||||
prop.push(0)
|
||||
}else{
|
||||
prop.push((value[j]/total * 100).toFixed(1))
|
||||
}
|
||||
}
|
||||
|
||||
this.option = {
|
||||
grid: {
|
||||
left: "5%",
|
||||
right: "5%",
|
||||
bottom: "0%",
|
||||
top: "0%",
|
||||
containLabel: true,
|
||||
},
|
||||
xAxis: [
|
||||
{
|
||||
show: false,
|
||||
},
|
||||
//由于下边X轴已经是百分比刻度了,所以需要在顶部加一个X轴,刻度是金额,也隐藏掉
|
||||
{
|
||||
show: false,
|
||||
}
|
||||
],
|
||||
yAxis: [
|
||||
{
|
||||
type: 'category',
|
||||
axisLabel: {
|
||||
show: false, //让Y轴数据不显示
|
||||
},
|
||||
itemStyle: {
|
||||
|
||||
},
|
||||
axisTick: {
|
||||
show: false, //隐藏Y轴刻度
|
||||
},
|
||||
axisLine: {
|
||||
show: false, //隐藏Y轴线段
|
||||
},
|
||||
data: [],
|
||||
},{
|
||||
show: false,
|
||||
data: [],
|
||||
axisLine: {
|
||||
show: false
|
||||
}
|
||||
}],
|
||||
series: [
|
||||
//数据条--------------------我是分割线君------------------------------//
|
||||
{
|
||||
show: true,
|
||||
type: 'bar',
|
||||
xAxisIndex: 1, //代表使用第二个X轴刻度!!!!!!!!!!!!!!!!!!!!!!!!
|
||||
barGap: '-100%',
|
||||
barWidth: '20', //统计条宽度
|
||||
itemStyle: {
|
||||
normal: {
|
||||
color: 'rgba(22,203,115,0.05)'
|
||||
},
|
||||
},
|
||||
label: {
|
||||
normal: {
|
||||
show: true,
|
||||
//label 的position位置可以是top bottom left,right,也可以是固定值
|
||||
//在这里需要上下统一对齐,所以用固定值
|
||||
position: [0, '-40'],
|
||||
rich: { //富文本
|
||||
prop: { //自定义颜色
|
||||
color: '#c6d9fa',
|
||||
fontSize:'25',
|
||||
},
|
||||
unit:{
|
||||
color: '#6c829a',
|
||||
fontSize:'25',
|
||||
},
|
||||
yes:{
|
||||
color: '#55adf7',
|
||||
fontSize:'25',
|
||||
},
|
||||
not:{
|
||||
color: '#4677fa',
|
||||
fontSize:'25',
|
||||
},
|
||||
index:{
|
||||
color: '#fcbc02',
|
||||
fontStyle: 'italic',
|
||||
padding:[0,0,0,5],
|
||||
fontSize:'25',
|
||||
},
|
||||
name: {
|
||||
width: 350,
|
||||
color: '#c6d9fa',
|
||||
padding:[0,0,0,10],
|
||||
fontSize:'25',
|
||||
},
|
||||
color:{
|
||||
color: '#8ca2be',
|
||||
fontSize:'20',
|
||||
|
||||
},
|
||||
arrow:{
|
||||
width:20,
|
||||
height:15,
|
||||
backgroundColor: {
|
||||
image: "/cdn/images/WEB_2B7C06210CD44D55BFEE6205A35DE4A7.png",
|
||||
},
|
||||
},
|
||||
|
||||
},
|
||||
formatter: function(data) {
|
||||
//富文本固定格式{colorName|这里填你想要写的内容}
|
||||
//return '{arrow|}'
|
||||
return '{arrow|}{name|' + text[data.dataIndex] + '}{prop|' + value[data.dataIndex] + '}{color| 人} {prop|'+prop[data.dataIndex]+'}{color| %} ';
|
||||
},
|
||||
}
|
||||
},
|
||||
data: bgData,
|
||||
},
|
||||
{
|
||||
type: "bar",
|
||||
zlevel: 1,
|
||||
itemStyle: {
|
||||
normal: {
|
||||
color: "#6ab9fe",
|
||||
},
|
||||
},
|
||||
|
||||
barWidth: 15,
|
||||
data: prop,
|
||||
},
|
||||
{
|
||||
type: "bar",
|
||||
barWidth: 15,
|
||||
barGap: "-100%",
|
||||
data: bgData,
|
||||
itemStyle: {
|
||||
normal: {
|
||||
color: "rgba(24,31,68,1)",
|
||||
},
|
||||
},
|
||||
},
|
||||
],
|
||||
};
|
||||
|
||||
chChart.setOption(this.option);
|
||||
window.onresize = chChart.resize;
|
||||
})
|
||||
},
|
||||
},
|
||||
watch:{
|
||||
|
||||
},
|
||||
})
|
||||
|
||||
|
||||
|
|
@ -1,220 +0,0 @@
|
|||
import Vue from 'vue'
|
||||
var vms = Vue.component("amplify-nlhx", {
|
||||
template: `
|
||||
<div>
|
||||
<div class="amplify-title-icon">
|
||||
<img src="/cdn/images/WEB_DBD5893450984E50AFF356EF44FF4139.png" @click="openAmplify">
|
||||
</div>
|
||||
<transition name="el-zoom-in-top">
|
||||
<div class="amplify-fixed" v-show="show" style="display: none" @click="closeAmplifyAll">
|
||||
<div class="amplify-max">
|
||||
<div class="amplify-title">
|
||||
<div>年龄画像</div>
|
||||
<div class="amplify-close" @click="closeAmplify"><i class="el-icon-close"></i></div>
|
||||
</div>
|
||||
<div class="amplify-content">
|
||||
<!--内容区域-->
|
||||
<!--年龄画像-单位-->
|
||||
<div class="amplify-time-study-title">
|
||||
<div class="amplify-glr-login-rate">
|
||||
<div>单位：%</div>
|
||||
</div>
|
||||
</div>
|
||||
<!--折线图-->
|
||||
<div class="amplify-time-study-title">
|
||||
<div class="amplify-foldline" ref="chart"></div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</transition>
|
||||
</div>
|
||||
`,
|
||||
props: {
|
||||
|
||||
},
|
||||
data() {
|
||||
return {
|
||||
show:false,
|
||||
ageStudyData: {},
|
||||
}
|
||||
},
|
||||
mounted(){
|
||||
|
||||
},
|
||||
methods: {
|
||||
openAmplify(){
|
||||
this.show = true
|
||||
this.getAgeData()
|
||||
},
|
||||
closeAmplify(){
|
||||
this.show = false
|
||||
},
|
||||
closeAmplifyAll(e){
|
||||
if(e.target.className == 'amplify-fixed'){
|
||||
this.show = false
|
||||
}
|
||||
},
|
||||
getAgeData() {
|
||||
axios.post("https://smz.makalu.cc/mkl/screenApi/getCqAgeData2?token=" + JSON.parse(localStorage.getItem("data1")).smz_token + "&deptId=123&typtDeptId=" + JSON.parse(localStorage.getItem("data1")).dept_id + "&typtProjectId=" + JSON.parse(localStorage.getItem("data1")).id, {}).then(res => {
|
||||
var ageStudyData = {};
|
||||
ageStudyData.xAxis = ["18以下", "18-29", "30-39", "40-49", "50以上"];
|
||||
ageStudyData.seriesName = "年龄分布占比";
|
||||
if (res.data.code != "-1") {
|
||||
var ageData = res.data.ageData;
|
||||
var data = [ageData.shiqizb, ageData.shibazb, ageData.sanshizb, ageData.sishizb, ageData.wushiupzb];
|
||||
ageStudyData.data = data;
|
||||
}
|
||||
this.ageStudyData = ageStudyData;
|
||||
this.getChartData()
|
||||
}).catch(err => {
|
||||
})
|
||||
},
|
||||
// 折线图
|
||||
getChartData(){
|
||||
var chChartBar = echarts.init(this.$refs.chart);
|
||||
this.echartBar(chChartBar,this.ageStudyData)
|
||||
},
|
||||
echartBar(chChart,data){
|
||||
let newPromise = new Promise((resolve) => {
|
||||
resolve()
|
||||
})
|
||||
//然后异步执行echarts的初始化函数
|
||||
newPromise.then(() => {
|
||||
this.option = {
|
||||
grid: {
|
||||
top:'10%',
|
||||
left: "2%",
|
||||
right: "0%",
|
||||
bottom: "0%",
|
||||
containLabel: true,
|
||||
},
|
||||
tooltip: {
|
||||
trigger: "axis",
|
||||
formatter: function (params) {
|
||||
return (params[0].seriesName+"<br/>"
|
||||
+params[0].name +"："+ params[0].data + "%")
|
||||
},
|
||||
},
|
||||
xAxis: {
|
||||
type: "category",
|
||||
data: data.xAxis,
|
||||
axisLine: {
|
||||
//坐标轴轴线相关设置。数学上的x轴
|
||||
show: true,
|
||||
lineStyle: {
|
||||
color: "#25597e",
|
||||
type: "dashed",
|
||||
},
|
||||
},
|
||||
axisTick: {
|
||||
show: false
|
||||
},
|
||||
rich:{
|
||||
fontSize:25
|
||||
},
|
||||
axisLabel: {
|
||||
//坐标轴刻度标签的相关设置
|
||||
textStyle: {
|
||||
color: "#c5d9fc",
|
||||
margin: 30,
|
||||
fontSize:25
|
||||
},
|
||||
|
||||
},
|
||||
},
|
||||
yAxis: {
|
||||
type: "value",
|
||||
axisLine: {
|
||||
//坐标轴轴线相关设置。数学上的x轴
|
||||
show: false,
|
||||
lineStyle: {
|
||||
color: "#c5d9fc",
|
||||
type: "dashed",
|
||||
},
|
||||
},
|
||||
axisTick: {
|
||||
show: false
|
||||
},
|
||||
rich:{
|
||||
fontSize:25
|
||||
},
|
||||
axisLabel: {
|
||||
show: true,
|
||||
//坐标轴刻度标签的相关设置
|
||||
textStyle: {
|
||||
color: "#c5d9fc",
|
||||
margin: 30,
|
||||
fontSize:25
|
||||
},
|
||||
},
|
||||
splitLine: {
|
||||
show: true,
|
||||
lineStyle: {
|
||||
color: "#25597e",
|
||||
type: "dashed",
|
||||
},
|
||||
},
|
||||
},
|
||||
series: [
|
||||
{
|
||||
name: data.seriesName,
|
||||
type: "pictorialBar",
|
||||
barCategoryGap: "0%",
|
||||
label: {
|
||||
normal: {
|
||||
show: true,
|
||||
position: "top",
|
||||
color:"#fff",
|
||||
fontSize:25
|
||||
},
|
||||
},
|
||||
|
||||
//symbol: 'path://M0,10 L10,10 L5,0 L0,10 z',
|
||||
symbol: "path://M0,10 L10,10 C5.5,10 5.5,5 5,0 C4.5,5 4.5,10 0,10 z",
|
||||
|
||||
|
||||
itemStyle: {
|
||||
normal: {
|
||||
color: {
|
||||
type: "linear",
|
||||
x: 0,
|
||||
y: 0,
|
||||
x2: 0,
|
||||
y2: 1,
|
||||
colorStops: [
|
||||
{
|
||||
offset: 0,
|
||||
color: "rgba(15,133,224,0.2)", // 0% 处的颜色
|
||||
},
|
||||
{
|
||||
offset: 0.9,
|
||||
color: "rgba(15,133,224,0.8)", // 100% 处的颜色
|
||||
},
|
||||
],
|
||||
global: false, // 缺省为 false
|
||||
},
|
||||
},
|
||||
emphasis: {
|
||||
opacity: 1,
|
||||
},
|
||||
},
|
||||
data: data.data,
|
||||
z: 10,
|
||||
},
|
||||
],
|
||||
};
|
||||
chChart.setOption(this.option);
|
||||
window.onresize = chChart.resize;
|
||||
})
|
||||
},
|
||||
},
|
||||
|
||||
|
||||
watch:{
|
||||
|
||||
},
|
||||
|
||||
})
|
||||
|
||||
|
||||
|
|
@ -1,914 +0,0 @@
|
|||
import Vue from 'vue'
|
||||
var vms = Vue.component("amplify-rycqfb", {
|
||||
template: `
|
||||
<div>
|
||||
<div class="amplify-title-icon">
|
||||
<img src="/cdn/images/WEB_DBD5893450984E50AFF356EF44FF4139.png" @click="openAmplify">
|
||||
</div>
|
||||
<transition name="el-zoom-in-top">
|
||||
<div class="amplify-fixed" v-show="show" style="display: none" @click="closeAmplifyAll">
|
||||
<div class="amplify-max">
|
||||
<div class="amplify-title">
|
||||
<div>人员出勤分布</div>
|
||||
<div class="amplify-close" @click="closeAmplify"><i class="el-icon-close"></i></div>
|
||||
</div>
|
||||
<div class="amplify-content">
|
||||
<!--内容区域-->
|
||||
<div class="amplify-distribution">
|
||||
<div class="amplify-distributionsmallbox" ref="anlifychart"></div>
|
||||
<div class="amplify-distributionsmallbox" ref="anlifychart1"></div>
|
||||
<div class="amplify-distributionsmallbox" ref="anlifychart3"></div>
|
||||
<div class="amplify-distributionsmallbox" ref="anlifychart2"></div>
|
||||
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</transition>
|
||||
</div>
|
||||
`,
|
||||
props: {
|
||||
|
||||
},
|
||||
data() {
|
||||
return {
|
||||
width:760,
|
||||
workData_1:[{ text:"白名单（7天出勤人数，包含7天）", value:0 }],
|
||||
//workData_2:[{ text:"灰名单（4-10天内出勤人数）", value:0 }],
|
||||
workData_3:[{ text:"灰名单（超过7天未出勤人数，不包含7天）", value:0 }],
|
||||
workData_4:[{ text:"临时人员（打突击线上教育人员）", value:0 }],
|
||||
workData_5:[{ text:"退场人员", value:0 }],
|
||||
workMax: 0,
|
||||
show:false,
|
||||
projectId:JSON.parse(localStorage.getItem("data1")).id,
|
||||
}
|
||||
},
|
||||
mounted(){
|
||||
},
|
||||
methods: {
|
||||
openAmplify(){
|
||||
this.show = true
|
||||
this.getActivePeopleNum1()
|
||||
},
|
||||
closeAmplify(){
|
||||
this.show = false
|
||||
},
|
||||
closeAmplifyAll(e){
|
||||
if(e.target.className == 'amplify-fixed'){
|
||||
this.show = false
|
||||
}
|
||||
},
|
||||
//人员出勤分布接口
|
||||
getActivePeopleNum1(){
|
||||
axios.post("https://smz.makalu.cc/mkl/screenApi/getUnCqUserList?token="+JSON.parse(localStorage.getItem("data1")).smz_token+"&maxDay=6&deptId=123&typtDeptId="+JSON.parse(localStorage.getItem("data1")).dept_id+"&typtProjectId="+JSON.parse(localStorage.getItem("data1")).id, {
|
||||
}).then(res => {
|
||||
if(res.data.state == "OK"){
|
||||
var max = this.workMax;
|
||||
if(res.data.data.length > max){
|
||||
this.workMax = res.data.data.length;
|
||||
}
|
||||
|
||||
this.workData_1 = [{ text:"白名单（7天出勤人数，包含7天）", value:res.data.data.length }];
|
||||
}else{
|
||||
this.workData_1 = [{ text:"白名单（7天出勤人数，包含7天）", value:0 }];
|
||||
}
|
||||
this.getChartData()
|
||||
axios.post("https://smz.makalu.cc/mkl/screenApi/getUnCqUserList?token="+JSON.parse(localStorage.getItem("data1")).smz_token+"&dayNum=7&deptId=123&typtDeptId="+JSON.parse(localStorage.getItem("data1")).dept_id+"&typtProjectId="+JSON.parse(localStorage.getItem("data1")).id, {
|
||||
}).then(res => {
|
||||
if(res.data.state == "OK"){
|
||||
var max = this.workMax;
|
||||
if(res.data.data.length > max){
|
||||
this.workMax = res.data.data.length;
|
||||
}
|
||||
this.workData_3 = [{ text:"灰名单（超过7天未出勤人数，不包含7天）", value:res.data.data.length }];
|
||||
}else{
|
||||
this.workData_3 = [{ text:"灰名单（超过7天未出勤人数，不包含7天）", value:0 }];
|
||||
}
|
||||
this.getChartData1()
|
||||
axios.post("https://smz.makalu.cc/mkl/screenApi/getUserInfoTempList?token="+JSON.parse(localStorage.getItem("data1")).smz_token+"&isWork=1&deptId=123&typtDeptId="+JSON.parse(localStorage.getItem("data1")).dept_id+"&typtProjectId="+JSON.parse(localStorage.getItem("data1")).id, {
|
||||
}).then(res => {
|
||||
if(res.data.state == "OK"){
|
||||
var max = this.workMax;
|
||||
if(res.data.data.length > max){
|
||||
this.workMax = res.data.data.length;
|
||||
}
|
||||
this.workData_4 = [{ text:"临时人员（打突击线上教育人员）", value:res.data.data.length}];
|
||||
}else{
|
||||
this.workData_4 = [{ text:"临时人员（打突击线上教育人员）", value:0 }];
|
||||
}
|
||||
this.getChartData2()
|
||||
axios.post("https://smz.makalu.cc/mkl/screenApi/getUserInfoList?token="+JSON.parse(localStorage.getItem("data1")).smz_token+"&isWork=2&deptId=123&typtDeptId="+JSON.parse(localStorage.getItem("data1")).dept_id+"&typtProjectId="+JSON.parse(localStorage.getItem("data1")).id, {
|
||||
}).then(res => {
|
||||
if(res.data.state == "OK"){
|
||||
var max = this.workMax;
|
||||
if(res.data.data.length > max){
|
||||
this.workMax = res.data.data.length;
|
||||
}
|
||||
this.workData_5 = [{ text:"退场人员", value:res.data.data.length }];
|
||||
}else{
|
||||
this.workData_5 = [{ text:"退场人员", value:0 }];
|
||||
}
|
||||
this.getChartData3()
|
||||
}).catch(err => {
|
||||
})
|
||||
}).catch(err => {
|
||||
})
|
||||
}).catch(err => {
|
||||
})
|
||||
}).catch(err => {
|
||||
})
|
||||
|
||||
|
||||
|
||||
},
|
||||
//出勤情况-白名单
|
||||
getChartData(){
|
||||
//品类金额占比 饼图
|
||||
var chChart = echarts.init(this.$refs.anlifychart);
|
||||
this.echart1(chChart,this.workData_1)
|
||||
},
|
||||
//出勤情况-灰名单
|
||||
getChartData1(){
|
||||
//品类金额占比 饼图
|
||||
var chChart = echarts.init(this.$refs.anlifychart1);
|
||||
this.echart2(chChart,this.workData_3)
|
||||
},
|
||||
//出勤情况-临时人员
|
||||
getChartData2(){
|
||||
//品类金额占比 饼图
|
||||
var chChart = echarts.init(this.$refs.anlifychart2);
|
||||
this.echart3(chChart,this.workData_4)
|
||||
},
|
||||
//出勤情况-在线人员
|
||||
getChartData3(){
|
||||
//品类金额占比 饼图
|
||||
var chChart = echarts.init(this.$refs.anlifychart3);
|
||||
this.echart4(chChart,this.workData_5)
|
||||
},
|
||||
//出勤情况-白名单
|
||||
echart1(chChart,chartData){
|
||||
var that = this
|
||||
let newPromise = new Promise((resolve) => {
|
||||
resolve()
|
||||
})
|
||||
//然后异步执行echarts的初始化函数
|
||||
newPromise.then(() => {
|
||||
|
||||
var value = []
|
||||
var text = []
|
||||
var bgData = []
|
||||
var total = 0
|
||||
for (let i = 0; i < chartData.length; i++) {
|
||||
value.push(chartData[i].value)
|
||||
text.push(chartData[i].text)
|
||||
bgData.push(100)
|
||||
if(this.workMax){
|
||||
total = this.workMax
|
||||
}else{
|
||||
total += chartData[i].value
|
||||
}
|
||||
}
|
||||
|
||||
var prop = []
|
||||
for (let j = 0; j < value.length; j++) {
|
||||
if(total == 0){
|
||||
prop.push(0)
|
||||
}else{
|
||||
prop.push((value[j]/total * 100).toFixed(1))
|
||||
}
|
||||
}
|
||||
var unit = '人'
|
||||
if(this.unit){
|
||||
unit = this.unit
|
||||
}
|
||||
|
||||
|
||||
this.option = {
|
||||
grid: {
|
||||
left: "5%",
|
||||
right: "5%",
|
||||
bottom: "0%",
|
||||
top: "0%",
|
||||
containLabel: true,
|
||||
},
|
||||
xAxis: [{
|
||||
show: false,
|
||||
},
|
||||
//由于下边X轴已经是百分比刻度了,所以需要在顶部加一个X轴,刻度是金额,也隐藏掉
|
||||
{
|
||||
show: false,
|
||||
}
|
||||
],
|
||||
yAxis: [
|
||||
{
|
||||
type: 'category',
|
||||
axisLabel: {
|
||||
show: false, //让Y轴数据不显示
|
||||
},
|
||||
itemStyle: {
|
||||
|
||||
},
|
||||
axisTick: {
|
||||
show: false, //隐藏Y轴刻度
|
||||
},
|
||||
axisLine: {
|
||||
show: false, //隐藏Y轴线段
|
||||
},
|
||||
data: [],
|
||||
},{
|
||||
show: false,
|
||||
data: [],
|
||||
axisLine: {
|
||||
show: false
|
||||
}
|
||||
}],
|
||||
series: [
|
||||
//数据条--------------------我是分割线君------------------------------//
|
||||
{
|
||||
show: true,
|
||||
type: 'bar',
|
||||
xAxisIndex: 1, //代表使用第二个X轴刻度!!!!!!!!!!!!!!!!!!!!!!!!
|
||||
barGap: '-100%',
|
||||
barWidth: '20', //统计条宽度
|
||||
itemStyle: {
|
||||
normal: {
|
||||
color: 'rgba(22,203,115,0.05)'
|
||||
},
|
||||
},
|
||||
label: {
|
||||
normal: {
|
||||
show: true,
|
||||
//label 的position位置可以是top bottom left,right,也可以是固定值
|
||||
//在这里需要上下统一对齐,所以用固定值
|
||||
position: [0, '-40'],
|
||||
rich: { //富文本
|
||||
prop: { //自定义颜色
|
||||
color: '#c6d9fa',
|
||||
fontSize:'25',
|
||||
},
|
||||
unit:{
|
||||
color: '#6c829a',
|
||||
fontSize:'25',
|
||||
},
|
||||
yes:{
|
||||
color: '#55adf7',
|
||||
fontSize:'25',
|
||||
},
|
||||
not:{
|
||||
color: '#4677fa',
|
||||
fontSize:'25',
|
||||
},
|
||||
index:{
|
||||
color: '#fcbc02',
|
||||
fontStyle: 'italic',
|
||||
padding:[0,0,0,5],
|
||||
fontSize:'25',
|
||||
},
|
||||
name: {
|
||||
width: this.width,
|
||||
color: '#c6d9fa',
|
||||
padding:[0,0,0,5],
|
||||
fontSize:'25',
|
||||
},
|
||||
color:{
|
||||
color: '#8ca2be',
|
||||
fontSize:'20',
|
||||
},
|
||||
arrow:{
|
||||
width:20,
|
||||
height:15,
|
||||
backgroundColor: {
|
||||
image: "/cdn/images/WEB_2B7C06210CD44D55BFEE6205A35DE4A7.png",
|
||||
},
|
||||
},
|
||||
|
||||
},
|
||||
formatter: function(data) {
|
||||
//富文本固定格式{colorName|这里填你想要写的内容}
|
||||
//return '{arrow|}'
|
||||
if(that.show == true){
|
||||
return '{arrow|}{name|' + text[data.dataIndex] + '}{prop|' + value[data.dataIndex] + '}{color| '+unit+'}';
|
||||
}else{
|
||||
return '{arrow|}{name|' + text[data.dataIndex] + '}{prop|' + value[data.dataIndex] + '}{color| '+unit+'} {prop|'+prop[data.dataIndex]+'}{color| %} ';
|
||||
}
|
||||
|
||||
},
|
||||
}
|
||||
},
|
||||
data: bgData,
|
||||
},
|
||||
{
|
||||
type: "bar",
|
||||
zlevel: 1,
|
||||
itemStyle: {
|
||||
normal: {
|
||||
color: "#6ab9fe",
|
||||
},
|
||||
},
|
||||
barWidth: 20,
|
||||
data: prop,
|
||||
},
|
||||
{
|
||||
type: "bar",
|
||||
barWidth: 20,
|
||||
barGap: "-100%",
|
||||
data: bgData,
|
||||
itemStyle: {
|
||||
normal: {
|
||||
color: "rgba(24,31,68,1)",
|
||||
},
|
||||
},
|
||||
},
|
||||
],
|
||||
};
|
||||
|
||||
chChart.setOption(this.option);
|
||||
window.onresize = chChart.resize;
|
||||
|
||||
chChart.off('click')
|
||||
|
||||
chChart.on('click', function (params) {
|
||||
that.$emit('personnel',params.dataIndex);
|
||||
})
|
||||
})
|
||||
},
|
||||
//出勤情况-灰名单
|
||||
echart2(chChart,chartData){
|
||||
var that = this
|
||||
let newPromise = new Promise((resolve) => {
|
||||
resolve()
|
||||
})
|
||||
//然后异步执行echarts的初始化函数
|
||||
newPromise.then(() => {
|
||||
|
||||
var value = []
|
||||
var text = []
|
||||
var bgData = []
|
||||
var total = 0
|
||||
for (let i = 0; i < chartData.length; i++) {
|
||||
value.push(chartData[i].value)
|
||||
text.push(chartData[i].text)
|
||||
bgData.push(100)
|
||||
if(this.workMax){
|
||||
total = this.workMax
|
||||
}else{
|
||||
total += chartData[i].value
|
||||
}
|
||||
}
|
||||
|
||||
var prop = []
|
||||
for (let j = 0; j < value.length; j++) {
|
||||
if(total == 0){
|
||||
prop.push(0)
|
||||
}else{
|
||||
prop.push((value[j]/total * 100).toFixed(1))
|
||||
}
|
||||
}
|
||||
var unit = '人'
|
||||
if(this.unit){
|
||||
unit = this.unit
|
||||
}
|
||||
|
||||
|
||||
this.option = {
|
||||
grid: {
|
||||
left: "5%",
|
||||
right: "5%",
|
||||
bottom: "0%",
|
||||
top: "0%",
|
||||
containLabel: true,
|
||||
},
|
||||
xAxis: [{
|
||||
show: false,
|
||||
},
|
||||
//由于下边X轴已经是百分比刻度了,所以需要在顶部加一个X轴,刻度是金额,也隐藏掉
|
||||
{
|
||||
show: false,
|
||||
}
|
||||
],
|
||||
yAxis: [
|
||||
{
|
||||
type: 'category',
|
||||
axisLabel: {
|
||||
show: false, //让Y轴数据不显示
|
||||
},
|
||||
itemStyle: {
|
||||
|
||||
},
|
||||
axisTick: {
|
||||
show: false, //隐藏Y轴刻度
|
||||
},
|
||||
axisLine: {
|
||||
show: false, //隐藏Y轴线段
|
||||
},
|
||||
data: [],
|
||||
},{
|
||||
show: false,
|
||||
data: [],
|
||||
axisLine: {
|
||||
show: false
|
||||
}
|
||||
}],
|
||||
series: [
|
||||
//数据条--------------------我是分割线君------------------------------//
|
||||
{
|
||||
show: true,
|
||||
type: 'bar',
|
||||
xAxisIndex: 1, //代表使用第二个X轴刻度!!!!!!!!!!!!!!!!!!!!!!!!
|
||||
barGap: '-100%',
|
||||
barWidth: '20', //统计条宽度
|
||||
itemStyle: {
|
||||
normal: {
|
||||
color: 'rgba(22,203,115,0.05)'
|
||||
},
|
||||
},
|
||||
label: {
|
||||
normal: {
|
||||
show: true,
|
||||
//label 的position位置可以是top bottom left,right,也可以是固定值
|
||||
//在这里需要上下统一对齐,所以用固定值
|
||||
position: [0, '-40'],
|
||||
rich: { //富文本
|
||||
prop: { //自定义颜色
|
||||
color: '#c6d9fa',
|
||||
fontSize:'25',
|
||||
},
|
||||
unit:{
|
||||
color: '#6c829a',
|
||||
fontSize:'25',
|
||||
},
|
||||
yes:{
|
||||
color: '#55adf7',
|
||||
fontSize:'25',
|
||||
},
|
||||
not:{
|
||||
color: '#4677fa',
|
||||
fontSize:'25',
|
||||
},
|
||||
index:{
|
||||
color: '#fcbc02',
|
||||
fontStyle: 'italic',
|
||||
padding:[0,0,0,5],
|
||||
fontSize:'25',
|
||||
},
|
||||
name: {
|
||||
width: this.width,
|
||||
color: '#c6d9fa',
|
||||
padding:[0,0,0,5],
|
||||
fontSize:'25',
|
||||
},
|
||||
color:{
|
||||
color: '#8ca2be',
|
||||
fontSize:'20',
|
||||
},
|
||||
arrow:{
|
||||
width:20,
|
||||
height:15,
|
||||
backgroundColor: {
|
||||
image: "/cdn/images/WEB_2B7C06210CD44D55BFEE6205A35DE4A7.png",
|
||||
},
|
||||
},
|
||||
|
||||
},
|
||||
formatter: function(data) {
|
||||
//富文本固定格式{colorName|这里填你想要写的内容}
|
||||
//return '{arrow|}'
|
||||
if(that.show == true){
|
||||
return '{arrow|}{name|' + text[data.dataIndex] + '}{prop|' + value[data.dataIndex] + '}{color| '+unit+'}';
|
||||
}else{
|
||||
return '{arrow|}{name|' + text[data.dataIndex] + '}{prop|' + value[data.dataIndex] + '}{color| '+unit+'} {prop|'+prop[data.dataIndex]+'}{color| %} ';
|
||||
}
|
||||
|
||||
},
|
||||
}
|
||||
},
|
||||
data: bgData,
|
||||
},
|
||||
{
|
||||
type: "bar",
|
||||
zlevel: 1,
|
||||
itemStyle: {
|
||||
normal: {
|
||||
color: "#6ab9fe",
|
||||
},
|
||||
},
|
||||
barWidth: 20,
|
||||
data: prop,
|
||||
},
|
||||
{
|
||||
type: "bar",
|
||||
barWidth: 20,
|
||||
barGap: "-100%",
|
||||
data: bgData,
|
||||
itemStyle: {
|
||||
normal: {
|
||||
color: "rgba(24,31,68,1)",
|
||||
},
|
||||
},
|
||||
},
|
||||
],
|
||||
};
|
||||
|
||||
chChart.setOption(this.option);
|
||||
window.onresize = chChart.resize;
|
||||
|
||||
chChart.off('click')
|
||||
|
||||
chChart.on('click', function (params) {
|
||||
that.$emit('personnel',params.dataIndex);
|
||||
})
|
||||
})
|
||||
},
|
||||
//出勤情况-临时人员
|
||||
echart3(chChart,chartData){
|
||||
var that = this
|
||||
let newPromise = new Promise((resolve) => {
|
||||
resolve()
|
||||
})
|
||||
//然后异步执行echarts的初始化函数
|
||||
newPromise.then(() => {
|
||||
|
||||
var value = []
|
||||
var text = []
|
||||
var bgData = []
|
||||
var total = 0
|
||||
for (let i = 0; i < chartData.length; i++) {
|
||||
value.push(chartData[i].value)
|
||||
text.push(chartData[i].text)
|
||||
bgData.push(100)
|
||||
if(this.workMax){
|
||||
total = this.workMax
|
||||
}else{
|
||||
total += chartData[i].value
|
||||
}
|
||||
}
|
||||
|
||||
var prop = []
|
||||
for (let j = 0; j < value.length; j++) {
|
||||
if(total == 0){
|
||||
prop.push(0)
|
||||
}else{
|
||||
prop.push((value[j]/total * 100).toFixed(1))
|
||||
}
|
||||
}
|
||||
var unit = '人'
|
||||
if(this.unit){
|
||||
unit = this.unit
|
||||
}
|
||||
|
||||
|
||||
this.option = {
|
||||
grid: {
|
||||
left: "5%",
|
||||
right: "5%",
|
||||
bottom: "0%",
|
||||
top: "0%",
|
||||
containLabel: true,
|
||||
},
|
||||
xAxis: [{
|
||||
show: false,
|
||||
},
|
||||
//由于下边X轴已经是百分比刻度了,所以需要在顶部加一个X轴,刻度是金额,也隐藏掉
|
||||
{
|
||||
show: false,
|
||||
}
|
||||
],
|
||||
yAxis: [
|
||||
{
|
||||
type: 'category',
|
||||
axisLabel: {
|
||||
show: false, //让Y轴数据不显示
|
||||
},
|
||||
itemStyle: {
|
||||
|
||||
},
|
||||
axisTick: {
|
||||
show: false, //隐藏Y轴刻度
|
||||
},
|
||||
axisLine: {
|
||||
show: false, //隐藏Y轴线段
|
||||
},
|
||||
data: [],
|
||||
},{
|
||||
show: false,
|
||||
data: [],
|
||||
axisLine: {
|
||||
show: false
|
||||
}
|
||||
}],
|
||||
series: [
|
||||
//数据条--------------------我是分割线君------------------------------//
|
||||
{
|
||||
show: true,
|
||||
type: 'bar',
|
||||
xAxisIndex: 1, //代表使用第二个X轴刻度!!!!!!!!!!!!!!!!!!!!!!!!
|
||||
barGap: '-100%',
|
||||
barWidth: '20', //统计条宽度
|
||||
itemStyle: {
|
||||
normal: {
|
||||
color: 'rgba(22,203,115,0.05)'
|
||||
},
|
||||
},
|
||||
label: {
|
||||
normal: {
|
||||
show: true,
|
||||
//label 的position位置可以是top bottom left,right,也可以是固定值
|
||||
//在这里需要上下统一对齐,所以用固定值
|
||||
position: [0, '-40'],
|
||||
rich: { //富文本
|
||||
prop: { //自定义颜色
|
||||
color: '#c6d9fa',
|
||||
fontSize:'25',
|
||||
},
|
||||
unit:{
|
||||
color: '#6c829a',
|
||||
fontSize:'25',
|
||||
},
|
||||
yes:{
|
||||
color: '#55adf7',
|
||||
fontSize:'25',
|
||||
},
|
||||
not:{
|
||||
color: '#4677fa',
|
||||
fontSize:'25',
|
||||
},
|
||||
index:{
|
||||
color: '#fcbc02',
|
||||
fontStyle: 'italic',
|
||||
padding:[0,0,0,5],
|
||||
fontSize:'25',
|
||||
},
|
||||
name: {
|
||||
width: this.width,
|
||||
color: '#c6d9fa',
|
||||
padding:[0,0,0,5],
|
||||
fontSize:'25',
|
||||
},
|
||||
color:{
|
||||
color: '#8ca2be',
|
||||
fontSize:'20',
|
||||
},
|
||||
arrow:{
|
||||
width:20,
|
||||
height:15,
|
||||
backgroundColor: {
|
||||
image: "/cdn/images/WEB_2B7C06210CD44D55BFEE6205A35DE4A7.png",
|
||||
},
|
||||
},
|
||||
|
||||
},
|
||||
formatter: function(data) {
|
||||
//富文本固定格式{colorName|这里填你想要写的内容}
|
||||
//return '{arrow|}'
|
||||
if(that.show == true){
|
||||
return '{arrow|}{name|' + text[data.dataIndex] + '}{prop|' + value[data.dataIndex] + '}{color| '+unit+'}';
|
||||
}else{
|
||||
return '{arrow|}{name|' + text[data.dataIndex] + '}{prop|' + value[data.dataIndex] + '}{color| '+unit+'} {prop|'+prop[data.dataIndex]+'}{color| %} ';
|
||||
}
|
||||
|
||||
},
|
||||
}
|
||||
},
|
||||
data: bgData,
|
||||
},
|
||||
{
|
||||
type: "bar",
|
||||
zlevel: 1,
|
||||
itemStyle: {
|
||||
normal: {
|
||||
color: "#6ab9fe",
|
||||
},
|
||||
},
|
||||
barWidth: 20,
|
||||
data: prop,
|
||||
},
|
||||
{
|
||||
type: "bar",
|
||||
barWidth: 20,
|
||||
barGap: "-100%",
|
||||
data: bgData,
|
||||
itemStyle: {
|
||||
normal: {
|
||||
color: "rgba(24,31,68,1)",
|
||||
},
|
||||
},
|
||||
},
|
||||
],
|
||||
};
|
||||
|
||||
chChart.setOption(this.option);
|
||||
window.onresize = chChart.resize;
|
||||
|
||||
chChart.off('click')
|
||||
|
||||
chChart.on('click', function (params) {
|
||||
that.$emit('personnel',params.dataIndex);
|
||||
})
|
||||
})
|
||||
},
|
||||
//出勤情况-在线人员
|
||||
echart4(chChart,chartData){
|
||||
var that = this
|
||||
let newPromise = new Promise((resolve) => {
|
||||
resolve()
|
||||
})
|
||||
//然后异步执行echarts的初始化函数
|
||||
newPromise.then(() => {
|
||||
|
||||
var value = []
|
||||
var text = []
|
||||
var bgData = []
|
||||
var total = 0
|
||||
for (let i = 0; i < chartData.length; i++) {
|
||||
value.push(chartData[i].value)
|
||||
text.push(chartData[i].text)
|
||||
bgData.push(100)
|
||||
if(this.workMax){
|
||||
total = this.workMax
|
||||
}else{
|
||||
total += chartData[i].value
|
||||
}
|
||||
}
|
||||
|
||||
var prop = []
|
||||
for (let j = 0; j < value.length; j++) {
|
||||
if(total == 0){
|
||||
prop.push(0)
|
||||
}else{
|
||||
prop.push((value[j]/total * 100).toFixed(1))
|
||||
}
|
||||
}
|
||||
var unit = '人'
|
||||
if(this.unit){
|
||||
unit = this.unit
|
||||
}
|
||||
|
||||
|
||||
this.option = {
|
||||
grid: {
|
||||
left: "5%",
|
||||
right: "5%",
|
||||
bottom: "0%",
|
||||
top: "0%",
|
||||
containLabel: true,
|
||||
},
|
||||
xAxis: [{
|
||||
show: false,
|
||||
},
|
||||
//由于下边X轴已经是百分比刻度了,所以需要在顶部加一个X轴,刻度是金额,也隐藏掉
|
||||
{
|
||||
show: false,
|
||||
}
|
||||
],
|
||||
yAxis: [
|
||||
{
|
||||
type: 'category',
|
||||
axisLabel: {
|
||||
show: false, //让Y轴数据不显示
|
||||
},
|
||||
itemStyle: {
|
||||
|
||||
},
|
||||
axisTick: {
|
||||
show: false, //隐藏Y轴刻度
|
||||
},
|
||||
axisLine: {
|
||||
show: false, //隐藏Y轴线段
|
||||
},
|
||||
data: [],
|
||||
},{
|
||||
show: false,
|
||||
data: [],
|
||||
axisLine: {
|
||||
show: false
|
||||
}
|
||||
}],
|
||||
series: [
|
||||
//数据条--------------------我是分割线君------------------------------//
|
||||
{
|
||||
show: true,
|
||||
type: 'bar',
|
||||
xAxisIndex: 1, //代表使用第二个X轴刻度!!!!!!!!!!!!!!!!!!!!!!!!
|
||||
barGap: '-100%',
|
||||
barWidth: '20', //统计条宽度
|
||||
itemStyle: {
|
||||
normal: {
|
||||
color: 'rgba(22,203,115,0.05)'
|
||||
},
|
||||
},
|
||||
label: {
|
||||
normal: {
|
||||
show: true,
|
||||
//label 的position位置可以是top bottom left,right,也可以是固定值
|
||||
//在这里需要上下统一对齐,所以用固定值
|
||||
position: [0, '-40'],
|
||||
rich: { //富文本
|
||||
prop: { //自定义颜色
|
||||
color: '#c6d9fa',
|
||||
fontSize:'25',
|
||||
},
|
||||
unit:{
|
||||
color: '#6c829a',
|
||||
fontSize:'25',
|
||||
},
|
||||
yes:{
|
||||
color: '#55adf7',
|
||||
fontSize:'25',
|
||||
},
|
||||
not:{
|
||||
color: '#4677fa',
|
||||
fontSize:'25',
|
||||
},
|
||||
index:{
|
||||
color: '#fcbc02',
|
||||
fontStyle: 'italic',
|
||||
padding:[0,0,0,5],
|
||||
fontSize:'25',
|
||||
},
|
||||
name: {
|
||||
width: this.width,
|
||||
color: '#c6d9fa',
|
||||
padding:[0,0,0,5],
|
||||
fontSize:'25',
|
||||
},
|
||||
color:{
|
||||
color: '#8ca2be',
|
||||
fontSize:'20',
|
||||
},
|
||||
arrow:{
|
||||
width:20,
|
||||
height:15,
|
||||
backgroundColor: {
|
||||
image: "/cdn/images/WEB_2B7C06210CD44D55BFEE6205A35DE4A7.png",
|
||||
},
|
||||
},
|
||||
|
||||
},
|
||||
formatter: function(data) {
|
||||
//富文本固定格式{colorName|这里填你想要写的内容}
|
||||
//return '{arrow|}'
|
||||
if(that.show == true){
|
||||
return '{arrow|}{name|' + text[data.dataIndex] + '}{prop|' + value[data.dataIndex] + '}{color| '+unit+'}';
|
||||
}else{
|
||||
return '{arrow|}{name|' + text[data.dataIndex] + '}{prop|' + value[data.dataIndex] + '}{color| '+unit+'} {prop|'+prop[data.dataIndex]+'}{color| %} ';
|
||||
}
|
||||
|
||||
},
|
||||
}
|
||||
},
|
||||
data: bgData,
|
||||
},
|
||||
{
|
||||
type: "bar",
|
||||
zlevel: 1,
|
||||
itemStyle: {
|
||||
normal: {
|
||||
color: "#6ab9fe",
|
||||
},
|
||||
},
|
||||
barWidth: 20,
|
||||
data: prop,
|
||||
},
|
||||
{
|
||||
type: "bar",
|
||||
barWidth: 20,
|
||||
barGap: "-100%",
|
||||
data: bgData,
|
||||
itemStyle: {
|
||||
normal: {
|
||||
color: "rgba(24,31,68,1)",
|
||||
},
|
||||
},
|
||||
},
|
||||
],
|
||||
};
|
||||
|
||||
chChart.setOption(this.option);
|
||||
window.onresize = chChart.resize;
|
||||
|
||||
chChart.off('click')
|
||||
|
||||
chChart.on('click', function (params) {
|
||||
that.$emit('personnel',params.dataIndex);
|
||||
})
|
||||
})
|
||||
},
|
||||
|
||||
},
|
||||
watch:{
|
||||
data: function (n,o) {
|
||||
this.getChartData()
|
||||
this.getChartData1()
|
||||
this.getChartData2()
|
||||
this.getChartData3()
|
||||
},
|
||||
max: function (n,o) {
|
||||
this.getChartData()
|
||||
this.getChartData1()
|
||||
this.getChartData2()
|
||||
this.getChartData3()
|
||||
}
|
||||
}
|
||||
})
|
||||
|
||||
|
||||
|
|
@ -1,154 +0,0 @@
|
|||
import Vue from 'vue'
|
||||
var vms = Vue.component("amplify-spjk", {
|
||||
template: `
|
||||
<div>
|
||||
<div class="amplify-title-icon">
|
||||
<img src="/cdn/images/WEB_DBD5893450984E50AFF356EF44FF4139.png" @click="openAmplify">
|
||||
</div>
|
||||
<transition name="el-zoom-in-top">
|
||||
<div class="amplify-fixed" v-show="show" style="display: none" @click="closeAmplifyAll">
|
||||
<div class="amplify-max">
|
||||
<div class="amplify-title">
|
||||
<div>视频监控</div>
|
||||
<div class="amplify-close" @click="closeAmplify"><i class="el-icon-close"></i></div>
|
||||
</div>
|
||||
<div class="amplify-content">
|
||||
<!--内容区域-->
|
||||
<div class="amplify-equipment-list-max">
|
||||
<el-row>
|
||||
<el-col :span="12">
|
||||
<div class="amplify-equipment-list-min">
|
||||
<div class="amplify-equipment-list-gif">
|
||||
<img src="/images/video_1.png">
|
||||
</div>
|
||||
<div class="amplify-equipment-list-data">
|
||||
<p>厂区监控</p>
|
||||
<div><span v-cloak>{{cqNum}}</span>个</div>
|
||||
</div>
|
||||
</div>
|
||||
</el-col>
|
||||
<el-col :span="12">
|
||||
<div class="amplify-equipment-list-min">
|
||||
<div class="amplify-equipment-list-gif">
|
||||
<img src="/images/video_2.png">
|
||||
</div>
|
||||
<div class="amplify-equipment-list-data">
|
||||
<p>吊钩监控</p>
|
||||
<div><span v-cloak>{{dgNum}}</span>个</div>
|
||||
</div>
|
||||
</div>
|
||||
</el-col>
|
||||
<el-col :span="12">
|
||||
<div class="amplify-equipment-list-min">
|
||||
<div class="amplify-equipment-list-gif">
|
||||
<img src="/images/video_3.png">
|
||||
</div>
|
||||
<div class="amplify-equipment-list-data">
|
||||
<p>AI智能监测</p>
|
||||
<div><span v-cloak>{{aiNum}}</span>个</div>
|
||||
</div>
|
||||
</div>
|
||||
</el-col>
|
||||
<el-col :span="12">
|
||||
<div class="amplify-equipment-list-min">
|
||||
<div class="amplify-equipment-list-gif">
|
||||
<img src="/images/video_4.png">
|
||||
</div>
|
||||
<div class="amplify-equipment-list-data">
|
||||
<p>离线视频</p>
|
||||
<div><span v-cloak>{{offLineNum}}</span>个</div>
|
||||
</div>
|
||||
</div>
|
||||
</el-col>
|
||||
</el-row>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</transition>
|
||||
</div>
|
||||
`,
|
||||
props: {
|
||||
|
||||
},
|
||||
data() {
|
||||
return {
|
||||
show:false,
|
||||
cqNum:0,
|
||||
dgNum:0,
|
||||
aiNum:0,
|
||||
offLineNum:0
|
||||
}
|
||||
},
|
||||
mounted(){
|
||||
|
||||
},
|
||||
methods: {
|
||||
openAmplify(){
|
||||
this.show = true
|
||||
this.getVideoOverview()
|
||||
},
|
||||
closeAmplify(){
|
||||
this.show = false
|
||||
},
|
||||
closeAmplifyAll(e){
|
||||
if(e.target.className == 'amplify-fixed'){
|
||||
this.show = false
|
||||
}
|
||||
},
|
||||
//视频概况
|
||||
getVideoOverview() {
|
||||
axios.get("https://video.makalu.cc/mkl/api/getVideoOverview?projectId="+JSON.parse(localStorage.getItem("data1")).spgk).then(res => {
|
||||
if(res.data != {}) {
|
||||
|
||||
this.cqNum = res.data.data.cqNum;
|
||||
this.dgNum = res.data.data.dgNum;
|
||||
this.aiNum = res.data.data.aiNum;
|
||||
this.offLineNum = res.data.data.offLineNum;
|
||||
|
||||
var data = [];
|
||||
var allVideoList = res.data.data.allVideoList;
|
||||
if(allVideoList){
|
||||
for(let i = 0;i < allVideoList.length;i++){
|
||||
var obj = {};
|
||||
obj.x = allVideoList[i].x
|
||||
obj.y = allVideoList[i].y
|
||||
obj.angle = allVideoList[i].angle
|
||||
obj.title = allVideoList[i].title
|
||||
obj.state = allVideoList[i].state
|
||||
obj.token = allVideoList[i].token
|
||||
if(allVideoList[i].videoSource == 1){
|
||||
obj.videoType = 'h5s'
|
||||
}else if(allVideoList[i].videoSource == 2){
|
||||
obj.videoType = 'hk'
|
||||
}else if(allVideoList[i].videoSource == 3){
|
||||
obj.videoType = 'hzhk'
|
||||
}
|
||||
data.push(obj)
|
||||
}
|
||||
}
|
||||
|
||||
var token = this.videoListData[0].videoList[0].token
|
||||
|
||||
|
||||
for (let i=0 ;i<data.length;i++){
|
||||
if(token==data[i].token){
|
||||
data[i].type = true
|
||||
}else{
|
||||
data[i].type = false
|
||||
}
|
||||
}
|
||||
|
||||
this.VideoDistribution = data
|
||||
}
|
||||
})
|
||||
},
|
||||
|
||||
},
|
||||
watch:{
|
||||
|
||||
},
|
||||
|
||||
})
|
||||
|
||||
|
||||
|
|
@ -1,137 +0,0 @@
|
|||
import Vue from 'vue'
|
||||
var vms = Vue.component("amplify-ghfw", {
|
||||
template: `
|
||||
<div>
|
||||
<div class="amplify-title-icon">
|
||||
<img src="/cdn/images/WEB_90022A49B38E4DA39DE4D8869D90A094.png" @click="openAmplify">
|
||||
</div>
|
||||
<transition name="el-zoom-in-top">
|
||||
<div class="amplify-fixed" v-show="show" style="display: none" @click="closeAmplifyAll">
|
||||
<div class="amplify-maxs" >
|
||||
<div class="amplify-titles" >
|
||||
<div v-html="modeltitle"></div>
|
||||
<div class="amplify-close" @click="closeAmplify"><i class="el-icon-close"></i></div>
|
||||
</div>
|
||||
<div class="amplify-contents" >
|
||||
<!--内容区域-->
|
||||
<!-- <div :style="{'height': height + 'px','width':width+'px'}" class="amplify-carousel-max" @mouseout="carouselMouseout" @mouseover="carouselMouseover">-->
|
||||
<!-- <div class="amplify-carousel-min" ref="carousel" :style="{'width':(width*forData.length)+'px','left':left+'px'}">-->
|
||||
<!-- <div class="amplify-carousel-for" :style="{'width':width+'px'}" v-for="(item,i) in forData">-->
|
||||
<!-- <img :src="item.url">-->
|
||||
<!-- <div class="amplify-carousel-text" :style="{'width':width+'px'}">{{item.text}}</div>-->
|
||||
<!-- </div>-->
|
||||
<!-- </div>-->
|
||||
<!-- <div>-->
|
||||
<!-- <div class="amplify-carousel-left" :style="{'left':arrowLeft+'px'}" @click="clickCtrl('right')"><img src="/images/carousel_left.png"></div>-->
|
||||
<!-- <div class="amplify-carousel-right" :style="{'right':arrowRight+'px'}" @click="clickCtrl('left')"><img src="/images/carousel_right.png"></div>-->
|
||||
<!-- </div>-->
|
||||
<!-- </div>-->
|
||||
|
||||
<div class="popup-project-introduction-details">
|
||||
<div class="popup-project-introduction-info">
|
||||
<el-row>
|
||||
<el-col :span="6" v-for="item in forData" style="padding: 10px;">
|
||||
<el-image style="width: 200px; height: 200px;" :src="item.url"
|
||||
:preview-src-list="datas"> </el-image>
|
||||
</el-col>
|
||||
</el-row>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</transition>
|
||||
</div>
|
||||
`,
|
||||
props: {
|
||||
modeltitle:{
|
||||
type:String
|
||||
},
|
||||
},
|
||||
data() {
|
||||
return {
|
||||
show: false,
|
||||
height: 510,
|
||||
width: 910,
|
||||
forData: [],
|
||||
arrowLeft: -45,
|
||||
arrowRight:-45,
|
||||
interval:undefined,
|
||||
left:0,
|
||||
direction:'left',
|
||||
projectId:JSON.parse(localStorage.getItem("data1")).id,
|
||||
datas:[]
|
||||
}
|
||||
},
|
||||
mounted() {
|
||||
|
||||
},
|
||||
methods: {
|
||||
openAmplify() {
|
||||
this.show = true
|
||||
this.getData()
|
||||
},
|
||||
closeAmplify() {
|
||||
this.show = false
|
||||
},
|
||||
closeAmplifyAll(e) {
|
||||
if (e.target.className == 'amplify-fixed') {
|
||||
this.show = false
|
||||
}
|
||||
},
|
||||
// 调用接口
|
||||
getData() {
|
||||
let that = this
|
||||
axios.get("/api/building/info?project_id=" + this.projectId).then(res => {
|
||||
let data = res.data.data
|
||||
let type = {}
|
||||
for (let info of data) {
|
||||
if (!type[info.sub_type]) {
|
||||
type[info.sub_type] = new Array()
|
||||
}
|
||||
info.url = (info.file_path.indexOf("https") != -1) ? info.file_path : info.file_src
|
||||
info.text = info.file_name
|
||||
type[info.sub_type].push(info)
|
||||
}
|
||||
that.forData = type[3];
|
||||
that.forData.map(item=>this.datas.push(item.url))
|
||||
}).catch(err => {
|
||||
|
||||
})
|
||||
},
|
||||
carouselMouseover() {
|
||||
this.arrowLeft = 10
|
||||
this.arrowRight = 10
|
||||
clearInterval(this.interval);
|
||||
},
|
||||
carouselMouseout() {
|
||||
this.arrowLeft = -30
|
||||
this.arrowRight = -30
|
||||
this.direction = 'left'
|
||||
this.interval = setInterval(this.timer, 3000);
|
||||
},
|
||||
clickCtrl(direction) {
|
||||
this.direction = direction
|
||||
this.timer()
|
||||
},
|
||||
timer() {
|
||||
if (this.direction == 'left') {
|
||||
this.left = this.left - this.width
|
||||
if (this.left == -((this.forData.length) * this.width)) {
|
||||
this.left = 0
|
||||
}
|
||||
} else {
|
||||
if (this.left == 0) {
|
||||
this.left = -((this.forData.length - 1) * this.width)
|
||||
} else {
|
||||
this.left = this.left + this.width
|
||||
}
|
||||
}
|
||||
},
|
||||
},
|
||||
watch: {}
|
||||
|
||||
|
||||
})
|
||||
|
||||
|
||||
|
|
@ -1,137 +0,0 @@
|
|||
import Vue from 'vue'
|
||||
var vms = Vue.component("amplify-jdsl", {
|
||||
template: `
|
||||
<div>
|
||||
<div class="amplify-title-icon">
|
||||
<img src="/cdn/images/WEB_90022A49B38E4DA39DE4D8869D90A094.png" @click="openAmplify">
|
||||
</div>
|
||||
<transition name="el-zoom-in-top">
|
||||
<div class="amplify-fixed" v-show="show" style="display: none" @click="closeAmplifyAll">
|
||||
<div class="amplify-maxs">
|
||||
<div class="amplify-titles">
|
||||
<div v-html="modeltitle"></div>
|
||||
<div class="amplify-close" @click="closeAmplify"><i class="el-icon-close"></i></div>
|
||||
</div>
|
||||
<div class="amplify-contents">
|
||||
<!--内容区域-->
|
||||
<!-- <div :style="{'height': height + 'px','width':width+'px'}" class="amplify-carousel-max" @mouseout="carouselMouseout" @mouseover="carouselMouseover">-->
|
||||
<!-- <div class="amplify-carousel-min" ref="carousel" :style="{'width':(width*forData.length)+'px','left':left+'px'}">-->
|
||||
<!-- <div class="amplify-carousel-for" :style="{'width':width+'px'}" v-for="(item,i) in forData">-->
|
||||
<!-- <img :src="item.url">-->
|
||||
<!-- <div class="amplify-carousel-text" :style="{'width':width+'px'}">{{item.text}}</div>-->
|
||||
<!-- </div>-->
|
||||
<!-- </div>-->
|
||||
<!-- <div>-->
|
||||
<!-- <div class="amplify-carousel-left" :style="{'left':arrowLeft+'px'}" @click="clickCtrl('right')"><img src="/images/carousel_left.png"></div>-->
|
||||
<!-- <div class="amplify-carousel-right" :style="{'right':arrowRight+'px'}" @click="clickCtrl('left')"><img src="/images/carousel_right.png"></div>-->
|
||||
<!-- </div>-->
|
||||
<!-- </div>-->
|
||||
|
||||
<div class="popup-project-introduction-details">
|
||||
<div class="popup-project-introduction-info">
|
||||
<el-row>
|
||||
<el-col :span="6" v-for="item in forData" style="padding: 10px;">
|
||||
<el-image style="width: 200px; height: 200px;" :src="item.url"
|
||||
:preview-src-list="datas"> </el-image>
|
||||
</el-col>
|
||||
</el-row>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</transition>
|
||||
</div>
|
||||
`,
|
||||
props: {
|
||||
modeltitle:{
|
||||
type:String
|
||||
},
|
||||
},
|
||||
data() {
|
||||
return {
|
||||
show: false,
|
||||
height: 510,
|
||||
width: 910,
|
||||
forData: [],
|
||||
arrowLeft: -45,
|
||||
arrowRight:-45,
|
||||
interval:undefined,
|
||||
left:0,
|
||||
direction:'left',
|
||||
projectId:JSON.parse(localStorage.getItem("data1")).id,
|
||||
datas:[]
|
||||
}
|
||||
},
|
||||
mounted() {
|
||||
|
||||
},
|
||||
methods: {
|
||||
openAmplify() {
|
||||
this.show = true
|
||||
this.getData()
|
||||
},
|
||||
closeAmplify() {
|
||||
this.show = false
|
||||
},
|
||||
closeAmplifyAll(e) {
|
||||
if (e.target.className == 'amplify-fixed') {
|
||||
this.show = false
|
||||
}
|
||||
},
|
||||
// 调用接口
|
||||
getData() {
|
||||
let that = this
|
||||
axios.get("/api/building/info?project_id=" + this.projectId).then(res => {
|
||||
let data = res.data.data
|
||||
let type = {}
|
||||
for (let info of data) {
|
||||
if (!type[info.sub_type]) {
|
||||
type[info.sub_type] = new Array()
|
||||
}
|
||||
info.url = (info.file_path.indexOf("https") != -1) ? info.file_path : info.file_src
|
||||
info.text = info.file_name
|
||||
type[info.sub_type].push(info)
|
||||
}
|
||||
that.forData = type[4];
|
||||
that.forData.map(item=>this.datas.push(item.url))
|
||||
}).catch(err => {
|
||||
|
||||
})
|
||||
},
|
||||
carouselMouseover() {
|
||||
this.arrowLeft = 10
|
||||
this.arrowRight = 10
|
||||
clearInterval(this.interval);
|
||||
},
|
||||
carouselMouseout() {
|
||||
this.arrowLeft = -30
|
||||
this.arrowRight = -30
|
||||
this.direction = 'left'
|
||||
this.interval = setInterval(this.timer, 3000);
|
||||
},
|
||||
clickCtrl(direction) {
|
||||
this.direction = direction
|
||||
this.timer()
|
||||
},
|
||||
timer() {
|
||||
if (this.direction == 'left') {
|
||||
this.left = this.left - this.width
|
||||
if (this.left == -((this.forData.length) * this.width)) {
|
||||
this.left = 0
|
||||
}
|
||||
} else {
|
||||
if (this.left == 0) {
|
||||
this.left = -((this.forData.length - 1) * this.width)
|
||||
} else {
|
||||
this.left = this.left + this.width
|
||||
}
|
||||
}
|
||||
},
|
||||
},
|
||||
watch: {}
|
||||
|
||||
|
||||
})
|
||||
|
||||
|
||||
|
|
@ -1,137 +0,0 @@
|
|||
import Vue from 'vue'
|
||||
var vms = Vue.component("amplify-lzgcjs", {
|
||||
template: `
|
||||
<div>
|
||||
<div class="amplify-title-icon">
|
||||
<img src="/cdn/images/WEB_90022A49B38E4DA39DE4D8869D90A094.png" @click="openAmplify">
|
||||
</div>
|
||||
<transition name="el-zoom-in-top">
|
||||
<div class="amplify-fixed" v-show="show" style="display: none" @click="closeAmplifyAll">
|
||||
<div class="amplify-maxs">
|
||||
<div class="amplify-titles">
|
||||
<div v-html="modeltitle"></div>
|
||||
<div class="amplify-close" @click="closeAmplify"><i class="el-icon-close"></i></div>
|
||||
</div>
|
||||
<div class="amplify-contents">
|
||||
<!--内容区域-->
|
||||
<!-- <div :style="{'height': height + 'px','width':width+'px'}" class="amplify-carousel-max" @mouseout="carouselMouseout" @mouseover="carouselMouseover">-->
|
||||
<!-- <div class="amplify-carousel-min" ref="carousel" :style="{'width':(width*forData.length)+'px','left':left+'px'}">-->
|
||||
<!-- <div class="amplify-carousel-for" :style="{'width':width+'px'}" v-for="(item,i) in forData">-->
|
||||
<!-- <img :src="item.url">-->
|
||||
<!-- <div class="amplify-carousel-text" :style="{'width':width+'px'}">{{item.text}}</div>-->
|
||||
<!-- </div>-->
|
||||
<!-- </div>-->
|
||||
<!-- <div>-->
|
||||
<!-- <div class="amplify-carousel-left" :style="{'left':arrowLeft+'px'}" @click="clickCtrl('right')"><img src="/images/carousel_left.png"></div>-->
|
||||
<!-- <div class="amplify-carousel-right" :style="{'right':arrowRight+'px'}" @click="clickCtrl('left')"><img src="/images/carousel_right.png"></div>-->
|
||||
<!-- </div>-->
|
||||
<!-- </div>-->
|
||||
|
||||
<div class="popup-project-introduction-details">
|
||||
<div class="popup-project-introduction-info">
|
||||
<el-row>
|
||||
<el-col :span="6" v-for="item in forData" style="padding: 10px;">
|
||||
<el-image style="width: 200px; height: 200px;" :src="item.url"
|
||||
:preview-src-list="datas"> </el-image>
|
||||
</el-col>
|
||||
</el-row>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</transition>
|
||||
</div>
|
||||
`,
|
||||
props: {
|
||||
modeltitle:{
|
||||
type:String
|
||||
},
|
||||
},
|
||||
data() {
|
||||
return {
|
||||
show: false,
|
||||
height: 510,
|
||||
width: 910,
|
||||
forData: [],
|
||||
arrowLeft: -45,
|
||||
arrowRight:-45,
|
||||
interval:undefined,
|
||||
left:0,
|
||||
direction:'left',
|
||||
projectId:JSON.parse(localStorage.getItem("data1")).id,
|
||||
datas:[]
|
||||
}
|
||||
},
|
||||
mounted() {
|
||||
|
||||
},
|
||||
methods: {
|
||||
openAmplify() {
|
||||
this.show = true
|
||||
this.getData()
|
||||
},
|
||||
closeAmplify() {
|
||||
this.show = false
|
||||
},
|
||||
closeAmplifyAll(e) {
|
||||
if (e.target.className == 'amplify-fixed') {
|
||||
this.show = false
|
||||
}
|
||||
},
|
||||
// 调用接口
|
||||
getData() {
|
||||
let that = this
|
||||
axios.get("/api/building/info?project_id=" + this.projectId).then(res => {
|
||||
let data = res.data.data
|
||||
let type = {}
|
||||
for (let info of data) {
|
||||
if (!type[info.sub_type]) {
|
||||
type[info.sub_type] = new Array()
|
||||
}
|
||||
info.url = (info.file_path.indexOf("https") != -1) ? info.file_path : info.file_src
|
||||
info.text = info.file_name
|
||||
type[info.sub_type].push(info)
|
||||
}
|
||||
that.forData = type[5];
|
||||
that.forData.map(item=>this.datas.push(item.url))
|
||||
}).catch(err => {
|
||||
|
||||
})
|
||||
},
|
||||
carouselMouseover() {
|
||||
this.arrowLeft = 10
|
||||
this.arrowRight = 10
|
||||
clearInterval(this.interval);
|
||||
},
|
||||
carouselMouseout() {
|
||||
this.arrowLeft = -30
|
||||
this.arrowRight = -30
|
||||
this.direction = 'left'
|
||||
this.interval = setInterval(this.timer, 3000);
|
||||
},
|
||||
clickCtrl(direction) {
|
||||
this.direction = direction
|
||||
this.timer()
|
||||
},
|
||||
timer() {
|
||||
if (this.direction == 'left') {
|
||||
this.left = this.left - this.width
|
||||
if (this.left == -((this.forData.length) * this.width)) {
|
||||
this.left = 0
|
||||
}
|
||||
} else {
|
||||
if (this.left == 0) {
|
||||
this.left = -((this.forData.length - 1) * this.width)
|
||||
} else {
|
||||
this.left = this.left + this.width
|
||||
}
|
||||
}
|
||||
},
|
||||
},
|
||||
watch: {}
|
||||
|
||||
|
||||
})
|
||||
|
||||
|
||||
|
|
@ -1,137 +0,0 @@
|
|||
import Vue from 'vue'
|
||||
var vms = Vue.component("amplify-sxzzjs", {
|
||||
template: `
|
||||
<div>
|
||||
<div class="amplify-title-icon">
|
||||
<img src="/cdn/images/WEB_90022A49B38E4DA39DE4D8869D90A094.png" @click="openAmplify">
|
||||
</div>
|
||||
<transition name="el-zoom-in-top">
|
||||
<div class="amplify-fixed" v-show="show" style="display: none" @click="closeAmplifyAll">
|
||||
<div class="amplify-maxs">
|
||||
<div class="amplify-titles">
|
||||
<div v-html="modeltitle"></div>
|
||||
<div class="amplify-close" @click="closeAmplify"><i class="el-icon-close"></i></div>
|
||||
</div>
|
||||
<div class="amplify-contents">
|
||||
<!--内容区域-->
|
||||
<!-- <div :style="{'height': height + 'px','width':width+'px'}" class="amplify-carousel-max" @mouseout="carouselMouseout" @mouseover="carouselMouseover">-->
|
||||
<!-- <div class="amplify-carousel-min" ref="carousel" :style="{'width':(width*forData.length)+'px','left':left+'px'}">-->
|
||||
<!-- <div class="amplify-carousel-for" :style="{'width':width+'px'}" v-for="(item,i) in forData">-->
|
||||
<!-- <img :src="item.url">-->
|
||||
<!-- <div class="amplify-carousel-text" :style="{'width':width+'px'}">{{item.text}}</div>-->
|
||||
<!-- </div>-->
|
||||
<!-- </div>-->
|
||||
<!-- <div>-->
|
||||
<!-- <div class="amplify-carousel-left" :style="{'left':arrowLeft+'px'}" @click="clickCtrl('right')"><img src="/images/carousel_left.png"></div>-->
|
||||
<!-- <div class="amplify-carousel-right" :style="{'right':arrowRight+'px'}" @click="clickCtrl('left')"><img src="/images/carousel_right.png"></div>-->
|
||||
<!-- </div>-->
|
||||
<!-- </div>-->
|
||||
|
||||
<div class="popup-project-introduction-details">
|
||||
<div class="popup-project-introduction-info">
|
||||
<el-row>
|
||||
<el-col :span="6" v-for="item in forData" style="padding: 10px;">
|
||||
<el-image style="width: 200px; height: 200px;" :src="item.url"
|
||||
:preview-src-list="datas"> </el-image>
|
||||
</el-col>
|
||||
</el-row>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</transition>
|
||||
</div>
|
||||
`,
|
||||
props: {
|
||||
modeltitle:{
|
||||
type:String
|
||||
},
|
||||
},
|
||||
data() {
|
||||
return {
|
||||
show: false,
|
||||
height: 510,
|
||||
width: 910,
|
||||
forData: [],
|
||||
arrowLeft: -45,
|
||||
arrowRight:-45,
|
||||
interval:undefined,
|
||||
left:0,
|
||||
direction:'left',
|
||||
projectId:JSON.parse(localStorage.getItem("data1")).id,
|
||||
datas:[]
|
||||
}
|
||||
},
|
||||
mounted() {
|
||||
|
||||
},
|
||||
methods: {
|
||||
openAmplify() {
|
||||
this.show = true
|
||||
this.getData()
|
||||
},
|
||||
closeAmplify() {
|
||||
this.show = false
|
||||
},
|
||||
closeAmplifyAll(e) {
|
||||
if (e.target.className == 'amplify-fixed') {
|
||||
this.show = false
|
||||
}
|
||||
},
|
||||
// 调用接口
|
||||
getData() {
|
||||
let that = this
|
||||
axios.get("/api/building/info?project_id=" + this.projectId).then(res => {
|
||||
let data = res.data.data
|
||||
let type = {}
|
||||
for (let info of data) {
|
||||
if (!type[info.sub_type]) {
|
||||
type[info.sub_type] = new Array()
|
||||
}
|
||||
info.url = (info.file_path.indexOf("https") != -1) ? info.file_path : info.file_src
|
||||
info.text = info.file_name
|
||||
type[info.sub_type].push(info)
|
||||
}
|
||||
that.forData = type[1];
|
||||
that.forData.map(item=>this.datas.push(item.url))
|
||||
}).catch(err => {
|
||||
|
||||
})
|
||||
},
|
||||
carouselMouseover() {
|
||||
this.arrowLeft = 10
|
||||
this.arrowRight = 10
|
||||
clearInterval(this.interval);
|
||||
},
|
||||
carouselMouseout() {
|
||||
this.arrowLeft = -30
|
||||
this.arrowRight = -30
|
||||
this.direction = 'left'
|
||||
this.interval = setInterval(this.timer, 3000);
|
||||
},
|
||||
clickCtrl(direction) {
|
||||
this.direction = direction
|
||||
this.timer()
|
||||
},
|
||||
timer() {
|
||||
if (this.direction == 'left') {
|
||||
this.left = this.left - this.width
|
||||
if (this.left == -((this.forData.length) * this.width)) {
|
||||
this.left = 0
|
||||
}
|
||||
} else {
|
||||
if (this.left == 0) {
|
||||
this.left = -((this.forData.length - 1) * this.width)
|
||||
} else {
|
||||
this.left = this.left + this.width
|
||||
}
|
||||
}
|
||||
},
|
||||
},
|
||||
watch: {}
|
||||
|
||||
|
||||
})
|
||||
|
||||
|
||||
|
|
@ -1,137 +0,0 @@
|
|||
import Vue from 'vue'
|
||||
var vms = Vue.component("amplify-tdjs", {
|
||||
template: `
|
||||
<div>
|
||||
<div class="amplify-title-icon">
|
||||
<img src="/cdn/images/WEB_90022A49B38E4DA39DE4D8869D90A094.png" @click="openAmplify">
|
||||
</div>
|
||||
<transition name="el-zoom-in-top">
|
||||
<div class="amplify-fixed" v-show="show" style="display: none" @click="closeAmplifyAll">
|
||||
<div class="amplify-maxs">
|
||||
<div class="amplify-titles">
|
||||
<div v-html="modeltitle"></div>
|
||||
<div class="amplify-close" @click="closeAmplify"><i class="el-icon-close"></i></div>
|
||||
</div>
|
||||
<div class="amplify-contents">
|
||||
<!--内容区域-->
|
||||
<!-- <div :style="{'height': height + 'px','width':width+'px'}" class="amplify-carousel-max" @mouseout="carouselMouseout" @mouseover="carouselMouseover">-->
|
||||
<!-- <div class="amplify-carousel-min" ref="carousel" :style="{'width':(width*forData.length)+'px','left':left+'px'}">-->
|
||||
<!-- <div class="amplify-carousel-for" :style="{'width':width+'px'}" v-for="(item,i) in forData">-->
|
||||
<!-- <img :src="item.url">-->
|
||||
<!-- <div class="amplify-carousel-text" :style="{'width':width+'px'}">{{item.text}}</div>-->
|
||||
<!-- </div>-->
|
||||
<!-- </div>-->
|
||||
<!-- <div>-->
|
||||
<!-- <div class="amplify-carousel-left" :style="{'left':arrowLeft+'px'}" @click="clickCtrl('right')"><img src="/images/carousel_left.png"></div>-->
|
||||
<!-- <div class="amplify-carousel-right" :style="{'right':arrowRight+'px'}" @click="clickCtrl('left')"><img src="/images/carousel_right.png"></div>-->
|
||||
<!-- </div>-->
|
||||
<!-- </div>-->
|
||||
|
||||
<div class="popup-project-introduction-details">
|
||||
<div class="popup-project-introduction-info">
|
||||
<el-row>
|
||||
<el-col :span="6" v-for="item in forData" style="padding: 10px;">
|
||||
<el-image style="width: 200px; height: 200px;" :src="item.url"
|
||||
:preview-src-list="datas"> </el-image>
|
||||
</el-col>
|
||||
</el-row>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</transition>
|
||||
</div>
|
||||
`,
|
||||
props: {
|
||||
modeltitle:{
|
||||
type:String
|
||||
},
|
||||
},
|
||||
data() {
|
||||
return {
|
||||
show: false,
|
||||
height: 510,
|
||||
width: 910,
|
||||
forData: [],
|
||||
arrowLeft: -45,
|
||||
arrowRight:-45,
|
||||
interval:undefined,
|
||||
left:0,
|
||||
direction:'left',
|
||||
projectId:JSON.parse(localStorage.getItem("data1")).id,
|
||||
datas:[]
|
||||
}
|
||||
},
|
||||
mounted() {
|
||||
|
||||
},
|
||||
methods: {
|
||||
openAmplify() {
|
||||
this.show = true
|
||||
this.getData()
|
||||
},
|
||||
closeAmplify() {
|
||||
this.show = false
|
||||
},
|
||||
closeAmplifyAll(e) {
|
||||
if (e.target.className == 'amplify-fixed') {
|
||||
this.show = false
|
||||
}
|
||||
},
|
||||
// 调用接口
|
||||
getData() {
|
||||
let that = this
|
||||
axios.get("/api/building/info?project_id=" + this.projectId).then(res => {
|
||||
let data = res.data.data
|
||||
let type = {}
|
||||
for (let info of data) {
|
||||
if (!type[info.sub_type]) {
|
||||
type[info.sub_type] = new Array()
|
||||
}
|
||||
info.url = (info.file_path.indexOf("https") != -1) ? info.file_path : info.file_src
|
||||
info.text = info.file_name
|
||||
type[info.sub_type].push(info)
|
||||
}
|
||||
that.forData = type[2];
|
||||
that.forData.map(item=>this.datas.push(item.url))
|
||||
}).catch(err => {
|
||||
|
||||
})
|
||||
},
|
||||
carouselMouseover() {
|
||||
this.arrowLeft = 10
|
||||
this.arrowRight = 10
|
||||
clearInterval(this.interval);
|
||||
},
|
||||
carouselMouseout() {
|
||||
this.arrowLeft = -30
|
||||
this.arrowRight = -30
|
||||
this.direction = 'left'
|
||||
this.interval = setInterval(this.timer, 3000);
|
||||
},
|
||||
clickCtrl(direction) {
|
||||
this.direction = direction
|
||||
this.timer()
|
||||
},
|
||||
timer() {
|
||||
if (this.direction == 'left') {
|
||||
this.left = this.left - this.width
|
||||
if (this.left == -((this.forData.length) * this.width)) {
|
||||
this.left = 0
|
||||
}
|
||||
} else {
|
||||
if (this.left == 0) {
|
||||
this.left = -((this.forData.length - 1) * this.width)
|
||||
} else {
|
||||
this.left = this.left + this.width
|
||||
}
|
||||
}
|
||||
},
|
||||
},
|
||||
watch: {}
|
||||
|
||||
|
||||
})
|
||||
|
||||
|
||||
|
|
@ -1,138 +0,0 @@
|
|||
import Vue from 'vue'
|
||||
var vms = Vue.component("amplify-xmdt", {
|
||||
template: `
|
||||
<div>
|
||||
<div class="amplify-title-icon">
|
||||
<img src="/cdn/images/WEB_90022A49B38E4DA39DE4D8869D90A094.png" @click="openAmplify">
|
||||
</div>
|
||||
<transition name="el-zoom-in-top">
|
||||
<div class="amplify-fixed" v-show="show" style="display: none" @click="closeAmplifyAll">
|
||||
<div class="amplify-maxs">
|
||||
<div class="amplify-titles">
|
||||
<div v-html="modeltitle"></div>
|
||||
<div class="amplify-close" @click="closeAmplify"><i class="el-icon-close"></i></div>
|
||||
</div>
|
||||
<div class="amplify-contents">
|
||||
<!--内容区域-->
|
||||
|
||||
<!-- <div :style="{'height': height + 'px','width':width+'px'}" class="amplify-carousel-max" @mouseout="carouselMouseout" @mouseover="carouselMouseover">-->
|
||||
<!-- <div class="amplify-carousel-min" ref="carousel" :style="{'width':(width*forData.length)+'px','left':left+'px'}">-->
|
||||
<!-- <div class="amplify-carousel-for" :style="{'width':width+'px'}" v-for="(item,i) in forData">-->
|
||||
<!-- <img :src="item.url">-->
|
||||
<!-- <div class="amplify-carousel-text" :style="{'width':width+'px'}">{{item.text}}</div>-->
|
||||
<!-- </div>-->
|
||||
<!-- </div>-->
|
||||
<!-- <div>-->
|
||||
<!-- <div class="amplify-carousel-left" :style="{'left':arrowLeft+'px'}" @click="clickCtrl('right')"><img src="/images/carousel_left.png"></div>-->
|
||||
<!-- <div class="amplify-carousel-right" :style="{'right':arrowRight+'px'}" @click="clickCtrl('left')"><img src="/images/carousel_right.png"></div>-->
|
||||
<!-- </div>-->
|
||||
<!-- </div>-->
|
||||
|
||||
<div class="popup-project-introduction-details">
|
||||
<div class="popup-project-introduction-info">
|
||||
<el-row>
|
||||
<el-col :span="6" v-for="item in forData" style="padding: 10px;">
|
||||
<el-image style="width: 200px; height: 200px;" :src="item.url"
|
||||
:preview-src-list="datas"> </el-image>
|
||||
</el-col>
|
||||
</el-row>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</transition>
|
||||
</div>
|
||||
`,
|
||||
props: {
|
||||
modeltitle:{
|
||||
type:String
|
||||
},
|
||||
},
|
||||
data() {
|
||||
return {
|
||||
show: false,
|
||||
height: 510,
|
||||
width: 910,
|
||||
forData: [],
|
||||
arrowLeft: -45,
|
||||
arrowRight:-45,
|
||||
interval:undefined,
|
||||
left:0,
|
||||
direction:'left',
|
||||
projectId:JSON.parse(localStorage.getItem("data1")).id,
|
||||
datas:[]
|
||||
}
|
||||
},
|
||||
mounted() {
|
||||
|
||||
},
|
||||
methods: {
|
||||
openAmplify() {
|
||||
this.show = true
|
||||
this.getData()
|
||||
},
|
||||
closeAmplify() {
|
||||
this.show = false
|
||||
},
|
||||
closeAmplifyAll(e) {
|
||||
if (e.target.className == 'amplify-fixed') {
|
||||
this.show = false
|
||||
}
|
||||
},
|
||||
// 调用接口
|
||||
getData() {
|
||||
let that = this
|
||||
axios.get("/api/building/info?project_id=" + this.projectId).then(res => {
|
||||
let data = res.data.data
|
||||
let type = {}
|
||||
for (let info of data) {
|
||||
if (!type[info.sub_type]) {
|
||||
type[info.sub_type] = new Array()
|
||||
}
|
||||
info.url = (info.file_path.indexOf("https") != -1) ? info.file_path : info.file_src
|
||||
info.text = info.file_name
|
||||
type[info.sub_type].push(info)
|
||||
}
|
||||
that.forData = type[0];
|
||||
that.forData.map(item=>this.datas.push(item.url))
|
||||
}).catch(err => {
|
||||
|
||||
})
|
||||
},
|
||||
carouselMouseover() {
|
||||
this.arrowLeft = 10
|
||||
this.arrowRight = 10
|
||||
clearInterval(this.interval);
|
||||
},
|
||||
carouselMouseout() {
|
||||
this.arrowLeft = -30
|
||||
this.arrowRight = -30
|
||||
this.direction = 'left'
|
||||
this.interval = setInterval(this.timer, 3000);
|
||||
},
|
||||
clickCtrl(direction) {
|
||||
this.direction = direction
|
||||
this.timer()
|
||||
},
|
||||
timer() {
|
||||
if (this.direction == 'left') {
|
||||
this.left = this.left - this.width
|
||||
if (this.left == -((this.forData.length) * this.width)) {
|
||||
this.left = 0
|
||||
}
|
||||
} else {
|
||||
if (this.left == 0) {
|
||||
this.left = -((this.forData.length - 1) * this.width)
|
||||
} else {
|
||||
this.left = this.left + this.width
|
||||
}
|
||||
}
|
||||
},
|
||||
},
|
||||
watch: {}
|
||||
|
||||
|
||||
})
|
||||
|
||||
|
||||
|
|
@ -1,286 +0,0 @@
|
|||
import Vue from 'vue'
|
||||
var vms = Vue.component("amplify-lwrygk", {
|
||||
template: `
|
||||
<div>
|
||||
<div class="amplify-title-icon">
|
||||
<img src="/cdn/images/WEB_DBD5893450984E50AFF356EF44FF4139.png" @click="openAmplify">
|
||||
</div>
|
||||
<transition name="el-zoom-in-top">
|
||||
<div class="amplify-fixed" v-show="show" style="display: none" @click="closeAmplifyAll">
|
||||
<div class="amplify-max">
|
||||
<div class="amplify-title">
|
||||
<div>劳务人员概况</div>
|
||||
<div class="amplify-close" @click="closeAmplify"><i class="el-icon-close"></i></div>
|
||||
</div>
|
||||
<div class="amplify-content">
|
||||
<div class="amplify-lwrygk-info">
|
||||
<div class="amplify-lwrygk-info-title">
|
||||
<div :class="nav==1?'active':''" @click="onInfoNav(1,'今日出勤')">今日出勤</div>
|
||||
<div :class="nav==0?'active':''" @click="onInfoNav(0,'在岗人数')">在岗人数</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="amplify-lwrygk-data-content">
|
||||
<el-row>
|
||||
<el-col :span="8">
|
||||
<div class="amplify-lwrygk-survey_content">
|
||||
<div class="amplify-lwrygk-survey_content_img">
|
||||
<img :src="surveyUrl">
|
||||
</div>
|
||||
</div>
|
||||
<div class="amplify-lwrygk-survey_content_number">
|
||||
<div class="amplify-lwrygk-survey_content_value"><span>{{lwDataTotal}}</span> 人</div>
|
||||
<p>{{staffText}}</p>
|
||||
</div>
|
||||
</el-col>
|
||||
<el-col :span="16">
|
||||
<div style="height: 380px;" ref="chart"></div>
|
||||
</el-col>
|
||||
</el-row>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</transition>
|
||||
</div>
|
||||
|
||||
`,
|
||||
props: {
|
||||
|
||||
},
|
||||
data() {
|
||||
return {
|
||||
show:false,
|
||||
projectId:JSON.parse(localStorage.getItem("data1")).id,
|
||||
nav:1,
|
||||
surveyUrl: '/images/survey_icon_5.png',
|
||||
staffText: '今日出勤',
|
||||
lwDataTotal:0,
|
||||
option:{}
|
||||
}
|
||||
},
|
||||
mounted(){
|
||||
|
||||
},
|
||||
methods: {
|
||||
openAmplify() {
|
||||
this.show = true
|
||||
this.getLWData(1)
|
||||
},
|
||||
closeAmplify() {
|
||||
this.show = false
|
||||
},
|
||||
closeAmplifyAll(e) {
|
||||
if (e.target.className == 'amplify-fixed') {
|
||||
this.show = false
|
||||
}
|
||||
},
|
||||
onInfoNav(n, text) {
|
||||
this.nav = n
|
||||
this.staffText = text
|
||||
this.getLWData(n)
|
||||
if (n == 0) {
|
||||
this.surveyUrl = '../../images/survey_icon_4.png'
|
||||
} else {
|
||||
this.surveyUrl = '../../images/survey_icon_5.png'
|
||||
}
|
||||
},
|
||||
|
||||
//劳务人员概况
|
||||
getLWData(infoNav) {
|
||||
axios.post("https://smz.makalu.cc/mkl/screenApi/getAllUserData?token=" + JSON.parse(localStorage.getItem("data1")).smz_token + "&deptId=131&typtProjectId=" + JSON.parse(localStorage.getItem("data1")).id + "&typtDeptId=" + JSON.parse(localStorage.getItem("data1")).dept_id, {}).then(res => {
|
||||
this.lwLoading = false;
|
||||
var laborPersonnelData = [];
|
||||
if (infoNav == 0) {
|
||||
laborPersonnelData.push({text: "特种作业人员", value: res.data.userInfo.specialTotal, type: 2})
|
||||
laborPersonnelData.push({text: "劳务人员(不含特种人员)", value: res.data.userInfo.unSpecialTotal, type: 1})
|
||||
laborPersonnelData.push({text: "管理人员", value: res.data.userInfo.glrs, type: 0})
|
||||
this.lwDataTotal = res.data.zgrs
|
||||
} else {
|
||||
laborPersonnelData.push({text: "特种作业人员", value: res.data.cqUserInfo.specialTotal, type: 2})
|
||||
laborPersonnelData.push({text: "劳务人员(不含特种人员)", value: res.data.cqUserInfo.unSpecialTotal, type: 1})
|
||||
laborPersonnelData.push({text: "管理人员", value: res.data.cqUserInfo.glrs, type: 0})
|
||||
this.lwDataTotal = res.data.rcrs
|
||||
}
|
||||
this.$nextTick(() => {
|
||||
this.echart(laborPersonnelData)
|
||||
})
|
||||
}).catch(err => {
|
||||
})
|
||||
|
||||
},
|
||||
|
||||
echart(chartData){
|
||||
var chChart = echarts.init(this.$refs.chart);
|
||||
let newPromise = new Promise((resolve) => {
|
||||
resolve()
|
||||
})
|
||||
//然后异步执行echarts的初始化函数
|
||||
newPromise.then(() => {
|
||||
|
||||
var value = []
|
||||
var text = []
|
||||
var bgData = []
|
||||
var total = 0
|
||||
for (let i = 0; i < chartData.length; i++) {
|
||||
value.push(chartData[i].value)
|
||||
text.push(chartData[i].text)
|
||||
bgData.push(100)
|
||||
total += chartData[i].value
|
||||
}
|
||||
|
||||
var prop = []
|
||||
for (let j = 0; j < value.length; j++) {
|
||||
if(total == 0){
|
||||
prop.push(0)
|
||||
}else{
|
||||
prop.push((value[j]/total * 100).toFixed(1))
|
||||
}
|
||||
}
|
||||
|
||||
this.option = {
|
||||
grid: {
|
||||
left: "5%",
|
||||
right: "5%",
|
||||
bottom: "0%",
|
||||
top: "0%",
|
||||
containLabel: true,
|
||||
},
|
||||
xAxis: [
|
||||
{
|
||||
show: false,
|
||||
},
|
||||
//由于下边X轴已经是百分比刻度了,所以需要在顶部加一个X轴,刻度是金额,也隐藏掉
|
||||
{
|
||||
show: false,
|
||||
}
|
||||
],
|
||||
yAxis: [
|
||||
{
|
||||
type: 'category',
|
||||
axisLabel: {
|
||||
show: false, //让Y轴数据不显示
|
||||
},
|
||||
itemStyle: {
|
||||
|
||||
},
|
||||
axisTick: {
|
||||
show: false, //隐藏Y轴刻度
|
||||
},
|
||||
axisLine: {
|
||||
show: false, //隐藏Y轴线段
|
||||
},
|
||||
data: [],
|
||||
},{
|
||||
show: false,
|
||||
data: [],
|
||||
axisLine: {
|
||||
show: false
|
||||
}
|
||||
}],
|
||||
series: [
|
||||
//数据条--------------------我是分割线君------------------------------//
|
||||
{
|
||||
show: true,
|
||||
type: 'bar',
|
||||
xAxisIndex: 1, //代表使用第二个X轴刻度!!!!!!!!!!!!!!!!!!!!!!!!
|
||||
barGap: '-100%',
|
||||
barWidth: '20', //统计条宽度
|
||||
itemStyle: {
|
||||
normal: {
|
||||
color: 'rgba(22,203,115,0.05)'
|
||||
},
|
||||
},
|
||||
label: {
|
||||
normal: {
|
||||
show: true,
|
||||
//label 的position位置可以是top bottom left,right,也可以是固定值
|
||||
//在这里需要上下统一对齐,所以用固定值
|
||||
position: [0, '-40'],
|
||||
rich: { //富文本
|
||||
prop: { //自定义颜色
|
||||
color: '#c6d9fa',
|
||||
fontSize:'25',
|
||||
},
|
||||
unit:{
|
||||
color: '#6c829a',
|
||||
fontSize:'25',
|
||||
},
|
||||
yes:{
|
||||
color: '#55adf7',
|
||||
fontSize:'25',
|
||||
},
|
||||
not:{
|
||||
color: '#4677fa',
|
||||
fontSize:'25',
|
||||
},
|
||||
index:{
|
||||
color: '#fcbc02',
|
||||
fontStyle: 'italic',
|
||||
padding:[0,0,0,5],
|
||||
fontSize:'25',
|
||||
},
|
||||
name: {
|
||||
width: 350,
|
||||
color: '#c6d9fa',
|
||||
padding:[0,0,0,10],
|
||||
fontSize:'25',
|
||||
},
|
||||
color:{
|
||||
color: '#8ca2be',
|
||||
fontSize:'20',
|
||||
|
||||
},
|
||||
arrow:{
|
||||
width:20,
|
||||
height:15,
|
||||
backgroundColor: {
|
||||
image: "/cdn/images/WEB_2B7C06210CD44D55BFEE6205A35DE4A7.png",
|
||||
},
|
||||
},
|
||||
|
||||
},
|
||||
formatter: function(data) {
|
||||
//富文本固定格式{colorName|这里填你想要写的内容}
|
||||
//return '{arrow|}'
|
||||
return '{arrow|}{name|' + text[data.dataIndex] + '}{prop|' + value[data.dataIndex] + '}{color| 人} {prop|'+prop[data.dataIndex]+'}{color| %} ';
|
||||
},
|
||||
}
|
||||
},
|
||||
data: bgData,
|
||||
},
|
||||
{
|
||||
type: "bar",
|
||||
zlevel: 1,
|
||||
itemStyle: {
|
||||
normal: {
|
||||
color: "#6ab9fe",
|
||||
},
|
||||
},
|
||||
barWidth: 15,
|
||||
data: prop,
|
||||
},
|
||||
{
|
||||
type: "bar",
|
||||
barWidth: 15,
|
||||
barGap: "-100%",
|
||||
data: bgData,
|
||||
itemStyle: {
|
||||
normal: {
|
||||
color: "rgba(24,31,68,1)",
|
||||
},
|
||||
},
|
||||
},
|
||||
],
|
||||
};
|
||||
|
||||
chChart.setOption(this.option);
|
||||
window.onresize = chChart.resize;
|
||||
})
|
||||
},
|
||||
},
|
||||
watch:{
|
||||
|
||||
},
|
||||
})
|
||||
|
||||
|
||||
|
|
@ -1,163 +0,0 @@
|
|||
import Vue from 'vue'
|
||||
var vms = Vue.component("amplify-sbgk", {
|
||||
template: `
|
||||
<div>
|
||||
<div class="amplify-title-icon">
|
||||
<img src="/cdn/images/WEB_DBD5893450984E50AFF356EF44FF4139.png" @click="openAmplify">
|
||||
</div>
|
||||
<transition name="el-zoom-in-top">
|
||||
<div class="amplify-fixed" v-show="show" style="display: none" @click="closeAmplifyAll">
|
||||
<div class="amplify-max">
|
||||
<div class="amplify-title">
|
||||
<div>设备概况</div>
|
||||
<div class="amplify-close" @click="closeAmplify"><i class="el-icon-close"></i></div>
|
||||
</div>
|
||||
<div class="amplify-content">
|
||||
<div class="amplify-sbgk-survey_title">
|
||||
<div class="amplify-sbgk-survey_title_btn">
|
||||
<div :class="overview==0?'amplify-sbgk-survey_title_btn_min active':'amplify-sbgk-survey_title_btn_min'"
|
||||
@click="onClickoOverview(0)">设备数量
|
||||
</div>
|
||||
</div>
|
||||
<div class="amplify-sbgk-survey_title_btn">
|
||||
<div :class="overview==1?'amplify-sbgk-survey_title_btn_min active':'amplify-sbgk-survey_title_btn_min'"
|
||||
@click="onClickoOverview(1)">绑定数量
|
||||
</div>
|
||||
</div>
|
||||
<div class="amplify-sbgk-survey_title_btn">
|
||||
<div :class="overview==2?'amplify-sbgk-survey_title_btn_min active':'amplify-sbgk-survey_title_btn_min'"
|
||||
@click="onClickoOverview(2)">监控数量
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="amplify-sbgk-survey_content">
|
||||
<div class="amplify-sbgk-survey_content_img">
|
||||
<img :src="surveyUrlSb">
|
||||
</div>
|
||||
<div class="amplify-sbgk-survey_content_number">
|
||||
<p>{{showOverviewLabel}}</p>
|
||||
<div class="amplify-sbgk-survey_content_value">
|
||||
<span>{{showOverviewData.countNum}}</span> 台
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="amplify-sbgk-survey_title">
|
||||
<div class="amplify-sbgk-survey_title_btn">
|
||||
<div class="amplify-sbgk-survey_text amplify-sbgk-survey_text_zy"></div>
|
||||
<div class="amplify-sbgk-survey_text_value">
|
||||
<p>自有</p>
|
||||
<span>{{showOverviewData.zyNum}}</span>
|
||||
</div>
|
||||
</div>
|
||||
<div class="amplify-sbgk-survey_title_btn">
|
||||
<div class="amplify-sbgk-survey_text amplify-sbgk-survey_text_zl"></div>
|
||||
<div class="amplify-sbgk-survey_text_value">
|
||||
<p>租赁</p>
|
||||
<span>{{showOverviewData.zlNum}}</span>
|
||||
</div>
|
||||
</div>
|
||||
<div class="amplify-sbgk-survey_title_btn">
|
||||
<div class="amplify-sbgk-survey_text amplify-sbgk-survey_text_fb"></div>
|
||||
<div class="amplify-sbgk-survey_text_value">
|
||||
<p>分包</p>
|
||||
<span>{{showOverviewData.fbNum}}</span>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</transition>
|
||||
</div>
|
||||
|
||||
`,
|
||||
props: {
|
||||
|
||||
},
|
||||
data() {
|
||||
return {
|
||||
show:false,
|
||||
overview: 0,
|
||||
showOverviewLabel:'设备数量',
|
||||
surveyUrlSb: '/images/survey_icon_1.png',
|
||||
overviewInterval: '',
|
||||
overviewData:[],
|
||||
showOverviewData: {},
|
||||
}
|
||||
},
|
||||
mounted(){
|
||||
|
||||
},
|
||||
methods: {
|
||||
openAmplify(){
|
||||
this.show = true
|
||||
//设备概况点击事件定时器
|
||||
this.overviewInterval = setInterval(this.overviewClick, 5000);
|
||||
this.getOverviewData()
|
||||
},
|
||||
closeAmplify(){
|
||||
this.show = false
|
||||
this.overview = 0
|
||||
this.showOverviewLabel='设备数量'
|
||||
this.surveyUrlSb= '/images/survey_icon_1.png'
|
||||
clearInterval(this.overviewInterval);
|
||||
},
|
||||
closeAmplifyAll(e){
|
||||
if(e.target.className == 'amplify-fixed'){
|
||||
this.show = false
|
||||
this.overview = 0
|
||||
this.showOverviewLabel='设备数量'
|
||||
this.surveyUrlSb= '/images/survey_icon_1.png'
|
||||
clearInterval(this.overviewInterval);
|
||||
}
|
||||
},
|
||||
//设备概况点击事件定时器方法
|
||||
overviewClick() {
|
||||
if (this.overview < 2) {
|
||||
this.overview = this.overview + 1
|
||||
} else {
|
||||
this.overview = 0
|
||||
}
|
||||
this.showOverviewData = this.overviewData[this.overview];
|
||||
if (this.overview == 0) {
|
||||
this.showOverviewLabel = '设备数量'
|
||||
this.surveyUrlSb = '/images/survey_icon_1.png'
|
||||
} else if (this.overview == 1) {
|
||||
this.showOverviewLabel = '绑定数量'
|
||||
this.surveyUrlSb = '/images/survey_icon_2.png'
|
||||
} else {
|
||||
this.showOverviewLabel = '监控数量'
|
||||
this.surveyUrlSb = '/images/survey_icon_3.png'
|
||||
}
|
||||
},
|
||||
//设备概况点击事件
|
||||
onClickoOverview(n) {
|
||||
this.overview = n
|
||||
this.showOverviewData = this.overviewData[this.overview];
|
||||
if (this.overview == 0) {
|
||||
this.showOverviewLabel = '设备数量'
|
||||
this.surveyUrlSb = '/images/survey_icon_1.png'
|
||||
} else if (this.overview == 1) {
|
||||
this.showOverviewLabel = '绑定数量'
|
||||
this.surveyUrlSb = '/images/survey_icon_2.png'
|
||||
} else {
|
||||
this.showOverviewLabel = '监控数量'
|
||||
this.surveyUrlSb = '/images/survey_icon_3.png'
|
||||
}
|
||||
},
|
||||
//设备概况数据
|
||||
getOverviewData() {
|
||||
axios.post(requestUrl + "getEquipmentOverview?deptId=" + deptId + "&projectId=" + JSON.parse(localStorage.getItem("data1")).jzgj + "&typtProjectId=" + JSON.parse(localStorage.getItem("data1")).id + "&typtDeptId=" + JSON.parse(localStorage.getItem("data1")).dept_id, {}).then(res => {
|
||||
this.overviewData = [res.data.data.count, res.data.data.bind, res.data.data.monitor];
|
||||
this.showOverviewData = this.overviewData[0];
|
||||
}).catch(err => {
|
||||
})
|
||||
},
|
||||
},
|
||||
watch:{
|
||||
|
||||
},
|
||||
|
||||
})
|
||||
|
||||
|
||||
|
|
@ -1,132 +0,0 @@
|
|||
import Vue from 'vue'
|
||||
var vms = Vue.component("amplify-xmkg", {
|
||||
template: `
|
||||
<div>
|
||||
<div class="amplify-title-icon">
|
||||
<img src="/cdn/images/WEB_DBD5893450984E50AFF356EF44FF4139.png" @click="openAmplify">
|
||||
</div>
|
||||
<transition name="el-zoom-in-top">
|
||||
<div class="amplify-fixed" v-show="show" style="display: none" @click="closeAmplifyAll">
|
||||
<div class="amplify-max">
|
||||
<div class="amplify-title">
|
||||
<div>项目概况</div>
|
||||
<div class="amplify-close" @click="closeAmplify"><i class="el-icon-close"></i></div>
|
||||
</div>
|
||||
<div class="amplify-content">
|
||||
<el-row>
|
||||
<el-col :span="12">
|
||||
<div class="amplify-company-name">
|
||||
<div class="amplify-company-img"><img src="/images/company_13.png"></div>
|
||||
<div class="amplify-company-info">
|
||||
<div class="amplify-company-title">建设单位</div>
|
||||
<div class="amplify-company-text" v-cloak>{{companyData.build_unit}}</div>
|
||||
<div class="amplify-company-person-info" v-cloak>{{companyData.build_unit_manager_name}} {{companyData.phone_show == 0 ? companyData.build_unit_manager_phone : ''}}</div>
|
||||
</div>
|
||||
</div>
|
||||
</el-col>
|
||||
<el-col :span="12">
|
||||
<div class="amplify-company-name">
|
||||
<div class="amplify-company-img"><img src="/images/company_14.png"></div>
|
||||
<div class="amplify-company-info">
|
||||
<div class="amplify-company-title">设计单位</div>
|
||||
<div class="amplify-company-text" v-cloak>{{companyData.design_unit}}</div>
|
||||
<div class="amplify-company-person-info" v-cloak>{{companyData.design_unit_manager_name}} {{companyData.phone_show == 0 ? companyData.design_unit_manager_phone : ''}}</div>
|
||||
</div>
|
||||
</div>
|
||||
</el-col>
|
||||
<el-col :span="12">
|
||||
<div class="amplify-company-name">
|
||||
<div class="amplify-company-img"><img src="/images/company_15.png"></div>
|
||||
<div class="amplify-company-info">
|
||||
<div class="amplify-company-title">总包单位</div>
|
||||
<div class="amplify-company-text" v-cloak>{{companyData.all_unit}}</div>
|
||||
<div class="amplify-company-person-info" v-cloak>{{companyData.all_unit_manager_name}} {{companyData.phone_show == 0 ? companyData.all_unit_manager_phone : ''}}</div>
|
||||
</div>
|
||||
</div>
|
||||
</el-col>
|
||||
<el-col :span="12">
|
||||
<div class="amplify-company-name">
|
||||
<div class="amplify-company-img"><img src="/images/company_11.png"></div>
|
||||
<div class="amplify-company-info">
|
||||
<div class="amplify-company-title">监理单位</div>
|
||||
<div class="amplify-company-text" v-cloak>{{companyData.supervisor_unit}}</div>
|
||||
<div class="amplify-company-person-info" v-cloak>{{companyData.supervisor_unit_manager_name}} {{companyData.phone_show == 0 ? companyData.supervisor_unit_manager_phone : ''}}</div>
|
||||
</div>
|
||||
</div>
|
||||
</el-col>
|
||||
<el-col :span="12">
|
||||
<div class="amplify-company-name">
|
||||
<div class="amplify-company-img"><img src="/images/company_12.png"></div>
|
||||
<div class="amplify-company-info">
|
||||
<div class="amplify-company-title">检测机构</div>
|
||||
<div class="amplify-company-text" v-cloak>{{companyData.testing_unit}}</div>
|
||||
<div class="amplify-company-person-info" v-cloak>{{companyData.testing_unit_manager_name}} {{companyData.phone_show == 0 ? companyData.testing_unit_manager_phone : ''}}</div>
|
||||
</div>
|
||||
</div>
|
||||
</el-col>
|
||||
<el-col :span="12">
|
||||
<div class="amplify-company-name">
|
||||
<div class="amplify-company-img"><img src="/images/company_10.png"></div>
|
||||
<div class="amplify-company-info">
|
||||
<div class="amplify-company-title">勘察单位</div>
|
||||
<div class="amplify-company-text" v-cloak>{{companyData.survey_unit}}</div>
|
||||
<div class="amplify-company-person-info" v-cloak>{{companyData.survey_unit_manager_name}} {{companyData.phone_show == 0 ? companyData.survey_unit_manager_phone : ''}}</div>
|
||||
</div>
|
||||
</div>
|
||||
</el-col>
|
||||
</el-row>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</transition>
|
||||
</div>
|
||||
|
||||
`,
|
||||
props: {
|
||||
|
||||
},
|
||||
data() {
|
||||
return {
|
||||
show:false,
|
||||
projectId:JSON.parse(localStorage.getItem("data1")).id,
|
||||
companyData:{}
|
||||
}
|
||||
},
|
||||
mounted(){
|
||||
|
||||
},
|
||||
methods: {
|
||||
openAmplify(){
|
||||
this.show = true
|
||||
this.getProject()
|
||||
},
|
||||
closeAmplify(){
|
||||
this.show = false
|
||||
},
|
||||
getProject() {
|
||||
axios({
|
||||
method: 'post',
|
||||
url: "/api/project/info",
|
||||
data: {
|
||||
"project_id":this.projectId
|
||||
}
|
||||
}).then(res => {
|
||||
this.companyData = res.data.data
|
||||
}).catch(err => {
|
||||
|
||||
})
|
||||
},
|
||||
closeAmplifyAll(e){
|
||||
if(e.target.className == 'amplify-fixed'){
|
||||
this.show = false
|
||||
}
|
||||
}
|
||||
|
||||
},
|
||||
watch:{
|
||||
|
||||
},
|
||||
|
||||
})
|
||||
|
||||
|
||||
|
|
@ -1,55 +0,0 @@
|
|||
import Vue from 'vue'
|
||||
var vms = Vue.component("amplify-sbgk", {
|
||||
template: `
|
||||
<div>
|
||||
<div class="amplify-title-icon">
|
||||
<img src="/cdn/images/WEB_DBD5893450984E50AFF356EF44FF4139.png" @click="openAmplify">
|
||||
</div>
|
||||
<transition name="el-zoom-in-top">
|
||||
<div class="amplify-fixed" v-show="show" style="display: none" @click="closeAmplifyAll">
|
||||
<div class="amplify-max">
|
||||
<div class="amplify-title">
|
||||
<div>设备概况</div>
|
||||
<div class="amplify-close" @click="closeAmplify"><i class="el-icon-close"></i></div>
|
||||
</div>
|
||||
<div class="amplify-content">
|
||||
<!--内容区域-->
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</transition>
|
||||
</div>
|
||||
`,
|
||||
props: {
|
||||
|
||||
},
|
||||
data() {
|
||||
return {
|
||||
show:false,
|
||||
}
|
||||
},
|
||||
mounted(){
|
||||
|
||||
},
|
||||
methods: {
|
||||
openAmplify(){
|
||||
this.show = true
|
||||
this.getProject()
|
||||
},
|
||||
closeAmplify(){
|
||||
this.show = false
|
||||
},
|
||||
closeAmplifyAll(e){
|
||||
if(e.target.className == 'amplify-fixed'){
|
||||
this.show = false
|
||||
}
|
||||
}
|
||||
|
||||
},
|
||||
watch:{
|
||||
|
||||
},
|
||||
|
||||
})
|
||||
|
||||
|
||||
|
|
@ -1,75 +0,0 @@
|
|||
import Vue from 'vue'
|
||||
var vms = Vue.component("amplify-qysj", {
|
||||
template: `
|
||||
<div>
|
||||
<div class="amplify-title-icon">
|
||||
<img src="/cdn/images/WEB_DBD5893450984E50AFF356EF44FF4139.png" @click="openAmplify">
|
||||
</div>
|
||||
<transition name="el-zoom-in-top">
|
||||
<div class="amplify-fixed" v-show="show" style="display: none" @click="closeAmplifyAll">
|
||||
<div class="amplify-max">
|
||||
<div class="amplify-title">
|
||||
<div>质量目标</div>
|
||||
<div class="amplify-close" @click="closeAmplify"><i class="el-icon-close"></i></div>
|
||||
</div>
|
||||
<div class="amplify-content">
|
||||
<!--内容区域-->
|
||||
<div class="amplify-quality-target-max">
|
||||
<div class="amplify-quality-target-min" style="padding: 10px 20px;font-size: 34px;" v-for="item in qualityTargetData">
|
||||
<div class="amplify-quality-target-img">
|
||||
<img :src="item.images">
|
||||
</div>
|
||||
<div class="amplify-quality-target-con">
|
||||
<div class="amplify-quality-target-title" v-cloak>{{item.title}}</div>
|
||||
<div class="amplify-quality-target-info-new" >{{item.text}}</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</transition>
|
||||
</div>
|
||||
`,
|
||||
props: {},
|
||||
data() {
|
||||
return {
|
||||
show: false,
|
||||
//质量目标
|
||||
qualityTargetData:[
|
||||
{
|
||||
title:'创优目标',
|
||||
text:'获得陕西省“双优”工地，创AAA级国家安全文明标准化工地',
|
||||
images:'/images/quality_target_1.png',
|
||||
}
|
||||
],
|
||||
}
|
||||
},
|
||||
mounted() {
|
||||
let that = this
|
||||
let url1 = "http://127.0.0.1:9004/system/qualityTarget/list1"
|
||||
let url2 = "https://szh.makalu.cc/system/qualityTarget/list1"
|
||||
$.post(url2,{},res => {
|
||||
that.qualityTargetData = res[JSON.parse(localStorage.getItem("data1")).id]
|
||||
})
|
||||
},
|
||||
methods: {
|
||||
openAmplify() {
|
||||
this.show = true
|
||||
// this.getProject()
|
||||
},
|
||||
closeAmplify() {
|
||||
this.show = false
|
||||
},
|
||||
closeAmplifyAll(e) {
|
||||
if (e.target.className == 'amplify-fixed') {
|
||||
this.show = false
|
||||
}
|
||||
}
|
||||
|
||||
},
|
||||
watch: {},
|
||||
|
||||
})
|
||||
|
||||
|
||||
|
|
@ -1,123 +0,0 @@
|
|||
/**
|
||||
* 顶部header
|
||||
*/
|
||||
import Vue from 'vue'
|
||||
Vue.component("background-video", {
|
||||
template: `
|
||||
<canvas id="canvas"></canvas>
|
||||
`,
|
||||
props: {
|
||||
url:{
|
||||
type:String
|
||||
}
|
||||
},
|
||||
data() {
|
||||
return {
|
||||
|
||||
}
|
||||
},
|
||||
mounted(){
|
||||
var canvas = document.getElementById('canvas'),
|
||||
ctx = canvas.getContext('2d'),
|
||||
w = canvas.width = window.innerWidth,
|
||||
h = canvas.height = window.innerHeight,
|
||||
|
||||
hue = 217,
|
||||
stars = [],
|
||||
count = 0,
|
||||
maxStars = 1200;
|
||||
|
||||
var canvas2 = document.createElement('canvas'),
|
||||
ctx2 = canvas2.getContext('2d');
|
||||
canvas2.width = 100;
|
||||
canvas2.height = 100;
|
||||
var half = canvas2.width / 2,
|
||||
gradient2 = ctx2.createRadialGradient(half, half, 0, half, half, half);
|
||||
gradient2.addColorStop(0.025, '#fff');
|
||||
gradient2.addColorStop(0.1, 'hsl(' + hue + ', 61%, 33%)');
|
||||
gradient2.addColorStop(0.25, 'hsl(' + hue + ', 64%, 6%)');
|
||||
gradient2.addColorStop(1, 'transparent');
|
||||
|
||||
ctx2.fillStyle = gradient2;
|
||||
ctx2.beginPath();
|
||||
ctx2.arc(half, half, half, 0, Math.PI * 2);
|
||||
ctx2.fill();
|
||||
|
||||
// End cache
|
||||
|
||||
function random(min, max) {
|
||||
if (arguments.length < 2) {
|
||||
max = min;
|
||||
min = 0;
|
||||
}
|
||||
|
||||
if (min > max) {
|
||||
var hold = max;
|
||||
max = min;
|
||||
min = hold;
|
||||
}
|
||||
|
||||
return Math.floor(Math.random() * (max - min + 1)) + min;
|
||||
}
|
||||
|
||||
function maxOrbit(x, y) {
|
||||
var max = Math.max(x, y),
|
||||
diameter = Math.round(Math.sqrt(max * max + max * max));
|
||||
return diameter / 2;
|
||||
}
|
||||
|
||||
var Star = function() {
|
||||
|
||||
this.orbitRadius = random(maxOrbit(w, h));
|
||||
this.radius = random(60, this.orbitRadius) / 5;
|
||||
this.orbitX = w / 2;
|
||||
this.orbitY = h / 2;
|
||||
this.timePassed = random(0, maxStars);
|
||||
this.speed = random(this.orbitRadius) / 900000;
|
||||
this.alpha = random(2, 10) / 10;
|
||||
|
||||
count++;
|
||||
stars[count] = this;
|
||||
}
|
||||
|
||||
Star.prototype.draw = function() {
|
||||
var x = Math.sin(this.timePassed) * this.orbitRadius + this.orbitX,
|
||||
y = Math.cos(this.timePassed) * this.orbitRadius + this.orbitY,
|
||||
twinkle = random(10);
|
||||
|
||||
if (twinkle === 1 && this.alpha > 0) {
|
||||
this.alpha -= 0.05;
|
||||
} else if (twinkle === 2 && this.alpha < 1) {
|
||||
this.alpha += 0.05;
|
||||
}
|
||||
|
||||
ctx.globalAlpha = this.alpha;
|
||||
ctx.drawImage(canvas2, x - this.radius / 2, y - this.radius / 2, this.radius, this.radius);
|
||||
this.timePassed += this.speed;
|
||||
}
|
||||
|
||||
for (var i = 0; i < maxStars; i++) {
|
||||
new Star();
|
||||
}
|
||||
|
||||
function animation() {
|
||||
ctx.globalCompositeOperation = 'source-over';
|
||||
ctx.globalAlpha = 0.8;
|
||||
ctx.fillStyle = 'hsla(' + hue + ', 64%, 6%, 1)';
|
||||
ctx.fillRect(0, 0, w, h)
|
||||
|
||||
ctx.globalCompositeOperation = 'lighter';
|
||||
for (var i = 1, l = stars.length; i < l; i++) {
|
||||
stars[i].draw();
|
||||
};
|
||||
|
||||
window.requestAnimationFrame(animation);
|
||||
}
|
||||
|
||||
animation();
|
||||
},
|
||||
methods: {
|
||||
|
||||
}
|
||||
|
||||
})
|
||||
File diff suppressed because it is too large
Load Diff
|
|
@ -1,40 +0,0 @@
|
|||
import Vue from 'vue'
|
||||
Vue.component("carousel-element", {
|
||||
template: `
|
||||
<el-carousel trigger="click" :height="height+'px'">
|
||||
<el-carousel-item v-for="item in data">
|
||||
<div style="position: relative;width: 100%;height: 100%">
|
||||
<img :src="item.url" width="100%" height="100%">
|
||||
<div style="position: absolute;width: 100%;bottom: 0;background: rgba(0,0,0,0.5);padding: 5px 0;text-align: center">
|
||||
{{item.text}}
|
||||
</div>
|
||||
</div>
|
||||
</el-carousel-item>
|
||||
</el-carousel>
|
||||
`,
|
||||
props: {
|
||||
data:{
|
||||
type:Array
|
||||
},
|
||||
height:{
|
||||
type: Number
|
||||
}
|
||||
},
|
||||
data() {
|
||||
return {
|
||||
|
||||
}
|
||||
},
|
||||
mounted(){
|
||||
this.init()
|
||||
},
|
||||
methods: {
|
||||
init(){
|
||||
|
||||
},
|
||||
},
|
||||
watch:{
|
||||
|
||||
}
|
||||
|
||||
})
|
||||
|
|
@ -1,82 +0,0 @@
|
|||
import Vue from 'vue'
|
||||
Vue.component("carousel", {
|
||||
template: `
|
||||
<div :style="{'height': height + 'px','width':width+'px'}" class="carousel-max" @mouseout="carouselMouseout" @mouseover="carouselMouseover">
|
||||
<div class="carousel-min" ref="carousel" :style="{'width':(width*forData.length)+'px','left':left+'px'}">
|
||||
<div class="carousel-for" :style="{'width':width+'px'}" v-for="(item,i) in forData">
|
||||
<img :src="item.url">
|
||||
<div class="carousel-text" :style="{'width':width+'px'}">{{item.text}}</div>
|
||||
</div>
|
||||
</div>
|
||||
<div>
|
||||
<div class="carousel-left" :style="{'left':arrowLeft+'px'}" @click="clickCtrl('right')"><img src="images/carousel_left.png"></div>
|
||||
<div class="carousel-right" :style="{'right':arrowRight+'px'}" @click="clickCtrl('left')"><img src="images/carousel_right.png"></div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
|
||||
`,
|
||||
props: {
|
||||
height:{
|
||||
type:Number
|
||||
},
|
||||
width:{
|
||||
type:Number
|
||||
},
|
||||
data:{
|
||||
type:Array
|
||||
}
|
||||
},
|
||||
data() {
|
||||
return {
|
||||
interval:undefined,
|
||||
left:0,
|
||||
direction:'left',
|
||||
forData:[],
|
||||
arrowLeft: -30,
|
||||
arrowRight:-30,
|
||||
}
|
||||
},
|
||||
mounted(){
|
||||
this.init()
|
||||
},
|
||||
methods: {
|
||||
init(){
|
||||
this.forData = this.data
|
||||
this.interval = setInterval(this.timer, 3000);
|
||||
},
|
||||
carouselMouseover(){
|
||||
this.arrowLeft =10
|
||||
this.arrowRight =10
|
||||
clearInterval(this.interval);
|
||||
},
|
||||
carouselMouseout(){
|
||||
this.arrowLeft = -30
|
||||
this.arrowRight =-30
|
||||
this.direction = 'left'
|
||||
this.interval=setInterval(this.timer,3000);
|
||||
},
|
||||
clickCtrl(direction){
|
||||
this.direction = direction
|
||||
this.timer()
|
||||
},
|
||||
timer(){
|
||||
if(this.direction == 'left'){
|
||||
this.left = this.left - this.width
|
||||
if(this.left == -((this.forData.length) * this.width)){
|
||||
this.left = 0
|
||||
}
|
||||
}else{
|
||||
if(this.left == 0){
|
||||
this.left = -((this.forData.length-1) * this.width)
|
||||
}else {
|
||||
this.left = this.left + this.width
|
||||
}
|
||||
}
|
||||
},
|
||||
},
|
||||
watch:{
|
||||
|
||||
}
|
||||
|
||||
})
|
||||
|
|
@ -1,150 +0,0 @@
|
|||
import Vue from 'vue'
|
||||
Vue.component("certificate-bar-chart", {
|
||||
template: `
|
||||
<div :style="{'height': height+'px'}" ref="chart"></div>
|
||||
`,
|
||||
props: {
|
||||
data:{
|
||||
type:Array
|
||||
},
|
||||
height:{
|
||||
type:Number
|
||||
}
|
||||
},
|
||||
data() {
|
||||
return {
|
||||
option:{},
|
||||
|
||||
}
|
||||
},
|
||||
mounted(){
|
||||
this.init()
|
||||
},
|
||||
methods: {
|
||||
init(){
|
||||
this.getChartData()
|
||||
},
|
||||
getChartData(){
|
||||
//品类金额占比 饼图
|
||||
var chChart = echarts.init(this.$refs.chart);
|
||||
this.echart(chChart,this.data)
|
||||
},
|
||||
echart(chChart,chartData){
|
||||
let newPromise = new Promise((resolve) => {
|
||||
resolve()
|
||||
})
|
||||
//然后异步执行echarts的初始化函数
|
||||
newPromise.then(() => {
|
||||
var value = []
|
||||
var text = []
|
||||
var total = 0
|
||||
var bgd = []
|
||||
for (let i = 0; i < chartData.length; i++) {
|
||||
value.push(chartData[i].value)
|
||||
text.push(chartData[i].text)
|
||||
bgd.push(100)
|
||||
total += chartData[i].value
|
||||
}
|
||||
|
||||
var prop = []
|
||||
for (let j = 0; j < value.length; j++) {
|
||||
prop.push((value[j]/total * 100).toFixed(1))
|
||||
}
|
||||
|
||||
this.option = {
|
||||
grid: {
|
||||
left: "5%",
|
||||
right: "5%",
|
||||
bottom: "-10%",
|
||||
top: "2%",
|
||||
containLabel: true,
|
||||
},
|
||||
xAxis: {
|
||||
show: false,
|
||||
type: "value",
|
||||
},
|
||||
yAxis: [
|
||||
{
|
||||
type: "category",
|
||||
inverse: true,
|
||||
axisLabel: {
|
||||
show: true,
|
||||
textStyle: {
|
||||
color: "#cbdaff",
|
||||
fontSize: "14",
|
||||
},
|
||||
},
|
||||
splitLine: {
|
||||
show: false,
|
||||
},
|
||||
axisTick: {
|
||||
show: false,
|
||||
},
|
||||
axisLine: {
|
||||
show: false,
|
||||
},
|
||||
data: text,
|
||||
},
|
||||
{
|
||||
type: "category",
|
||||
inverse: true,
|
||||
axisTick: "none",
|
||||
axisLine: "none",
|
||||
show: true,
|
||||
axisLabel: {
|
||||
textStyle: {
|
||||
color: "#cbdaff",
|
||||
fontSize: "16",
|
||||
},
|
||||
formatter: function(params,i){
|
||||
var text = "{a|" + value[i] + "}{a| "+ prop[i]+ "%}";
|
||||
return text;
|
||||
},
|
||||
rich: {
|
||||
a: {
|
||||
fontSize: '16px',
|
||||
color: "#cbdaff",
|
||||
},
|
||||
},
|
||||
},
|
||||
data: prop,
|
||||
},
|
||||
],
|
||||
series: [
|
||||
{
|
||||
type: "bar",
|
||||
zlevel: 1,
|
||||
itemStyle: {
|
||||
normal: {
|
||||
color: "#6ab9fe",
|
||||
},
|
||||
},
|
||||
barWidth: 8,
|
||||
data: prop,
|
||||
},
|
||||
{
|
||||
type: "bar",
|
||||
barWidth: 8,
|
||||
barGap: "-100%",
|
||||
data: bgd,
|
||||
itemStyle: {
|
||||
normal: {
|
||||
color: "rgba(24,31,68,1)",
|
||||
},
|
||||
},
|
||||
},
|
||||
],
|
||||
};
|
||||
|
||||
chChart.setOption(this.option);
|
||||
window.onresize = chChart.resize;
|
||||
})
|
||||
},
|
||||
},
|
||||
watch:{
|
||||
data: function (n,o) {
|
||||
this.getChartData(this.data)
|
||||
}
|
||||
}
|
||||
|
||||
})
|
||||
|
|
@ -1,70 +0,0 @@
|
|||
import Vue from 'vue'
|
||||
Vue.component("chart-bar", {
|
||||
template: `
|
||||
<div class='chart-bar' style="position: relative" @click="doClick">
|
||||
<div :style="{'height': height+'px'}" ref="warningPieChart">
|
||||
|
||||
</div>
|
||||
</div>
|
||||
`,
|
||||
props: {
|
||||
fn:{
|
||||
type:Function
|
||||
},
|
||||
height:{
|
||||
type:Number
|
||||
},
|
||||
optData:{
|
||||
type:Array,
|
||||
default:()=>[]
|
||||
}
|
||||
},
|
||||
data() {
|
||||
return {
|
||||
}
|
||||
},
|
||||
mounted(){
|
||||
this.init()
|
||||
},
|
||||
methods: {
|
||||
doClick(){
|
||||
this.$emit("clickme");
|
||||
},
|
||||
init(){
|
||||
this.getChartData()
|
||||
},
|
||||
getChartData(){
|
||||
//品类金额占比 饼图
|
||||
var chChartPie = echarts.init(this.$refs.warningPieChart);
|
||||
this.echartPie(chChartPie)
|
||||
},
|
||||
echartPie(chChart){
|
||||
let newPromise = new Promise((resolve) => {
|
||||
resolve()
|
||||
})
|
||||
|
||||
//然后异步执行echarts的初始化函数
|
||||
newPromise.then(() => {
|
||||
this.option = {
|
||||
legend: {
|
||||
show:false
|
||||
},
|
||||
tooltip: { trigger: 'axis',
|
||||
},
|
||||
dataset: {
|
||||
source: this.optData
|
||||
},
|
||||
xAxis: { type: 'category' , axisLabel: {color:"#fff"}},
|
||||
yAxis: {},
|
||||
series: [{ type: 'bar' }, { type: 'bar' }, { type: 'bar' }]
|
||||
}
|
||||
if(this.fn){
|
||||
this.option=this.fn(this.option);
|
||||
}
|
||||
chChart.setOption(this.option);
|
||||
window.onresize = chChart.resize;
|
||||
})
|
||||
},
|
||||
},
|
||||
|
||||
})
|
||||
|
|
@ -1,233 +0,0 @@
|
|||
import Vue from 'vue'
|
||||
Vue.component("china-map", {
|
||||
template: `
|
||||
<div :style="{'height': height+'px'}" ref="map"></div>
|
||||
`,
|
||||
props: {
|
||||
data:{
|
||||
type:Array
|
||||
},
|
||||
height:{
|
||||
type:Number
|
||||
}
|
||||
},
|
||||
data() {
|
||||
return {
|
||||
option:{}
|
||||
}
|
||||
},
|
||||
mounted(){
|
||||
this.loadMap(this.data)
|
||||
window.chartClick = this.chartClick;
|
||||
},
|
||||
methods: {
|
||||
chartClick(id){
|
||||
this.$emit('projectid',id)
|
||||
},
|
||||
loadMap(outdata) {
|
||||
var myChart = echarts.init(this.$refs.map);
|
||||
var max =1000,
|
||||
min = 1;
|
||||
var maxSize4Pin = 100,
|
||||
minSize4Pin = 20;
|
||||
var geoCoordMap = {};
|
||||
/*获取地图数据*/
|
||||
var mapFeatures = echarts.getMap('china').geoJson.features;
|
||||
// console.log(mapFeatures)
|
||||
mapFeatures.forEach(function(v) {
|
||||
// 地区名称
|
||||
var name = v.properties.name;
|
||||
// 地区经纬度
|
||||
geoCoordMap[name] = v.properties.cp;
|
||||
});
|
||||
|
||||
var convertData = function(outdata) {
|
||||
var res = [];
|
||||
for (var i = 0; i < outdata.length; i++) {
|
||||
var geoCoord = geoCoordMap[outdata[i].name];
|
||||
if (geoCoord) {
|
||||
res.push({
|
||||
name: outdata[i].name,
|
||||
value: geoCoord.concat(outdata[i].count),
|
||||
items: outdata[i].items,
|
||||
});
|
||||
}
|
||||
}
|
||||
return res;
|
||||
};
|
||||
|
||||
this.option = {
|
||||
tooltip: {
|
||||
show: true,
|
||||
trigger: "item",
|
||||
enterable: true,
|
||||
showContent: true,
|
||||
padding:0,
|
||||
triggerOn:'click',
|
||||
formatter: function(params) {
|
||||
var tipHtml = ''
|
||||
if(params.data){
|
||||
tipHtml += '<div style="background:rgba(22,80,158,0.5);padding: 0 10px;">'
|
||||
+'<div style="width:100%;height:40px;line-height:40px;border-bottom:2px solid rgba(7,166,255,0.7);">'+'<i style="display:inline-block;width:10px;height:10px;background:#16d6ff;border-radius:40px;">'+'</i>'
|
||||
+'<span style="margin-left:10px;color:#fff;font-size:16px;">'+params.data.name+' （项目总数：'+params.data.value[2]+'）'+'</span>'+'</div>'
|
||||
+'<div style="padding:5px;max-height: 350px;overflow: auto" class="china-map">'
|
||||
for(var i=0;i<params.data.items.length;i++){
|
||||
tipHtml += '<p style="color:#11ee7d;padding:8px 0;cursor: pointer" onclick="chartClick('+params.data.items[i].id+')">'+params.data.items[i].projectName+'</p>'
|
||||
}
|
||||
tipHtml += '</div>'
|
||||
+'</div>';
|
||||
return tipHtml
|
||||
}
|
||||
},
|
||||
},
|
||||
geo: {
|
||||
map: 'china',
|
||||
show: true,
|
||||
roam: false,
|
||||
zoom: 1.17,
|
||||
label: {
|
||||
emphasis: {
|
||||
show: false,
|
||||
}
|
||||
},
|
||||
layoutSize: "100%",
|
||||
itemStyle: {
|
||||
// normal: {
|
||||
// areaColor: '#000', //背景颜色
|
||||
// borderColor: '#8ac2fb', //省划分边线
|
||||
// borderWidth: 10, //边线的粗细
|
||||
// },
|
||||
// emphasis: {
|
||||
// areaColor: '#002d90' , //指上背景限色
|
||||
// },
|
||||
areaColor: "#86c2f8",
|
||||
borderColor: "#86c2f8",
|
||||
shadowColor: "#86c2f8",
|
||||
shadowBlur: 25,
|
||||
borderWidth: 5,
|
||||
},
|
||||
},
|
||||
series: [{
|
||||
type: 'map',
|
||||
roam: false,
|
||||
zoom: 1.15,
|
||||
map: 'china', //使用
|
||||
label: {
|
||||
normal: {
|
||||
show: true,
|
||||
fontSize:14, //省会字体大小
|
||||
textStyle: {
|
||||
color: '#ffffff',
|
||||
}
|
||||
},
|
||||
emphasis: {
|
||||
show: false,
|
||||
color: '#ffffff', //指上省会字体颜色
|
||||
}
|
||||
},
|
||||
itemStyle: {
|
||||
normal: {
|
||||
areaColor: {
|
||||
type: "radial",
|
||||
x: 0.5,
|
||||
y: 0.5,
|
||||
r: 0.8,
|
||||
colorStops: [
|
||||
{
|
||||
offset: 0,
|
||||
color: "#1c2a4c", // 0% 处的颜色
|
||||
},
|
||||
{
|
||||
offset: 1,
|
||||
color: "#1f335e", // 100% 处的颜色
|
||||
},
|
||||
],
|
||||
globalCoord: true, // 缺省为 false
|
||||
},
|
||||
shadowColor: "rgb(58,115,192)",
|
||||
borderColor: '#8ac2fb'
|
||||
},
|
||||
// normal: {
|
||||
// areaColor: '#141e37', //背景颜色
|
||||
// borderColor: '#8ac2fb', //省划分边线
|
||||
// borderWidth: 1, //边线的粗细
|
||||
// },
|
||||
emphasis: {
|
||||
areaColor: '#22578b' , //指上背景限色
|
||||
textStyle: {
|
||||
color: '#ffffff',
|
||||
|
||||
}
|
||||
}
|
||||
},
|
||||
},
|
||||
{
|
||||
type: 'effectScatter',
|
||||
coordinateSystem: 'geo',
|
||||
rippleEffect: {
|
||||
brushType: 'stroke'
|
||||
},
|
||||
showEffectOn: 'render',
|
||||
itemStyle: {
|
||||
normal: {
|
||||
show: true,
|
||||
color: {
|
||||
type: 'radial',
|
||||
x: 0.5,
|
||||
y: 0.5,
|
||||
r: 0.5,
|
||||
colorStops: [{
|
||||
offset: 0,
|
||||
color: 'rgba(129,229,255,1)'
|
||||
}, {
|
||||
offset: 0.8,
|
||||
color: 'rgba(129,229,255,1)'
|
||||
}, {
|
||||
offset: 1,
|
||||
color: 'rgba(129,229,255,1)'
|
||||
}],
|
||||
global: false // 缺省为 false
|
||||
},
|
||||
}
|
||||
},
|
||||
label: {
|
||||
normal: {
|
||||
show: true,
|
||||
color: '#fff',
|
||||
fontWeight: 'bold',
|
||||
position: 'inside',
|
||||
formatter: function(para) {
|
||||
return '{cnNum|' + para.data.value[2] + '}'
|
||||
},
|
||||
rich: {
|
||||
cnNum: {
|
||||
fontSize: 16,
|
||||
color: '#000000',
|
||||
fontWeight:'bold',
|
||||
}
|
||||
}
|
||||
},
|
||||
},
|
||||
symbol: 'circle',
|
||||
data: convertData(outdata),
|
||||
zlevel: 1,
|
||||
symbolSize: function(val) {
|
||||
if (val[2] === 0) {
|
||||
return 0;
|
||||
}
|
||||
var a = (maxSize4Pin - minSize4Pin) / (max - min);
|
||||
var b = maxSize4Pin - a * max;
|
||||
return a * val[2] + b * 1.2;
|
||||
},
|
||||
}]
|
||||
};
|
||||
myChart.setOption(this.option);
|
||||
}
|
||||
},
|
||||
watch:{
|
||||
data: function (n,o) {
|
||||
this.loadMap(this.data)
|
||||
}
|
||||
}
|
||||
|
||||
})
|
||||
|
|
@ -1,256 +0,0 @@
|
|||
import Vue from 'vue'
|
||||
Vue.component("classify-bar", {
|
||||
template: `
|
||||
<div :style="{'height': height+'px'}" ref="chart">
|
||||
|
||||
</div>
|
||||
`,
|
||||
props: {
|
||||
data:{
|
||||
type:Array
|
||||
},
|
||||
height:{
|
||||
type:Number
|
||||
},
|
||||
legend:{
|
||||
type:Array
|
||||
},
|
||||
},
|
||||
data() {
|
||||
return {
|
||||
classData:[],
|
||||
}
|
||||
},
|
||||
mounted(){
|
||||
this.init()
|
||||
},
|
||||
methods: {
|
||||
init(){
|
||||
this.getChartData()
|
||||
},
|
||||
getChartData(){
|
||||
//品类金额占比 饼图
|
||||
var chChartPie = echarts.init(this.$refs.chart);
|
||||
this.echartPie(chChartPie,this.data)
|
||||
},
|
||||
echartPie(chChart,data){
|
||||
let newPromise = new Promise((resolve) => {
|
||||
resolve()
|
||||
})
|
||||
|
||||
//然后异步执行echarts的初始化函数
|
||||
newPromise.then(() => {
|
||||
if(data.length==0){
|
||||
return;
|
||||
}
|
||||
var max = data[0].total
|
||||
var nameData = [];
|
||||
var totalData = []
|
||||
var background = []
|
||||
var yesMonitor = []
|
||||
var notMonitor = []
|
||||
var yesProp = []
|
||||
var notProp = []
|
||||
var unitData = []
|
||||
|
||||
for (let i = data.length-1; i >=0 ; i--) {
|
||||
nameData.push(data[i].name);
|
||||
totalData.push(data[i].total)
|
||||
unitData.push(data[i].unit)
|
||||
background.push(100);
|
||||
yesMonitor.push(data[i].yesMonitor);
|
||||
notMonitor.push(data[i].notMonitor);
|
||||
yesProp.push((data[i].yesMonitor/max)*100)
|
||||
notProp.push((data[i].notMonitor/max)*100)
|
||||
}
|
||||
|
||||
var legend = ["已监控", "未监控"]
|
||||
if(this.legend){
|
||||
legend = this.legend
|
||||
}
|
||||
|
||||
this.option = {
|
||||
grid: {
|
||||
//图表的位置
|
||||
top: "8%",
|
||||
left: "3%",
|
||||
right: "5%",
|
||||
bottom: "-12%",
|
||||
containLabel: true,
|
||||
},
|
||||
legend: {
|
||||
right: "0",
|
||||
top: "0",
|
||||
//icon: "circle",
|
||||
itemWidth: 15,
|
||||
itemHeight:10,
|
||||
itemGap: 8,
|
||||
textStyle: {
|
||||
fontSize: 12,
|
||||
color:'#c6d9fa'
|
||||
},
|
||||
data: legend,
|
||||
},
|
||||
xAxis: [{
|
||||
show: false,
|
||||
},
|
||||
//由于下边X轴已经是百分比刻度了,所以需要在顶部加一个X轴,刻度是金额,也隐藏掉
|
||||
{
|
||||
show: false,
|
||||
}
|
||||
],
|
||||
yAxis: [
|
||||
{
|
||||
type: 'category',
|
||||
axisLabel: {
|
||||
show: false, //让Y轴数据不显示
|
||||
},
|
||||
itemStyle: {
|
||||
|
||||
},
|
||||
axisTick: {
|
||||
show: false, //隐藏Y轴刻度
|
||||
},
|
||||
axisLine: {
|
||||
show: false, //隐藏Y轴线段
|
||||
},
|
||||
data: [],
|
||||
},{
|
||||
show: false,
|
||||
data: [],
|
||||
axisLine: {
|
||||
show: false
|
||||
}
|
||||
}],
|
||||
series: [
|
||||
//数据条--------------------我是分割线君------------------------------//
|
||||
{
|
||||
show: true,
|
||||
type: 'bar',
|
||||
xAxisIndex: 1, //代表使用第二个X轴刻度!!!!!!!!!!!!!!!!!!!!!!!!
|
||||
barGap: '-100%',
|
||||
barWidth: '6', //统计条宽度
|
||||
itemStyle: {
|
||||
normal: {
|
||||
color: 'rgba(22,203,115,0.05)'
|
||||
},
|
||||
},
|
||||
label: {
|
||||
normal: {
|
||||
show: true,
|
||||
//label 的position位置可以是top bottom left,right,也可以是固定值
|
||||
//在这里需要上下统一对齐,所以用固定值
|
||||
position: [0, '-25'],
|
||||
rich: { //富文本
|
||||
prop: { //自定义颜色
|
||||
color: '#c6d9fa',
|
||||
fontSize:'14',
|
||||
},
|
||||
unit:{
|
||||
color: '#6c829a',
|
||||
fontSize:'12',
|
||||
},
|
||||
yes:{
|
||||
color: '#55adf7',
|
||||
fontSize:'14',
|
||||
},
|
||||
not:{
|
||||
color: '#4677fa',
|
||||
fontSize:'14',
|
||||
},
|
||||
index:{
|
||||
color: '#fcbc02',
|
||||
fontStyle: 'italic',
|
||||
padding:[0,0,0,5],
|
||||
fontSize:'14',
|
||||
},
|
||||
name: {
|
||||
width: 200,
|
||||
color: '#c6d9fa',
|
||||
padding:[0,0,0,10],
|
||||
fontSize:'14',
|
||||
},
|
||||
color:{
|
||||
color: '#8ca2be',
|
||||
fontSize:'14',
|
||||
},
|
||||
arrow:{
|
||||
width:12,
|
||||
height:8,
|
||||
backgroundColor: {
|
||||
image: "/cdn/images/WEB_2B7C06210CD44D55BFEE6205A35DE4A7.png",
|
||||
},
|
||||
},
|
||||
|
||||
},
|
||||
formatter: function(data) {
|
||||
//富文本固定格式{colorName|这里填你想要写的内容}
|
||||
//return '{arrow|}'
|
||||
return '{arrow|}{index|No.'+(nameData.length-data.dataIndex)+'}{name|' + nameData[data.dataIndex] + '}{prop|' + totalData[data.dataIndex] + '}{unit| '+unitData[data.dataIndex]+'}{prop|（} {yes|'+yesMonitor[data.dataIndex]+'}{unit| '+unitData[data.dataIndex]+'/}{not|'+notMonitor[data.dataIndex]+'}{unit| '+unitData[data.dataIndex]+'}{prop|）} ';
|
||||
},
|
||||
}
|
||||
},
|
||||
data: background
|
||||
},
|
||||
{
|
||||
type: 'bar',
|
||||
|
||||
silent: true,
|
||||
yAxisIndex: 1,
|
||||
barWidth: 6,
|
||||
itemStyle: {
|
||||
normal: {
|
||||
color: 'rgba(0,82,198,0.3)'
|
||||
},
|
||||
emphasis: {
|
||||
color: 'rgba(0,82,198,0.3)'
|
||||
}
|
||||
},
|
||||
data: background
|
||||
},
|
||||
{
|
||||
type: 'bar',
|
||||
name:legend[0],
|
||||
|
||||
stack: '1',
|
||||
legendHoverLink: false,
|
||||
barWidth: 6,
|
||||
itemStyle: {
|
||||
normal: {
|
||||
color: '#52adf4'
|
||||
},
|
||||
emphasis: {
|
||||
color: '#52adf4'
|
||||
}
|
||||
},
|
||||
data: yesProp
|
||||
}, {
|
||||
type: 'bar',
|
||||
name:legend[1],
|
||||
stack: '1',
|
||||
legendHoverLink: false,
|
||||
barWidth: 6,
|
||||
itemStyle: {
|
||||
normal: {
|
||||
color: '#4677ff'
|
||||
},
|
||||
emphasis: {
|
||||
color: '#4677ff'
|
||||
}
|
||||
},
|
||||
data: notProp
|
||||
}]
|
||||
};
|
||||
|
||||
chChart.setOption(this.option);
|
||||
window.onresize = chChart.resize;
|
||||
})
|
||||
},
|
||||
},
|
||||
watch:{
|
||||
data: function (n,o) {
|
||||
this.getChartData()
|
||||
}
|
||||
}
|
||||
|
||||
})
|
||||
|
|
@ -1,24 +0,0 @@
|
|||
import Vue from 'vue'
|
||||
Vue.component("cz-screen", {
|
||||
template: `
|
||||
|
||||
`,
|
||||
props: {
|
||||
|
||||
},
|
||||
data() {
|
||||
return {
|
||||
|
||||
}
|
||||
},
|
||||
mounted(){
|
||||
|
||||
},
|
||||
methods: {
|
||||
|
||||
},
|
||||
watch:{
|
||||
|
||||
}
|
||||
|
||||
})
|
||||
|
|
@ -1,181 +0,0 @@
|
|||
import Vue from 'vue'
|
||||
Vue.component("environment-line-chart", {
|
||||
template: `
|
||||
<div :style="{'height': height+'px'}" ref="chart">
|
||||
|
||||
</div>
|
||||
`,
|
||||
props: {
|
||||
height:{
|
||||
type:Number
|
||||
},
|
||||
data:{
|
||||
type:Array
|
||||
}
|
||||
},
|
||||
data() {
|
||||
return {
|
||||
|
||||
}
|
||||
},
|
||||
mounted(){
|
||||
this.init()
|
||||
},
|
||||
methods: {
|
||||
init(){
|
||||
this.getChartData()
|
||||
},
|
||||
getChartData(){
|
||||
//品类金额占比 饼图
|
||||
var myChart = echarts.init(this.$refs.chart);
|
||||
this.echartPie(myChart,this.data)
|
||||
},
|
||||
echartPie(myChart,datas){
|
||||
let newPromise = new Promise((resolve) => {
|
||||
resolve()
|
||||
})
|
||||
//然后异步执行echarts的初始化函数
|
||||
newPromise.then(() => {
|
||||
|
||||
var data = datas[0]
|
||||
|
||||
var unit = ''
|
||||
if(data.unit){
|
||||
unit = '单位：'+data.unit
|
||||
}
|
||||
|
||||
this.option = {
|
||||
color : data.color,
|
||||
tooltip: {
|
||||
trigger: "axis",
|
||||
axisPointer: {
|
||||
lineStyle: {
|
||||
color: "#57617B",
|
||||
},
|
||||
},
|
||||
},
|
||||
grid: {
|
||||
top:'15%',
|
||||
left: "1%",
|
||||
right: "3%",
|
||||
bottom: "1%",
|
||||
containLabel: true,
|
||||
},
|
||||
xAxis: {
|
||||
type: "category",
|
||||
boundaryGap: false,
|
||||
data: data.text,
|
||||
axisLine: {
|
||||
//坐标轴轴线相关设置。数学上的x轴
|
||||
show: true,
|
||||
lineStyle: {
|
||||
color: "#25597e",
|
||||
type: "dashed",
|
||||
},
|
||||
},
|
||||
axisTick: {
|
||||
show: false
|
||||
},
|
||||
|
||||
axisLabel: {
|
||||
//坐标轴刻度标签的相关设置
|
||||
textStyle: {
|
||||
color: "#c5d9fc",
|
||||
margin: 20,
|
||||
fontSize:16
|
||||
},
|
||||
},
|
||||
},
|
||||
yAxis: {
|
||||
name:unit,
|
||||
nameTextStyle: {
|
||||
color: '#fff',
|
||||
fontSize: 14,
|
||||
},
|
||||
type: "value",
|
||||
axisLine: {
|
||||
//坐标轴轴线相关设置。数学上的x轴
|
||||
show: false,
|
||||
lineStyle: {
|
||||
color: "#c5d9fc",
|
||||
type: "dashed",
|
||||
},
|
||||
},
|
||||
axisTick: {
|
||||
show: false
|
||||
},
|
||||
axisLabel: {
|
||||
show: true,
|
||||
//坐标轴刻度标签的相关设置
|
||||
textStyle: {
|
||||
color: "#c5d9fc",
|
||||
margin: 20,
|
||||
fontSize:16
|
||||
},
|
||||
},
|
||||
splitLine: {
|
||||
show: true,
|
||||
lineStyle: {
|
||||
color: "#25597e",
|
||||
type: "dashed",
|
||||
},
|
||||
},
|
||||
},
|
||||
series: [
|
||||
{
|
||||
type: "line",
|
||||
smooth: true,
|
||||
symbol: "circle",
|
||||
symbolSize: 5,
|
||||
showSymbol: true,
|
||||
lineStyle: {
|
||||
normal: {
|
||||
width: 2,
|
||||
},
|
||||
},
|
||||
areaStyle: {
|
||||
normal: {
|
||||
color: new echarts.graphic.LinearGradient(
|
||||
0,
|
||||
0,
|
||||
0,
|
||||
1,
|
||||
[
|
||||
{
|
||||
offset: 0,
|
||||
color: "rgba(0,142,252, 0.3)",
|
||||
},
|
||||
{
|
||||
offset: 0.8,
|
||||
color: "rgba(0,142,252, 0)",
|
||||
},
|
||||
],
|
||||
false
|
||||
),
|
||||
shadowColor: "rgba(0, 0, 0, 0.1)",
|
||||
shadowBlur: 10,
|
||||
},
|
||||
},
|
||||
itemStyle: {
|
||||
normal: {
|
||||
color: "rgb(0,142,252)",
|
||||
borderColor: "rgba(0,142,252,0.27)",
|
||||
borderWidth: 12,
|
||||
},
|
||||
},
|
||||
data: data.data,
|
||||
},
|
||||
]
|
||||
};
|
||||
myChart.setOption(this.option,true);
|
||||
window.onresize = myChart.resize;
|
||||
})
|
||||
},
|
||||
},
|
||||
watch:{
|
||||
data: function (val, oldVal){
|
||||
this.init()
|
||||
}
|
||||
}
|
||||
|
||||
})
|
||||
|
|
@ -1 +0,0 @@
|
|||
<?xml version="1.0" standalone="no"?><!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd"><svg t="1615876998076" class="icon" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="940" xmlns:xlink="http://www.w3.org/1999/xlink" width="200" height="200"><defs><style type="text/css"></style></defs><path d="M791.893333 0H232.106667C105.813333 0 0 105.813333 0 232.106667v559.786666C0 918.186667 105.813333 1024 232.106667 1024h559.786666c129.706667 0 232.106667-105.813333 232.106667-232.106667V232.106667C1024 105.813333 918.186667 0 791.893333 0z m-116.053333 508.586667l-273.066667 170.666666c-3.413333 3.413333-6.826667 3.413333-10.24 3.413334-3.413333 0-6.826667 0-6.826666-3.413334-6.826667-3.413333-10.24-10.24-10.24-13.653333v-307.2c0-6.826667 3.413333-10.24 6.826666-13.653333 3.413333-3.413333 10.24-3.413333 17.066667 0l273.066667 136.533333c6.826667 3.413333 10.24 6.826667 10.24 13.653333s-3.413333 10.24-6.826667 13.653334z" fill="#DFDFDF" p-id="941"></path></svg>
|
||||
|
Before Width: | Height: | Size: 1.0 KiB |
|
|
@ -1,7 +0,0 @@
|
|||
import H265PlayerComponent from './index.vue'
|
||||
export { H265Player, H265PlayerConstants } from './utils/player'
|
||||
|
||||
H265PlayerComponent.install = Vue =>
|
||||
Vue.component('H265Player', H265PlayerComponent)
|
||||
|
||||
export default H265PlayerComponent
|
||||
|
|
@ -1,154 +0,0 @@
|
|||
<template>
|
||||
<div class="h265-player-container">
|
||||
<img
|
||||
v-show="isShowPlayIcon"
|
||||
class="play-icon"
|
||||
:src="PlayButton"
|
||||
alt="PlayButton"
|
||||
/>
|
||||
<div class="player" :id="elemId"></div>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import PlayButton from './assets/play-button.svg'
|
||||
import {
|
||||
getRandomElemId,
|
||||
H265PlayerConstants,
|
||||
H265Player
|
||||
} from './utils/player.js'
|
||||
|
||||
export default {
|
||||
props: {
|
||||
url: {
|
||||
validator: prop =>
|
||||
[null, undefined].includes(prop) || typeof prop === 'string',
|
||||
default: null,
|
||||
required: true
|
||||
},
|
||||
maxRetryCount: {
|
||||
validator: prop => typeof prop === 'number' && prop >= 1,
|
||||
default: 3,
|
||||
required: false
|
||||
}
|
||||
},
|
||||
data: () => ({
|
||||
PlayButton,
|
||||
elemId: '',
|
||||
isShowPlayIcon: false
|
||||
}),
|
||||
watch: {
|
||||
url: {
|
||||
async handler (newUrl) {
|
||||
if (!newUrl) return
|
||||
await this.$nextTick()
|
||||
const action = this.player ? this.hotBoot : this.coolBoot
|
||||
action(newUrl)
|
||||
},
|
||||
immediate: true
|
||||
}
|
||||
},
|
||||
methods: {
|
||||
hotBoot (url) {
|
||||
if (!this.player) {
|
||||
this.coolBoot(url)
|
||||
return
|
||||
}
|
||||
this.player.changeUrl(url)
|
||||
},
|
||||
coolBoot (url) {
|
||||
const player = new H265Player(this.elemId, this.maxRetryCount)
|
||||
|
||||
player.play(url)
|
||||
|
||||
player.on(H265PlayerConstants.on_error, e => {
|
||||
this.$emit('on-error', e)
|
||||
})
|
||||
|
||||
player.on(H265PlayerConstants.on_play, e => {
|
||||
this.$emit('on-play', e)
|
||||
this.isShowPlayIcon = false
|
||||
})
|
||||
|
||||
player.on(H265PlayerConstants.on_dispose, e => {
|
||||
this.$emit('on-dispose', e)
|
||||
this.isShowPlayIcon = true
|
||||
})
|
||||
|
||||
this.player = player
|
||||
},
|
||||
getPlayer () {
|
||||
return this.player
|
||||
}
|
||||
},
|
||||
created () {
|
||||
this.elemId = getRandomElemId()
|
||||
this.player = null
|
||||
|
||||
this.$once('hook:beforeDestroy', () => {
|
||||
if (this.player) {
|
||||
this.player.dispose()
|
||||
this.player = null
|
||||
}
|
||||
})
|
||||
this.$once('hook:deactivated', () => {
|
||||
if (this.player) {
|
||||
this.player.dispose()
|
||||
this.player = null
|
||||
}
|
||||
})
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
||||
<style lang="less" scoped>
|
||||
.h265-player-container,
|
||||
.player {
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
}
|
||||
|
||||
.h265-player-container {
|
||||
position: initial;
|
||||
}
|
||||
|
||||
.play-icon {
|
||||
position: absolute;
|
||||
top: 50%;
|
||||
left: 50%;
|
||||
transform: translate(-50%, -50%);
|
||||
width: 4rem;
|
||||
height: 4rem;
|
||||
object-fit: contain;
|
||||
cursor: pointer;
|
||||
z-index: 1;
|
||||
}
|
||||
|
||||
.player {
|
||||
background-color: #343231;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
}
|
||||
|
||||
::v-deep {
|
||||
.iconqingxiLOGO,
|
||||
span.fa-volume-off,
|
||||
span.fa-stop {
|
||||
display: none !important;
|
||||
}
|
||||
|
||||
canvas + div {
|
||||
background-color: rgba(0,0,0,0.05) !important;
|
||||
}
|
||||
|
||||
span.fa-volume-off + .no-padding {
|
||||
font-size: 12px !important;
|
||||
}
|
||||
|
||||
span.fa-pause,
|
||||
span.fa-expand {
|
||||
font-size: 12px !important;
|
||||
}
|
||||
}
|
||||
</style>
|
||||
Binary file not shown.
|
|
@ -1,20 +0,0 @@
|
|||
import LogT from 'logt';
|
||||
const TAG = 'h265-player';
|
||||
const log = new LogT(5);
|
||||
export const logger = {
|
||||
ok: (...args) => {
|
||||
log.silly(TAG, '', ...args);
|
||||
},
|
||||
info: (...args) => {
|
||||
log.info(TAG, '', ...args);
|
||||
},
|
||||
warn: (...args) => {
|
||||
log.warn(TAG, '', ...args);
|
||||
},
|
||||
fatal: (...args) => {
|
||||
log.error(TAG, '', ...args);
|
||||
},
|
||||
verbose: (...args) => {
|
||||
log.verbose(TAG, '', ...args);
|
||||
}
|
||||
};
|
||||
|
|
@ -1,204 +0,0 @@
|
|||
import WasmPlayer from '@easydarwin/easywasmplayer/EasyWasmPlayer.js';
|
||||
import Emittery from 'emittery';
|
||||
import { v4 as uuidv4 } from 'uuid';
|
||||
import axios from 'axios';
|
||||
import { logger } from './logger';
|
||||
/**
|
||||
* 获取一个随机的 元素id,用作播放器的元素id
|
||||
*/
|
||||
export const getRandomElemId = () => {
|
||||
return uuidv4();
|
||||
};
|
||||
export var H265PlayerConstants;
|
||||
(function (H265PlayerConstants) {
|
||||
H265PlayerConstants["on_play"] = "on_play";
|
||||
H265PlayerConstants["on_stop"] = "on_stop";
|
||||
H265PlayerConstants["on_endLoading"] = "on_endLoading";
|
||||
H265PlayerConstants["on_pause"] = "on_pause";
|
||||
H265PlayerConstants["on_resume"] = "on_resume";
|
||||
H265PlayerConstants["on_dispose"] = "on_dispose";
|
||||
H265PlayerConstants["on_error"] = "on_error";
|
||||
H265PlayerConstants["on_player_cb"] = "on_player_cb";
|
||||
})(H265PlayerConstants || (H265PlayerConstants = {}));
|
||||
export class H265Player extends Emittery {
|
||||
/**
|
||||
* @param elemId 播放器元素id
|
||||
* @param maxRetryCount 最大尝试重连次数
|
||||
*/
|
||||
constructor(elemId, maxRetryCount = 3) {
|
||||
super();
|
||||
this.timer = 0;
|
||||
this.currentUrl = '';
|
||||
this.elemId = elemId;
|
||||
this.maxRetryCount = maxRetryCount <= 0 ? 3 : maxRetryCount;
|
||||
this.retryCount = this.maxRetryCount;
|
||||
this.init();
|
||||
}
|
||||
init() {
|
||||
if (this.player) {
|
||||
this.dispose();
|
||||
}
|
||||
logger.verbose('init player ~');
|
||||
this.player = new WasmPlayer(null, this.elemId, this.playerCbFunc.bind(this), {
|
||||
Height: true,
|
||||
HideKbs: true
|
||||
});
|
||||
}
|
||||
play(url) {
|
||||
var _a;
|
||||
if (!url) {
|
||||
logger.fatal('url is not valid');
|
||||
this.dispose();
|
||||
return;
|
||||
}
|
||||
logger.ok('start to play ~');
|
||||
// eslint-disable-next-line no-unused-expressions
|
||||
(_a = this.player) === null || _a === void 0 ? void 0 : _a.play(url, 1);
|
||||
this.currentUrl = url;
|
||||
this.startUrlHeartBeat();
|
||||
}
|
||||
pause() {
|
||||
var _a;
|
||||
logger.warn('player pause');
|
||||
this.emit(H265PlayerConstants.on_pause);
|
||||
// eslint-disable-next-line no-unused-expressions
|
||||
(_a = this.player) === null || _a === void 0 ? void 0 : _a.destroy();
|
||||
this.player = null;
|
||||
this.stopUrlHeartBeat();
|
||||
}
|
||||
resume() {
|
||||
logger.info('player resume');
|
||||
this.emit(H265PlayerConstants.on_resume);
|
||||
this.init();
|
||||
this.play(this.currentUrl);
|
||||
}
|
||||
playerCbFunc(type) {
|
||||
logger.info('player cb function：', type);
|
||||
this.emit(H265PlayerConstants.on_player_cb, type);
|
||||
switch (type) {
|
||||
case 'play':
|
||||
this.emit(H265PlayerConstants.on_play);
|
||||
this.player.endLoading();
|
||||
break;
|
||||
case 'stop':
|
||||
this.emit(H265PlayerConstants.on_stop);
|
||||
break;
|
||||
case 'endLoading':
|
||||
this.emit(H265PlayerConstants.on_endLoading);
|
||||
break;
|
||||
case 'pause':
|
||||
this.emit(H265PlayerConstants.on_pause);
|
||||
break;
|
||||
default:
|
||||
break;
|
||||
}
|
||||
}
|
||||
changeUrl(newUrl) {
|
||||
logger.info('change url');
|
||||
this.dispose();
|
||||
this.init();
|
||||
this.play(newUrl);
|
||||
}
|
||||
dispose() {
|
||||
var _a;
|
||||
logger.warn('dispose player');
|
||||
this.stopUrlHeartBeat();
|
||||
// eslint-disable-next-line no-unused-expressions
|
||||
(_a = this.player) === null || _a === void 0 ? void 0 : _a.destroy();
|
||||
this.player = null;
|
||||
this.currentUrl = '';
|
||||
this.retryCount = this.maxRetryCount;
|
||||
this.emit(H265PlayerConstants.on_dispose);
|
||||
}
|
||||
stopUrlHeartBeat() {
|
||||
logger.warn('stop url alive heartbeat');
|
||||
if (this.timer) {
|
||||
window.clearTimeout(this.timer);
|
||||
}
|
||||
}
|
||||
startUrlHeartBeat() {
|
||||
this.stopUrlHeartBeat();
|
||||
const url = this.currentUrl;
|
||||
if (!url) {
|
||||
logger.fatal('start url heart beat failed , because of url is not ok, url is:', url);
|
||||
return;
|
||||
}
|
||||
const HEART_BEAT_TIMEOUT = 6 * 1000; // 每隔多少秒进行一次心跳检测
|
||||
logger.verbose(`start url alive heartbeat, every ${HEART_BEAT_TIMEOUT} seconds`);
|
||||
checkUrlIsValid(url)
|
||||
.then(() => {
|
||||
logger.ok('url heartbeat ok, prepare for next heartbeat ~');
|
||||
// 如果正常，开始下一次检测
|
||||
this.timer = window.setTimeout(() => {
|
||||
this.startUrlHeartBeat();
|
||||
}, HEART_BEAT_TIMEOUT);
|
||||
})
|
||||
.catch((e) => {
|
||||
if (e.status === 501) {
|
||||
logger.fatal(e.statusText);
|
||||
this.dispose();
|
||||
return;
|
||||
}
|
||||
this.retryCount--;
|
||||
logger.fatal('url heartbeat failed with', e);
|
||||
if (this.retryCount <= 0) {
|
||||
logger.warn('reach max retry count, will dispose player ');
|
||||
this.emit(H265PlayerConstants.on_error, e);
|
||||
this.dispose();
|
||||
}
|
||||
else {
|
||||
logger.info('left retry count is: ', `${this.retryCount} / ${this.maxRetryCount} (left / total)`);
|
||||
logger.info('retry heartbeat ...');
|
||||
this.timer = window.setTimeout(() => {
|
||||
this.startUrlHeartBeat();
|
||||
}, HEART_BEAT_TIMEOUT);
|
||||
}
|
||||
});
|
||||
}
|
||||
}
|
||||
/**
|
||||
* 检测一个 URL 是否能够正常访问
|
||||
* @param url 要测试的 url
|
||||
* @param timeout 超时时间
|
||||
* @returns 是否能够正常访问
|
||||
*/
|
||||
const checkUrlIsValid = (url, timeout = 5 * 1000) => {
|
||||
return new Promise((resolve, reject) => {
|
||||
if (!isValidURL(url) && !url.includes('m3u8')) {
|
||||
// eslint-disable-next-line prefer-promise-reject-errors
|
||||
return reject({
|
||||
status: 501,
|
||||
statusText: 'url is not valid'
|
||||
});
|
||||
}
|
||||
axios
|
||||
.get(`${url}&__time=${Date.now()}`, {
|
||||
responseType: 'blob',
|
||||
timeout
|
||||
})
|
||||
.then(resolve)
|
||||
.catch(e => {
|
||||
if (e.response) {
|
||||
const { status, statusText } = e.response || {};
|
||||
// eslint-disable-next-line prefer-promise-reject-errors
|
||||
reject({ status, statusText });
|
||||
}
|
||||
else {
|
||||
// eslint-disable-next-line prefer-promise-reject-errors
|
||||
reject({
|
||||
status: 500,
|
||||
statusText: (e === null || e === void 0 ? void 0 : e.message) || 'network error'
|
||||
});
|
||||
}
|
||||
});
|
||||
});
|
||||
};
|
||||
/**
|
||||
* 检查一个url是否合法
|
||||
* @param url 待检查的 url
|
||||
* @returns 是否合法
|
||||
*/
|
||||
export const isValidURL = (url) => {
|
||||
const res = url.match(/(http(s)?:\/\/.)?(www\.)?[-a-zA-Z0-9@:%._+~#=]{2,256}\.[a-z]{2,6}\b([-a-zA-Z0-9@:%_+.~#?&//=]*)/g);
|
||||
return res !== null;
|
||||
};
|
||||
|
|
@ -1,200 +0,0 @@
|
|||
import Vue from 'vue'
|
||||
Vue.component("header-btn", {
|
||||
template: `
|
||||
<div class="header-btn-max" @mouseleave="mouseleaveBtn">
|
||||
<div :class="nav==chooseMenu.mainMenu?'head-nav active':'head-nav'" @mouseenter="mouseenterBtn" @click="pageJump(nav,menu.menuDeptUrl,menu.menuProjectUrl)">{{label}}</div>
|
||||
<div class="header-btn-list" v-show="show" style="display: none" v-if="sonMenuList.length != 0 && !red" >
|
||||
<div class="header-btn-list-arrow"></i></div>
|
||||
<div class="header-btn-list-item" :style="{width:widths+'px'}">
|
||||
<div class="header-btn-list-padding">
|
||||
<button type="button" :class="(i==chooseMenu.itemMenu && nav==chooseMenu.mainMenu )?'active':''" v-for="(item,i) in sonMenuList" @click="buttonClick(i,item)">{{item.text}}</button>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="header-btn-list" v-show="show" style="display: none" v-if="sonMenuList.length != 0 && red" >
|
||||
<div class="header-btn-list-arrow-active"></i></div>
|
||||
<div class="header-btn-list-item-active" :style="{width:widths+'px'}">
|
||||
<div class="header-btn-list-padding-red">
|
||||
<button type="button" :class="(i==chooseMenu.itemMenu && nav==chooseMenu.mainMenu )?' actives':''" v-for="(item,i) in sonMenuList" @click="buttonClick(i,item)">{{item.text}}</button>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
`,
|
||||
props: {
|
||||
red:{
|
||||
type:String
|
||||
},
|
||||
menu:{
|
||||
type: Object
|
||||
},
|
||||
index:{
|
||||
type: Number
|
||||
},
|
||||
label: {
|
||||
type: String
|
||||
},
|
||||
nav: {
|
||||
type: Number
|
||||
},
|
||||
list: {
|
||||
type: Array
|
||||
},
|
||||
type:{
|
||||
type:String
|
||||
}
|
||||
},
|
||||
data() {
|
||||
return {
|
||||
show: false,
|
||||
widths: 0,
|
||||
btnNav: -1,
|
||||
chooseMenu: {},
|
||||
localStorage:{},
|
||||
sonMenuList: []
|
||||
}
|
||||
},
|
||||
mounted() {
|
||||
this.localStorage=JSON.parse(localStorage.getItem("data1"))
|
||||
this.filterList()
|
||||
this.init()
|
||||
},
|
||||
methods: {
|
||||
init() {
|
||||
this.width()
|
||||
this.chooseMenu = localStorage.getItem("chooseMenu");
|
||||
if (!this.chooseMenu) {
|
||||
this.chooseMenu = {}
|
||||
} else {
|
||||
this.chooseMenu = JSON.parse(localStorage.getItem("chooseMenu"))
|
||||
}
|
||||
|
||||
},
|
||||
filterList(){
|
||||
for(let l of this.list){
|
||||
if(this.localStorage.type == 1 && l.menuDeptUrl){
|
||||
this.sonMenuList.push(l)
|
||||
}
|
||||
if(this.localStorage.type != 1 && l.menuProjectUrl){
|
||||
this.sonMenuList.push(l)
|
||||
}
|
||||
}
|
||||
},
|
||||
width() {
|
||||
if (this.sonMenuList) {
|
||||
if (this.list.length > 4) {
|
||||
this.widths = 536
|
||||
} else {
|
||||
this.widths = this.sonMenuList.length * 130 + 16
|
||||
}
|
||||
}
|
||||
|
||||
},
|
||||
buttonClick(i, item) {
|
||||
|
||||
this.btnNav = i
|
||||
localStorage.setItem("chooseProcessControlMenu", i)
|
||||
/*
|
||||
switch (item.text) {
|
||||
case "原材料进场":
|
||||
localStorage.setItem("chooseProcessControlMenu", 0)
|
||||
break
|
||||
case "标养室监测":
|
||||
localStorage.setItem("chooseProcessControlMenu", 1)
|
||||
break
|
||||
case "过程验收":
|
||||
localStorage.setItem("chooseProcessControlMenu", 2)
|
||||
break
|
||||
case "举牌验收":
|
||||
localStorage.setItem("chooseProcessControlMenu", 3)
|
||||
break
|
||||
}*/
|
||||
if(this.localStorage.type == 1){
|
||||
if (item.menuDeptUrl) {
|
||||
this.chooseMenu = {
|
||||
mainMenu: this.nav,
|
||||
itemMenu: i,
|
||||
}
|
||||
localStorage.setItem("chooseMenu", JSON.stringify(this.chooseMenu));
|
||||
location.href = item.menuDeptUrl
|
||||
}/* else {
|
||||
this.$notify({
|
||||
title: '提示',
|
||||
message: '页面开发中，敬请期待！',
|
||||
type: 'warning'
|
||||
});
|
||||
}*/
|
||||
}else{
|
||||
if (item.menuProjectUrl) {
|
||||
this.chooseMenu = {
|
||||
mainMenu: this.nav,
|
||||
itemMenu: i,
|
||||
}
|
||||
localStorage.setItem("chooseMenu", JSON.stringify(this.chooseMenu));
|
||||
location.href = item.menuProjectUrl
|
||||
}/* else {
|
||||
this.$notify({
|
||||
title: '提示',
|
||||
message: '页面开发中，敬请期待！',
|
||||
type: 'warning'
|
||||
});
|
||||
}*/
|
||||
}
|
||||
|
||||
|
||||
},
|
||||
mouseenterBtn() {
|
||||
this.show = true
|
||||
this.$emit('showsmallui',{"flag":true,"data":this.list,"label":this.label,"index":this.index});
|
||||
},
|
||||
mouseleaveBtn() {
|
||||
this.show = false
|
||||
this.$emit('showsmallui',{"flag":false,"data":this.list,"label":this.label,"index":this.index});
|
||||
},
|
||||
//页面条状
|
||||
pageJump(n,url,itemurl){
|
||||
// if(url){
|
||||
// let chooseMenu = {
|
||||
// mainMenu:n,
|
||||
// }
|
||||
// localStorage.setItem("chooseMenu",JSON.stringify(chooseMenu));
|
||||
// location.href = url
|
||||
// }
|
||||
if(this.localStorage.type == 1){
|
||||
if(url){
|
||||
let chooseMenu = {
|
||||
mainMenu:n,
|
||||
}
|
||||
localStorage.setItem("chooseMenu",JSON.stringify(chooseMenu));
|
||||
location.href = url
|
||||
}/*else{
|
||||
this.$notify({
|
||||
title: '提示',
|
||||
message: '功能升级中，敬请期待！',
|
||||
type: 'warning'
|
||||
});
|
||||
}*/
|
||||
}else{
|
||||
if(itemurl){
|
||||
this.chooseMenu = {
|
||||
mainMenu:n
|
||||
}
|
||||
localStorage.setItem("chooseMenu",JSON.stringify(this.chooseMenu));
|
||||
location.href = itemurl
|
||||
}/*else{
|
||||
this.$notify({
|
||||
title: '提示',
|
||||
message: '功能升级中，敬请期待！',
|
||||
type: 'warning'
|
||||
});
|
||||
}*/
|
||||
}
|
||||
},
|
||||
},
|
||||
watch: {
|
||||
list: function () {
|
||||
this.width()
|
||||
}
|
||||
},
|
||||
|
||||
})
|
||||
|
|
@ -1,637 +0,0 @@
|
|||
<template>
|
||||
<div :class="red ? 'head-title red-head' : 'head-title'" class="main-header" :key="nav">
|
||||
<div class="head-title-label">
|
||||
<img src="cflogo.png" style="position: absolute;height: 24px;left: 4px;top: 28px;">
|
||||
<span style="margin-left: 108px;display: block;margin-top: 3px;">产发工程数字管理平台</span>
|
||||
</div>
|
||||
<div class="head-title-tab">
|
||||
<div v-if="!isTypeBuser" :class="nav == 1 ? 'head-nav active' : 'head-nav'" @click="pageJump(1, '#/')">项目概况
|
||||
</div>
|
||||
<div :class="(nav >= 20 && nav < 40) || nav == 2 ? 'head-nav active' : 'head-nav'" style="position: relative;"
|
||||
class="has-submenu">
|
||||
<div @click="pageJump(2, '#/detail')">项目详情</div>
|
||||
<div class="header-btn-list" v-if="!isTypeBuser">
|
||||
<div class="header-btn-list-arrow"></div>
|
||||
<div class="header-btn-list-item" style="">
|
||||
<div class="header-btn-list-padding menu-row1" style="text-align: left;">
|
||||
<button type="button" :class="nav == 21 ? 'active' : ''" class="sub-btn"
|
||||
@click="pageJump(21, '#/prjSafety')">安全管理</button>
|
||||
<button type="button" :class="nav == 22 ? 'active' : ''" class="sub-btn"
|
||||
@click="pageJump(22, '#/prjQuality')">质量管理</button>
|
||||
<button type="button" :class="nav == 23 ? 'active' : ''" class="sub-btn"
|
||||
@click="pageJump(23, '#/prjProgress')">进度管理</button>
|
||||
<button type="button" :class="nav == 24 ? 'active' : ''" class="sub-btn"
|
||||
@click="pageJump(24, '#/prjEngin')">工程管理</button>
|
||||
</div>
|
||||
<div
|
||||
style="color:rgb(1, 169, 255);margin:0px 12px;text-align: left;border-bottom: dotted 1px #cccccc88;font-weight: bold;line-height:30px;">
|
||||
监测监控</div>
|
||||
<div class="header-btn-list-padding menu-row2" style="text-align: left;">
|
||||
<button type="button" :class="nav == 25 ? 'active' : ''" class="sub-btn"
|
||||
@click="pageJump(25, '#/prjVideo')">视频监控</button>
|
||||
<button type="button" :class="nav == 26 ? 'active' : ''" class="sub-btn"
|
||||
@click="pageJump(26, '#/prjAiVideo')">AI智能监测</button>
|
||||
<button type="button" :class="nav == 27 ? 'active' : ''" class="sub-btn"
|
||||
@click="pageJump(27, '#/prjPhotography')">项目全景</button>
|
||||
<button type="button" :class="nav == 28 ? 'active' : ''" class="sub-btn"
|
||||
@click="pageJump(28, '#/towerCrane')">塔吊监测</button><br />
|
||||
<button type="button" :class="nav == 29 ? 'active' : ''" class="sub-btn"
|
||||
@click="pageJump(29, '#/excavation')">基坑监测</button>
|
||||
<button type="button" :class="nav == 30 ? 'active' : ''" class="sub-btn"
|
||||
@click="pageJump(30, '#/distributionBox')">配电箱监测</button>
|
||||
<button type="button" :class="nav == 31 ? 'active' : ''" class="sub-btn"
|
||||
@click="pageJump(31, '#/dumbwaiter')">升降机监测</button>
|
||||
<button type="button" :class="nav == 32 ? 'active' : ''" class="sub-btn" style="display: none;"
|
||||
@click="pageJump(32, '#/personnelPosition')">人员定位</button><br />
|
||||
<button type="button" :class="nav == 33 ? 'active' : ''" class="sub-btn"
|
||||
@click="pageJump(33, '#/standardCuringRoom')">标养室监测</button>
|
||||
<button type="button" :class="nav == 34 ? 'active' : ''" class="sub-btn"
|
||||
@click="pageJump(34, '#/concreteStrength')">混凝土强度监测</button>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div :class="nav == 3 ? 'head-nav active' : 'head-nav'" @click="pageJump(3, '#/safety')">安全管理</div>
|
||||
<div :class="nav == 4 ? 'head-nav active' : 'head-nav'" @click="pageJump(4, '#/quality')">质量管理</div>
|
||||
<div :class="nav == 5 ? 'head-nav active' : 'head-nav'" @click="pageJump(5, '#/progress')">进度管理</div>
|
||||
<div :class="nav>=60 && nav <=69 ? 'head-nav active' : 'head-nav'" style="position: relative;"
|
||||
class="has-submenu">
|
||||
<div>监测监控</div>
|
||||
<div class="header-btn-list">
|
||||
<div class="header-btn-list-arrow"></div>
|
||||
<div class="header-btn-list-item" style="">
|
||||
<div class="header-btn-list-padding" style="text-align: left;">
|
||||
<button type="button" :class="nav == 60 ? 'active' : ''" class="sub-btn"
|
||||
@click="pageJump(60, '#/video')">视频监控</button>
|
||||
<button type="button" :class="nav == 61 ? 'active' : ''" class="sub-btn"
|
||||
@click="pageJump(61, '#/aiVideo')">AI智能监测</button>
|
||||
<button v-if="1 == 1" type="button" :class="nav == 62 ? 'active' : ''" class="sub-btn"
|
||||
@click="pageJump(62, '#/photography')">项目全景</button>
|
||||
<template v-if="isTypeBuser">
|
||||
<button type="button" :class="nav == 63 ? 'active' : ''" class="sub-btn"
|
||||
@click="pageJump(63, '#/videoTowerCrane')">塔吊监测</button><br />
|
||||
<button type="button" :class="nav == 64 ? 'active' : ''" class="sub-btn"
|
||||
@click="pageJump(64, '#/videoExcavation')">基坑监测</button>
|
||||
<button type="button" :class="nav == 65 ? 'active' : ''" class="sub-btn"
|
||||
@click="pageJump(65, '#/videoDistributionBox')">配电箱监测</button>
|
||||
<button type="button" :class="nav == 66 ? 'active' : ''" class="sub-btn"
|
||||
@click="pageJump(66, '#/videoDumbwaiter')">升降机监测</button>
|
||||
<button type="button" :class="nav == 67 ? 'active' : ''" class="sub-btn" style="display: none;"
|
||||
@click="pageJump(67, '#/videoPersonnelPosition')">人员定位</button><br />
|
||||
<button type="button" :class="nav == 68 ? 'active' : ''" class="sub-btn"
|
||||
@click="pageJump(68, '#/videoStandardCuringRoom')">标养室监测</button>
|
||||
<button type="button" :class="nav == 69 ? 'active' : ''" class="sub-btn"
|
||||
@click="pageJump(69, '#/videoConcreteStrength')">混凝土强度监测</button>
|
||||
</template>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div v-if="!isTypeBuser" :class="(nav >= 70 && nav < 80) || nav == 7 ? 'head-nav active' : 'head-nav'"
|
||||
style="position: relative;" class="has-submenu">
|
||||
<div @click="pageJump(7, '#/engin')">工程管理</div>
|
||||
<div class="header-btn-list">
|
||||
<div class="header-btn-list-arrow"></div>
|
||||
<div class="header-btn-list-item" style="">
|
||||
<div class="header-btn-list-padding" style="text-align: left;">
|
||||
<button type="button" :class="nav == 71 ? 'active' : ''" class="sub-btn"
|
||||
@click="pageJump(71, '#/enginAuditing')">工程审批</button>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div v-if="isTypeBuser" :class="nav == 7 ? 'head-nav active' : 'head-nav'" style="position: relative;"
|
||||
@click="pageJump(7, '#/enginBUser')">工程管理
|
||||
</div>
|
||||
</div>
|
||||
<template v-if="!isTypeBuser">
|
||||
<div class="head-title-select title-select1" @mouseleave="hideScreenUlSel1" v-if="localStorage1">
|
||||
<div class="head-select head-select-150">
|
||||
<input type="text" :value="dept1" @click="showScreenUlSel1" placeholder="请选择公司" readonly>
|
||||
</div>
|
||||
<el-collapse-transition>
|
||||
<ul class="header-screen-ul" v-show="showSel1" ref="selectUl">
|
||||
<li v-for="item in depts" @click="setScreenLiSel1(item)" :title="item.text">{{ item.text }}</li>
|
||||
</ul>
|
||||
</el-collapse-transition>
|
||||
</div>
|
||||
</template>
|
||||
<div class="head-title-select title-select1" @mouseleave="hideScreenUlSel3">
|
||||
<div class="head-select head-select-150">
|
||||
<input type="text" :value="proType" @click="showScreenUlSel3" placeholder="项目类型" readonly>
|
||||
</div>
|
||||
<el-collapse-transition>
|
||||
<ul class="header-screen-ul" v-show="showSel3">
|
||||
<li v-for="item in proTypeList" @click="setScreenLiSel3(item)" :title="item.text">{{ item.text }}
|
||||
</li>
|
||||
</ul>
|
||||
</el-collapse-transition>
|
||||
</div>
|
||||
<div class="head-title-select title-select3" @mouseleave="hideScreenUlSel2" v-if="localStorage2">
|
||||
<div class="head-select">
|
||||
<input type="text" :value="dept2" @click="showScreenUlSel2" placeholder="请选择项目" readonly>
|
||||
</div>
|
||||
<el-collapse-transition>
|
||||
<ul class="header-screen-ul" v-show="showSel2" ref="selectUl">
|
||||
<li v-for="item in data" @click="setScreenLiSel2(item)" :title="item.text">{{ item.text }}</li>
|
||||
</ul>
|
||||
</el-collapse-transition>
|
||||
</div>
|
||||
<div class="head-title-date">
|
||||
<div class="head-title-time" v-if="1 == 2">
|
||||
<div class="head-title-date-con">{{ date }}</div>
|
||||
<div class="head-title-time-con">{{ time }}</div>
|
||||
</div>
|
||||
<!--
|
||||
<div class="head-title-weather">
|
||||
<img :src="condCode">
|
||||
<span>{{ condTxt }}</span>
|
||||
<span>{{ temperature }}℃</span>
|
||||
</div>
|
||||
-->
|
||||
<div class="header-title-user" style="margin-left:12px;">
|
||||
{{ getName() }}
|
||||
<i @click="doLogout" title="退出" style="margin-left:12px;cursor: pointer;">
|
||||
<svg class="icon"
|
||||
style=" width:20px;height: 20px;vertical-align: middle;fill: currentColor;overflow: hidden;"
|
||||
viewBox="0 0 1072 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="3432">
|
||||
<path
|
||||
d="M1057.279808 548.106418a47.221004 47.221004 0 0 1-7.674052 5.499737l-198.681223 199.525368a51.160351 51.160351 0 0 1-72.366316-72.340736l117.157204-117.668807L357.38063 562.763858a51.160351 51.160351 0 1 1 0-102.320701l540.713747 0.409282-119.58732-120.226824a51.160351 51.160351 0 0 1 72.366316-72.366316l199.83233 200.753216a48.09073 48.09073 0 0 1 6.574105 4.37421 54.511354 54.511354 0 0 1 0 74.719693zM972.046664 256.543579a51.160351 51.160351 0 0 1-51.160351-51.160351v-10.564612c-1.50923-72.289576-20.259499-91.85841-100.197547-92.421174l-627.430541 0.332542c-75.154555 2.148735-89.760835 24.173266-89.760835 101.885839L102.320701 157.57388l0.332543 685.369639c3.862606 61.597062 25.580175 77.968375 103.139267 77.968374l-103.088107-0.665084v1.099947l818.565612-0.409283-0.204642-66.943318-0.460443 66.227074-103.216007 0.690664c83.08441 0 102.0649-19.133971 103.59971-92.523494v-10.564612a51.160351 51.160351 0 0 1 102.320701 0L1023.386076 869.725962H1023.207015v51.160351a102.320701 102.320701 0 0 1-102.320702 102.320702h-54.357873l-709.849866 0.358122V1023.207015H102.320701a102.09048 102.09048 0 0 1-101.860258-97.767431L0 101.911419A102.03932 102.03932 0 0 1 97.74185 0.460443L921.244436 0A102.320701 102.320701 0 0 1 1023.207015 102.320701v51.160351h0.179061L1023.207015 205.383228a51.160351 51.160351 0 0 1-51.160351 51.160351zM102.320701 102.781145v0.179061l31.438036-0.204642H102.320701zM834.246259 102.320701l86.307512 0.588344 0.460443 66.227075L921.218855 102.320701z"
|
||||
fill="#0090FF" p-id="3433"></path>
|
||||
</svg>
|
||||
</i>
|
||||
</div>
|
||||
</div>
|
||||
<i class="set-fullscreen set-font-size" style="margin-left: 16px;position: absolute;top: 30px;right: 24px;"
|
||||
@click="toggleFullScreen">
|
||||
<svg class="icon" v-if="!isFullScreen"
|
||||
style="width: 24px; vertical-align: middle;fill: currentColor;overflow: hidden;" viewBox="0 0 1024 1024"
|
||||
version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="3304">
|
||||
<path
|
||||
d="M145.066667 85.333333h153.6c25.6 0 42.666667-17.066667 42.666666-42.666666S324.266667 0 298.666667 0H34.133333C25.6 0 17.066667 8.533333 8.533333 17.066667 0 25.6 0 34.133333 0 42.666667v256c0 25.6 17.066667 42.666667 42.666667 42.666666s42.666667-17.066667 42.666666-42.666666V145.066667l230.4 230.4c17.066667 17.066667 42.666667 17.066667 59.733334 0 17.066667-17.066667 17.066667-42.666667 0-59.733334L145.066667 85.333333z m170.666666 563.2L162.133333 802.133333l-76.8 76.8V725.333333C85.333333 699.733333 68.266667 682.666667 42.666667 682.666667s-42.666667 17.066667-42.666667 42.666666v256c0 25.6 17.066667 42.666667 42.666667 42.666667h256c25.6 0 42.666667-17.066667 42.666666-42.666667s-17.066667-42.666667-42.666666-42.666666H145.066667l76.8-76.8 153.6-153.6c17.066667-17.066667 17.066667-42.666667 0-59.733334-17.066667-17.066667-42.666667-17.066667-59.733334 0z m665.6 34.133334c-25.6 0-42.666667 17.066667-42.666666 42.666666v153.6l-76.8-76.8-153.6-153.6c-17.066667-17.066667-42.666667-17.066667-59.733334 0-17.066667 17.066667-17.066667 42.666667 0 59.733334l153.6 153.6 76.8 76.8H725.333333c-25.6 0-42.666667 17.066667-42.666666 42.666666s17.066667 42.666667 42.666666 42.666667h256c25.6 0 42.666667-17.066667 42.666667-42.666667v-256c0-25.6-17.066667-42.666667-42.666667-42.666666z m0-682.666667h-256c-25.6 0-42.666667 17.066667-42.666666 42.666667s17.066667 42.666667 42.666666 42.666666h153.6l-76.8 76.8-153.6 153.6c-17.066667 17.066667-17.066667 42.666667 0 59.733334 17.066667 17.066667 42.666667 17.066667 59.733334 0l153.6-153.6 76.8-76.8v153.6c0 25.6 17.066667 42.666667 42.666666 42.666666s42.666667-17.066667 42.666667-42.666666v-256c0-25.6-17.066667-42.666667-42.666667-42.666667z"
|
||||
fill="" p-id="3305"></path>
|
||||
</svg>
|
||||
<svg class="icon" v-else style="width: 24px; vertical-align: middle;fill: currentColor;overflow: hidden;"
|
||||
viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="3952">
|
||||
<path
|
||||
d="M384 597.333333h-256c-25.6 0-42.666667 17.066667-42.666667 42.666667s17.066667 42.666667 42.666667 42.666667h153.6L17.066667 947.2c-17.066667 17.066667-17.066667 42.666667 0 59.733333 17.066667 17.066667 42.666667 17.066667 59.733333 0L341.333333 742.4v153.6c0 25.6 17.066667 42.666667 42.666667 42.666667s42.666667-17.066667 42.666667-42.666667v-256c0-25.6-17.066667-42.666667-42.666667-42.666667z m358.4 85.333334h153.6c25.6 0 42.666667-17.066667 42.666667-42.666667s-17.066667-42.666667-42.666667-42.666667h-256c-25.6 0-42.666667 17.066667-42.666667 42.666667v256c0 25.6 17.066667 42.666667 42.666667 42.666667s42.666667-17.066667 42.666667-42.666667V742.4l264.533333 264.533333c17.066667 17.066667 42.666667 17.066667 59.733333 0 17.066667-17.066667 17.066667-42.666667 0-59.733333L742.4 682.666667zM640 426.666667h256c25.6 0 42.666667-17.066667 42.666667-42.666667s-17.066667-42.666667-42.666667-42.666667H742.4L1006.933333 76.8c17.066667-17.066667 17.066667-42.666667 0-59.733333-17.066667-17.066667-42.666667-17.066667-59.733333 0L682.666667 281.6V128c0-25.6-17.066667-42.666667-42.666667-42.666667s-42.666667 17.066667-42.666667 42.666667v256c0 25.6 17.066667 42.666667 42.666667 42.666667z m-256-341.333334c-25.6 0-42.666667 17.066667-42.666667 42.666667v153.6L76.8 8.533333C59.733333 0 25.6 0 8.533333 8.533333 0 25.6 0 59.733333 8.533333 76.8L281.6 341.333333H128c-25.6 0-42.666667 17.066667-42.666667 42.666667s17.066667 42.666667 42.666667 42.666667h256c25.6 0 42.666667-17.066667 42.666667-42.666667v-256c0-25.6-17.066667-42.666667-42.666667-42.666667z"
|
||||
p-id="3953"></path>
|
||||
</svg>
|
||||
</i>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import { mapGetters } from 'vuex'
|
||||
import Cookies from 'js-cookie'
|
||||
import { routes } from '../router/index'
|
||||
import { tryToJson } from "../utils/tools";
|
||||
export default {
|
||||
props: {
|
||||
red: {
|
||||
type: String
|
||||
},
|
||||
item: {
|
||||
type: Number
|
||||
},
|
||||
},
|
||||
data() {
|
||||
return {
|
||||
isTypeBuser: false,//监理单位、总包单位、分包单位用户不展示项目概况菜单,二级菜单只展示自已参与的项目
|
||||
nav: 1,
|
||||
dept1: '',
|
||||
dept2: '',
|
||||
showSel1: false,
|
||||
showSel2: false,
|
||||
showSel3: false,
|
||||
data: [],
|
||||
depts: [],
|
||||
timerID: undefined,
|
||||
time: '',
|
||||
date: '',
|
||||
week: '',
|
||||
selDept: '',
|
||||
localStorage1: JSON.parse(localStorage.getItem("data1")),
|
||||
localStorage2: JSON.parse(localStorage.getItem("data2")),
|
||||
isFullScreen: false,
|
||||
temperature: 20,
|
||||
condTxt: '',
|
||||
condCode: '',
|
||||
proTypeList: [],
|
||||
proType: '',
|
||||
allProjects:[],
|
||||
projects:[],
|
||||
}
|
||||
},
|
||||
created() {
|
||||
let obj = localStorage.getItem("project_category");
|
||||
let type = localStorage.getItem("proType");
|
||||
if (obj && obj.length > 0) {
|
||||
obj = tryToJson(obj, []);
|
||||
if (obj.length > 0) {
|
||||
this.proTypeList = obj;
|
||||
let tmps = obj.filter(d => d.value == type);
|
||||
this.proType = tmps.length > 0 ? tmps[0].text : "全部";
|
||||
return;
|
||||
}
|
||||
}
|
||||
this.$api.dict("project_category").then(d => {
|
||||
let tmps = (d || []).map(it => {
|
||||
return {
|
||||
value: it.dictValue,
|
||||
text: it.dictLabel,
|
||||
}
|
||||
});
|
||||
tmps = [{ value: "0", text: "全部" }, ...tmps];
|
||||
this.proTypeList = tmps;
|
||||
this.proType = "全部";
|
||||
localStorage.setItem("project_category", JSON.stringify(tmps));
|
||||
});
|
||||
},
|
||||
async mounted() {
|
||||
window.headerApp = this
|
||||
await this.initMe();
|
||||
this.nav = this.$route.meta?.nav || 1
|
||||
this.setTitle();
|
||||
this.timerID = setInterval(this.updateTime, 1000);
|
||||
this.updateTime();
|
||||
let roleId = + this.$store.getters.roleId;
|
||||
Cookies.remove("__ids__");
|
||||
if ([5, 6, 7, 15, 16, 17, 99].includes(roleId)) {
|
||||
this.isTypeBuser = true;
|
||||
if (this.$route.name == "index") {
|
||||
this.$router.push("/detail");
|
||||
}
|
||||
this.loadInitData(-1,()=>{
|
||||
let objs=this.projects;
|
||||
this.data = [{ id: 0, text: '所有项目' }, ...objs];
|
||||
let dept = { id: 0, text: '' };
|
||||
this.$root.dept = dept;
|
||||
this.$root.hasInitHeader = true;
|
||||
//this.$bus.$emit("deptChange", dept)
|
||||
this.$root._prjIds = objs.map(it => it.id);
|
||||
Cookies.set("__ids__", objs.map(it => it.id).join(","));
|
||||
//this.$bus.$emit("loadProjects", this.data);
|
||||
this.$root.projects = this.data;
|
||||
if (this.data.length > 0) {
|
||||
this.setScreenLiSel2(this.data[0], true);
|
||||
} else {
|
||||
this.setScreenLiSel2(null);
|
||||
}
|
||||
});
|
||||
} else {
|
||||
this.isTypeBuser = false;
|
||||
this.loadInitData(0,()=>{
|
||||
this.$api.dept.list().then(d => {
|
||||
this.$root.hasInitHeader = true;
|
||||
if (roleId < 4) {
|
||||
this.depts = [{ text: '产发集团', id: 0 }, ...(d?.data || []).map(it => {
|
||||
it.text = it.deptName;
|
||||
it.id = it.deptId;
|
||||
return it;
|
||||
})]
|
||||
} else {
|
||||
this.depts = [...(d?.data || []).map(it => {
|
||||
it.text = it.deptName;
|
||||
it.id = it.deptId;
|
||||
return it;
|
||||
})]
|
||||
}
|
||||
if(this.localStorage1==null){
|
||||
this.localStorage1={text: '产发集团', id: 0};
|
||||
}
|
||||
if(this.localStorage2==null){
|
||||
this.localStorage2={};
|
||||
}
|
||||
this.setScreenLiSel1(this.localStorage1,true);
|
||||
this.checkIsDetailSubPage();
|
||||
});
|
||||
});
|
||||
}
|
||||
this.$root.isTypeBuser = this.isTypeBuser;
|
||||
},
|
||||
methods: {
|
||||
checkIsDetailSubPage(){
|
||||
let name=this.$route.name;
|
||||
if(["prjSafety","prjQuality","prjProgress","prjEngin","prjVideo","prjAiVideo","prjPhotography"
|
||||
,"towerCrane","excavation","distributionBox","dumbwaiter","personnelPosition","standardCuringRoom","concreteStrength"
|
||||
].includes(name)){
|
||||
if(this.localStorage2.id==0 && this.projects.length>1){
|
||||
this.setScreenLiSel2(this.projects[1]);
|
||||
}
|
||||
}
|
||||
},
|
||||
loadInitData(deptId, cb) {
|
||||
localStorage.setItem("proType", 0);
|
||||
this.$api.project.findProjectByDept(deptId).then(d => {
|
||||
if (cb) {
|
||||
this.projects = (d.data || []).map(it => {
|
||||
it.text = it.projectName;
|
||||
return it;
|
||||
}).filter(it => +it.progressVisible == 0);
|
||||
this.allProjects=this.projects;
|
||||
cb();
|
||||
}
|
||||
})
|
||||
},
|
||||
initMe() {
|
||||
return new Promise(resolve => {
|
||||
let func = () => {
|
||||
if (!this.$store.getters.roles || this.$store.getters.roles.length == 0) {
|
||||
setTimeout(func, 400);
|
||||
return;
|
||||
}
|
||||
resolve(true);
|
||||
};
|
||||
func();
|
||||
});
|
||||
},
|
||||
doLogout() {
|
||||
this.$confirm('确定注销并退出系统吗？', '提示', {
|
||||
confirmButtonText: '确定',
|
||||
cancelButtonText: '取消',
|
||||
type: 'warning'
|
||||
}).then(() => {
|
||||
this.$store.dispatch('LogOut').then(() => {
|
||||
location.href =window.XDBSAPP;
|
||||
})
|
||||
}).catch(() => { });
|
||||
},
|
||||
getName() {
|
||||
return this.$store?.getters?.nickName || '';
|
||||
},
|
||||
getWeather() {
|
||||
let url = `https://widget-api.heweather.net/s6/plugin/view?key=fcd4fc1e48a144a483b7af74284229b8&location=CN101110101&lang=zh`;
|
||||
this.$api.http.get(url).then(d => {
|
||||
let info = d?.data?.now || {};
|
||||
this.temperature = info.tmp || 20;
|
||||
this.condTxt = info.cond_txt || '晴';
|
||||
this.condCode = info.cond_code || 100;
|
||||
this.condCode = `//widget-s.qweather.net/img/plugin/190516/icon/c/${this.condCode}n.png`
|
||||
});
|
||||
},
|
||||
toggleFullScreen() {
|
||||
let el = document.body;
|
||||
this.$toggleFullScreen(el);
|
||||
setTimeout(() => {
|
||||
this.isFullScreen = document.fullscreenElement == el;
|
||||
}, 400);
|
||||
},
|
||||
init() {
|
||||
try {
|
||||
this.localStorage1 = JSON.parse(localStorage.getItem("data1"))
|
||||
this.localStorage2 = JSON.parse(localStorage.getItem("data2"))
|
||||
if(this.localStorage1==null){
|
||||
this.localStorage1={};
|
||||
}
|
||||
if(this.localStorage2==null){
|
||||
this.localStorage2={};
|
||||
}
|
||||
} catch (e) {
|
||||
|
||||
}
|
||||
if (!this.localStorage1) {
|
||||
this.localStorage1 = {
|
||||
|
||||
}
|
||||
}
|
||||
if (!this.localStorage2) {
|
||||
this.localStorage2 = {}
|
||||
}
|
||||
let tmp = this.localStorage1?.text || '';
|
||||
if (!tmp || !this.depts.find(d => d.text == tmp)) {
|
||||
if (this.depts.length > 0) {
|
||||
tmp = this.depts[0].text;
|
||||
} else {
|
||||
tmp = "";
|
||||
}
|
||||
}
|
||||
this.dept1 = tmp;
|
||||
this.dept2 = tmp;
|
||||
|
||||
if (this.dept1) {
|
||||
this.loadProject(true);
|
||||
}
|
||||
},
|
||||
deptChange(cb) {
|
||||
let tmps = this.depts.filter(d => d.text == this.dept1);
|
||||
if (tmps.length > 0) {
|
||||
this.$root.dept = tmps[0];
|
||||
}
|
||||
},
|
||||
setTitle() {
|
||||
let titls = ['', '项目概况', '项目详情', '安全管理', '质量管理', '进度管理', '视频管理', '工程管理']
|
||||
let title = titls[this.nav];
|
||||
if (title) {
|
||||
window.document.title = title;
|
||||
} else {
|
||||
window.document.title = '产发工程数字管理平台-大屏';
|
||||
}
|
||||
},
|
||||
//页面条状
|
||||
pageJump(n, url) {
|
||||
this.nav = n;
|
||||
this.setTitle();
|
||||
setTimeout(()=>{
|
||||
this.checkIsDetailSubPage();
|
||||
},400);
|
||||
if (url) {
|
||||
location.href = url
|
||||
} else {
|
||||
this.$notify({
|
||||
title: '提示',
|
||||
message: '页面开发中，敬请期待！',
|
||||
type: 'warning'
|
||||
});
|
||||
}
|
||||
|
||||
|
||||
},
|
||||
showScreenUlSel1() {
|
||||
this.showSel1 = true
|
||||
},
|
||||
showScreenUlSel2() {
|
||||
this.showSel2 = true
|
||||
|
||||
},
|
||||
showScreenUlSel3() {
|
||||
this.showSel3 = true
|
||||
},
|
||||
hideScreenUlSel1() {
|
||||
this.showSel1 = false
|
||||
},
|
||||
hideScreenUlSel2() {
|
||||
this.showSel2 = false
|
||||
},
|
||||
hideScreenUlSel3() {
|
||||
this.showSel3 = false
|
||||
},
|
||||
setScreenLiSel3(item) {
|
||||
localStorage.setItem("proType", item.value);
|
||||
this.proType = item.text;
|
||||
this.showSel3 = false;
|
||||
this.loadProject();
|
||||
this.$bus.$emit("projectChange",this.localStorage2);
|
||||
},
|
||||
setScreenLiSel1(item,init) {
|
||||
localStorage.setItem("data1", JSON.stringify(item))
|
||||
this.localStorage1 = JSON.parse(localStorage.getItem("data1"))
|
||||
//this.$emit('itemdata', item);
|
||||
this.showSel1 = false
|
||||
this.dept1 = item.text;
|
||||
if(!init){
|
||||
localStorage.setItem("proType", 0);
|
||||
this.proType = "全部";
|
||||
}
|
||||
this.deptChange();
|
||||
this.loadProject();
|
||||
this.$bus.$emit("projectChange",this.localStorage2);
|
||||
},
|
||||
loadProject(init, cb) {
|
||||
if (this.isTypeBuser) {
|
||||
return;
|
||||
}
|
||||
let objs = this.projects||[];
|
||||
|
||||
objs=objs.filter(it=>{
|
||||
let b1=true;
|
||||
if(this.localStorage1.id>0){
|
||||
b1=it.deptId==this.localStorage1.id;
|
||||
}
|
||||
let b2=true;
|
||||
let type = +localStorage.getItem("proType");
|
||||
if(type!=0){
|
||||
b2=it.projectType==type;
|
||||
}
|
||||
return b1 && b2;
|
||||
});
|
||||
|
||||
this.data = [{ id: 0, text: '所有项目' }, ...objs];
|
||||
this.$root.projects = this.data;
|
||||
if (this.data.find(it => it.id == this.localStorage2.id)) {
|
||||
this.setScreenLiSel2(this.localStorage2)
|
||||
} else {
|
||||
if (this.data.length > 0) {
|
||||
this.setScreenLiSel2(this.data[0], init);
|
||||
} else {
|
||||
this.setScreenLiSel2(null);
|
||||
}
|
||||
}
|
||||
if (cb) {
|
||||
cb();
|
||||
}
|
||||
},
|
||||
setScreenLiSel2(item, init) {
|
||||
if (item) {
|
||||
this.showSel2 = false;
|
||||
if (!init || !this.dept2) {
|
||||
localStorage.setItem("data2", JSON.stringify(item))
|
||||
this.localStorage2 = JSON.parse(localStorage.getItem("data2"))
|
||||
//this.$emit('itemdata', item);
|
||||
this.dept2 = item.text;
|
||||
}
|
||||
this.$root.project = this.localStorage2;
|
||||
//this.$bus.$emit("projectChange", this.localStorage2);
|
||||
} else {
|
||||
localStorage.removeItem("data2");
|
||||
this.localStorage2 = {};
|
||||
this.showSel2 = false;
|
||||
this.dept2 = '';
|
||||
}
|
||||
this.$bus.$emit("projectChange",this.localStorage2);
|
||||
},
|
||||
|
||||
//时间方法
|
||||
updateTime() {
|
||||
var cd = new Date();
|
||||
this.time = this.zeroPadding(cd.getHours(), 2) + ':' + this.zeroPadding(cd.getMinutes(), 2) + ':' + this.zeroPadding(cd.getSeconds(), 2);
|
||||
this.date = this.zeroPadding(cd.getFullYear(), 4) + '年' + this.zeroPadding(cd.getMonth() + 1, 2) + '月' + this.zeroPadding(cd.getDate(), 2) + '日';
|
||||
},
|
||||
zeroPadding(num, digit) {
|
||||
var zero = '';
|
||||
for (var i = 0; i < digit; i++) {
|
||||
zero += '0';
|
||||
}
|
||||
return (zero + num).slice(-digit);
|
||||
}
|
||||
|
||||
}
|
||||
};
|
||||
</script>
|
||||
|
||||
<style lang="less">
|
||||
body.is-index{
|
||||
.head-title {
|
||||
background-color:rgba(2, 18, 56, 0.9);
|
||||
}
|
||||
.screen-one-2-1,.screen-one-1-1{
|
||||
background-color:rgba(2, 18, 56, 0.4);
|
||||
}
|
||||
}
|
||||
.head-title {
|
||||
z-index: 999;
|
||||
}
|
||||
|
||||
.main-header {
|
||||
.head-title-tab {
|
||||
.has-submenu {
|
||||
&:hover {
|
||||
.header-btn-list {
|
||||
display: block;
|
||||
}
|
||||
}
|
||||
|
||||
.header-btn-list {
|
||||
display: none;
|
||||
|
||||
.header-btn-list-item {
|
||||
.header-btn-list-padding {
|
||||
padding: 8px;
|
||||
|
||||
button {
|
||||
width: 120px;
|
||||
}
|
||||
|
||||
&.menu-row2 {
|
||||
.sub-btn {
|
||||
color: #fff;
|
||||
|
||||
&:hover {
|
||||
color: #ccc;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
&.menu-row1 {
|
||||
.sub-btn {
|
||||
color: rgb(1, 169, 255);
|
||||
|
||||
&:hover {
|
||||
color: #fff;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.sub-btn {
|
||||
&.active {
|
||||
color: #ffffffaa;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
}
|
||||
}
|
||||
|
||||
}
|
||||
}
|
||||
|
||||
.title-select1 {
|
||||
width: 150px;
|
||||
}
|
||||
|
||||
.title-select3 {
|
||||
width: 200px;
|
||||
}
|
||||
}
|
||||
</style>
|
||||
|
|
@ -1,243 +0,0 @@
|
|||
/**
|
||||
* 顶部header
|
||||
*/
|
||||
import Vue from 'vue'
|
||||
Vue.component("screen-header", {
|
||||
template: `
|
||||
<div :class="red?'head-title red-head':'head-title'">
|
||||
<div class="head-title-label">
|
||||
产发工程数字管理平台
|
||||
</div>
|
||||
<div class="head-title-tab">
|
||||
<div :class="nav==1?'head-nav active':'head-nav'" @click="pageJump(1,'index.html','index.html')">项目概况</div>
|
||||
<div :class="nav==2?'head-nav active':'head-nav'" @click="pageJump(2,'projectDetail.html','projectDetail.html')">项目详情</div>
|
||||
<div :class="nav==3?'head-nav active':'head-nav'" @click="pageJump(3,'projectSafety.html','projectSafety.html')">安全管理</div>
|
||||
<div :class="nav==4?'head-nav active':'head-nav'" @click="pageJump(4,'projectQuality.html','projectQuality.html')">质量管理</div>
|
||||
<div :class="nav==5?'head-nav active':'head-nav'" @click="pageJump(5,'projectProgress.html','projectProgress.html')">进度管理</div>
|
||||
<div :class="nav==6?'head-nav active':'head-nav'" @click="pageJump(6,'projectVideo.html','projectVideo.html')">视频管理</div>
|
||||
<div :class="nav==7?'head-nav active':'head-nav'" @click="pageJump(7,'projectEngin.html','projectEngin.html')">工程管理</div>
|
||||
</div>
|
||||
<div class="head-title-select" @mouseleave="hideScreenUlSel1" v-if="localStorage1">
|
||||
<div class="head-select">
|
||||
<input type="text" :value="dept1" @click="showScreenUlSel1" placeholder="请选择公司" readonly>
|
||||
</div>
|
||||
<el-collapse-transition>
|
||||
<ul class="header-screen-ul" v-show="showSel1" ref="selectUl">
|
||||
<li v-for="item in depts" @click="setScreenLiSel1(item)" :title="item.text" >{{item.text}}</li>
|
||||
</ul>
|
||||
</el-collapse-transition>
|
||||
</div>
|
||||
<div class="head-title-select" @mouseleave="hideScreenUlSel2" v-if="localStorage2">
|
||||
<div class="head-select">
|
||||
<input type="text" :value="dept2" @click="showScreenUlSel2" placeholder="请选择项目" readonly>
|
||||
</div>
|
||||
<el-collapse-transition>
|
||||
<ul class="header-screen-ul" v-show="showSel2" ref="selectUl">
|
||||
<li v-for="item in data" @click="setScreenLiSel2(item)" :title="item.text">{{item.text}}</li>
|
||||
</ul>
|
||||
</el-collapse-transition>
|
||||
</div>
|
||||
<div class="head-title-date">
|
||||
<div class="head-title-time">
|
||||
<div class="head-title-date-con">{{date}}</div>
|
||||
<div class="head-title-time-con">{{time}}</div>
|
||||
</div>
|
||||
<div class="head-title-weather">
|
||||
<img src="images/weather.png">
|
||||
<span>晴</span>
|
||||
<span>11~25℃</span>
|
||||
</div>
|
||||
</div>
|
||||
<i v-if="1==2" class="set-fullscreen set-font-size" style="margin-left: 16px;position: absolute;top: 4px;right: 16px;" @click="toggleFullScreen">
|
||||
<svg class="icon" v-if="!isFullScreen" style="width: 24px; vertical-align: middle;fill: currentColor;overflow: hidden;" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="3304"><path d="M145.066667 85.333333h153.6c25.6 0 42.666667-17.066667 42.666666-42.666666S324.266667 0 298.666667 0H34.133333C25.6 0 17.066667 8.533333 8.533333 17.066667 0 25.6 0 34.133333 0 42.666667v256c0 25.6 17.066667 42.666667 42.666667 42.666666s42.666667-17.066667 42.666666-42.666666V145.066667l230.4 230.4c17.066667 17.066667 42.666667 17.066667 59.733334 0 17.066667-17.066667 17.066667-42.666667 0-59.733334L145.066667 85.333333z m170.666666 563.2L162.133333 802.133333l-76.8 76.8V725.333333C85.333333 699.733333 68.266667 682.666667 42.666667 682.666667s-42.666667 17.066667-42.666667 42.666666v256c0 25.6 17.066667 42.666667 42.666667 42.666667h256c25.6 0 42.666667-17.066667 42.666666-42.666667s-17.066667-42.666667-42.666666-42.666666H145.066667l76.8-76.8 153.6-153.6c17.066667-17.066667 17.066667-42.666667 0-59.733334-17.066667-17.066667-42.666667-17.066667-59.733334 0z m665.6 34.133334c-25.6 0-42.666667 17.066667-42.666666 42.666666v153.6l-76.8-76.8-153.6-153.6c-17.066667-17.066667-42.666667-17.066667-59.733334 0-17.066667 17.066667-17.066667 42.666667 0 59.733334l153.6 153.6 76.8 76.8H725.333333c-25.6 0-42.666667 17.066667-42.666666 42.666666s17.066667 42.666667 42.666666 42.666667h256c25.6 0 42.666667-17.066667 42.666667-42.666667v-256c0-25.6-17.066667-42.666667-42.666667-42.666666z m0-682.666667h-256c-25.6 0-42.666667 17.066667-42.666666 42.666667s17.066667 42.666667 42.666666 42.666666h153.6l-76.8 76.8-153.6 153.6c-17.066667 17.066667-17.066667 42.666667 0 59.733334 17.066667 17.066667 42.666667 17.066667 59.733334 0l153.6-153.6 76.8-76.8v153.6c0 25.6 17.066667 42.666667 42.666666 42.666666s42.666667-17.066667 42.666667-42.666666v-256c0-25.6-17.066667-42.666667-42.666667-42.666667z" fill="" p-id="3305"></path></svg>
|
||||
<svg class="icon" v-else style="width: 24px; vertical-align: middle;fill: currentColor;overflow: hidden;" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="3952"><path d="M384 597.333333h-256c-25.6 0-42.666667 17.066667-42.666667 42.666667s17.066667 42.666667 42.666667 42.666667h153.6L17.066667 947.2c-17.066667 17.066667-17.066667 42.666667 0 59.733333 17.066667 17.066667 42.666667 17.066667 59.733333 0L341.333333 742.4v153.6c0 25.6 17.066667 42.666667 42.666667 42.666667s42.666667-17.066667 42.666667-42.666667v-256c0-25.6-17.066667-42.666667-42.666667-42.666667z m358.4 85.333334h153.6c25.6 0 42.666667-17.066667 42.666667-42.666667s-17.066667-42.666667-42.666667-42.666667h-256c-25.6 0-42.666667 17.066667-42.666667 42.666667v256c0 25.6 17.066667 42.666667 42.666667 42.666667s42.666667-17.066667 42.666667-42.666667V742.4l264.533333 264.533333c17.066667 17.066667 42.666667 17.066667 59.733333 0 17.066667-17.066667 17.066667-42.666667 0-59.733333L742.4 682.666667zM640 426.666667h256c25.6 0 42.666667-17.066667 42.666667-42.666667s-17.066667-42.666667-42.666667-42.666667H742.4L1006.933333 76.8c17.066667-17.066667 17.066667-42.666667 0-59.733333-17.066667-17.066667-42.666667-17.066667-59.733333 0L682.666667 281.6V128c0-25.6-17.066667-42.666667-42.666667-42.666667s-42.666667 17.066667-42.666667 42.666667v256c0 25.6 17.066667 42.666667 42.666667 42.666667z m-256-341.333334c-25.6 0-42.666667 17.066667-42.666667 42.666667v153.6L76.8 8.533333C59.733333 0 25.6 0 8.533333 8.533333 0 25.6 0 59.733333 8.533333 76.8L281.6 341.333333H128c-25.6 0-42.666667 17.066667-42.666667 42.666667s17.066667 42.666667 42.666667 42.666667h256c25.6 0 42.666667-17.066667 42.666667-42.666667v-256c0-25.6-17.066667-42.666667-42.666667-42.666667z" p-id="3953"></path></svg>
|
||||
</i>
|
||||
</div>
|
||||
`,
|
||||
props: {
|
||||
nav:{
|
||||
type:Number
|
||||
},
|
||||
red:{
|
||||
type:String
|
||||
},
|
||||
item:{
|
||||
type:Number
|
||||
},
|
||||
},
|
||||
data() {
|
||||
return {
|
||||
dept1:'',
|
||||
dept2:'',
|
||||
showSel1:false,
|
||||
showSel2:false,
|
||||
data:[],
|
||||
depts:[],
|
||||
timerID:undefined,
|
||||
time: '',
|
||||
date: '',
|
||||
week:'',
|
||||
selDept:'',
|
||||
localStorage1: JSON.parse(localStorage.getItem("data1")),
|
||||
localStorage2: JSON.parse(localStorage.getItem("data2")),
|
||||
isFullScreen:false
|
||||
}
|
||||
},
|
||||
mounted(){
|
||||
this.timerID = setInterval(this.updateTime, 1000);
|
||||
this.updateTime();
|
||||
this.init()
|
||||
this.$api.dept.list().then(d=>{
|
||||
this.depts=[{text:'产发集团',id:0},...(d?.data||[]).map(it=>{
|
||||
it.text=it.deptName;
|
||||
it.id=it.deptId;
|
||||
return it;
|
||||
})]
|
||||
this.deptChange();
|
||||
});
|
||||
|
||||
},
|
||||
methods: {
|
||||
toggleFullScreen(){
|
||||
let el=document.body;
|
||||
this.$toggleFullScreen(el);
|
||||
setTimeout(()=>{
|
||||
this.isFullScreen=document.fullscreenElement==el;
|
||||
},400);
|
||||
},
|
||||
init(){
|
||||
try{
|
||||
this.localStorage1=JSON.parse(localStorage.getItem("data1"))
|
||||
this.localStorage2=JSON.parse(localStorage.getItem("data2"))
|
||||
}catch(e){
|
||||
|
||||
}
|
||||
if(!this.localStorage1){
|
||||
this.localStorage1={
|
||||
|
||||
}
|
||||
}
|
||||
if(!this.localStorage2){
|
||||
this.localStorage2={}
|
||||
}
|
||||
this.dept1=this.localStorage1?.text||'';
|
||||
this.dept2=this.localStorage2?.text||'';
|
||||
if(this.dept1){
|
||||
this.loadProject(true);
|
||||
}
|
||||
},
|
||||
deptChange(){
|
||||
let tmps=this.depts.filter(d=>d.text==this.dept1);
|
||||
if(tmps.length>0){
|
||||
this.$bus.$emit("deptChange",tmps[0])
|
||||
}
|
||||
},
|
||||
//页面条状
|
||||
pageJump(n,url,itemurl){
|
||||
if(n != this.nav){
|
||||
if(this.localStorage1.type == 1){
|
||||
if(url){
|
||||
location.href = url
|
||||
}else{
|
||||
this.$notify({
|
||||
title: '提示',
|
||||
message: '页面开发中，敬请期待！',
|
||||
type: 'warning'
|
||||
});
|
||||
}
|
||||
}else{
|
||||
if(n==5){
|
||||
location.href = url
|
||||
}else{
|
||||
if(itemurl){
|
||||
location.href = itemurl
|
||||
}else{
|
||||
this.$notify({
|
||||
title: '提示',
|
||||
message: '页面开发中，敬请期待！',
|
||||
type: 'warning'
|
||||
});
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
},
|
||||
|
||||
|
||||
showScreenUlSel1(){
|
||||
this.showSel1 = true
|
||||
|
||||
},
|
||||
showScreenUlSel2(){
|
||||
this.showSel2 = true
|
||||
|
||||
},
|
||||
hideScreenUlSel1(){
|
||||
this.showSel1 = false
|
||||
},
|
||||
hideScreenUlSel2(){
|
||||
this.showSel2 = false
|
||||
},
|
||||
setScreenLiSel1(item){
|
||||
localStorage.setItem("data1",JSON.stringify(item))
|
||||
this.localStorage1=JSON.parse(localStorage.getItem("data1"))
|
||||
this.$emit('itemdata',item);
|
||||
this.showSel1 = false
|
||||
this.dept1=item.text;
|
||||
this.deptChange();
|
||||
this.loadProject();
|
||||
},
|
||||
loadProject(init){
|
||||
this.$api.project.findProjectByDept(this.localStorage1.id||0).then(d=>{
|
||||
let objs=(d?.data||[]).map(it=>{
|
||||
it.text=it.projectName;
|
||||
return it;
|
||||
}).filter(it=>+it.progressVisible==0);
|
||||
this.data=[{id:0,text:'所有项目'},...objs];
|
||||
this.$bus.$emit("loadProjects",this.data);
|
||||
if(this.data.length>0){
|
||||
this.setScreenLiSel2(this.data[0],init);
|
||||
}else{
|
||||
this.setScreenLiSel2(null);
|
||||
}
|
||||
});
|
||||
},
|
||||
setScreenLiSel2(item,init){
|
||||
if(item){
|
||||
this.showSel2 = false;
|
||||
if(!init){
|
||||
localStorage.setItem("data2",JSON.stringify(item))
|
||||
this.localStorage2=JSON.parse(localStorage.getItem("data2"))
|
||||
this.$emit('itemdata',item);
|
||||
this.dept2=item.text;
|
||||
}
|
||||
this.$bus.$emit("projectChange",this.localStorage2);
|
||||
}else{
|
||||
localStorage.removeItem("data2");
|
||||
this.localStorage2={};
|
||||
this.showSel2 = false;
|
||||
this.dept2='';
|
||||
}
|
||||
},
|
||||
|
||||
//时间方法
|
||||
updateTime(){
|
||||
var cd = new Date();
|
||||
this.time = this.zeroPadding(cd.getHours(), 2) + ':' + this.zeroPadding(cd.getMinutes(), 2) + ':' + this.zeroPadding(cd.getSeconds(), 2);
|
||||
this.date = this.zeroPadding(cd.getFullYear(), 4) + '年' + this.zeroPadding(cd.getMonth()+1, 2) + '月' + this.zeroPadding(cd.getDate(), 2)+'日';
|
||||
},
|
||||
zeroPadding(num, digit) {
|
||||
var zero = '';
|
||||
for(var i = 0; i < digit; i++) {
|
||||
zero += '0';
|
||||
}
|
||||
return (zero + num).slice(-digit);
|
||||
}
|
||||
|
||||
},
|
||||
watch:{
|
||||
|
||||
}
|
||||
|
||||
})
|
||||
|
|
@ -1,133 +0,0 @@
|
|||
import Vue from 'vue'
|
||||
Vue.component("idle-list-chart", {
|
||||
template: `
|
||||
<div style="height: 40px;" :style="'width:'+width+'px;'" ref="chart"></div>
|
||||
`,
|
||||
props: {
|
||||
prop:{
|
||||
type:Number
|
||||
},
|
||||
color:{
|
||||
type:String
|
||||
},
|
||||
width:{
|
||||
type:Number,
|
||||
default:175
|
||||
}
|
||||
},
|
||||
data() {
|
||||
return {
|
||||
option:{},
|
||||
}
|
||||
},
|
||||
mounted(){
|
||||
this.init()
|
||||
},
|
||||
methods: {
|
||||
init(){
|
||||
this.getChartData()
|
||||
},
|
||||
getChartData(){
|
||||
//品类金额占比 饼图
|
||||
var chChart = echarts.init(this.$refs.chart);
|
||||
this.echart(chChart,this.prop,this.color)
|
||||
},
|
||||
echart(chChart,data,color){
|
||||
let newPromise = new Promise((resolve) => {
|
||||
resolve()
|
||||
})
|
||||
//然后异步执行echarts的初始化函数
|
||||
newPromise.then(() => {
|
||||
var prop = []
|
||||
prop.push(data)
|
||||
this.option = {
|
||||
grid: {
|
||||
left: "1%",
|
||||
right: "0%",
|
||||
bottom: "0%",
|
||||
top: "25",
|
||||
containLabel: true,
|
||||
},
|
||||
xAxis: {
|
||||
show: false,
|
||||
type: "value",
|
||||
},
|
||||
yAxis: [
|
||||
{
|
||||
type: "category",
|
||||
inverse: true,
|
||||
axisLabel: {
|
||||
show: false,
|
||||
},
|
||||
splitLine: {
|
||||
show: false,
|
||||
},
|
||||
axisTick: {
|
||||
show: false,
|
||||
},
|
||||
axisLine: {
|
||||
show: false,
|
||||
},
|
||||
},
|
||||
{
|
||||
type: "category",
|
||||
inverse: true,
|
||||
axisTick: "none",
|
||||
axisLine: "none",
|
||||
show: true,
|
||||
axisLabel: {
|
||||
textStyle: {
|
||||
color: "#cbdaff",
|
||||
fontSize: "16",
|
||||
},
|
||||
formatter: function(params,i){
|
||||
var text = "{a| "+ prop[i]+ "%}";
|
||||
return text;
|
||||
},
|
||||
rich: {
|
||||
a: {
|
||||
fontSize: '14',
|
||||
color: color,
|
||||
},
|
||||
},
|
||||
},
|
||||
data: prop,
|
||||
},
|
||||
],
|
||||
series: [
|
||||
{
|
||||
type: "bar",
|
||||
zlevel: 1,
|
||||
itemStyle: {
|
||||
normal: {
|
||||
color: color,
|
||||
},
|
||||
},
|
||||
barWidth:8,
|
||||
data: prop,
|
||||
},
|
||||
{
|
||||
type: "bar",
|
||||
barWidth: 10,
|
||||
barGap: "-100%",
|
||||
data: [100],
|
||||
itemStyle: {
|
||||
normal: {
|
||||
color: "rgba(24,31,68,0.8)",
|
||||
},
|
||||
},
|
||||
},
|
||||
],
|
||||
};
|
||||
|
||||
chChart.setOption(this.option);
|
||||
window.onresize = chChart.resize;
|
||||
})
|
||||
},
|
||||
},
|
||||
watch:{
|
||||
prop: function (n,o) {
|
||||
this.init()
|
||||
}
|
||||
}
|
||||
})
|
||||
|
|
@ -1,182 +0,0 @@
|
|||
import Vue from 'vue'
|
||||
Vue.component("labour-china-map", {
|
||||
template: `
|
||||
<div :style="{'height': height+'px'}" ref="map"></div>
|
||||
`,
|
||||
props: {
|
||||
data:{
|
||||
type:Array
|
||||
},
|
||||
tooltip:{
|
||||
type:Array
|
||||
},
|
||||
height:{
|
||||
type:Number
|
||||
}
|
||||
},
|
||||
data() {
|
||||
return {
|
||||
option:{},
|
||||
|
||||
}
|
||||
},
|
||||
mounted(){
|
||||
this.loadMap(this.data,this.tooltip)
|
||||
window.chartClick = this.chartClick;
|
||||
},
|
||||
methods: {
|
||||
chartClick(id){
|
||||
this.$emit('projectid',id)
|
||||
},
|
||||
loadMap(outdata,tooltip) {
|
||||
var iconGD = "image://http://fileimg.makalu.cc/WEB_0EE6DA50925A4C27A126669209F1A5E2.png";
|
||||
var myChart = echarts.init(this.$refs.map);
|
||||
var geoCoordMap = {};
|
||||
/*获取地图数据*/
|
||||
var mapFeatures = echarts.getMap('china').geoJson.features;
|
||||
// console.log(mapFeatures)
|
||||
mapFeatures.forEach(function(v) {
|
||||
// 地区名称
|
||||
var name = v.properties.name;
|
||||
// 地区经纬度
|
||||
geoCoordMap[name] = v.properties.cp;
|
||||
});
|
||||
this.option = {
|
||||
tooltip: {
|
||||
show: true,
|
||||
trigger: "item",
|
||||
enterable: true,
|
||||
showContent: true,
|
||||
padding:0,
|
||||
triggerOn:'click',
|
||||
formatter: function(params) {
|
||||
var tipHtml = ''
|
||||
if(params.data){
|
||||
tipHtml = tooltip[params.dataIndex]
|
||||
return tipHtml
|
||||
}
|
||||
},
|
||||
},
|
||||
geo: {
|
||||
map: 'china',
|
||||
show: true,
|
||||
roam: true,
|
||||
zoom: 1.17,
|
||||
label: {
|
||||
emphasis: {
|
||||
show: false,
|
||||
}
|
||||
},
|
||||
layoutSize: "100%",
|
||||
itemStyle: {
|
||||
// normal: {
|
||||
// areaColor: '#000', //背景颜色
|
||||
// borderColor: '#8ac2fb', //省划分边线
|
||||
// borderWidth: 10, //边线的粗细
|
||||
// },
|
||||
// emphasis: {
|
||||
// areaColor: '#002d90' , //指上背景限色
|
||||
// },
|
||||
areaColor: "#86c2f8",
|
||||
borderColor: "#86c2f8",
|
||||
shadowColor: "#86c2f8",
|
||||
shadowBlur: 25,
|
||||
borderWidth: 5,
|
||||
},
|
||||
},
|
||||
series: [{
|
||||
type: 'map',
|
||||
roam: true,
|
||||
zoom: 1.15,
|
||||
map: 'china', //使用
|
||||
label: {
|
||||
normal: {
|
||||
show: true,
|
||||
fontSize:14, //省会字体大小
|
||||
textStyle: {
|
||||
color: '#ffffff',
|
||||
}
|
||||
},
|
||||
emphasis: {
|
||||
show: false,
|
||||
color: '#ffffff', //指上省会字体颜色
|
||||
}
|
||||
},
|
||||
itemStyle: {
|
||||
normal: {
|
||||
areaColor: {
|
||||
type: "radial",
|
||||
x: 0.5,
|
||||
y: 0.5,
|
||||
r: 0.8,
|
||||
colorStops: [
|
||||
{
|
||||
offset: 0,
|
||||
color: "#1c2a4c", // 0% 处的颜色
|
||||
},
|
||||
{
|
||||
offset: 1,
|
||||
color: "#1f335e", // 100% 处的颜色
|
||||
},
|
||||
],
|
||||
globalCoord: true, // 缺省为 false
|
||||
},
|
||||
shadowColor: "rgb(58,115,192)",
|
||||
borderColor: '#8ac2fb'
|
||||
},
|
||||
// normal: {
|
||||
// areaColor: '#141e37', //背景颜色
|
||||
// borderColor: '#8ac2fb', //省划分边线
|
||||
// borderWidth: 1, //边线的粗细
|
||||
// },
|
||||
emphasis: {
|
||||
areaColor: '#22578b' , //指上背景限色
|
||||
textStyle: {
|
||||
color: '#ffffff',
|
||||
|
||||
}
|
||||
}
|
||||
},
|
||||
},
|
||||
{
|
||||
type: 'scatter', //effectScatter 水波纹效果 scatter 无效果
|
||||
coordinateSystem: 'geo',
|
||||
rippleEffect: {
|
||||
brushType: 'stroke'
|
||||
},
|
||||
showEffectOn: 'render',
|
||||
itemStyle: {
|
||||
normal: {
|
||||
show: false,
|
||||
|
||||
}
|
||||
},
|
||||
symbolSize: 35,
|
||||
symbol: iconGD,
|
||||
data: outdata,
|
||||
zlevel: 1,
|
||||
|
||||
}]
|
||||
};
|
||||
myChart.setOption(this.option);
|
||||
|
||||
myChart.on('georoam', function(params) {
|
||||
var option = myChart.getOption(); //获得option对象
|
||||
if (params.zoom != null && params.zoom != undefined) { //捕捉到缩放时
|
||||
option.geo[0].zoom = option.series[0].zoom+0.02; //下层geo的缩放等级跟着上层的geo一起改变
|
||||
option.geo[0].center = option.series[0].center; //下层的geo的中心位置随着上层geo一起改变
|
||||
} else { //捕捉到拖曳时
|
||||
option.geo[0].center = option.series[0].center; //下层的geo的中心位置随着上层geo一起改变
|
||||
}
|
||||
myChart.setOption(option); //设置option
|
||||
});
|
||||
},
|
||||
|
||||
},
|
||||
watch: {
|
||||
data: function (n,o) {
|
||||
this.loadMap(this.data,this.tooltip)
|
||||
window.chartClick = this.chartClick;
|
||||
}
|
||||
},
|
||||
})
|
||||
|
|
@ -1,311 +0,0 @@
|
|||
import Vue from 'vue'
|
||||
Vue.component("labour-migrate-china-map", {
|
||||
template: `
|
||||
<div :style="{'height': height+'px'}" ref="map"></div>
|
||||
`,
|
||||
props: {
|
||||
data:{
|
||||
type:Object
|
||||
},
|
||||
height:{
|
||||
type:Number
|
||||
}
|
||||
},
|
||||
data() {
|
||||
return {
|
||||
option:{},
|
||||
|
||||
}
|
||||
},
|
||||
mounted(){
|
||||
this.loadMap(this.data)
|
||||
},
|
||||
methods: {
|
||||
loadMap(outdata) {
|
||||
/**
|
||||
* Created by User on 2020/2/24.
|
||||
*/
|
||||
var province = {
|
||||
'黑龙江': [127.9688, 45.368],
|
||||
'内蒙古': [110.3467, 41.4899],
|
||||
"吉林": [125.8154, 44.2584],
|
||||
'北京市': [116.4551, 40.2539],
|
||||
"辽宁": [123.1238, 42.1216],
|
||||
"河北": [114.4995, 38.1006],
|
||||
"天津": [117.4219, 39.4189],
|
||||
"山西": [112.3352, 37.9413],
|
||||
"陕西": [109.1162, 34.2004],
|
||||
"甘肃": [103.5901, 36.3043],
|
||||
"宁夏": [106.3586, 38.1775],
|
||||
"青海": [101.4038, 36.8207],
|
||||
"新疆": [87.9236, 43.5883],
|
||||
"西藏": [91.11, 29.97],
|
||||
"四川": [103.9526, 30.7617],
|
||||
"重庆": [108.384366, 30.439702],
|
||||
"山东": [117.1582, 36.8701],
|
||||
"河南": [113.4668, 34.6234],
|
||||
"江苏": [118.8062, 31.9208],
|
||||
"安徽": [117.29, 32.0581],
|
||||
"湖北": [114.3896, 30.6628],
|
||||
"浙江": [119.5313, 29.8773],
|
||||
"福建": [119.4543, 25.9222],
|
||||
"江西": [116.0046, 28.6633],
|
||||
"湖南": [113.0823, 28.2568],
|
||||
"贵州": [106.6992, 26.7682],
|
||||
"云南": [102.9199, 25.4663],
|
||||
"广东": [113.12244, 23.009505],
|
||||
"广西": [108.479, 23.1152],
|
||||
"海南": [110.3893, 19.8516],
|
||||
'上海': [121.4648, 31.2891]
|
||||
};
|
||||
|
||||
var points = []
|
||||
var jionData=[]
|
||||
var valueData = []
|
||||
var names = []
|
||||
for (let i = 0; i < outdata.chinaDatas.length; i++) {
|
||||
var name = outdata.chinaDatas[i][0].name
|
||||
valueData.push(outdata.chinaDatas[i][0].value)
|
||||
names.push(outdata.chinaDatas[i][0].name)
|
||||
points.push({
|
||||
value:province[name],
|
||||
})
|
||||
jionData.push(
|
||||
{
|
||||
name:outdata.chinaDatas[i][0].name,
|
||||
data:outdata.chinaDatas[i][0].value,
|
||||
attacked:outdata.toCity,
|
||||
coords: [
|
||||
province[name],
|
||||
outdata.toCityJW,
|
||||
],
|
||||
|
||||
},
|
||||
)
|
||||
}
|
||||
points.push({
|
||||
name:outdata.toCity,
|
||||
value:outdata.toCityJW,
|
||||
itemStyle: {
|
||||
color: "#db8f08", //被攻击点的颜色
|
||||
},
|
||||
})
|
||||
|
||||
var myChart = echarts.init(this.$refs.map);
|
||||
echarts.getMap('china').geoJson.features;
|
||||
this.option = {
|
||||
tooltip: {
|
||||
trigger: 'item',
|
||||
borderColor: '#FFFFCC',
|
||||
showDelay: 0,
|
||||
hideDelay: 0,
|
||||
enterable: true,
|
||||
transitionDuration: 0,
|
||||
extraCssText: 'z-index:100',
|
||||
formatter: function(params, ticket, callback) {
|
||||
|
||||
var res = "";
|
||||
if(params.componentSubType=="effectScatter") {
|
||||
var name = names[params.dataIndex];
|
||||
var value = valueData[params.dataIndex];
|
||||
if(points[points.length-1].name != params.name){
|
||||
res = "<div style='color:#fff;'>地址：" + name+"<br/>人数："+value+"（人）</div>";
|
||||
}else {
|
||||
res = "<div style='color:#fff;'>地址：" + points[points.length-1].name+"</div>";
|
||||
}
|
||||
return res;
|
||||
}else if(params.componentSubType=="lines"){
|
||||
var name = params.data.name;
|
||||
var value = params.data.data;
|
||||
var toname =params.data.attacked
|
||||
res = "<div style='color:#fff;'>地址：" + name+">"+toname+"<br/>人数："+value+"（人）</div>";
|
||||
return res;
|
||||
}
|
||||
// else{
|
||||
// var name = params.name;
|
||||
// return name;
|
||||
// }
|
||||
//根据业务自己拓展要显示的内容
|
||||
}
|
||||
},
|
||||
geo: {
|
||||
map: 'china',
|
||||
show: true,
|
||||
roam: false,
|
||||
zoom: 1.17,
|
||||
label: {
|
||||
emphasis: {
|
||||
show: false,
|
||||
}
|
||||
},
|
||||
layoutSize: "100%",
|
||||
itemStyle: {
|
||||
// normal: {
|
||||
// areaColor: '#000', //背景颜色
|
||||
// borderColor: '#8ac2fb', //省划分边线
|
||||
// borderWidth: 10, //边线的粗细
|
||||
// },
|
||||
// emphasis: {
|
||||
// areaColor: '#002d90' , //指上背景限色
|
||||
// },
|
||||
areaColor: "#86c2f8",
|
||||
borderColor: "#86c2f8",
|
||||
shadowColor: "#86c2f8",
|
||||
shadowBlur: 25,
|
||||
borderWidth: 5,
|
||||
},
|
||||
},
|
||||
series: [
|
||||
{
|
||||
type: "lines",
|
||||
zlevel: 2,
|
||||
effect: {
|
||||
show: true,
|
||||
period: 4, //箭头指向速度，值越小速度越快
|
||||
trailLength: 0.4, //特效尾迹长度[0,1]值越大，尾迹越长重
|
||||
symbol: "arrow", //箭头图标
|
||||
symbolSize: 10, //图标大小
|
||||
},
|
||||
lineStyle: {
|
||||
normal: {
|
||||
color: "#db8f08", //攻击线条的颜色
|
||||
/* function (value){ //随机颜色
|
||||
|
||||
['#f21347','#f3243e','#f33736','#f34131','#f34e2b',
|
||||
'#f56321','#f56f1c','#f58414','#f58f0e','#f5a305',
|
||||
'#e7ab0b','#dfae10','#d5b314','#c1bb1f','#b9be23',
|
||||
'#a6c62c','#96cc34','#89d23b','#7ed741','#77d64c',
|
||||
'#71d162','#6bcc75','#65c78b','#5fc2a0','#5abead',
|
||||
'#52b9c7','#4fb6d2','#4ab2e5']
|
||||
return "#"+("00000"+((Math.random()*16777215+0.5)>>0).toString(16)).slice(-6);
|
||||
}*/
|
||||
width: 2, //线条宽度
|
||||
opacity: 0.1, //尾迹线条透明度
|
||||
curveness: 0.3, //尾迹线条曲直度
|
||||
},
|
||||
},
|
||||
data: jionData
|
||||
},
|
||||
{
|
||||
type: 'map',
|
||||
roam: false,
|
||||
zoom: 1.15,
|
||||
map: 'china', //使用
|
||||
label: {
|
||||
normal: {
|
||||
show: true,
|
||||
fontSize:14, //省会字体大小
|
||||
textStyle: {
|
||||
color: '#eeeeee',
|
||||
}
|
||||
},
|
||||
emphasis: {
|
||||
show: false,
|
||||
color: '#ffffff', //指上省会字体颜色
|
||||
}
|
||||
},
|
||||
itemStyle: {
|
||||
normal: {
|
||||
areaColor: {
|
||||
type: "radial",
|
||||
x: 0.5,
|
||||
y: 0.5,
|
||||
r: 0.8,
|
||||
colorStops: [
|
||||
{
|
||||
offset: 0,
|
||||
color: "#1c2a4c", // 0% 处的颜色
|
||||
},
|
||||
{
|
||||
offset: 1,
|
||||
color: "#1f335e", // 100% 处的颜色
|
||||
},
|
||||
],
|
||||
globalCoord: true, // 缺省为 false
|
||||
},
|
||||
shadowColor: "rgb(58,115,192)",
|
||||
borderColor: '#8ac2fb'
|
||||
},
|
||||
// normal: {
|
||||
// areaColor: '#141e37', //背景颜色
|
||||
// borderColor: '#8ac2fb', //省划分边线
|
||||
// borderWidth: 1, //边线的粗细
|
||||
// },
|
||||
emphasis: {
|
||||
areaColor: '#22578b' , //指上背景限色
|
||||
textStyle: {
|
||||
color: '#ffffff',
|
||||
|
||||
}
|
||||
}
|
||||
},
|
||||
// points.push({
|
||||
// name:outdata.toCity,
|
||||
data: jionData.map(function(dataItem) {
|
||||
return {
|
||||
name: dataItem.name,
|
||||
value: dataItem.data,
|
||||
seriesName:points[points.length-1].name
|
||||
};
|
||||
}),
|
||||
},
|
||||
{
|
||||
type: "effectScatter",
|
||||
coordinateSystem: "geo",
|
||||
showEffectOn: "render",
|
||||
zlevel: 1,
|
||||
rippleEffect: {
|
||||
period: 15,
|
||||
scale: 4,
|
||||
brushType: "fill",
|
||||
},
|
||||
hoverAnimation: true,
|
||||
label: {
|
||||
normal: {
|
||||
formatter: "{b}",
|
||||
position: "right",
|
||||
offset: [15, 0],
|
||||
color: "#4575ff",
|
||||
show: true,
|
||||
},
|
||||
},
|
||||
itemStyle: {
|
||||
normal: {
|
||||
color: "#4575ff",
|
||||
/* function (value){ //随机颜色
|
||||
return "#"+("00000"+((Math.random()*16777215+0.5)>>0).toString(16)).slice(-6);
|
||||
}*/
|
||||
shadowBlur: 10,
|
||||
shadowColor: "#333",
|
||||
},
|
||||
},
|
||||
symbolSize: 12,
|
||||
data: points,
|
||||
}, //地图线的动画效果
|
||||
|
||||
|
||||
],
|
||||
};
|
||||
myChart.setOption(this.option, true);
|
||||
|
||||
var currentIndex = -1;
|
||||
var timeTicket = setInterval(function() {
|
||||
var dataLen = jionData.length;
|
||||
currentIndex = (currentIndex + 1) % dataLen;
|
||||
// 显示 tooltip
|
||||
myChart.dispatchAction({
|
||||
type: 'showTip',
|
||||
seriesIndex: 2,
|
||||
dataIndex: currentIndex
|
||||
});
|
||||
}, 3000);
|
||||
|
||||
},
|
||||
|
||||
},
|
||||
watch: {
|
||||
data:function () {
|
||||
this.loadMap(this.data)
|
||||
}
|
||||
},
|
||||
})
|
||||
|
|
@ -1,80 +0,0 @@
|
|||
import Vue from 'vue'
|
||||
Vue.component("list-menu", {
|
||||
template: `
|
||||
<div class="video-list-max">
|
||||
<div class="video-list-min">
|
||||
<div class="video-list-for" v-for="item in videoListData" @click="onVideoListFor(item.id,item.videoList)">
|
||||
<div class="video-list-title">{{item.project_abbreviation}}</div>
|
||||
<el-collapse-transition>
|
||||
<ul class="video-list-ul" v-show="item.type">
|
||||
<li :class="user.type==true?'active':''" v-for="user in item.videoList" @click.stop="onVideoListLi(user)">
|
||||
<button :class="user.signalState == 1?'video-state-zx':'video-state-lx'"></button>
|
||||
<span>{{user.videoName}}</span>
|
||||
</li>
|
||||
</ul>
|
||||
</el-collapse-transition>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
`,
|
||||
props: {
|
||||
data:{
|
||||
type:Array
|
||||
}
|
||||
},
|
||||
data() {
|
||||
return {
|
||||
videoListData:[]
|
||||
}
|
||||
},
|
||||
mounted(){
|
||||
this.init()
|
||||
|
||||
},
|
||||
methods: {
|
||||
init(){
|
||||
this.videoListData = this.data
|
||||
},
|
||||
onVideoListFor(id,item){
|
||||
var data = this.videoListData
|
||||
for (let i = 0; i < data.length ; i++) {
|
||||
if(data[i].id == id){ //data[i].type == false
|
||||
data[i].type = true
|
||||
for (let j = 0; j <data[i].videoList.length ; j++) {
|
||||
if(j == 0){
|
||||
data[i].videoList[j].type = true
|
||||
}else {
|
||||
data[i].videoList[j].type = false
|
||||
}
|
||||
}
|
||||
}else{
|
||||
data[i].type = false
|
||||
for (let k = 0; k <data[i].videoList.length ; k++) {
|
||||
data[i].videoList[k].type = false
|
||||
}
|
||||
}
|
||||
}
|
||||
this.videoListData = data
|
||||
this.$emit('project',item[0]);
|
||||
},
|
||||
onVideoListLi(user){
|
||||
var data = this.videoListData
|
||||
for (let i = 0; i <data.length ; i++) {
|
||||
for (let j = 0; j <data[i].videoList.length ; j++) {
|
||||
if(data[i].videoList[j].id == user.id){
|
||||
data[i].videoList[j].type = true
|
||||
}else{
|
||||
data[i].videoList[j].type = false
|
||||
}
|
||||
}
|
||||
}
|
||||
this.videoListData = data
|
||||
this.$emit('equipment',user);
|
||||
},
|
||||
},
|
||||
watch:{
|
||||
data:function () {
|
||||
this.init()
|
||||
}
|
||||
}
|
||||
})
|
||||
File diff suppressed because it is too large
Load Diff
|
|
@ -1,21 +0,0 @@
|
|||
import Vue from 'vue'
|
||||
Vue.component('module-big', {
|
||||
template:`
|
||||
<div class="screen-module">
|
||||
<div class="screen-big">
|
||||
<slot></slot>
|
||||
</div>
|
||||
</div>
|
||||
`,
|
||||
props: {
|
||||
label:{
|
||||
type:String
|
||||
}
|
||||
},
|
||||
|
||||
data() {
|
||||
return {
|
||||
|
||||
};
|
||||
},
|
||||
})
|
||||
|
|
@ -1,22 +0,0 @@
|
|||
import Vue from 'vue'
|
||||
Vue.component('module-one-0-5', {
|
||||
template:`
|
||||
<div class="screen-module">
|
||||
<div class="screen-one-0-5">
|
||||
<div class="module-title"><span>{{label}}</span></div>
|
||||
<slot></slot>
|
||||
</div>
|
||||
</div>
|
||||
`,
|
||||
props: {
|
||||
label:{
|
||||
type:String
|
||||
}
|
||||
},
|
||||
|
||||
data() {
|
||||
return {
|
||||
|
||||
};
|
||||
},
|
||||
})
|
||||
|
|
@ -1,54 +0,0 @@
|
|||
<template>
|
||||
<div class="screen-module" :class="'border-' + border">
|
||||
<border-box6 v-if="border == 6" />
|
||||
<border-box1 v-if="border == 1" />
|
||||
<div class="screen-one-1-1">
|
||||
<div class="module-title"><span>{{ label || '' }}</span></div>
|
||||
<slot></slot>
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
export default {
|
||||
props: {
|
||||
border: {
|
||||
type: Number
|
||||
},
|
||||
label: {
|
||||
type: String
|
||||
}
|
||||
}
|
||||
};
|
||||
</script>
|
||||
<style lang="less" scoped>
|
||||
.screen-module {
|
||||
&.border-6 {
|
||||
position: relative;
|
||||
/deep/ .dv-border-svg-container{
|
||||
top:14px;
|
||||
}
|
||||
|
||||
.screen-one-1-1 {
|
||||
background: unset;
|
||||
.module-title{
|
||||
position: relative;
|
||||
top:20px;
|
||||
}
|
||||
}
|
||||
}
|
||||
&.border-1 {
|
||||
position: relative;
|
||||
background: rgba(5,12,25,0.6);
|
||||
.screen-one-1-1 {
|
||||
background: unset;
|
||||
.module-title{
|
||||
position: relative;
|
||||
top: 20px;
|
||||
left:20px;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
}
|
||||
</style>
|
||||
|
|
@ -1,22 +0,0 @@
|
|||
import Vue from 'vue'
|
||||
Vue.component('module-one-1-2', {
|
||||
template:`
|
||||
<div class="screen-module">
|
||||
<div class="screen-one-1-2">
|
||||
<div class="module-title"><span>{{label}}</span></div>
|
||||
<slot></slot>
|
||||
</div>
|
||||
</div>
|
||||
`,
|
||||
props: {
|
||||
label:{
|
||||
type:String
|
||||
}
|
||||
},
|
||||
|
||||
data() {
|
||||
return {
|
||||
|
||||
};
|
||||
},
|
||||
})
|
||||
|
|
@ -1,22 +0,0 @@
|
|||
import Vue from 'vue'
|
||||
Vue.component('module-one-1-3', {
|
||||
template:`
|
||||
<div class="screen-module">
|
||||
<div class="screen-one-1-3">
|
||||
<div class="module-title"><span>{{label}}</span></div>
|
||||
<slot></slot>
|
||||
</div>
|
||||
</div>
|
||||
`,
|
||||
props: {
|
||||
label:{
|
||||
type:String
|
||||
}
|
||||
},
|
||||
|
||||
data() {
|
||||
return {
|
||||
|
||||
};
|
||||
},
|
||||
})
|
||||
|
|
@ -1,22 +0,0 @@
|
|||
import Vue from 'vue'
|
||||
Vue.component('module-one-1-4', {
|
||||
template:`
|
||||
<div class="screen-module">
|
||||
<div class="screen-one-1-4">
|
||||
<div class="module-title"><span>{{label}}</span></div>
|
||||
<slot></slot>
|
||||
</div>
|
||||
</div>
|
||||
`,
|
||||
props: {
|
||||
label:{
|
||||
type:String
|
||||
}
|
||||
},
|
||||
|
||||
data() {
|
||||
return {
|
||||
|
||||
};
|
||||
},
|
||||
})
|
||||
|
|
@ -1,26 +0,0 @@
|
|||
import Vue from 'vue'
|
||||
Vue.component('module-one-2-1', {
|
||||
template:`
|
||||
<div class="screen-module" :class="className">
|
||||
<div class="screen-one-2-1">
|
||||
<div class="module-title"><span>{{label}}</span></div>
|
||||
<slot></slot>
|
||||
</div>
|
||||
</div>
|
||||
`,
|
||||
props: {
|
||||
label:{
|
||||
type:String
|
||||
},
|
||||
className:{
|
||||
type:String,
|
||||
default:''
|
||||
}
|
||||
},
|
||||
|
||||
data() {
|
||||
return {
|
||||
|
||||
};
|
||||
},
|
||||
})
|
||||
|
|
@ -1,22 +0,0 @@
|
|||
import Vue from 'vue'
|
||||
Vue.component('module-one-2-2', {
|
||||
template:`
|
||||
<div class="screen-module">
|
||||
<div class="screen-one-2-2">
|
||||
<div class="module-title"><span>{{label}}</span></div>
|
||||
<slot></slot>
|
||||
</div>
|
||||
</div>
|
||||
`,
|
||||
props: {
|
||||
label:{
|
||||
type:String
|
||||
}
|
||||
},
|
||||
|
||||
data() {
|
||||
return {
|
||||
|
||||
};
|
||||
},
|
||||
})
|
||||
|
|
@ -1,22 +0,0 @@
|
|||
import Vue from 'vue'
|
||||
Vue.component('module-one-2-3', {
|
||||
template:`
|
||||
<div class="screen-module">
|
||||
<div class="screen-one-2-3">
|
||||
<div class="module-title"><span>{{label}}</span></div>
|
||||
<slot></slot>
|
||||
</div>
|
||||
</div>
|
||||
`,
|
||||
props: {
|
||||
label:{
|
||||
type:String
|
||||
}
|
||||
},
|
||||
|
||||
data() {
|
||||
return {
|
||||
|
||||
};
|
||||
},
|
||||
})
|
||||
|
|
@ -1,22 +0,0 @@
|
|||
import Vue from 'vue'
|
||||
Vue.component('module-one-2-4', {
|
||||
template:`
|
||||
<div class="screen-module">
|
||||
<div class="screen-one-2-4">
|
||||
<div class="module-title"><span>{{label}}</span></div>
|
||||
<slot></slot>
|
||||
</div>
|
||||
</div>
|
||||
`,
|
||||
props: {
|
||||
label:{
|
||||
type:String
|
||||
}
|
||||
},
|
||||
|
||||
data() {
|
||||
return {
|
||||
|
||||
};
|
||||
},
|
||||
})
|
||||
Some files were not shown because too many files have changed in this diff Show More
Loading…
Reference in New Issue