Merge branch 'dev_xd' of http://62.234.3.186:3000/jiangyq/YZProjectCloud into dev_xd
commit
6d1663f282
|
@ -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>
|
|
@ -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>
|
|
@ -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);
|
||||||
|
|
|
@ -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: {},
|
||||||
|
@ -608,101 +532,94 @@ export default {
|
||||||
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">
|
||||||
|
|
|
@ -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;
|
||||||
|
|
Loading…
Reference in New Issue