579 lines
22 KiB
Vue
579 lines
22 KiB
Vue
<!--总览-->
|
||
<template>
|
||
<div class="lgBigScreen-wrap flex">
|
||
<div class="left" v-show="checkedTab == 0">
|
||
<img src="@/assets/images/longguang/demo/zl_l.png" class="demo"/>
|
||
</div>
|
||
<div class="center" v-show="checkedTab == 0">
|
||
<div class="mapChart" ref="mapChart"></div>
|
||
<div class="mapDialog" v-show="showMapDialog">
|
||
<div class="flex2">
|
||
<div class="dialog_title">项目详细</div>
|
||
<i class="el-icon-error" @click="showMapDialog = false"></i>
|
||
</div>
|
||
<div class="dialog_project_info">
|
||
<div class="flex3">
|
||
<img :src="projectDetails.layoutImage" class="info_img" />
|
||
<div style="width: 70%">
|
||
<el-tooltip
|
||
class="item"
|
||
effect="dark"
|
||
:content="projectDetails.projectName"
|
||
placement="top-start"
|
||
>
|
||
<div class="project_name hide">
|
||
{{ projectDetails.projectName }}
|
||
</div>
|
||
</el-tooltip>
|
||
<el-tooltip
|
||
class="item"
|
||
effect="dark"
|
||
:content="projectDetails.constructionUnit"
|
||
placement="top-start"
|
||
>
|
||
<div class="subhead hide">
|
||
总承包：{{projectDetails.constructionUnit}}
|
||
</div>
|
||
</el-tooltip>
|
||
<el-tooltip
|
||
class="item"
|
||
effect="dark"
|
||
:content="projectDetails.constructionUnit"
|
||
placement="top-start"
|
||
>
|
||
<div class="subhead hide">建筑方：{{projectDetails.constructionUnit}}</div>
|
||
</el-tooltip>
|
||
</div>
|
||
</div>
|
||
<div class="flex2 margin_20">
|
||
<div class="subhead">
|
||
建筑体量 (㎡)：<span class="value">{{
|
||
projectDetails.projectAcreage
|
||
}}</span>
|
||
</div>
|
||
<div class="subhead">
|
||
合同额(万元)：<span class="value">{{
|
||
projectDetails.contractPrice ? projectDetails.contractPrice : 0
|
||
}}</span>
|
||
</div>
|
||
</div>
|
||
<div class="flex2">
|
||
<div>
|
||
<div>环境</div>
|
||
<div class="subhead">
|
||
PM2.5：<span class="value2">{{
|
||
projectEnvironmentData.pm25
|
||
}}</span>
|
||
</div>
|
||
<div class="subhead">
|
||
PM10：<span class="value2">{{
|
||
projectEnvironmentData.pm10
|
||
}}</span>
|
||
</div>
|
||
</div>
|
||
<div>
|
||
<div>人员</div>
|
||
<div class="subhead">
|
||
实时人数：<span class="value2">{{
|
||
attendancePerson.totalWorker
|
||
}}</span>
|
||
</div>
|
||
<div class="subhead">
|
||
今日出勤：<span class="value2">{{
|
||
attendancePerson.totalPerson
|
||
}}</span>
|
||
</div>
|
||
</div>
|
||
<div>
|
||
<div>质量</div>
|
||
<div class="subhead">
|
||
待整改：<span class="value2">{{
|
||
qualityCount.rectificationNum
|
||
}}</span>
|
||
</div>
|
||
<div class="subhead">
|
||
整改率：<span class="value2">{{
|
||
qualityCount.completeRatio
|
||
}}</span>
|
||
</div>
|
||
</div>
|
||
<div>
|
||
<div>安全</div>
|
||
<div class="subhead">
|
||
待整改：<span class="value2">{{
|
||
securityCount.rectificationNum
|
||
}}</span>
|
||
</div>
|
||
<div class="subhead">
|
||
整改率：<span class="value2">{{
|
||
securityCount.completeRatio
|
||
}}</span>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
<div class="bottom_info">
|
||
<div class="flex2">
|
||
<div>项目进度</div>
|
||
<div>装饰装修阶段</div>
|
||
</div>
|
||
<el-progress :percentage="20"></el-progress>
|
||
<div class="flex2 time">
|
||
<div>2020-12-12</div>
|
||
<div>2021-08-31</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
<div class="right" v-show="checkedTab == 0">
|
||
<img src="@/assets/images/longguang/demo/zl_r.png" class="demo"/>
|
||
</div>
|
||
<div v-show="checkedTab!=0">
|
||
<img :src="showDemo" class="demo"/>
|
||
</div>
|
||
<div class="btn_wrap flex2">
|
||
<div v-for="(tab, index) in tabsList" :key="index" class="tab">
|
||
<div
|
||
:class="checkedTab == index ? 'checked' : 'noChecked'"
|
||
@click="changeTab(index)"
|
||
>
|
||
<img :src="tab.icon" />
|
||
<div>{{ tab.name }}</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</template>
|
||
|
||
<script>
|
||
import echarts from 'echarts4';;
|
||
import {
|
||
selectAllProjectInfoList,
|
||
getRealTimeDustNoiseData,
|
||
selectEnterpriseAttendanceCount,
|
||
selectProjectWorkAndInspectCount,
|
||
getComapnyStatisticsList,
|
||
} from "./../../../assets/js/api/companyBigScreen.js";
|
||
import {} from "./components"
|
||
export default {
|
||
data() {
|
||
return {
|
||
sn: "",
|
||
projectSn: "",
|
||
tabsList: [
|
||
{
|
||
name: "总览",
|
||
id: 1,
|
||
icon: require("../../../assets/images/longguang/icon_zonglan.png"),
|
||
},
|
||
{
|
||
name: "劳务管理",
|
||
id: 2,
|
||
icon: require("../../../assets/images/longguang/icon_lw.png"),
|
||
url: require("../../../assets/images/longguang/demo/lw.png"),
|
||
},
|
||
{
|
||
name: "安全管理",
|
||
id: 3,
|
||
icon: require("../../../assets/images/longguang/icon_aq.png"),
|
||
url: require("../../../assets/images/longguang/demo/aq.png"),
|
||
},
|
||
{
|
||
name: "质量管理",
|
||
id: 4,
|
||
icon: require("../../../assets/images/longguang/icon_zl.png"),
|
||
url: require("../../../assets/images/longguang/demo/zl.png"),
|
||
},
|
||
{
|
||
name: "机械管理",
|
||
id: 5,
|
||
icon: require("../../../assets/images/longguang/icon_jx.png"),
|
||
url: require("../../../assets/images/longguang/demo/jx.png"),
|
||
},
|
||
{
|
||
name: "进度管理",
|
||
id: 6,
|
||
icon: require("../../../assets/images/longguang/icon_jd.png"),
|
||
url: require("../../../assets/images/longguang/demo/jd.png"),
|
||
},
|
||
{
|
||
name: "监控管理",
|
||
id: 7,
|
||
icon: require("../../../assets/images/longguang/icon_jk.png"),
|
||
url: require("../../../assets/images/longguang/demo/jk.png"),
|
||
},
|
||
{
|
||
name: "AI视频管理",
|
||
id: 8,
|
||
icon: require("../../../assets/images/longguang/icon_ai.png"),
|
||
url: require("../../../assets/images/longguang/demo/ai.png"),
|
||
},
|
||
],
|
||
checkedTab: 0,
|
||
showMapDialog: false,
|
||
allProjectData: [], //数据源
|
||
projectEnvironmentData: {}, //环境信息
|
||
projectDetails: {}, //项目详细信息
|
||
qualityCount: {}, //详情质量
|
||
securityCount: {}, //详情安全
|
||
attendancePerson: {}, //详情人员
|
||
showDemo:'',
|
||
};
|
||
},
|
||
created() {
|
||
this.sn = this.$store.state.userInfo.sn;
|
||
|
||
this.getAllProjectInfoList();
|
||
},
|
||
mounted() {},
|
||
methods: {
|
||
//切换tab
|
||
changeTab(index) {
|
||
if (index != 0) {
|
||
this.showDemo = this.tabsList[index].url;
|
||
}
|
||
this.checkedTab = index;
|
||
},
|
||
|
||
//获取所有项目
|
||
getAllProjectInfoList() {
|
||
let data = {
|
||
sn: this.sn,
|
||
};
|
||
selectAllProjectInfoList(data).then((res) => {
|
||
console.log(res);
|
||
if (res.code == 200) {
|
||
this.allProjectData = res.result;
|
||
this.createdChart();
|
||
}
|
||
});
|
||
},
|
||
//获取环境数据
|
||
selectRealTimeDustNoiseData(projectSn) {
|
||
getRealTimeDustNoiseData({ projectSn: projectSn }).then((res) => {
|
||
if (res.code == 200) {
|
||
if (res.result) {
|
||
this.projectEnvironmentData = res.result;
|
||
} else {
|
||
this.projectEnvironmentData = {
|
||
pm25: 0,
|
||
pm10: 0,
|
||
noise: 0,
|
||
winddirection: 0,
|
||
};
|
||
}
|
||
}
|
||
});
|
||
},
|
||
//获取人员。质量。安全。数据
|
||
getProjectWorkAndInspectCount(projectSn) {
|
||
selectProjectWorkAndInspectCount({
|
||
projectSn: projectSn,
|
||
}).then((res) => {
|
||
if (res.code == 200) {
|
||
this.attendancePerson = res.result.personCount.attendancePerson;
|
||
this.attendancePerson.totalWorker = res.result.personCount.totalWorker;
|
||
this.qualityCount = res.result.qualityCount;
|
||
this.securityCount = res.result.securityCount;
|
||
}
|
||
});
|
||
},
|
||
|
||
//创建地图
|
||
createdChart() {
|
||
var uploadedDataURL = "/js/data-1528971808162-BkOXf61WX.json";
|
||
var that = this;
|
||
let myChart = echarts.init(this.$refs.mapChart);
|
||
var data = [];
|
||
//获取回显项目位置
|
||
if (this.allProjectData.length > 0) {
|
||
this.allProjectData.forEach((element, index) => {
|
||
let obj = {
|
||
name: element.projectName,
|
||
value: [element.longitude, element.latitude, 300], //300 回显图标的大小
|
||
projectSn: element.projectSn,
|
||
detail: element,
|
||
};
|
||
data.push(obj);
|
||
});
|
||
}
|
||
|
||
$.getJSON(uploadedDataURL, function (geoJson) {
|
||
echarts.registerMap("china", geoJson);
|
||
// tooltip: {}, // hover 回显数据
|
||
var option = {
|
||
// backgroundColor: "#030609",
|
||
grid: {
|
||
top: 0,
|
||
bottom: 0,
|
||
left: 0,
|
||
right: 0,
|
||
},
|
||
//地图显示
|
||
geo: {
|
||
map: "china",
|
||
aspectScale: 0.75, //长宽比
|
||
zoom: 1.2,
|
||
scaleLimit: {
|
||
min: 1.2,
|
||
},
|
||
roam: true,
|
||
label: {
|
||
normal: {
|
||
formatter: function (params) {
|
||
if (params.name.indexOf("_")) {
|
||
return params.name.split("_")[0];
|
||
}
|
||
},
|
||
show: false,
|
||
textStyle: {
|
||
color: "#F4E924",
|
||
fontSize: 16,
|
||
fontWeight: "bold",
|
||
},
|
||
},
|
||
emphasis: {
|
||
show: false,
|
||
textStyle: {
|
||
color: "white",
|
||
},
|
||
},
|
||
},
|
||
itemStyle: {
|
||
normal: {
|
||
areaColor: "#031525",
|
||
borderColor: "#3B5077",
|
||
borderWidth: 1,
|
||
},
|
||
emphasis: {
|
||
areaColor: "#0f2c70",
|
||
},
|
||
},
|
||
regions: [
|
||
{
|
||
name: "南海诸岛",
|
||
itemStyle: {
|
||
areaColor: "rgba(0, 10, 52, 1)",
|
||
borderColor: "rgba(0, 10, 52, 1)",
|
||
normal: {
|
||
// opacity: 0,
|
||
label: {
|
||
show: false,
|
||
color: "#009cc9",
|
||
},
|
||
},
|
||
},
|
||
},
|
||
],
|
||
},
|
||
series: [
|
||
{
|
||
name: "",
|
||
type: "effectScatter",
|
||
coordinateSystem: "geo",
|
||
data: data,
|
||
symbolSize: function (val) {
|
||
return val[2] / 20;
|
||
},
|
||
showEffectOn: "render",
|
||
rippleEffect: {
|
||
brushType: "stroke",
|
||
},
|
||
hoverAnimation: true,
|
||
label: {
|
||
normal: {
|
||
formatter: "{b}",
|
||
position: "right",
|
||
show: true, //回显项目名称
|
||
},
|
||
},
|
||
itemStyle: {
|
||
normal: {
|
||
color: "#F4E924",
|
||
shadowBlur: 10,
|
||
shadowColor: "#333",
|
||
},
|
||
},
|
||
zlevel: 1,
|
||
},
|
||
],
|
||
};
|
||
|
||
myChart.on("click", function (params) {
|
||
//点击的是图标
|
||
if (params.seriesType) {
|
||
that.showMapDialog = true;
|
||
that.projectSn = params.data.projectSn;
|
||
that.projectDetails = params.data.detail;
|
||
console.log(params.data.detail);
|
||
//获取环境信息
|
||
that.selectRealTimeDustNoiseData(params.data.projectSn);
|
||
//获取人员.安全.质量 信息
|
||
that.getProjectWorkAndInspectCount(params.data.projectSn);
|
||
}
|
||
});
|
||
|
||
myChart.setOption(option, true);
|
||
});
|
||
},
|
||
},
|
||
};
|
||
</script>
|
||
|
||
<style lang="less" scoped>
|
||
.flex {
|
||
display: flex;
|
||
}
|
||
.flex2 {
|
||
display: flex;
|
||
justify-content: space-between;
|
||
align-items: center;
|
||
}
|
||
.flex3 {
|
||
display: flex;
|
||
align-items: center;
|
||
}
|
||
.lgBigScreen-wrap {
|
||
width: 100%;
|
||
height: 100%;
|
||
background: #030609;
|
||
color: #fff;
|
||
position: relative;
|
||
box-sizing: border-box;
|
||
padding: 15px;
|
||
.left {
|
||
width: 20%;
|
||
}
|
||
.center {
|
||
width: 60%;
|
||
height: calc(100% - 2px);
|
||
}
|
||
.right {
|
||
width: 20%;
|
||
}
|
||
.btn_wrap {
|
||
position: absolute;
|
||
width: 60%;
|
||
height: 100px;
|
||
bottom: -2px;
|
||
left: 0;
|
||
right: 0;
|
||
margin: 0 auto;
|
||
text-align: center;
|
||
padding: 0 50px;
|
||
box-sizing: border-box;
|
||
.tab {
|
||
width: 90px;
|
||
height: 100%;
|
||
display: flex;
|
||
align-items: center;
|
||
justify-content: center;
|
||
cursor: pointer;
|
||
color: #fff;
|
||
.noChecked{
|
||
opacity: 0.6;
|
||
}
|
||
}
|
||
}
|
||
.checked {
|
||
transform: scale(1.1);
|
||
color: #ffffff;
|
||
opacity: 1;
|
||
}
|
||
.mapChart {
|
||
width: 100%;
|
||
height: 100%;
|
||
background-image: url("../../../assets/images/longguang/bigScreen_bg.png");
|
||
background-repeat: no-repeat;
|
||
background-size: auto;
|
||
background-position: center;
|
||
}
|
||
.mapDialog {
|
||
position: absolute;
|
||
z-index: 100;
|
||
left: calc(50% - 242px);
|
||
top: calc(50% - 191px);
|
||
width: 484px;
|
||
// height: 292px;
|
||
background-color: rgba(11, 33, 53, 1);
|
||
box-shadow: 0px 6px 15px 0px rgba(0, 0, 0, 1);
|
||
}
|
||
.dialog_title {
|
||
width: 120px;
|
||
height: 30px;
|
||
line-height: 30px;
|
||
color: #fff;
|
||
box-sizing: border-box;
|
||
padding: 0 14px;
|
||
font-size: 15px;
|
||
background-image: linear-gradient(
|
||
to right,
|
||
rgba(67, 120, 216, 0.5),
|
||
rgba(67, 120, 216, 0)
|
||
);
|
||
}
|
||
.el-icon-error {
|
||
color: rgba(67, 120, 216, 1);
|
||
font-size: 20px;
|
||
margin: 0 10px;
|
||
cursor: pointer;
|
||
}
|
||
.dialog_project_info {
|
||
width: 100%;
|
||
padding: 20px 26px;
|
||
box-sizing: border-box;
|
||
.info_img {
|
||
width: 103px;
|
||
height: 78px;
|
||
margin-right: 26px;
|
||
}
|
||
.project_name {
|
||
color: rgba(255, 255, 255, 1);
|
||
font-size: 16px;
|
||
text-decoration: underline;
|
||
margin-bottom: 6px;
|
||
}
|
||
.subhead {
|
||
color: rgba(255, 255, 255, 0.8);
|
||
font-size: 13px;
|
||
line-height: 26px;
|
||
}
|
||
.value {
|
||
font-size: 16px;
|
||
font-weight: 600;
|
||
color: rgba(255, 255, 255, 1);
|
||
}
|
||
.value2 {
|
||
font-size: 15px;
|
||
color: rgba(255, 255, 255, 0.8);
|
||
}
|
||
.margin_20 {
|
||
margin: 20px 0;
|
||
}
|
||
.bottom_info {
|
||
margin-top: 20px;
|
||
.el-progress {
|
||
margin: 4px 0;
|
||
}
|
||
/deep/.el-progress__text {
|
||
color: #fff !important;
|
||
margin-left: 24px;
|
||
}
|
||
.time {
|
||
opacity: 0.8;
|
||
}
|
||
}
|
||
.hide {
|
||
width: 100%;
|
||
overflow: hidden;
|
||
text-overflow: ellipsis;
|
||
white-space: nowrap;
|
||
}
|
||
}
|
||
|
||
.demo{
|
||
height: 100%;
|
||
}
|
||
}
|
||
</style>
|