YZProjectCloud/yanzhu-bigscreen/src/views/projectDetail.vue

1622 lines
58 KiB
Vue
Raw Blame History

This file contains ambiguous Unicode characters!

This file contains ambiguous Unicode characters that may be confused with others in your current locale. If your use case is intentional and legitimate, you can safely ignore this warning. Use the Escape button to highlight these characters.

<template>
<div class="project-detail main-page">
<el-col :span="6" class="h100">
<module-one-1-1 label="项目概况">
<img src="images/icon2001.png" class="img-openwin" @click="showDetailDlg" />
<div class="glr-title prj-info-title">{{ selProject?.projectName || "" }}</div>
<div class="dept-info-list">
<el-row>
<el-col :span="12" class="dept-item">
<div class="dept-title">建设单位</div>
<div v-if="deptType1 == null" class="dept-nodata">暂无数据</div>
<div class="dept-info" v-else>
<img class="dept-img" src="images/company_3.png" />
<div class="dept-row">
<div class="dept-name" :title="deptType1.deptName">{{ deptType1.deptName }}</div>
<div class="dept-leader-phone" :title="(deptType1.leader || '') + ' ' + (deptType1.phone || '')">
<span class="dept-leader">{{ deptType1.leader }}</span>
<span class="dept-phone">{{ deptType1.phone }}</span>
</div>
</div>
</div>
</el-col>
<el-col :span="12" class="dept-item">
<div class="dept-title">设计单位</div>
<div v-if="deptType2 == null" class="dept-nodata">暂无数据</div>
<div class="dept-info" v-else>
<img class="dept-img" src="images/company_2.png" />
<div class="dept-row">
<div class="dept-name" :title="deptType2.deptName">{{ deptType2.deptName }}</div>
<div class="dept-leader-phone" :title="(deptType2.leader || '') + ' ' + (deptType2.phone || '')">
<span class="dept-leader">{{ deptType2.leader }}</span>
<span class="dept-phone">{{ deptType2.phone }}</span>
</div>
</div>
</div>
</el-col>
</el-row>
<el-row>
<el-col :span="12" class="dept-item">
<div class="dept-title">总包单位</div>
<div v-if="deptType3.deptName == null" class="dept-nodata">暂无数据</div>
<div class="dept-info" v-else>
<img class="dept-img" src="images/company_3.png" />
<div class="dept-row">
<div class="dept-name">{{ deptType3.deptName }}</div>
<div class="dept-leader-phone" :title="(deptType3.leader || '') + ' ' + (deptType3.phone || '')">
<span class="dept-leader">{{ deptType3.leader }}</span>
<span class="dept-phone">{{ deptType3.phone }}</span>
</div>
</div>
</div>
</el-col>
<el-col :span="12" class="dept-item">
<div class="dept-title">监理单位</div>
<div v-if="deptType4 == null" class="dept-nodata">暂无数据</div>
<div class="dept-info" v-else>
<img class="dept-img" src="images/company_11.png" />
<div class="dept-row">
<div class="dept-name" :title="deptType4.deptName">{{ deptType4.deptName }}</div>
<div class="dept-leader-phone" :title="(deptType4.leader || '') + ' ' + (deptType4.phone || '')">
<span class="dept-leader">{{ deptType4.leader }}</span>
<span class="dept-phone">{{ deptType4.phone }}</span>
</div>
</div>
</div>
</el-col>
</el-row>
<el-row>
<el-col :span="12" class="dept-item">
<div class="dept-title">检测单位</div>
<div v-if="deptType5 == null" class="dept-nodata">暂无数据</div>
<div class="dept-info" v-else>
<img class="dept-img" src="images/company_12.png" />
<div class="dept-row">
<div class="dept-name" :title="deptType5.deptName">{{ deptType5.deptName }}</div>
<div class="dept-leader-phone" :title="(deptType5.leader || '') + ' ' + (deptType5.phone || '')">
<span class="dept-leader">{{ deptType5.leader }}</span>
<span class="dept-phone">{{ deptType5.phone }}</span>
</div>
</div>
</div>
</el-col>
<el-col :span="12" class="dept-item">
<div class="dept-title">勘察单位</div>
<div v-if="deptType6 == null" class="dept-nodata">暂无数据</div>
<div class="dept-info" v-else>
<img class="dept-img" src="images/company_10.png" />
<div class="dept-row">
<div class="dept-name" :title="deptType6.deptName">{{ deptType6.deptName }}</div>
<div class="dept-leader-phone" :title="(deptType6.leader || '') + ' ' + (deptType6.phone || '')">
<span class="dept-leader">{{ deptType6.leader }}</span>
<span class="dept-phone">{{ deptType6.phone }}</span>
</div>
</div>
</div>
</el-col>
</el-row>
</div>
</module-one-1-1>
<module-one-1-1 label="劳务人员概况">
<img src="images/icon2001.png" class="img-openwin" v-if="attendanceTotal > 0" @click="doShowAttendanceDetail" />
<div class="attendance-info warning-info">
<div class="attendance-info-title warning-info-title">
<div :class="attendanceNav == 0 ? 'active' : ''" @click="doAttendanceNav(0, '在岗人员')">在岗人员</div>
<div :class="attendanceNav == 1 ? 'active' : ''" @click="doAttendanceNav(1, '今日出勤')">今日出勤</div>
</div>
<el-row>
<el-col :span="8" class="attendance-tag">
<div class="survey_content">
<div class="survey_content_img">
<img
:src="
attendanceNav == 0
? 'images/survey_icon_4.png'
: 'images/survey_icon_5.png'
"
/>
</div>
</div>
<div class="survey_content_number labour-survey_content_number">
<div class="survey_content_value">
<span>{{ attendanceTotal }}</span> 人
</div>
<p>{{ attendanceNav == 0 ? "在岗人员" : "今日出勤" }}</p>
</div>
</el-col>
<el-col :span="16">
<staffSurveyChart :key="chartKey" :height="$dpi() == '1K' ? '220px' : $dpi() == '2K' ? '330px' : '550px'" :data="attendanceData" :width="140"></staffSurveyChart>
</el-col>
</el-row>
</div>
</module-one-1-1>
<module-one-1-1 label="项目全景">
<div class="photography-list">
<template v-if="photographyList && photographyList.length > 0">
<el-carousel height="100%" :autoplay="false">
<el-carousel-item v-for="(item, idx) in photographyList" :key="idx">
<video controls="controls" class="photography-video" loop="loop">
<source :src="item.videoUrl" type="video/mp4" :key="item.videoUrl" />您的浏览器不支持Video标签。
</video>
<div class="photography-list-title">{{ item.videoDate }}</div>
</el-carousel-item>
</el-carousel>
</template>
<template v-else>
<div class="photography-list-nodata">
<div>
<i class="video-play">
<svg
class="icon"
style="
width: 30px;
height: 30px;
vertical-align: middle;
fill: currentColor;
overflow: hidden;
"
viewBox="0 0 1024 1024"
version="1.1"
xmlns="http://www.w3.org/2000/svg"
p-id="4551"
>
<path
d="M128 138.666667c0-47.232 33.322667-66.666667 74.176-43.562667l663.146667 374.954667c40.96 23.168 40.853333 60.8 0 83.882666L202.176 928.896C161.216 952.064 128 932.565333 128 885.333333v-746.666666z"
fill="#3D3D3D"
p-id="4552"
/>
</svg>
</i>
</div>
<div class="photography-list-no-title">暂无数据</div>
</div>
</template>
</div>
</module-one-1-1>
</el-col>
<el-col :span="12" class="h100">
<module-one-2-2 label class="no-title no-border">
<div></div>
<div class="modify-project-amount" @mouseout="costMouseout" @mouseover="costMouseover">
<div class="modify-btn">
<img src="images/foot_left.png" @click="modifyLeftBtn" />
</div>
<div class="modify-content" id="modifyContent" v-if="selProject">
<div class="modify-content-overflow">
<div class="project-amount">
<div class="project-amount-bgd">
<div class="project-amount-con">
<p>
<svg-icon icon-class="money"></svg-icon>总投资
</p>
<div>
<span class="led-number">{{ costOutData.totalInv || 0 }}</span> 万元
</div>
</div>
</div>
</div>
<div class="project-amount">
<div class="project-amount-bgd">
<div class="project-amount-con">
<p>
<svg-icon icon-class="money"></svg-icon>本月完成
</p>
<div>
<span class="led-number">{{ costOutData.curMonth || 0 }}</span> 万元
</div>
</div>
</div>
</div>
<div class="project-amount">
<div class="project-amount-bgd">
<div class="project-amount-con">
<p>
<svg-icon icon-class="money"></svg-icon>本年完成
</p>
<div>
<span class="led-number">{{ costOutData.totalYear || 0 }}</span>
万元
</div>
</div>
</div>
</div>
<div class="project-amount">
<div class="project-amount-bgd">
<div class="project-amount-con">
<p>
<svg-icon icon-class="money"></svg-icon>开累完成
</p>
<div>
<span class="led-number">{{ costOutData.totalMonth || 0 }}</span>
万元
</div>
</div>
</div>
</div>
<div class="project-amount">
<div class="project-amount-bgd">
<div class="project-amount-con">
<p>
<svg-icon icon-class="date"></svg-icon>计划开工日期
</p>
<div>
<span class="led-number">
{{
selProject.scheduledStartTime | toDate
}}
</span>
</div>
</div>
</div>
</div>
<div class="project-amount">
<div class="project-amount-bgd">
<div class="project-amount-con">
<p>
<svg-icon icon-class="date"></svg-icon>计划竣工日期
</p>
<div>
<span class="led-number">
{{
selProject.plannedCompletionTime | toDate
}}
</span>
</div>
</div>
</div>
</div>
<div class="project-amount">
<div class="project-amount-bgd">
<div class="project-amount-con">
<p>
<svg-icon icon-class="date"></svg-icon>实际开工日期
</p>
<div>
<span class="led-number">
{{
selProject.actualOperatingTime | toDate
}}
</span>
</div>
</div>
</div>
</div>
<div class="project-amount">
<div class="project-amount-bgd">
<div class="project-amount-con">
<p>
<svg-icon icon-class="date"></svg-icon>合同工期
</p>
<div>
<span class="led-number">
{{
selProject.projectTimeLimit || ""
}}
</span>
</div>
</div>
</div>
</div>
<div class="project-amount">
<div class="project-amount-bgd">
<div class="project-amount-con">
<p>
<svg-icon icon-class="area"></svg-icon>建筑面积
</p>
<div>
<span class="led-number">{{ selProject.floorArea || "" }}</span>
平方米
</div>
</div>
</div>
</div>
</div>
</div>
<div class="modify-btn">
<img src="images/foot_right.png" @click="modifyRightBtn" />
</div>
</div>
<div class="prj-img-list">
<span class="prj-img-nav" v-if="showImgVideo">
<span class="prj-img-nav-item" :class="imgVideoSel == 1 ? 'is-active' : ''" @click="imgVideoSel = 1">效果图</span>
<span class="prj-img-nav-item" :class="imgVideoSel == 2 ? 'is-active' : ''" @click="imgVideoSel = 2">视频</span>
</span>
<el-carousel height="100%" :autoplay="false" v-if="imgVideoSel == 1">
<el-carousel-item v-for="(it, idx) in prjImgs" :key="idx">
<el-image style="width: 100%; height: 100%" :src="it" fit="contain" />
</el-carousel-item>
</el-carousel>
<div class="prj-video-layout" v-if="imgVideoSel == 2">
<video class="prj-video" controls="controls" autoplay="autoplay" loop="loop">
<source :src="prjVideo" controls="controls" type="video/mp4" />您的浏览器不支持Video标签。
</video>
</div>
</div>
</module-one-2-2>
<module-one-1-2 label="项目节点计划预警" class="prj-plan">
<div class="dangerous-max" :key="chartKey">
<div class="dangerous-timeline-max w-scroll">
<div class="dangerous-timeline-min" :style="{ width: maxWidth + 'px' }">
<template v-if="projectBuildNode && projectBuildNode.length > 0">
<div class="dangerous-timeline-con" v-for="(item, idx) in projectBuildNode" :key="idx">
<div class="dangerous-text" v-html="item.nodeText"></div>
<div class="dangerous-dot">
<div class="dangerous-dot-item"></div>
</div>
<div class="dangerous-time-max">
<div class="dangerous-time-min">计划{{ item.planEndDate || "---" }}</div>
<div class="dangerous-time-min">实际{{ item.endDate || "--" }}</div>
<div
v-if="item.finishState > 0"
class="project-expect-state dangerous-time-nav"
:class="
(item.finishState == 1 ? 'active' : '') +
' state-' +
item.finishState
"
>{{ item.finish }}</div>
</div>
</div>
</template>
</div>
<div class="strip-max" :style="{ width: maxWidth + 'px' }">
<div class="strip-min" :style="{ width: minWidth + 'px' }"></div>
</div>
</div>
</div>
</module-one-1-2>
</el-col>
<el-col :span="6" class="h100">
<module-one-2-1 label class="no-title no-border work-info">
<div class="analyse-map">
<div class="analyse-title analyse_title_blue">
<div class="analyse-text">安全生产</div>
</div>
</div>
<div class="work-days" style="display: flex; align-items: center; justify-content: center">
<div style="margin-right: 10px">第</div>
<people-number :number="startDays" unit></people-number>
<div style="margin-left: 10px">天</div>
</div>
<div class="analyse-map">
<div class="analyse-title analyse_title_blue">
<div class="analyse-text">环境监测</div>
</div>
</div>
<div v-if="weathers" class="weather-list">
<div v-if="weathers.length > 0" class="weather-item">
<span class="weather-day">今天</span>
<span class="weather-info">{{ weathers[0].weather }}</span>
<img class="weather-img" :src="weathers[0].img" />
<span class="weather-temp">{{ weathers[0].highTemp }} {{ weathers[0].lowTemp }}</span>
</div>
<div v-if="weathers.length > 1" class="weather-item">
<span class="weather-day">明天</span>
<span class="weather-info">{{ weathers[1].weather }}</span>
<img class="weather-img" :src="weathers[1].img" />
<span class="weather-temp">{{ weathers[1].highTemp }} {{ weathers[1].lowTemp }}</span>
</div>
<div v-if="weathers.length > 2" class="weather-item">
<span class="weather-day">后天</span>
<span class="weather-info">{{ weathers[2].weather }}</span>
<img class="weather-img" :src="weathers[2].img" />
<span class="weather-temp">{{ weathers[2].highTemp }} {{ weathers[2].lowTemp }}</span>
</div>
</div>
<div class="weather-info">
<el-row>
<el-col :span="12" class="weather-info-item">
<div class="current-value-img">
<svg-icon icon-class="pressure"></svg-icon>
</div>
<div class="wi-data">
<div class="wi-label">当前气压</div>
<div class="wi-data-unit">
<span class="wi-txt">{{ weatherInfo.pressure }}</span>
<span class="wi-unit">hPa</span>
</div>
</div>
</el-col>
<el-col :span="12" class="weather-info-item">
<div class="current-value-img">
<svg-icon icon-class="humidity"></svg-icon>
</div>
<div class="wi-data">
<div class="wi-label">当前湿度</div>
<div class="wi-data-unit">
<span class="wi-txt">{{ weatherInfo.humidity }}</span>
<span class="wi-unit">%</span>
</div>
</div>
</el-col>
</el-row>
<el-row>
<el-col :span="12" class="weather-info-item">
<div class="current-value-img">
<svg-icon icon-class="precipitation"></svg-icon>
</div>
<div class="wi-data">
<div class="wi-label">当前降雨量</div>
<div class="wi-data-unit">
<span class="wi-txt">{{ weatherInfo.precipitation }}</span>
<span class="wi-unit">mm</span>
</div>
</div>
</el-col>
<el-col :span="12" class="weather-info-item">
<div class="current-value-img">
<svg-icon icon-class="wind"></svg-icon>
</div>
<div class="wi-data">
<div class="wi-label">当前风向</div>
<div class="wi-data-unit">
<span class="wi-txt">{{ weatherInfo.windDirection }}{{ weatherInfo.windScale }}</span>
</div>
</div>
</el-col>
</el-row>
</div>
</module-one-2-1>
<module-one-1-1 label="项目监测预警">
<MonitAndWarning type="detail"></MonitAndWarning>
</module-one-1-1>
</el-col>
<project-info-dialog ref="infoDlg"></project-info-dialog>
<attendanceInfoDlg ref="attDlg"></attendanceInfoDlg>
</div>
</template>
<script>
import projectInfoDialog from './detail/projectInfoDialog.vue'
import staffSurveyChart from '@/components/staffSurveyChart.vue'
import MonitAndWarning from './components/MonitAndWarning.vue'
import attendanceInfoDlg from './detail/attendanceInfoDlg.vue'
import debounce from 'lodash.debounce'
export default {
components: {
projectInfoDialog,
staffSurveyChart,
MonitAndWarning,
attendanceInfoDlg,
},
data() {
return {
chartKey: 0,
dpi: '',
selProject: null,
prjInfo: {},
deptType1: [], //建设单位
deptType2: [], //设计单位
deptType3: [], //总包单位
deptType4: [], //监理单位
deptType5: [], //检测单位
deptType6: [], //勘察单位
prjImgs: [],
prjVideo: null,
showImgVideo: false,
imgVideoSel: 1,
attendanceNav: 0,
attendanceTotal: 0,
attendanceData: [
{ text: '普通工种', value: 0, id: 0 },
{ text: '特殊工种', value: 0, id: 0 },
{ text: '管理人员', value: 0, id: 0 },
],
deviceNav: 0,
deviceData: [
{ text: '自有', value: 45 },
{ text: '租赁', value: 55 },
{ text: '分包', value: 65 },
],
costIndex: 0,
direction: 'right',
costInterval: undefined,
cityInfo: [],
cityId: '',
startDays: 0,
weathers: [],
weatherInfo: {},
projectBuildNode: [],
maxWidth: 0,
minWidth: 100,
costOutData: {},
photographyList: [],
}
},
mounted() {
window.detailApp = this
this.$store.dispatch('ChangeNav', 2)
this.$bus.$on(
'projectChange',
debounce((prj) => {
this.selProject = prj
this.init()
})
)
this.selProject = this.$store.getters.selProject
this.init()
this.dpi = this.$dpi()
window.addEventListener('resize', () => {
if (this.dpi != this.$dpi()) {
this.dpi = this.$dpi()
this.chartKey++
}
})
this.costInterval = setInterval(this.manufacturingCostRoll, 5000)
this.$api.weather.getCityInfo().then((d) => {
this.cityInfo = d.data?.city || []
})
},
methods: {
showDetailDlg() {
this.$refs.infoDlg.showDialog({
prjInfo: this.prjInfo,
selProject: this.selProject,
})
},
init() {
if (!this.selProject) {
return
}
this.$api.project.getProjectInfo(this.selProject.id).then((d) => {
this.prjInfo = d.data || {}
let tmps = this.prjInfo.projectDeptsList || []
const func = (t) => {
let objs = tmps.filter((it) => it.deptType == t)
return objs.length > 0 ? objs[0] : null
}
this.prjImgs = (this.prjInfo?.setting?.orgImage || '').split(',').filter((d) => d)
this.prjVideo = this.prjInfo?.setting?.orgVideo || ''
this.showImgVideo = this.prjImgs.length > 0 && this.prjVideo
this.imgVideoSel = 1
this.deptType1 = func('建设单位')
this.deptType2 = func('设计单位')
this.deptType3 = {
deptName: this.prjInfo.disDeptName,
leader: this.prjInfo.projectPerson,
phone: this.prjInfo.projectPersonPhone,
}
this.deptType4 = func('监理单位')
this.deptType5 = func('检测单位')
this.deptType6 = func('勘察单位')
let tmp = this.cityInfo.map((d) => {
d[18] = Math.abs(d[4] - this.prjInfo.latitude) + Math.abs(d[5] - this.prjInfo.longitude)
return d
})
tmp = tmp.sort((a, b) => a[18] - b[18])
this.cityId = tmp.length > 0 && tmp[0].length > 0 ? tmp[0][0] : ''
if (this.prjInfo.actualOperatingTime) {
this.startDays = this.$dt(this.prjInfo.actualOperatingTime).diff(new Date(), 'day') * -1
} else {
this.startDays = 0
}
if (this.cityId) {
this.$api.weather.getByCity(this.cityId).then((w) => {
this.weathers = w.data || []
})
this.getWeatherNowInfo()
}
})
this.loadAttendanceData()
this.loadMilestoneData()
this.loadCostOutput()
this.initPhotographyList()
},
initPhotographyList() {
this.$api.detail.photographyList(this.selProject.id).then((d) => {
this.photographyList = d.data
})
},
loadCostOutput() {
let dt = this.$dt(new Date())
this.$api.detail
.costOutputSelectYearAndMonth({
comId: this.selProject.comId,
projectId: this.selProject.id,
year: dt.$y,
month: dt.$M + 1,
})
.then((d) => {
this.costOutData = d
})
},
loadMilestoneData() {
this.$api.detail
.milestoneList({
pageNum: 1,
pageSize: 100,
comId: this.selProject.comId,
projectId: this.selProject.id,
})
.then((d) => {
this.projectBuildNode = d
let itemWidth = this.$dpi() == '1K' ? 200 : this.$dpi() == '2K' ? 300 : 500
this.maxWidth = itemWidth * this.projectBuildNode.length
let n = 0
for (let i = 0; i < this.projectBuildNode.length; i++) {
if (this.projectBuildNode[i].finish == '进行中') {
n = i
}
}
this.minWidth = n * itemWidth + 100
})
},
loadAttendanceData() {
let ajax = this.$api.detail.groupByCraftType
let posData = {
comId: this.selProject.comId,
projectId: this.selProject.id,
}
if (this.attendanceNav == 1) {
ajax = this.$api.detail.groupByCraftTypeByAttendance
//posData.createTime = this.$dt(new Date()).format("YYYY-MM-DD");
posData.createTime = '2024-10-13'
}
ajax(posData).then((d) => {
this.attendanceData = (d.data || []).map((it) => {
return {
text: it.createBy,
value: it.id || 0,
id: it.craftType,
}
})
let count = 0
this.attendanceData.forEach((it) => {
count += it.value
})
this.attendanceTotal = count
})
},
getWeatherNowInfo() {
this.$api.weather.getCityNowInfo(this.cityId).then((cn) => {
this.weatherInfo = cn?.data?.now || {}
setTimeout(this.getWeatherNowInfo, 1000 * 60 * 5) //5分钟刷新一次
})
},
doAttendanceNav(n) {
this.attendanceNav = n
this.loadAttendanceData()
},
doShowAttendanceDetail() {
this.$refs.attDlg.showDialog({
prjInfo: this.prjInfo,
attendanceData: this.attendanceData,
type: this.attendanceNav,
})
},
doDeviceNav(n) {
this.deviceNav = n
},
costMouseover() {
clearInterval(this.costInterval)
},
costMouseout() {
this.costInterval = setInterval(this.manufacturingCostRoll, 5000)
},
modifyLeftBtn() {
this.direction = 'left'
this.manufacturingCostRoll()
},
modifyRightBtn() {
this.direction = 'right'
this.manufacturingCostRoll()
},
manufacturingCostRoll() {
var width = $('.project-amount').innerWidth()
if (this.direction == 'right') {
if (this.costIndex == 6) {
this.costIndex = 0
} else {
this.costIndex = this.costIndex + 3
}
} else {
if (this.costIndex == 0) {
this.costIndex = 6
} else {
this.costIndex = this.costIndex - 3
}
}
$('#modifyContent').animate({ scrollLeft: width * this.costIndex + 'px' })
this.direction = 'right'
},
},
}
</script>
<style lang="less">
.project-detail {
color: #c2d5f6;
.photography-list {
width: calc(100% - 4px);
height: calc(100% - 26px);
padding-left: 1px;
.el-carousel {
height: 100%;
}
.photography-video {
width: 100%;
height: calc(100% - 30px);
}
.photography-list-title {
line-height: 20px;
text-align: center;
}
.photography-list-nodata {
background: rgba(255, 255, 255, 0.2);
width: 80%;
height: 80%;
margin-left: 10%;
margin-top: 6%;
display: flex;
align-items: center;
justify-content: center;
flex-flow: column;
.video-play {
width: 80px;
height: 80px;
display: inline-block;
background: rgba(0, 0, 0, 0.4);
line-height: 80px;
text-align: center;
border-radius: 40px;
margin-bottom: 12px;
}
.photography-list-no-title {
color: rgba(255, 255, 255, 0.2);
}
}
}
.dept-info-list {
height: calc(100% - 30px);
margin-top: 10px;
.el-row {
min-height: 33%;
}
.dept-item {
.dept-title {
line-height: 30px;
font-size: 14px;
}
.dept-nodata {
color: #ccc;
font-size: 12px;
}
.dept-info {
display: flex;
.dept-img {
width: 42px;
height: 42px;
}
.dept-row {
margin-left: 8px;
font-size: 12px;
line-height: 22px;
display: inline-grid;
flex-grow: 1;
padding-right: 10px;
.dept-name {
color: #50a2eb;
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
}
.dept-leader-phone {
color: #ab3715;
cursor: pointer;
overflow: hidden;
white-space: nowrap;
text-overflow: ellipsis;
.dept-leader {
margin-right: 10px;
}
}
}
}
}
}
.device-info {
.device-title {
padding: 10px;
}
.device-data {
padding: 30px 0px;
.survey_content_value {
.sp-number {
font-size: 40px;
}
.sp-unit {
font-size: 12px;
}
}
}
.device-data-list {
display: flex;
padding: 0px 10%;
.device-data-item {
display: inline-flex;
width: 33%;
align-items: center;
}
}
}
.modify-project-amount {
.modify-content {
width: 840px;
.modify-content-overflow {
width: 2500px;
.project-amount {
.project-amount-bgd {
width: 256px;
.project-amount-con {
.svg-icon {
width: 20px;
height: 20px;
fill: #63c8ff;
}
.led-number {
font-size: 36px;
}
}
}
}
}
}
}
.prj-img-list {
height: calc(100% - 130px);
position: relative;
.prj-img-nav {
position: absolute;
z-index: 999;
left: calc(50% - 100px);
.prj-img-nav-item {
display: inline-block;
line-height: 30px;
height: 30px;
width: 90px;
text-align: center;
background-color: #192c648a;
border: solid 1px #1e90ff8a;
color: #ccc;
cursor: pointer;
&.is-active {
background-color: #50a2eb8a;
color: #fff;
}
}
}
.prj-video-layout {
height: 100%;
display: flex;
justify-content: center;
justify-items: center;
}
.el-carousel {
height: 100%;
.el-carousel__arrow {
width: 50px;
height: 50px;
background-color: #192c648a;
i {
font-size: 20px;
}
}
}
}
.work-days {
margin: 20px 0px;
}
.weather-list {
margin-top: 30px;
.weather-item {
line-height: 40px;
.weather-day {
display: inline-block;
width: 30%;
}
.weather-temp {
display: inline-block;
margin-left: 30%;
}
.weather-img {
width: 20px;
}
}
}
.weather-info {
margin-top: 60px;
.el-row {
margin-top: 30px;
}
.weather-info-item {
display: flex;
align-items: center;
.current-value-img {
width: 60px;
height: 60px;
display: flex;
align-items: center;
justify-content: center;
.svg-icon {
width: 30px;
height: 30px;
fill: #63c8ff;
}
}
.wi-data {
margin-left: 10px;
line-height: 30px;
.wi-label {
font-size: 14px;
}
.wi-data-unit {
.wi-txt {
color: #fff;
font-weight: bold;
font-size: 16px;
}
.wi-unit {
margin-left: 4px;
font-size: 10px;
}
}
}
}
}
.prj-plan {
.dangerous-timeline-max {
width: 850px;
height: 230px;
.dangerous-timeline-con {
width: 200px;
font-size: 14px;
}
.dangerous-text {
font-size: 14px;
}
.dangerous-time-max {
text-align: center;
.dangerous-time-nav {
display: inline-block;
}
}
}
}
}
@media (min-width: 1921px) and (max-width: 2560px) {
.project-detail {
.prj-info-title {
font-size: 24px;
}
.dept-info-list {
.dept-item {
.dept-title {
font-size: 18px;
line-height: 40px;
}
.dept-nodata {
font-size: 16px;
}
.dept-info {
.dept-img {
width: 60px;
height: 60px;
}
.dept-row {
font-size: 18px;
line-height: 32px;
}
}
}
}
.attendance-info-title {
* {
font-size: 24px;
}
}
.attendance-tag {
* {
font-size: 24px;
}
padding-top: 40px;
.survey_content_img {
background-size: 120px 80px;
width: 120px;
height: 120px;
img {
width: 60px;
height: 60px;
}
}
}
.device-info {
.device-title {
padding: 10px;
.survey_title_btn_min {
font-size: 20px;
height: 40px;
width: 150px;
line-height: 40px;
}
}
.device-data {
padding: 70px 0px;
.survey_content_img {
width: 120px;
height: 120px;
line-height: 120px;
background-size: 120px 80px;
img {
width: 60px;
height: 60px;
}
}
.survey_content_number {
font-size: 20px;
.survey_content_value {
.sp-number {
font-size: 60px;
}
.sp-unit {
font-size: 20px;
}
}
}
}
.device-data-list {
.device-data-item {
font-size: 20px;
}
}
}
.modify-project-amount {
.modify-btn {
img {
height: 60px;
}
}
.modify-content {
width: 1110px;
.modify-content-overflow {
width: 3420px;
.project-amount {
.project-amount-bgd {
width: 350px;
height: 130px;
.project-amount-con {
p {
font-size: 20px;
.svg-icon {
width: 20px;
height: 20px;
fill: #63c8ff;
}
}
.led-number {
font-size: 48px;
}
}
}
}
}
}
}
.prj-img-list {
height: calc(100% - 150px);
.prj-img-nav {
.prj-img-nav-item {
line-height: 40px;
height: 40px;
width: 110px;
font-size: 18px;
}
}
.el-carousel {
height: 100%;
.el-carousel__arrow {
width: 80px;
height: 80px;
background-color: #192c648a;
i {
font-size: 30px;
}
}
}
}
.work-info {
.analyse-text {
font-size: 24px;
}
.analyse-title {
height: 60px;
}
.work-days {
margin: 20px 0px;
font-size: 24px;
.people-number-con {
div {
width: 40px;
height: 60px;
line-height: 60px;
font-size: 40px;
}
}
}
.weather-list {
margin-top: 50px;
.weather-item {
line-height: 60px;
font-size: 24px;
.weather-img {
width: 30px;
}
}
}
.weather-info {
margin-top: 80px;
.el-row {
margin-top: 60px;
}
.weather-info-item {
.current-value-img {
width: 80px;
height: 80px;
.svg-icon {
width: 40px;
height: 40px;
}
}
.wi-data {
margin-left: 10px;
line-height: 40px;
.wi-label {
font-size: 20px;
}
.wi-data-unit {
.wi-txt {
font-size: 24px;
}
.wi-unit {
margin-left: 4px;
font-size: 14px;
}
}
}
}
}
}
.prj-plan {
.dangerous-timeline-max {
width: 1160px;
height: 340px;
.dangerous-timeline-con {
width: 300px;
font-size: 24px;
}
.dangerous-text {
font-size: 24px;
}
.dangerous-time-max {
height: 150px;
line-height: 50px;
.project-expect-state {
font-size: 24px;
width: 160px;
height: 40px;
line-height: 40px;
}
}
}
}
}
}
@media (min-width: 2561px) {
.project-detail {
.prj-info-title {
font-size: 32px;
}
.dept-info-list {
.dept-item {
.dept-title {
font-size: 24px;
line-height: 40px;
}
.dept-nodata {
font-size: 18px;
}
.dept-info {
.dept-img {
width: 100px;
height: 100px;
}
.dept-row {
font-size: 24px;
line-height: 32px;
}
}
}
}
.attendance-info-title {
* {
font-size: 36px;
}
}
.attendance-tag {
* {
font-size: 36px;
}
padding-top: 100px;
.survey_content_img {
background-size: 150px 100px;
width: 150px;
height: 150px;
img {
width: 80px;
height: 80px;
}
}
}
.device-info {
.device-title {
padding: 20px;
.survey_title_btn_min {
font-size: 30px;
height: 60px;
width: 210px;
line-height: 60px;
}
}
.device-data {
padding: 120px 0px;
.survey_content_img {
width: 180px;
height: 180px;
line-height: 180px;
background-size: 180px 120px;
img {
width: 90px;
height: 90px;
}
}
.survey_content_number {
font-size: 30px;
.survey_content_value {
.sp-number {
font-size: 90px;
}
.sp-unit {
font-size: 30px;
}
}
}
}
.device-data-list {
.device-data-item {
img {
width: 40px;
height: 40px;
}
font-size: 30px;
}
}
}
.modify-project-amount {
.modify-btn {
img {
height: 90px;
margin-top: 10px;
}
}
.modify-content {
width: 1680px;
.modify-content-overflow {
width: 5220px;
.project-amount {
.project-amount-bgd {
width: 540px;
height: 165px;
.project-amount-con {
p {
font-size: 30px;
.svg-icon {
width: 30px;
height: 30px;
}
}
div {
font-size: 30px;
.led-number {
font-size: 60px;
}
}
}
}
}
}
}
}
.prj-img-list {
height: calc(100% - 190px);
.prj-img-nav {
.prj-img-nav-item {
line-height: 60px;
height: 60px;
width: 130px;
font-size: 30px;
}
}
.el-carousel {
height: 100%;
.el-carousel__arrow {
width: 120px;
height: 120px;
background-color: #192c648a;
i {
font-size: 40px;
}
}
}
}
.work-info {
.analyse-text {
font-size: 30px;
}
.analyse-title {
height: 80px;
}
.work-days {
margin: 20px 0px;
font-size: 32px;
.people-number-con {
div {
width: 60px;
height: 90px;
line-height: 90px;
font-size: 50px;
}
}
}
.weather-list {
margin-top: 120px;
.weather-item {
line-height: 100px;
font-size: 40px;
.weather-img {
width: 40px;
}
}
}
.weather-info {
margin-top: 140px;
.el-row {
margin-top: 120px;
}
.weather-info-item {
.current-value-img {
width: 100px;
height: 100px;
.svg-icon {
width: 50px;
height: 50px;
}
}
.wi-data {
margin-left: 10px;
line-height: 50px;
.wi-label {
font-size: 30px;
}
.wi-data-unit {
.wi-txt {
font-size: 36px;
}
.wi-unit {
margin-left: 4px;
font-size: 20px;
}
}
}
}
}
}
.prj-plan {
.dangerous-timeline-max {
width: 1790px;
height: 570px;
.strip-max {
top: 136px;
}
.dangerous-timeline-con {
width: 500px;
font-size: 42px;
}
.dangerous-text {
font-size: 42px;
height: 100px;
line-height: 40px;
}
.dangerous-time-max {
height: 300px;
line-height: 100px;
.project-expect-state {
font-size: 36px;
width: 240px;
height: 60px;
line-height: 60px;
}
}
}
}
}
}
</style>