2181 lines
62 KiB
Vue
2181 lines
62 KiB
Vue
<template>
|
||
<!-- 进度管理 -->
|
||
<div class="fullHeight">
|
||
<div class="optionBox_wrap">
|
||
<div class="optionBox">
|
||
<vue-scroll
|
||
v-if="ProgressPlanBidSectionList.length != 0"
|
||
:ops="ops"
|
||
ref="navScroll"
|
||
>
|
||
<div
|
||
@click="changeOptionBoxListIndex(index, item.id)"
|
||
v-for="(item, index) in ProgressPlanBidSectionList"
|
||
:key="index"
|
||
class="optionBox_item"
|
||
:class="{
|
||
selectOptionBox_item: selectProgressPlanBidSection === index,
|
||
}"
|
||
>
|
||
<span>{{ item.projectfName }}</span>
|
||
<div class="a"></div>
|
||
<div class="b"></div>
|
||
<div class="c"></div>
|
||
<div class="d"></div>
|
||
</div>
|
||
</vue-scroll>
|
||
</div>
|
||
</div>
|
||
<!-- <vue-scroll>
|
||
<img src="@/assets/images/dataBoard/6.png" style="height:auto;width:100%"/>
|
||
</vue-scroll> -->
|
||
<div class="top_box">
|
||
<div class="aside fullHeight">
|
||
<div class="blockBox">
|
||
<div class="blockTitle">
|
||
<!-- 进度总览 -->
|
||
{{ $t("message.dataBoard.progressOfTheOverview") }}
|
||
</div>
|
||
<div class="blockContent">
|
||
<div class="blockContentTitleBox">
|
||
<span class="TitleBoxSpan TitleBoxSpan1">
|
||
<!-- 全景节点: -->
|
||
{{ $t("message.dataBoard.panoramaNode") + ":"
|
||
}}<span style="font-size: 18px; font-weight: 900">{{
|
||
progressOverview.panoramaNodeNum
|
||
? progressOverview.panoramaNodeNum
|
||
: "0"
|
||
}}</span></span
|
||
>
|
||
<span class="TitleBoxSpan TitleBoxSpan2">
|
||
<!-- 楼栋节点数: -->
|
||
{{ $t("message.dataBoard.buildingNodeNum") + ":"
|
||
}}<span style="font-size: 18px; font-weight: 900">{{
|
||
progressOverview.buildingNodeNum
|
||
? progressOverview.buildingNodeNum
|
||
: "0"
|
||
}}</span></span
|
||
>
|
||
</div>
|
||
<div class="ChartsBox">
|
||
<div class="Charts" ref="Chart1"></div>
|
||
<!-- 进行中节点数 -->
|
||
{{ $t("message.dataBoard.doingNodeNum") }}
|
||
</div>
|
||
<div class="ChartsBox">
|
||
<div class="Charts" ref="Chart2"></div>
|
||
<!-- 已完成节点数 -->
|
||
{{ $t("message.dataBoard.completeNodeNum") }}
|
||
</div>
|
||
<div class="ChartsBox">
|
||
<div class="Charts" ref="Chart3"></div>
|
||
<!-- 逾期节点数 -->
|
||
{{ $t("message.dataBoard.overdueNodeNum") }}
|
||
</div>
|
||
</div>
|
||
</div>
|
||
<div class="blockBox">
|
||
<div class="blockTitle">
|
||
<!-- 整体进度 -->
|
||
{{ $t("message.dataBoard.overallProgress") }}
|
||
</div>
|
||
<div class="blockContent">
|
||
<div class="dotBox">
|
||
<p class="text">
|
||
<i style="background: #44d7b6" class="dot"></i
|
||
><span>
|
||
<!-- 提前完成/正常完成/进行中 -->
|
||
{{ $t("message.dataBoard.progressStatusList")[0] }}
|
||
</span>
|
||
</p>
|
||
<p class="text">
|
||
<i style="background: #ff0000" class="dot"></i
|
||
><span>
|
||
<!-- 期完成/逾期 -->
|
||
{{ $t("message.dataBoard.progressStatusList")[1] }}
|
||
</span>
|
||
</p>
|
||
</div>
|
||
<div class="list_wrap" v-if="allProgress.length > 0">
|
||
<vue-scroll>
|
||
<div class="list_box">
|
||
<div
|
||
class="list_item"
|
||
v-for="(item, index) in allProgress"
|
||
:key="index"
|
||
>
|
||
<span>{{ item.buildingName }}</span>
|
||
<div
|
||
class="point"
|
||
:class="{
|
||
point2:
|
||
item.deferCompleteNodeNum > 0 ||
|
||
item.deferNodeNum > 0,
|
||
}"
|
||
></div>
|
||
<div
|
||
class="item_detail"
|
||
:style="{ left: (index + 1) % 3 != 0 ? '60%' : '-100%' }"
|
||
>
|
||
<p class="detail_title item_h">{{ item.buildingName }}</p>
|
||
<p class="detail_title">
|
||
<!-- 总完成数： -->{{
|
||
$t("message.dataBoard.totalCompleteNum") + ":"
|
||
}}{{ item.completeNodeNum }}
|
||
</p>
|
||
<p class="detail_info">
|
||
<span class="p1"></span
|
||
><i>
|
||
<!-- 正常完成 -->
|
||
{{ $t("message.dataBoard.completeStatus")[0] }} </i
|
||
><span>{{ item.normalCompleteNodeNum }}个</span>
|
||
</p>
|
||
<p class="detail_info">
|
||
<span class="p1"></span
|
||
><i>
|
||
<!-- 提前完成 -->
|
||
{{ $t("message.dataBoard.completeStatus")[1] }} </i
|
||
><span>{{ item.beforeCompleteNodeNum }}个</span>
|
||
</p>
|
||
<p class="detail_info">
|
||
<span class="p1"></span
|
||
><i>
|
||
<!-- 进行中 -->
|
||
{{ $t("message.dataBoard.completeStatus")[3] }} </i
|
||
><span>{{ item.executeNodeNum }}个</span>
|
||
</p>
|
||
<p class="detail_info">
|
||
<span class="p2"></span
|
||
><i>
|
||
<!-- 逾期完成 -->
|
||
{{ $t("message.dataBoard.completeStatus")[2] }} </i
|
||
><span>{{ item.deferCompleteNodeNum }}个</span>
|
||
</p>
|
||
<p class="detail_info">
|
||
<span class="p2"></span
|
||
><i>
|
||
<!-- 逾期 -->
|
||
{{ $t("message.dataBoard.completeStatus")[4] }} </i
|
||
><span>{{ item.deferNodeNum }}个</span>
|
||
</p>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</vue-scroll>
|
||
</div>
|
||
<div v-else style="text-align: center" class="noDataImgBox">
|
||
<img
|
||
style="width: 150px"
|
||
class="noDataImg"
|
||
src="@/assets/images/noData3.png"
|
||
alt=""
|
||
srcset=""
|
||
/>
|
||
<p>
|
||
<!-- 暂无数据 -->
|
||
{{ $t("message.dataBoard.nodata") }}
|
||
</p>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
<!-- 全景计划 -->
|
||
<div class="right fullHeight">
|
||
<div class="blockBox blockBox2">
|
||
<div class="blockTitle">
|
||
<!-- 全景计划 -->
|
||
{{ $t("message.dataBoard.panoramaPlan") }}
|
||
</div>
|
||
<div class="legend_box">
|
||
<div class="legend_item">
|
||
<img
|
||
style="height: 31px; width: 26px"
|
||
src="../../../assets/images/dataBoard/stage3.png"
|
||
/>
|
||
<!-- 已完成 -->
|
||
{{ $t("message.dataBoard.projectStatusList")[0] }}
|
||
</div>
|
||
<div class="legend_item">
|
||
<img
|
||
style="height: 31px; width: 26px"
|
||
src="../../../assets/images/dataBoard/stage2.png"
|
||
/>
|
||
<!-- 进行中 -->
|
||
{{ $t("message.dataBoard.projectStatusList")[1] }}
|
||
</div>
|
||
<div class="legend_item">
|
||
<img
|
||
style="height: 31px; width: 26px"
|
||
src="../../../assets/images/dataBoard/stage1.png"
|
||
/>
|
||
<!-- 未开始 -->
|
||
{{ $t("message.dataBoard.projectStatusList")[2] }}
|
||
</div>
|
||
</div>
|
||
<div class="blockContent" style="display: flex; align-items: center">
|
||
<div class="stageBox">
|
||
<vue-scroll
|
||
v-if="stageList2.length > 0"
|
||
:ops="ops"
|
||
ref="stageScroll"
|
||
>
|
||
<div
|
||
class="planList"
|
||
:style="{
|
||
'justify-content':
|
||
index % 2 !== 0 ? 'flex-end' : 'flex-start',
|
||
}"
|
||
:class="{
|
||
right_line:
|
||
index % 2 == 0 &&
|
||
index != stageList2.length - 1 &&
|
||
item.length == 5,
|
||
left_line:
|
||
index % 2 != 0 &&
|
||
index != stageList2.length - 1 &&
|
||
item.length == 5,
|
||
}"
|
||
v-for="(item, index) in stageList2"
|
||
:key="index"
|
||
>
|
||
<div
|
||
class="planItem"
|
||
v-for="(item2, index2) in item"
|
||
:key="index2"
|
||
>
|
||
<div class="left">
|
||
<div
|
||
style="
|
||
height: 80px;
|
||
display: flex;
|
||
align-items: flex-end;
|
||
margin-bottom: 7px;
|
||
"
|
||
>
|
||
<img
|
||
src="../../../assets/images/dataBoard/stage3.png"
|
||
v-if="item2.status === 6"
|
||
/>
|
||
<img
|
||
style="width: 60px; height: 80px"
|
||
src="../../../assets/images/dataBoard/stage2.png"
|
||
v-else-if="item2.status === 2"
|
||
alt=""
|
||
/>
|
||
<img
|
||
src="../../../assets/images/dataBoard/stage1.png"
|
||
v-else
|
||
/>
|
||
</div>
|
||
<div
|
||
:title="item2.nodeName"
|
||
class="title"
|
||
:class="{
|
||
left_title: index % 2 != 0,
|
||
end_title3: index2 == item.length - 1,
|
||
}"
|
||
>
|
||
<span> {{ item2.nodeName }}</span>
|
||
<div class="line"></div>
|
||
</div>
|
||
<div class="starDate" v-if="item2.plannedFinishDate">
|
||
{{ $t("message.dataBoard.planComplete") + ":"
|
||
}}<!-- 计划完成: -->{{
|
||
item2.plannedFinishDate
|
||
? item2.plannedFinishDate
|
||
: "--"
|
||
}}
|
||
</div>
|
||
<div class="endDate1" v-if="item2.actualFinishDate">
|
||
{{ $t("message.dataBoard.realComplete") + ":"
|
||
}}<!-- 实际完成： -->{{
|
||
item2.actualFinishDate ? item2.actualFinishDate : ""
|
||
}}
|
||
</div>
|
||
</div>
|
||
<!-- <img src="../../../assets/images/dataBoard/line.png" alt="" class="right">
|
||
<img src="../../../assets/images/dataBoard/left.png" alt="" class="left2"> -->
|
||
</div>
|
||
</div>
|
||
<!-- <div class="box">
|
||
<plan-item :starDate="item.plannedFinishDate?item.plannedFinishDate:'--'" :endDate="item.actualFinishDate?item.actualFinishDate: ''" :title="item.nodeName" :item="index" v-for="(item,index) in stageList2" :key="index" :status="item.status"></plan-item>
|
||
</div> -->
|
||
</vue-scroll>
|
||
|
||
<div v-else style="text-align: center" class="noDataImgBox">
|
||
<img
|
||
style="width: 150px"
|
||
class="noDataImg"
|
||
src="@/assets/images/noData3.png"
|
||
alt=""
|
||
srcset=""
|
||
/>
|
||
<p>
|
||
<!-- 暂无数据 -->
|
||
{{ $t("message.dataBoard.nodata") }}
|
||
</p>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
<div class="blockBox blockBox2 bottom">
|
||
<div class="blockTitle">
|
||
<!-- 楼栋进度图 -->
|
||
{{ $t("message.dataBoard.buildingProgressPicture") }}
|
||
</div>
|
||
|
||
<el-select
|
||
v-model="alarmType2"
|
||
size="small"
|
||
class="buildingSelect"
|
||
@change="changeResultList"
|
||
>
|
||
<el-option
|
||
v-for="(item, index) in resultList"
|
||
:key="index"
|
||
:value="item.id"
|
||
:label="item.buildingName"
|
||
></el-option>
|
||
</el-select>
|
||
<div class="blockContent" style="display: flex; align-items: center">
|
||
<div class="stageBox">
|
||
<vue-scroll
|
||
v-if="BuildingPlanList.length > 0"
|
||
:ops="ops"
|
||
ref="stageScroll2"
|
||
>
|
||
<!-- <div class="buildingList" :style="{'justify-content': index%2 !== 0 ?'flex-end':'flex-start'}" :class="{'right_line': index%2 == 0 && index != BuildingPlanList.length-1 && index !=5 ,'left_line': index%2 != 0 && index != BuildingPlanList.length-1 && item.length === 6 }" v-for="(item,index) in BuildingPlanList" :key="index"> -->
|
||
<div
|
||
class="buildingList"
|
||
:style="{
|
||
'justify-content':
|
||
index % 2 !== 0 ? 'flex-start' : 'flex-start',
|
||
}"
|
||
:class="{
|
||
right_line:
|
||
index % 2 == 0 &&
|
||
index != BuildingPlanList.length - 1 &&
|
||
index != 5,
|
||
left_line:
|
||
index % 2 != 0 &&
|
||
index != BuildingPlanList.length - 1 &&
|
||
item.length === 6,
|
||
}"
|
||
v-for="(item, index) in BuildingPlanList"
|
||
:key="index"
|
||
>
|
||
<div
|
||
class="buildingItem"
|
||
v-for="(item2, index2) in item"
|
||
:key="index2"
|
||
>
|
||
<div :title="item2.nodeName" class="building_title">
|
||
{{ item2.nodeName }}
|
||
</div>
|
||
<div class="building_line">
|
||
<span
|
||
:class="{
|
||
dot1: item2.nodeState == 2,
|
||
dot2: item2.nodeState == 4,
|
||
dot3: item2.nodeState == 3,
|
||
dot4: item2.nodeState == 5,
|
||
dot5: item2.nodeState == 1,
|
||
}"
|
||
></span>
|
||
<div
|
||
class="line"
|
||
:class="{ line2: (index + 1) % 2 == 0 }"
|
||
></div>
|
||
</div>
|
||
<div class="building_info">
|
||
<div class="building_time">
|
||
<p>
|
||
<!-- 计划完成： -->{{
|
||
$t("message.dataBoard.planComplete") + ":"
|
||
}}{{
|
||
item2.plannedFinishDate ? item2.plannedFinishDate : ""
|
||
}}
|
||
</p>
|
||
<p>
|
||
<!-- 实际完成： -->{{
|
||
$t("message.dataBoard.realComplete") + ":"
|
||
}}{{
|
||
item2.actualFinishDate ? item2.actualFinishDate : ""
|
||
}}
|
||
</p>
|
||
</div>
|
||
<div class="building_status" v-if="item2.nodeState == 2">
|
||
{{ $t("message.dataBoard.completeStatus")[4]
|
||
}}<!-- 逾期 -->{{ item2.deferDiffDay
|
||
}}{{ $t("message.dataBoard.textList")[0]
|
||
}}<!-- 天 -->
|
||
</div>
|
||
<div class="building_status2" v-if="item2.nodeState == 4">
|
||
<!-- 提前 -->{{ $t("message.dataBoard.textList")[1]
|
||
}}{{ item2.beforeCompleteDiffDay
|
||
}}{{ $t("message.dataBoard.textList")[2]
|
||
}}<!-- 天完成 -->
|
||
</div>
|
||
<div class="building_status3" v-if="item2.nodeState == 3">
|
||
{{ $t("message.dataBoard.textList")[3]
|
||
}}<!-- 正常完成 -->
|
||
</div>
|
||
<div class="building_status4" v-if="item2.nodeState == 5">
|
||
{{ $t("message.dataBoard.completeStatus")[4]
|
||
}}<!-- 逾期 -->{{ item2.deferCompleteDiffDay
|
||
}}{{ $t("message.dataBoard.textList")[2]
|
||
}}<!-- 天完成 -->
|
||
</div>
|
||
<div class="building_status5" v-if="item2.nodeState == 1">
|
||
<!-- 进行中 -->
|
||
{{ $t("message.dataBoard.completeStatus")[3] }}
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</vue-scroll>
|
||
<!-- <vue-scroll v-if="stageList2.length != 0" :ops="ops" ref="stageScroll">
|
||
<div
|
||
class="stageItem"
|
||
|
||
v-for="(item, index) in stageList2"
|
||
:key="index"
|
||
:class="item.status == 6? 'finish': item.status == 2? 'ongoing': ''">
|
||
<div class="statusImg"></div>
|
||
<p>{{ item.nodeName }}</p>
|
||
<div style="bottom: 45px;" class="line" v-show="stageList2.length != index + 1"></div>
|
||
<p v-if="item.plannedFinishDate" style="color: #61676b;">计划完成:{{ item.plannedFinishDate?item.plannedFinishDate:'--'}}</p>
|
||
<p v-else style="color: #61676b;height: 16px;isplay: inline-block"></p>
|
||
<p v-if="item.actualFinishDate" style="color: #61676b;">实际完成:{{ item.actualFinishDate?item.actualFinishDate: ''}}</p>
|
||
<p v-else style="color: #61676b;height: 16px;display: inline-block"></p>
|
||
</div>
|
||
</vue-scroll> -->
|
||
|
||
<div
|
||
v-else
|
||
style="text-align: center; margin: 0px 600px"
|
||
class="noDataImgBox"
|
||
>
|
||
<img
|
||
style="width: 150px"
|
||
class="noDataImg"
|
||
src="@/assets/images/noData3.png"
|
||
alt=""
|
||
srcset=""
|
||
/>
|
||
<p>
|
||
<!-- 暂无数据 -->
|
||
{{ $t("message.dataBoard.nodata") }}
|
||
</p>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
<el-dialog
|
||
:modal-append-to-body="false"
|
||
:title="$t('message.dataBoard.configProjectCompleteDate')"
|
||
:visible.sync="dialogVisible"
|
||
width="667px"
|
||
>
|
||
<div style="text-align: center; margin-bottom: 30px">
|
||
<el-date-picker
|
||
size="medium"
|
||
v-model="endDate"
|
||
type="date"
|
||
placeholder="$t('message.dataBoard.chooseDate')"
|
||
value-format="yyyy-MM-dd"
|
||
>
|
||
</el-date-picker>
|
||
<!-- <br> -->
|
||
<el-button
|
||
type="primary"
|
||
size="medium"
|
||
@click="saveDataFn"
|
||
style="margin-left: 20px"
|
||
>
|
||
<!-- 保存 -->
|
||
{{ $t("message.dataBoard.save") }}
|
||
</el-button>
|
||
</div>
|
||
</el-dialog>
|
||
</div>
|
||
</template>
|
||
<script>
|
||
import echarts from "echarts4";
|
||
import {
|
||
getProjectDetail,
|
||
getProjectExtendInfoApi,
|
||
editProjectExtendApi,
|
||
} from "@/assets/js/api/baseInfo.js";
|
||
import {
|
||
selectProgressItemStatisticsApi,
|
||
selectProgressItemOverdueListApi,
|
||
selectPersonOverdueProgressItemNumListApi,
|
||
getPlanNodeStatisticsApi,
|
||
selectBuildingNodeStatisticsListApi,
|
||
progressBuildingPlanListApi,
|
||
selectBuildingNodeDetailStatisticsListApi,
|
||
selectPanoramaNodePlanListApi,
|
||
selectProgressPlanBidSectionListApi,
|
||
} from "@/assets/js/api/dataBoard.js";
|
||
import { GetDateStr } from "@/assets/js/util";
|
||
import planItem from "./components/planItem.vue";
|
||
export default {
|
||
data() {
|
||
return {
|
||
selectItem: "",
|
||
ops: {
|
||
vuescroll: {
|
||
// wheelScrollDuration: 0,
|
||
wheelDirectionReverse: true,
|
||
},
|
||
},
|
||
stageList: this.$t("message.companyDiagram.CONSTRUCTIONSTAGE"),
|
||
stageList2: [], //全景计划
|
||
projectData: {
|
||
constructionStage: 10,
|
||
videoUrl: "",
|
||
},
|
||
alarmList: [],
|
||
alarmType: 1,
|
||
endDate: "",
|
||
dialogVisible: false,
|
||
leftDays: 0,
|
||
baseURL: "",
|
||
progressOverview: "", //进度总览所需数据
|
||
resultList: "", //所有楼栋
|
||
alarmType2: "",
|
||
alarmType3: "",
|
||
BuildingPlanList: "", //楼栋计划
|
||
selectProgressPlanBidSection: 0, //所选标段
|
||
ProgressPlanBidSectionList: [], //标段列表
|
||
bidSectionId: "", //标段id
|
||
noDataImg1: "", //
|
||
noDataImg2: "", //
|
||
noDataImg3: "", //
|
||
allProgress: [],
|
||
};
|
||
},
|
||
components: {
|
||
planItem,
|
||
},
|
||
mounted() {
|
||
this.baseURL = this.$http.defaults.baseURL;
|
||
|
||
// this.getData()
|
||
// this.getData3()
|
||
},
|
||
created() {
|
||
this.selectProgressPlanBidSectionList();
|
||
this.selectBuildingNodeDetailStatisticsList();
|
||
},
|
||
methods: {
|
||
changeOptionBoxListIndex(index, id) {
|
||
this.selectProgressPlanBidSection = index;
|
||
this.bidSectionId = id;
|
||
this.getPlanNodeStatistics();
|
||
this.selectBuildingNodeStatisticsList();
|
||
this.progressBuildingPlanList();
|
||
this.selectPanoramaNodePlanList();
|
||
},
|
||
//标段列表
|
||
selectProgressPlanBidSectionList() {
|
||
selectProgressPlanBidSectionListApi({
|
||
projectSn: this.$store.state.projectSn,
|
||
}).then((res) => {
|
||
this.ProgressPlanBidSectionList = res.result;
|
||
this.bidSectionId = this.ProgressPlanBidSectionList[0].id;
|
||
this.selectPanoramaNodePlanList();
|
||
this.getPlanNodeStatistics();
|
||
this.selectBuildingNodeStatisticsList();
|
||
this.progressBuildingPlanList();
|
||
console.log(res.result, "标段信息"); //projectfName
|
||
});
|
||
},
|
||
//全景计划
|
||
selectPanoramaNodePlanList() {
|
||
selectPanoramaNodePlanListApi({
|
||
projectSn: this.$store.state.projectSn,
|
||
bidSectionId: this.bidSectionId,
|
||
}).then((res) => {
|
||
// let allPlan = []
|
||
// console.log(res)
|
||
// res.result.forEach(x=>)
|
||
// const index = this.stageList2.findIndex((item,index) => {
|
||
// return item.status == 2
|
||
// })
|
||
let index = res.result.findIndex((item, index) => {
|
||
return item.status == 2;
|
||
});
|
||
console.log(index);
|
||
let array = [];
|
||
var j = 0;
|
||
this.stageList2 = [];
|
||
for (let i = 0; i < Math.ceil(res.result.length / 5); i++) {
|
||
j += 5;
|
||
console.log(res.result.slice(j - 5, j));
|
||
array = res.result.slice(j - 5, j);
|
||
this.stageList2.push(array);
|
||
}
|
||
for (let i = 0; i < this.stageList2.length; i++) {
|
||
if (i % 2 === 1) {
|
||
this.stageList2[i].reverse();
|
||
}
|
||
}
|
||
if (index == -1) {
|
||
index = res.result.length - 1;
|
||
}
|
||
console.log(this.stageList2, index);
|
||
// console.log(index, res.result);
|
||
this.$nextTick(() => {
|
||
if (parseInt(index) > 4) {
|
||
this.$refs["stageScroll"].scrollTo(
|
||
{
|
||
y: parseInt((index + 1) / 5) * 165,
|
||
// x:'50%'
|
||
},
|
||
500
|
||
);
|
||
}
|
||
});
|
||
console.log(res.result);
|
||
});
|
||
},
|
||
//班组图表
|
||
createdGroupChart(xData, yData1, yData2, el, legendData) {
|
||
console.log(yData2);
|
||
let monitor = echarts.init(el);
|
||
// var data = [220, 182, 191, 234, 290, 330, 310, 123, 442, 321, 90, 149, 210, 122, 133, 334, 198, 123, 125, 220];
|
||
// var yMax = 500;
|
||
// var dataShadow = [];
|
||
|
||
// for (var i = 0; i < data.length; i++) {
|
||
// dataShadow.push(yMax);
|
||
// }
|
||
var option = {
|
||
// legend: {
|
||
// show: true,
|
||
// align: "left",
|
||
// top: 5,
|
||
// left: 0,
|
||
// // itemWidth: 13,
|
||
// // itemHeight: 5,
|
||
// textStyle: {
|
||
// color: "#9fa2ad",
|
||
// },
|
||
// },
|
||
grid: {
|
||
left: "10",
|
||
right: "50",
|
||
bottom: "10",
|
||
top: "30",
|
||
containLabel: true,
|
||
},
|
||
xAxis: {
|
||
type: "value",
|
||
axisLabel: {
|
||
textStyle: {
|
||
color: "#fff",
|
||
},
|
||
formatter: function () {
|
||
return "";
|
||
},
|
||
},
|
||
splitLine: {
|
||
show: false,
|
||
},
|
||
axisLine: {
|
||
show: false,
|
||
},
|
||
axisTick: {
|
||
show: false,
|
||
},
|
||
},
|
||
yAxis: {
|
||
type: "category",
|
||
axisLine: {
|
||
show: false,
|
||
},
|
||
axisTick: {
|
||
show: false,
|
||
},
|
||
data: xData,
|
||
axisLabel: {
|
||
formatter: function (params) {
|
||
var maxLength = 5;
|
||
//判断长度，超出使用...代替
|
||
if (params && params.length > maxLength) {
|
||
return params.substring(0, maxLength - 1) + "...";
|
||
} else {
|
||
return params;
|
||
}
|
||
},
|
||
textStyle: {
|
||
// fontSize: 14,
|
||
color: "white",
|
||
},
|
||
},
|
||
},
|
||
tooltip: {
|
||
trigger: "axis",
|
||
formatter(params) {
|
||
return params[0].name;
|
||
// console.log(params);
|
||
},
|
||
},
|
||
series: [
|
||
{
|
||
name: "",
|
||
type: "bar",
|
||
barWidth: 10,
|
||
data: yData1,
|
||
barGap: "-100%",
|
||
itemStyle: {
|
||
// color: new echarts.graphic.LinearGradient(0, 0, 1, 0, [
|
||
// { offset: 1, color: "#5181F6",},
|
||
// ]),
|
||
color: function (params) {
|
||
//通过判断选中的名字改变柱子的颜色样式
|
||
// console.log(params);//dataIndex
|
||
// console.log(yData2[params.dataIndex]);
|
||
if (yData2[params.dataIndex] == 1) {
|
||
return "#5181F6";
|
||
} else if (yData2[params.dataIndex] == 2) {
|
||
return "#848484";
|
||
} else if (yData2[params.dataIndex] == 3) {
|
||
return "#44D7B6";
|
||
}
|
||
},
|
||
barBorderRadius: 5,
|
||
},
|
||
// label: {
|
||
// show: true,
|
||
// position: "right",
|
||
// color: "white",
|
||
// textStyle: {
|
||
// fontSize: 15,
|
||
// },
|
||
// },
|
||
},
|
||
],
|
||
};
|
||
monitor.setOption(option);
|
||
},
|
||
changeResultList() {
|
||
this.selectBuildingNodeDetailStatisticsList();
|
||
},
|
||
changeResultList2() {
|
||
if (document.querySelector("iframe")) {
|
||
document.querySelector("iframe").contentWindow.location.reload();
|
||
}
|
||
},
|
||
//楼栋计划
|
||
selectBuildingNodeDetailStatisticsList() {
|
||
selectBuildingNodeDetailStatisticsListApi({
|
||
buildingId: this.alarmType2,
|
||
}).then((res) => {
|
||
console.log(res.result);
|
||
// this.BuildingPlanList = res.result
|
||
let array = [];
|
||
var j = 0;
|
||
this.BuildingPlanList = [];
|
||
for (let i = 0; i < Math.ceil(res.result.length / 6); i++) {
|
||
j += 6;
|
||
console.log(res.result.slice(j - 6, j));
|
||
array = res.result.slice(j - 6, j);
|
||
this.BuildingPlanList.push(array);
|
||
}
|
||
for (let i = 0; i < this.BuildingPlanList.length; i++) {
|
||
if (i % 2 === 1) {
|
||
console.log(this.BuildingPlanList[i]);
|
||
this.BuildingPlanList[i].reverse();
|
||
}
|
||
}
|
||
let index = res.result.findIndex((item, index) => {
|
||
return item.nodeState == 1;
|
||
});
|
||
if (index == -1) {
|
||
index = res.result.findIndex((item, index) => {
|
||
return item.nodeState == 2;
|
||
});
|
||
}
|
||
if (index == -1) {
|
||
index = res.result.length - 1;
|
||
}
|
||
|
||
console.log(index, parseInt((index + 1) / 5));
|
||
this.$nextTick(() => {
|
||
if (parseInt(index) > 5) {
|
||
this.$refs["stageScroll2"].scrollTo(
|
||
{
|
||
y: parseInt((index + 1) / 6) * 110,
|
||
// x:'50%'
|
||
},
|
||
500
|
||
);
|
||
}
|
||
});
|
||
// this.createdGroupChart(xData, yData1, yData2, this.$refs.groupChart);
|
||
});
|
||
},
|
||
getNewList(alarmType) {
|
||
selectBuildingNodeDetailStatisticsListApi({ buildingId: alarmType }).then(
|
||
(res) => {
|
||
console.log(res.result);
|
||
// this.BuildingPlanList = res.result
|
||
let array = [];
|
||
var j = 0;
|
||
this.BuildingPlanList = [];
|
||
for (let i = 0; i < Math.ceil(res.result.length / 6); i++) {
|
||
j += 6;
|
||
console.log(res.result.slice(j - 6, j));
|
||
array = res.result.slice(j - 6, j);
|
||
this.BuildingPlanList.push(array);
|
||
}
|
||
for (let i = 0; i < this.stageList2.length; i++) {
|
||
if (i % 2 === 1) {
|
||
this.BuildingPlanList[i].reverse();
|
||
}
|
||
}
|
||
// this.createdGroupChart(xData, yData1, yData2, this.$refs.groupChart);
|
||
}
|
||
);
|
||
},
|
||
progressBuildingPlanList() {
|
||
progressBuildingPlanListApi({
|
||
projectSn: this.$store.state.projectSn,
|
||
bidSectionId: this.bidSectionId,
|
||
}).then((res) => {
|
||
this.resultList = res.result;
|
||
console.log(res.result);
|
||
if (res.result.length) {
|
||
this.alarmType2 = res.result[0].id;
|
||
this.alarmType3 = res.result[0].id;
|
||
} else {
|
||
this.alarmType2 = "";
|
||
this.alarmType3 = "";
|
||
}
|
||
this.selectBuildingNodeDetailStatisticsList();
|
||
// console.log(this.BuildingPlanList);
|
||
});
|
||
},
|
||
createPieChart(data, div, color, title, total) {
|
||
let that = this;
|
||
let monitor = echarts.init(div);
|
||
var option = {
|
||
color: color ? color : ["#5181F6", "#61D2B9", "#F67F51", "#7851F6"],
|
||
title: {
|
||
show: true,
|
||
text: total,
|
||
x: "45%",
|
||
y: "42%",
|
||
z: 5,
|
||
textAlign: "center",
|
||
textStyle: {
|
||
color: "rgba(255, 255, 255, 1)",
|
||
fontSize: 20,
|
||
},
|
||
// subtext: title,
|
||
// subtextStyle: {
|
||
// color: "rgba(255, 255, 255, 0.8)",
|
||
// fontSize: 13,
|
||
// },
|
||
},
|
||
grid: {
|
||
right: 0,
|
||
},
|
||
legend: {
|
||
show: false,
|
||
},
|
||
series: [
|
||
{
|
||
name: "",
|
||
type: "pie",
|
||
radius: ["50%", "70%"],
|
||
avoidLabelOverlap: false,
|
||
hoverAnimation: false,
|
||
label: {
|
||
show: false,
|
||
position: "center",
|
||
},
|
||
labelLine: {
|
||
show: false,
|
||
},
|
||
data: data,
|
||
},
|
||
],
|
||
};
|
||
monitor.setOption(option);
|
||
},
|
||
//进度总览
|
||
getPlanNodeStatistics() {
|
||
getPlanNodeStatisticsApi({
|
||
projectSn: this.$store.state.projectSn,
|
||
bidSectionId: this.bidSectionId,
|
||
}).then((res) => {
|
||
// console.log(res)
|
||
this.createPieChart(
|
||
[
|
||
{
|
||
value:
|
||
res.result.executeNodeNum +
|
||
res.result.completeNodeNum +
|
||
res.result.deferNodeNum +
|
||
res.result.notStartNodeNum
|
||
? res.result.executeNodeNum +
|
||
res.result.completeNodeNum +
|
||
res.result.deferNodeNum +
|
||
res.result.notStartNodeNum
|
||
: 1,
|
||
name: "",
|
||
},
|
||
{
|
||
value: res.result.executeNodeNum,
|
||
name: "",
|
||
},
|
||
],
|
||
this.$refs.Chart1,
|
||
["rgba(68, 215, 182, 0.2)", "#557ded"],
|
||
"",
|
||
res.result.executeNodeNum
|
||
);
|
||
this.createPieChart(
|
||
[
|
||
{
|
||
value:
|
||
res.result.executeNodeNum +
|
||
res.result.completeNodeNum +
|
||
res.result.deferNodeNum +
|
||
res.result.notStartNodeNum
|
||
? res.result.executeNodeNum +
|
||
res.result.completeNodeNum +
|
||
res.result.deferNodeNum +
|
||
res.result.notStartNodeNum
|
||
: 1,
|
||
name: "",
|
||
},
|
||
{
|
||
value: res.result.completeNodeNum,
|
||
name: "",
|
||
},
|
||
],
|
||
this.$refs.Chart2,
|
||
["rgba(68, 215, 182, 0.2)", "#44D7B6"],
|
||
"",
|
||
res.result.completeNodeNum
|
||
);
|
||
this.createPieChart(
|
||
[
|
||
{
|
||
value:
|
||
res.result.executeNodeNum +
|
||
res.result.completeNodeNum +
|
||
res.result.deferNodeNum +
|
||
res.result.notStartNodeNum
|
||
? res.result.executeNodeNum +
|
||
res.result.completeNodeNum +
|
||
res.result.deferNodeNum +
|
||
res.result.notStartNodeNum
|
||
: 1,
|
||
name: "",
|
||
},
|
||
{
|
||
value: res.result.deferNodeNum,
|
||
name: "",
|
||
},
|
||
],
|
||
this.$refs.Chart3,
|
||
["rgba(68, 215, 182, 0.2)", "#FF0000"],
|
||
"",
|
||
res.result.deferNodeNum
|
||
);
|
||
this.progressOverview = res.result;
|
||
console.log(res.result);
|
||
});
|
||
},
|
||
//整体进度
|
||
selectBuildingNodeStatisticsList() {
|
||
selectBuildingNodeStatisticsListApi({
|
||
projectSn: this.$store.state.projectSn,
|
||
bidSectionId: this.bidSectionId,
|
||
}).then((res) => {
|
||
this.allProgress = res.result;
|
||
console.log(res.result);
|
||
let arr1 = [],
|
||
arr2 = [],
|
||
arr3 = [],
|
||
arr4 = [],
|
||
arr5 = [],
|
||
arr6 = [],
|
||
nameArr = [];
|
||
this.noDataImg1 = res.result;
|
||
console.log(res.result, this.noDataImg1.length != 0);
|
||
res.result.forEach((item) => {
|
||
nameArr.push(item.buildingName);
|
||
arr1.push(item.normalCompleteNodeNum);
|
||
arr2.push(item.beforeCompleteNodeNum);
|
||
arr3.push(item.deferCompleteNodeNum);
|
||
arr4.push(item.executeNodeNum);
|
||
arr5.push(item.deferNodeNum);
|
||
arr6.push(item.completeNodeNum);
|
||
// console.log(item);
|
||
});
|
||
this.$nextTick(() => {
|
||
this.createdBarCharts(
|
||
nameArr,
|
||
arr1,
|
||
arr2,
|
||
arr3,
|
||
arr4,
|
||
arr5,
|
||
arr6,
|
||
this.$refs.companyChart
|
||
);
|
||
});
|
||
});
|
||
},
|
||
saveDataFn() {
|
||
if (this.endDate == "") {
|
||
// 请选择日期！
|
||
this.$message.error(
|
||
this.$t("message.dataBoard.pleaseChooseDate") + "!"
|
||
);
|
||
return;
|
||
}
|
||
editProjectExtendApi({
|
||
projectSn: this.$store.state.projectSn,
|
||
engineeringEndTime: this.endDate,
|
||
}).then((res) => {
|
||
// '保存成功！'
|
||
this.$message.success(this.$t("message.dataBoard.saveSuccess") + "!");
|
||
this.dialogVisible = false;
|
||
this.getDaysBetween();
|
||
});
|
||
},
|
||
/**
|
||
* 计算两个日期之间的天数
|
||
* @param dateString1 开始日期 yyyy-MM-dd
|
||
* @param dateString2 结束日期 yyyy-MM-dd
|
||
* @returns {number} 如果日期相同 返回一天 开始日期大于结束日期，返回0
|
||
*/
|
||
getDaysBetween() {
|
||
var startDate = Date.parse(GetDateStr(0, "-"));
|
||
var endDate = Date.parse(this.endDate);
|
||
if (startDate > endDate) {
|
||
return 0;
|
||
}
|
||
if (startDate == endDate) {
|
||
return 1;
|
||
}
|
||
var days = (endDate - startDate) / (1 * 24 * 60 * 60 * 1000);
|
||
// return days;
|
||
this.leftDays = days;
|
||
},
|
||
changeAlarmType() {
|
||
if (this.alarmType == 1) {
|
||
this.getData3();
|
||
} else {
|
||
this.getData2();
|
||
}
|
||
},
|
||
getData() {
|
||
selectProgressItemStatisticsApi({
|
||
projectSn: this.$store.state.projectSn,
|
||
}).then((res) => {
|
||
var data = res.result;
|
||
// this.createdBarCharts(['未开始','进行中','已完成'], this.$refs.companyChart)
|
||
});
|
||
},
|
||
getData2() {
|
||
selectProgressItemOverdueListApi({
|
||
projectSn: this.$store.state.projectSn,
|
||
}).then((res) => {
|
||
this.alarmList = res.result;
|
||
});
|
||
},
|
||
getData3() {
|
||
selectPersonOverdueProgressItemNumListApi({
|
||
projectSn: this.$store.state.projectSn,
|
||
}).then((res) => {
|
||
this.alarmList = res.result;
|
||
});
|
||
},
|
||
//年龄结构---图表
|
||
createdBarCharts(
|
||
xData,
|
||
yData1,
|
||
yData2,
|
||
yData3,
|
||
yData4,
|
||
yData5,
|
||
yData6,
|
||
el
|
||
) {
|
||
let that = this;
|
||
let ageChart = echarts.init(el);
|
||
// ageChart.clear();
|
||
let option = {
|
||
grid: {
|
||
top: 20,
|
||
left: 0,
|
||
bottom: 10,
|
||
right: 20,
|
||
containLabel: true,
|
||
},
|
||
color: ["#5CE2F6", "#5181F6"],
|
||
dataZoom: [
|
||
{
|
||
show: true,
|
||
// realtime: true,
|
||
start: 50,
|
||
end: 100,
|
||
height: 8,
|
||
borderColor: "transparent",
|
||
backgroundColor: "#000",
|
||
filterColor: "#999999",
|
||
bottom: 0,
|
||
},
|
||
],
|
||
tooltip: {
|
||
trigger: "axis",
|
||
axisPointer: {
|
||
type: "shadow",
|
||
},
|
||
formatter(params) {
|
||
return (
|
||
params[0].name +
|
||
"<br />" +
|
||
'<span style="font-size: 14px">' +
|
||
this.$t("message.dataBoard.totalCompleteNum") +
|
||
":" +
|
||
yData6[params[0].dataIndex] +
|
||
"</span>" +
|
||
"<br />" +
|
||
'<span style="background: #44D7B6;height: 5px;width: 5px;display: inline-block;border-radius: 50%;margin-right: 5px"></span>' +
|
||
'<span style="font-size: 12px">' +
|
||
this.$t("message.dataBoard.completeStatus")[0] +
|
||
":" +
|
||
params[0].value +
|
||
"</span>" +
|
||
"<br />" +
|
||
'<span style="background: #F7D300;height: 5px;width: 5px;display: inline-block;border-radius: 50%;margin-right: 5px"></span>' +
|
||
'<span style="font-size: 12px">' +
|
||
this.$t("message.dataBoard.completeStatus")[1] +
|
||
":" +
|
||
params[1].value +
|
||
"</span>" +
|
||
"<br />" +
|
||
'<span style="background: #FE6C7F;height: 5px;width: 5px;display: inline-block;border-radius: 50%;margin-right: 5px"></span>' +
|
||
'<span style="font-size: 12px">' +
|
||
this.$t("message.dataBoard.completeStatus")[2] +
|
||
":" +
|
||
params[2].value +
|
||
"</span>" +
|
||
"<br />" +
|
||
'<span style="background: #3D6DC3;height: 5px;width: 5px;display: inline-block;border-radius: 50%;margin-right: 5px"></span>' +
|
||
'<span style="font-size: 12px">' +
|
||
this.$t("message.dataBoard.completeStatus")[3] +
|
||
":" +
|
||
params[3].value +
|
||
"</span>" +
|
||
"<br />" +
|
||
'<span style="background: #FF0000;height: 5px;width: 5px;display: inline-block;border-radius: 50%;margin-right: 5px"></span>' +
|
||
'<span style="font-size: 12px">' +
|
||
this.$t("message.dataBoard.completeStatus")[4] +
|
||
":" +
|
||
params[4].value +
|
||
"</span>"
|
||
);
|
||
},
|
||
},
|
||
legend: {
|
||
show: false,
|
||
align: "left",
|
||
top: 5,
|
||
left: 0,
|
||
itemWidth: 13,
|
||
itemHeight: 5,
|
||
textStyle: {
|
||
color: "#9fa2ad",
|
||
},
|
||
},
|
||
|
||
xAxis: [
|
||
{
|
||
type: "category",
|
||
data: xData,
|
||
boundaryGap: true,
|
||
axisTick: {
|
||
show: false,
|
||
},
|
||
axisLine: {
|
||
show: false,
|
||
},
|
||
axisLabel: {
|
||
color: "#9fa2ad",
|
||
fontSize: 12,
|
||
},
|
||
},
|
||
],
|
||
|
||
yAxis: {
|
||
type: "value",
|
||
axisTick: {
|
||
show: false,
|
||
},
|
||
axisLine: {
|
||
show: false,
|
||
},
|
||
splitLine: {
|
||
lineStyle: {
|
||
type: "dashed",
|
||
color: "rgba(231, 233, 243, 0.2)",
|
||
},
|
||
},
|
||
axisLabel: {
|
||
color: "#9fa2ad",
|
||
},
|
||
},
|
||
series: [
|
||
{
|
||
name: /* '正常完成', */ this.$t(
|
||
"message.dataBoard.completeStatus"
|
||
)[0],
|
||
data: yData1,
|
||
type: "bar",
|
||
stack: this.$t("message.dataBoard.stack") /* '堆叠', */, //堆叠柱状图在此设置成统一名称即可
|
||
color: "#44D7B6",
|
||
},
|
||
{
|
||
name: /* '提前完成', */ this.$t(
|
||
"message.dataBoard.completeStatus"
|
||
)[1],
|
||
data: yData2,
|
||
type: "bar",
|
||
stack: this.$t("message.dataBoard.stack") /* '堆叠', */, //堆叠柱状图在此设置成统一名称即可
|
||
color: "#F7D300",
|
||
},
|
||
{
|
||
name: /* '逾期完成', */ this.$t(
|
||
"message.dataBoard.completeStatus"
|
||
)[2],
|
||
data: yData3,
|
||
type: "bar",
|
||
stack: this.$t("message.dataBoard.stack") /* '堆叠', */, //堆叠柱状图在此设置成统一名称即可
|
||
color: "#FE6C7F",
|
||
},
|
||
{
|
||
name: /* '进行中', */ this.$t(
|
||
"message.dataBoard.completeStatus"
|
||
)[3],
|
||
data: yData4,
|
||
type: "bar",
|
||
stack: this.$t("message.dataBoard.stack") /* '堆叠', */, //堆叠柱状图在此设置成统一名称即可
|
||
color: "#3D6DC3",
|
||
},
|
||
{
|
||
name: /* '逾期', */ this.$t("message.dataBoard.completeStatus")[4],
|
||
data: yData5,
|
||
type: "bar",
|
||
stack: this.$t("message.dataBoard.stack") /* '堆叠', */, //堆叠柱状图在此设置成统一名称即可
|
||
color: "#FF0000",
|
||
},
|
||
],
|
||
};
|
||
|
||
ageChart.setOption(option);
|
||
},
|
||
},
|
||
};
|
||
</script>
|
||
<style lang="less" scoped>
|
||
.box {
|
||
display: flex;
|
||
flex-wrap: wrap;
|
||
}
|
||
.scrollBox {
|
||
display: flex;
|
||
flex-wrap: wrap;
|
||
.scrollItem {
|
||
position: relative;
|
||
margin-left: 4px;
|
||
margin-bottom: 5px;
|
||
box-sizing: border-box;
|
||
width: 120px;
|
||
height: 51px;
|
||
background: #0c222b;
|
||
border-radius: 5px;
|
||
text-align: center;
|
||
padding-top: 10px;
|
||
.scrollItemTitle {
|
||
width: 96px;
|
||
overflow: hidden;
|
||
text-overflow: ellipsis;
|
||
white-space: nowrap;
|
||
font-size: 14px;
|
||
margin: 0 auto 3px auto;
|
||
}
|
||
img {
|
||
width: 17px;
|
||
height: 17px;
|
||
}
|
||
.ItemTips {
|
||
position: absolute;
|
||
left: 80px;
|
||
top: 20px;
|
||
z-index: 100;
|
||
background: rgba(8, 24, 53, 0.7);
|
||
/*height: 64px;*/
|
||
/*max-width: 190px;*/
|
||
text-align: left;
|
||
padding: 10px;
|
||
box-sizing: border-box;
|
||
p {
|
||
display: inline-block;
|
||
min-width: 100px;
|
||
}
|
||
}
|
||
.ItemTips2 {
|
||
left: -80px;
|
||
}
|
||
.ItemTips3 {
|
||
left: -4px;
|
||
}
|
||
}
|
||
.scrollItem2 {
|
||
background-color: #80060a;
|
||
}
|
||
}
|
||
.dotBox {
|
||
display: flex;
|
||
justify-content: space-between;
|
||
.text {
|
||
display: flex;
|
||
align-items: center;
|
||
.dot {
|
||
display: inline-block;
|
||
width: 5px;
|
||
height: 5px;
|
||
border-radius: 50%;
|
||
margin-right: 5px;
|
||
}
|
||
}
|
||
}
|
||
.titleItem {
|
||
position: absolute;
|
||
left: 20px;
|
||
top: 25px;
|
||
span {
|
||
display: inline-block;
|
||
width: 10px;
|
||
height: 10px;
|
||
border-radius: 50%;
|
||
}
|
||
}
|
||
.ChartsBox {
|
||
width: 33%;
|
||
float: left;
|
||
text-align: center;
|
||
height: 60%;
|
||
.Charts {
|
||
height: 100%;
|
||
width: 100%;
|
||
}
|
||
}
|
||
.blockContentTitleBox {
|
||
box-sizing: border-box;
|
||
width: 100%;
|
||
height: 40px;
|
||
line-height: 40px;
|
||
.TitleBoxSpan {
|
||
display: inline-block;
|
||
width: 50%;
|
||
text-align: center;
|
||
font-size: 14px;
|
||
}
|
||
.TitleBoxSpan1 {
|
||
background: linear-gradient(to left, #0f2730, #040d15);
|
||
}
|
||
.TitleBoxSpan2 {
|
||
background: linear-gradient(to right, #0f2730, #040d15);
|
||
}
|
||
}
|
||
.numContent {
|
||
display: flex;
|
||
align-items: center;
|
||
justify-content: space-around;
|
||
p {
|
||
font-size: 14px;
|
||
opacity: 0.88;
|
||
margin-top: 10px;
|
||
text-align: center;
|
||
}
|
||
}
|
||
.companyChart {
|
||
width: 100%;
|
||
height: 95%;
|
||
}
|
||
/deep/.alarmTypeBox {
|
||
position: absolute;
|
||
top: 20px;
|
||
right: 10px;
|
||
width: 66px;
|
||
opacity: 0.8;
|
||
z-index: 3;
|
||
.el-input__inner {
|
||
background-color: transparent;
|
||
color: white;
|
||
height: 24px;
|
||
line-height: 24px;
|
||
padding: 0 5px;
|
||
}
|
||
.el-input__suffix {
|
||
right: 0px;
|
||
}
|
||
.el-input__icon {
|
||
color: white;
|
||
line-height: 24px;
|
||
}
|
||
}
|
||
.configBtn {
|
||
position: absolute;
|
||
right: 8px;
|
||
top: 15px;
|
||
font-size: 20px;
|
||
cursor: pointer;
|
||
z-index: 3;
|
||
}
|
||
.days {
|
||
position: absolute;
|
||
top: 50%;
|
||
left: 50%;
|
||
transform: translate(-50%, -50%);
|
||
.num {
|
||
font-size: 46px;
|
||
}
|
||
}
|
||
.daysBG {
|
||
position: absolute;
|
||
top: 50%;
|
||
left: 50%;
|
||
transform: translate(-50%, -50%);
|
||
}
|
||
.endDate {
|
||
position: absolute;
|
||
right: 15px;
|
||
bottom: 12px;
|
||
// font-size: 13px;
|
||
}
|
||
.Extgantt {
|
||
width: 100%;
|
||
height: 100%;
|
||
border: none;
|
||
}
|
||
.optionBox_wrap {
|
||
display: flex;
|
||
justify-content: flex-end;
|
||
margin-bottom: 20px;
|
||
}
|
||
.optionBox {
|
||
text-align: center;
|
||
// margin-bottom: 10px;
|
||
width: calc(77% - 25px);
|
||
white-space: nowrap;
|
||
.optionBox_item {
|
||
cursor: pointer;
|
||
z-index: 100;
|
||
padding: 4px 15px;
|
||
display: inline-block;
|
||
/*width: 52px;*/
|
||
height: 12px;
|
||
font-size: 12px;
|
||
line-height: 12px;
|
||
margin-right: 10px;
|
||
text-align: center;
|
||
background: #193b43;
|
||
position: relative;
|
||
}
|
||
.selectOptionBox_item {
|
||
background: #393204;
|
||
color: #f7d300;
|
||
.a {
|
||
border-left: 2px solid #f7d300;
|
||
border-top: 2px solid #f7d300;
|
||
}
|
||
.b {
|
||
border-right: 2px solid #f7d300;
|
||
border-top: 2px solid #f7d300;
|
||
}
|
||
.c {
|
||
border-bottom: 2px solid #f7d300;
|
||
border-left: 2px solid #f7d300;
|
||
}
|
||
.d {
|
||
border-right: 2px solid #f7d300;
|
||
border-bottom: 2px solid #f7d300;
|
||
}
|
||
}
|
||
}
|
||
.a {
|
||
width: 3px;
|
||
height: 3px;
|
||
position: absolute;
|
||
top: 0;
|
||
left: 0;
|
||
border-left: 2px solid #ebebeb;
|
||
border-top: 2px solid #ebebeb;
|
||
}
|
||
|
||
.b {
|
||
width: 3px;
|
||
height: 3px;
|
||
position: absolute;
|
||
top: 0;
|
||
right: 0;
|
||
border-right: 2px solid #ebebeb;
|
||
border-top: 2px solid #ebebeb;
|
||
}
|
||
|
||
.c {
|
||
width: 3px;
|
||
height: 3px;
|
||
position: absolute;
|
||
bottom: 0;
|
||
left: 0;
|
||
border-bottom: 2px solid #ebebeb;
|
||
border-left: 2px solid #ebebeb;
|
||
}
|
||
|
||
.d {
|
||
width: 3px;
|
||
height: 3px;
|
||
position: absolute;
|
||
bottom: 0;
|
||
right: 0;
|
||
border-right: 2px solid #ebebeb;
|
||
border-bottom: 2px solid #ebebeb;
|
||
}
|
||
.top_box {
|
||
height: 64%;
|
||
.aside {
|
||
.blockBox {
|
||
height: 46%;
|
||
}
|
||
}
|
||
.right {
|
||
.blockBox {
|
||
height: calc(100% - 20px);
|
||
padding-bottom: 20px;
|
||
box-sizing: border-box;
|
||
.stageBox {
|
||
height: 100%;
|
||
width: 100%;
|
||
.noDataImgBox {
|
||
padding-top: 80px;
|
||
margin: 0 auto;
|
||
}
|
||
}
|
||
}
|
||
}
|
||
}
|
||
.planList {
|
||
display: flex;
|
||
flex-wrap: wrap;
|
||
align-items: center;
|
||
// padding: 0 40px;
|
||
width: calc(100% - 40px);
|
||
// overflow: hidden;
|
||
margin: 0 auto;
|
||
}
|
||
|
||
.left_line {
|
||
position: relative;
|
||
&::before {
|
||
// content: '';
|
||
// // background: url('../../../assets/images/dataBoard/left.png') no-repeat center;
|
||
// background: url('../../../assets/images/dataBoard/arrow-right.png') no-repeat center;
|
||
// background-size: 100% 100%;
|
||
// width: 120px;
|
||
// height: 30px;
|
||
// transform: rotate(90deg);
|
||
// position: absolute;
|
||
// top: 120%;
|
||
// left: -48px;
|
||
|
||
content: "";
|
||
background: url("../../../assets/images/dataBoard/arrow_dotted_left.png")
|
||
no-repeat center;
|
||
width: 76px;
|
||
height: 190px;
|
||
position: absolute;
|
||
top: 54%;
|
||
left: -28px;
|
||
}
|
||
}
|
||
.right_line {
|
||
position: relative;
|
||
&::before {
|
||
// content: '';
|
||
// // background: url('../../../assets/images/dataBoard/left.png') no-repeat center;
|
||
// background: url('../../../assets/images/dataBoard/arrow-right.png') no-repeat center;
|
||
// background-size: 100% 100%;
|
||
// width: 120px;
|
||
// height: 30px;
|
||
// transform: rotate(90deg);
|
||
// position: absolute;
|
||
// top: 120%;
|
||
// right: -32px;
|
||
content: "";
|
||
height: 190px;
|
||
width: 76px;
|
||
background: url("../../../assets/images/dataBoard/arrow_dotted_right.png")
|
||
no-repeat center;
|
||
position: absolute;
|
||
top: 54%;
|
||
right: 0;
|
||
}
|
||
}
|
||
.planItem {
|
||
width: 20%;
|
||
height: 164px;
|
||
text-align: center;
|
||
display: flex;
|
||
align-items: center;
|
||
justify-content: center;
|
||
.left {
|
||
display: flex;
|
||
align-items: center;
|
||
flex-direction: column;
|
||
img {
|
||
width: 36px;
|
||
height: 47px;
|
||
}
|
||
.title {
|
||
font-size: 16px;
|
||
color: white;
|
||
text-align: center;
|
||
|
||
// margin-left: 50%;
|
||
width: 100%;
|
||
|
||
position: relative;
|
||
span {
|
||
display: inline-block;
|
||
width: 100%;
|
||
overflow: hidden;
|
||
text-overflow: ellipsis;
|
||
white-space: nowrap;
|
||
}
|
||
&::after {
|
||
// position: absolute;
|
||
// top: -1px;
|
||
// right: -88px;
|
||
// width: 88px;
|
||
// height: 28px;
|
||
// // background: url('../../../assets/images/dataBoard/right.png');
|
||
// background: url('../../../assets/images/dataBoard/arrow-right.png') no-repeat center;
|
||
// background-size: 100% 100%;
|
||
// content: '';
|
||
// display: inline-block;
|
||
// margin-left: 10px;
|
||
position: absolute;
|
||
top: -1px;
|
||
right: -88px;
|
||
width: 88px;
|
||
height: 1.5px;
|
||
background: url("../../../assets/images/dataBoard/arrow_dotted.png")
|
||
no-repeat center;
|
||
background-size: 100% 100%;
|
||
content: "";
|
||
display: inline-block;
|
||
margin-left: 10px;
|
||
}
|
||
}
|
||
.left_title {
|
||
&::after {
|
||
transform: rotate(180deg);
|
||
}
|
||
}
|
||
.end_title {
|
||
&::after {
|
||
width: 46px;
|
||
right: -46px;
|
||
}
|
||
&::before {
|
||
// width: 1px;
|
||
// height: 162px;
|
||
// // border-top: 1px dotted #fff;
|
||
// // background: url('../../../assets/images/dataBoard/right.png');
|
||
// background: url('../../../assets/images/dataBoard/arrow-right.png') no-repeat center;
|
||
// background-size: 100% 100%;
|
||
// // transform: rotate(0deg);
|
||
// content: '';
|
||
// position: absolute;
|
||
// right: -48px;
|
||
// top: 50%;
|
||
width: 1px;
|
||
height: 162px;
|
||
background: url("../../../assets/images/dataBoard/arrow_dotted.png")
|
||
no-repeat center;
|
||
background-size: 100% 100%;
|
||
content: "";
|
||
position: absolute;
|
||
right: -48px;
|
||
top: 50%;
|
||
}
|
||
}
|
||
.start_title {
|
||
&::before {
|
||
position: absolute;
|
||
top: 50%;
|
||
left: -46px;
|
||
width: 46px;
|
||
height: 2px;
|
||
background: url("../../../assets/images/dataBoard/right.png");
|
||
content: "";
|
||
display: inline-block;
|
||
}
|
||
}
|
||
.start_title2 {
|
||
&::after {
|
||
width: 1px;
|
||
height: 162px;
|
||
// border-top: 1px dotted #fff;
|
||
background: url("../../../assets/images/dataBoard/right.png");
|
||
// transform: rotate(0deg);
|
||
content: "";
|
||
position: absolute;
|
||
left: -38px;
|
||
top: 50%;
|
||
}
|
||
.line {
|
||
// position: absolute;
|
||
// top: 50%;
|
||
// right: -88px;
|
||
// width: 88px;
|
||
// height: 2px;
|
||
// // background: url('../../../assets/images/dataBoard/right.png');
|
||
// background: url('../../../assets/images/dataBoard/arrow-right2.png') no-repeat center;
|
||
// content: '';
|
||
// display: inline-block;
|
||
position: absolute;
|
||
top: 50%;
|
||
right: -88px;
|
||
width: 88px;
|
||
height: 2px;
|
||
content: "";
|
||
display: inline-block;
|
||
}
|
||
}
|
||
.end_title2 {
|
||
&::before {
|
||
display: none;
|
||
}
|
||
}
|
||
.end_title3 {
|
||
&::after {
|
||
display: none;
|
||
}
|
||
}
|
||
.starDate {
|
||
color: rgba(255, 255, 255, 0.6);
|
||
margin-top: 5px;
|
||
font-size: 14px;
|
||
}
|
||
.endDate1 {
|
||
color: rgba(255, 255, 255, 0.6);
|
||
margin-top: 5px;
|
||
font-size: 14px;
|
||
}
|
||
}
|
||
.right {
|
||
height: 165px;
|
||
transform: translate3d(-20%, 51%, 0);
|
||
}
|
||
.left2 {
|
||
height: 165px;
|
||
transform: translate3d(-535%, 51%, 0);
|
||
}
|
||
}
|
||
.list_wrap {
|
||
height: calc(100% - 30px);
|
||
margin-top: 10px;
|
||
.list_box {
|
||
display: flex;
|
||
flex-wrap: wrap;
|
||
.list_item {
|
||
width: 30%;
|
||
background: rgba(#193b43, 0.8);
|
||
color: #fff;
|
||
height: 62px;
|
||
display: flex;
|
||
font-size: 14px;
|
||
flex-direction: column;
|
||
align-items: center;
|
||
justify-content: center;
|
||
margin: 0 4px;
|
||
margin-bottom: 7px;
|
||
position: relative;
|
||
.point {
|
||
width: 14px;
|
||
height: 14px;
|
||
border-radius: 50%;
|
||
background: rgba(#00ff45, 0.32);
|
||
position: relative;
|
||
margin-top: 6px;
|
||
&::after {
|
||
content: "";
|
||
width: 10px;
|
||
height: 10px;
|
||
border-radius: 50%;
|
||
background: rgba(#00ff45, 1);
|
||
position: absolute;
|
||
top: 50%;
|
||
left: 50%;
|
||
transform: translate(-50%, -50%);
|
||
}
|
||
}
|
||
.point2 {
|
||
background: rgba(#ff0000, 0.32);
|
||
&::after {
|
||
background: rgba(#ff0000, 1);
|
||
}
|
||
}
|
||
.item_detail {
|
||
position: absolute;
|
||
top: 50%;
|
||
// transform: translateY(-50%);
|
||
width: 142px;
|
||
display: none;
|
||
background: rgba(#0d2146, 0.8);
|
||
z-index: 1;
|
||
// transform: translate(110px, 10px);
|
||
padding: 15px;
|
||
p {
|
||
margin-bottom: 6px;
|
||
}
|
||
.detail_title {
|
||
font-size: 16px;
|
||
}
|
||
.item_h {
|
||
font-weight: 600;
|
||
}
|
||
.detail_info {
|
||
display: flex;
|
||
align-items: center;
|
||
.p1 {
|
||
display: block;
|
||
width: 5px;
|
||
height: 5px;
|
||
background: #00ff45;
|
||
border-radius: 50%;
|
||
margin-right: 10px;
|
||
}
|
||
.p2 {
|
||
display: block;
|
||
width: 5px;
|
||
height: 5px;
|
||
background: #ff0000;
|
||
border-radius: 50%;
|
||
margin-right: 10px;
|
||
}
|
||
i {
|
||
font-style: normal;
|
||
display: block;
|
||
width: 78px;
|
||
}
|
||
}
|
||
}
|
||
}
|
||
.list_item:hover .item_detail {
|
||
display: block;
|
||
}
|
||
}
|
||
}
|
||
.bottom {
|
||
.buildingSelect {
|
||
// position: absolute;
|
||
// top: 20px;
|
||
// left: 10px;
|
||
margin-top: -10px;
|
||
margin-left: 10px;
|
||
width: 150px;
|
||
// opacity: 0.8;
|
||
z-index: 3;
|
||
/deep/.el-input--small .el-input__inner {
|
||
background: #193b43;
|
||
color: #fff;
|
||
}
|
||
/deep/.el-select__caret {
|
||
color: #53ccde;
|
||
}
|
||
/deep/.el-input__inner {
|
||
border: 2px solid #1a4c5a;
|
||
}
|
||
}
|
||
.blockContent {
|
||
height: calc(100% - 20px - 44px);
|
||
padding-top: 0;
|
||
}
|
||
.stageBox {
|
||
width: 100%;
|
||
height: calc(100% - 20px);
|
||
.buildingList {
|
||
display: flex;
|
||
padding: 0 10px;
|
||
position: relative;
|
||
margin-bottom: 10px;
|
||
.buildingItem {
|
||
width: 16.63%;
|
||
margin-bottom: 22px;
|
||
.building_title {
|
||
margin-left: 28px;
|
||
font-size: 16px;
|
||
font-weight: 600;
|
||
margin-bottom: 11px;
|
||
width: calc(100% - 56px);
|
||
overflow: hidden;
|
||
text-overflow: ellipsis;
|
||
white-space: nowrap;
|
||
}
|
||
.building_line {
|
||
display: flex;
|
||
align-items: center;
|
||
margin-bottom: 8px;
|
||
.dot1 {
|
||
display: block;
|
||
width: 16px;
|
||
height: 16px;
|
||
background: #ff0000;
|
||
border-radius: 50%;
|
||
position: relative;
|
||
&::after {
|
||
content: "";
|
||
width: 10px;
|
||
height: 10px;
|
||
background: #040d15;
|
||
border-radius: 50%;
|
||
position: absolute;
|
||
top: 50%;
|
||
left: 50%;
|
||
transform: translate(-50%, -50%);
|
||
}
|
||
}
|
||
.dot2 {
|
||
display: block;
|
||
width: 16px;
|
||
height: 16px;
|
||
background: #f7d300;
|
||
border-radius: 50%;
|
||
position: relative;
|
||
&::after {
|
||
content: "";
|
||
width: 10px;
|
||
height: 10px;
|
||
background: #040d15;
|
||
border-radius: 50%;
|
||
position: absolute;
|
||
top: 50%;
|
||
left: 50%;
|
||
transform: translate(-50%, -50%);
|
||
}
|
||
}
|
||
.dot3 {
|
||
display: block;
|
||
width: 16px;
|
||
height: 16px;
|
||
background: #44d7b6;
|
||
border-radius: 50%;
|
||
position: relative;
|
||
&::after {
|
||
content: "";
|
||
width: 10px;
|
||
height: 10px;
|
||
background: #040d15;
|
||
border-radius: 50%;
|
||
position: absolute;
|
||
top: 50%;
|
||
left: 50%;
|
||
transform: translate(-50%, -50%);
|
||
}
|
||
}
|
||
.dot4 {
|
||
display: block;
|
||
width: 16px;
|
||
height: 16px;
|
||
background: #fe6c7f;
|
||
border-radius: 50%;
|
||
position: relative;
|
||
&::after {
|
||
content: "";
|
||
width: 10px;
|
||
height: 10px;
|
||
background: #040d15;
|
||
border-radius: 50%;
|
||
position: absolute;
|
||
top: 50%;
|
||
left: 50%;
|
||
transform: translate(-50%, -50%);
|
||
}
|
||
}
|
||
.dot5 {
|
||
display: block;
|
||
width: 16px;
|
||
height: 16px;
|
||
background: #5ce2f6;
|
||
border-radius: 50%;
|
||
position: relative;
|
||
&::after {
|
||
content: "";
|
||
width: 10px;
|
||
height: 10px;
|
||
background: #040d15;
|
||
border-radius: 50%;
|
||
position: absolute;
|
||
top: 50%;
|
||
left: 50%;
|
||
transform: translate(-50%, -50%);
|
||
}
|
||
}
|
||
.line {
|
||
// flex: 1;
|
||
// height: 28px;
|
||
// margin-left: 10px;
|
||
// margin-right: 10px;
|
||
// // background: #193B43;
|
||
// background: url('../../../assets/images/dataBoard/arrow-right2.png') no-repeat center;
|
||
// background-size: 100% 100%;
|
||
flex: 1;
|
||
height: 1px;
|
||
width: 100%;
|
||
background: #50c5d7;
|
||
opacity: 0.4;
|
||
}
|
||
.line2 {
|
||
transform: rotate(180deg);
|
||
}
|
||
}
|
||
.building_info {
|
||
display: flex;
|
||
font-size: 14px;
|
||
.building_time {
|
||
margin-right: 19px;
|
||
margin-left: 26px;
|
||
font-size: 14px;
|
||
color: rgba(255, 255, 255, 0.6);
|
||
}
|
||
// 逾期
|
||
.building_status {
|
||
display: inline-block;
|
||
padding: 0 8px;
|
||
border-radius: 10px;
|
||
line-height: 24px;
|
||
height: 24px;
|
||
background: rgba(#ff0000, 0.32);
|
||
color: #ff0000;
|
||
}
|
||
// 提前完成
|
||
.building_status2 {
|
||
display: inline-block;
|
||
padding: 0 8px;
|
||
border-radius: 10px;
|
||
line-height: 24px;
|
||
height: 24px;
|
||
background: rgba(#f7d300, 0.32);
|
||
color: #f7d300;
|
||
}
|
||
// 正常完成
|
||
.building_status3 {
|
||
display: inline-block;
|
||
padding: 0 8px;
|
||
border-radius: 10px;
|
||
line-height: 24px;
|
||
height: 24px;
|
||
background: rgba(#44d7b6, 0.32);
|
||
color: #44d7b6;
|
||
}
|
||
//逾期完成
|
||
.building_status4 {
|
||
display: inline-block;
|
||
padding: 0 8px;
|
||
border-radius: 10px;
|
||
line-height: 24px;
|
||
height: 24px;
|
||
background: rgba(#fe6c7f, 0.32);
|
||
color: #fe6c7f;
|
||
}
|
||
.building_status5 {
|
||
display: inline-block;
|
||
padding: 0 8px;
|
||
border-radius: 10px;
|
||
line-height: 24px;
|
||
height: 24px;
|
||
background: rgba(#5ce2f6, 0.32);
|
||
color: #5ce2f6;
|
||
}
|
||
}
|
||
}
|
||
}
|
||
.left_line:before {
|
||
// height: 28px;
|
||
// width: 98px;
|
||
// background: url('../../../assets/images/dataBoard/arrow-right.png') no-repeat center;
|
||
// background-size: 100% 100%;
|
||
// transform: rotate(90deg);
|
||
// // background: #193B43;
|
||
// position: absolute;
|
||
// left: -28px;
|
||
// top: 78%;
|
||
height: 125px;
|
||
width: 1px;
|
||
background: #50c5d7;
|
||
opacity: 0.4;
|
||
position: absolute;
|
||
left: 18px;
|
||
top: 40%;
|
||
}
|
||
.right_line:before {
|
||
// height: 28px;
|
||
// width: 98px;
|
||
// // background: #193B43;
|
||
// background: url('../../../assets/images/dataBoard/arrow-right.png') no-repeat center;
|
||
// background-size: 100% 100%;
|
||
// transform: rotate(90deg);
|
||
// position: absolute;
|
||
// right: -26px;
|
||
// top: 74%;
|
||
height: 125px;
|
||
width: 1px;
|
||
background: #50c5d7;
|
||
opacity: 0.4;
|
||
position: absolute;
|
||
right: 14px;
|
||
top: 35%;
|
||
}
|
||
}
|
||
}
|
||
.legend_box {
|
||
display: flex;
|
||
justify-content: flex-end;
|
||
margin-right: 20px;
|
||
.legend_item {
|
||
display: flex;
|
||
align-items: center;
|
||
margin-right: 10px;
|
||
font-size: 12px;
|
||
color: rgba(#fff, 0.38);
|
||
img {
|
||
margin-right: 10px;
|
||
}
|
||
}
|
||
}
|
||
.blockBox {
|
||
.blockContent {
|
||
padding-bottom: 0;
|
||
padding-top: 0;
|
||
}
|
||
}
|
||
</style>
|