1080 lines
34 KiB
Vue
1080 lines
34 KiB
Vue
<template>
|
||
<div class="fullHeight dataBoardIndex">
|
||
<div class="fullHeight aside">
|
||
<div class="blockBox">
|
||
<!-- 项目信息 -->
|
||
<ProjectInfo :projectData="projectData" />
|
||
</div>
|
||
<div class="blockBox">
|
||
<!-- 人员概况 -->
|
||
<PersonOverview :statisticsCount="statisticsCount" />
|
||
</div>
|
||
<div class="blockBox">
|
||
<!-- 智能设备 -->
|
||
<smartDevices :totalCount="totalDevNum" :devices="deviceData">
|
||
<div v-if="COMPANY == 'longguang'" style="width: 100%; height: 100%" class="echart2" ref="echart2"></div>
|
||
</smartDevices>
|
||
</div>
|
||
</div>
|
||
<div class="center fullHeight">
|
||
<div class="top">
|
||
<!-- <div class="blockTitle blockTitle3">宣传视频</div>-->
|
||
<div class="optionListBox">
|
||
<div
|
||
class="optionList_item"
|
||
@click="optionListIndex = item.index"
|
||
:class="{
|
||
selectOptionList_item: item.index == optionListIndex,
|
||
selectOptionList_item2: item.index == optionListIndex && enabledProjectV2 == 4
|
||
}"
|
||
v-for="(item, index) in $t('message.companyDiagram.optionList')"
|
||
:key="index"
|
||
>
|
||
{{ item.name }}
|
||
</div>
|
||
</div>
|
||
<video
|
||
v-if="projectData.videoUrl && optionListIndex == 1"
|
||
:src="$store.state.FILEURL + projectData.videoUrl"
|
||
class="topInner videos"
|
||
autoplay
|
||
controls
|
||
loop
|
||
></video>
|
||
<div @mouseenter="showChangeImg = true" @mouseleave="showChangeImg = false" v-if="optionListIndex == 2" class="imgBox">
|
||
<el-upload
|
||
|
||
style="position: absolute; left: 420px; top: 230px"
|
||
:action="$store.state.UPLOADURL"
|
||
:on-success="file => handleSuccessTwo(file, 1)"
|
||
:on-error="file => handleError(file, 1)"
|
||
:beforeUpload="file => handleBeforeUpload(file, 1)"
|
||
name="files"
|
||
:show-file-list="false"
|
||
>
|
||
<!-- 更换图片 -->
|
||
<span v-if="showChangeImg" style="border: 1px solid #ffffff; padding: 5px">{{ $t('message.companyDiagram.changeImg') }}</span>
|
||
</el-upload>
|
||
<img
|
||
style="
|
||
width: 686px;
|
||
margin-left: 113px;
|
||
margin-top: 16px;
|
||
height: 345px;
|
||
"
|
||
:src="fileUrl + imgUrl"
|
||
alt=""
|
||
/>
|
||
<!-- <img style="width: 686px;;margin-left: 113px;margin-top: 16px;height: 430px" src="@/assets/images/aa5cd03a486a3faaeb9cf4b8d06405e.png" alt="">-->
|
||
</div>
|
||
<div class="placeholderBox placeholderBox2" v-if="projectData.videoUrl == ''">
|
||
<img src="@/assets/images/noData3.png" alt="" srcset="" />
|
||
<p>
|
||
{{ $t('message.videoManage.empty') }},
|
||
<el-upload
|
||
style="display: inline-block"
|
||
class="upload-demo"
|
||
:action="$store.state.UPLOADURL"
|
||
:on-success="file => handleSuccess(file, 1)"
|
||
:on-error="file => handleError(file, 1)"
|
||
:beforeUpload="file => handleBeforeUpload(file, 1)"
|
||
name="files"
|
||
:show-file-list="false"
|
||
>
|
||
<!-- 点我上传 -->
|
||
<span>{{ $t('message.companyDiagram.uploadImg') }}</span>
|
||
</el-upload>
|
||
</p>
|
||
</div>
|
||
<el-upload
|
||
v-if="projectData.videoUrl && optionListIndex == 1"
|
||
class="changeVideoBox"
|
||
:action="$store.state.UPLOADURL"
|
||
:on-success="file => handleSuccess(file, 1)"
|
||
:on-error="file => handleError(file, 1)"
|
||
:beforeUpload="file => handleBeforeUpload(file, 1)"
|
||
name="files"
|
||
:show-file-list="false"
|
||
>
|
||
<!-- 更换视频 -->
|
||
<span class="changeVideoBtn">{{ $t('message.companyDiagram.changeVideo') }}</span>
|
||
</el-upload>
|
||
<!-- <video src="http://183.95.84.34:18081/itbgp/file/loginBgVideo.mp4" class="topInner" controls loop></video> -->
|
||
</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"><i></i>{{ $t('message.companyDiagram.countDown') }}</div>
|
||
<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 class="splitLine">
|
||
<img src="@/assets/images/carOverview/line4.png" alt="" width="100%" />
|
||
</div>
|
||
<div class="stageContent">
|
||
<!-- 里程碑 -->
|
||
<div class="blockTitle blockTitle2"><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="small" 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 v-if="COMPANY != 'longguang' && enabledProjectV2 != 3" class="blockTitle">
|
||
{{ $t('message.companyDiagram.safeManage') }}
|
||
</div>
|
||
<div v-if="COMPANY != 'longguang' && enabledProjectV2 != 3" class="blockContent">
|
||
<safeManage></safeManage>
|
||
<!-- <div class="safeChart" ref="safeChart"></div> -->
|
||
</div>
|
||
</div>
|
||
<!-- </div>-->
|
||
<div class="blockBox">
|
||
<!-- 质量管理 -->
|
||
<div v-if="COMPANY != 'longguang' && enabledProjectV2 != 3" class="blockTitle">
|
||
{{ $t('message.companyDiagram.qualityManage') }}
|
||
</div>
|
||
<!-- 设备报警 -->
|
||
<div v-else class="blockTitle">
|
||
{{ $t('message.companyDiagram.devAlarm') }}
|
||
</div>
|
||
<div class="blockContent">
|
||
<!-- 质量管理 -->
|
||
<!-- <div
|
||
v-if="COMPANY != 'longguang' && enabledProjectV2 != 3"
|
||
class="qulityChart"
|
||
ref="qulityChart"
|
||
></div> -->
|
||
<div v-if="COMPANY != 'longguang' && enabledProjectV2 != 3" class="descBox fullHeight">
|
||
<qualityManage></qualityManage>
|
||
<!-- 此处剪切了一部分 -->
|
||
</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 class="blockBox">
|
||
<!-- 环境监测 -->
|
||
<div v-if="COMPANY != 'longguang' && enabledProjectV2 != 3" class="blockTitle">
|
||
{{ $t('message.companyDiagram.environmentMonitor') }}
|
||
</div>
|
||
<!-- 报警列表 -->
|
||
<div v-else class="blockTitle">
|
||
{{ $t('message.companyDiagram.alarmRecord') }}
|
||
</div>
|
||
<div v-if="COMPANY != 'longguang' && enabledProjectV2 != 3" class="blockContent">
|
||
<!-- 环境监测 -->
|
||
<environmentWatch :show="true" :size="small"></environmentWatch>
|
||
</div>
|
||
<div v-else class="blockContent alarmBlockContent">
|
||
<vue-scroll>
|
||
<!-- 报警列表内容 -->
|
||
<div class="list_item" v-for="item in alarmList" :key="item.id" v-if="alarmList.length">
|
||
<!-- <img :src="$store.state.FILEURL+item.imageUrl" class="img" > --><!-- @click="bigImg($store.state.FILEURL+item.imageUrl) -->
|
||
|
||
<el-image class="img_box" :src="$store.state.FILEURL + item.imageUrl" :preview-src-list="srcList"></el-image>
|
||
|
||
<!-- <big-img :imgSrc="$store.state.FILEURL+item.imageUrl" v-show="img" :img.sync='img'></big-img> -->
|
||
<div class="box">
|
||
<el-tooltip
|
||
effect="dark"
|
||
:content="item.projectName"
|
||
placement="left-start"
|
||
:disabled="item.projectName.length >= 18 ? false : true"
|
||
>
|
||
<div class="title">{{ item.projectName }}</div>
|
||
</el-tooltip>
|
||
<div class="type">
|
||
预警类型：<span>{{ item.alarmType }}</span>
|
||
</div>
|
||
<div class="address">
|
||
抓拍点：<span>{{ item.location }}</span>
|
||
</div>
|
||
<div class="shebei">
|
||
抓拍设备：<span>{{ item.hardwareName }}</span>
|
||
</div>
|
||
<div class="date">
|
||
预警时间时间：<span>{{ item.createTime }}</span>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
<div class="placeholderBox placeholderBox2" v-if="alarmList.length == 0">
|
||
<img src="@/assets/images/noData3.png" alt="" srcset="" />
|
||
<!-- 暂无数据 -->
|
||
<p>{{ $t('message.companyDiagram.noData') }}</p>
|
||
</div>
|
||
</vue-scroll>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</template>
|
||
<script>
|
||
import echarts from 'echarts4'
|
||
const echarts5 = require('echarts')
|
||
import safeManage from './homePage/safeManage'
|
||
import qualityManage from './homePage/qualityManage'
|
||
import airQulity from './components/airQulity'
|
||
import smartDevices from './homePage/smartDevices'
|
||
import environmentWatch from './homePage/environmentWatch.vue'
|
||
import airQulityChart from '@/components/chart/airQulityChart'
|
||
import { getWorkerStatisticsCountApi } from '@/assets/js/api/company/project'
|
||
import { getProjectDetail, editProjectInfo } from '@/assets/js/api/baseInfo.js'
|
||
import {
|
||
getAllTowerDangerInfo,
|
||
getAllLifterDangerInfo,
|
||
getEnvironmentInfo,
|
||
getAiVideoInfo,
|
||
getAIDangerList
|
||
} from '@/assets/js/api/dataBoard'
|
||
import {
|
||
getWeatherDataApi,
|
||
selectNewEnvironmentAlarmListApi,
|
||
getRealTimeDustNoiseDataApi,
|
||
environmentDevList
|
||
} from '@/assets/js/api/environmentManage'
|
||
import { eidtProjectShowConfig, queryBySnData } from '@/assets/js/api/projectSummary.js'
|
||
import ProjectInfo from './homePage/projectInfo'
|
||
import PersonOverview from './homePage/personOverview'
|
||
|
||
export default {
|
||
components: {
|
||
airQulityChart,
|
||
ProjectInfo,
|
||
PersonOverview,
|
||
safeManage,
|
||
qualityManage,
|
||
airQulity,
|
||
smartDevices,
|
||
environmentWatch
|
||
},
|
||
data() {
|
||
return {
|
||
deviceData: [],
|
||
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,
|
||
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
|
||
this.getDataDateils()
|
||
},
|
||
beforeDestroy() {
|
||
clearInterval(this.interval1)
|
||
},
|
||
mounted() {
|
||
this.getQueryBySnData()
|
||
this.enabledProjectV2 = enabledProjectV2
|
||
|
||
this.getWorkerStatisticsCount(1)
|
||
this.loadWeather()
|
||
this.getAlarmList()
|
||
this.getAlarmInfor()
|
||
this.getDevList()
|
||
},
|
||
methods: {
|
||
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)
|
||
}
|
||
})
|
||
},
|
||
//获取项目详情
|
||
getDataDateils() {
|
||
let data = {
|
||
projectSn: this.$store.state.projectSn
|
||
}
|
||
console.log('当前的参数', data)
|
||
getProjectDetail(data).then(res => {
|
||
if (res.code == 200) {
|
||
this.projectData = res.result
|
||
console.log('projectData', this.projectData)
|
||
if (parseInt(this.projectData.constructionStage) > 4) {
|
||
this.$refs['stageScroll'].scrollTo({ x: (this.projectData.constructionStage - 4) * 230 }, 500)
|
||
}
|
||
}
|
||
})
|
||
},
|
||
//统计企业下项目各人员统计
|
||
getWorkerStatisticsCount(type) {
|
||
getWorkerStatisticsCountApi({ sn: this.$store.state.projectSn }).then(res => {
|
||
console.log(res)
|
||
this.statisticsCount = res.result
|
||
console.log('----------------', this.statisticsCount)
|
||
this.totalDevNum =
|
||
this.statisticsCount.devcount.ufaceDevNum +
|
||
this.statisticsCount.devcount.videoNum +
|
||
this.statisticsCount.devcount.environmentDevNum +
|
||
this.statisticsCount.devcount.towerDevNum +
|
||
this.statisticsCount.devcount.lifterDevNum
|
||
const device = this.statisticsCount.devcount
|
||
this.deviceData = [
|
||
{ label: 'projectSummary.ufaceDevNum', value: device.ufaceDevNum },
|
||
{
|
||
label: 'projectSummary.environmentDevNum',
|
||
value: device.environmentDevNum
|
||
},
|
||
{ label: 'companyDiagram.videoDevNum', value: device.videoNum },
|
||
{ label: 'companyDiagram.towerDevNum', value: device.towerDevNum }
|
||
]
|
||
if (type == 1) {
|
||
this.createdEchart2()
|
||
}
|
||
clearInterval(this.interval1)
|
||
this.interval1 = setTimeout(() => {
|
||
this.getWorkerStatisticsCount()
|
||
}, 5000)
|
||
})
|
||
},
|
||
// 文件上传 之前
|
||
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) {
|
||
console.log('上传成功了吗', file)
|
||
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({
|
||
projectSn: this.$store.state.projectSn,
|
||
videoUrl: url
|
||
}).then(res => {
|
||
this.$message.success(this.$t('message.companyDiagram.uploadSuccess')) //"上传成功"
|
||
this.projectData.videoUrl = url
|
||
})
|
||
}
|
||
}
|
||
}
|
||
</script>
|
||
<style lang="less" scoped>
|
||
.stageContent {
|
||
height: 220px;
|
||
}
|
||
.weatherItem {
|
||
display: inline-block;
|
||
width: 101px;
|
||
text-align: center;
|
||
padding: 13px 5px;
|
||
margin-top: -5px;
|
||
height: 165px;
|
||
margin-left: 12px;
|
||
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));
|
||
}
|
||
&: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;
|
||
justify-content: center;
|
||
}
|
||
.weather {
|
||
font-size: 15px;
|
||
color: #ffffff;
|
||
margin-bottom: 3px;
|
||
}
|
||
}
|
||
.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;
|
||
}
|
||
}
|
||
.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%);
|
||
}
|
||
|
||
.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;
|
||
flex-wrap: wrap;
|
||
position: absolute;
|
||
left: 10%;
|
||
top: 8%;
|
||
.attendance-cards-item {
|
||
width: 50%;
|
||
height: 40%;
|
||
box-sizing: border-box;
|
||
display: flex;
|
||
align-items: center;
|
||
.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%;
|
||
display: flex;
|
||
font-size: 12px;
|
||
margin-top: 3%;
|
||
color: rgba(255, 255, 255, 0.8);
|
||
.title {
|
||
width: 240px;
|
||
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>
|