1814 lines
54 KiB
Vue
1814 lines
54 KiB
Vue
<template>
|
||
<div class="fullHeight dataBoardIndex">
|
||
<div class="fullHeight aside">
|
||
<div class="blockBox">
|
||
<!-- 项目信息 -->
|
||
<div class="blockTitle">
|
||
{{ $t('message.companyDiagram.projectInfo') }}
|
||
</div>
|
||
<div class="blockContent">
|
||
<marquee
|
||
class="text"
|
||
id="affiche"
|
||
align="left"
|
||
direction="up"
|
||
height="100%"
|
||
width="100%"
|
||
hspace="10"
|
||
vspace="20"
|
||
loop="1"
|
||
scrollamount="5"
|
||
scrolldelay="100"
|
||
onmouseover="this.stop()"
|
||
onmouseout="this.start()"
|
||
behavior="scroll"
|
||
>
|
||
<!-- <vue-scroll> -->
|
||
<div class="listItem">
|
||
<!-- 项目名称 -->
|
||
<span class="label"
|
||
>{{ $t('message.companyDiagram.entryName1') }}：</span
|
||
>
|
||
<span class="value">{{ projectData.projectName }}</span>
|
||
</div>
|
||
<div class="listItem">
|
||
<!-- 项目地址 -->
|
||
<span class="label"
|
||
>{{ $t('message.companyDiagram.projectAddress') }}：</span
|
||
>
|
||
<span class="value"
|
||
>{{ projectData.provinceName }}{{ projectData.cityName
|
||
}}{{ projectData.areaName
|
||
}}{{ projectData.projectAddress }}</span
|
||
>
|
||
</div>
|
||
|
||
<div class="listItem">
|
||
<!-- 项目经理 -->
|
||
<span class="label"
|
||
>{{ $t('message.companyDiagram.projectManager') }}：</span
|
||
>
|
||
<span class="value">{{ projectData.projectManage }}</span>
|
||
</div>
|
||
<div class="listItem">
|
||
<!-- 联系电话 -->
|
||
<span class="label"
|
||
>{{ $t('message.companyDiagram.telPhone') }}：</span
|
||
>
|
||
<span class="value">{{ projectData.projectTel }}</span>
|
||
</div>
|
||
<div class="listItem">
|
||
<!-- 建筑面积 -->
|
||
<span class="label"
|
||
>{{ $t('message.companyDiagram.buildArea') }}：</span
|
||
>
|
||
<span class="value">{{ projectData.projectAcreage }} m²</span>
|
||
</div>
|
||
<div class="listItem">
|
||
<!-- 开工日期 -->
|
||
<span class="label"
|
||
>{{ $t('message.companyDiagram.buildStartTime') }}：</span
|
||
>
|
||
<span class="value">{{ projectData.startWorkDate }}</span>
|
||
</div>
|
||
<div class="listItem">
|
||
<!-- 项目编号 -->
|
||
<span class="label"
|
||
>{{ $t('message.companyDiagram.projectNo') }}：</span
|
||
>
|
||
<span class="value">{{ projectData.projectNumber }}</span>
|
||
</div>
|
||
<div class="listItem">
|
||
<!-- 工程类别 -->
|
||
<span class="label"
|
||
>{{ $t('message.companyDiagram.projectType') }}：</span
|
||
>
|
||
<span
|
||
class="value"
|
||
v-for="(item, index) in $t(
|
||
'message.companyDiagram.PROJECTTYPE'
|
||
)"
|
||
:key="index"
|
||
v-if="projectData.projectType == item.id"
|
||
>{{ item.name }}</span
|
||
>
|
||
</div>
|
||
<div class="listItem">
|
||
<!-- 工程用途 -->
|
||
<span class="label"
|
||
>{{ $t('message.companyDiagram.projectUse') }}：</span
|
||
>
|
||
<span
|
||
class="value"
|
||
v-for="(item, index) in $t(
|
||
'message.companyDiagram.ENGINEERINGPRUPOSE'
|
||
)"
|
||
:key="index"
|
||
v-if="projectData.engineeringPurpose == item.id"
|
||
>{{ item.name }}</span
|
||
>
|
||
</div>
|
||
<div class="listItem">
|
||
<!-- 结构类型 -->
|
||
<span class="label"
|
||
>{{ $t('message.companyDiagram.structureType') }}：</span
|
||
>
|
||
<span
|
||
class="value"
|
||
v-for="(item, index) in $t(
|
||
'message.companyDiagram.STRUCTURETYPE'
|
||
)"
|
||
:key="index"
|
||
v-if="projectData.structureType == item.id"
|
||
>{{ item.name }}</span
|
||
>
|
||
</div>
|
||
<div class="listItem">
|
||
<!-- 工程状态 -->
|
||
<span class="label"
|
||
>{{ $t('message.companyDiagram.projectStatus') }}：</span
|
||
>
|
||
<span
|
||
class="value"
|
||
v-for="(item, index) in $t(
|
||
'message.companyDiagram.BUILDSTATUS'
|
||
)"
|
||
:key="index"
|
||
v-if="projectData.bulidStatus == item.id"
|
||
>{{ item.name }}</span
|
||
>
|
||
</div>
|
||
<!-- </vue-scroll> -->
|
||
<div class="listItem">
|
||
<!-- 项目名称 -->
|
||
<span class="label"
|
||
>{{ $t('message.companyDiagram.entryName1') }}：</span
|
||
>
|
||
<span class="value">{{ projectData.projectName }}</span>
|
||
</div>
|
||
<div class="listItem">
|
||
<!-- 项目地址 -->
|
||
<span class="label"
|
||
>{{ $t('message.companyDiagram.projectAddress') }}：</span
|
||
>
|
||
<span class="value"
|
||
>{{ projectData.provinceName }}{{ projectData.cityName
|
||
}}{{ projectData.areaName
|
||
}}{{ projectData.projectAddress }}</span
|
||
>
|
||
</div>
|
||
|
||
<div class="listItem">
|
||
<!-- 项目经理 -->
|
||
<span class="label"
|
||
>{{ $t('message.companyDiagram.projectManager') }}：</span
|
||
>
|
||
<span class="value">{{ projectData.projectManage }}</span>
|
||
</div>
|
||
<div class="listItem">
|
||
<!-- 联系电话 -->
|
||
<span class="label"
|
||
>{{ $t('message.companyDiagram.telPhone') }}：</span
|
||
>
|
||
<span class="value">{{ projectData.projectTel }}</span>
|
||
</div>
|
||
<div class="listItem">
|
||
<!-- 建筑面积 -->
|
||
<span class="label"
|
||
>{{ $t('message.companyDiagram.buildArea') }}：</span
|
||
>
|
||
<span class="value">{{ projectData.projectAcreage }} m²</span>
|
||
</div>
|
||
<div class="listItem">
|
||
<!-- 开工日期 -->
|
||
<span class="label"
|
||
>{{ $t('message.companyDiagram.buildStartTime') }}：</span
|
||
>
|
||
<span class="value">{{ projectData.startWorkDate }}</span>
|
||
</div>
|
||
<div class="listItem">
|
||
<!-- 项目编号 -->
|
||
<span class="label"
|
||
>{{ $t('message.companyDiagram.projectNo') }}：</span
|
||
>
|
||
<span class="value">{{ projectData.projectNumber }}</span>
|
||
</div>
|
||
<div class="listItem">
|
||
<!-- 工程类别 -->
|
||
<span class="label"
|
||
>{{ $t('message.companyDiagram.projectType') }}：</span
|
||
>
|
||
<span
|
||
class="value"
|
||
v-for="(item, index) in $t(
|
||
'message.companyDiagram.PROJECTTYPE'
|
||
)"
|
||
:key="index"
|
||
v-if="projectData.projectType == item.id"
|
||
>{{ item.name }}</span
|
||
>
|
||
</div>
|
||
<div class="listItem">
|
||
<!-- 工程用途 -->
|
||
<span class="label"
|
||
>{{ $t('message.companyDiagram.projectUse') }}：</span
|
||
>
|
||
<span
|
||
class="value"
|
||
v-for="(item, index) in $t(
|
||
'message.companyDiagram.ENGINEERINGPRUPOSE'
|
||
)"
|
||
:key="index"
|
||
v-if="projectData.engineeringPurpose == item.id"
|
||
>{{ item.name }}</span
|
||
>
|
||
</div>
|
||
<div class="listItem">
|
||
<!-- 结构类型 -->
|
||
<span class="label"
|
||
>{{ $t('message.companyDiagram.structureType') }}：</span
|
||
>
|
||
<span
|
||
class="value"
|
||
v-for="(item, index) in $t(
|
||
'message.companyDiagram.STRUCTURETYPE'
|
||
)"
|
||
:key="index"
|
||
v-if="projectData.structureType == item.id"
|
||
>{{ item.name }}</span
|
||
>
|
||
</div>
|
||
<div class="listItem">
|
||
<!-- 工程状态 -->
|
||
<span class="label"
|
||
>{{ $t('message.companyDiagram.projectStatus') }}：</span
|
||
>
|
||
<span
|
||
class="value"
|
||
v-for="(item, index) in $t(
|
||
'message.companyDiagram.BUILDSTATUS'
|
||
)"
|
||
:key="index"
|
||
v-if="projectData.bulidStatus == item.id"
|
||
>{{ item.name }}</span
|
||
>
|
||
</div>
|
||
<!-- di san fen -->
|
||
<div class="listItem">
|
||
<!-- 项目名称 -->
|
||
<span class="label"
|
||
>{{ $t('message.companyDiagram.entryName1') }}：</span
|
||
>
|
||
<span class="value">{{ projectData.projectName }}</span>
|
||
</div>
|
||
<div class="listItem">
|
||
<!-- 项目地址 -->
|
||
<span class="label"
|
||
>{{ $t('message.companyDiagram.projectAddress') }}：</span
|
||
>
|
||
<span class="value"
|
||
>{{ projectData.provinceName }}{{ projectData.cityName
|
||
}}{{ projectData.areaName
|
||
}}{{ projectData.projectAddress }}</span
|
||
>
|
||
</div>
|
||
|
||
<div class="listItem">
|
||
<!-- 项目经理 -->
|
||
<span class="label"
|
||
>{{ $t('message.companyDiagram.projectManager') }}：</span
|
||
>
|
||
<span class="value">{{ projectData.projectManage }}</span>
|
||
</div>
|
||
<div class="listItem">
|
||
<!-- 联系电话 -->
|
||
<span class="label"
|
||
>{{ $t('message.companyDiagram.telPhone') }}：</span
|
||
>
|
||
<span class="value">{{ projectData.projectTel }}</span>
|
||
</div>
|
||
<div class="listItem">
|
||
<!-- 建筑面积 -->
|
||
<span class="label"
|
||
>{{ $t('message.companyDiagram.buildArea') }}：</span
|
||
>
|
||
<span class="value">{{ projectData.projectAcreage }} m²</span>
|
||
</div>
|
||
<div class="listItem">
|
||
<!-- 开工日期 -->
|
||
<span class="label"
|
||
>{{ $t('message.companyDiagram.buildStartTime') }}：</span
|
||
>
|
||
<span class="value">{{ projectData.startWorkDate }}</span>
|
||
</div>
|
||
<div class="listItem">
|
||
<!-- 项目编号 -->
|
||
<span class="label"
|
||
>{{ $t('message.companyDiagram.projectNo') }}：</span
|
||
>
|
||
<span class="value">{{ projectData.projectNumber }}</span>
|
||
</div>
|
||
<div class="listItem">
|
||
<!-- 工程类别 -->
|
||
<span class="label"
|
||
>{{ $t('message.companyDiagram.projectType') }}：</span
|
||
>
|
||
<span
|
||
class="value"
|
||
v-for="(item, index) in $t(
|
||
'message.companyDiagram.PROJECTTYPE'
|
||
)"
|
||
:key="index"
|
||
v-if="projectData.projectType == item.id"
|
||
>{{ item.name }}</span
|
||
>
|
||
</div>
|
||
<div class="listItem">
|
||
<!-- 工程用途 -->
|
||
<span class="label"
|
||
>{{ $t('message.companyDiagram.projectUse') }}：</span
|
||
>
|
||
<span
|
||
class="value"
|
||
v-for="(item, index) in $t(
|
||
'message.companyDiagram.ENGINEERINGPRUPOSE'
|
||
)"
|
||
:key="index"
|
||
v-if="projectData.engineeringPurpose == item.id"
|
||
>{{ item.name }}</span
|
||
>
|
||
</div>
|
||
<div class="listItem">
|
||
<!-- 结构类型 -->
|
||
<span class="label"
|
||
>{{ $t('message.companyDiagram.structureType') }}：</span
|
||
>
|
||
<span
|
||
class="value"
|
||
v-for="(item, index) in $t(
|
||
'message.companyDiagram.STRUCTURETYPE'
|
||
)"
|
||
:key="index"
|
||
v-if="projectData.structureType == item.id"
|
||
>{{ item.name }}</span
|
||
>
|
||
</div>
|
||
<div class="listItem">
|
||
<!-- 工程状态 -->
|
||
<span class="label"
|
||
>{{ $t('message.companyDiagram.projectStatus') }}：</span
|
||
>
|
||
<span
|
||
class="value"
|
||
v-for="(item, index) in $t(
|
||
'message.companyDiagram.BUILDSTATUS'
|
||
)"
|
||
:key="index"
|
||
v-if="projectData.bulidStatus == item.id"
|
||
>{{ item.name }}</span
|
||
>
|
||
</div>
|
||
</marquee>
|
||
</div>
|
||
</div>
|
||
<div class="blockBox" style="height: calc(33% - 90px); margin-top: 20px">
|
||
<!-- 人员概况 -->
|
||
<div class="blockTitle">
|
||
{{ $t('message.companyDiagram.peopleOverview') }}
|
||
</div>
|
||
<div class="blockContent dataBoxContent" style="position: relative">
|
||
<div v-show="ry_switch == 0">
|
||
<img
|
||
style="margin-left: 22px"
|
||
src="@/assets/images/dataBoard/rygs1.png"
|
||
alt=""
|
||
/>
|
||
<img
|
||
style="margin-left: 12px"
|
||
src="@/assets/images/dataBoard/rygs1_1.png"
|
||
alt=""
|
||
/>
|
||
</div>
|
||
<div v-show="ry_switch == 1">
|
||
<img src="@/assets/images/dataBoard/rygs2.png" alt="" />
|
||
</div>
|
||
<div style="position: absolute; bottom: 10px; left: 26px">
|
||
<img
|
||
src="@/assets/images/dataBoard/rygs_botom.png"
|
||
style="margin-top: 12px"
|
||
alt=""
|
||
/>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
<div @click="toznsb" class="blockBox" style="height: calc(33% - 110px); margin-top: 20px">
|
||
<!-- 人员概况 -->">
|
||
<div class="blockTitle">智能设备</div>
|
||
<div style="">
|
||
<img
|
||
style="margin-top: 10px; margin-left: 25px"
|
||
class=""
|
||
src="@/assets/images/dataBoard/znsb.png"
|
||
alt=""
|
||
/>
|
||
</div>
|
||
</div>
|
||
<div class="blockBox" @click="tohygl" style="height: calc(33% - 130px); margin-top: 20px">
|
||
<!-- 人员概况 -->">
|
||
<div class="blockTitle">合约管理</div>
|
||
<div >
|
||
|
||
<img
|
||
|
||
style="margin-top: 10px; margin-left: 25px"
|
||
class=""
|
||
src="@/assets/images/dataBoard/hygl.png"
|
||
alt=""
|
||
/>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
<div class="center fullHeight">
|
||
<div class="top">
|
||
<img
|
||
style="width: 92%; margin-left: 36px"
|
||
src="@/assets/images/dataBoard/bg.jpg"
|
||
alt=""
|
||
/>
|
||
</div>
|
||
<div class="bottom">
|
||
<!-- 进度情况 -->
|
||
<div v-if="enabledProjectV2 == 3" class="blockTitle blockTitle4">
|
||
<i></i>{{ $t('message.companyDiagram.planStatus') }}
|
||
</div>
|
||
<div class="bottomInner">
|
||
<div class="timeBox">
|
||
<div class="blockTitle blockTitle2" style="margin-right: 40px">
|
||
<i></i>{{ $t('message.companyDiagram.countDown') }}
|
||
</div>
|
||
<div class="timeInner">
|
||
<!-- 项目总天数 -->
|
||
<p>{{ $t('message.companyDiagram.projectDayNum') }}</p>
|
||
<div class="bg1">
|
||
<!-- 天 -->
|
||
<span class="num">{{ projectData.totalProjectDay }}</span>
|
||
{{ $t('message.companyDiagram.day') }}
|
||
</div>
|
||
</div>
|
||
<div class="timeInner">
|
||
<!-- 项目剩余天数 -->
|
||
<p>{{ $t('message.companyDiagram.projectResidueDay') }}</p>
|
||
<div class="bg1">
|
||
<!-- 天 -->
|
||
<span class="num">{{ projectData.surplusDay }}</span>
|
||
{{ $t('message.companyDiagram.day') }}
|
||
</div>
|
||
</div>
|
||
<div></div>
|
||
</div>
|
||
<div class="splitLine">
|
||
<img
|
||
src="@/assets/images/carOverview/line4.png"
|
||
alt=""
|
||
width="100%"
|
||
/>
|
||
</div>
|
||
<div class="stageContent" style="display: flex">
|
||
<!-- 里程碑 -->
|
||
<div class="blockTitle blockTitle2" style="width: 220px">
|
||
<i></i>{{ $t('message.companyDiagram.milestone') }}
|
||
</div>
|
||
<div class="stageBox">
|
||
<vue-scroll :ops="ops" ref="stageScroll">
|
||
<div
|
||
class="stageItem"
|
||
v-for="(item, index) in stageList"
|
||
:key="index"
|
||
:class="
|
||
projectData.constructionStage - 1 > index
|
||
? 'finish'
|
||
: projectData.constructionStage - 1 == index
|
||
? 'ongoing'
|
||
: ''
|
||
"
|
||
>
|
||
<div class="statusImg"></div>
|
||
<p>{{ item.name }}</p>
|
||
<div
|
||
class="line"
|
||
v-show="stageList.length != index + 1"
|
||
></div>
|
||
</div>
|
||
</vue-scroll>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
<div class="fullHeight aside">
|
||
<div class="blockBox">
|
||
<!-- 环境监测 -->
|
||
<div
|
||
v-if="COMPANY == 'longguang' || enabledProjectV2 == 3"
|
||
class="blockTitle"
|
||
>
|
||
{{ $t('message.companyDiagram.environmentMonitor') }}
|
||
</div>
|
||
|
||
<div
|
||
v-if="COMPANY == 'longguang' || enabledProjectV2 == 3"
|
||
class="blockContent"
|
||
>
|
||
<airQulityChart
|
||
:show="false"
|
||
:size="mini"
|
||
class="airQulityChart"
|
||
></airQulityChart>
|
||
<!-- 天气显示 -->
|
||
<div style="overflow: hidden" class="weatherBox">
|
||
<div
|
||
class="weatherItem"
|
||
v-for="(item, index) in weatherList"
|
||
:key="index"
|
||
v-if="index < 2"
|
||
>
|
||
<p>
|
||
<span>{{ item.day }}</span>
|
||
<!-- <span>（{{ item.week }}）</span> -->
|
||
</p>
|
||
<div style="height: 7%"></div>
|
||
<div class="imgBox">
|
||
<img :src="item.url" />
|
||
</div>
|
||
<div style="height: 10%"></div>
|
||
<p class="weather">{{ item.wea }}</p>
|
||
<p class="temp">{{ item.tem2 }} ~ {{ item.tem1 }}</p>
|
||
<div style="height: 6%"></div>
|
||
<p>
|
||
{{ $t('message.environmentalOverview.wind_power') }}
|
||
{{ item.win_speed }}
|
||
</p>
|
||
</div>
|
||
</div>
|
||
<!-- 空气质量 -->
|
||
<div class="airQuality">
|
||
<div class="airQuality-item">
|
||
<img src="@/assets/images/greenOverview/PM2.5@1x.png" alt="" />
|
||
<div>
|
||
<p>PM2.5</p>
|
||
<p>{{ plantCap.pm25 ? plantCap.pm25 : '--' }}μg/m3</p>
|
||
</div>
|
||
</div>
|
||
<div class="airQuality-item">
|
||
<img src="@/assets/images/greenOverview/PM10@1x.png" alt="" />
|
||
<div>
|
||
<p>PM10</p>
|
||
<p>{{ plantCap.pm10 ? plantCap.pm10 : '--' }}μg/m3</p>
|
||
</div>
|
||
</div>
|
||
<div class="airQuality-item">
|
||
<img src="@/assets/images/greenOverview/噪声@1x.png" alt="" />
|
||
<div>
|
||
<p>噪声</p>
|
||
<p>{{ plantCap.noise ? plantCap.noise : '--' }}db</p>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
<!-- 安全管理 -->
|
||
<div @click="toquality"
|
||
v-if="COMPANY != 'longguang' && enabledProjectV2 != 3"
|
||
class="blockTitle"
|
||
>
|
||
{{ $t('message.companyDiagram.safeManage') }}
|
||
</div>
|
||
<div
|
||
@click="toquality"
|
||
v-if="COMPANY != 'longguang' && enabledProjectV2 != 3"
|
||
class="blockContent"
|
||
>
|
||
<div @click="toquality" class="safeChart" ref="safeChart"></div>
|
||
<div @click="toquality" class="descBox fullHeight">
|
||
<div>
|
||
<div class="descItem descItem1">
|
||
<!-- 已整改安全问题 -->
|
||
<p class="text">
|
||
<i class="dot purple"></i
|
||
>{{ $t('message.companyDiagram.rectificationSafeQuestion') }}
|
||
</p>
|
||
<p class="num">{{ secureData.completeNum }}</p>
|
||
</div>
|
||
|
||
<div class="descItem">
|
||
<!-- 未整改安全问题 -->
|
||
<p class="text">
|
||
<i class="dot red"></i
|
||
>{{
|
||
$t('message.companyDiagram.noRectificationSafeQuestion')
|
||
}}
|
||
</p>
|
||
<p class="num">{{ secureData.rectificationNum }}</p>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
<!-- </div>-->
|
||
<div class="blockBox">
|
||
<!-- 质量管理 -->
|
||
<div
|
||
@click="toquality"
|
||
v-if="COMPANY != 'longguang' && enabledProjectV2 != 3"
|
||
class="blockTitle"
|
||
>
|
||
{{ $t('message.companyDiagram.qualityManage') }}
|
||
</div>
|
||
<!-- 设备报警 -->
|
||
<div @click="toquality" v-else class="blockTitle">
|
||
{{ $t('message.companyDiagram.devAlarm') }}
|
||
</div>
|
||
<div @click="toquality" class="blockContent">
|
||
<div
|
||
v-if="COMPANY != 'longguang' && enabledProjectV2 != 3"
|
||
class="qulityChart"
|
||
ref="qulityChart"
|
||
></div>
|
||
<div
|
||
v-if="COMPANY != 'longguang' && enabledProjectV2 != 3"
|
||
class="descBox fullHeight"
|
||
>
|
||
<div>
|
||
<div class="descItem descItem1">
|
||
<!-- 已整改质量问题 -->
|
||
<p class="text">
|
||
<i class="dot blue"></i
|
||
>{{
|
||
$t('message.companyDiagram.rectificationQualityQuestion')
|
||
}}
|
||
</p>
|
||
<p class="num">{{ qualityData.completeNum }}</p>
|
||
</div>
|
||
<div class="descItem">
|
||
<!-- 已完成验收 -->
|
||
<p class="text">
|
||
<i class="dot green"></i>
|
||
已验收
|
||
</p>
|
||
<p class="num">51</p>
|
||
</div>
|
||
</div>
|
||
<div style="margin-left: 22px">
|
||
<div class="descItem descItem1">
|
||
<!-- 未整改质量问题 -->
|
||
<p class="text">
|
||
<i class="dot green"></i
|
||
>{{
|
||
$t('message.companyDiagram.noRectificationQualityQuestion')
|
||
}}
|
||
</p>
|
||
<p class="num">{{ qualityData.rectificationNum }}</p>
|
||
</div>
|
||
|
||
<div class="descItem" style="margin-top: 12px">
|
||
<!-- 待验收 -->
|
||
<p class="text">
|
||
<i class="dot blue"></i>
|
||
待验收
|
||
<!-- {{
|
||
$t("message.companyDiagram.rectificationQualityQuestion")
|
||
}} -->
|
||
</p>
|
||
<p class="num">52</p>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
<!-- 设备报警内容 -->
|
||
<div class="attendance-cards2" v-else>
|
||
<div class="attendance-cards-item">
|
||
<div class="cards-item-left">
|
||
<img
|
||
src="../../../assets/images/longguang2/tower_crane.png"
|
||
alt=""
|
||
/>
|
||
<p>塔吊</p>
|
||
</div>
|
||
<div class="cards-item-right">
|
||
<p class="p1">设备总数：{{ totalTowerDev }}</p>
|
||
<p class="p2">今日报警数</p>
|
||
<p class="p3">{{ totalDangerTowerDev }}</p>
|
||
</div>
|
||
</div>
|
||
<div class="attendance-cards-item">
|
||
<div class="cards-item-left">
|
||
<img
|
||
src="../../../assets/images/longguang2/elevator.png"
|
||
alt=""
|
||
/>
|
||
<p>升降机</p>
|
||
</div>
|
||
<div class="cards-item-right">
|
||
<p class="p1">设备总数：{{ totalLifterDev }}</p>
|
||
<p class="p2">今日报警数</p>
|
||
<p class="p3">{{ totalDangerLifterDev }}</p>
|
||
</div>
|
||
</div>
|
||
<div class="attendance-cards-item">
|
||
<div class="cards-item-left">
|
||
<img
|
||
src="../../../assets/images/longguang2/env_monitoring.png"
|
||
alt=""
|
||
/>
|
||
<p>环境监测</p>
|
||
</div>
|
||
<div class="cards-item-right">
|
||
<p class="p1">设备总数：{{ environmentDevNum }}</p>
|
||
<p class="p2">今日报警数</p>
|
||
<p class="p3">{{ environmentTotalAlarm }}</p>
|
||
</div>
|
||
</div>
|
||
<div class="attendance-cards-item">
|
||
<div class="cards-item-left">
|
||
<img
|
||
src="../../../assets/images/longguang2/video_monitoring.png"
|
||
alt=""
|
||
/>
|
||
<p>AI视频监测</p>
|
||
</div>
|
||
<div class="cards-item-right">
|
||
<p class="p1">设备总数：{{ totalVideoDev }}</p>
|
||
<p class="p2">今日报警数</p>
|
||
<p class="p3">{{ videoAlarmNum }}</p>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
<!-- <vue-scroll :ops="ops" style="width: 100%">-->
|
||
<!-- <div v-else style="overflow:hidden;">
|
||
<div
|
||
class="weatherItem"
|
||
v-for="(item, index) in weatherList"
|
||
:key="index"
|
||
v-if="index < 3"
|
||
>
|
||
<p>
|
||
<span>{{ item.day }}</span>
|
||
</p>
|
||
<div style="height: 10%"></div>
|
||
<div class="imgBox">
|
||
<img :src="item.url" />
|
||
</div>
|
||
<div style="height: 10%"></div>
|
||
<p class="weather">{{ item.wea }}</p>
|
||
<p class="temp">{{ item.tem2 }} ~ {{ item.tem1 }}</p>
|
||
<div style="height: 6%"></div>
|
||
<p>
|
||
{{ $t("message.environmentalOverview.wind_power") }}
|
||
{{ item.win_speed }}
|
||
</p>
|
||
</div>
|
||
</div> -->
|
||
<!-- </vue-scroll>-->
|
||
</div>
|
||
</div>
|
||
<div @click="toenvironment" class="blockBox" style="height: calc(33.33% - 120px)">
|
||
<!-- 环境监测 -->
|
||
<div
|
||
v-if="COMPANY != 'longguang' && enabledProjectV2 != 3"
|
||
class="blockTitle"
|
||
>
|
||
{{ $t('message.companyDiagram.environmentMonitor') }}
|
||
</div>
|
||
<div>
|
||
<img
|
||
style="margin-top: 20px; margin-left: 25px"
|
||
class=""
|
||
src="@/assets/images/dataBoard/hjjcs.png"
|
||
alt=""
|
||
/>
|
||
</div>
|
||
</div>
|
||
<div class="blockBox" style="height: calc(33.33% - 120px)">
|
||
|
||
<div class="blockTitle">点亮展示</div>
|
||
<div >
|
||
<img
|
||
style="margin-top: 20px; margin-left: 55px"
|
||
class=""
|
||
src="@/assets/images/dataBoard/dlzs.png"
|
||
alt=""
|
||
/>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</template>
|
||
<script>
|
||
import echarts from "echarts4";
|
||
const echarts5 = require("echarts");
|
||
import devNumChart from "@/components/chart/devNumChart";
|
||
import airQulityChart from "@/components/chart/airQulityChart";
|
||
import { getWorkerStatisticsCountApi } from "@/assets/js/api/company/project";
|
||
import { getProjectDetail, editProjectInfo } from "@/assets/js/api/baseInfo.js";
|
||
import {
|
||
selectSecurityManageStatisticsApi,
|
||
selectQualityStatisticsApi,
|
||
getAllTowerDangerInfo,
|
||
getAllLifterDangerInfo,
|
||
getEnvironmentInfo,
|
||
getAiVideoInfo,
|
||
getAIDangerList,
|
||
} from "@/assets/js/api/dataBoard";
|
||
import {
|
||
getWeatherDataApi,
|
||
selectNewEnvironmentAlarmListApi,
|
||
getRealTimeDustNoiseDataApi,
|
||
environmentDevList,
|
||
} from "@/assets/js/api/environmentManage";
|
||
import {
|
||
getPageDetail,
|
||
eidtProjectShowConfig,
|
||
queryBySnData,
|
||
} from "@/assets/js/api/projectSummary.js";
|
||
|
||
export default {
|
||
components: { devNumChart, airQulityChart },
|
||
data() {
|
||
return {
|
||
ry_switch: 0,
|
||
COMPANY: "",
|
||
ops: {
|
||
vuescroll: {
|
||
// wheelScrollDuration: 0,
|
||
wheelDirectionReverse: true,
|
||
},
|
||
},
|
||
weatherList: [],
|
||
alarmList: [],
|
||
fileUrl: "",
|
||
imgUrl: "", //图片
|
||
showChangeImg: false, //显示隐藏更换图片
|
||
optionList: [
|
||
{
|
||
name: /* '宣传视频', */ this.$t("message.dataBoard.promotionalVideo"),
|
||
index: 1,
|
||
},
|
||
{
|
||
name: /* '效果图', */ this.$t("message.dataBoard.effectPicture"),
|
||
index: 2,
|
||
},
|
||
],
|
||
optionListIndex: 1,
|
||
ops: {
|
||
vuescroll: {
|
||
// wheelScrollDuration: 0,
|
||
wheelDirectionReverse: true,
|
||
},
|
||
},
|
||
stageList: this.$t("message.companyDiagram.CONSTRUCTIONSTAGE"),
|
||
projectData: {
|
||
constructionStage: 10,
|
||
videoUrl: "",
|
||
totalProjectDay: 0,
|
||
surplusDay: 0,
|
||
},
|
||
statisticsCount: {
|
||
currentMonthEducationPerson: 0,
|
||
projectcount: {
|
||
constructionStageCount14: 0,
|
||
constructionStageCount13: 0,
|
||
constructionStageCount15: 0,
|
||
constructionStageCount10: 0,
|
||
constructionStageCount12: 0,
|
||
constructionStageCount11: 0,
|
||
constructionStageCount1: 0,
|
||
saleAcreageTotal: 0,
|
||
constructionStageCount9: 0,
|
||
constructionStageCount8: 0,
|
||
constructionStageCount7: 0,
|
||
constructionStageCount6: 0,
|
||
constructionStageCount5: 0,
|
||
constructionStageCount4: 0,
|
||
constructionStageCount3: 0,
|
||
constructionStageCount2: 0,
|
||
projectNum: 0,
|
||
},
|
||
workercount: {
|
||
lwPersonYesterdayAdd: 0,
|
||
eduPersonTotal: 0,
|
||
jfGlPersonTotal: 0,
|
||
age18: 0,
|
||
age18to25: 0,
|
||
womanPersonTotal: 0,
|
||
lsPersonTotal: 0,
|
||
jlGlPersonTotal: 0,
|
||
age45to60: 0,
|
||
lwPersonTotal: 0,
|
||
manPersonTotal: 0,
|
||
totalPerson: 0,
|
||
age25to35: 0,
|
||
glPersonTotal: 0,
|
||
yfGlPersonTotal: 0,
|
||
avgage: 0,
|
||
age35to45: 0,
|
||
glPersonYesterdayAdd: 0,
|
||
age60: 0,
|
||
},
|
||
devcount: { ufaceDevNum: 0, videoNum: 0, environmentDevNum: 0 },
|
||
presencecount: {
|
||
jfGlPersonTotal: 0,
|
||
age18: 0,
|
||
age18to25: 0,
|
||
womanPersonTotal: 0,
|
||
lsPersonTotal: 0,
|
||
jlGlPersonTotal: 0,
|
||
age45to60: 0,
|
||
lwPersonTotal: 0,
|
||
manPersonTotal: 0,
|
||
totalPerson: 0,
|
||
age25to35: 0,
|
||
glPersonTotal: 0,
|
||
yfGlPersonTotal: 0,
|
||
avgage: 0,
|
||
age35to45: 0,
|
||
age60: 0,
|
||
chart2: Object,
|
||
option2: {},
|
||
},
|
||
},
|
||
totalDevNum: 0,
|
||
fullscreenLoading: null,
|
||
secureData: {
|
||
rectificationNum: 0,
|
||
completeNum: 0,
|
||
},
|
||
qualityData: {
|
||
rectificationNum: 0,
|
||
completeNum: 0,
|
||
},
|
||
enabledProjectV2: 2,
|
||
interval1: null,
|
||
totalTowerDev: 0, //塔吊数量
|
||
totalDangerTowerDev: 0, // 塔吊报警数量
|
||
totalLifterDev: 0, //升降机数量
|
||
totalDangerLifterDev: 0, //升降机报警数量
|
||
environmentDevNum: 0, //环境设备数量
|
||
environmentTotalAlarm: 0, // 环境设备报警数量
|
||
totalVideoDev: 0, // AI设备数量
|
||
videoAlarmNum: 0, // AI设备报警数量
|
||
srcList: [],
|
||
plantCap: {
|
||
// 环境监测空气质量数据
|
||
crc: "--",
|
||
humidity: "--",
|
||
noise: "--",
|
||
plateHumidity: "--",
|
||
plateTemperature: "--",
|
||
pm10: "--",
|
||
pm25: "--",
|
||
pressure: "--",
|
||
temperature: "--",
|
||
tsp: "--",
|
||
voltage: "--",
|
||
winddirectionName: "--",
|
||
windspeed: "--",
|
||
},
|
||
currentDevDetail: {}, // 当前项目设备详情
|
||
};
|
||
},
|
||
created() {
|
||
this.fileUrl = this.$store.state.FILEURL;
|
||
this.COMPANY = COMPANY;
|
||
},
|
||
beforeDestroy() {
|
||
clearInterval(this.interval1);
|
||
},
|
||
mounted() {
|
||
this.getQueryBySnData();
|
||
this.enabledProjectV2 = enabledProjectV2;
|
||
this.getDataDateils();
|
||
this.getWorkerStatisticsCount(1);
|
||
this.getSecureData();
|
||
this.getQualityData();
|
||
this.loadWeather();
|
||
this.getAlarmList();
|
||
this.getAlarmInfor();
|
||
this.getDevList();
|
||
|
||
setInterval(() => {
|
||
if (this.ry_switch == 0) {
|
||
this.ry_switch = 1
|
||
} else {
|
||
this.ry_switch = 0
|
||
}
|
||
}, 2000)
|
||
},
|
||
methods: {
|
||
toenvironment(){
|
||
console.log('===========')
|
||
this.$router.push({path:"/project/dataBoard/environment"})
|
||
},
|
||
toquality(){
|
||
console.log('===========')
|
||
this.$router.push({path:"/project/dataBoard/quality"})
|
||
},
|
||
toznsb(){
|
||
console.log('===========')
|
||
this.$router.push({path:"/project/dataBoard/digitalSite"})
|
||
},
|
||
tohygl(){
|
||
console.log('===========')
|
||
this.$router.push({path:"/project/dataBoard/contractManage"})
|
||
},
|
||
createdEchart2() {
|
||
let chart2 = echarts.init(this.$refs["echart2"]);
|
||
this.chart2 = chart2;
|
||
chart2.clear();
|
||
this.option2 = {
|
||
grid: {
|
||
top: "30px",
|
||
left: "80px",
|
||
right: "15px",
|
||
bottom: "30px",
|
||
},
|
||
tooltip: {
|
||
trigger: "axis",
|
||
// 取消鼠标悬浮时显示的中线
|
||
axisPointer: {
|
||
type: "none",
|
||
},
|
||
},
|
||
// ['特殊设备','人数设备','特种设备','环境设备']
|
||
xAxis: [
|
||
{
|
||
type: "value",
|
||
// '设备数'
|
||
name: this.$t("message.companyDiagram.devNum"),
|
||
show: false,
|
||
splitLine: {
|
||
lineStyle: {
|
||
color: "#fff",
|
||
type: "dashed",
|
||
},
|
||
},
|
||
|
||
axisTick: {
|
||
show: false,
|
||
},
|
||
axisLine: {
|
||
lineStyle: {
|
||
color: "#fff",
|
||
type: "solid",
|
||
},
|
||
},
|
||
axisLabel: {
|
||
color: "#fff",
|
||
},
|
||
},
|
||
{
|
||
type: "value",
|
||
},
|
||
],
|
||
yAxis: {
|
||
type: "category",
|
||
data: this.$t("message.companyDiagram.echarTitleData"),
|
||
axisLine: {
|
||
lineStyle: {
|
||
color: "#fff",
|
||
type: "dashed",
|
||
},
|
||
show: false,
|
||
},
|
||
axisTick: {
|
||
show: false,
|
||
},
|
||
axisLabel: {
|
||
color: "#fff",
|
||
fontSize: 12, //字体大小
|
||
},
|
||
},
|
||
series: [
|
||
{
|
||
itemStyle: {
|
||
normal: {
|
||
color: function (params) {
|
||
var colorList = ["#4378d8", "#a65d23", "#913211", "#199d83"];
|
||
return colorList[params.dataIndex];
|
||
},
|
||
},
|
||
},
|
||
name: this.$t("message.companyDiagram.devNum"),
|
||
data: [
|
||
this.statisticsCount.devcount.videoNum,
|
||
this.statisticsCount.devcount.ufaceDevNum,
|
||
this.statisticsCount.devcount.lifterDevNum +
|
||
this.statisticsCount.devcount.towerDevNum,
|
||
this.statisticsCount.devcount.environmentDevNum,
|
||
],
|
||
type: "bar",
|
||
barWidth: 20, //柱图宽度
|
||
},
|
||
],
|
||
};
|
||
chart2.setOption(this.option2);
|
||
},
|
||
getAlarmList() {
|
||
let data = {
|
||
projectSn: this.$store.state.projectSn,
|
||
};
|
||
// selectNewEnvironmentAlarmListApi(data).then((res) => {
|
||
// if (res.code == 200) {
|
||
// this.alarmList = res.result;
|
||
// console.log(res.result);
|
||
// }
|
||
// });
|
||
},
|
||
loadWeather() {
|
||
var _this = this;
|
||
getWeatherDataApi({ cityid: "" }).then((res) => {
|
||
console.log(res);
|
||
var json = JSON.parse(res.result);
|
||
var list = json.data;
|
||
console.log(json);
|
||
//
|
||
list.forEach((element, index) => {
|
||
// element.week=getWeek(element.date)
|
||
// element.date = element.date.substring(5,element.date.length)
|
||
element.url = require("@/assets/images/weather/" +
|
||
element.wea_img +
|
||
".png");
|
||
this.weatherList.push(element);
|
||
});
|
||
});
|
||
},
|
||
//获取环境设备列表--环境监测实时数据--下拉
|
||
getDevList() {
|
||
console.log(22222222222222);
|
||
environmentDevList({ projectSn: this.$store.state.projectSn }).then(
|
||
(result) => {
|
||
// console.log('列表', result)
|
||
console.log(result);
|
||
if (result.result.length > 0) {
|
||
this.currentDevDetail = result.result[0];
|
||
this.getRealTimeDustNoiseData();
|
||
}
|
||
}
|
||
);
|
||
},
|
||
// 获取环境监测空气质量
|
||
getRealTimeDustNoiseData() {
|
||
let data = {
|
||
deviceId: this.currentDevDetail.deviceId,
|
||
projectSn: this.$store.state.projectSn,
|
||
};
|
||
console.log(data);
|
||
getRealTimeDustNoiseDataApi(data).then((res) => {
|
||
console.log(res);
|
||
if (res.code == 200) {
|
||
console.log(res.result);
|
||
if (res.result) {
|
||
this.plantCap = res.result;
|
||
} else {
|
||
this.plantCap = {
|
||
crc: "--",
|
||
humidity: "--",
|
||
noise: "--",
|
||
plateHumidity: "--",
|
||
plateTemperature: "--",
|
||
pm10: "--",
|
||
pm25: "--",
|
||
pressure: "--",
|
||
temperature: "--",
|
||
tsp: "--",
|
||
voltage: "--",
|
||
winddirectionName: "--",
|
||
windspeed: "--",
|
||
};
|
||
}
|
||
// this.createCenterChart();
|
||
}
|
||
});
|
||
},
|
||
// 获取设备报警数据
|
||
getAlarmInfor() {
|
||
let data = {
|
||
sn: this.$store.state.projectSn,
|
||
};
|
||
// 获取塔吊报警数据
|
||
getAllTowerDangerInfo(data).then((res) => {
|
||
if (res.code === 200) {
|
||
let { result } = res;
|
||
this.totalTowerDev = result.devCount.devNum;
|
||
this.totalDangerTowerDev = result.towerAlarmCount;
|
||
}
|
||
});
|
||
// getAiVideoInfo
|
||
// 获取升降机报警数据
|
||
getAllLifterDangerInfo(data).then((res) => {
|
||
if (res.code === 200) {
|
||
let { result } = res;
|
||
this.totalLifterDev = result.devCount.devNum;
|
||
this.totalDangerLiferDev = result.lifterAlarmCount;
|
||
}
|
||
});
|
||
// 获取环境监测报警数据
|
||
getEnvironmentInfo(data).then((res) => {
|
||
if (res.code === 200) {
|
||
let { result } = res;
|
||
this.environmentDevNum = result.devTotal.devNum;
|
||
this.environmentTotalAlarm = result.alarmTotal.totalAlarm;
|
||
}
|
||
});
|
||
// 获取AI设备报警数据
|
||
getAiVideoInfo(data).then((res) => {
|
||
console.log(res);
|
||
if (res.code === 200) {
|
||
let { result } = res;
|
||
this.totalVideoDev = result.totalVideoDev;
|
||
this.videoAlarmNum = result.alarmNum;
|
||
}
|
||
});
|
||
// 获取报警列表数据
|
||
getAIDangerList(data).then((res) => {
|
||
if (res.code === 200) {
|
||
let { result } = res;
|
||
let type = [
|
||
"烟感",
|
||
"明火",
|
||
"人员倒地",
|
||
"未戴安全帽",
|
||
"区域入侵",
|
||
"越界入侵",
|
||
"人员聚集衣",
|
||
"反光衣",
|
||
"裸土覆盖",
|
||
];
|
||
this.alarmList = result.slice(0, 3).map((x) => {
|
||
return {
|
||
createTime: x.createTime,
|
||
hardwareName: x.hardwareName,
|
||
id: x.id,
|
||
imageUrl: x.imageUrl,
|
||
location: x.location,
|
||
projectName: x.projectName,
|
||
alarmType: type[x.alarmType - 1],
|
||
};
|
||
});
|
||
result.slice(0, 3).forEach((x) => {
|
||
this.srcList.push(`${this.$store.state.FILEURL}${x.imageUrl}`);
|
||
});
|
||
console.log(this.alarmList);
|
||
console.log(this.srcList);
|
||
}
|
||
});
|
||
},
|
||
|
||
//获取安全管理数据
|
||
getSecureData() {
|
||
let data = {
|
||
projectSn: this.$store.state.projectSn,
|
||
};
|
||
selectSecurityManageStatisticsApi(data).then((res) => {
|
||
let total = res.result.total;
|
||
this.secureData.rectificationNum = total.rectificationNum;
|
||
this.secureData.completeNum = total.totalNum - total.rectificationNum;
|
||
this.createPieChart(
|
||
[
|
||
{ value: total.totalNum - total.rectificationNum, name: "" },
|
||
{ value: total.rectificationNum, name: "" },
|
||
],
|
||
this.$refs.safeChart,
|
||
["rgba(120, 111, 240, 1)", "rgba(254, 108, 127, 1)"],
|
||
this.$t("message.companyDiagram.safeQuestion")
|
||
// "安全问题数"
|
||
);
|
||
});
|
||
},
|
||
//获取质量管理数据
|
||
getQualityData() {
|
||
let data = {
|
||
projectSn: this.$store.state.projectSn,
|
||
};
|
||
selectQualityStatisticsApi(data).then((res) => {
|
||
let total = res.result.total;
|
||
this.qualityData.rectificationNum = total.rectificationNum;
|
||
this.qualityData.completeNum = total.totalNum - total.rectificationNum;
|
||
if (COMPANY != "longguang") {
|
||
this.createPieChart(
|
||
[
|
||
{ value: total.totalNum - total.rectificationNum, name: "" },
|
||
{ value: total.rectificationNum, name: "" },
|
||
],
|
||
this.$refs.qulityChart,
|
||
["rgba(81, 129, 246, 1)", "rgba(92, 226, 246, 1)"],
|
||
this.$t("message.companyDiagram.qualityQuestion")
|
||
// "质量问题数"
|
||
);
|
||
}
|
||
});
|
||
},
|
||
//获取项目详情
|
||
getDataDateils() {
|
||
let data = {
|
||
projectSn: this.$store.state.projectSn,
|
||
};
|
||
getProjectDetail(data).then((res) => {
|
||
// console.log(res);
|
||
if (res.code == 200) {
|
||
this.projectData = res.result;
|
||
console.log(this.projectData);
|
||
// console.log('this.projectData.constructionStage-4*230',this.projectData.constructionStage-4*230)
|
||
if (parseInt(this.projectData.constructionStage) > 4) {
|
||
this.$refs["stageScroll"].scrollTo(
|
||
{
|
||
x: (this.projectData.constructionStage - 4) * 230,
|
||
// x:'50%'
|
||
},
|
||
500
|
||
);
|
||
}
|
||
}
|
||
});
|
||
},
|
||
//统计企业下项目各人员统计
|
||
getWorkerStatisticsCount(type) {
|
||
getWorkerStatisticsCountApi({ sn: this.$store.state.projectSn }).then(
|
||
(res) => {
|
||
console.log(res);
|
||
this.statisticsCount = res.result;
|
||
this.totalDevNum =
|
||
this.statisticsCount.devcount.ufaceDevNum +
|
||
this.statisticsCount.devcount.videoNum +
|
||
this.statisticsCount.devcount.environmentDevNum +
|
||
this.statisticsCount.devcount.towerDevNum +
|
||
this.statisticsCount.devcount.lifterDevNum;
|
||
if (type == 1) {
|
||
this.createdEchart2();
|
||
}
|
||
clearInterval(this.interval1);
|
||
this.interval1 = setTimeout(() => {
|
||
this.getWorkerStatisticsCount();
|
||
}, 5000);
|
||
}
|
||
);
|
||
},
|
||
createPieChart(data, div, color, title) {
|
||
let that = this;
|
||
let monitor = echarts.init(div);
|
||
// monitor.clear();
|
||
var option = {
|
||
color: color ? color : ["#5181F6", "#61D2B9", "#F67F51", "#7851F6"],
|
||
title: {
|
||
show: true,
|
||
text: data[0].value + data[1].value,
|
||
x: "48%",
|
||
y: "36%",
|
||
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,
|
||
},
|
||
// tooltip: {
|
||
// // data: ['在线', '离线'],
|
||
// trigger: "item",
|
||
// formatter: "{a} <br/>{b}: {c} ({d}%)",
|
||
// },
|
||
series: [
|
||
{
|
||
name: "",
|
||
type: "pie",
|
||
radius: ["50%", "70%"],
|
||
avoidLabelOverlap: false,
|
||
label: {
|
||
show: false,
|
||
position: "center",
|
||
},
|
||
labelLine: {
|
||
show: false,
|
||
},
|
||
data: data,
|
||
},
|
||
],
|
||
};
|
||
// if(color){
|
||
// option.series[0].radius=["75%", "85%"]
|
||
// option.title.x="45%"
|
||
// option.legend.show=false
|
||
// }
|
||
monitor.setOption(option);
|
||
},
|
||
// 文件上传 之前
|
||
handleBeforeUpload(file, type) {
|
||
console.log(file);
|
||
let fileType = file.type.split("/")[0];
|
||
if (fileType == "video" || fileType == "image") {
|
||
this.fullscreenLoading = this.$loading({
|
||
lock: true,
|
||
text: this.$t("message.companyDiagram.uploadHint"), // "上传中，请稍等。。。"
|
||
spinner: "el-icon-loading",
|
||
background: "rgba(0, 0, 0, 0.7)",
|
||
});
|
||
return true;
|
||
} else {
|
||
this.$message.error(this.$t("message.companyDiagram.uploadHint2")); //"请选择正确的文件"
|
||
return false;
|
||
}
|
||
},
|
||
//上传失败
|
||
handleError(file, type) {
|
||
this.fullscreenLoading.close();
|
||
this.$message.error(this.$t("message.companyDiagram.uploadError")); //"上传失败，请重试"
|
||
},
|
||
//上传成功
|
||
handleSuccess(file, type) {
|
||
if (file.code == 200 || file.status == "SUCCESS") {
|
||
console.log(file);
|
||
var url = file.data[0].imageUrl;
|
||
this.saveOrDeleteVideo(url);
|
||
}
|
||
this.fullscreenLoading.close();
|
||
},
|
||
|
||
handleSuccessTwo(file, type) {
|
||
if (file.code == 200 || file.status == "SUCCESS") {
|
||
console.log(file);
|
||
var url = file.data[0].imageUrl;
|
||
this.imgUrl = url;
|
||
this.saveEffectData(url);
|
||
}
|
||
this.fullscreenLoading.close();
|
||
},
|
||
//效果图 保存
|
||
saveEffectData(url) {
|
||
// let configValue = JSON.stringify(url);
|
||
let data = {
|
||
projectSn: this.$store.state.projectSn,
|
||
showType: 3,
|
||
showTitle: this.$t("message.companyDiagram.resultImg"), //'效果图'
|
||
configValue: url,
|
||
};
|
||
eidtProjectShowConfig(data).then((res) => {
|
||
if (res.code == 200) {
|
||
this.getQueryBySnData();
|
||
}
|
||
});
|
||
},
|
||
getQueryBySnData() {
|
||
queryBySnData({
|
||
projectSn: this.$store.state.projectSn,
|
||
showType: 3,
|
||
}).then((res) => {
|
||
console.log(this.fileUrl + this.imgUrl);
|
||
this.imgUrl = res.result.configValue;
|
||
});
|
||
},
|
||
//保存或删除宣传视频
|
||
saveOrDeleteVideo(url) {
|
||
editProjectInfo({
|
||
projectId: this.projectData.projectId,
|
||
videoUrl: url,
|
||
}).then((res) => {
|
||
this.$message.success(this.$t("message.companyDiagram.uploadSuccess")); //"上传成功"
|
||
this.projectData.videoUrl = url;
|
||
});
|
||
},
|
||
},
|
||
};
|
||
</script>
|
||
<style lang="less" scoped>
|
||
.weatherItem {
|
||
/*float: left;*/
|
||
display: inline-block;
|
||
width: 101px;
|
||
text-align: center;
|
||
padding: 13px 5px;
|
||
margin-top: -5px;
|
||
// height: calc(100% - 13px);
|
||
height: 165px;
|
||
margin-left: 12px;
|
||
background: linear-gradient(rgba(21, 25, 33, 0.06), rgba(6, 248, 179, 0.06));
|
||
&:nth-child(2n) {
|
||
background: linear-gradient(
|
||
rgba(6, 248, 179, 0.06),
|
||
rgba(21, 25, 33, 0.06)
|
||
);
|
||
}
|
||
&:first-child {
|
||
background: linear-gradient(
|
||
rgba(21, 25, 33, 0.12),
|
||
rgba(6, 248, 179, 0.12)
|
||
);
|
||
}
|
||
.imgBox {
|
||
height: 36px;
|
||
display: flex;
|
||
align-items: center;
|
||
// margin: 15px 0;
|
||
justify-content: center;
|
||
}
|
||
.weather {
|
||
font-size: 15px;
|
||
color: #ffffff;
|
||
margin-bottom: 3px;
|
||
}
|
||
// .temp{
|
||
// margin-bottom: 16px;
|
||
// }
|
||
}
|
||
.weatherItem {
|
||
background: linear-gradient(rgba(5, 11, 59, 0.1), rgba(40, 109, 221, 0.1));
|
||
&:nth-child(2n) {
|
||
background: linear-gradient(rgba(40, 109, 221, 0.1), rgba(5, 11, 59, 0.1));
|
||
}
|
||
&:first-child {
|
||
background: linear-gradient(rgba(5, 11, 59, 0.3), rgba(36, 100, 206, 0.3));
|
||
}
|
||
}
|
||
.optionListBox {
|
||
display: flex;
|
||
justify-content: center;
|
||
.optionList_item {
|
||
margin-right: 30px;
|
||
box-sizing: border-box;
|
||
text-align: center;
|
||
padding-bottom: 5px;
|
||
cursor: pointer;
|
||
}
|
||
.selectOptionList_item {
|
||
border-bottom: 3px #2566d1 solid;
|
||
}
|
||
.selectOptionList_item2 {
|
||
border-bottom: 3px #27a3e2 solid;
|
||
}
|
||
}
|
||
.imgBox {
|
||
}
|
||
.listItem {
|
||
color: white;
|
||
font-size: 18px;
|
||
.label {
|
||
opacity: 0.8;
|
||
}
|
||
}
|
||
.changeVideoBtn {
|
||
border: 1px solid rgba(255, 255, 255, 0.5);
|
||
padding: 3px 5px;
|
||
font-size: 14px;
|
||
cursor: pointer;
|
||
position: absolute;
|
||
left: 50%;
|
||
top: 50%;
|
||
display: none;
|
||
transform: translate(-50%, -50%);
|
||
}
|
||
.videos:hover + .changeVideoBox .changeVideoBtn,
|
||
.changeVideoBox:hover .changeVideoBtn {
|
||
display: block;
|
||
}
|
||
.blockTitle4 {
|
||
position: absolute !important;
|
||
top: -10px !important;
|
||
left: 50%;
|
||
transform: translateX(-50%);
|
||
}
|
||
// 蓝色
|
||
.dataBoardPage_blue {
|
||
.dataBoardContent {
|
||
.bottom {
|
||
.blockTitle {
|
||
top: 0px;
|
||
}
|
||
}
|
||
.splitLine {
|
||
opacity: 0;
|
||
margin: 15px 0 15px;
|
||
}
|
||
.timeBox {
|
||
margin-top: 20px;
|
||
}
|
||
}
|
||
.bottomInner {
|
||
padding-left: 20px;
|
||
&::before {
|
||
content: '';
|
||
position: absolute;
|
||
top: 38px;
|
||
left: 0;
|
||
width: 100%;
|
||
height: calc(100% - 48px);
|
||
background-color: rgba(38, 104, 209, 0.1);
|
||
}
|
||
}
|
||
}
|
||
// 湛蓝
|
||
.dataBoardPage_blue2 {
|
||
.dataBoardContent {
|
||
.bottom {
|
||
.blockTitle {
|
||
top: 0px;
|
||
}
|
||
}
|
||
.splitLine {
|
||
opacity: 0;
|
||
margin: 15px 0 15px;
|
||
}
|
||
.timeBox {
|
||
margin-top: 20px;
|
||
}
|
||
}
|
||
.bottomInner {
|
||
padding-left: 20px;
|
||
&::before {
|
||
content: '';
|
||
position: absolute;
|
||
top: 38px;
|
||
left: 0;
|
||
width: 100%;
|
||
height: calc(100% - 48px);
|
||
background-color: rgba(2, 99, 152, 0.2);
|
||
}
|
||
}
|
||
}
|
||
.managePeople {
|
||
float: left;
|
||
position: relative;
|
||
width: 100%;
|
||
height: 60%;
|
||
.managePeopleTitle {
|
||
&::before {
|
||
content: '';
|
||
background-color: #6ce9f0;
|
||
width: 5px;
|
||
height: 5px;
|
||
position: absolute;
|
||
top: 5px;
|
||
border-radius: 50%;
|
||
display: block;
|
||
}
|
||
}
|
||
.managePeopleTitle > p {
|
||
margin-left: 10px;
|
||
}
|
||
.management {
|
||
display: flex;
|
||
justify-content: space-between;
|
||
margin-top: 20px;
|
||
.management_item {
|
||
box-sizing: border-box;
|
||
position: relative;
|
||
width: 120px;
|
||
text-align: center;
|
||
.item_content {
|
||
position: absolute;
|
||
right: -5px;
|
||
top: 0px;
|
||
}
|
||
.itemImgBox {
|
||
img {
|
||
width: 90px;
|
||
height: 90px;
|
||
}
|
||
}
|
||
}
|
||
}
|
||
}
|
||
.airQulityChart {
|
||
position: absolute !important;
|
||
top: -5%;
|
||
left: -28%;
|
||
}
|
||
.weatherBox {
|
||
position: absolute;
|
||
left: 167px;
|
||
height: 75%;
|
||
width: 80%;
|
||
top: -5px;
|
||
}
|
||
.attendance-cards2 {
|
||
width: 90%;
|
||
height: 80%;
|
||
display: flex;
|
||
justify-content: space-between;
|
||
align-items: center;
|
||
// align-content: space-around;
|
||
flex-wrap: wrap;
|
||
position: absolute;
|
||
left: 10%;
|
||
top: 8%;
|
||
// top: 10%;
|
||
.attendance-cards-item {
|
||
width: 50%;
|
||
height: 40%;
|
||
box-sizing: border-box;
|
||
display: flex;
|
||
// flex-direction: column;
|
||
|
||
align-items: center;
|
||
// text-align: center;
|
||
// :nth-child(1) {
|
||
// display: block;
|
||
// color: white;
|
||
// font-size: 14px;
|
||
// font-family: PingFangSC-Light;
|
||
// }
|
||
// :nth-child(2) {
|
||
// display: block;
|
||
// margin-top: 5px;
|
||
// color: rgba(255, 255, 255, 0.8);
|
||
// font-size: 11px;
|
||
// }
|
||
.cards-item-left {
|
||
width: 65px;
|
||
text-align: center;
|
||
p {
|
||
text-align: center;
|
||
color: rgba(255, 255, 254, 100);
|
||
font-size: 13px;
|
||
margin-top: 5px;
|
||
}
|
||
}
|
||
.cards-item-right {
|
||
margin-left: 5px;
|
||
p {
|
||
line-height: 22px;
|
||
color: rgba(255, 255, 254, 0.8);
|
||
font-size: 15px;
|
||
margin-left: 10px;
|
||
}
|
||
.p3 {
|
||
color: #d94916;
|
||
font-size: 20px;
|
||
}
|
||
}
|
||
}
|
||
}
|
||
.list_item {
|
||
width: 100%;
|
||
// height: 14%;
|
||
display: flex;
|
||
font-size: 12px;
|
||
margin-top: 3%;
|
||
color: rgba(255, 255, 255, 0.8);
|
||
// .img{
|
||
// width: 100px;
|
||
// height: 100px;
|
||
// margin-right: 17px;
|
||
// }
|
||
.title {
|
||
width: 240px;
|
||
// height: 18%;
|
||
overflow: hidden;
|
||
text-overflow: ellipsis;
|
||
white-space: nowrap;
|
||
font-size: 13px;
|
||
color: rgba(255, 255, 255, 0.8);
|
||
margin: 5px 0;
|
||
}
|
||
.title,
|
||
.type,
|
||
.address,
|
||
.shebei,
|
||
.date {
|
||
margin: 4px 0;
|
||
}
|
||
:hover .title {
|
||
overflow: hidden;
|
||
text-overflow: ellipsis;
|
||
white-space: nowrap;
|
||
}
|
||
.img_box {
|
||
width: 96px;
|
||
margin-right: 10px;
|
||
}
|
||
}
|
||
.airQuality {
|
||
position: absolute;
|
||
top: 80%;
|
||
left: -1px;
|
||
display: flex;
|
||
width: 100%;
|
||
justify-content: space-around;
|
||
.airQuality-item {
|
||
display: flex;
|
||
font-size: 14px;
|
||
img {
|
||
width: 30px;
|
||
height: 30px;
|
||
margin-right: 9px;
|
||
margin-top: 2px;
|
||
}
|
||
}
|
||
}
|
||
</style>
|