dev_xd
姜玉琦 2025-04-13 22:40:19 +08:00
commit 6d1663f282
5 changed files with 1752 additions and 1755 deletions

View File

@ -0,0 +1,24 @@
<template>
<div class="screen-module">
<div class="screen-one-3-2">
<div class="module-title">
<span>{{label}}</span>
</div>
<slot></slot>
</div>
</div>
</template>
<script>
export default {
props: {
label: {
type: String,
},
},
data() {
return {}
},
}
</script>

View File

@ -0,0 +1,27 @@
<template>
<div class="screen-module">
<div class="screen-one-3-3" :class="notitle?'no-title':''">
<div class="module-title">
<span>{{label}}</span>
</div>
<slot></slot>
</div>
</div>
</template>
<script>
export default {
props: {
label: {
type: String,
},
notitle: {
type: Boolean,
},
},
data() {
return {}
},
}
</script>

View File

@ -13,6 +13,8 @@ import moduleOne21 from "../components/module/module-one-2-1.vue";
import moduleOne22 from "../components/module/module-one-2-2.vue"; import moduleOne22 from "../components/module/module-one-2-2.vue";
import moduleOne23 from "../components/module/module-one-2-3.vue"; import moduleOne23 from "../components/module/module-one-2-3.vue";
import moduleOne31 from "../components/module/module-one-3-1.vue"; import moduleOne31 from "../components/module/module-one-3-1.vue";
import moduleOne32 from "../components/module/module-one-3-2.vue";
import moduleOne33 from "../components/module/module-one-3-3.vue";
import staffSurveyChart from "../components/staffSurveyChart.vue"; import staffSurveyChart from "../components/staffSurveyChart.vue";
import trendChartLine from "../components/trend-chart-line.vue"; import trendChartLine from "../components/trend-chart-line.vue";
import trendLineChart from "../components/trend-line-chart.vue"; import trendLineChart from "../components/trend-line-chart.vue";
@ -36,6 +38,8 @@ Vue.component("module-one-2-1", moduleOne21);
Vue.component("module-one-2-2", moduleOne22); Vue.component("module-one-2-2", moduleOne22);
Vue.component("module-one-2-3", moduleOne23); Vue.component("module-one-2-3", moduleOne23);
Vue.component("module-one-3-1", moduleOne31); Vue.component("module-one-3-1", moduleOne31);
Vue.component("module-one-3-2", moduleOne32);
Vue.component("module-one-3-3", moduleOne33);
Vue.component("people-number", peopleNumber); Vue.component("people-number", peopleNumber);
Vue.component("staff-survey-chart", staffSurveyChart); Vue.component("staff-survey-chart", staffSurveyChart);
Vue.component("trend-chart-line", trendChartLine); Vue.component("trend-chart-line", trendChartLine);

View File

