2166 lines
54 KiB
Vue
2166 lines
54 KiB
Vue
<template>
|
|
<div class="bim-manage main-page">
|
|
<div id="bimManage" :key="elId">
|
|
<div id="bimManageContainer" class="bimManageContainer"></div>
|
|
</div>
|
|
<div class="div-left" :class="{ isShow: leftShow, isHide: !leftShow }">
|
|
<transition name="left">
|
|
<div class="data-content" v-show="leftShow">
|
|
<div class="div-row">
|
|
<div class="row-title">
|
|
<svg-icon icon-class="signal"></svg-icon>
|
|
项目概况
|
|
</div>
|
|
<div class="prj-info">
|
|
<div class="base-info">
|
|
<div class="floor-area led-number">{{ prj.floorArea }}</div>
|
|
<div class="floor-area-text">建筑面积:单位(平方米)</div>
|
|
</div>
|
|
<table class="tb-prj">
|
|
<tr>
|
|
<th>项目名称</th>
|
|
<td>{{ prj.projectName }}</td>
|
|
</tr>
|
|
<tr>
|
|
<th>建设单位</th>
|
|
<td>{{ prj.constructionUnit }}</td>
|
|
</tr>
|
|
<tr>
|
|
<th>总包单位</th>
|
|
<td>{{ prj.packageUnit }}</td>
|
|
</tr>
|
|
<tr>
|
|
<th>开工日期</th>
|
|
<td>{{ prj.startDate | toDate }}</td>
|
|
</tr>
|
|
<tr>
|
|
<th>计划完工日期</th>
|
|
<td>{{ prj.endDate | toDate }}</td>
|
|
</tr>
|
|
</table>
|
|
</div>
|
|
</div>
|
|
<div class="div-row">
|
|
<div class="row-title">
|
|
<svg-icon icon-class="signal"></svg-icon>
|
|
成本产值
|
|
</div>
|
|
<div class="investment-stats-cost">
|
|
<div class="stats-grid">
|
|
<div class="stat-card">
|
|
<div class="stat-title">总投资(万元)</div>
|
|
<div class="stat-value led-number">{{ prj.totalCost }}</div>
|
|
</div>
|
|
<div class="stat-card">
|
|
<div class="stat-title">年度投资(万元)</div>
|
|
<div class="stat-value led-number">{{ prj.annualCost }}</div>
|
|
</div>
|
|
<div class="stat-card">
|
|
<div class="stat-title">本月完成(万元)</div>
|
|
<div class="stat-value led-number">{{ prj.monthCost }}</div>
|
|
</div>
|
|
<div class="stat-card">
|
|
<div class="stat-title">开累完成(万元)</div>
|
|
<div class="stat-value led-number">{{ prj.accumulatedCost }}</div>
|
|
</div>
|
|
<div class="center-icon">
|
|
<div class="chart-gif chart-overview-gif"></div>
|
|
<span><svg-icon icon-class="money2" /></span>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<div class="div-row">
|
|
<div class="row-title"><svg-icon icon-class="signal"></svg-icon> 人员</div>
|
|
<div class="prj-worker">
|
|
<div class="worker-chart">
|
|
<div class="chart-item" v-for="(wk, idx) in workerInfo" :key="idx">
|
|
<div class="chart-gif chart-overview-gif"></div>
|
|
<div class="chart-text led-number">{{ wk.value }}</div>
|
|
</div>
|
|
</div>
|
|
<div class="worker-title">
|
|
<div class="title-item" v-for="(wk, idx) in workerInfo" :key="idx">
|
|
<svg-icon icon-class="group2" />
|
|
<div>{{ wk.text }}</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</transition>
|
|
<img :src="leftSrc" class="toSafety-fixed-left-img" @click="arrowRetract" id="arrowLeft" />
|
|
</div>
|
|
<div class="div-right" :class="{ isShow: leftShow, isHide: !leftShow }">
|
|
<transition name="right">
|
|
<div class="data-content" v-show="leftShow">
|
|
<div class="div-row">
|
|
<div class="row-title">
|
|
<svg-icon icon-class="signal"></svg-icon>
|
|
工程进度
|
|
</div>
|
|
<div class="plan-chart">
|
|
<div class="chart-item">
|
|
<my-chart :key="chart1Key" class="chart-data" id="processChart1" width="100%" height="100%"
|
|
:render="renderChart1"></my-chart>
|
|
<div class="chart-title">计划完成</div>
|
|
</div>
|
|
<div class="chart-item">
|
|
<my-chart :key="chart2Key" class="chart-data" id="processChart2" width="100%" height="100%"
|
|
:render="renderChart2"></my-chart>
|
|
<div class="chart-title">实际完成</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<div class="div-row">
|
|
<div class="row-title">
|
|
<svg-icon icon-class="signal"></svg-icon>
|
|
安全检查
|
|
</div>
|
|
<div class="warn-info">
|
|
<div class="warn-item">
|
|
<div class="czz-number-img czz-number-img-blue">
|
|
<svg-icon icon-class="notesearch" />
|
|
</div>
|
|
<div class="warn-data">
|
|
<div class="warn-data-val led-number">{{ safetyInfo.safetyCount }}</div>
|
|
<div class="warn-data-text">问题数</div>
|
|
</div>
|
|
</div>
|
|
<div class="warn-item">
|
|
<div class="czz-number-img czz-number-img-blue">
|
|
<svg-icon icon-class="tools" />
|
|
</div>
|
|
<div class="warn-data">
|
|
<div class="warn-data-val led-number">{{ safetyInfo.safetyRectifyCount }}</div>
|
|
<div class="warn-data-text">整改数</div>
|
|
</div>
|
|
</div>
|
|
<div class="warn-item">
|
|
<div class="czz-number-img czz-number-img-green">
|
|
<svg-icon icon-class="percent" class="green" />
|
|
</div>
|
|
<div class="warn-data">
|
|
<div class="warn-data-val led-number">{{ safetyInfo.safetyRectifyRate }}%</div>
|
|
<div class="warn-data-text">整改率</div>
|
|
</div>
|
|
</div>
|
|
<div class="warn-item">
|
|
<div class="czz-number-img czz-number-img-blue">
|
|
<svg-icon icon-class="warn" class="red" />
|
|
</div>
|
|
<div class="warn-data">
|
|
<div class="warn-data-val led-number">{{ safetyInfo.safetyTimeoutCount }}</div>
|
|
<div class="warn-data-text">超时数</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<div class="div-row">
|
|
<div class="row-title"><svg-icon icon-class="signal"></svg-icon> 项目全景</div>
|
|
|
|
<div class="photography-list">
|
|
<template v-if="photographyList && photographyList.length > 0">
|
|
<el-carousel height="100%" :autoplay="false">
|
|
<el-carousel-item v-for="(item, idx) in photographyList" :key="idx">
|
|
<video controls class="photography-video">
|
|
<source :src="item.videoUrl" type="video/mp4" :key="item.videoUrl" />
|
|
您的浏览器不支持Video标签。
|
|
</video>
|
|
<div class="photography-list-title">
|
|
{{ item.videoDate }}
|
|
</div>
|
|
</el-carousel-item>
|
|
</el-carousel>
|
|
</template>
|
|
<template v-else>
|
|
<div class="photography-list-nodata">
|
|
<div>
|
|
<i class="video-play">
|
|
<svg class="icon"
|
|
style="width: 30px; height: 30px; vertical-align: middle; fill: currentColor; overflow: hidden"
|
|
viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="4551">
|
|
<path
|
|
d="M128 138.666667c0-47.232 33.322667-66.666667 74.176-43.562667l663.146667 374.954667c40.96 23.168 40.853333 60.8 0 83.882666L202.176 928.896C161.216 952.064 128 932.565333 128 885.333333v-746.666666z"
|
|
fill="#3D3D3D" p-id="4552"></path>
|
|
</svg>
|
|
</i>
|
|
</div>
|
|
<div class="photography-list-no-title">暂无数据</div>
|
|
</div>
|
|
</template>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</transition>
|
|
<img :src="rightSrc" class="toSafety-fixed-right-img" @click="arrowRetract" id="arrowRight" />
|
|
</div>
|
|
|
|
<div class="div-mode">
|
|
<div class="mode-item" :class="{ 'is-active': mode == 'plan' }" @click="changeMode('plan')">
|
|
<svg-icon icon-class="funnel" />
|
|
<span>形象进度</span>
|
|
</div>
|
|
|
|
<div class="mode-item" :class="{ 'is-active': mode == 'model' }" @click="changeMode('model')">
|
|
<svg-icon icon-class="city" />
|
|
<span>整体模型</span>
|
|
</div>
|
|
</div>
|
|
<div class="div-tools" :class="'menu-' + menuShowCount">
|
|
<div class="tool-item" @click="resetScene">
|
|
<div class="icon">
|
|
<svg-icon icon-class="home" />
|
|
</div>
|
|
<span class="sp-text">默认视点</span>
|
|
</div>
|
|
|
|
<div class="tool-item" @click="changeDevicType(1)" :class="{ 'is-active': devicTypes.includes(1) }"
|
|
v-if="menuShow.video">
|
|
<div class="icon">
|
|
<svg-icon icon-class="videoMonitor" />
|
|
</div>
|
|
<span class="sp-text">视频监控</span>
|
|
</div>
|
|
<div class="tool-item" @click="changeDevicType(2)" :class="{ 'is-active': devicTypes.includes(2) }"
|
|
v-if="menuShow.pit">
|
|
<div class="icon">
|
|
<svg-icon icon-class="pitMonitor" />
|
|
</div>
|
|
<span class="sp-text">基坑监控</span>
|
|
</div>
|
|
<div class="tool-item" @click="changeDevicType(3)" :class="{ 'is-active': devicTypes.includes(3) }"
|
|
v-if="menuShow.tower">
|
|
<div class="icon">
|
|
<svg-icon icon-class="towerMonitor" />
|
|
</div>
|
|
<span class="sp-text">塔机监控</span>
|
|
</div>
|
|
<div class="tool-item" @click="changeDevicType(4)" :class="{ 'is-active': devicTypes.includes(4) }"
|
|
v-if="menuShow.power">
|
|
<div class="icon">
|
|
<svg-icon icon-class="power" />
|
|
</div>
|
|
<span class="sp-text">电箱监控</span>
|
|
</div>
|
|
</div>
|
|
<div class="plan-legend" :class="{ isShow: leftShow, isHide: !leftShow }" v-if="mode == 'plan'">
|
|
<div class="plan-item">
|
|
<span style="background: rgba(59, 255, 0, 1)"></span>
|
|
<span>提前完工</span>
|
|
</div>
|
|
<div class="plan-item">
|
|
<span style="background: rgba(255, 255, 255, 1)"></span>
|
|
<span>正常完工</span>
|
|
</div>
|
|
<div class="plan-item">
|
|
<span style="background: rgba(250, 0, 0, 1)"></span>
|
|
<span>延迟完工</span>
|
|
</div>
|
|
<div class="plan-item">
|
|
<span style="background: rgba(0, 0, 255, 1)"></span>
|
|
<span>正在施工</span>
|
|
</div>
|
|
</div>
|
|
<video-dialog ref="videoDlg"></video-dialog>
|
|
</div>
|
|
</template>
|
|
|
|
<script>
|
|
const css = `<style>
|
|
.tag-box {
|
|
position: relative;
|
|
display: flex;
|
|
flex-flow: column;
|
|
align-items: center;
|
|
}
|
|
.tag-img {
|
|
width: 20px;
|
|
height: 20px;
|
|
position: absolute;
|
|
left:50%;
|
|
bottom:55px;
|
|
margin-left:-10px;
|
|
}
|
|
.tag-bg-img{
|
|
width: 16px;
|
|
height: 80px;
|
|
margin-bottom:40px;
|
|
}
|
|
.tag-txt {
|
|
color: #FFF;
|
|
font-size: 12px;
|
|
padding: 10px;
|
|
background: #2b4d63de;
|
|
border: 1px solid #75fbfdaa;
|
|
}
|
|
.tag-txt .data-item.red{
|
|
color:red;
|
|
}
|
|
.tag-bg-img-1{
|
|
width:21px;
|
|
height:18px;
|
|
position: absolute;
|
|
bottom:40px;
|
|
left:50%;
|
|
margin-left:-11px;
|
|
}
|
|
.tag-img-1 {
|
|
width: 20px;
|
|
height: 20px;
|
|
position: absolute;
|
|
left:50%;
|
|
bottom:55px;
|
|
margin-left:-10px;
|
|
}
|
|
.box-type-1{
|
|
height:80px;
|
|
width:60px;
|
|
display:block;
|
|
}
|
|
.tb-power{
|
|
border-collapse: collapse;
|
|
}
|
|
.tb-power td{
|
|
border:solid 1px #75fbfd33;
|
|
padding:4px 8px;
|
|
text-align:center;
|
|
}
|
|
</style>`;
|
|
import debounce from "lodash.debounce";
|
|
import videoDialog from "./bim/videoDialog.vue";
|
|
import bimTools from './bim/bimTools'
|
|
import apiTools from './bim/apiTools.js'
|
|
import sapiTools from './bim/sapiTools.js'
|
|
export default {
|
|
components: {
|
|
videoDialog,
|
|
},
|
|
data() {
|
|
return {
|
|
dpi: "",
|
|
elId: 1,
|
|
devicTypes: [],
|
|
viewPoint: null,
|
|
project: null,
|
|
selProject: null,
|
|
addLabels: [],
|
|
devices: [],
|
|
showDevices: [],
|
|
videoData: [],
|
|
towerData: [],
|
|
iotData: [],
|
|
leftSrc: "./bimImages/arrow_left_retract.png",
|
|
rightSrc: "./bimImages/arrow_right_retract.png",
|
|
leftShow: true,
|
|
towerWarning: [],
|
|
prjInfo: null,
|
|
costOutData: null,
|
|
prj: {
|
|
floorArea: 0,
|
|
projectName: "",
|
|
constructionUnit: "",
|
|
packageUnit: "",
|
|
startDate: "",
|
|
endDate: "",
|
|
totalCost: 0,
|
|
annualCost: 0,
|
|
monthCost: 0,
|
|
accumulatedCost: 0,
|
|
},
|
|
workerInfo: [],
|
|
chart1Key: 0,
|
|
chart2Key: 10000,
|
|
planFinishRate: 0,
|
|
finishRate: 0,
|
|
photographyList: [],
|
|
safetyListCount: [],
|
|
safetyInfo: {
|
|
safetyRectifyCount: 0,
|
|
safetyRectifyRate: 0,
|
|
safetyTimeoutCount: 0,
|
|
safetyTimeoutRate: 0,
|
|
},
|
|
menuShow: {
|
|
video: false, //视频监控
|
|
pit: false, //基坑监控
|
|
tower: false, //塔机监控
|
|
power: false, //电箱监控
|
|
},
|
|
menuShowCount: 0,
|
|
modelLoadSuccess: false, //模型加载成功
|
|
mode: "model", //显示模式 model-整体模型 plan-形象进度
|
|
isClient: false,
|
|
};
|
|
},
|
|
beforeDestroy() {
|
|
document.body.classList.remove("is-sapi");
|
|
},
|
|
mounted() {
|
|
window.bimmgr = this
|
|
this.$store.dispatch("ChangeNav", 701);
|
|
this.dpi = this.$dpi();
|
|
window.addEventListener("resize", () => {
|
|
if (this.dpi != this.$dpi()) {
|
|
this.dpi = this.$dpi();
|
|
}
|
|
});
|
|
this.$bus.$on(
|
|
"projectChange",
|
|
debounce((prj) => {
|
|
this.selProject = prj;
|
|
this.elId++;
|
|
this.initEngine();
|
|
this.updateProjectInfo();
|
|
})
|
|
);
|
|
this.selProject = this.$store.getters.selProject;
|
|
this.updateProjectInfo();
|
|
document.body.classList.add("is-sapi");
|
|
this.initEngine();
|
|
this.$api.dict("device_tower_warning").then((d) => {
|
|
this.towerWarning = d;
|
|
});
|
|
this.$bus.$on("getMenus", (objs) => {
|
|
this.updateButtonShow();
|
|
});
|
|
this.updateButtonShow();
|
|
},
|
|
methods: {
|
|
updateButtonShow() {
|
|
let objs = this.$root.showMenus || [];
|
|
this.menuShow.video = objs.find((it) => it.component == "video") ? true : false;
|
|
this.menuShow.pit = objs.find((it) => it.component == "pit") ? true : false;
|
|
this.menuShow.tower = objs.find((it) => it.component == "tower") ? true : false;
|
|
this.menuShow.power = objs.find((it) => it.component == "power") ? true : false;
|
|
this.menuShowCount = 0;
|
|
for (let key in this.menuShow) {
|
|
if (this.menuShow[key]) {
|
|
this.menuShowCount++;
|
|
}
|
|
}
|
|
},
|
|
renderChart1() {
|
|
return this.renderChart(0);
|
|
},
|
|
renderChart2() {
|
|
return this.renderChart(1);
|
|
},
|
|
renderChart(n) {
|
|
let is1K = this.$dpi() == "1K";
|
|
let is2K = this.$dpi() == "2K";
|
|
let opt = {
|
|
tooltip: {
|
|
show: true,
|
|
formatter: function (params) {
|
|
return params.seriesName + "<br/>" + params.marker + (params.value * 100).toFixed(2) + "%";
|
|
},
|
|
},
|
|
series: [
|
|
{
|
|
type: "liquidFill",
|
|
data: [n == 0 ? this.planFinishRate : this.finishRate],
|
|
name: n == 0 ? "计划完成" : "实际完成",
|
|
color: [n == 0 ? "orange" : "#47D89F"], //颜色
|
|
//波浪动画效果
|
|
waveAnimation: true,
|
|
animationEasingUpdate: "quinticInOut",
|
|
backgroundStyle: {
|
|
borderWidth: 2,
|
|
borderColor: "#156ACF",
|
|
},
|
|
radius: "70%",
|
|
outline: {
|
|
show: false,
|
|
},
|
|
label: {
|
|
fontSize: is1K ? 20 : is2K ? 30 : 40,
|
|
formatter: function (param) {
|
|
return (param.value * 100).toFixed(2) + "%";
|
|
},
|
|
},
|
|
},
|
|
],
|
|
};
|
|
return opt;
|
|
},
|
|
updateProjectInfo() {
|
|
if (!this.selProject) {
|
|
return;
|
|
}
|
|
this.getProjectInfo();
|
|
this.costOutputSelectYearAndMonth();
|
|
//this.groupByCraftType();
|
|
this.loadAttendanceData();
|
|
this.getRootScheduleNode();
|
|
this.getFinishRate();
|
|
this.selectLastPhotography();
|
|
this.getSafetyListCount();
|
|
},
|
|
getSafetyListCount() {
|
|
let postData = {
|
|
projectId: this.selProject.id,
|
|
comId: this.selProject.comId,
|
|
};
|
|
this.$api.safety.listCountForBG({ ...postData, infoType: 0 }).then((d) => {
|
|
this.safetyListCount = d.data;
|
|
let func = (lbl) => {
|
|
let obj = this.safetyListCount.find((it) => it.remark == lbl);
|
|
return obj ? obj.id || 0 : 0;
|
|
};
|
|
this.safetyInfo.safetyCount = func("全部");
|
|
this.safetyInfo.safetyRectifyCount = func("完成");
|
|
if (this.safetyInfo.safetyCount == 0) {
|
|
this.safetyInfo.safetyRectifyRate = 100;
|
|
} else {
|
|
this.safetyInfo.safetyRectifyRate = ((this.safetyInfo.safetyRectifyCount / this.safetyInfo.safetyCount) * 100.0).toFixed(2);
|
|
}
|
|
this.safetyInfo.safetyTimeoutCount = func("整改超时");
|
|
});
|
|
},
|
|
selectLastPhotography() {
|
|
this.$api.detail.photographyList(this.selProject.id).then((d) => {
|
|
this.photographyList = d.data;
|
|
});
|
|
},
|
|
getFinishRate() {
|
|
this.$api.planSchedule.findAllPlanDatas(this.selProject.id).then((res) => {
|
|
let _ywcjhs = [];
|
|
|
|
res.data.forEach((item) => {
|
|
if (item.taskStatus == "zcwc" || item.taskStatus == "zhwc") {
|
|
_ywcjhs.push(item);
|
|
}
|
|
});
|
|
|
|
this.finishRate = (_ywcjhs.length / res.data.length).toFixed(4);
|
|
this.chart2Key++;
|
|
});
|
|
},
|
|
getProjectInfo() {
|
|
this.$api.project.getProjectInfo(this.selProject.id).then((d) => {
|
|
this.prjInfo = d.data || {};
|
|
let tmps = this.prjInfo.projectDeptsList || [];
|
|
const func = (t) => {
|
|
let obj = tmps.find((it) => it.deptType == t);
|
|
return obj ? obj : {};
|
|
};
|
|
|
|
this.prj.floorArea = this.prjInfo.floorArea || 0;
|
|
this.prj.projectName = this.prjInfo.projectName || "";
|
|
|
|
this.prj.constructionUnit = func("建设单位").deptName;
|
|
this.prj.packageUnit = this.prjInfo.disDeptName;
|
|
this.prj.startDate = this.prjInfo.actualOperatingTime;
|
|
this.prj.endDate = this.prjInfo?.plannedCompletionTime || "";
|
|
});
|
|
},
|
|
costOutputSelectYearAndMonth() {
|
|
let dt = this.$dt(new Date());
|
|
this.$api.detail
|
|
.costOutputSelectYearAndMonth({
|
|
comId: this.selProject.comId,
|
|
projectId: this.selProject.id,
|
|
year: dt.$y,
|
|
month: dt.$M + 1,
|
|
})
|
|
.then((d) => {
|
|
this.costOutData = d;
|
|
this.prj.totalCost = d.totalInv || 0;
|
|
this.prj.annualCost = d.totalYear || 0;
|
|
this.prj.monthCost = d.curMonth || 0;
|
|
this.prj.accumulatedCost = d.totalMonth || 0;
|
|
});
|
|
},
|
|
loadAttendanceData() {
|
|
if (this.selProject.vendorsCode != "uni") {
|
|
this.loadJhAttendanceData();
|
|
} else {
|
|
this.loadUniAttendanceData();
|
|
}
|
|
},
|
|
loadJhAttendanceData() {
|
|
let data = {
|
|
id: 0,
|
|
projectId: this.selProject.id,
|
|
attendanceTime: this.$dt(new Date()).format("YYYY-MM-DD"),
|
|
};
|
|
let ajax = this.$api.detail.groupAllByComany;
|
|
|
|
ajax(data).then((d) => {
|
|
let tmps = d.data || [];
|
|
const func = (ids) => {
|
|
let sum = 0;
|
|
tmps
|
|
.filter((it) => ids.includes(it.companyTypeId))
|
|
.map((it) => it.id)
|
|
.forEach((it) => {
|
|
sum += it * 1;
|
|
});
|
|
return sum;
|
|
};
|
|
|
|
this.workerInfo = [
|
|
{ text: "劳务人员", value: func(["4", "5"]) },
|
|
{ text: "监理人员", value: func(["2"]) },
|
|
{ text: "总包人员", value: func(["1"]) },
|
|
];
|
|
console.log(this.attendanceData);
|
|
});
|
|
},
|
|
loadUniAttendanceData() {
|
|
let ajax = this.$api.detail.groupByCraftType;
|
|
let posData = {
|
|
comId: this.selProject.comId,
|
|
projectId: this.selProject.id,
|
|
};
|
|
|
|
ajax(posData).then((d) => {
|
|
this.workerInfo = (d.data || []).map((it) => {
|
|
return {
|
|
text: it.createBy,
|
|
value: it.id || 0,
|
|
id: it.craftType,
|
|
};
|
|
});
|
|
});
|
|
},
|
|
groupByCraftType() {
|
|
let ajax = this.$api.detail.groupByCraftType;
|
|
let posData = {
|
|
comId: this.selProject.comId,
|
|
projectId: this.selProject.id,
|
|
};
|
|
ajax(posData).then((d) => {
|
|
this.workerInfo = (d.data || [])
|
|
.map((it) => {
|
|
return {
|
|
text: it.createBy,
|
|
value: it.id || 0,
|
|
id: it.craftType,
|
|
};
|
|
})
|
|
.sort((a, b) => {
|
|
return b.id - a.id;
|
|
});
|
|
});
|
|
},
|
|
getRootScheduleNode() {
|
|
this.$api.bim
|
|
.getRootScheduleNode({
|
|
projectId: this.selProject.id,
|
|
})
|
|
.then((d) => {
|
|
let objs = d.data || [];
|
|
this.planFinishRate = objs.length > 0 ? ((objs[0].scheduleNode || 0) / 100.0).toFixed(4) : 0;
|
|
this.chart1Key++;
|
|
});
|
|
},
|
|
arrowRetract() {
|
|
if (this.leftShow == true) {
|
|
this.rightSrc = "/cdn/bsimages/arrow_right_open.png";
|
|
this.leftSrc = "/cdn/bsimages/arrow_left_open.png";
|
|
$("#arrowLeft").animate({ left: 10 + "px" }, 300);
|
|
$("#arrowRight").animate({ right: 10 + "px" }, 300);
|
|
} else {
|
|
this.rightSrc = "/cdn/bsimages/arrow_right_retract.png";
|
|
this.leftSrc = "/cdn/bsimages/arrow_left_retract.png";
|
|
|
|
$("#arrowLeft").animate({ left: 490 + "px" }, 300);
|
|
$("#arrowRight").animate({ right: 490 + "px" }, 300);
|
|
}
|
|
this.leftShow = !this.leftShow;
|
|
},
|
|
|
|
loadDevicePosition() {
|
|
if (!this.selProject) {
|
|
return;
|
|
}
|
|
this.$api.bim
|
|
.devicePositionGet({
|
|
projectId: this.selProject.id,
|
|
})
|
|
.then((res) => {
|
|
let cnt = 0;
|
|
this.devices = (res.data || [])
|
|
.filter((item) => item.enabled != 0)
|
|
.map((item) => {
|
|
item.show = item.enabled != 0;
|
|
item.position = this.$tryToJson(item.position, []);
|
|
item.elId = (item.deviceId ? item.deviceId : cnt++) + "-" + item.deviceType;
|
|
return item;
|
|
})
|
|
.filter((item) => item.position.length == 3);
|
|
this.showDevices = this.devices.filter((item) => this.devicTypes.includes(item.deviceType));
|
|
this.clearLabels();
|
|
this.addDeviceLabel();
|
|
setTimeout(() => {
|
|
this.loadDeviceData();
|
|
}, 100);
|
|
});
|
|
},
|
|
changeDevicType(n) {
|
|
if (this.devicTypes.includes(n)) {
|
|
let idx = this.devicTypes.indexOf(n);
|
|
this.devicTypes.splice(idx, 1);
|
|
} else {
|
|
this.devicTypes.push(n);
|
|
}
|
|
this.showDevices = this.devices.filter((item) => this.devicTypes.includes(item.deviceType));
|
|
this.clearLabels();
|
|
this.addDeviceLabel();
|
|
setTimeout(() => {
|
|
this.loadDeviceData();
|
|
}, 100);
|
|
},
|
|
AddLable: function (item) {
|
|
let html = "";
|
|
if (item.deviceType == 1) {
|
|
html = this.getVideoHtml(item);
|
|
} else if (item.deviceType == 2) {
|
|
html = this.getPitHtml(item);
|
|
} else if (item.deviceType == 3) {
|
|
html = this.getTowerHtml(item);
|
|
} else if (item.deviceType == 4) {
|
|
html = this.getIotHtml(item);
|
|
}
|
|
|
|
window.bimMgrApi.Label.addBalloon({
|
|
Html: html,
|
|
ID: item.elId,
|
|
Pivot: "2",
|
|
Position: item.position,
|
|
Title: item.name,
|
|
MaxDistance: 1e6,
|
|
onClick: (opt) => this.deviceClick(item, opt),
|
|
});
|
|
this.addLabels.push(item.elId);
|
|
},
|
|
AddClientLable(item) {
|
|
let img = "videoMonitor";
|
|
if (this.activeMenu == 1) {
|
|
img = "videoMonitor";
|
|
} else if (this.activeMenu == 2) {
|
|
img = "pitMonitor";
|
|
} else if (this.activeMenu == 3) {
|
|
img = "towerMonitor";
|
|
} else if (this.activeMenu == 4) {
|
|
img = "power";
|
|
}
|
|
let html = `
|
|
<div class='tag-box-client' style='width:230px;height:228px'>
|
|
<img class='tag-img' src='/cdn/bim/sapi/images/2.png' alt=''>
|
|
<img src="/cdn/bim/sapi/images/red.svg" class='tag-svg'>
|
|
<div class='tag-box'>
|
|
|
|
<span class='tag-txt' style=''>
|
|
<img src='/cdn/bim/sapi/images/${img}.png' style="width:20px;height:20px;">
|
|
${item.name}
|
|
</span>
|
|
</div>
|
|
</div>`;
|
|
window.bimMgrApi.Label.addCustomHtml({
|
|
axisType: 1,
|
|
attachmentPoint: 2,
|
|
displayRange: [0, 1000],
|
|
maxDistance: 1000,
|
|
html: html,
|
|
id: item.elId,
|
|
position: item.position
|
|
});
|
|
|
|
this.addLabels.push(item.elId);
|
|
},
|
|
deviceClick(item, opt) {
|
|
if (item.deviceType == 1) {
|
|
let obj = this.videoData.find((d) => d.id == item.deviceId);
|
|
this.$refs.videoDlg.showDialog(item, obj);
|
|
return;
|
|
}
|
|
console.log(item, opt);
|
|
},
|
|
addDeviceLabel() {
|
|
this.showDevices.forEach((d) => {
|
|
if (d.position && d.position.length > 0) {
|
|
if (this.isClient) {
|
|
this.AddClientLable(d)
|
|
} else {
|
|
this.AddLable(d);
|
|
}
|
|
|
|
}
|
|
});
|
|
},
|
|
removeLabel(lbl) {
|
|
if (this.addLabels.includes(lbl)) {
|
|
window.bimMgrApi.Label.removeBalloon(lbl);
|
|
let idx = this.addLabels.indexOf(lbl);
|
|
this.addLabels.splice(idx, 1);
|
|
}
|
|
},
|
|
clearLabels() {
|
|
this.addLabels.forEach((id) => {
|
|
window.bimMgrApi.Label.removeBalloon(id);
|
|
});
|
|
this.addLabels = [];
|
|
},
|
|
initEngine() {
|
|
if (!this.selProject) {
|
|
return;
|
|
}
|
|
bimTools.initBimCfg(this);
|
|
this.elId++;
|
|
this.activeMenu = 0;
|
|
setTimeout(() => {
|
|
bimTools.initEngine("bimMgrApi", "bimManageContainer", this.bimCfg, this.initLoadModel);
|
|
}, 10);
|
|
},
|
|
initLoadModel() {
|
|
if (this.selProject == null) {
|
|
return;
|
|
}
|
|
this.$api.bim.getDefaultViewPoint(this.selProject.id, 1).then((d) => {
|
|
let pt = "";
|
|
if (d.data && d.data.length > 0) {
|
|
pt = d.data[0].viewPosition;
|
|
pt = this.$tryToJson(pt, null);
|
|
}
|
|
if (pt) {
|
|
this.viewPoint = pt;
|
|
}
|
|
});
|
|
this.$api.bim
|
|
.listBimModel({
|
|
pageNum: 1,
|
|
pageSize: 100,
|
|
comId: this.selProject.comId,
|
|
projectId: this.selProject.id,
|
|
})
|
|
.then((d) => {
|
|
this.models = (d.rows || []).map((it) => {
|
|
it.modelId = it.lightweightName;
|
|
it.bimCfg = this.$tryToJson(it.bimConfig || "{}", {});
|
|
it.visible = false;
|
|
it.checked = true;
|
|
it.gis = this.$tryToJson(it.gisJson || "{}", {});
|
|
return it;
|
|
});
|
|
if (this.models.length == 0) {
|
|
this.$message.error("暂无模型，请先关联模型");
|
|
} else {
|
|
bimTools.addModelList(window.bimMgrApi, this.bimCfg, this.models, (hideParts) => {
|
|
console.log(":--->", hideParts);
|
|
this.loadDevicePosition();
|
|
setTimeout(() => {
|
|
bimTools.setDefaultViewPoint(window.bimMgrApi, this.bimCfg, this.viewPoint)
|
|
this.hideParts=hideParts;
|
|
bimTools.hideParts(window.bimMgrApi, hideParts);
|
|
this.modelLoadSuccess = true;
|
|
this.resetScene();
|
|
}, 1000);
|
|
});
|
|
|
|
}
|
|
});
|
|
},
|
|
changeMode(mode) {
|
|
if (!this.modelLoadSuccess) {
|
|
this.$message.error("模型加载中，请稍后");
|
|
return;
|
|
}
|
|
if (mode == this.mode) {
|
|
return;
|
|
}
|
|
this.mode = mode;
|
|
let api = bimMgrApi;
|
|
if (mode == "model") {
|
|
this.models.forEach((it) => {
|
|
api.Model.original(it.lightweightName);
|
|
api.Model.setAlpha(it.lightweightName, 1);
|
|
});
|
|
bimTools.hideParts(api, this.hideParts);
|
|
this.resetScene();
|
|
} else {
|
|
this.$api.planSchedule.findPlanProgress(this.selProject.id).then((d) => {
|
|
let datas = d.data || [];
|
|
let beforeData = []; //提前完工
|
|
let afterData = []; //延迟完工
|
|
let processData = []; //进行中
|
|
let standData = []; //正常完工
|
|
let allData = [];
|
|
datas.forEach((it) => {
|
|
let planFinishDate = it.planFinishDate;
|
|
let finishDate = it.finishDate;
|
|
it.bim = this.$tryToJson(it.bimId, []);
|
|
if (finishDate == "2000-01-01") {
|
|
it.bim.forEach((item) => {
|
|
processData.push(item);
|
|
allData.push(item);
|
|
});
|
|
} else if (planFinishDate == finishDate) {
|
|
it.bim.forEach((item) => {
|
|
standData.push(item);
|
|
allData.push(item);
|
|
});
|
|
} else if (this.$dt(planFinishDate) < this.$dt(finishDate)) {
|
|
it.bim.forEach((item) => {
|
|
afterData.push(item);
|
|
allData.push(item);
|
|
});
|
|
} else {
|
|
it.bim.forEach((item) => {
|
|
beforeData.push(item);
|
|
allData.push(item);
|
|
});
|
|
}
|
|
});
|
|
if (allData.length > 0) {
|
|
allData = allData.map((item) => item.featureId);
|
|
this.models.forEach((model) => {
|
|
api.Model.setAlpha(model.lightweightName, 0.5);
|
|
});
|
|
if (beforeData.length > 0) {
|
|
api.Feature.setColor(beforeData.map((it) => it.featureId).join("#"), "rgba(59, 255, 0,1)");
|
|
}
|
|
if (standData.length > 0) {
|
|
api.Feature.setColor(standData.map((it) => it.featureId).join("#"), "rgba(255,255,255,1)");
|
|
}
|
|
if (processData.length > 0) {
|
|
api.Feature.setColor(processData.map((it) => it.featureId).join("#"), "rgba(0,0, 255,1)");
|
|
}
|
|
if (afterData.length > 0) {
|
|
api.Feature.setColor(afterData.map((it) => it.featureId).join("#"), "rgba(250, 0, 0,1)");
|
|
}
|
|
}
|
|
});
|
|
}
|
|
},
|
|
resetScene() {
|
|
bimTools.resetScene(this, bimMgrApi)
|
|
},
|
|
loadDeviceData() {
|
|
if (this.loadDevDatatimeOut) {
|
|
clearTimeout(this.loadDevDatatimeOut);
|
|
this.loadDevDatatimeOut = null;
|
|
}
|
|
let prjId = this.selProject.id;
|
|
if (this.devicTypes.includes(1)) {
|
|
this.$api.bim.videoMonitorBimData({ projectId: prjId }).then((res) => {
|
|
this.videoData = res.data || [];
|
|
});
|
|
}
|
|
if (this.devicTypes.includes(3)) {
|
|
this.$api.bim.devTowerBimData({ projectId: prjId }).then((res) => {
|
|
this.towerData = res.data || [];
|
|
console.log("towerData", this.towerData);
|
|
this.towerData.forEach((item) => {
|
|
let id = item.cfgId + "-3";
|
|
let html = this.getTowerHtml(item);
|
|
bimMgrApi.Label.updateBalloon({
|
|
ID: id,
|
|
Html: html,
|
|
});
|
|
});
|
|
});
|
|
}
|
|
if (this.devicTypes.includes(4)) {
|
|
this.$api.bim.devIotBimData({ projectId: prjId }).then((res) => {
|
|
this.iotData = res.data || [];
|
|
this.iotData.forEach((item) => {
|
|
let id = item.cfgId + "-4";
|
|
let html = this.getIotHtml(item);
|
|
bimMgrApi.Label.updateBalloon({
|
|
ID: id,
|
|
Html: html,
|
|
});
|
|
});
|
|
});
|
|
}
|
|
this.loadDevDatatimeOut = setTimeout(this.loadDeviceData, 60 * 1000);
|
|
},
|
|
getTowerHtml(item) {
|
|
let txtHtml = "";
|
|
if (item.elId) {
|
|
txtHtml = ``;
|
|
} else {
|
|
let warning = item.warnings;
|
|
if (warning) {
|
|
let tmps = this.towerWarning.filter((d) => d.value == item.warnings);
|
|
warning = tmps.length > 0 ? tmps[0].label : "";
|
|
}
|
|
let warningHtml = warning ? `<div class='data-item red'><span class='data-label'>警报：</span><span class='data-value'>${warning}</span></div>` : "";
|
|
|
|
txtHtml = `${warningHtml}
|
|
<div class='data-item'><span class='data-label'>高度：</span><span class='data-value'>${item.height}</span></div>
|
|
<div class='data-item'><span class='data-label'>吊重：</span><span class='data-value'>${item.load}</span></div>
|
|
<div class='data-item'><span class='data-label'>回转：</span><span class='data-value'>${item.rotation}</span></div>
|
|
<div class='data-item'><span class='data-label'>幅度：</span><span class='data-value'>${item.range}</span></div>
|
|
<div class='data-item'><span class='data-label'>风速：</span><span class='data-value'>${item.windSpeed}</span></div>
|
|
<div class='data-item'><span class='data-label'>水平倾角：</span><span class='data-value'>${item.leanAngleX}</span></div>
|
|
<div class='data-item'><span class='data-label'>垂直倾角：</span><span class='data-value'>${item.leanAngleY}</span></div>
|
|
`;
|
|
}
|
|
return (
|
|
css +
|
|
`
|
|
<div class='tag-box box-type-3'>
|
|
<div class='tag-txt'>
|
|
${txtHtml}
|
|
</div>
|
|
<img src='bimImages/4.png' alt='' class="tag-bg-img">
|
|
<img src='bimImages/towerMonitor.png' class="tag-img">
|
|
</div>`
|
|
);
|
|
},
|
|
fmtData(item) {
|
|
if (item) {
|
|
return (item * 1).toFixed(2);
|
|
}
|
|
return "";
|
|
},
|
|
getIotHtml(item) {
|
|
let txtHtml = "";
|
|
if (item.elId) {
|
|
txtHtml = ``;
|
|
} else {
|
|
txtHtml = `
|
|
<table class="tb-power">
|
|
<tr>
|
|
<td></td>
|
|
<td width="60">电压</td>
|
|
<td width="60">电流</td>
|
|
<td width="60">功率</td>
|
|
</tr>
|
|
<tr>
|
|
<td>A向</td>
|
|
<td>${this.fmtData(item?.voltageA)}</td>
|
|
<td>${this.fmtData(item?.currentA)}</td>
|
|
<td>${this.fmtData(item?.powerA)}</td>
|
|
</tr>
|
|
<tr>
|
|
<td>B向</td>
|
|
<td>${this.fmtData(item?.voltageB)}</td>
|
|
<td>${this.fmtData(item?.currentB)}</td>
|
|
<td>${this.fmtData(item?.powerB)}</td>
|
|
</tr>
|
|
<tr>
|
|
<td>C向</td>
|
|
<td>${this.fmtData(item?.voltageC)}</td>
|
|
<td>${this.fmtData(item?.currentC)}</td>
|
|
<td>${this.fmtData(item?.powerC)}</td>
|
|
</tr>
|
|
</table>
|
|
`;
|
|
}
|
|
return (
|
|
css +
|
|
`
|
|
<div class='tag-box box-type-4'>
|
|
<div class='tag-txt'>
|
|
${txtHtml}
|
|
</div>
|
|
<img src='/cdn/bim/sapi/images/4.png' alt='' class="tag-bg-img">
|
|
<img src='/cdn/bim/sapi/images/power.png' class="tag-img">
|
|
</div>`
|
|
);
|
|
},
|
|
getVideoHtml(item) {
|
|
return (
|
|
css +
|
|
`
|
|
<div class='tag-box box-type-1'>
|
|
<img src='/cdn/bim/sapi/images/3.png' alt='' class="tag-bg-img-1">
|
|
<img src='/cdn/bim/sapi/images/videoMonitor.png' class="tag-img-1">
|
|
</div>`
|
|
);
|
|
},
|
|
getPitHtml(item) {
|
|
let bg = "4.png";
|
|
let img = "pitMonitor";
|
|
|
|
return (
|
|
css +
|
|
`
|
|
<div class='tag-box box-type-2'>
|
|
<img src='bimImages/${bg}' alt='' class="tag-bg-img">
|
|
<img src='bimImages/${img}.png' class="tag-img">
|
|
<span class='tag-txt' style='color:#ffffff;font-size:14px'>
|
|
|
|
</span>
|
|
</div>`
|
|
);
|
|
},
|
|
},
|
|
};
|
|
</script>
|
|
|
|
<style lang="less">
|
|
.bim-manage {
|
|
height: 100%;
|
|
position: relative;
|
|
|
|
#bimManage {
|
|
height: 100%;
|
|
|
|
#bimManageContainer {
|
|
height: 100%;
|
|
.tag-box {
|
|
height: 120px;
|
|
display: flex;
|
|
justify-content: center;
|
|
align-items: center;
|
|
width: 100%;
|
|
position: relative;
|
|
}
|
|
|
|
.tag-svg {
|
|
width: 38px;
|
|
height: 38px;
|
|
position: absolute;
|
|
bottom: -17px;
|
|
left: 50%;
|
|
margin-left: -19px;
|
|
|
|
}
|
|
|
|
.tag-img {
|
|
position: absolute;
|
|
}
|
|
|
|
.tag-txt {
|
|
font-size: 16px;
|
|
color: #fff;
|
|
}
|
|
}
|
|
}
|
|
|
|
.div-left {
|
|
top: 10vh;
|
|
left: 5%;
|
|
position: absolute;
|
|
height: 70vh;
|
|
width: 20%;
|
|
|
|
&.isHide {
|
|
left: 0%;
|
|
wdith: 0%;
|
|
|
|
#arrowLeft {
|
|
left: 0px !important;
|
|
}
|
|
}
|
|
|
|
#arrowLeft {
|
|
top: calc(50% - 50px);
|
|
right: -21px;
|
|
left: unset !important;
|
|
}
|
|
}
|
|
|
|
.div-right {
|
|
top: 10vh;
|
|
right: 5%;
|
|
position: absolute;
|
|
height: 70vh;
|
|
width: 20%;
|
|
|
|
&.isHide {
|
|
right: 0%;
|
|
width: 0%;
|
|
}
|
|
|
|
#arrowRight {
|
|
top: calc(50% - 50px);
|
|
left: -21px;
|
|
}
|
|
}
|
|
|
|
.data-content {
|
|
height: 100%;
|
|
|
|
.div-row {
|
|
height: 33%;
|
|
border: solid 1px #75fbfdaa;
|
|
background-color: #06445b81;
|
|
|
|
.row-title {
|
|
background: linear-gradient(0deg, #105696, #c0dafb00, #1765ae);
|
|
padding-left: 10px;
|
|
height: 36px;
|
|
line-height: 36px;
|
|
|
|
.svg-icon {
|
|
fill: #75fbfd;
|
|
}
|
|
}
|
|
}
|
|
}
|
|
|
|
.div-mode {
|
|
position: absolute;
|
|
top: calc(80vh - 110px);
|
|
left: 50%;
|
|
display: flex;
|
|
padding: 10px 0px;
|
|
background: #00000080;
|
|
border-radius: 10px;
|
|
margin-left: -125px;
|
|
|
|
.mode-item {
|
|
display: flex;
|
|
align-items: center;
|
|
font-size: 14px;
|
|
line-height: 30px;
|
|
margin: 0px 10px;
|
|
background: #05798754;
|
|
padding: 0px 10px;
|
|
border-radius: 13px;
|
|
cursor: pointer;
|
|
|
|
&.is-active {
|
|
background: #097fca94;
|
|
color: #75fbfd;
|
|
border: solid 1px #75fbfd;
|
|
|
|
.svg-icon {
|
|
fill: #75fbfd;
|
|
}
|
|
}
|
|
|
|
.svg-icon {
|
|
width: 24px;
|
|
height: 24px;
|
|
margin-right: 4px;
|
|
}
|
|
}
|
|
}
|
|
|
|
.plan-legend {
|
|
position: absolute;
|
|
top: calc(80vh - 110px);
|
|
right: 40px;
|
|
padding: 10px 10px 0px;
|
|
background: #00000080;
|
|
border-radius: 10px;
|
|
|
|
&.isShow {
|
|
right: calc(20% + 140px);
|
|
}
|
|
|
|
.plan-item {
|
|
display: flex;
|
|
font-size: 12px;
|
|
margin-bottom: 10px;
|
|
align-items: center;
|
|
|
|
span {
|
|
display: block;
|
|
|
|
&:first-child {
|
|
width: 15px;
|
|
height: 15px;
|
|
margin-right: 4px;
|
|
}
|
|
}
|
|
}
|
|
}
|
|
|
|
.div-tools {
|
|
position: absolute;
|
|
top: calc(80vh - 50px);
|
|
left: 50%;
|
|
|
|
display: flex;
|
|
background: #00000080;
|
|
border-radius: 10px;
|
|
|
|
&.menu-0 {
|
|
margin-left: -34px;
|
|
}
|
|
|
|
&.menu-1 {
|
|
margin-left: -68px;
|
|
}
|
|
|
|
&.menu-2 {
|
|
margin-left: -102px;
|
|
}
|
|
|
|
&.menu-3 {
|
|
margin-left: -136px;
|
|
}
|
|
|
|
&.menu-4 {
|
|
margin-left: -170px;
|
|
}
|
|
|
|
.tool-item {
|
|
display: flex;
|
|
flex-flow: column;
|
|
padding: 10px;
|
|
align-items: center;
|
|
cursor: pointer;
|
|
|
|
&.is-active {
|
|
.icon {
|
|
background: #097fca94;
|
|
|
|
.svg-icon {
|
|
fill: #75fbfd;
|
|
}
|
|
}
|
|
|
|
.sp-text {
|
|
color: #75fbfd;
|
|
}
|
|
}
|
|
|
|
.icon {
|
|
width: 30px;
|
|
height: 30px;
|
|
background: #c0c4cca1;
|
|
display: flex;
|
|
justify-content: center;
|
|
align-items: center;
|
|
border-radius: 15px;
|
|
|
|
.svg-icon {
|
|
width: 20px;
|
|
height: 20px;
|
|
}
|
|
}
|
|
|
|
.sp-text {
|
|
margin-top: 4px;
|
|
font-size: 12px;
|
|
}
|
|
}
|
|
}
|
|
|
|
.prj-info {
|
|
padding: 20px;
|
|
|
|
.base-info {
|
|
.floor-area {
|
|
color: #b0cfff;
|
|
font-weight: 700;
|
|
font-size: 40px;
|
|
}
|
|
|
|
.floor-area-text {
|
|
line-height: 40px;
|
|
}
|
|
}
|
|
|
|
.tb-prj {
|
|
border-collapse: collapse;
|
|
width: 100%;
|
|
|
|
td,
|
|
th {
|
|
border: solid 1px #6ea9ab68;
|
|
padding: 7px 4px;
|
|
font-size: 12px;
|
|
}
|
|
|
|
th {
|
|
color: #b0cfff;
|
|
}
|
|
}
|
|
}
|
|
|
|
.prj-worker {
|
|
height: calc(100% - 30px);
|
|
|
|
.worker-chart {
|
|
display: flex;
|
|
height: 50%;
|
|
|
|
.chart-item {
|
|
position: relative;
|
|
width: 33.33%;
|
|
height: 100%;
|
|
|
|
.chart-gif,
|
|
.chart-text {
|
|
left: 20px;
|
|
top: 20px;
|
|
width: 120px;
|
|
height: 120px;
|
|
}
|
|
|
|
.chart-text {
|
|
color: #3ffcff;
|
|
font-weight: 700;
|
|
font-size: 40px;
|
|
}
|
|
}
|
|
}
|
|
|
|
.worker-title {
|
|
display: flex;
|
|
height: 50%;
|
|
|
|
.title-item {
|
|
flex: 1;
|
|
display: flex;
|
|
flex-flow: column;
|
|
align-items: center;
|
|
padding: 10px 0px 10px 0px;
|
|
|
|
.svg-icon {
|
|
fill: #3ffcff;
|
|
width: 80px;
|
|
height: 80px;
|
|
}
|
|
|
|
color: #3ffcff;
|
|
}
|
|
}
|
|
}
|
|
|
|
.investment-stats-cost {
|
|
margin: 0 auto;
|
|
padding: 30px 20px;
|
|
top: -18px;
|
|
position: relative;
|
|
|
|
.stats-grid {
|
|
display: grid;
|
|
grid-template-columns: 1fr 1fr;
|
|
grid-template-rows: 1fr 1fr;
|
|
gap: 24px;
|
|
position: relative;
|
|
}
|
|
|
|
.stat-card {
|
|
background: linear-gradient(45deg, #122463, #0e79c969);
|
|
padding: 16px 0;
|
|
text-align: center;
|
|
color: #fff;
|
|
position: relative;
|
|
z-index: 1;
|
|
box-shadow: 0 2px 8px #0004;
|
|
border: solid 1px #22d0d2;
|
|
border-radius: 10px;
|
|
}
|
|
|
|
.stat-title {
|
|
font-size: 16px;
|
|
color: #b0cfff;
|
|
margin-bottom: 8px;
|
|
}
|
|
|
|
.stat-value {
|
|
font-size: 40px;
|
|
font-weight: bold;
|
|
color: #3ffcff;
|
|
}
|
|
|
|
.center-icon {
|
|
position: absolute;
|
|
left: 50%;
|
|
top: 50%;
|
|
transform: translate(-50%, -50%);
|
|
background: #112244;
|
|
border: 2px dashed #3ffcff;
|
|
border-radius: 50%;
|
|
width: 80px;
|
|
height: 80px;
|
|
display: flex;
|
|
align-items: center;
|
|
justify-content: center;
|
|
z-index: 2;
|
|
font-size: 32px;
|
|
color: #3ffcff;
|
|
box-shadow: 0 0 12px #3ffcff55;
|
|
pointer-events: none;
|
|
|
|
.chart-gif {
|
|
width: 70px;
|
|
height: 70px;
|
|
top: 5px;
|
|
left: 5px;
|
|
}
|
|
}
|
|
}
|
|
|
|
.plan-chart {
|
|
height: calc(100% - 30px);
|
|
|
|
.chart-item {
|
|
position: relative;
|
|
flex-grow: 1;
|
|
display: inline-block;
|
|
width: 49%;
|
|
height: 100%;
|
|
|
|
.chart-data {
|
|
top: -10px;
|
|
}
|
|
|
|
.chart-title {
|
|
position: relative;
|
|
top: -40px;
|
|
text-align: center;
|
|
}
|
|
}
|
|
}
|
|
|
|
.photography-list {
|
|
height: calc(100% - 30px);
|
|
padding: 10px 0px;
|
|
|
|
.el-carousel {
|
|
height: calc(100% - 10px);
|
|
}
|
|
|
|
.photography-video {
|
|
width: 100%;
|
|
height: calc(100% - 30px);
|
|
}
|
|
|
|
.photography-list-title {
|
|
line-height: 20px;
|
|
text-align: center;
|
|
}
|
|
|
|
.photography-list-nodata {
|
|
background: rgba(255, 255, 255, 0.2);
|
|
width: 80%;
|
|
height: 80%;
|
|
margin-left: 10%;
|
|
margin-top: 3%;
|
|
display: flex;
|
|
align-items: center;
|
|
justify-content: center;
|
|
flex-flow: column;
|
|
|
|
.video-play {
|
|
width: 80px;
|
|
height: 80px;
|
|
display: inline-block;
|
|
background: rgba(0, 0, 0, 0.4);
|
|
line-height: 80px;
|
|
text-align: center;
|
|
border-radius: 40px;
|
|
margin-bottom: 12px;
|
|
}
|
|
|
|
.photography-list-no-title {
|
|
color: rgba(255, 255, 255, 0.2);
|
|
}
|
|
}
|
|
}
|
|
|
|
.warn-info {
|
|
height: calc(100% - 30px);
|
|
|
|
.warn-item {
|
|
display: inline-flex;
|
|
width: calc(50% - 30px);
|
|
height: 50%;
|
|
align-items: center;
|
|
padding-left: 30px;
|
|
|
|
.czz-number-img {
|
|
width: 80px;
|
|
height: 80px;
|
|
line-height: 80px;
|
|
|
|
.svg-icon {
|
|
width: 40px;
|
|
height: 40px;
|
|
fill: #5cc0eb;
|
|
position: relative;
|
|
top: 12px;
|
|
|
|
&.red {
|
|
fill: red;
|
|
}
|
|
|
|
&.green {
|
|
fill: #00e900;
|
|
}
|
|
}
|
|
}
|
|
|
|
.warn-data {
|
|
margin-left: 10px;
|
|
|
|
.warn-data-val {
|
|
font-size: 40px;
|
|
font-weight: 700;
|
|
color: #22d0d2;
|
|
}
|
|
|
|
.warn-data-text {
|
|
margin-top: 10px;
|
|
text-align: center;
|
|
}
|
|
}
|
|
}
|
|
}
|
|
|
|
.test-box {
|
|
position: absolute;
|
|
top: 10px;
|
|
left: 10px;
|
|
display: none;
|
|
|
|
.tag-box {
|
|
position: relative;
|
|
display: flex;
|
|
flex-flow: column;
|
|
align-items: center;
|
|
}
|
|
|
|
.tag-img {
|
|
width: 20px;
|
|
height: 20px;
|
|
position: absolute;
|
|
left: 50%;
|
|
bottom: 18px;
|
|
margin-left: -10px;
|
|
}
|
|
|
|
.tag-bg-img {
|
|
width: 16px;
|
|
height: 80px;
|
|
}
|
|
|
|
.tag-bg-img {
|
|
width: 16px;
|
|
height: 80px;
|
|
}
|
|
|
|
.tag-txt {
|
|
box-shadow: #1a9047 0px 4px 16px, rgba(10, 31, 68, 0.06) 0px 8px 24px, rgba(17, 17, 26, 0.1) 0px 16px 56px;
|
|
color: #75fbfd;
|
|
font-size: 12px;
|
|
padding: 10px;
|
|
background: #097fca63;
|
|
border: solid 1px #75fbfdaa;
|
|
}
|
|
|
|
.tb-power {
|
|
border-collapse: collapse;
|
|
}
|
|
|
|
.tb-power td {
|
|
border: solid 1px #75fbfd33;
|
|
padding: 4px 8px;
|
|
}
|
|
}
|
|
|
|
@media (max-width: 1920px) {
|
|
.data-content {
|
|
.div-row {
|
|
min-height: 220px;
|
|
|
|
.row-title {
|
|
height: 30px;
|
|
line-height: 30px;
|
|
font-size: 14px;
|
|
}
|
|
}
|
|
}
|
|
|
|
.div-tools {
|
|
border-radius: 10px;
|
|
|
|
&.menu-0 {
|
|
margin-left: -44px;
|
|
}
|
|
|
|
&.menu-1 {
|
|
margin-left: -88px;
|
|
}
|
|
|
|
&.menu-2 {
|
|
margin-left: -132px;
|
|
}
|
|
|
|
&.menu-3 {
|
|
margin-left: -176px;
|
|
}
|
|
|
|
&.menu-4 {
|
|
margin-left: -220px;
|
|
}
|
|
|
|
.tool-item {
|
|
padding: 10px 20px;
|
|
|
|
.icon {
|
|
width: 30px;
|
|
height: 30px;
|
|
border-radius: 15px;
|
|
|
|
.svg-icon {
|
|
width: 20px;
|
|
height: 20px;
|
|
}
|
|
}
|
|
|
|
.sp-text {
|
|
margin-top: 10px;
|
|
font-size: 12px;
|
|
}
|
|
}
|
|
}
|
|
|
|
.prj-info {
|
|
padding: 10px;
|
|
|
|
.base-info {
|
|
.floor-area {
|
|
font-size: 24px;
|
|
}
|
|
|
|
.floor-area-text {
|
|
line-height: 20px;
|
|
font-size: 12px;
|
|
}
|
|
|
|
margin-bottom: 10px;
|
|
}
|
|
|
|
.tb-prj {
|
|
|
|
td,
|
|
th {
|
|
border: solid 1px #6ea9ab68;
|
|
padding: 4px;
|
|
font-size: 10px;
|
|
}
|
|
}
|
|
}
|
|
|
|
.prj-worker {
|
|
height: calc(100% - 50px);
|
|
|
|
.worker-chart {
|
|
.chart-item {
|
|
|
|
.chart-gif,
|
|
.chart-text {
|
|
left: 24px;
|
|
top: 20px;
|
|
width: 80px;
|
|
height: 80px;
|
|
}
|
|
|
|
.chart-text {
|
|
font-size: 20px;
|
|
}
|
|
}
|
|
}
|
|
|
|
.worker-title {
|
|
.title-item {
|
|
padding: 20px 0px 10px 0px;
|
|
|
|
.svg-icon {
|
|
fill: #3ffcff;
|
|
width: 60px;
|
|
height: 60px;
|
|
}
|
|
|
|
font-size: 12px;
|
|
color: #3ffcff;
|
|
}
|
|
}
|
|
}
|
|
|
|
.investment-stats-cost {
|
|
padding: 20px 10px;
|
|
top: -12px;
|
|
|
|
.stat-card {
|
|
padding: 16px 0;
|
|
box-shadow: 0 2px 8px #0004;
|
|
border-radius: 10px;
|
|
}
|
|
|
|
.stat-title {
|
|
font-size: 12px;
|
|
margin-bottom: 8px;
|
|
}
|
|
|
|
.stat-value {
|
|
font-size: 20px;
|
|
}
|
|
|
|
.center-icon {
|
|
width: 60px;
|
|
height: 60px;
|
|
font-size: 24px;
|
|
|
|
.chart-gif {
|
|
width: 50px;
|
|
height: 50px;
|
|
top: 5px;
|
|
left: 5px;
|
|
}
|
|
}
|
|
}
|
|
|
|
.plan-chart {
|
|
height: calc(100% - 30px);
|
|
|
|
.chart-item {
|
|
.chart-title {
|
|
font-size: 12px;
|
|
top: -30px;
|
|
}
|
|
}
|
|
}
|
|
|
|
.photography-list {
|
|
height: calc(100% - 30px);
|
|
padding: 10px 0px;
|
|
|
|
.el-carousel {
|
|
height: calc(100% - 10px);
|
|
}
|
|
|
|
.photography-video {
|
|
height: calc(100% - 30px);
|
|
}
|
|
|
|
.photography-list-title {
|
|
line-height: 24px;
|
|
font-size: 12px;
|
|
}
|
|
|
|
.photography-list-nodata {
|
|
.video-play {
|
|
width: 60px;
|
|
height: 60px;
|
|
line-height: 60px;
|
|
border-radius: 30px;
|
|
margin-bottom: 12px;
|
|
}
|
|
|
|
.photography-list-no-title {
|
|
font-size: 12px;
|
|
}
|
|
}
|
|
}
|
|
|
|
.warn-info {
|
|
height: calc(100% - 30px);
|
|
|
|
.warn-item {
|
|
width: calc(50% - 30px);
|
|
height: 50%;
|
|
padding-left: 30px;
|
|
|
|
.czz-number-img {
|
|
width: 70px;
|
|
height: 70px;
|
|
line-height: 70px;
|
|
|
|
.svg-icon {
|
|
width: 30px;
|
|
height: 30px;
|
|
top: 6px;
|
|
}
|
|
}
|
|
|
|
.warn-data {
|
|
margin-left: 10px;
|
|
|
|
.warn-data-val {
|
|
font-size: 30px;
|
|
}
|
|
|
|
.warn-data-text {
|
|
font-size: 12px;
|
|
}
|
|
}
|
|
}
|
|
}
|
|
}
|
|
|
|
@media (min-width: 2561px) {
|
|
.data-content {
|
|
.div-row {
|
|
min-height: 420px;
|
|
|
|
.row-title {
|
|
height: 48px;
|
|
line-height: 48px;
|
|
font-size: 28px;
|
|
}
|
|
}
|
|
}
|
|
|
|
.div-mode {
|
|
top: calc(80vh - 170px);
|
|
border-radius: 20px;
|
|
padding: 20px 0px;
|
|
margin-left: -221px;
|
|
|
|
.mode-item {
|
|
font-size: 24px;
|
|
line-height: 60px;
|
|
margin: 0px 20px;
|
|
padding: 0px 20px;
|
|
border-radius: 13px;
|
|
|
|
.svg-icon {
|
|
width: 40px;
|
|
height: 40px;
|
|
margin-right: 4px;
|
|
}
|
|
}
|
|
}
|
|
|
|
.plan-legend {
|
|
top: calc(80vh - 110px);
|
|
right: 40px;
|
|
padding: 20px 20px 0px;
|
|
|
|
&.isShow {
|
|
right: calc(20% + 220px);
|
|
}
|
|
|
|
.plan-item {
|
|
font-size: 24px;
|
|
margin-bottom: 10px;
|
|
|
|
span {
|
|
display: block;
|
|
|
|
&:first-child {
|
|
width: 20px;
|
|
height: 20px;
|
|
margin-right: 8px;
|
|
}
|
|
}
|
|
}
|
|
}
|
|
|
|
.div-tools {
|
|
border-radius: 10px;
|
|
|
|
&.menu-0 {
|
|
margin-left: -68px;
|
|
}
|
|
|
|
&.menu-1 {
|
|
margin-left: -136px;
|
|
}
|
|
|
|
&.menu-2 {
|
|
margin-left: -204px;
|
|
}
|
|
|
|
&.menu-3 {
|
|
margin-left: -272px;
|
|
}
|
|
|
|
&.menu-4 {
|
|
margin-left: -340px;
|
|
}
|
|
|
|
.tool-item {
|
|
padding: 10px 20px;
|
|
|
|
.icon {
|
|
width: 60px;
|
|
height: 60px;
|
|
border-radius: 30px;
|
|
|
|
.svg-icon {
|
|
width: 40px;
|
|
height: 40px;
|
|
}
|
|
}
|
|
|
|
.sp-text {
|
|
margin-top: 10px;
|
|
font-size: 24px;
|
|
}
|
|
}
|
|
}
|
|
|
|
.prj-info {
|
|
padding: 20px;
|
|
|
|
.base-info {
|
|
.floor-area {
|
|
font-size: 60px;
|
|
}
|
|
|
|
.floor-area-text {
|
|
line-height: 40px;
|
|
font-size: 24px;
|
|
}
|
|
|
|
margin-bottom: 10px;
|
|
}
|
|
|
|
.tb-prj {
|
|
|
|
td,
|
|
th {
|
|
border: solid 1px #6ea9ab68;
|
|
padding: 10px;
|
|
font-size: 20px;
|
|
}
|
|
}
|
|
}
|
|
|
|
.prj-worker {
|
|
height: calc(100% - 60px);
|
|
|
|
.worker-chart {
|
|
.chart-item {
|
|
|
|
.chart-gif,
|
|
.chart-text {
|
|
left: 40px;
|
|
top: 20px;
|
|
width: 180px;
|
|
height: 180px;
|
|
}
|
|
|
|
.chart-text {
|
|
font-size: 60px;
|
|
}
|
|
}
|
|
}
|
|
|
|
.worker-title {
|
|
.title-item {
|
|
padding: 20px 0px 10px 0px;
|
|
|
|
.svg-icon {
|
|
fill: #3ffcff;
|
|
width: 120px;
|
|
height: 120px;
|
|
}
|
|
|
|
font-size: 24px;
|
|
color: #3ffcff;
|
|
}
|
|
}
|
|
}
|
|
|
|
.investment-stats-cost {
|
|
padding: 30px 20px;
|
|
top: -18px;
|
|
|
|
.stat-card {
|
|
height: 130px;
|
|
padding: 16px 0;
|
|
box-shadow: 0 2px 8px #0004;
|
|
border-radius: 10px;
|
|
}
|
|
|
|
.stat-title {
|
|
font-size: 24px;
|
|
margin-bottom: 8px;
|
|
}
|
|
|
|
.stat-value {
|
|
font-size: 60px;
|
|
}
|
|
|
|
.center-icon {
|
|
width: 120px;
|
|
height: 120px;
|
|
font-size: 48px;
|
|
|
|
.chart-gif {
|
|
width: 110px;
|
|
height: 110px;
|
|
top: 5px;
|
|
left: 5px;
|
|
}
|
|
}
|
|
}
|
|
|
|
.plan-chart {
|
|
height: calc(100% - 60px);
|
|
|
|
.chart-item {
|
|
.chart-title {
|
|
font-size: 24px;
|
|
top: -40px;
|
|
}
|
|
}
|
|
}
|
|
|
|
.photography-list {
|
|
height: calc(100% - 60px);
|
|
padding: 10px 0px;
|
|
|
|
.el-carousel {
|
|
height: calc(100% - 10px);
|
|
}
|
|
|
|
.photography-video {
|
|
height: calc(100% - 30px);
|
|
}
|
|
|
|
.photography-list-title {
|
|
line-height: 36px;
|
|
font-size: 24px;
|
|
}
|
|
|
|
.photography-list-nodata {
|
|
.video-play {
|
|
width: 120px;
|
|
height: 120px;
|
|
line-height: 120px;
|
|
border-radius: 60px;
|
|
margin-bottom: 12px;
|
|
}
|
|
|
|
.photography-list-no-title {
|
|
font-size: 24px;
|
|
}
|
|
}
|
|
}
|
|
|
|
.warn-info {
|
|
height: calc(100% - 60px);
|
|
|
|
.warn-item {
|
|
width: calc(50% - 30px);
|
|
height: 50%;
|
|
padding-left: 30px;
|
|
|
|
.czz-number-img {
|
|
width: 140px;
|
|
height: 140px;
|
|
line-height: 140px;
|
|
|
|
.svg-icon {
|
|
width: 60px;
|
|
height: 60px;
|
|
top: 24px;
|
|
}
|
|
}
|
|
|
|
.warn-data {
|
|
margin-left: 10px;
|
|
|
|
.warn-data-val {
|
|
font-size: 60px;
|
|
}
|
|
|
|
.warn-data-text {
|
|
font-size: 24px;
|
|
}
|
|
}
|
|
}
|
|
}
|
|
}
|
|
}
|
|
</style>
|