1581 lines
50 KiB
Vue
1581 lines
50 KiB
Vue
<template>
|
||
<!-- <vue-scroll> -->
|
||
<div class="projectSummary">
|
||
<closePage></closePage>
|
||
<div class="title_wrap">
|
||
<img v-if="LOGO_white" :src="'./img/logo/'+LOGO_white+'.png'" class="logo" />
|
||
<img src="@/assets/images/overview2/headerBG.png" class="headerBG" />
|
||
<div class="flex title_content">
|
||
<div>
|
||
<!-- 安全施工1456天14小时53分钟49秒 -->
|
||
</div>
|
||
<div
|
||
class="projectName"
|
||
>{{projectData.projectName}}
|
||
<!-- - {{$t('message.projectSummary.overview')}} -->
|
||
</div>
|
||
<div>
|
||
|
||
<!-- {{$t('message.projectSummary.timeRemaining')}}：789 {{$t('message.projectSummary.sky')}} -->
|
||
</div>
|
||
</div>
|
||
</div>
|
||
<div class="content flex4">
|
||
<div class="content_l">
|
||
<div class="content_height">
|
||
<div class="flex3 content_title">
|
||
<img src="@/assets/images/overview2/titleBG.png" class="title_img_bg" />
|
||
<div class="flex title_r">
|
||
<div class="title_name">{{showServicesData.showTitle}}</div>
|
||
<div>
|
||
<img
|
||
src="@/assets/images/overview2/config.png"
|
||
style="margin-right:18px;cursor: pointer;"
|
||
@click="configurationBrief=true"
|
||
/>
|
||
<img
|
||
src="@/assets/images/overview2/refresh.png"
|
||
style="cursor: pointer;"
|
||
@click="getSingleData(1)"
|
||
/>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
<div class="content_content" v-if="!noServicesData">
|
||
<img class="proImg" :src="showServicesData.printUrl" />
|
||
<div v-if="!showServicesData.switchScroll" class="text">
|
||
<vue-scroll>
|
||
<pre>{{showServicesData.text}}</pre>
|
||
</vue-scroll>
|
||
</div>
|
||
<marquee
|
||
class="text"
|
||
v-else
|
||
id="affiche"
|
||
align="left"
|
||
direction="up"
|
||
height="60%"
|
||
width="100%"
|
||
hspace="10"
|
||
vspace="20"
|
||
loop="-1"
|
||
scrollamount="5"
|
||
scrolldelay="100"
|
||
onmouseover="this.stop()"
|
||
onmouseout="this.start()"
|
||
behavior="alternate"
|
||
>
|
||
<div>
|
||
<pre>{{showServicesData.text}}</pre>
|
||
</div>
|
||
</marquee>
|
||
</div>
|
||
<div class="content_content noData" v-else>
|
||
<img src="@/assets/images/noData.png" style="margin-top:50%" />
|
||
<div style="color:#224289">{{$t('message.projectSummary.noData')}}</div>
|
||
</div>
|
||
</div>
|
||
<div class="content_bottom">
|
||
<div class="flex3 content_title">
|
||
<img src="@/assets/images/overview2/titleBG.png" class="title_img_bg" />
|
||
<div class="flex title_r">
|
||
<div class="title_name">{{$t('message.projectSummary.statistics')}}</div>
|
||
<div>
|
||
<!-- <img src="@/assets/images/overview2/config.png" style="margin-right:18px" />
|
||
<img src="@/assets/images/overview2/refresh.png" />-->
|
||
</div>
|
||
</div>
|
||
</div>
|
||
<div class="content_content" style="padding:0">
|
||
<div class="device_wrap flex3">
|
||
<devNumChart :title='$t("message.projectSummary.ufaceDevNum")' :num="statisticsCount.devcount.ufaceDevNum" :totalDevNum="totalDevNum"></devNumChart>
|
||
<!-- <div ref="device1" class="device1"></div> -->
|
||
<!-- <div ref="device2" class="device2"></div> -->
|
||
<devNumChart :title='$t("message.projectSummary.environmentDevNum")' :num="statisticsCount.devcount.environmentDevNum" :totalDevNum="totalDevNum"></devNumChart>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
<div class="content_c">
|
||
<div class="content_height">
|
||
<div class="flex3 content_title">
|
||
<img src="@/assets/images/overview2/titleBG.png" class="title_img_bg" />
|
||
<div class="flex title_r" v-if="COMPANY=='hezhan'">
|
||
<div class="title_name">
|
||
{{$t(message.projectInfo.bimModel)}}
|
||
<!-- BIM模型 -->
|
||
</div>
|
||
</div>
|
||
<div class="flex title_r" v-else>
|
||
<div class="title_name">{{showVideoTitle}}</div>
|
||
<div>
|
||
<img
|
||
src="@/assets/images/overview2/config.png"
|
||
style="margin-right:18px;cursor: pointer;"
|
||
@click="configurationVideo=true"
|
||
/>
|
||
<img
|
||
src="@/assets/images/overview2/refresh.png"
|
||
style="cursor: pointer;"
|
||
@click="getSingleData(2)"
|
||
/>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
<div
|
||
class="content_content"
|
||
v-if="!noVideoData&&COMPANY!='hezhan'"
|
||
style="padding-left:8px;padding-right:8px"
|
||
>
|
||
<!-- 视频插件 -->
|
||
<!-- <videoModule :value="showVideoData[0]" ></videoModule> -->
|
||
|
||
<el-carousel
|
||
|
||
style="width:100%;height:100%"
|
||
indicator-position="none"
|
||
arrow="always"
|
||
:autoplay="false"
|
||
@change="changeCarousel"
|
||
>
|
||
<el-carousel-item
|
||
v-for="(item,index) in showVideoData"
|
||
:key="index"
|
||
style="height:100%"
|
||
>
|
||
<videoModule
|
||
:value="videoList"
|
||
:displayBottomMod="false"
|
||
:winNumBer="1"
|
||
v-show="showVideoData[videoIndex].videoType!=4"
|
||
:autoplay="true"
|
||
></videoModule>
|
||
<video
|
||
v-show="showVideoData[videoIndex].videoType==4"
|
||
width="100%"
|
||
height="100%"
|
||
:autoplay="showVideoData[videoIndex].videoType==4&&'autoplay'"
|
||
muted="muted"
|
||
loop="loop"
|
||
class="videoClass"
|
||
controls="controls"
|
||
:src="showVideoData[videoIndex].videoType==4&&item.videoUrl"
|
||
id="videoDOM"
|
||
:poster="item.coverUrl"
|
||
></video>
|
||
</el-carousel-item>
|
||
</el-carousel>
|
||
|
||
|
||
|
||
</div>
|
||
<div v-else-if="COMPANY=='hezhan'" class="content_content2">
|
||
<bimCenter></bimCenter>
|
||
</div>
|
||
<div class="content_content noData" v-else>
|
||
<img src="@/assets/images/noData.png" style="margin-top:20%" />
|
||
<div style="color:#224289">{{$t('message.projectSummary.noData')}}</div>
|
||
</div>
|
||
|
||
</div>
|
||
<div class="content_bottom">
|
||
<div class="flex3 content_title">
|
||
<img src="@/assets/images/overview2/titleBG.png" class="title_img_bg" />
|
||
<div class="flex title_r">
|
||
<div class="title_name">{{showEffectTitle}}</div>
|
||
<div>
|
||
<img
|
||
src="@/assets/images/overview2/config.png"
|
||
style="margin-right:18px;cursor: pointer;"
|
||
@click="effectPicture = true"
|
||
/>
|
||
<img
|
||
src="@/assets/images/overview2/refresh.png"
|
||
style="cursor: pointer;"
|
||
@click="getSingleData(3)"
|
||
/>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
<div class="content_content" style="padding:23px 15px 18px" v-if="!noEffectData">
|
||
<div class="effect_wrap flex3">
|
||
<el-carousel
|
||
:interval="5000"
|
||
style="width:100%;height:100%"
|
||
indicator-position="none"
|
||
arrow="hover"
|
||
>
|
||
<el-carousel-item
|
||
v-for="(pageData,index) in showEffectData"
|
||
:key="index"
|
||
style="height:100%"
|
||
class="flex3"
|
||
>
|
||
<div class="effect_img_content" v-for="(item,index2) in pageData" :key="index2">
|
||
<!-- <div :preview="item.effectUrl"
|
||
:style="{'background-image':'url('+ item.effectUrl +')'}"
|
||
class="effectImg"
|
||
></div>-->
|
||
<img :preview="item.effectUrl" :src="item.effectUrl" class="effectImg" />
|
||
<div>{{item.effectName}}</div>
|
||
<div class="dot"></div>
|
||
</div>
|
||
</el-carousel-item>
|
||
</el-carousel>
|
||
</div>
|
||
</div>
|
||
<div class="content_content noData" v-else>
|
||
<img src="@/assets/images/noData.png" style="margin-top:5%" />
|
||
<div style="color:#224289">{{$t('message.projectSummary.noData')}}</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
<div class="content_r">
|
||
<div class="content_title" style="height:50%">
|
||
<div class="flex3 content_title">
|
||
<img src="@/assets/images/overview2/titleBG.png" class="title_img_bg" />
|
||
<div class="flex title_r">
|
||
<div class="title_name">{{$t('message.projectSummary.schedule')}}</div>
|
||
<div></div>
|
||
</div>
|
||
</div>
|
||
<div class="content_content" style="padding:0; ">
|
||
<div ref="projectSchedule" class="projectSchedule"></div>
|
||
</div>
|
||
</div>
|
||
<div class="content_bottom personnel" @click="goPerson">
|
||
<div class="flex3 content_title">
|
||
<img src="@/assets/images/overview2/titleBG.png" class="title_img_bg" />
|
||
<div class="flex title_r">
|
||
<div class="title_name">{{$t('message.projectSummary.management')}}</div>
|
||
<div></div>
|
||
</div>
|
||
</div>
|
||
<div class="content_content" style="padding:23px 0px 18px">
|
||
<div class="people_wrap">
|
||
<!-- <img src="@/assets/images/overview2/blockBG.png" /> -->
|
||
<div class="realTime_num">
|
||
<div class="number">
|
||
<!-- statisticsCount.currentMonthEducationPerson -->
|
||
<countTo :startVal="0" :endVal="statisticsCount.presencecount.totalPerson" :duration="5000"></countTo>
|
||
</div>
|
||
<!-- {{$t('message.firmProject.leftBlock1.Block3.numBox4')}} -->
|
||
<div>{{$t('message.projectSummary.realtimeNumber')}}</div>
|
||
</div>
|
||
<div class="attendance_num">
|
||
<div class="number">
|
||
<countTo :startVal="0" :endVal="statisticsCount.presencecount.totalPerson" :duration="5000"></countTo>
|
||
</div>
|
||
<div>{{$t('message.projectSummary.attendance')}}</div>
|
||
</div>
|
||
<div class="headcount">
|
||
<div class="number">
|
||
<countTo :startVal="0" :endVal="statisticsCount.workercount.totalPerson" :duration="5000"></countTo>
|
||
</div>
|
||
<div>{{$t('message.projectSummary.headcount')}}</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
<div class="content_bottom" @click="goEnvir">
|
||
<div class="flex3 content_title">
|
||
<img src="@/assets/images/overview2/titleBG.png" class="title_img_bg" />
|
||
<div class="flex title_r">
|
||
<div class="title_name">{{$t('message.projectSummary.monitoring')}}</div>
|
||
<div></div>
|
||
</div>
|
||
</div>
|
||
<div class="content_content" style="padding:0;">
|
||
<airQulityChart></airQulityChart>
|
||
<!-- <div ref="monitor" style="width:100%;height:100%"></div>
|
||
<div class="colour flex5">
|
||
<div class="colour_content">
|
||
<div
|
||
class="bg"
|
||
style="background:#1FCCC6; border-top-left-radius: 8px; border-bottom-left-radius: 8px;"
|
||
></div>
|
||
<div class="size">{{$t('message.projectSummary.actor')}}</div>
|
||
</div>
|
||
<div class="colour_content">
|
||
<div class="bg" style="background:#FFBB38"></div>
|
||
<div class="size">{{$t('message.projectSummary.fine')}}</div>
|
||
</div>
|
||
<div class="colour_content">
|
||
<div class="bg" style="background:#FE7A18"></div>
|
||
<div class="size">{{$t('message.projectSummary.mildContamination')}}</div>
|
||
</div>
|
||
<div class="colour_content">
|
||
<div class="bg" style="background:#7718FE"></div>
|
||
<div class="size">{{$t('message.projectSummary.middleLevelPollution')}}</div>
|
||
</div>
|
||
<div class="colour_content">
|
||
<div class="bg" style="background:#890EA1"></div>
|
||
<div class="size">{{$t('message.projectSummary.actheavyPollutionor')}}</div>
|
||
</div>
|
||
<div class="colour_content">
|
||
<div
|
||
class="bg"
|
||
style="background:#970C0C; border-top-right-radius: 8px; border-bottom-right-radius: 8px;"
|
||
></div>
|
||
<div class="size">{{$t('message.projectSummary.severeContamination')}}</div>
|
||
</div>
|
||
</div> -->
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
<!-- //项目简介 -->
|
||
<div class="configuration_wrap" v-if="configurationBrief">
|
||
<div class="configuration_content">
|
||
<div class="content_wrap">
|
||
<div class="title">{{$t('message.projectSummary.projectIntro')}}</div>
|
||
<img
|
||
src="@/assets/images/overview2/shut_icon.png"
|
||
class="shut_icon"
|
||
@click="configurationBrief=false"
|
||
/>
|
||
<el-form label-width="180px" class="form" size="small" style="width:80%;margin-top:40px">
|
||
<el-form-item :label="$t('message.projectSummary.title')">
|
||
<el-input
|
||
style="background: #06173F;"
|
||
v-model="services.showTitle"
|
||
:placeholder="$t('message.projectSummary.pleaseEnter')"
|
||
></el-input>
|
||
</el-form-item>
|
||
<el-form-item :label="$t('message.projectSummary.picture')">
|
||
<el-input
|
||
:placeholder="$t('message.projectSummary.pleaseEnterTheImageURL')"
|
||
v-model="services.printUrl"
|
||
></el-input>
|
||
<el-upload
|
||
class="upload-demo"
|
||
:action="uploadUrl"
|
||
name="files"
|
||
:on-success="(file)=>handleAvatarSuccess(file,1)"
|
||
:on-error="handleAvatarError"
|
||
:show-file-list="false"
|
||
>
|
||
<el-button
|
||
style="color:#33D4F1; font-size:14px"
|
||
type="text"
|
||
>{{$t('message.projectSummary.upload')}}</el-button>
|
||
</el-upload>
|
||
</el-form-item>
|
||
<el-form-item :label="$t('message.projectSummary.text')">
|
||
<el-input type="textarea" v-model="services.text"></el-input>
|
||
</el-form-item>
|
||
<el-form-item :label="$t('message.projectSummary.roll')">
|
||
<div style="text-align:left">
|
||
<el-switch
|
||
v-model="services.switchScroll"
|
||
active-color="#41BAE2"
|
||
inactive-color="#C4C4C4"
|
||
></el-switch>
|
||
</div>
|
||
</el-form-item>
|
||
</el-form>
|
||
<el-button
|
||
size="small"
|
||
class="save"
|
||
@click="saveServices"
|
||
>{{$t('message.projectSummary.save')}}</el-button>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
<!-- 宣传视频 -->
|
||
<div class="configuration_wrap" v-if="configurationVideo">
|
||
<div class="configuration_content">
|
||
<div class="content_wrap" style="padding:0 100px">
|
||
<div class="title">{{$t('message.projectSummary.allocationVideo')}}</div>
|
||
<img
|
||
src="@/assets/images/overview2/shut_icon.png"
|
||
class="shut_icon"
|
||
@click="configurationVideo=false"
|
||
/>
|
||
<el-form label-width="180px" class="form" size="small" style="width:80%;margin-top:40px">
|
||
<el-form-item :label="$t('message.projectSummary.title')">
|
||
<el-input
|
||
style="background: #06173F;"
|
||
v-model="videoTitle"
|
||
:placeholder="$t('message.projectSummary.pleaseEnter')"
|
||
></el-input>
|
||
</el-form-item>
|
||
</el-form>
|
||
<div style="text-align:left;">{{$t('message.projectSummary.video')}}</div>
|
||
<div class="video_type_wrap" style="background:none;margin-bottom:0">
|
||
<div
|
||
class="video_type"
|
||
v-if="videoData.length>0"
|
||
v-for="(item, index) in videoData"
|
||
:key="index"
|
||
>
|
||
<img
|
||
src="@/assets/images/overview2/delete.png"
|
||
class="delete_img"
|
||
v-if="videoData.length>1 || (videoData.length<=1 && index!=0)"
|
||
@click="removeVideoData(index)"
|
||
/>
|
||
<el-form label-width="180px" class="form" size="small" style="width:80%;">
|
||
<el-form-item :label="$t('message.projectSummary.videoFile')">
|
||
<el-input
|
||
:placeholder="$t('message.projectSummary.playAddress')"
|
||
v-model="item.videoUrl"
|
||
></el-input>
|
||
<el-upload
|
||
class="upload-demo"
|
||
:action="uploadUrl"
|
||
:on-success="(file)=>handleAvatarSuccess(file,2,index)"
|
||
:on-error="handleAvatarError"
|
||
name="files"
|
||
:show-file-list="false"
|
||
>
|
||
<el-button
|
||
size="small"
|
||
style="color:#33D4F1"
|
||
type="text"
|
||
>{{$t('message.projectSummary.upload')}}</el-button>
|
||
</el-upload>
|
||
</el-form-item>
|
||
<!-- 视频格式： -->
|
||
<el-form-item :label="$t('message.projectInfo.videoType')+':'">
|
||
<el-radio-group v-model="item.videoType">
|
||
<el-radio :label="1">flv</el-radio>
|
||
<el-radio :label="2">m3u8</el-radio>
|
||
<el-radio :label="3">rtmp</el-radio>
|
||
<el-radio :label="4">mp4</el-radio>
|
||
</el-radio-group>
|
||
</el-form-item>
|
||
<el-form-item :label="$t('message.projectSummary.coverPicture')">
|
||
<el-input
|
||
:placeholder="$t('message.projectSummary.pleaseEnterTheImageURL')"
|
||
v-model="item.coverUrl"
|
||
></el-input>
|
||
<el-upload
|
||
class="upload-demo"
|
||
:action="uploadUrl"
|
||
:on-success="(file)=>handleAvatarSuccess(file,3,index)"
|
||
:on-error="handleAvatarError"
|
||
name="files"
|
||
:show-file-list="false"
|
||
>
|
||
<el-button
|
||
size="small"
|
||
style="color:#33D4F1"
|
||
type="text"
|
||
>{{$t('message.projectSummary.upload')}}</el-button>
|
||
</el-upload>
|
||
</el-form-item>
|
||
</el-form>
|
||
</div>
|
||
</div>
|
||
<div class="flex3" @click="addVideoData" style="cursor: pointer; width:100px">
|
||
<img
|
||
src="@/assets/images/overview2/add.png"
|
||
style="width:30px;height:30px;margin-top:10px"
|
||
/>
|
||
<div>{{$t('message.projectSummary.addVideo')}}</div>
|
||
</div>
|
||
<el-button
|
||
size="small"
|
||
class="save"
|
||
@click="saveVideo"
|
||
>{{$t('message.projectSummary.save')}}</el-button>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
<!-- 效果图 -->
|
||
<div class="configuration_wrap" v-if="effectPicture">
|
||
<div class="configuration_content">
|
||
<div class="content_wrap" style="padding:0 100px">
|
||
<div class="title">{{$t('message.projectSummary.configurationRenderings')}}</div>
|
||
<img
|
||
src="@/assets/images/overview2/shut_icon.png"
|
||
class="shut_icon"
|
||
@click="effectPicture=false"
|
||
/>
|
||
<el-form label-width="180px" class="form" size="small" style="width:80%;margin-top:40px">
|
||
<el-form-item :label="$t('message.projectSummary.title')">
|
||
<el-input
|
||
style="background: #06173F;"
|
||
v-model="effectTitle"
|
||
:placeholder="$t('message.projectSummary.pleaseEnter')"
|
||
></el-input>
|
||
</el-form-item>
|
||
</el-form>
|
||
<div style="text-align:left; font-size:17px">{{$t('message.projectSummary.picture')}}</div>
|
||
<div class="video_type_wrap" style="background:none;margin-bottom:0">
|
||
<div
|
||
class="video_type"
|
||
v-if="effectData.length>0"
|
||
v-for="(item,index) in effectData"
|
||
:key="index"
|
||
>
|
||
<img
|
||
src="@/assets/images/overview2/delete.png"
|
||
class="delete_img"
|
||
v-if="effectData.length>1 || (effectData.length<=1 && index!=0)"
|
||
@click="removeEffectData(index)"
|
||
/>
|
||
<el-form label-width="180px" class="form" size="small" style="width:80%;">
|
||
<el-form-item :label="$t('message.projectSummary.imageName')">
|
||
<el-input
|
||
:placeholder="$t('message.projectSummary.pleaseEnter')"
|
||
v-model="item.effectName"
|
||
></el-input>
|
||
</el-form-item>
|
||
<el-form-item :label="$t('message.projectSummary.imageFile')">
|
||
<el-input
|
||
:placeholder="$t('message.projectSummary.pleaseEnterTheImageURL')"
|
||
v-model="item.effectUrl"
|
||
></el-input>
|
||
<el-upload
|
||
class="upload-demo"
|
||
:action="uploadUrl"
|
||
:on-success="(file)=>handleAvatarSuccess(file,4,index)"
|
||
:on-error="handleAvatarError"
|
||
name="files"
|
||
:show-file-list="false"
|
||
>
|
||
<el-button
|
||
size="small"
|
||
style="color:#33D4F1"
|
||
type="text"
|
||
>{{$t('message.projectSummary.upload')}}</el-button>
|
||
</el-upload>
|
||
</el-form-item>
|
||
</el-form>
|
||
</div>
|
||
</div>
|
||
<div class="flex3" style="cursor: pointer; width:100px" @click="addEffectImg">
|
||
<img
|
||
src="@/assets/images/overview2/add.png"
|
||
style="width:30px;height:30px;margin-top:10px"
|
||
/>
|
||
<div>{{$t('message.projectSummary.addImage')}}</div>
|
||
</div>
|
||
<el-button
|
||
size="small"
|
||
class="save"
|
||
@click="saveEffectData"
|
||
>{{$t('message.projectSummary.save')}}</el-button>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
<!-- </vue-scroll> -->
|
||
</template>
|
||
<script>
|
||
import echarts from 'echarts4';;
|
||
import {
|
||
getPageDetail,
|
||
eidtProjectShowConfig,
|
||
queryBySnData
|
||
} from "@/assets/js/api/projectSummary.js";
|
||
import scroll from "vue-seamless-scroll";
|
||
import countTo from "vue-count-to";
|
||
import videoModule from "@/components/videoModule/videoModule";
|
||
import devNumChart from "@/components/chart/devNumChart";
|
||
import airQulityChart from "@/components/chart/airQulityChart";
|
||
import bimCenter from "../BIMCenter/overview";
|
||
import { getWorkerStatisticsCountApi } from "@/assets/js/api/company/project";
|
||
import closePage from "@/components/closePage"
|
||
export default {
|
||
name: "projectSummary",
|
||
components: {
|
||
scroll,
|
||
countTo,
|
||
videoModule,
|
||
devNumChart,
|
||
airQulityChart,
|
||
bimCenter,closePage
|
||
},
|
||
data() {
|
||
return {
|
||
LOGO_white:LOGO_white,
|
||
COMPANY:COMPANY,
|
||
uploadUrl: "",
|
||
fileUrl: "",
|
||
projectSn: "",
|
||
projectData: {},
|
||
configurationBrief: false, //简介弹窗
|
||
//简介数据 新增 || 修改
|
||
services: {
|
||
showTitle: "",
|
||
switchScroll: false,
|
||
printUrl: "",
|
||
text: "",
|
||
},
|
||
//显示的简介 数据
|
||
showServicesData: {
|
||
showTitle: this.$t("message.projectSummary.projectBrief"),
|
||
switchScroll: false,
|
||
printUrl: "",
|
||
text: "",
|
||
},
|
||
noServicesData: true,
|
||
noVideoData: true,
|
||
noEffectData: true,
|
||
|
||
scroll: false, // 简介是否滚动
|
||
synopsisText: "", // 显示的简介
|
||
|
||
configurationVideo: false, // 宣传视频
|
||
videoTitle: "",
|
||
// 新增 || 编辑
|
||
videoData: [
|
||
{
|
||
videoUrl: "",
|
||
videoType: "",
|
||
coverUrl: "",
|
||
},
|
||
],
|
||
showVideoTitle: this.$t("message.projectSummary.promotionVedio"),
|
||
showVideoData: [
|
||
{
|
||
videoUrl: "",
|
||
videoType: "",
|
||
coverUrl: "",
|
||
},
|
||
],
|
||
|
||
videoList: [],
|
||
|
||
videoIndex: 0,
|
||
|
||
effectPicture: false, // 效果图弹窗
|
||
// 新增 || 修改 效果图
|
||
effectTitle: "",
|
||
effectData: [
|
||
{
|
||
effectName: "",
|
||
effectUrl: "",
|
||
},
|
||
],
|
||
|
||
showEffectTitle: this.$t("message.projectSummary.effectPicture"),
|
||
showEffectData: [],
|
||
statisticsCount:{currentMonthEducationPerson:0,"projectcount":
|
||
{"constructionStageCount14":0,"constructionStageCount13":0,"constructionStageCount15":0,
|
||
"constructionStageCount10":0,"constructionStageCount12":0,"constructionStageCount11":0,
|
||
"constructionStageCount1":0,"saleAcreageTotal":0,"constructionStageCount9":0,
|
||
"constructionStageCount8":0,"constructionStageCount7":0,"constructionStageCount6":0,
|
||
"constructionStageCount5":0,"constructionStageCount4":0,"constructionStageCount3":0,
|
||
"constructionStageCount2":0,"projectNum":0},"workercount":{"lwPersonYesterdayAdd":0,eduPersonTotal:0,
|
||
"jfGlPersonTotal":0,"age18":0,"age18to25":0,"womanPersonTotal":0,"lsPersonTotal":0,
|
||
"jlGlPersonTotal":0,"age45to60":0,"lwPersonTotal":0,"manPersonTotal":0,
|
||
"totalPerson":0,"age25to35":0,"glPersonTotal":0,"yfGlPersonTotal":0,
|
||
"avgage":0,"age35to45":0,"glPersonYesterdayAdd":0,"age60":0},
|
||
"devcount":{"ufaceDevNum":0,"videoNum":0,"environmentDevNum":0},
|
||
"presencecount":{"jfGlPersonTotal":0,"age18":0,"age18to25":0,
|
||
"womanPersonTotal":0,"lsPersonTotal":0,
|
||
"jlGlPersonTotal":0,"age45to60":0,"lwPersonTotal":0,
|
||
"manPersonTotal":0,"totalPerson":0,"age25to35":0,"glPersonTotal":0,
|
||
"yfGlPersonTotal":0,
|
||
"avgage":0,"age35to45":0,"age60":0}},
|
||
totalDevNum:0
|
||
};
|
||
},
|
||
created() {
|
||
this.projectSn = this.$store.state.projectSn;
|
||
this.uploadUrl = this.$store.state.UPLOADURL;
|
||
this.fileUrl = this.$store.state.FILEURL;
|
||
this.getPageDetails();
|
||
this.getWorkerStatisticsCount()
|
||
// this.getDevCountStatictis()
|
||
},
|
||
mounted() {
|
||
|
||
|
||
},
|
||
|
||
methods: {
|
||
goPerson(){
|
||
var arr = this.$store.state.userInfo.menuAuthority.moduleList
|
||
arr.forEach(element => {
|
||
if(element.moduleName=='劳务管理'){
|
||
this.$store.commit("setMoudle", element);
|
||
var arr2=element.menuList,arr3=[]
|
||
arr2.forEach(item => {
|
||
if(item.menuEquipment==0){
|
||
arr3.push(item)
|
||
}
|
||
});
|
||
this.$store.commit("setMenuList", arr3);
|
||
}
|
||
});
|
||
let routeUrl = this.$router.resolve({
|
||
path: "/project/labor/personnelOverview",
|
||
});
|
||
window.open(routeUrl.href, "_blank");
|
||
},
|
||
goEnvir(){
|
||
let routeUrl = this.$router.resolve({
|
||
path: "/project/environmentalOverview",
|
||
});
|
||
window.open(routeUrl.href, "_blank");
|
||
},
|
||
//统计企业下项目各人员统计
|
||
getWorkerStatisticsCount(){
|
||
getWorkerStatisticsCountApi({sn:this.projectSn}).then(res=>{
|
||
this.statisticsCount = res.result
|
||
this.totalDevNum=this.statisticsCount.devcount.ufaceDevNum+
|
||
this.statisticsCount.devcount.videoNum+this.statisticsCount.devcount.environmentDevNum
|
||
})
|
||
},
|
||
//获取页面数据详情
|
||
getPageDetails() {
|
||
let data = {
|
||
projectSn: this.projectSn,
|
||
};
|
||
getPageDetail(data).then((res) => {
|
||
//showType==1 项目简介； 2 视频； 3 效果图
|
||
if (res.code == 200) {
|
||
this.videoList = [];
|
||
this.projectData = res.result.project;
|
||
if (res.result.list.length > 0) {
|
||
for (let i in res.result.list) {
|
||
let value = JSON.parse(res.result.list[i].configValue);
|
||
if (res.result.list[i].showType == 1) {
|
||
this.noServicesData = false;
|
||
this.showServicesData = value;
|
||
this.services = JSON.parse(JSON.stringify(value));
|
||
}
|
||
if (res.result.list[i].showType == 2) {
|
||
this.noVideoData = false;
|
||
this.showVideoTitle = res.result.list[i].showTitle;
|
||
this.showVideoData = value;
|
||
//获取到视频地址 传值到 插件
|
||
for (let v = 0; v < value.length; v++) {
|
||
if(value[v].videoType!=4){
|
||
let data = {
|
||
winNum: 0,
|
||
value: "video" + (v+1),
|
||
url: value[v].videoUrl,
|
||
};
|
||
this.videoList.push(data);
|
||
}
|
||
}
|
||
|
||
this.videoData = JSON.parse(JSON.stringify(value));
|
||
this.videoTitle = JSON.parse(
|
||
JSON.stringify(res.result.list[i].showTitle)
|
||
);
|
||
}
|
||
|
||
if (res.result.list[i].showType == 3) {
|
||
let index = 0;
|
||
let newArr = [];
|
||
while (index < value.length) {
|
||
newArr.push(value.slice(index, (index += 5)));
|
||
}
|
||
this.effectData = JSON.parse(JSON.stringify(value));
|
||
this.effectTitle = JSON.parse(
|
||
JSON.stringify(res.result.list[i].showTitle)
|
||
);
|
||
this.noEffectData = false;
|
||
this.showEffectData = newArr;
|
||
this.showEffectTitle = res.result.list[i].showTitle;
|
||
}
|
||
setTimeout(() => {
|
||
this.$previewRefresh();
|
||
}, 100);
|
||
}
|
||
} else {
|
||
}
|
||
this.createdEcharts2();
|
||
} else {
|
||
this.$message.error(res.message);
|
||
}
|
||
});
|
||
},
|
||
|
||
// 查询单条数据
|
||
getSingleData(type) {
|
||
// type == 1项目简介，2宣传视频，3效果图
|
||
let data = {
|
||
projectSn: this.projectSn,
|
||
showType: type,
|
||
};
|
||
queryBySnData(data).then((res) => {
|
||
if (res.code == 200 && res.result) {
|
||
let value = JSON.parse(res.result.configValue);
|
||
if (res.result.showType == 1) {
|
||
this.showServicesData = value;
|
||
this.services = JSON.parse(JSON.stringify(value));
|
||
this.noServicesData = false;
|
||
} else if (res.result.showType == 2) {
|
||
this.showVideoTitle = res.result.showTitle;
|
||
this.showVideoData = JSON.parse(JSON.stringify(value));
|
||
this.videoData = JSON.parse(JSON.stringify(value));
|
||
this.videoTitle = JSON.parse(JSON.stringify(res.result.showTitle));
|
||
this.noVideoData = false;
|
||
} else if (res.result.showType == 3) {
|
||
let index = 0;
|
||
let newArr = [];
|
||
while (index < value.length) {
|
||
newArr.push(value.slice(index, (index += 5)));
|
||
}
|
||
this.effectData = JSON.parse(JSON.stringify(value));
|
||
this.effectTitle = JSON.parse(JSON.stringify(res.result.showTitle));
|
||
this.noEffectData = false;
|
||
this.showEffectData = newArr;
|
||
this.showEffectTitle = res.result.showTitle;
|
||
}
|
||
} else {
|
||
this.noServicesData = true;
|
||
this.noVideoData = true;
|
||
this.noEffectData = true;
|
||
}
|
||
});
|
||
},
|
||
|
||
//上传文件成功
|
||
handleAvatarSuccess(file, type, index) {
|
||
this.$message.success(this.$t("message.projectSummary.uploadSuccessful"));
|
||
//1 项目简介图片； 2 视频文件； 3 封面图片； 4 效果图
|
||
if (file.status == "SUCCESS") {
|
||
if (type == 1) {
|
||
this.services.printUrl = this.fileUrl + file.data[0].imageUrl;
|
||
} else if (type == 2) {
|
||
this.videoData[index].videoUrl = this.fileUrl + file.data[0].imageUrl;
|
||
} else if (type == 3) {
|
||
this.videoData[index].coverUrl = this.fileUrl + file.data[0].imageUrl;
|
||
} else if (type == 4) {
|
||
this.effectData[index].effectUrl =
|
||
this.fileUrl + file.data[0].imageUrl;
|
||
}
|
||
}
|
||
},
|
||
//上传文件失败
|
||
handleAvatarError(file) {
|
||
this.$message.error(file.message);
|
||
},
|
||
|
||
//保存项目简介
|
||
saveServices() {
|
||
let configValue = JSON.stringify(this.services);
|
||
let data = {
|
||
projectSn: this.projectSn,
|
||
showType: 1,
|
||
showTitle: this.services.showTitle,
|
||
configValue: configValue,
|
||
};
|
||
|
||
eidtProjectShowConfig(data).then((res) => {
|
||
if (res.code == 200) {
|
||
this.configurationBrief = false;
|
||
this.getSingleData(1);
|
||
}
|
||
});
|
||
},
|
||
|
||
//新增 视频 按钮
|
||
addVideoData() {
|
||
let data = {
|
||
videoUrl: "",
|
||
videoType: "",
|
||
coverUrl: "",
|
||
};
|
||
this.$message.success(this.$t("message.projectSummary.newSuccess"));
|
||
this.videoData.push(data);
|
||
},
|
||
|
||
//删除视频按钮
|
||
removeVideoData(index) {
|
||
let data = this.videoData;
|
||
for (let i in data) {
|
||
if (i == index) {
|
||
data.splice(index, 1);
|
||
}
|
||
}
|
||
this.videoData = data;
|
||
},
|
||
|
||
// 保存 视频 按钮
|
||
saveVideo() {
|
||
let configValue = JSON.stringify(this.videoData);
|
||
let data = {
|
||
projectSn: this.projectSn,
|
||
showType: 2,
|
||
showTitle: this.videoTitle,
|
||
configValue: configValue,
|
||
};
|
||
eidtProjectShowConfig(data).then((res) => {
|
||
if (res.code == 200) {
|
||
this.configurationVideo = false;
|
||
this.getSingleData(2);
|
||
}
|
||
});
|
||
},
|
||
|
||
// 切换视频
|
||
changeCarousel(index) {
|
||
this.videoIndex = index;
|
||
document.getElementById("videoDOM").currentTime = 0;
|
||
},
|
||
|
||
//新增效果图按钮
|
||
addEffectImg() {
|
||
this.$message.success(this.$t("message.projectSummary.newSuccess"));
|
||
let data = {
|
||
effectName: "",
|
||
effectUrl: "",
|
||
};
|
||
this.effectData.push(data);
|
||
},
|
||
|
||
//删除效果图
|
||
removeEffectData(index) {
|
||
let data = this.effectData;
|
||
for (let i in data) {
|
||
if (i == index) {
|
||
data.splice(index, 1);
|
||
}
|
||
}
|
||
this.effectData = data;
|
||
},
|
||
|
||
//效果图 保存
|
||
saveEffectData() {
|
||
let configValue = JSON.stringify(this.effectData);
|
||
let data = {
|
||
projectSn: this.projectSn,
|
||
showType: 3,
|
||
showTitle: this.effectTitle,
|
||
configValue: configValue,
|
||
};
|
||
eidtProjectShowConfig(data).then((res) => {
|
||
if (res.code == 200) {
|
||
this.effectPicture = false;
|
||
this.getSingleData(3);
|
||
}
|
||
});
|
||
},
|
||
|
||
//获取圆上面某点的坐标(x0,y0表示坐标，r半径，angle角度)
|
||
getCirlPoint(x0, y0, r, angle) {
|
||
let x1 = x0 + r * Math.cos((angle * Math.PI) / 180);
|
||
let y1 = y0 + r * Math.sin((angle * Math.PI) / 180);
|
||
return {
|
||
x: x1,
|
||
y: y1,
|
||
};
|
||
},
|
||
// 项目进度 计算
|
||
_dashed() {
|
||
let dataArr = [];
|
||
for (var i = 0; i < 100; i++) {
|
||
if (i % 2 === 0) {
|
||
dataArr.push({
|
||
name: (i + 1).toString(),
|
||
value: 20,
|
||
itemStyle: {
|
||
normal: {
|
||
color: "rgb(0,255,255,.3)",
|
||
},
|
||
},
|
||
});
|
||
} else {
|
||
dataArr.push({
|
||
name: (i + 1).toString(),
|
||
value: 20,
|
||
itemStyle: {
|
||
normal: {
|
||
color: "rgb(0,0,0,0)",
|
||
borderWidth: 1,
|
||
borderColor: "rgba(0,255,255,1)",
|
||
},
|
||
},
|
||
});
|
||
}
|
||
}
|
||
return dataArr;
|
||
},
|
||
|
||
//创建图表 --- 项目进度
|
||
createdEcharts2() {
|
||
let that = this;
|
||
//项目进度
|
||
let projectSchedule = echarts.init(this.$refs.projectSchedule);
|
||
projectSchedule.clear();
|
||
let option = {
|
||
title: {
|
||
text:
|
||
"{a|" +
|
||
this.$t('message.companyDiagram.CONSTRUCTIONSTAGE')[this.projectData.constructionStage-1].name +
|
||
"}\n{c|" +
|
||
this.$t("message.projectSummary.stage") +
|
||
"}",
|
||
x: "center",
|
||
y: "center",
|
||
textStyle: {
|
||
rich: {
|
||
a: {
|
||
fontSize: 15,
|
||
color: " rgba(255, 255, 254, 1)",
|
||
fontWeight: "600",
|
||
lineHeight: 25,
|
||
},
|
||
|
||
c: {
|
||
fontSize: 15,
|
||
color: " rgba(255, 255, 254, 1)",
|
||
lineHeight: 20,
|
||
},
|
||
},
|
||
},
|
||
},
|
||
series: [
|
||
{
|
||
type: "gauge",
|
||
radius: "80%",
|
||
clockwise: false,
|
||
startAngle: "90",
|
||
endAngle: "-269.9999",
|
||
splitNumber: 30,
|
||
detail: {
|
||
offsetCenter: [0, -20],
|
||
formatter: " ",
|
||
},
|
||
pointer: {
|
||
show: false,
|
||
},
|
||
axisLine: {
|
||
show: true,
|
||
lineStyle: {
|
||
color: [
|
||
[0, "#2CFAFC"],
|
||
[36.7 / 100, "#0EF6F8"],
|
||
[1, "#061740"],
|
||
],
|
||
width: 20,
|
||
},
|
||
},
|
||
axisTick: {
|
||
show: false,
|
||
},
|
||
splitLine: {
|
||
show: true,
|
||
length: 55,
|
||
lineStyle: {
|
||
shadowBlur: 10,
|
||
shadowColor: "rgba(0, 255, 255, 1)",
|
||
shadowOffsetY: "0",
|
||
color: "#042B3E",
|
||
width: 2,
|
||
},
|
||
},
|
||
axisLabel: {
|
||
show: false,
|
||
},
|
||
},
|
||
{
|
||
type: "pie",
|
||
radius: ["54%", "55%"],
|
||
hoverAnimation: false,
|
||
clockWise: false,
|
||
itemStyle: {
|
||
normal: {
|
||
color: "#0C355E",
|
||
},
|
||
},
|
||
label: {
|
||
show: false,
|
||
},
|
||
data: that._dashed(),
|
||
},
|
||
|
||
{
|
||
type: "pie",
|
||
radius: [0, "40%"],
|
||
hoverAnimation: false,
|
||
clockWise: false,
|
||
itemStyle: {
|
||
normal: {
|
||
shadowBlur: 20,
|
||
shadowColor: "#000",
|
||
color: new echarts.graphic.RadialGradient(0.4, 0.3, 1, [
|
||
{
|
||
offset: 0,
|
||
color: "#0FF",
|
||
},
|
||
{
|
||
offset: 1,
|
||
color: "#060f20",
|
||
},
|
||
]),
|
||
},
|
||
},
|
||
label: {
|
||
show: false,
|
||
},
|
||
data: [100],
|
||
},
|
||
{
|
||
type: "pie",
|
||
radius: ["84%", "85.5%"],
|
||
hoverAnimation: false,
|
||
clockWise: false,
|
||
itemStyle: {
|
||
normal: {
|
||
shadowBlur: 20,
|
||
shadowColor: "rgba(0, 255, 255,.6)",
|
||
color: "#0f232e",
|
||
},
|
||
},
|
||
label: {
|
||
show: false,
|
||
},
|
||
data: [100],
|
||
},
|
||
{
|
||
type: "pie",
|
||
radius: ["88%", "89.5%"],
|
||
hoverAnimation: false,
|
||
clockWise: false,
|
||
itemStyle: {
|
||
normal: {
|
||
shadowBlur: 20,
|
||
shadowColor: "rgba(0, 255, 255,.6)",
|
||
color: "rgba(15, 35, 46,.6)",
|
||
},
|
||
},
|
||
label: {
|
||
show: false,
|
||
},
|
||
data: [100],
|
||
},
|
||
],
|
||
};
|
||
projectSchedule.setOption(option);
|
||
setInterval(() => {
|
||
let option = projectSchedule.getOption();
|
||
option.series[1].startAngle = option.series[1].startAngle - 1;
|
||
projectSchedule.setOption(option);
|
||
}, 100);
|
||
},
|
||
},
|
||
};
|
||
</script>
|
||
<style lang="less" scoped>
|
||
body,
|
||
html,
|
||
#app {
|
||
overflow: hidden;
|
||
}
|
||
.logo{
|
||
position: absolute;
|
||
left: 40px;
|
||
top: 8px;
|
||
height: 16px;
|
||
}
|
||
.flex {
|
||
display: flex;
|
||
align-items: center;
|
||
justify-content: space-between;
|
||
}
|
||
.flex2 {
|
||
display: flex;
|
||
align-items: center;
|
||
justify-content: space-around;
|
||
}
|
||
.flex3 {
|
||
display: flex;
|
||
align-items: center;
|
||
}
|
||
.flex4 {
|
||
display: flex;
|
||
justify-content: space-between;
|
||
}
|
||
.flex5 {
|
||
display: flex;
|
||
align-items: center;
|
||
justify-content: center;
|
||
}
|
||
.projectSummary {
|
||
width: 100%;
|
||
height: 100%;
|
||
background: #061740;
|
||
|
||
.title_wrap {
|
||
width: 100%;
|
||
height: 8%;
|
||
position: relative;
|
||
color: rgba(255, 255, 254, 1);
|
||
font-size: 15px;
|
||
text-align: center;
|
||
font-family: PingFangSC-Regular;
|
||
.headerBG {
|
||
width: 100%;
|
||
height: 76px;
|
||
}
|
||
.title_content {
|
||
position: absolute;
|
||
top: 8px;
|
||
width: 100%;
|
||
box-sizing: border-box;
|
||
padding: 0 20.2%;
|
||
.projectName {
|
||
color: rgba(14, 246, 248, 1);
|
||
font-size: 31px;
|
||
text-align: center;
|
||
font-family: AlibabaPuHuiTiH;
|
||
font-weight: 600;
|
||
// margin-left: -123px;
|
||
}
|
||
}
|
||
}
|
||
.content {
|
||
width: 100%;
|
||
background: #061740;
|
||
box-sizing: border-box;
|
||
padding: 10px 30px 0;
|
||
color: rgba(255, 255, 255, 1);
|
||
height: 92%;
|
||
|
||
.content_l,
|
||
.content_r {
|
||
width: 22%;
|
||
height: 68%;
|
||
}
|
||
.content_c {
|
||
width: 54.5%;
|
||
height: 68%;
|
||
}
|
||
.content_title {
|
||
width: 100%;
|
||
.title_img_bg {
|
||
width: 81px;
|
||
height: 21px;
|
||
}
|
||
.title_r {
|
||
width: calc(100% - 81px);
|
||
height: 21px;
|
||
margin-top: -6px;
|
||
padding: 0 4px 4px;
|
||
border-bottom: 2px solid #245f89;
|
||
color: rgba(65, 186, 226, 1);
|
||
font-size: 17px;
|
||
text-align: center;
|
||
font-family: PingFangSC-Medium;
|
||
img {
|
||
width: 15px;
|
||
height: 15px;
|
||
}
|
||
}
|
||
}
|
||
.content_height {
|
||
height: 100%;
|
||
}
|
||
.content_content2{
|
||
border-radius: 2px;
|
||
background-image: linear-gradient(#0b2453, #061740);
|
||
border: 2px solid #18426c;
|
||
width: 100%;
|
||
height: calc(100% - 26px);
|
||
}
|
||
.content_content {
|
||
margin-top: -1px;
|
||
height: calc(100% - 21px);
|
||
padding: 23px 23px 18px;
|
||
box-sizing: border-box;
|
||
border: 2px solid #18426c;
|
||
border-top: none;
|
||
font-size: 14px;
|
||
line-height: 25px;
|
||
border-radius: 2px;
|
||
background-image: linear-gradient(#0b2453, #061740);
|
||
.proImg {
|
||
max-width: 100%;
|
||
max-height: 230px;
|
||
width: auto;
|
||
height: auto;
|
||
display: block;
|
||
margin: auto;
|
||
}
|
||
.text {
|
||
margin-top: 20px;
|
||
overflow-y: auto;
|
||
height: calc(100% - 250px);
|
||
// pre{
|
||
// white-space: normal;
|
||
// }
|
||
}
|
||
}
|
||
.content_bottom {
|
||
margin-top: 21px;
|
||
width: 100%;
|
||
height: 41%;
|
||
}
|
||
|
||
.personnel {
|
||
margin-bottom: 0 !important;
|
||
height: calc(100% - 50% - 21px);
|
||
}
|
||
}
|
||
.projectSchedule {
|
||
width: 100%;
|
||
height: 100%;
|
||
}
|
||
.people_wrap {
|
||
width: 100%;
|
||
height: 100%;
|
||
position: relative;
|
||
text-align: center;
|
||
// background-image: url("../../../assets/images/overview2/blockBG.png");
|
||
background-image: url("../../../assets/images/overview2/blockBG.gif");
|
||
background-repeat: no-repeat;
|
||
// background-size: contain;
|
||
background-size: auto;
|
||
background-position: center center;
|
||
color: rgba(255, 255, 254, 0.8);
|
||
font-size: 14px;
|
||
img {
|
||
width: 95%;
|
||
height: auto;
|
||
margin-top: 4.6%;
|
||
}
|
||
.realTime_num,
|
||
.attendance_num,
|
||
.headcount {
|
||
position: absolute;
|
||
top: 50%;
|
||
left: 50%;
|
||
width: 56px;
|
||
height: 55px;
|
||
}
|
||
.realTime_num {
|
||
transform: translate(-30px, -68px);
|
||
}
|
||
.attendance_num {
|
||
transform: translate(-142px, 18px);
|
||
}
|
||
.headcount {
|
||
transform: translate(80px, 18px);
|
||
}
|
||
// .realTime_num {
|
||
// position: absolute;
|
||
// top: 17.8%;
|
||
// left: 50%;
|
||
// width: 56px;
|
||
// height: 55px;
|
||
// margin-left: -30px;
|
||
// }
|
||
// .attendance_num {
|
||
// position: absolute;
|
||
// top: 57.8%;
|
||
// left: 13%;
|
||
// width: 56px;
|
||
// height: 55px;
|
||
// }
|
||
// .headcount {
|
||
// position: absolute;
|
||
// top: 57.8%;
|
||
// left: 70%;
|
||
// width: 56px;
|
||
// height: 55px;
|
||
// }
|
||
.number {
|
||
color: rgba(0, 229, 232, 1);
|
||
font-size: 28px;
|
||
font-family: PingFangSC-Medium;
|
||
margin-bottom: 5px;
|
||
}
|
||
}
|
||
.device_wrap {
|
||
width: 100%;
|
||
height: 100%;
|
||
div {
|
||
height: 100%;
|
||
width: 50%;
|
||
background-image: linear-gradient(#0b2453, #061740) !important;
|
||
}
|
||
}
|
||
|
||
//弹窗
|
||
.configuration_wrap {
|
||
position: fixed;
|
||
top: 0;
|
||
left: 0;
|
||
bottom: 0;
|
||
right: 0;
|
||
color: #fff;
|
||
z-index: 1000;
|
||
background: rgba(0, 0, 0, 0.4);
|
||
.configuration_content {
|
||
width: 882px;
|
||
height: 557px;
|
||
position: relative;
|
||
margin: 180px auto 0;
|
||
box-sizing: border-box;
|
||
padding: 26px 30px;
|
||
background-image: url("../../../assets/images/overview2/dialogBG.png");
|
||
background-repeat: no-repeat;
|
||
background-size: 100%;
|
||
text-align: center;
|
||
}
|
||
.content_wrap {
|
||
z-index: 10000;
|
||
.title {
|
||
color: rgba(14, 246, 248, 1);
|
||
font-size: 18px;
|
||
text-align: center;
|
||
font-family: AliHYAiHei;
|
||
font-weight: 700;
|
||
}
|
||
.shut_icon {
|
||
position: absolute;
|
||
right: 28px;
|
||
top: 36px;
|
||
z-index: 2000;
|
||
margin: 10px;
|
||
cursor: pointer;
|
||
}
|
||
}
|
||
/deep/ .el-form .el-form-item__label {
|
||
color: #fff;
|
||
}
|
||
/deep/ .el-input__inner {
|
||
background: #06173f;
|
||
font-size: 14px;
|
||
border-color: #1d5181;
|
||
color: rgba(161, 164, 176, 1);
|
||
}
|
||
/deep/ .el-textarea__inner {
|
||
min-height: 188px !important;
|
||
background: #06173f;
|
||
font-size: 14px;
|
||
color: rgba(161, 164, 176, 1);
|
||
border-color: #1d5181;
|
||
}
|
||
/*定义滚动条宽高及背景，宽高分别对应横竖滚动条的尺寸*/
|
||
/deep/ .el-textarea__inner::-webkit-scrollbar {
|
||
width: 5px; /*对垂直流动条有效*/
|
||
height: 10px; /*对水平流动条有效*/
|
||
}
|
||
|
||
/*定义滚动条的轨道颜色、内阴影及圆角*/
|
||
/deep/ .el-textarea__inner::-webkit-scrollbar-track {
|
||
-webkit-box-shadow: inset 0 0 6px rgba(0, 0, 0, 0.3);
|
||
background-color: none;
|
||
border-radius: 3px;
|
||
}
|
||
|
||
/*定义滑块颜色、内阴影及圆角*/
|
||
/deep/ .el-textarea__inner::-webkit-scrollbar-thumb {
|
||
border-radius: 7px;
|
||
-webkit-box-shadow: inset 0 0 6px rgba(0, 0, 0, 0.3);
|
||
background-color: #666d7e;
|
||
}
|
||
|
||
.upload-demo {
|
||
position: absolute;
|
||
top: 0;
|
||
right: -68px;
|
||
color: #33d4f1;
|
||
font-size: 14px;
|
||
}
|
||
.save {
|
||
color: #fff;
|
||
background: #41bae2;
|
||
border-color: #41bae2;
|
||
position: absolute;
|
||
bottom: 40px;
|
||
left: 50%;
|
||
margin-left: -26px;
|
||
}
|
||
}
|
||
/deep/ .el-radio {
|
||
color: rgba(161, 164, 176, 1);
|
||
}
|
||
/deep/ .el-radio__label {
|
||
font-size: 16px;
|
||
}
|
||
/deep/ .el-radio__inner {
|
||
background: #102757;
|
||
border-color: rgba(161, 164, 176, 1);
|
||
}
|
||
.video_type_wrap {
|
||
width: 100%;
|
||
background: #102757;
|
||
margin: 12px 0;
|
||
max-height: 250px;
|
||
overflow-y: auto;
|
||
}
|
||
/*定义滚动条宽高及背景，宽高分别对应横竖滚动条的尺寸*/
|
||
.video_type_wrap::-webkit-scrollbar {
|
||
width: 5px; /*对垂直流动条有效*/
|
||
height: 10px; /*对水平流动条有效*/
|
||
}
|
||
|
||
/*定义滚动条的轨道颜色、内阴影及圆角*/
|
||
.video_type_wrap::-webkit-scrollbar-track {
|
||
-webkit-box-shadow: inset 0 0 6px rgba(0, 0, 0, 0.3);
|
||
background-color: none;
|
||
border-radius: 3px;
|
||
}
|
||
|
||
/*定义滑块颜色、内阴影及圆角*/
|
||
.video_type_wrap::-webkit-scrollbar-thumb {
|
||
border-radius: 7px;
|
||
-webkit-box-shadow: inset 0 0 6px rgba(0, 0, 0, 0.3);
|
||
background-color: #666d7e;
|
||
}
|
||
.video_type {
|
||
position: relative;
|
||
.delete_img {
|
||
position: absolute;
|
||
right: 0;
|
||
top: 0;
|
||
margin: 10px;
|
||
cursor: pointer;
|
||
z-index: 2010;
|
||
}
|
||
width: 100%;
|
||
background: #102757;
|
||
padding: 12px 0;
|
||
margin-bottom: 10px;
|
||
}
|
||
.video_type:last-child {
|
||
margin-bottom: 0;
|
||
}
|
||
.effect_wrap {
|
||
width: 100%;
|
||
height: 100%;
|
||
flex-wrap: wrap;
|
||
overflow: hidden;
|
||
.effect_img_content {
|
||
width: 20%;
|
||
padding-bottom: 10px;
|
||
border-bottom: 1px solid #15254b;
|
||
position: relative;
|
||
text-align: center;
|
||
font-size: 14px;
|
||
color: #04ffff;
|
||
.effectImg {
|
||
background-size: contain;
|
||
background-repeat: no-repeat;
|
||
height: 95px;
|
||
background-position: 50%;
|
||
margin: 15px auto;
|
||
}
|
||
.dot {
|
||
position: absolute;
|
||
bottom: -5px;
|
||
left: 50%;
|
||
margin-left: -5px;
|
||
height: 10px;
|
||
width: 10px;
|
||
background-color: #04ffff;
|
||
border-radius: 50%;
|
||
}
|
||
}
|
||
}
|
||
/deep/ .el-carousel__container {
|
||
height: 100%;
|
||
}
|
||
.noData {
|
||
text-align: center;
|
||
}
|
||
}
|
||
</style> |