@ -13,10 +13,7 @@
<img class="dept-img" src="images/company_3.png" /> <img class="dept-img" src="images/company_3.png" />
<div class="dept-row"> <div class="dept-row">
<div class="dept-name">{{ deptType1.deptName }}</div> <div class="dept-name">{{ deptType1.deptName }}</div>
<div <div class="dept-leader-phone" :title="(deptType1.leader || '') + ' ' + (deptType1.phone || '')">
class="dept-leader-phone"
:title="(deptType1.leader || '') + ' ' + (deptType1.phone || '')"
>
<span class="dept-leader">{{ deptType1.leader }}</span> <span class="dept-leader">{{ deptType1.leader }}</span>
<span class="dept-phone">{{ deptType1.phone }}</span> <span class="dept-phone">{{ deptType1.phone }}</span>
</div> </div>
@ -30,10 +27,7 @@
<img class="dept-img" src="images/company_2.png" /> <img class="dept-img" src="images/company_2.png" />
<div class="dept-row"> <div class="dept-row">
<div class="dept-name">{{ deptType2.deptName }}</div> <div class="dept-name">{{ deptType2.deptName }}</div>
<div <div class="dept-leader-phone" :title="(deptType2.leader || '') + ' ' + (deptType2.phone || '')">
class="dept-leader-phone"
:title="(deptType2.leader || '') + ' ' + (deptType2.phone || '')"
>
<span class="dept-leader">{{ deptType2.leader }}</span> <span class="dept-leader">{{ deptType2.leader }}</span>
<span class="dept-phone">{{ deptType2.phone }}</span> <span class="dept-phone">{{ deptType2.phone }}</span>
</div> </div>
@ -49,10 +43,7 @@
<img class="dept-img" src="images/company_3.png" /> <img class="dept-img" src="images/company_3.png" />
<div class="dept-row"> <div class="dept-row">
<div class="dept-name">{{ deptType3.deptName }}</div> <div class="dept-name">{{ deptType3.deptName }}</div>
<div <div class="dept-leader-phone" :title="(deptType3.leader || '') + ' ' + (deptType3.phone || '')">
class="dept-leader-phone"
:title="(deptType3.leader || '') + ' ' + (deptType3.phone || '')"
>
<span class="dept-leader">{{ deptType3.leader }}</span> <span class="dept-leader">{{ deptType3.leader }}</span>
<span class="dept-phone">{{ deptType3.phone }}</span> <span class="dept-phone">{{ deptType3.phone }}</span>
</div> </div>
@ -66,10 +57,7 @@
<img class="dept-img" src="images/company_11.png" /> <img class="dept-img" src="images/company_11.png" />
<div class="dept-row"> <div class="dept-row">
<div class="dept-name">{{ deptType4.deptName }}</div> <div class="dept-name">{{ deptType4.deptName }}</div>
<div <div class="dept-leader-phone" :title="(deptType4.leader || '') + ' ' + (deptType4.phone || '')">
class="dept-leader-phone"
:title="(deptType4.leader || '') + ' ' + (deptType4.phone || '')"
>
<span class="dept-leader">{{ deptType4.leader }}</span> <span class="dept-leader">{{ deptType4.leader }}</span>
<span class="dept-phone">{{ deptType4.phone }}</span> <span class="dept-phone">{{ deptType4.phone }}</span>
</div> </div>
@ -85,10 +73,7 @@
<img class="dept-img" src="images/company_12.png" /> <img class="dept-img" src="images/company_12.png" />
<div class="dept-row"> <div class="dept-row">
<div class="dept-name">{{ deptType5.deptName }}</div> <div class="dept-name">{{ deptType5.deptName }}</div>
<div <div class="dept-leader-phone" :title="(deptType5.leader || '') + ' ' + (deptType5.phone || '')">
class="dept-leader-phone"
:title="(deptType5.leader || '') + ' ' + (deptType5.phone || '')"
>
<span class="dept-leader">{{ deptType5.leader }}</span> <span class="dept-leader">{{ deptType5.leader }}</span>
<span class="dept-phone">{{ deptType5.phone }}</span> <span class="dept-phone">{{ deptType5.phone }}</span>
</div> </div>
@ -103,10 +88,7 @@
<img class="dept-img" src="images/company_10.png" /> <img class="dept-img" src="images/company_10.png" />
<div class="dept-row"> <div class="dept-row">
<div class="dept-name">{{ deptType6.deptName }}</div> <div class="dept-name">{{ deptType6.deptName }}</div>
<div <div class="dept-leader-phone" :title="(deptType6.leader || '') + ' ' + (deptType6.phone || '')">
class="dept-leader-phone"
:title="(deptType6.leader || '') + ' ' + (deptType6.phone || '')"
>
<span class="dept-leader">{{ deptType6.leader }}</span> <span class="dept-leader">{{ deptType6.leader }}</span>
<span class="dept-phone">{{ deptType6.phone }}</span> <span class="dept-phone">{{ deptType6.phone }}</span>
</div> </div>
@ -117,26 +99,11 @@
</div> </div>
</module-one-1-1> </module-one-1-1>
<module-one-1-1 label="劳务人员概况"> <module-one-1-1 label="劳务人员概况">
<img <img src="images/icon2001.png" class="img-openwin" v-if="attendanceTotal > 0" @click="doShowAttendanceDetail" />
src="images/icon2001.png"
class="img-openwin"
v-if="attendanceTotal > 0"
@click="doShowAttendanceDetail"
/>
<div class="attendance-info warning-info"> <div class="attendance-info warning-info">
<div class="attendance-info-title warning-info-title"> <div class="attendance-info-title warning-info-title">
<div <div :class="attendanceNav == 0 ? 'active' : ''" @click="doAttendanceNav(0, '在岗人员')">在岗人员</div>
:class="attendanceNav == 0 ? 'active' : ''" <div :class="attendanceNav == 1 ? 'active' : ''" @click="doAttendanceNav(1, '今日出勤')">今日出勤</div>
@click="doAttendanceNav(0, '在岗人员')"
>
在岗人员
</div>
<div
:class="attendanceNav == 1 ? 'active' : ''"
@click="doAttendanceNav(1, '今日出勤')"
>
今日出勤
</div>
</div> </div>
<el-row> <el-row>
<el-col :span="8" class="attendance-tag"> <el-col :span="8" class="attendance-tag">
@ -159,12 +126,7 @@
</div> </div>
</el-col> </el-col>
<el-col :span="16"> <el-col :span="16">
<staffSurveyChart <staffSurveyChart :key="chartKey" :height="$dpi() == '1K' ? '220px' : $dpi() == '2K' ? '330px' : '550px'" :data="attendanceData" :width="140"></staffSurveyChart>
:key="chartKey"
:height="$dpi() == '1K' ? '220px' : $dpi() == '2K' ? '330px' : '550px'"
:data="attendanceData"
:width="140"
></staffSurveyChart>
</el-col> </el-col>
</el-row> </el-row>
</div> </div>
@ -174,13 +136,10 @@
<template v-if="photographyList && photographyList.length > 0"> <template v-if="photographyList && photographyList.length > 0">
<el-carousel height="100%" :autoplay="false"> <el-carousel height="100%" :autoplay="false">
<el-carousel-item v-for="(item, idx) in photographyList" :key="idx"> <el-carousel-item v-for="(item, idx) in photographyList" :key="idx">
<video controls class="photography-video"> <video controls="controls" class="photography-video" autoplay="autoplay" loop="loop">
<source :src="item.videoUrl" type="video/mp4" :key="item.videoUrl" /> <source :src="item.videoUrl" type="video/mp4" :key="item.videoUrl" />您的浏览器不支持Video标签
您的浏览器不支持Video标签
</video> </video>
<div class="photography-list-title"> <div class="photography-list-title">{{ item.videoDate }}</div>
{{ item.videoDate }}
</div>
</el-carousel-item> </el-carousel-item>
</el-carousel> </el-carousel>
</template> </template>
@ -206,7 +165,7 @@
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" 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" fill="#3D3D3D"
p-id="4552" p-id="4552"
></path> />
</svg> </svg>
</i> </i>
</div> </div>
@ -217,13 +176,9 @@
</module-one-1-1> </module-one-1-1>
</el-col> </el-col>
<el-col :span="12" class="h100"> <el-col :span="12" class="h100">
<module-one-2-2 label="" class="no-title no-border"> <module-one-2-2 label class="no-title no-border">
<div></div> <div></div>
<div <div class="modify-project-amount" @mouseout="costMouseout" @mouseover="costMouseover">
class="modify-project-amount"
@mouseout="costMouseout"
@mouseover="costMouseover"
>
<div class="modify-btn"> <div class="modify-btn">
<img src="images/foot_left.png" @click="modifyLeftBtn" /> <img src="images/foot_left.png" @click="modifyLeftBtn" />
</div> </div>
@ -233,8 +188,7 @@
<div class="project-amount-bgd"> <div class="project-amount-bgd">
<div class="project-amount-con"> <div class="project-amount-con">
<p> <p>
<svg-icon icon-class="money"></svg-icon> <svg-icon icon-class="money"></svg-icon>
总投资
</p> </p>
<div> <div>
<span class="led-number">{{ costOutData.totalInv || 0 }}</span> 万元 <span class="led-number">{{ costOutData.totalInv || 0 }}</span> 万元
@ -246,8 +200,7 @@
<div class="project-amount-bgd"> <div class="project-amount-bgd">
<div class="project-amount-con"> <div class="project-amount-con">
<p> <p>
<svg-icon icon-class="money"></svg-icon> <svg-icon icon-class="money"></svg-icon>
本月完成
</p> </p>
<div> <div>
<span class="led-number">{{ costOutData.curMonth || 0 }}</span> 万元 <span class="led-number">{{ costOutData.curMonth || 0 }}</span> 万元
@ -260,8 +213,7 @@
<div class="project-amount-bgd"> <div class="project-amount-bgd">
<div class="project-amount-con"> <div class="project-amount-con">
<p> <p>
<svg-icon icon-class="money"></svg-icon> <svg-icon icon-class="money"></svg-icon>
本年完成
</p> </p>
<div> <div>
<span class="led-number">{{ costOutData.totalYear || 0 }}</span> <span class="led-number">{{ costOutData.totalYear || 0 }}</span>
@ -275,8 +227,7 @@
<div class="project-amount-bgd"> <div class="project-amount-bgd">
<div class="project-amount-con"> <div class="project-amount-con">
<p> <p>
<svg-icon icon-class="money"></svg-icon> <svg-icon icon-class="money"></svg-icon>
开累完成
</p> </p>
<div> <div>
<span class="led-number">{{ costOutData.totalMonth || 0 }}</span> <span class="led-number">{{ costOutData.totalMonth || 0 }}</span>
@ -290,13 +241,14 @@
<div class="project-amount-bgd"> <div class="project-amount-bgd">
<div class="project-amount-con"> <div class="project-amount-con">
<p> <p>
<svg-icon icon-class="date"></svg-icon> <svg-icon icon-class="date"></svg-icon>
计划开工日期
</p> </p>
<div> <div>
<span class="led-number">{{ <span class="led-number">
{{
selProject.scheduledStartTime | toDate selProject.scheduledStartTime | toDate
}}</span> }}
</span>
</div> </div>
</div> </div>
</div> </div>
@ -306,13 +258,14 @@
<div class="project-amount-bgd"> <div class="project-amount-bgd">
<div class="project-amount-con"> <div class="project-amount-con">
<p> <p>
<svg-icon icon-class="date"></svg-icon> <svg-icon icon-class="date"></svg-icon>
计划竣工日期
</p> </p>
<div> <div>
<span class="led-number">{{ <span class="led-number">
{{
selProject.plannedCompletionTime | toDate selProject.plannedCompletionTime | toDate
}}</span> }}
</span>
</div> </div>
</div> </div>
</div> </div>
@ -322,13 +275,14 @@
<div class="project-amount-bgd"> <div class="project-amount-bgd">
<div class="project-amount-con"> <div class="project-amount-con">
<p> <p>
<svg-icon icon-class="date"></svg-icon> <svg-icon icon-class="date"></svg-icon>
实际开工日期
</p> </p>
<div> <div>
<span class="led-number">{{ <span class="led-number">
{{
selProject.actualOperatingTime | toDate selProject.actualOperatingTime | toDate
}}</span> }}
</span>
</div> </div>
</div> </div>
</div> </div>
@ -338,13 +292,14 @@
<div class="project-amount-bgd"> <div class="project-amount-bgd">
<div class="project-amount-con"> <div class="project-amount-con">
<p> <p>
<svg-icon icon-class="date"></svg-icon> <svg-icon icon-class="date"></svg-icon>
合同工期
</p> </p>
<div> <div>
<span class="led-number">{{ <span class="led-number">
{{
selProject.projectTimeLimit || "" selProject.projectTimeLimit || ""
}}</span> }}
</span>
</div> </div>
</div> </div>
@ -355,8 +310,7 @@
<div class="project-amount-bgd"> <div class="project-amount-bgd">
<div class="project-amount-con"> <div class="project-amount-con">
<p> <p>
<svg-icon icon-class="area"></svg-icon> <svg-icon icon-class="area"></svg-icon>
建筑面积
</p> </p>
<div> <div>
<span class="led-number">{{ selProject.floorArea || "" }}</span> <span class="led-number">{{ selProject.floorArea || "" }}</span>
@ -373,18 +327,8 @@
</div> </div>
<div class="prj-img-list"> <div class="prj-img-list">
<span class="prj-img-nav" v-if="showImgVideo"> <span class="prj-img-nav" v-if="showImgVideo">
<span <span class="prj-img-nav-item" :class="imgVideoSel == 1 ? 'is-active' : ''" @click="imgVideoSel = 1">效果图</span>
class="prj-img-nav-item" <span class="prj-img-nav-item" :class="imgVideoSel == 2 ? 'is-active' : ''" @click="imgVideoSel = 2">视频</span>
: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> </span>
<el-carousel height="100%" :autoplay="false" v-if="imgVideoSel == 1"> <el-carousel height="100%" :autoplay="false" v-if="imgVideoSel == 1">
<el-carousel-item v-for="(it, idx) in prjImgs" :key="idx"> <el-carousel-item v-for="(it, idx) in prjImgs" :key="idx">
@ -392,9 +336,8 @@
</el-carousel-item> </el-carousel-item>
</el-carousel> </el-carousel>
<div class="prj-video-layout" v-if="imgVideoSel == 2"> <div class="prj-video-layout" v-if="imgVideoSel == 2">
<video class="prj-video"> <video class="prj-video" controls="controls" autoplay="autoplay" loop="loop">
<source :src="prjVideo" type="video/mp4" /> <source :src="prjVideo" controls="controls" type="video/mp4" />您的浏览器不支持Video标签
您的浏览器不支持Video标签
</video> </video>
</div> </div>
</div> </div>
@ -404,19 +347,13 @@
<div class="dangerous-timeline-max w-scroll"> <div class="dangerous-timeline-max w-scroll">
<div class="dangerous-timeline-min" :style="{ width: maxWidth + 'px' }"> <div class="dangerous-timeline-min" :style="{ width: maxWidth + 'px' }">
<template v-if="projectBuildNode && projectBuildNode.length > 0"> <template v-if="projectBuildNode && projectBuildNode.length > 0">
<div <div class="dangerous-timeline-con" v-for="(item, idx) in projectBuildNode" :key="idx">
class="dangerous-timeline-con"
v-for="(item, idx) in projectBuildNode"
:key="idx"
>
<div class="dangerous-text" v-html="item.nodeText"></div> <div class="dangerous-text" v-html="item.nodeText"></div>
<div class="dangerous-dot"> <div class="dangerous-dot">
<div class="dangerous-dot-item"></div> <div class="dangerous-dot-item"></div>
</div> </div>
<div class="dangerous-time-max"> <div class="dangerous-time-max">
<div class="dangerous-time-min"> <div class="dangerous-time-min">计划{{ item.planEndDate || "---" }}</div>
计划{{ item.planEndDate || "---" }}
</div>
<div class="dangerous-time-min">实际{{ item.endDate || "--" }}</div> <div class="dangerous-time-min">实际{{ item.endDate || "--" }}</div>
<div <div
v-if="item.finishState > 0" v-if="item.finishState > 0"
@ -426,9 +363,7 @@
' state-' + ' state-' +
item.finishState item.finishState
" "
> >{{ item.finish }}</div>
{{ item.finish }}
</div>
</div> </div>
</div> </div>
</template> </template>
@ -441,18 +376,15 @@
</module-one-1-2> </module-one-1-2>
</el-col> </el-col>
<el-col :span="6" class="h100"> <el-col :span="6" class="h100">
<module-one-2-1 label="" class="no-title no-border work-info"> <module-one-2-1 label class="no-title no-border work-info">
<div class="analyse-map"> <div class="analyse-map">
<div class="analyse-title analyse_title_blue"> <div class="analyse-title analyse_title_blue">
<div class="analyse-text">安全生产</div> <div class="analyse-text">安全生产</div>
</div> </div>
</div> </div>
<div <div class="work-days" style="display: flex; align-items: center; justify-content: center">
class="work-days"
style="display: flex; align-items: center; justify-content: center"
>
<div style="margin-right: 10px"></div> <div style="margin-right: 10px"></div>
<people-number :number="startDays" unit=""></people-number> <people-number :number="startDays" unit></people-number>
<div style="margin-left: 10px"></div> <div style="margin-left: 10px"></div>
</div> </div>
<div class="analyse-map"> <div class="analyse-map">
@ -466,25 +398,19 @@
<span class="weather-day">今天</span> <span class="weather-day">今天</span>
<span class="weather-info">{{ weathers[0].weather }}</span> <span class="weather-info">{{ weathers[0].weather }}</span>
<img class="weather-img" :src="weathers[0].img" /> <img class="weather-img" :src="weathers[0].img" />
<span class="weather-temp" <span class="weather-temp">{{ weathers[0].highTemp }} {{ weathers[0].lowTemp }}</span>
>{{ weathers[0].highTemp }} {{ weathers[0].lowTemp }}</span
>
</div> </div>
<div v-if="weathers.length > 1" class="weather-item"> <div v-if="weathers.length > 1" class="weather-item">
<span class="weather-day">明天</span> <span class="weather-day">明天</span>
<span class="weather-info">{{ weathers[1].weather }}</span> <span class="weather-info">{{ weathers[1].weather }}</span>
<img class="weather-img" :src="weathers[1].img" /> <img class="weather-img" :src="weathers[1].img" />
<span class="weather-temp" <span class="weather-temp">{{ weathers[1].highTemp }} {{ weathers[1].lowTemp }}</span>
>{{ weathers[1].highTemp }} {{ weathers[1].lowTemp }}</span
>
</div> </div>
<div v-if="weathers.length > 2" class="weather-item"> <div v-if="weathers.length > 2" class="weather-item">
<span class="weather-day">后天</span> <span class="weather-day">后天</span>
<span class="weather-info">{{ weathers[2].weather }}</span> <span class="weather-info">{{ weathers[2].weather }}</span>
<img class="weather-img" :src="weathers[2].img" /> <img class="weather-img" :src="weathers[2].img" />
<span class="weather-temp" <span class="weather-temp">{{ weathers[2].highTemp }} {{ weathers[2].lowTemp }}</span>
>{{ weathers[2].highTemp }} {{ weathers[2].lowTemp }}</span
>
</div> </div>
</div> </div>
<div class="weather-info"> <div class="weather-info">
@ -535,9 +461,7 @@
<div class="wi-data"> <div class="wi-data">
<div class="wi-label">当前风向</div> <div class="wi-label">当前风向</div>
<div class="wi-data-unit"> <div class="wi-data-unit">
<span class="wi-txt" <span class="wi-txt">{{ weatherInfo.windDirection }}{{ weatherInfo.windScale }}</span>
>{{ weatherInfo.windDirection }}{{ weatherInfo.windScale }}</span
>
</div> </div>
</div> </div>
</el-col> </el-col>
@ -554,11 +478,11 @@
</template> </template>
<script> <script>
import projectInfoDialog from "./detail/projectInfoDialog.vue"; import projectInfoDialog from './detail/projectInfoDialog.vue'
import staffSurveyChart from "@/components/staffSurveyChart.vue"; import staffSurveyChart from '@/components/staffSurveyChart.vue'
import MonitAndWarning from "./components/MonitAndWarning.vue"; import MonitAndWarning from './components/MonitAndWarning.vue'
import attendanceInfoDlg from "./detail/attendanceInfoDlg.vue"; import attendanceInfoDlg from './detail/attendanceInfoDlg.vue'
import debounce from "lodash.debounce"; import debounce from 'lodash.debounce'
export default { export default {
components: { components: {
projectInfoDialog, projectInfoDialog,
@ -569,7 +493,7 @@ export default {
data() { data() {
return { return {
chartKey: 0, chartKey: 0,
dpi: "", dpi: '',
selProject: null, selProject: null,
prjInfo: {}, prjInfo: {},
deptType1: [], // deptType1: [], //
@ -585,21 +509,21 @@ export default {
attendanceNav: 0, attendanceNav: 0,
attendanceTotal: 0, attendanceTotal: 0,
attendanceData: [ attendanceData: [
{ text: "普通工种", value: 0, id: 0 }, { text: '普通工种', value: 0, id: 0 },
{ text: "特殊工种", value: 0, id: 0 }, { text: '特殊工种', value: 0, id: 0 },
{ text: "管理人员", value: 0, id: 0 }, { text: '管理人员', value: 0, id: 0 },
], ],
deviceNav: 0, deviceNav: 0,
deviceData: [ deviceData: [
{ text: "自有", value: 45 }, { text: '自有', value: 45 },
{ text: "租赁", value: 55 }, { text: '租赁', value: 55 },
{ text: "分包", value: 65 }, { text: '分包', value: 65 },
], ],
costIndex: 0, costIndex: 0,
direction: "right", direction: 'right',
costInterval: undefined, costInterval: undefined,
cityInfo: [], cityInfo: [],
cityId: "", cityId: '',
startDays: 0, startDays: 0,
weathers: [], weathers: [],
weatherInfo: {}, weatherInfo: {},
@ -607,102 +531,95 @@ export default {
maxWidth: 0, maxWidth: 0,
minWidth: 100, minWidth: 100,
costOutData: {}, costOutData: {},
photographyList:[], photographyList: [],
}; }
}, },
mounted() { mounted() {
window.detailApp = this; window.detailApp = this
this.$store.dispatch("ChangeNav", 2); this.$store.dispatch('ChangeNav', 2)
this.$bus.$on( this.$bus.$on(
"projectChange", 'projectChange',
debounce((prj) => { debounce((prj) => {
this.selProject = prj; this.selProject = prj
this.init(); this.init()
}) })
); )
this.selProject = this.$store.getters.selProject; this.selProject = this.$store.getters.selProject
this.init(); this.init()
this.dpi = this.$dpi(); this.dpi = this.$dpi()
window.addEventListener("resize", () => { window.addEventListener('resize', () => {
if (this.dpi != this.$dpi()) { if (this.dpi != this.$dpi()) {
this.dpi = this.$dpi(); this.dpi = this.$dpi()
this.chartKey++; this.chartKey++
} }
}); })
this.costInterval = setInterval(this.manufacturingCostRoll, 5000); this.costInterval = setInterval(this.manufacturingCostRoll, 5000)
this.$api.weather.getCityInfo().then((d) => { this.$api.weather.getCityInfo().then((d) => {
this.cityInfo = d.data?.city || []; this.cityInfo = d.data?.city || []
}); })
}, },
methods: { methods: {
showDetailDlg() { showDetailDlg() {
this.$refs.infoDlg.showDialog({ this.$refs.infoDlg.showDialog({
prjInfo: this.prjInfo, prjInfo: this.prjInfo,
selProject: this.selProject, selProject: this.selProject,
}); })
}, },
init() { init() {
if (!this.selProject) { if (!this.selProject) {
return; return
} }
this.$api.project.getProjectInfo(this.selProject.id).then((d) => { this.$api.project.getProjectInfo(this.selProject.id).then((d) => {
this.prjInfo = d.data || {}; this.prjInfo = d.data || {}
let tmps = this.prjInfo.projectDeptsList || []; let tmps = this.prjInfo.projectDeptsList || []
const func = (t) => { const func = (t) => {
let objs = tmps.filter((it) => it.deptType == t); let objs = tmps.filter((it) => it.deptType == t)
return objs.length > 0 ? objs[0] : null; return objs.length > 0 ? objs[0] : null
}; }
this.prjImgs = (this.prjInfo?.setting?.orgImage || "") this.prjImgs = (this.prjInfo?.setting?.orgImage || '').split(',').filter((d) => d)
.split(",") this.prjVideo = this.prjInfo?.setting?.orgVideo || ''
.filter((d) => d); this.showImgVideo = this.prjImgs.length > 0 && this.prjVideo
this.prjVideo = this.prjInfo?.setting?.orgVideo || ""; this.imgVideoSel = 1
this.showImgVideo = this.prjImgs.length > 0 && this.prjVideo; this.deptType1 = func('建设单位')
this.imgVideoSel = 1; this.deptType2 = func('设计单位')
this.deptType1 = func("建设单位");
this.deptType2 = func("设计单位");
this.deptType3 = { this.deptType3 = {
deptName: this.prjInfo.disDeptName, deptName: this.prjInfo.disDeptName,
leader: this.prjInfo.projectPerson, leader: this.prjInfo.projectPerson,
phone: this.prjInfo.projectPersonPhone, phone: this.prjInfo.projectPersonPhone,
}; }
this.deptType4 = func("监理单位"); this.deptType4 = func('监理单位')
this.deptType5 = func("检测单位"); this.deptType5 = func('检测单位')
this.deptType6 = func("勘察单位"); this.deptType6 = func('勘察单位')
let tmp = this.cityInfo.map((d) => { let tmp = this.cityInfo.map((d) => {
d[18] = d[18] = Math.abs(d[4] - this.prjInfo.latitude) + Math.abs(d[5] - this.prjInfo.longitude)
Math.abs(d[4] - this.prjInfo.latitude) + return d
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] : ''
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) { if (this.prjInfo.actualOperatingTime) {
this.startDays = this.startDays = this.$dt(this.prjInfo.actualOperatingTime).diff(new Date(), 'day') * -1
this.$dt(this.prjInfo.actualOperatingTime).diff(new Date(), "day") * -1;
} else { } else {
this.startDays = 0; this.startDays = 0
} }
if (this.cityId) { if (this.cityId) {
this.$api.weather.getByCity(this.cityId).then((w) => { this.$api.weather.getByCity(this.cityId).then((w) => {
this.weathers = w.data || []; this.weathers = w.data || []
}); })
this.getWeatherNowInfo(); this.getWeatherNowInfo()
} }
}); })
this.loadAttendanceData(); this.loadAttendanceData()
this.loadMilestoneData(); this.loadMilestoneData()
this.loadCostOutput(); this.loadCostOutput()
this.initPhotographyList(); this.initPhotographyList()
}, },
initPhotographyList(){ initPhotographyList() {
this.$api.detail this.$api.detail.photographyList(this.selProject.id).then((d) => {
.photographyList(this.selProject.id) this.photographyList = d.data
.then((d) => { })
this.photographyList = d.data;
});
}, },
loadCostOutput() { loadCostOutput() {
let dt = this.$dt(new Date()); let dt = this.$dt(new Date())
this.$api.detail this.$api.detail
.costOutputSelectYearAndMonth({ .costOutputSelectYearAndMonth({
comId: this.selProject.comId, comId: this.selProject.comId,
@ -711,8 +628,8 @@ export default {
month: dt.$M + 1, month: dt.$M + 1,
}) })
.then((d) => { .then((d) => {
this.costOutData = d; this.costOutData = d
}); })
}, },
loadMilestoneData() { loadMilestoneData() {
this.$api.detail this.$api.detail
@ -723,28 +640,28 @@ export default {
projectId: this.selProject.id, projectId: this.selProject.id,
}) })
.then((d) => { .then((d) => {
this.projectBuildNode = d; this.projectBuildNode = d
let itemWidth = this.$dpi() == "1K" ? 200 : this.$dpi() == "2K" ? 300 : 500; let itemWidth = this.$dpi() == '1K' ? 200 : this.$dpi() == '2K' ? 300 : 500
this.maxWidth = itemWidth * this.projectBuildNode.length; this.maxWidth = itemWidth * this.projectBuildNode.length
let n = 0; let n = 0
for (let i = 0; i < this.projectBuildNode.length; i++) { for (let i = 0; i < this.projectBuildNode.length; i++) {
if (this.projectBuildNode[i].finish == "进行中") { if (this.projectBuildNode[i].finish == '进行中') {
n = i; n = i
} }
} }
this.minWidth = n * itemWidth + 100; this.minWidth = n * itemWidth + 100
}); })
}, },
loadAttendanceData() { loadAttendanceData() {
let ajax = this.$api.detail.groupByCraftType; let ajax = this.$api.detail.groupByCraftType
let posData = { let posData = {
comId: this.selProject.comId, comId: this.selProject.comId,
projectId: this.selProject.id, projectId: this.selProject.id,
}; }
if (this.attendanceNav == 1) { if (this.attendanceNav == 1) {
ajax = this.$api.detail.groupByCraftTypeByAttendance; ajax = this.$api.detail.groupByCraftTypeByAttendance
//posData.createTime = this.$dt(new Date()).format("YYYY-MM-DD"); //posData.createTime = this.$dt(new Date()).format("YYYY-MM-DD");
posData.createTime = "2024-10-13"; posData.createTime = '2024-10-13'
} }
ajax(posData).then((d) => { ajax(posData).then((d) => {
this.attendanceData = (d.data || []).map((it) => { this.attendanceData = (d.data || []).map((it) => {
@ -752,69 +669,69 @@ export default {
text: it.createBy, text: it.createBy,
value: it.id || 0, value: it.id || 0,
id: it.craftType, id: it.craftType,
}; }
}); })
let count = 0; let count = 0
this.attendanceData.forEach((it) => { this.attendanceData.forEach((it) => {
count += it.value; count += it.value
}); })
this.attendanceTotal = count; this.attendanceTotal = count
}); })
}, },
getWeatherNowInfo() { getWeatherNowInfo() {
this.$api.weather.getCityNowInfo(this.cityId).then((cn) => { this.$api.weather.getCityNowInfo(this.cityId).then((cn) => {
this.weatherInfo = cn?.data?.now || {}; this.weatherInfo = cn?.data?.now || {}
setTimeout(this.getWeatherNowInfo, 1000 * 60 * 5); //5 setTimeout(this.getWeatherNowInfo, 1000 * 60 * 5) //5
}); })
}, },
doAttendanceNav(n) { doAttendanceNav(n) {
this.attendanceNav = n; this.attendanceNav = n
this.loadAttendanceData(); this.loadAttendanceData()
}, },
doShowAttendanceDetail() { doShowAttendanceDetail() {
this.$refs.attDlg.showDialog({ this.$refs.attDlg.showDialog({
prjInfo: this.prjInfo, prjInfo: this.prjInfo,
attendanceData: this.attendanceData, attendanceData: this.attendanceData,
type: this.attendanceNav, type: this.attendanceNav,
}); })
}, },
doDeviceNav(n) { doDeviceNav(n) {
this.deviceNav = n; this.deviceNav = n
}, },
costMouseover() { costMouseover() {
clearInterval(this.costInterval); clearInterval(this.costInterval)
}, },
costMouseout() { costMouseout() {
this.costInterval = setInterval(this.manufacturingCostRoll, 5000); this.costInterval = setInterval(this.manufacturingCostRoll, 5000)
}, },
modifyLeftBtn() { modifyLeftBtn() {
this.direction = "left"; this.direction = 'left'
this.manufacturingCostRoll(); this.manufacturingCostRoll()
}, },
modifyRightBtn() { modifyRightBtn() {
this.direction = "right"; this.direction = 'right'
this.manufacturingCostRoll(); this.manufacturingCostRoll()
}, },
manufacturingCostRoll() { manufacturingCostRoll() {
var width = $(".project-amount").innerWidth(); var width = $('.project-amount').innerWidth()
if (this.direction == "right") { if (this.direction == 'right') {
if (this.costIndex == 6) { if (this.costIndex == 6) {
this.costIndex = 0; this.costIndex = 0
} else { } else {
this.costIndex = this.costIndex + 3; this.costIndex = this.costIndex + 3
} }
} else { } else {
if (this.costIndex == 0) { if (this.costIndex == 0) {
this.costIndex = 6; this.costIndex = 6
} else { } else {
this.costIndex = this.costIndex - 3; this.costIndex = this.costIndex - 3
} }
} }
$("#modifyContent").animate({ scrollLeft: width * this.costIndex + "px" }); $('#modifyContent').animate({ scrollLeft: width * this.costIndex + 'px' })
this.direction = "right"; this.direction = 'right'
}, },
}, },
}; }
</script> </script>
<style lang="less"> <style lang="less">

View File

@ -4,17 +4,9 @@
<module-one-3-1 label="项目全景列表"> <module-one-3-1 label="项目全景列表">
<div class="left-list scroll"> <div class="left-list scroll">
<template v-if="infoList && infoList.length > 0"> <template v-if="infoList && infoList.length > 0">
<div <div v-for="(item, index) in infoList" :key="index" :class="info==item?'is-active':''" class="video-item" @click.stop="playVideo(item)">
v-for="(item, index) in infoList"
:key="index"
class="video-item"
@click.stop="playVideo(item)"
>
<span class="div-date">{{ item.videoDate }}</span> <span class="div-date">{{ item.videoDate }}</span>
<i <i class="header-icon el-icon-camera-solid" style="font-size: 24px; color: aqua"></i>
class="header-icon el-icon-camera-solid"
style="font-size: 24px; color: aqua"
></i>
</div> </div>
</template> </template>
<div v-else style="text-align: center" class="div-no-data"> <div v-else style="text-align: center" class="div-no-data">
@ -31,8 +23,7 @@
<span class="sp-title">{{ info.videoDate }}</span> <span class="sp-title">{{ info.videoDate }}</span>
</div> </div>
<video style="width: 98%;" controls> <video style="width: 98%;" controls>
<source :src="info.videoUrl" type="video/mp4" /> <source :src="info.videoUrl" type="video/mp4" />您的浏览器不支持Video标签
您的浏览器不支持Video标签
</video> </video>
</template> </template>
<div v-else style="text-align: center" class="div-no-data"> <div v-else style="text-align: center" class="div-no-data">
@ -51,40 +42,40 @@ export default {
info: null, info: null,
activeNames: [], activeNames: [],
infoList: {}, infoList: {},
}; }
}, },
mounted() { mounted() {
window.photography = this; window.photography = this
this.$store.dispatch("ChangeNav", 501); this.$store.dispatch('ChangeNav', 501)
this.$bus.$on("projectChange", (prj) => { this.$bus.$on('projectChange', (prj) => {
this.selProject = prj; this.selProject = prj
this.init(); this.init()
}); })
this.selProject = this.$store.getters.selProject; this.selProject = this.$store.getters.selProject
this.init(); this.init()
}, },
methods: { methods: {
playVideo(it) { playVideo(it) {
this.info = null; this.info = null
setTimeout(() => { setTimeout(() => {
this.info = it; this.info = it
}, 400); }, 400)
}, },
init() { init() {
if (!this.selProject) { if (!this.selProject) {
return; return
} }
this.$api.detail.photographyList(this.selProject.id).then((d) => { this.$api.detail.photographyList(this.selProject.id).then((d) => {
if (d.data.length > 0) { if (d.data.length > 0) {
this.info = d.data[0]; this.info = d.data[0]
} else { } else {
this.info = null; this.info = null
} }
this.infoList = d.data; this.infoList = d.data
}); })
}, },
}, },
}; }
</script> </script>
<style lang="less"> <style lang="less">
@ -109,7 +100,7 @@ export default {
padding: 0px 40px; padding: 0px 40px;
font-size: 40px; font-size: 40px;
background-size: 100% 100%; background-size: 100% 100%;
background-image: url("../../assets/images/bgphoto.png"); background-image: url('../../assets/images/bgphoto.png');
} }
video { video {
width: 100%; width: 100%;
@ -131,6 +122,40 @@ export default {
height: 4px; height: 4px;
} }
} }
.screen-one-3-1 {
height: calc(100% - 20px) !important;
.left-list {
padding: 10px 10px 10px 0px;
.video-item {
line-height: 40px;
border: solid 1px #1e8fff83;
padding: 0px 20px;
margin-top: 10px;
position: relative;
cursor: pointer;
&:first-child {
margin-top: 0px;
}
.header-icon {
position: absolute;
right: 10px;
top: 10px;
}
&.is-active {
background-color: #089fff;
color: #fff;
&:hover {
background-color: #089fff;
color: #fff;
}
}
&:hover {
background-color: #08a0ff95;
color: #fff;
}
}
}
}
/deep/ .screen-one-3-1 { /deep/ .screen-one-3-1 {
.el-collapse { .el-collapse {
border: none; border: none;