1383 lines
40 KiB
Vue
1383 lines
40 KiB
Vue
<template>
|
||
<Resize>
|
||
<div style="width:100%;height:100%;position: absolute;">
|
||
<div style="width:100%;height:100%;position: relative;">
|
||
<div class="bgPicture" :style="{ height: vdaH }">
|
||
<!-- 标题 -->
|
||
<div class="title"></div>
|
||
<div class="titTop">
|
||
<div class="titLeft">
|
||
<span @click="goBack(1)">首页</span>
|
||
<span>/</span>
|
||
<span @click="goBack(2)">进度管理</span>
|
||
</div>
|
||
<div class="titRight">
|
||
<span>2023年2月17日 星期四 14:26</span>
|
||
<span></span>
|
||
<span> 天气 </span>
|
||
<span>晴 12℃</span>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
<div @click="disBox" class="screenBox"
|
||
:style="{ 'background-image': !boxNone ? `url(${require(`../assets/pic/exitFull.png`)}` : `url(${require(`../assets/pic/fullScreen.png`)}` ,right: boxNone ? '483px' : '10px'}">
|
||
</div> <!-- 左侧模块1 -->
|
||
<!-- 左侧模块1 -->
|
||
<!-- 左侧模块1 -->
|
||
<div class="leftOneBox" :style="{ left: boxNone ? '27px' : '-444px' }">
|
||
<div class="titName">
|
||
<span></span>
|
||
<span>工程工期</span>
|
||
<span></span>
|
||
</div>
|
||
<div class="concet">
|
||
<div class="ftahBox topBox">
|
||
<span class="ysg">计划开始时间</span>
|
||
<div style="display: flex;">
|
||
<span class="iconBox3 dayIcon"></span>
|
||
<span class="numb">2023-1-23</span>
|
||
</div>
|
||
</div>
|
||
<div class="ftahBox topBox" style="margin-left: 56px;">
|
||
<span class="ysg">计划结束时间</span>
|
||
<div style="display: flex;">
|
||
<span class="iconBox3 dayIcon"></span>
|
||
<span class="numb">2023-11-23</span>
|
||
</div>
|
||
</div>
|
||
<div class="ftahBox" >
|
||
<span class="ysg">计划总工期</span>
|
||
<div style="display: flex;">
|
||
<span class="iconBox2 dayIcon"></span>
|
||
<span class="numb">50</span>
|
||
<span class="day">天</span>
|
||
</div>
|
||
</div>
|
||
<div class="ftahBox" style="margin-left: 114px;">
|
||
<span class="ysg" >实际已施工</span>
|
||
<div style="display: flex;">
|
||
<span class="iconBox1 dayIcon"></span>
|
||
<span class="numb">100</span>
|
||
<span class="day">天</span>
|
||
</div>
|
||
</div>
|
||
|
||
|
||
|
||
</div>
|
||
</div>
|
||
<!-- 左侧模块2 -->
|
||
<div class="leftTwoBox" :style="{ left: boxNone ? '27px' : '-444px' }">
|
||
<div class="titName">
|
||
<span></span>
|
||
<span>投资进度</span>
|
||
<span></span>
|
||
</div>
|
||
<div class="pieBox">
|
||
<lineBar style="width: 100%; height: 100%" grid-bottom="1%" :color-array="['#021C9F', '#01B1FF']"
|
||
:chart-data="qyList" :x-axis-data="qyList.map(item => item.name)" />
|
||
</div>
|
||
</div>
|
||
<!-- 左侧模块3 -->
|
||
<div class="leftThreeBox" :style="{ left: boxNone ? '27px' : '-444px' }">
|
||
<div class="titName">
|
||
<span></span>
|
||
<span>计划进度</span>
|
||
<span style="width: 216px;"></span>
|
||
</div>
|
||
<div class="btnIcon" @click="gantDialog"></div>
|
||
<div class="tableBox">
|
||
<el-table height="270" :row-style="{ height: '0' }" :cell-style="{ padding: '8px' }"
|
||
:row-class-name="tableRowClassName" :data="tableData" style="width: 100%">
|
||
<el-table-column header-align="center" align="center" show-overflow-tooltip prop="entName"
|
||
label="任务名称">
|
||
</el-table-column>
|
||
<el-table-column prop="start" align="center" label="开始日期">
|
||
</el-table-column>
|
||
<el-table-column prop="end" align="center" label="结束日期">
|
||
</el-table-column>
|
||
</el-table>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
<!-- 右侧模块1 -->
|
||
<div class="rightOneBox" :style="{ right: boxNone ? '27px' : '-444px' }">
|
||
<div class="titName">
|
||
<span></span>
|
||
<span>本月任务完成情况</span>
|
||
<span style="width:160px;"></span>
|
||
</div>
|
||
<div class="videoBox">
|
||
<pieChartUnImg :colorList="colorList" :picIsShow="false" style="width: 100%; height: 100%" color="#1ffdfa"
|
||
chart-title="扫描数量分析" :chart-data="chartData" :x-axis-data="xArry" />
|
||
</div>
|
||
<div class="fxBox">
|
||
<div class="fxBoxChild">
|
||
<span style="color:#7FFFFC;display: block;width: 100%;">任务名称：<span
|
||
style="color:#fff;">项目选址与物料配备</span></span>
|
||
<span style="color:#7FFFFC;display: block;text-align:left;width: 50%;margin:8px 0">开始时间：<span
|
||
style="color:#fff;">2023-01-02</span></span>
|
||
<span
|
||
style="color:#7FFFFC;display: block;margin: 8px -6px;text-align:center;width: 50%;margin:8px -6px">计划工期：<span
|
||
style="color:#fff;">28天</span></span>
|
||
<span style="color:#7FFFFC;display: block;text-align:left;width: 50%;">结束时间：<span
|
||
style="color:#fff;">2023-01-02</span></span>
|
||
<span style="color:#7FFFFC;display: block;text-align:center;width: 50%;margin-bottom: 10px;">当前状态：<span
|
||
style="color:#00CD69;">已完成</span></span>
|
||
</div>
|
||
<div class="fxBoxChild" style="border-bottom:0;">
|
||
<span style="color:#7FFFFC;display: block;width: 100%;">任务名称：<span
|
||
style="color:#fff;">项目选址与物料配备</span></span>
|
||
<span style="color:#7FFFFC;display: block;text-align:left;width: 50%;margin:8px 0">开始时间：<span
|
||
style="color:#fff;">2023-01-02</span></span>
|
||
<span
|
||
style="color:#7FFFFC;display: block;margin: 8px -6px;text-align:center;width: 50%;margin:8px -6px">计划工期：<span
|
||
style="color:#fff;">28天</span></span>
|
||
<span style="color:#7FFFFC;display: block;text-align:left;width: 50%;">结束时间：<span
|
||
style="color:#fff;">2023-01-02</span></span>
|
||
<span style="color:#7FFFFC;display: block;text-align:center;width: 50%;margin-bottom: 10px;">当前状态：<span
|
||
style="color:#00CD69;">已完成</span></span>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
<!-- 右侧模块2 -->
|
||
<div class="rightThreeBox" :style="{ right: boxNone ? '27px' : '-444px' }">
|
||
<div class="titName">
|
||
<span></span>
|
||
<span>实施进度</span>
|
||
<span></span>
|
||
</div>
|
||
<div class="table2Box">
|
||
<el-table height="300" :row-class-name="tableRowClassName" :data="table2Data" style="width: 100%" :cell-style="{ padding: '8px' }">
|
||
<el-table-column header-align="center" align="center" show-overflow-tooltip prop="entName" label="任务名称">
|
||
</el-table-column>
|
||
<el-table-column align="center" prop="start" label="开始时间">
|
||
</el-table-column>
|
||
<el-table-column align="center" prop="end" label="结束时间">
|
||
</el-table-column>
|
||
<el-table-column align="center" prop="zt" label="状态">
|
||
<template slot-scope="{ row }">
|
||
<span class=""
|
||
:style="{ color: row.zt == '逾期中' || row.zt == '逾期完成' ? '#d09610' : '#ADFFFE' }">{{ row.zt
|
||
}}</span>
|
||
</template>
|
||
|
||
</el-table-column>
|
||
</el-table>
|
||
</div>
|
||
</div>
|
||
<!-- 右侧菜单 -->
|
||
<div class="container" :style="{ right: !type ? '-13px' : '0' }">
|
||
<div class="box" id="box" :style="{ width: !type ? '267px' : '0' }">
|
||
<div v-if="!type" :class="[menuType === 1 ? 'childBoxChoose' : 'childBox']" @click="childBoxClick(1)">
|
||
<span class="icon1"></span>
|
||
<span>人员管理</span>
|
||
<span class="picture1"></span>
|
||
</div>
|
||
<div v-if="!type" :class="[menuType === 2 ? 'childBoxChoose' : 'childBox']" @click="childBoxClick(2)">
|
||
<span class="icon2"></span>
|
||
<span>视频监控</span>
|
||
<span class="picture1"></span>
|
||
</div>
|
||
<div v-if="!type" :class="[menuType === 3 ? 'childBoxChoose' : 'childBox']" @click="childBoxClick(3)">
|
||
<span class="icon3"></span>
|
||
<span>进度管理</span>
|
||
<span class="picture1"></span>
|
||
</div>
|
||
<div v-if="!type" :class="[menuType === 4 ? 'childBoxChoose' : 'childBox']" @click="childBoxClick(4)">
|
||
<span class="icon4"></span>
|
||
<span>安全管理</span>
|
||
<span class="picture1"></span>
|
||
</div>
|
||
</div>
|
||
<div class="switchBtn" ref="switchBtn" @click="switchDiv()">
|
||
</div>
|
||
<div class="closeBtn" :style="{ display: type ? 'none' : 'block' }" @click="switchDiv()"></div>
|
||
</div>
|
||
<!-- 甘特图弹框 -->
|
||
<div class="gttBox" v-if="dialogShow">
|
||
<div class="closeIcon" @click="dialogShow = false">
|
||
</div>
|
||
<div class="titName" style="width:60%;">
|
||
<span></span>
|
||
<span>计划进度</span>
|
||
</div>
|
||
<div class="tabGtBox">
|
||
<!-- <tabGtt></tabGtt> -->
|
||
<div class="ggtHeader">
|
||
<div style="margin-left: 18px;">
|
||
任务名称
|
||
</div>
|
||
<div style="margin-left: 68px;">
|
||
开始时间
|
||
</div>
|
||
<div style="margin-left: 60px;">
|
||
结束时间
|
||
</div>
|
||
<div>
|
||
<div style="margin-left: 20px;margin-bottom: 8px;">2022-11-04</div>
|
||
<div style="display: flex;">
|
||
<div style="margin-left: 24px;font-size: 14px;">11月</div>
|
||
<div style="margin-left: 24px;font-size: 14px;">12月</div>
|
||
<div style="margin-left: 24px;font-size: 14px;">1月</div>
|
||
<div style="margin-left: 24px;font-size: 14px;">2月</div>
|
||
<div style="margin-left: 24px;font-size: 14px;">3月</div>
|
||
</div>
|
||
</div>
|
||
<div>
|
||
<div style="margin-left: 20px;margin-bottom: 8px;">2022-11-01</div>
|
||
<div style="display: flex;">
|
||
<div style="margin-left: 23px;font-size: 14px;">4月</div>
|
||
<div style="margin-left: 23px;font-size: 14px;">5月</div>
|
||
<div style="margin-left: 23px;font-size: 14px;">6月</div>
|
||
<div style="margin-left: 23px;font-size: 14px;">7月</div>
|
||
<div style="margin-left: 23px;font-size: 14px;">8月</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
<div style="width: 820px;height: 600px;margin-left: 22px;">
|
||
<div class="bodyGt" >
|
||
<span>开工奠基仪式</span>
|
||
<span>2011-11-02</span>
|
||
<span>2011-11-22</span>
|
||
<span></span>
|
||
</div>
|
||
<div class="bodyGt" style="background: rgba(26, 88, 86, 0.9);">
|
||
<span>开工奠基仪式</span>
|
||
<span>2011-11-02</span>
|
||
<span>2011-11-22</span>
|
||
<span style="left: 390px;width:50px;"></span>
|
||
</div>
|
||
<div class="bodyGt" >
|
||
<span>开工奠基仪式</span>
|
||
<span>2011-11-02</span>
|
||
<span>2011-11-22</span>
|
||
<span style="left: 445px;width:50px;"></span>
|
||
</div>
|
||
<div class="bodyGt" style="background: rgba(26, 88, 86, 0.9);">
|
||
<span>开工奠基仪式</span>
|
||
<span>2011-11-02</span>
|
||
<span>2011-11-22</span>
|
||
<span style="left: 496px;width:83px;"></span>
|
||
</div>
|
||
<div class="bodyGt" >
|
||
<span>开工奠基仪式</span>
|
||
<span>2011-11-02</span>
|
||
<span>2011-11-22</span>
|
||
<span style="left: 581px;width:83px;"></span>
|
||
</div>
|
||
<div class="bodyGt" style="background: rgba(26, 88, 86, 0.9);">
|
||
<span>开工奠基仪式</span>
|
||
<span>2011-11-02</span>
|
||
<span>2011-11-22</span>
|
||
<span style="left: 666px;width:33px;"></span>
|
||
</div>
|
||
<div class="bodyGt" >
|
||
<span>开工奠基仪式</span>
|
||
<span>2011-11-02</span>
|
||
<span>2011-11-22</span>
|
||
<span style="left: 706px;width:33px;"></span>
|
||
</div>
|
||
<div class="bodyGt" style="background: rgba(26, 88, 86, 0.9);">
|
||
<span>开工奠基仪式</span>
|
||
<span>2011-11-02</span>
|
||
<span>2011-11-22</span>
|
||
<span style="left: 741px;width:33px;"></span>
|
||
</div>
|
||
<div class="bodyGt" >
|
||
<span>开工奠基仪式</span>
|
||
<span>2011-11-02</span>
|
||
<span>2011-11-22</span>
|
||
<span style="left: 777px;width:18px;"></span>
|
||
</div>
|
||
<div class="bodyGt" style="background: rgba(26, 88, 86, 0.9);">
|
||
<span>开工奠基仪式</span>
|
||
<span>2011-11-02</span>
|
||
<span>2011-11-22</span>
|
||
<span style="left: 790px;width:18;"></span>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
|
||
</div>
|
||
<!-- 遮罩层 -->
|
||
<div class="zzc" v-if="dialogShow">
|
||
|
||
</div>
|
||
</div>
|
||
|
||
</Resize>
|
||
</template>
|
||
|
||
<script>
|
||
import lineBar from "@/components/common/lineBarChart";
|
||
import pieChartUnImg from "@/components/common/pieChartUnImg";
|
||
import pieDateChart from "@/components/common/pieDateChart";
|
||
import Resize from '../utils/Resize.vue'
|
||
import tabGtt from '@/components/common/tableGantt'
|
||
|
||
export default {
|
||
name: "report",
|
||
components: {
|
||
pieChartUnImg,
|
||
lineBar,
|
||
pieDateChart,
|
||
Resize,
|
||
tabGtt
|
||
},
|
||
data() {
|
||
return {
|
||
dialogShow: false,
|
||
colorList: ['#00A572', '#007EC1', '#DA9300', '#878787'],
|
||
iconPicList: [
|
||
{
|
||
icon: "wendu",
|
||
name: "温度",
|
||
val: "19.8",
|
||
tem: "℃"
|
||
},
|
||
{
|
||
icon: "shidu",
|
||
name: "湿度",
|
||
val: "19.8",
|
||
tem: "%"
|
||
},
|
||
{
|
||
icon: "yangqi",
|
||
name: "氧气值",
|
||
val: "19.8",
|
||
tem: "%VOL"
|
||
},
|
||
{
|
||
icon: "co2",
|
||
name: "二氧化碳",
|
||
val: "19.8",
|
||
tem: "%VOL"
|
||
},
|
||
{
|
||
icon: "ch4",
|
||
name: "甲烷",
|
||
val: "19.8",
|
||
tem: "ppm"
|
||
},
|
||
{
|
||
icon: "h2s",
|
||
name: "硫化氢",
|
||
val: "19.8",
|
||
tem: "ppm"
|
||
}
|
||
],
|
||
table2Data: [
|
||
{
|
||
entName: "开工",
|
||
start: '2021-02-01',
|
||
end: '2023-01-03',
|
||
zt: '正常完成'
|
||
},
|
||
{
|
||
entName: "勘察现场",
|
||
start: '2021-02-01',
|
||
end: '2023-01-03',
|
||
zt: '逾期中'
|
||
},
|
||
{
|
||
entName: "临时设施",
|
||
start: '2021-02-01',
|
||
end: '2023-01-03',
|
||
zt: '逾期完成'
|
||
},
|
||
{
|
||
entName: "桩基工程",
|
||
start: '2021-02-01',
|
||
end: '2023-01-03',
|
||
zt: '实施中'
|
||
},
|
||
{
|
||
entName: "水电安装",
|
||
start: '2021-02-01',
|
||
end: '2023-01-03',
|
||
zt: '未开始'
|
||
},
|
||
|
||
|
||
],
|
||
tableData: [
|
||
{
|
||
entName: "开工奠基仪式",
|
||
start: '2021-02-01',
|
||
end: '2023-01-03'
|
||
},
|
||
{
|
||
entName: "准备工作",
|
||
start: '2021-02-01',
|
||
end: '2023-01-03'
|
||
},
|
||
{
|
||
entName: "临时设施，道",
|
||
start: '2021-02-01',
|
||
end: '2023-01-03'
|
||
},
|
||
{
|
||
entName: "桩基工程",
|
||
start: '2021-02-01',
|
||
end: '2023-01-03'
|
||
},
|
||
{
|
||
entName: "攻城试桩施工",
|
||
start: '2021-02-01',
|
||
end: '2023-01-03'
|
||
},
|
||
|
||
],
|
||
qyList: [
|
||
{
|
||
name: "2023-1",
|
||
value: 12
|
||
},
|
||
{
|
||
name: "2023-2",
|
||
value: 100
|
||
},
|
||
{
|
||
name: "2023-3",
|
||
value: 90
|
||
},
|
||
{
|
||
name: "2023-11",
|
||
value: 12
|
||
},
|
||
{
|
||
name: "2023-12",
|
||
value: 80
|
||
},
|
||
{
|
||
name: "2023-13",
|
||
value: 60
|
||
},
|
||
{
|
||
name: "2023-8",
|
||
value: 60
|
||
},
|
||
],
|
||
xArry: [],
|
||
chartData: [],
|
||
peopleList: [
|
||
{
|
||
name: "姓名",
|
||
value: "：王刚"
|
||
},
|
||
{
|
||
name: "岗位",
|
||
value: "：项目经理"
|
||
},
|
||
{
|
||
name: "体温",
|
||
value: "：36.5℃"
|
||
},
|
||
{
|
||
name: "入场时间",
|
||
value: "：2022-11-26"
|
||
},
|
||
{
|
||
name: "考勤类型",
|
||
value: "：进场"
|
||
},
|
||
{
|
||
name: "打卡设备",
|
||
value: "：1号打卡机"
|
||
},
|
||
],
|
||
vdaH: 0,
|
||
type: false,
|
||
menuType: 3,
|
||
numberList: [5, 5],
|
||
boxNone:true
|
||
};
|
||
},
|
||
created() {
|
||
let h = document.documentElement.clientHeight || document.body.clientHeight;
|
||
this.vdaH = h - 0 + "px";
|
||
},
|
||
methods: {
|
||
disBox() {
|
||
this.boxNone = !this.boxNone
|
||
this.$refs.screenBox.style.animationPlayState='running'
|
||
|
||
},
|
||
goBack(val) {
|
||
if (val === 1) {
|
||
this.$router.push('/')
|
||
} else {
|
||
this.$router.go(0)
|
||
}
|
||
},
|
||
//查看甘特图
|
||
gantDialog() {
|
||
this.dialogShow = true
|
||
},
|
||
tableRowClassName({ row, rowIndex }) {
|
||
if (rowIndex % 2 === 0) {
|
||
return "success-row";
|
||
} else {
|
||
return "warning-row";
|
||
|
||
}
|
||
},
|
||
// 菜单点击
|
||
childBoxClick(val) {
|
||
this.menuType = val;
|
||
if (val === 1) {
|
||
this.$router.push('/personnel')
|
||
} else if (val === 2) {
|
||
this.$router.push('/videoSurveillance')
|
||
} else if (val === 4) {
|
||
this.$router.push('/management')
|
||
}
|
||
},
|
||
switchDiv() {
|
||
if (this.type) {
|
||
this.type = false;
|
||
this.$refs.switchBtn.style.display = "none";
|
||
} else {
|
||
this.type = true;
|
||
setTimeout(() => {
|
||
// 俩秒之后让模块消失
|
||
this.$refs.switchBtn.style.display = "block";
|
||
}, 800)
|
||
}
|
||
}
|
||
},
|
||
mounted() {
|
||
this.switchDiv();
|
||
window.onresize = () => {
|
||
return (() => {
|
||
let h = document.documentElement.clientHeight || document.body.clientHeight;
|
||
this.vdaH = h - 0 + "px";
|
||
})()
|
||
}
|
||
}
|
||
};
|
||
</script>
|
||
|
||
<style scoped lang="less">
|
||
.zzc{
|
||
background: rgba(0, 0 ,0, 0.6);
|
||
width: 100%;
|
||
height: 100%;
|
||
position: absolute;
|
||
top: 0;
|
||
}
|
||
.titTop {
|
||
width: 100%;
|
||
position: absolute;
|
||
top: 9px;
|
||
left: 9px;
|
||
display: flex;
|
||
justify-content: space-between;
|
||
|
||
.titLeft {
|
||
width: 138px;
|
||
height: 40px;
|
||
background: #025A5F;
|
||
line-height: 40px;
|
||
text-align: center;
|
||
|
||
span:nth-child(1),
|
||
span:nth-child(2) {
|
||
font-size: 14px;
|
||
color: #3CFFF9;
|
||
letter-spacing: 1px;
|
||
font-weight: 400;
|
||
cursor: pointer;
|
||
}
|
||
|
||
span:nth-child(3) {
|
||
font-size: 14px;
|
||
color: #fff;
|
||
letter-spacing: 1px;
|
||
font-weight: bold;
|
||
cursor: pointer;
|
||
}
|
||
}
|
||
|
||
.titRight {
|
||
padding-top: 11px;
|
||
padding-right: 25px;
|
||
font-size: 14px;
|
||
font-weight: 400;
|
||
color: #D1FFFE;
|
||
|
||
span:nth-child(2) {
|
||
display: inline-block;
|
||
position: absolute;
|
||
right: 80px;
|
||
width: 17.5px;
|
||
height: 18px;
|
||
background: url("~@/assets/pic/sun.png") no-repeat;
|
||
background-size: 100% 100%;
|
||
}
|
||
}
|
||
|
||
}
|
||
|
||
.bodyGt {
|
||
width: 100%;
|
||
height: 46px;
|
||
font-weight: 500;
|
||
color: #ADFFFE;
|
||
font-size: 14px;
|
||
position: relative;
|
||
span {
|
||
margin-top: 9px;
|
||
display: inline-block;
|
||
}
|
||
span:nth-child(1) {
|
||
margin-left: 18px;
|
||
}
|
||
|
||
span:nth-child(2) {
|
||
margin-left: 43px;
|
||
}
|
||
|
||
span:nth-child(3) {
|
||
margin-left: 52px;
|
||
}
|
||
|
||
span:nth-child(4) {
|
||
width: 27px;
|
||
height: 15px;
|
||
background: #0DFFFF;
|
||
position: absolute;
|
||
left: 363px;
|
||
top: 5px;
|
||
}
|
||
}
|
||
.tabGtBox {
|
||
position: absolute;
|
||
top: 50px;
|
||
|
||
.ggtHeader {
|
||
width: 820px;
|
||
height: 60px;
|
||
background: #307E7B;
|
||
margin-top: 20px;
|
||
margin-left: 22px;
|
||
display: flex;
|
||
font-size: 16px;
|
||
font-weight: 500;
|
||
color: #FFFFFF;
|
||
align-items: center;
|
||
|
||
}
|
||
}
|
||
|
||
.gttBox {
|
||
width: 863px;
|
||
height: 751px;
|
||
position: absolute;
|
||
z-index: 999;
|
||
top: 582px;
|
||
left: 50%;
|
||
background: url("~@/assets/pic/ggt.png") no-repeat;
|
||
background-size: 100% 100%;
|
||
transform: translate(-50%, -50%);
|
||
|
||
@media only screen and (max-height: 1000px) {
|
||
top: 522px;
|
||
}
|
||
|
||
.closeIcon {
|
||
width: 16px;
|
||
background: url("~@/assets/pic/close.png") no-repeat;
|
||
background-size: 100% 100%;
|
||
height: 16px;
|
||
color: #90F2EB;
|
||
float: right;
|
||
font-size: 50px;
|
||
cursor: pointer;
|
||
margin-right: 23px;
|
||
margin-top: 24px;
|
||
}
|
||
}
|
||
|
||
.table2Box {
|
||
width: 405px;
|
||
height: 76%;
|
||
top: 76px;
|
||
left: 21px;
|
||
position: absolute;
|
||
}
|
||
|
||
.tableBox {
|
||
width: 427px;
|
||
top: 70px;
|
||
left: 16px;
|
||
position: absolute;
|
||
}
|
||
.dh1 {
|
||
animation: mytest 0.5s linear;
|
||
animation-fill-mode: forwards;
|
||
}
|
||
|
||
@keyframes mytest {
|
||
100% {
|
||
right: 10px;
|
||
}
|
||
90% {
|
||
right: 120px;
|
||
}
|
||
|
||
80% {
|
||
right: 160px;
|
||
}
|
||
|
||
70% {
|
||
right: 200px;
|
||
}
|
||
|
||
60% {
|
||
right: 240px;
|
||
}
|
||
|
||
50% {
|
||
right: 300px;
|
||
}
|
||
|
||
40% {
|
||
right: 340px;
|
||
}
|
||
|
||
30% {
|
||
right: 380px;
|
||
}
|
||
|
||
20% {
|
||
right: 420px;
|
||
}
|
||
|
||
10% {
|
||
right: 460px;
|
||
}
|
||
1% {
|
||
right: 480px;
|
||
}
|
||
}
|
||
|
||
@keyframes myt2est {
|
||
1% {
|
||
right: 10px;
|
||
}
|
||
|
||
10% {
|
||
right: 120px;
|
||
}
|
||
|
||
20% {
|
||
right: 160px;
|
||
}
|
||
|
||
30% {
|
||
right: 200px;
|
||
}
|
||
|
||
40% {
|
||
right: 240px;
|
||
}
|
||
|
||
50% {
|
||
right: 300px;
|
||
}
|
||
|
||
60% {
|
||
right: 340px;
|
||
}
|
||
|
||
70% {
|
||
right: 380px;
|
||
}
|
||
|
||
80% {
|
||
right: 420px;
|
||
}
|
||
|
||
90% {
|
||
right: 460px;
|
||
}
|
||
|
||
100% {
|
||
right: 480px;
|
||
}
|
||
}
|
||
|
||
.dh2 {
|
||
animation-fill-mode: forwards;
|
||
animation: myt2est 0.5s linear;
|
||
|
||
}
|
||
.screenBox {
|
||
width: 46px;
|
||
height: 46px;
|
||
background: url("~@/assets/pic/fullScreen.png") no-repeat;
|
||
background-size: 100% 100%;
|
||
position: absolute;
|
||
bottom: 29px;
|
||
right: 480px;
|
||
cursor: pointer;
|
||
overflow-x: hidden;
|
||
transition: right 0.8s, height 1s;
|
||
overflow-y: hidden; //重点
|
||
@media only screen and (max-height: 1000px) {
|
||
bottom: 157px;
|
||
}
|
||
}
|
||
|
||
.nameMessage {
|
||
font-size: 14px;
|
||
font-family: SourceHanSansCN-Medium, SourceHanSansCN;
|
||
font-weight: 500;
|
||
margin-top: 10px;
|
||
margin-left: 18px;
|
||
|
||
span:nth-child(1) {
|
||
display: inline-block;
|
||
width: 56px;
|
||
text-align-last: justify;
|
||
}
|
||
}
|
||
|
||
.meeting {
|
||
width: 76px;
|
||
height: 29px;
|
||
background: url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAFEAAAAdCAYAAADSFYAhAAAAAXNSR0IArs4c6QAABD9JREFUaEPtWk9oHFUY/35vD+bktbvjxZsoSot/sKJoqbaltaUgUkQQK4KIqOwkama3PeRgs9mS3Q0ILeTgwYMHgxfbHurBQynUQ715KIKK2OyaQEuEEtumeZ9kZ97szpt9+95uEjPE5hLmve/7fjO/9/u+982bRT4o7gHEI9T9x4zENcCJa9uF8tf99Lgqjs0uo/irLHlxZOkr7AiKe8Hi0X68CJLRtGj/V1c2LtV86NXtl4xni5NVfBb0x0Klfh5e4L/CwGNJ5UVKXI1GcxENShEyIkFGdiKXVCqicd1ejau4Mcua0nW7jOKD8H2zUru2RuJ+AI+vRylmJbkpbr1K3SL8e60bt87S7OwK8uPFg0LknrCllNO8jCQmck7mG270n+LztWal/t3aMyBfLr4Kxs72Aw1awG0s2IqnSlvTBmOLb5vfRHzB9O18pf5LmzZv3D8CYJftfu7Pdxhg4tvNX6/XaW6unXrwTvhHSdKTvUlS1cpEoW2pTf42P31fzxo+/6RSuU1i4bPiayREgkSRrvR9hahTYnIXhj5RamUk6/j3iL9cmGr8FlehfGnsdQF+Wmvk+mevLjBXYZmiDrhotIX4LOjv1mR9iojitg75sn9MMJ65X/PcGFiVfGmh2jjXbY0dZf8NwXg2qcRIWnFeuQGkrNzaxI5brOjs4t9ZXandPP3F9QSJXvmTN4l4dy+apJThO3RUswTCS8nJF5R4XAsSZ6myj2qigNDecHovUtbwQVhsVWqf63eLQqn4Fkg8N6TW/lduUsoLf1VnLqRIzJf8t0F4PiHP6GKwo5uN41MdIWUNX66IkwvT04spEr2S/w4xXtg4CrZnJAb/3qo0UqncrnZeyX+XGS8mHn3QlsORN+fWO4v4jK9b1drFXo+KQlB8DxAvhZMqgVKHsMlD2jiSnnAGsw6y5qAOf/UEzhY+M/E/t+VHSzMzSwYS/fdB2BPuwppJzKlh3KRAWxxTsbP5KTxbsbTFGRAfzD/PV3uncpjOgf8BBPaGvYtjXupmw6bfRr15bDq+ODM/Nf2DUTNe4H9IwMtD0rf93ZhWaOTW8ebE7LKRxEJp9GMQ7dv+bAz3hEx8pVVpTPbzRiHwfSLsTxq5ft3TvgqSq59+S8PGGdbPHR9Mk81q7XJfEvOBPwbgQLeRdY8dblGNe7oeLjP4TMvNkT+P0cTc3b4keoH/KQEH+/OiFGZaeX08RYuhtXFdjS3CZ7rYnKpXbXcJrzw6TkSH1gzZsDvHytB205iZyM9kl+pMtNOduEvMGn6Ox1qnGletJBaC0RKIDtsM+84P22KsC7TLeTPwQTebDzx4lCYmrI0fHhr3T5LAkbBNjNKm8+LSFkm6nUtuIIKS6Ww6Fozjd6pjIn6m8MHftCr1uss6oxCMPUU5fjhM5/D8ECI679N/qaA+J5vGTYiO9lnCv7vMP95oNOZdSPwXtf3hFdhdhzQAAAAASUVORK5CYII=) no-repeat;
|
||
background-size: 100% 100%;
|
||
text-align: center;
|
||
line-height: 29px;
|
||
position: absolute;
|
||
top: 305px;
|
||
left: 29px;
|
||
font-size: 14px;
|
||
font-family: SourceHanSansCN-Medium, SourceHanSansCN;
|
||
font-weight: 500;
|
||
color: #FFFFFF;
|
||
padding-right: 6px;
|
||
}
|
||
|
||
.mettiogBox {
|
||
text-align: center;
|
||
line-height: 29px;
|
||
position: absolute;
|
||
top: 345px;
|
||
font-size: 14px;
|
||
font-family: SourceHanSansCN-Medium, SourceHanSansCN;
|
||
font-weight: 500;
|
||
color: #FFFFFF;
|
||
padding: 0 22px 0 33px;
|
||
height: 260px;
|
||
}
|
||
|
||
.lookFor {
|
||
width: 57px;
|
||
height: 24px;
|
||
background: url("~@/assets/pic/view.png") no-repeat;
|
||
background-size: 100% 100%;
|
||
float: right;
|
||
margin-top: 20px;
|
||
}
|
||
|
||
.videoBox {
|
||
width: 200px;
|
||
height: 200px;
|
||
position: absolute;
|
||
top: 51px;
|
||
left: 138px;
|
||
}
|
||
|
||
.fxBox {
|
||
width: 385px;
|
||
height: 208px;
|
||
background: rgba(0, 38, 36, 0.2);
|
||
position: absolute;
|
||
bottom: 18px;
|
||
box-shadow: inset 0px 0px 25px 0px rgba(255, 255, 255, 0.2);
|
||
border: 1px solid #007b7b52;
|
||
left: 50%;
|
||
transform: translateX(-50%);
|
||
}
|
||
|
||
.fxBoxChild {
|
||
font-weight: 500;
|
||
font-family: SourceHanSansCN-Medium, SourceHanSansCN;
|
||
font-size: 14px;
|
||
display: flex;
|
||
flex-wrap: wrap;
|
||
margin: 10px auto 0;
|
||
width: 90%;
|
||
border-bottom: 1px solid rgba(96, 213, 205, 0.4);
|
||
;
|
||
}
|
||
|
||
.pieBox {
|
||
width: 100%;
|
||
height: 100%;
|
||
position: absolute;
|
||
bottom: 0;
|
||
}
|
||
|
||
.kqjk {
|
||
width: 100%;
|
||
height: 170px;
|
||
position: absolute;
|
||
top: 48px;
|
||
display: flex;
|
||
|
||
.oneKqjk {
|
||
width: 135px;
|
||
height: 140px;
|
||
padding: 5px;
|
||
border: 1px solid #00EBEB;
|
||
margin-top: 52px;
|
||
margin-left: 13px;
|
||
margin-right: 14px;
|
||
|
||
img {
|
||
width: 100%;
|
||
height: 100%;
|
||
}
|
||
}
|
||
|
||
.twoKqjk {
|
||
width: 226px;
|
||
height: 180px;
|
||
margin-top: 36px;
|
||
background: rgba(0, 84, 79, 0.3);
|
||
}
|
||
}
|
||
|
||
.concet {
|
||
position: absolute;
|
||
top: 62px;
|
||
left: 70px;
|
||
display: flex;
|
||
flex-wrap: wrap;
|
||
|
||
@media only screen and (max-height: 1000px) {
|
||
top: 42px;
|
||
}
|
||
}
|
||
|
||
.topBox {
|
||
margin-top: 8px;
|
||
}
|
||
|
||
.ftahBox {
|
||
padding-top: 20px;
|
||
|
||
.iconBox1 {
|
||
background: url("~@/assets/pic/iconsj.png") no-repeat;
|
||
}
|
||
|
||
.iconBox2 {
|
||
background: url("~@/assets/pic/iconpre.png") no-repeat;
|
||
}
|
||
|
||
.iconBox3 {
|
||
background: url("~@/assets/pic/icontime.png") no-repeat;
|
||
}
|
||
|
||
.dayIcon {
|
||
display: block;
|
||
width: 20px;
|
||
height: 20px;
|
||
background-size: 100% 100%;
|
||
margin-top: 2px
|
||
}
|
||
|
||
.numb {
|
||
display: block;
|
||
font-size: 22px;
|
||
font-weight: 400;
|
||
color: #ffff;
|
||
margin-left: 8px;
|
||
}
|
||
|
||
.day {
|
||
display: block;
|
||
font-size: 14px;
|
||
font-family: SourceHanSansCN-Medium, SourceHanSansCN;
|
||
color: #ffff;
|
||
margin-left: 3px;
|
||
margin-top: 3px;
|
||
}
|
||
|
||
.ysg {
|
||
display: block;
|
||
font-size: 14px;
|
||
font-family: SourceHanSansCN-Medium, SourceHanSansCN;
|
||
color: #60D5CD;
|
||
margin-bottom: 4px;
|
||
}
|
||
}
|
||
|
||
.bgPicture {
|
||
width: 100%;
|
||
background: url("~@/assets/pic/BG.jpg") no-repeat;
|
||
background-size: 100% 100%;
|
||
}
|
||
|
||
.title {
|
||
width: 100%;
|
||
height: 168px;
|
||
background: url("~@/assets/pic/title1.png") no-repeat;
|
||
background-size: 100% 100%;
|
||
}
|
||
|
||
.titName {
|
||
width: 100%;
|
||
height: 30px;
|
||
position: absolute;
|
||
top: 15px;
|
||
|
||
span:nth-child(1) {
|
||
display: inline-block;
|
||
width: 18px;
|
||
height: 18px;
|
||
background: url("~@/assets/pic/titleMark.png") no-repeat;
|
||
background-size: 100% 100%;
|
||
margin-left: 16px;
|
||
margin-right: 8px;
|
||
}
|
||
|
||
span:nth-child(2) {
|
||
display: inline-block;
|
||
font-size: 22px;
|
||
font-family: ht2;
|
||
font-weight: bold;
|
||
color: #86eee7;
|
||
margin-right: 7px;
|
||
}
|
||
|
||
span:nth-child(3) {
|
||
display: inline-block;
|
||
width: 248px;
|
||
height: 12px;
|
||
background: url("~@/assets/pic/4words.png") no-repeat;
|
||
background-size: 100% 100%;
|
||
}
|
||
}
|
||
|
||
.leftOneBox {
|
||
overflow-x: hidden;
|
||
transition: left 0.8s, height 1s;
|
||
overflow-y: hidden; //重点
|
||
width: 444px;
|
||
height: 262px;
|
||
background: url("~@/assets/pic/rightBox.png") no-repeat;
|
||
background-size: 100% 100%;
|
||
position: absolute;
|
||
top: 97px;
|
||
left: 27px;
|
||
|
||
@media only screen and (max-height: 1000px) {
|
||
top: 77px;
|
||
height: 242px;
|
||
}
|
||
}
|
||
|
||
.leftTwoBox {
|
||
width: 442.38px;
|
||
overflow-x: hidden;
|
||
transition: left 0.8s, height 1s;
|
||
overflow-y: hidden; //重点
|
||
height: 260px;
|
||
background: url("~@/assets/pic/rightBox.png") no-repeat;
|
||
background-size: 100% 100%;
|
||
position: absolute;
|
||
top: 384px;
|
||
left: 27px;
|
||
|
||
@media only screen and (max-height: 1000px) {
|
||
height: 240px;
|
||
top: 338px;
|
||
}
|
||
}
|
||
|
||
.leftThreeBox {
|
||
width: 442px;
|
||
height: 383px;
|
||
background: url("~@/assets/pic/rightBox.png") no-repeat;
|
||
background-size: 100% 100%;
|
||
position: absolute;
|
||
top: 669px;
|
||
left: 27px;
|
||
overflow-x: hidden;
|
||
transition: left 0.8s, height 1s;
|
||
overflow-y: hidden; //重点
|
||
@media only screen and (max-height: 1000px) {
|
||
top: 597px;
|
||
height: 320px;
|
||
overflow: hidden;
|
||
}
|
||
|
||
.btnIcon {
|
||
width: 59px;
|
||
height: 29px;
|
||
background: url("~@/assets/pic/jhjd2.png") no-repeat;
|
||
background-size: 100% 100%;
|
||
position: absolute;
|
||
right: 11px;
|
||
top: 30px;
|
||
cursor: pointer;
|
||
}
|
||
}
|
||
|
||
.rightOneBox {
|
||
width: 444px;
|
||
height: 465px;
|
||
background: url("~@/assets/pic/rightBoxsc.png") no-repeat;
|
||
background-size: 100% 100%;
|
||
position: absolute;
|
||
top: 96px;
|
||
right: 27px;
|
||
overflow-x: hidden;
|
||
transition: right 0.8s, height 1s;
|
||
overflow-y: hidden; //重点
|
||
@media only screen and (max-height: 1000px) {
|
||
top: 76px;
|
||
}
|
||
}
|
||
|
||
.securityCheck {
|
||
width: 100%;
|
||
height: 80%;
|
||
position: absolute;
|
||
bottom: 0;
|
||
}
|
||
|
||
.rightThreeBox {
|
||
overflow-x: hidden;
|
||
transition: right 0.8s, height 1s;
|
||
overflow-y: hidden; //重点
|
||
width: 444px;
|
||
height: 467px;
|
||
background: url("~@/assets/pic/rightBoxsc.png") no-repeat;
|
||
background-size: 100% 100%;
|
||
position: absolute;
|
||
top: 584px;
|
||
right: 27px;
|
||
|
||
@media only screen and (max-height: 1000px) {
|
||
top: 560px;
|
||
height: 357px;
|
||
overflow: hidden;
|
||
}
|
||
}
|
||
|
||
.container {
|
||
display: flex;
|
||
position: absolute;
|
||
top: 50%;
|
||
transform: translateY(-50%);
|
||
right: 0;
|
||
}
|
||
|
||
.box {
|
||
height: 784px;
|
||
overflow-x: hidden;
|
||
transition: width 1s, height 1s;
|
||
overflow-y: hidden; //重点
|
||
background: url("~@/assets/pic/closeMenu.png") no-repeat;
|
||
background-size: 100% 100%;
|
||
flex-direction: column;
|
||
display: flex;
|
||
align-items: center;
|
||
justify-content: center;
|
||
|
||
.childBoxChoose {
|
||
cursor: pointer;
|
||
width: 166px;
|
||
height: 54px;
|
||
margin-bottom: 45px;
|
||
display: flex;
|
||
align-items: center;
|
||
justify-content: center;
|
||
background: url("~@/assets/pic/btn1.png") no-repeat;
|
||
background-size: 100% 100%;
|
||
font-size: 19px;
|
||
font-family: SourceHanSansCN-Bold, SourceHanSansCN;
|
||
font-weight: bold;
|
||
color: #ffffff;
|
||
margin-left: 20px;
|
||
|
||
span:nth-child(1) {
|
||
display: inline-block;
|
||
width: 20px;
|
||
height: 20px;
|
||
margin-right: 8px;
|
||
}
|
||
|
||
span:nth-child(3) {
|
||
display: inline-block;
|
||
width: 10px;
|
||
height: 17px;
|
||
margin-left: 10px;
|
||
background: url("~@/assets/pic/enter1.png") no-repeat;
|
||
background-size: 100% 100%;
|
||
}
|
||
}
|
||
|
||
.childBox:hover {
|
||
background: url("~@/assets/pic/btn1.png") no-repeat;
|
||
}
|
||
|
||
.childBox {
|
||
cursor: pointer;
|
||
width: 166px;
|
||
height: 54px;
|
||
margin-bottom: 45px;
|
||
display: flex;
|
||
align-items: center;
|
||
justify-content: center;
|
||
background: url("~@/assets/pic/btn2.png") no-repeat;
|
||
background-size: 100% 100%;
|
||
font-size: 19px;
|
||
font-family: SourceHanSansCN-Bold, SourceHanSansCN;
|
||
font-weight: bold;
|
||
color: #ffffff;
|
||
margin-left: 20px;
|
||
|
||
span:nth-child(1) {
|
||
display: inline-block;
|
||
width: 20px;
|
||
height: 20px;
|
||
margin-right: 8px;
|
||
}
|
||
|
||
span:nth-child(3) {
|
||
display: inline-block;
|
||
width: 10px;
|
||
height: 17px;
|
||
margin-left: 10px;
|
||
background: url("~@/assets/pic/enter2.png") no-repeat;
|
||
background-size: 100% 100%;
|
||
}
|
||
}
|
||
}
|
||
|
||
.icon1 {
|
||
background: url("~@/assets/pic/shipinjiankong.png") no-repeat;
|
||
background-size: 100% 100%;
|
||
}
|
||
|
||
.icon2 {
|
||
background: url("~@/assets/pic/renyuanguanli.png") no-repeat;
|
||
background-size: 100% 100%;
|
||
}
|
||
|
||
.icon3 {
|
||
background: url("~@/assets/pic/jinduguanli.png") no-repeat;
|
||
background-size: 100% 100%;
|
||
}
|
||
|
||
.icon4 {
|
||
background: url("~@/assets/pic/anquanguanli.png") no-repeat;
|
||
background-size: 100% 100%;
|
||
}
|
||
|
||
.closeBtn {
|
||
position: relative;
|
||
top: 343px;
|
||
height: 53px;
|
||
width: 14px;
|
||
cursor: pointer;
|
||
left: -265px;
|
||
}
|
||
|
||
.switchBtn {
|
||
position: absolute;
|
||
transform: rotateY(358deg);
|
||
left: -14px;
|
||
top: 44%;
|
||
height: 53px;
|
||
width: 14px;
|
||
background: url("~@/assets/pic/openMenu.png") no-repeat;
|
||
background-size: 100% 100%;
|
||
cursor: pointer;
|
||
display: none;
|
||
}
|
||
</style>
|
||
<style lang="less" scoped>
|
||
.el-table {
|
||
&.el-table--scrollable-y ::-webkit-scrollbar {
|
||
display: none !important; //隐藏滚动条
|
||
}
|
||
}
|
||
|
||
/deep/ .el-table tr {
|
||
background-color: transparent;
|
||
}
|
||
|
||
/deep/ .el-table,
|
||
.el-table__expanded-cell {
|
||
background-color: transparent !important;
|
||
}
|
||
|
||
/deep/ .el-table th {
|
||
background-color: #2f807d !important;
|
||
border-bottom: none !important;
|
||
color: #ffffff !important;
|
||
}
|
||
|
||
/deep/ .el-table--enable-row-transition .el-table__body td,
|
||
/deep/ .el-table .cell {
|
||
// background-color: transparent !important;
|
||
color: #ADFFFE !important;
|
||
border: none !important;
|
||
padding-left: 0 ;
|
||
padding-right: 0 !important;
|
||
}
|
||
|
||
/deep/ .el-table th>.cell {
|
||
color: rgba(254, 254, 254, 1) !important;
|
||
font-weight: 700 !important;
|
||
}
|
||
|
||
.el-table::before {
|
||
//去除底部白线
|
||
left: 0 !important;
|
||
bottom: 0 !important;
|
||
width: 100% !important;
|
||
height: 0px !important;
|
||
}
|
||
|
||
/deep/ .el-table .el-table__cell.gutter {
|
||
display: none !important;
|
||
;
|
||
}
|
||
|
||
/deep/ .el-form-item__label {
|
||
color: white !important;
|
||
}
|
||
|
||
//滚动条的宽度
|
||
::-webkit-scrollbar {
|
||
width: 0px;
|
||
height: 0px;
|
||
background-color: #070c4f;
|
||
border-radius: 6px;
|
||
}
|
||
|
||
/deep/ .el-table--enable-row-hover .el-table__body tr:hover>td {
|
||
background-color: transparent !important;
|
||
/* color: #f19944; */
|
||
/* 设置文字颜色，可以选择不设置 */
|
||
}
|
||
|
||
/deep/ .el-table .warning-row {
|
||
background: #1A5856 !important;
|
||
}
|
||
|
||
/deep/ .el-table .success-row {
|
||
background: transparent;
|
||
}
|
||
</style>
|