dev: 开发指挥部大屏架子
This commit is contained in:
Vce
parent
0163cbf5c4
commit
2d601bd506
@ -13,9 +13,9 @@ NODE_ENV = 'development'
|
|||||||
# 沈阳合盈线上
|
# 沈阳合盈线上
|
||||||
# VITE_API_URL = "http://101.43.164.214:45022"
|
# VITE_API_URL = "http://101.43.164.214:45022"
|
||||||
# 演示平台
|
# 演示平台
|
||||||
# VITE_API_URL = 'http://jxj.zhgdyun.com:9809'
|
VITE_API_URL = 'http://jxj.zhgdyun.com:9809'
|
||||||
# 百色七参数线上地址
|
# 百色七参数线上地址
|
||||||
VITE_API_URL = 'http://101.43.164.214:11111'
|
# VITE_API_URL = 'http://101.43.164.214:11111'
|
||||||
# 七参数标准版(测试平台)
|
# 七参数标准版(测试平台)
|
||||||
# VITE_API_URL = 'http://jxj.zhgdyun.com:15551'
|
# VITE_API_URL = 'http://jxj.zhgdyun.com:15551'
|
||||||
# 七参数标准版(测试平台)
|
# 七参数标准版(测试平台)
|
||||||
|
|||||||
@ -12,10 +12,10 @@ NODE_ENV = "production"
|
|||||||
# VITE_API_URL = "http://183.249.224.118:9003"
|
# VITE_API_URL = "http://183.249.224.118:9003"
|
||||||
|
|
||||||
# 百色 新项目通用地址
|
# 百色 新项目通用地址
|
||||||
VITE_API_URL = 'http://101.43.164.214:11111'
|
# VITE_API_URL = 'http://101.43.164.214:11111'
|
||||||
|
|
||||||
# 七参数标准版(演示平台)
|
# 七参数标准版(演示平台)
|
||||||
# VITE_API_URL = 'http://jxj.zhgdyun.com:9809'
|
VITE_API_URL = 'http://jxj.zhgdyun.com:9809'
|
||||||
# 七参数标准版(测试平台)
|
# 七参数标准版(测试平台)
|
||||||
# VITE_API_URL = 'http://jxj.zhgdyun.com:15551'
|
# VITE_API_URL = 'http://jxj.zhgdyun.com:15551'
|
||||||
# 七参数标准版(测试平台)
|
# 七参数标准版(测试平台)
|
||||||
|
|||||||
BIN
src/assets/images/commandScreen/card-center-bottom.png
Normal file
BIN
src/assets/images/commandScreen/card-center-bottom.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 27 KiB |
BIN
src/assets/images/commandScreen/card-left-bottom.png
Normal file
BIN
src/assets/images/commandScreen/card-left-bottom.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 25 KiB |
|
Before Width: | Height: | Size: 17 KiB After Width: | Height: | Size: 17 KiB |
BIN
src/assets/images/commandScreen/card-right-all.png
Normal file
BIN
src/assets/images/commandScreen/card-right-all.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 36 KiB |
@ -26,9 +26,9 @@ export const BASE_IMAGE_URL = import.meta.env.VITE_BASE_IMAGE_URL;
|
|||||||
// export const COMPANY: string = ""; //标准版
|
// export const COMPANY: string = ""; //标准版
|
||||||
// export const COMPANY: string = "as"; //鞍山项目
|
// export const COMPANY: string = "as"; //鞍山项目
|
||||||
// export const COMPANY: string = "agjt"; //鞍钢集团
|
// export const COMPANY: string = "agjt"; //鞍钢集团
|
||||||
// export const COMPANY: string = "agjtCommand"; //鞍钢集团指挥部大屏
|
export const COMPANY: string = "agjtCommand"; //鞍钢集团指挥部大屏
|
||||||
// export const COMPANY: string = "slx"; //苏立信项目
|
// export const COMPANY: string = "slx"; //苏立信项目
|
||||||
export const COMPANY: string = "hfqc"; //合肥启程项目
|
// export const COMPANY: string = "hfqc"; //合肥启程项目
|
||||||
// export const COMPANY: string = "jsyc"; // 江苏盐城项目
|
// export const COMPANY: string = "jsyc"; // 江苏盐城项目
|
||||||
// export const COMPANY: string = "syhy"; //沈阳合盈盘锦项目 (需要去src\routers\modules\staticRouter.ts更换首页)
|
// export const COMPANY: string = "syhy"; //沈阳合盈盘锦项目 (需要去src\routers\modules\staticRouter.ts更换首页)
|
||||||
// export const COMPANY: string = "jxwjj"; //嘉兴王江泾公用码头项目 (需要去src\routers\modules\staticRouter.ts更换首页)
|
// export const COMPANY: string = "jxwjj"; //嘉兴王江泾公用码头项目 (需要去src\routers\modules\staticRouter.ts更换首页)
|
||||||
|
|||||||
@ -24,8 +24,8 @@ export const staticRouter: RouteRecordRaw[] = [
|
|||||||
{
|
{
|
||||||
path: "/large",
|
path: "/large",
|
||||||
name: "大屏",
|
name: "大屏",
|
||||||
component: () => import("@/views/sevenLargeScreen/indexL.vue"), //七参数标准版
|
// component: () => import("@/views/sevenLargeScreen/indexL.vue"), //七参数标准版
|
||||||
// component: () => import("@/views/commandScreen/indexCommand.vue"), //指挥部大屏
|
component: () => import("@/views/commandScreen/indexCommand.vue"), //指挥部大屏
|
||||||
// component: () => import("@/views/sevenLargeScreen/indexL_syhy.vue"), // 只有一级路由(盘锦、嘉兴、鄱湖美湾医疗项目需切换至该首页)
|
// component: () => import("@/views/sevenLargeScreen/indexL_syhy.vue"), // 只有一级路由(盘锦、嘉兴、鄱湖美湾医疗项目需切换至该首页)
|
||||||
children: [
|
children: [
|
||||||
{
|
{
|
||||||
|
|||||||
@ -1,66 +1,6 @@
|
|||||||
<template>
|
<template>
|
||||||
<div class="leftTop">
|
<div class="centerBottom">
|
||||||
<Card title="进度概况">
|
|
||||||
<div class="progressContent">
|
|
||||||
<div style="display: flex; padding: 2% 1%; color: #fff; font-size: 16px">
|
|
||||||
<div style="width: 5px; height: 5px; background: rgba(130, 251, 234, 1); border-radius: 10px; margin: 1%"></div>
|
|
||||||
<div><i>倒计时</i></div>
|
|
||||||
</div>
|
|
||||||
<div class="totalDay">
|
|
||||||
<div style="line-height: 45px">
|
|
||||||
项目总天数
|
|
||||||
<span v-if="!projectData.totalProjectDay" class="dayImg">0</span>
|
|
||||||
<span v-else class="dayImg" v-for="item in projectData.totalProjectDay" :key="item">{{ item }}</span>
|
|
||||||
<!-- <span class="dayImg">0</span>
|
|
||||||
<span class="dayImg">4</span>
|
|
||||||
<span class="dayImg">7</span> -->
|
|
||||||
<span style="margin-left: 4%">天</span>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
<div class="residueDay">
|
|
||||||
<div style="line-height: 45px">
|
|
||||||
项目剩余天数
|
|
||||||
<span v-if="!projectData.surplusDay" class="dayImg">0</span>
|
|
||||||
<span v-else class="dayImg" v-for="item in projectData.surplusDay" :key="item">{{ item }}</span>
|
|
||||||
<!-- <span class="dayImg">2</span>
|
|
||||||
<span class="dayImg">8</span>
|
|
||||||
<span class="dayImg">6</span> -->
|
|
||||||
<span style="margin-left: 4%">天</span>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
<div style="display: flex; margin-top: 4%; margin-left: 2%; color: #fff; font-size: 16px; width: 30%">
|
|
||||||
<div style="width: 5px; height: 5px; background: rgba(130, 251, 234, 1); border-radius: 10px; margin: 1%"></div>
|
|
||||||
<div><i>里程碑</i></div>
|
|
||||||
</div>
|
|
||||||
<el-scrollbar style="width: 94%; margin: 3% 0% 0% 3%; height: 30%" v-if="progressList.length > 0">
|
|
||||||
<div class="progressData">
|
|
||||||
<div class="data" v-for="item in progressList" :key="item.id">
|
|
||||||
<div v-if="item.status == 0" class="text" :title="item.name">{{ item.name }}</div>
|
|
||||||
<img v-if="item.status == 0" src="@/assets/images/comprehensiveManage/project7.png" alt="" />
|
|
||||||
<div
|
|
||||||
v-if="item.status == 1"
|
|
||||||
style="color: #fff; font-size: 18px; margin-top: -5%"
|
|
||||||
:title="item.name"
|
|
||||||
class="statusImg1"
|
|
||||||
>
|
|
||||||
<div class="stage-name">{{ item.name }}</div>
|
|
||||||
<div v-if="item.status == 1" class="statusImg"></div>
|
|
||||||
</div>
|
|
||||||
<img
|
|
||||||
v-if="item.status == 1"
|
|
||||||
style="width: 40px; margin-top: 1%"
|
|
||||||
src="@/assets/images/comprehensiveManage/project11.png"
|
|
||||||
alt=""
|
|
||||||
/>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
</el-scrollbar>
|
|
||||||
<div class="notoDta" v-else>
|
|
||||||
<img src="@/assets/images/noData.png" alt="" />
|
|
||||||
<div>暂无数据</div>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
</Card>
|
|
||||||
</div>
|
</div>
|
||||||
</template>
|
</template>
|
||||||
|
|
||||||
@ -153,126 +93,9 @@ onMounted( async () => {
|
|||||||
</script>
|
</script>
|
||||||
|
|
||||||
<style lang="scss" scoped>
|
<style lang="scss" scoped>
|
||||||
.el-scrollbar__wrap {
|
.centerBottom{
|
||||||
overflow-x: auto;
|
background: url("@/assets/images/commandScreen/card-center-bottom.png") no-repeat;
|
||||||
height: calc(100% + 20px); //多出来的20px是横向滚动条默认的样式
|
// background: #fff;
|
||||||
}
|
|
||||||
|
|
||||||
.el-scrollbar {
|
|
||||||
background: url("@/assets/images/comprehensiveManage/project4.png") no-repeat;
|
|
||||||
background-size: 100% 40%;
|
|
||||||
background-position-y: 30%;
|
|
||||||
}
|
|
||||||
|
|
||||||
.leftTop {
|
|
||||||
width: 100%;
|
|
||||||
height: 100%;
|
|
||||||
}
|
|
||||||
.progressContent {
|
|
||||||
width: 100%;
|
|
||||||
height: 100%;
|
|
||||||
position: relative;
|
|
||||||
.totalDay {
|
|
||||||
width: 40%;
|
|
||||||
float: left;
|
|
||||||
color: #ccc;
|
|
||||||
font-size: 16px;
|
|
||||||
margin-left: 15%;
|
|
||||||
}
|
|
||||||
.residueDay {
|
|
||||||
width: 40%;
|
|
||||||
float: right;
|
|
||||||
color: #ccc;
|
|
||||||
font-size: 16px;
|
|
||||||
margin-right: 5%;
|
|
||||||
}
|
|
||||||
.dayImg {
|
|
||||||
margin-left: 2%;
|
|
||||||
font-size: 26px;
|
|
||||||
display: inline-block;
|
|
||||||
width: 35px;
|
|
||||||
height: 45px;
|
|
||||||
font-family: sadigitalNumber;
|
|
||||||
background: url("@/assets/images/comprehensiveManage/project1.png") no-repeat;
|
|
||||||
background-size: 100% 100%;
|
background-size: 100% 100%;
|
||||||
text-align: center;
|
|
||||||
color: #4ac0f3;
|
|
||||||
}
|
|
||||||
.progressData {
|
|
||||||
// position: absolute;
|
|
||||||
// bottom: 3%;
|
|
||||||
// left: 3%;
|
|
||||||
width: 100%;
|
|
||||||
height: 30%;
|
|
||||||
display: flex;
|
|
||||||
cursor: pointer;
|
|
||||||
text-align: center;
|
|
||||||
// background: url("@/assets/images/comprehensiveManage/project4.png") no-repeat;
|
|
||||||
// background-size: 100% 40%;
|
|
||||||
// background-position-y: 30%;
|
|
||||||
// .stage-bg {
|
|
||||||
// height: 50%;
|
|
||||||
// position: absolute;
|
|
||||||
// img {
|
|
||||||
// width: 100%;
|
|
||||||
// height: 100%;
|
|
||||||
// }
|
|
||||||
// }
|
|
||||||
.data {
|
|
||||||
color: #ccc;
|
|
||||||
font-size: 15px;
|
|
||||||
padding-left: 4%;
|
|
||||||
padding-right: 1%;
|
|
||||||
z-index: 1;
|
|
||||||
.text {
|
|
||||||
white-space: nowrap;
|
|
||||||
overflow: hidden;
|
|
||||||
text-overflow: ellipsis;
|
|
||||||
}
|
|
||||||
img {
|
|
||||||
width: 20px;
|
|
||||||
margin-top: 18%;
|
|
||||||
margin-left: 15%;
|
|
||||||
}
|
|
||||||
}
|
|
||||||
.statusImg {
|
|
||||||
position: absolute;
|
|
||||||
top: 190%;
|
|
||||||
left: -10%;
|
|
||||||
width: 120px;
|
|
||||||
height: 1px;
|
|
||||||
background: url("@/assets/images/comprehensiveManage/project6.png") no-repeat;
|
|
||||||
background-size: 100% 100%;
|
|
||||||
}
|
|
||||||
.statusImg1 {
|
|
||||||
position: relative;
|
|
||||||
background: url("@/assets/images/comprehensiveManage/project5.png") no-repeat;
|
|
||||||
background-size: 100% 100%;
|
|
||||||
.stage-name {
|
|
||||||
text-align: center;
|
|
||||||
white-space: nowrap;
|
|
||||||
overflow: hidden;
|
|
||||||
text-overflow: ellipsis;
|
|
||||||
}
|
|
||||||
}
|
|
||||||
}
|
|
||||||
}
|
|
||||||
::v-deep .h-card .content {
|
|
||||||
height: 80%;
|
|
||||||
margin-top: 1.8%;
|
|
||||||
}
|
|
||||||
.notoDta {
|
|
||||||
bottom: 10%;
|
|
||||||
width: 20%;
|
|
||||||
left: 35%;
|
|
||||||
text-align: center;
|
|
||||||
position: absolute;
|
|
||||||
img {
|
|
||||||
width: 40%;
|
|
||||||
}
|
|
||||||
div {
|
|
||||||
color: #fff;
|
|
||||||
font-size: 14px;
|
|
||||||
}
|
|
||||||
}
|
}
|
||||||
</style>
|
</style>
|
||||||
|
|||||||
@ -1,73 +1,6 @@
|
|||||||
<template>
|
<template>
|
||||||
<div class="leftTop">
|
<div class="centerTop">
|
||||||
<Card title="项目展示123">
|
|
||||||
<div class="top-tab" v-if="COMPANY === 'agjt'">
|
|
||||||
<div
|
|
||||||
class="tab-box"
|
|
||||||
:style="boxStyle(item)"
|
|
||||||
v-for="(item, index) in topText2"
|
|
||||||
:key="item.id"
|
|
||||||
@click="activeBtn(item, index)"
|
|
||||||
>
|
|
||||||
{{ item.title }}
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
<div class="top-tab" v-else>
|
|
||||||
<div
|
|
||||||
class="tab-box"
|
|
||||||
:style="boxStyle(item)"
|
|
||||||
v-for="(item, index) in topText"
|
|
||||||
:key="item.id"
|
|
||||||
@click="activeBtn(item, index)"
|
|
||||||
>
|
|
||||||
{{ item.title }}
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
|
|
||||||
<div class="href-content" v-if="showVideo == 1">
|
|
||||||
<el-carousel indicator-position="none" height="450px" style="width: 76%;">
|
|
||||||
<el-carousel-item v-for="(item, index) in videoList" :key="item.id">
|
|
||||||
<ckplayerComp
|
|
||||||
:name="index"
|
|
||||||
:poster="''"
|
|
||||||
:deviceIp="`http://${item.account}:${item.password}`"
|
|
||||||
:videoUrls="item.serialNumber"
|
|
||||||
:autoPlay="true"
|
|
||||||
></ckplayerComp>
|
|
||||||
</el-carousel-item>
|
|
||||||
</el-carousel>
|
|
||||||
</div>
|
|
||||||
<div class="videoBox" v-if="showVideo == 2" @mouseenter="showChangeVideo = true" @mouseleave="showChangeVideo = false">
|
|
||||||
<el-upload
|
|
||||||
:action="BASEURL + '/upload/image'"
|
|
||||||
:on-success="file => handleSuccessTwo(file, 1)"
|
|
||||||
:on-error="file => handleError(file, 1)"
|
|
||||||
:beforeUpload="file => handleBeforeUploadVideo(file, 1)"
|
|
||||||
name="files"
|
|
||||||
:show-file-list="false"
|
|
||||||
>
|
|
||||||
<!-- 更换视频 -->
|
|
||||||
<span class="change-video" v-if="showChangeVideo">更换视频</span>
|
|
||||||
</el-upload>
|
|
||||||
<video :src="BASEURL + '/image/' + projectData.videoUrl" class="videos" autoplay controls loop></video>
|
|
||||||
</div>
|
|
||||||
<div class="imgBox" v-if="showVideo == 3">
|
|
||||||
<div class="imgs" @mouseenter="showChangeImg = true" @mouseleave="showChangeImg = false">
|
|
||||||
<el-upload
|
|
||||||
:action="BASEURL + '/upload/image'"
|
|
||||||
:on-success="file => handleSuccess(file, 1)"
|
|
||||||
:on-error="file => handleError(file, 1)"
|
|
||||||
:beforeUpload="file => handleBeforeUploadPic(file, 1)"
|
|
||||||
name="files"
|
|
||||||
:show-file-list="false"
|
|
||||||
>
|
|
||||||
<!-- 更换图片 -->
|
|
||||||
<span class="change-video" v-if="showChangeImg">更换图片</span>
|
|
||||||
</el-upload>
|
|
||||||
<img :src="BASEURL + '/image/' + picUrl" alt="" />
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
</Card>
|
|
||||||
</div>
|
</div>
|
||||||
</template>
|
</template>
|
||||||
|
|
||||||
@ -296,87 +229,7 @@ onMounted(async () => {
|
|||||||
</script>
|
</script>
|
||||||
|
|
||||||
<style lang="scss" scoped>
|
<style lang="scss" scoped>
|
||||||
.leftTop {
|
.centerTop {
|
||||||
width: 100%;
|
background-color: darkred;
|
||||||
height: 100%;
|
|
||||||
position: relative;
|
|
||||||
.videoBox {
|
|
||||||
width: 100%;
|
|
||||||
height: 92%;
|
|
||||||
margin-top: 8%;
|
|
||||||
background: url("@/assets/images/comprehensiveManage/project10.png") no-repeat;
|
|
||||||
background-size: 100% 100%;
|
|
||||||
.videos {
|
|
||||||
width: 78%;
|
|
||||||
height: 90%;
|
|
||||||
margin-left: 11%;
|
|
||||||
margin-top: 1%;
|
|
||||||
}
|
|
||||||
}
|
|
||||||
.imgBox {
|
|
||||||
width: 100%;
|
|
||||||
height: 92%;
|
|
||||||
margin-top: 8%;
|
|
||||||
background: url("@/assets/images/comprehensiveManage/project10.png") no-repeat;
|
|
||||||
background-size: 100% 100%;
|
|
||||||
.imgs {
|
|
||||||
width: 78%;
|
|
||||||
height: 82%;
|
|
||||||
margin: 3% 11%;
|
|
||||||
img {
|
|
||||||
width: 100%;
|
|
||||||
height: 100%;
|
|
||||||
margin-top: 5%;
|
|
||||||
}
|
|
||||||
}
|
|
||||||
}
|
|
||||||
.href-content {
|
|
||||||
width: 100%;
|
|
||||||
height: 92%;
|
|
||||||
margin-top: 8%;
|
|
||||||
background: url("@/assets/images/comprehensiveManage/project10.png") no-repeat;
|
|
||||||
background-size: 100% 100%;
|
|
||||||
display: flex;
|
|
||||||
align-items: center;
|
|
||||||
justify-content: center;
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
// .href-content {
|
|
||||||
// width: 95%;
|
|
||||||
// height: 92%;
|
|
||||||
// margin: 0 auto;
|
|
||||||
// margin-top: 8%;
|
|
||||||
// }
|
|
||||||
|
|
||||||
.change-video {
|
|
||||||
position: absolute;
|
|
||||||
background: url("@/assets/images/cardImg.png") no-repeat;
|
|
||||||
background-size: 100% 100%;
|
|
||||||
color: #fff;
|
|
||||||
padding: 1% 2%;
|
|
||||||
font-size: 16px;
|
|
||||||
left: 45%;
|
|
||||||
top: 55%;
|
|
||||||
z-index: 10;
|
|
||||||
}
|
|
||||||
|
|
||||||
.top-tab {
|
|
||||||
position: absolute;
|
|
||||||
top: 12%;
|
|
||||||
width: 100%;
|
|
||||||
box-sizing: border-box;
|
|
||||||
padding: 0 30%;
|
|
||||||
display: flex;
|
|
||||||
justify-content: space-around;
|
|
||||||
.tab-box {
|
|
||||||
font-size: 16px;
|
|
||||||
color: rgba(255, 255, 255, 0.3);
|
|
||||||
cursor: pointer;
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
::v-deep .h-card .content {
|
|
||||||
background: none;
|
|
||||||
}
|
}
|
||||||
</style>
|
</style>
|
||||||
|
|||||||
@ -1,25 +1,23 @@
|
|||||||
<template>
|
<template>
|
||||||
<div class="projectContent">
|
<div class="projectContent">
|
||||||
<div class="left">
|
<div class="left">
|
||||||
<leftTop :projectData="projectData" class="leftTop" ref="leftTopRef"></leftTop>
|
<leftTop class="leftTop"></leftTop>
|
||||||
<leftCenter :statisticsCount="statisticsCount" class="leftCenter"></leftCenter>
|
<leftBottom class="leftBottom"></leftBottom>
|
||||||
<!-- <leftBottom :statisticsCount="statisticsCount" class="leftBottom"></leftBottom> -->
|
|
||||||
</div>
|
</div>
|
||||||
<div class="center">
|
<div class="center">
|
||||||
<centerTop :projectData="projectData" class="centerTop" ref="centerTopRef"></centerTop>
|
<centerTop class="centerTop"></centerTop>
|
||||||
<centerBottom :projectData="projectData" class="centerBottom" ref="centerBottomRef"></centerBottom>
|
<centerBottom class="centerBottom"></centerBottom>
|
||||||
</div>
|
</div>
|
||||||
<div class="right">
|
<div class="right">
|
||||||
<rightTop class="rightTop" ref="rightTopRef"></rightTop>
|
<rightTop class="rightTop"></rightTop>
|
||||||
<rightCenter class="rightCenter" ref="rightCenterRef"></rightCenter>
|
<rightCenter class="rightCenter"></rightCenter>
|
||||||
<rightBottom class="rightBottom" ref="rightBottomRef"></rightBottom>
|
<rightBottom class="rightBottom"></rightBottom>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
</template>
|
</template>
|
||||||
|
|
||||||
<script setup lang="ts">
|
<script setup lang="ts">
|
||||||
import leftTop from "@/views/commandScreen/commandCenter/leftTop.vue";
|
import leftTop from "@/views/commandScreen/commandCenter/leftTop.vue";
|
||||||
import leftCenter from "@/views/commandScreen/commandCenter/leftCenter.vue";
|
|
||||||
import leftBottom from "@/views/commandScreen/commandCenter/leftBottom.vue";
|
import leftBottom from "@/views/commandScreen/commandCenter/leftBottom.vue";
|
||||||
import centerTop from "@/views/commandScreen/commandCenter/centerTop.vue";
|
import centerTop from "@/views/commandScreen/commandCenter/centerTop.vue";
|
||||||
import centerBottom from "@/views/commandScreen/commandCenter/centerBottom.vue";
|
import centerBottom from "@/views/commandScreen/commandCenter/centerBottom.vue";
|
||||||
@ -33,64 +31,6 @@ import { ref, onMounted, onBeforeUnmount,nextTick } from "vue";
|
|||||||
const statisticsCount = ref(null as any);
|
const statisticsCount = ref(null as any);
|
||||||
|
|
||||||
const projectData = ref(null as any);
|
const projectData = ref(null as any);
|
||||||
//获取项目信息
|
|
||||||
const getProjectInfo = async () => {
|
|
||||||
const res = await getProjectDetail({ projectSn: store.sn });
|
|
||||||
// console.log("获取项目信息", res);
|
|
||||||
// console.log("获取工程类别", projectTypeEnum);
|
|
||||||
projectData.value = res.result;
|
|
||||||
};
|
|
||||||
|
|
||||||
//获取人员概览
|
|
||||||
const getPersonDetail = async () => {
|
|
||||||
const res = await getWorkerStatisticsCountApi({ sn: store.sn });
|
|
||||||
statisticsCount.value = res.result;
|
|
||||||
};
|
|
||||||
|
|
||||||
const leftTopRef = ref();
|
|
||||||
const centerTopRef = ref();
|
|
||||||
const centerBottomRef = ref();
|
|
||||||
const rightTopRef = ref();
|
|
||||||
const rightCenterRef = ref();
|
|
||||||
const rightBottomRef = ref();
|
|
||||||
const callChildFn = async () => {
|
|
||||||
nextTick( async ()=>{
|
|
||||||
leftTopRef.value.projectTypeEnum()
|
|
||||||
centerTopRef.value.getQueryBySnData()
|
|
||||||
centerBottomRef.value.getProgressOption()
|
|
||||||
rightTopRef.value.getSafeInfo()
|
|
||||||
rightCenterRef.value.qualityInfo()
|
|
||||||
rightBottomRef.value.getList()
|
|
||||||
})
|
|
||||||
}
|
|
||||||
//定时器
|
|
||||||
const interval = ref(null as any);
|
|
||||||
//定时调用
|
|
||||||
const startInterval = async () => {
|
|
||||||
interval.value= setInterval(() => {
|
|
||||||
getPersonDetail();
|
|
||||||
getProjectInfo();
|
|
||||||
callChildFn();
|
|
||||||
}, 30 * 1000);
|
|
||||||
}
|
|
||||||
// 在组件销毁时清除 interval
|
|
||||||
const destroyInterval = () => {
|
|
||||||
if (interval.value) {
|
|
||||||
clearInterval(interval.value);
|
|
||||||
}
|
|
||||||
}
|
|
||||||
// 在组件销毁时调用 destroyInterval 方法清除 interval
|
|
||||||
onBeforeUnmount(() => {
|
|
||||||
destroyInterval();
|
|
||||||
})
|
|
||||||
window.onbeforeunload = (e) => {
|
|
||||||
destroyInterval();
|
|
||||||
}
|
|
||||||
onMounted( async () => {
|
|
||||||
getPersonDetail();
|
|
||||||
getProjectInfo();
|
|
||||||
startInterval();
|
|
||||||
});
|
|
||||||
</script>
|
</script>
|
||||||
<style lang="scss" scoped>
|
<style lang="scss" scoped>
|
||||||
.projectContent {
|
.projectContent {
|
||||||
@ -101,10 +41,10 @@ onMounted( async () => {
|
|||||||
height: 100%;
|
height: 100%;
|
||||||
width: 26%;
|
width: 26%;
|
||||||
.leftTop {
|
.leftTop {
|
||||||
height: 32%;
|
height: 35%;
|
||||||
}
|
}
|
||||||
.leftCenter {
|
.leftBottom {
|
||||||
height: 68%;
|
height: 65%;
|
||||||
margin: 3% 0 3% 0;
|
margin: 3% 0 3% 0;
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
@ -113,11 +53,12 @@ onMounted( async () => {
|
|||||||
margin: 0 1%;
|
margin: 0 1%;
|
||||||
|
|
||||||
.centerTop {
|
.centerTop {
|
||||||
height: 50%;
|
height: 55%;
|
||||||
margin-bottom: 3%;
|
// margin-bottom: 3%;
|
||||||
}
|
}
|
||||||
.centerBottom {
|
.centerBottom {
|
||||||
height: 50%;
|
height: 45%;
|
||||||
|
margin: 2% 0 0 0;
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
.right {
|
.right {
|
||||||
|
|||||||
@ -1,26 +1,16 @@
|
|||||||
<template>
|
<template>
|
||||||
<div class="leftTop">
|
<div class="leftBottom">
|
||||||
<Card title="智能设备">
|
<div class="header">
|
||||||
<div class="deviceData">
|
<div class="hLeft">
|
||||||
<div class="deviceDataA">
|
安全教育智能分析
|
||||||
<div class="num">
|
|
||||||
<i>{{ statisticsCount.devcount.ufaceDevNum || 0 }}</i>
|
|
||||||
</div>
|
</div>
|
||||||
<div class="text">实名制设备数</div>
|
<div class="hRight">
|
||||||
</div>
|
|
||||||
<div class="deviceDataB">
|
|
||||||
<div class="num">
|
|
||||||
<i>{{ statisticsCount.devcount.environmentDevNum || 0 }}</i>
|
|
||||||
</div>
|
|
||||||
<div class="text">环境设备数</div>
|
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
</Card>
|
|
||||||
</div>
|
</div>
|
||||||
</template>
|
</template>
|
||||||
|
|
||||||
<script setup lang="ts">
|
<script setup lang="ts">
|
||||||
import Card from "@/components/card.vue";
|
|
||||||
import { ref, onMounted, watch } from "vue";
|
import { ref, onMounted, watch } from "vue";
|
||||||
// ts
|
// ts
|
||||||
type Props = {
|
type Props = {
|
||||||
@ -50,47 +40,26 @@ watch(
|
|||||||
</script>
|
</script>
|
||||||
|
|
||||||
<style lang="scss" scoped>
|
<style lang="scss" scoped>
|
||||||
.leftTop {
|
.leftBottom {
|
||||||
width: 100%;
|
background: url("@/assets/images/commandScreen/card-left-bottom.png") no-repeat;
|
||||||
height: 100%;
|
// background-color: darkred;
|
||||||
display: flex;
|
|
||||||
|
|
||||||
.deviceData {
|
|
||||||
width: 100%;
|
|
||||||
height: 100%;
|
|
||||||
display: flex;
|
|
||||||
|
|
||||||
.deviceDataA {
|
|
||||||
width: 40%;
|
|
||||||
height: 85%;
|
|
||||||
background: url("@/assets/images/comprehensiveManage/project13.png") no-repeat;
|
|
||||||
background-size: 100% 100%;
|
background-size: 100% 100%;
|
||||||
margin: 4% 5%;
|
.header{
|
||||||
color: #fff;
|
// width: 100%;
|
||||||
text-align: center;
|
// height: 100%;
|
||||||
|
display: flex;
|
||||||
|
// align-items: center;
|
||||||
|
justify-content: space-between;
|
||||||
|
padding: 20px 20px;
|
||||||
|
// border-bottom: 1px solid #0644b7;
|
||||||
|
border-bottom: 2px solid #0644b7;
|
||||||
|
.hLeft{
|
||||||
|
width: 50%;
|
||||||
|
color: white;
|
||||||
}
|
}
|
||||||
.deviceDataB {
|
.hRight{
|
||||||
width: 40%;
|
width: 50%;
|
||||||
height: 85%;
|
|
||||||
background: url("@/assets/images/comprehensiveManage/project13.png") no-repeat;
|
|
||||||
background-size: 100% 100%;
|
|
||||||
margin: 4% 5%;
|
|
||||||
color: #fff;
|
|
||||||
text-align: center;
|
|
||||||
}
|
|
||||||
.num {
|
|
||||||
margin-top: 30%;
|
|
||||||
font-size: 32px;
|
|
||||||
font-weight: bold;
|
|
||||||
}
|
|
||||||
.text {
|
|
||||||
font-size: 14px;
|
|
||||||
|
|
||||||
color: #ccc;
|
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
::v-deep .h-card .content {
|
|
||||||
height: 80%;
|
|
||||||
}
|
|
||||||
</style>
|
</style>
|
||||||
|
|||||||
@ -1,224 +0,0 @@
|
|||||||
<template>
|
|
||||||
<div class="leftTop">
|
|
||||||
<Card title="人员概况">
|
|
||||||
<div class="topPeopleNum">
|
|
||||||
<div class="dataTlo">
|
|
||||||
<div class="text" v-if="COMPANY === 'agjt'"><i>出勤人数</i></div>
|
|
||||||
<div class="text" v-else><i>实名制人数</i></div>
|
|
||||||
<div class="num">
|
|
||||||
<i v-if="COMPANY === 'agjt'">{{ attendancePerson.totalPerson || 0 }}</i>
|
|
||||||
<i v-else>{{ statisticsCount.workercount.totalPerson || 0 }}</i>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
<div class="dataTlt">
|
|
||||||
<div class="text"><i>在场人数</i></div>
|
|
||||||
<div class="num">
|
|
||||||
<i>{{ statisticsCount.presencecount.totalPerson || 0 }}</i>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
<div class="bottomPeopleNum">
|
|
||||||
<div style="display: flex; margin-left: 2%">
|
|
||||||
<div style="width: 5px; height: 5px; background: rgba(130, 251, 234, 1); border-radius: 10px; margin: 2%"></div>
|
|
||||||
<div><i>管理人员</i></div>
|
|
||||||
</div>
|
|
||||||
<div class="peopleData">
|
|
||||||
<div class="peoImg"><img src="@/assets/images/comprehensiveManage/project3.png" alt="" /></div>
|
|
||||||
<div class="peoNum">
|
|
||||||
<div class="penName"></div>
|
|
||||||
<div class="penN"></div>
|
|
||||||
<div class="numData1 numData">
|
|
||||||
<div class="text"><i>甲方人员</i></div>
|
|
||||||
<div class="num">
|
|
||||||
<i style="color: #eea959">{{ statisticsCount.presencecount.jfGlPersonTotal || 0 }}/
|
|
||||||
{{ statisticsCount.workercount.jfGlPersonTotal || 0 }}
|
|
||||||
</i>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
<div class="numData2 numData">
|
|
||||||
<div class="text"><i>监理人员</i></div>
|
|
||||||
<div class="num">
|
|
||||||
<i style="color: #82fbea"
|
|
||||||
>{{ statisticsCount.presencecount.jlGlPersonTotal || 0 }}/{{
|
|
||||||
statisticsCount.workercount.jlGlPersonTotal || 0
|
|
||||||
}}</i
|
|
||||||
>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
<div class="numData3 numData">
|
|
||||||
<div class="text" v-if="COMPANY === 'agjt'"><i>施工方</i></div>
|
|
||||||
<div class="text" v-else><i>乙方人员</i></div>
|
|
||||||
<div class="num">
|
|
||||||
<i style="color: #7aa0ea"
|
|
||||||
>{{ statisticsCount.presencecount.yfGlPersonTotal || 0 }}/{{
|
|
||||||
statisticsCount.workercount.yfGlPersonTotal || 0
|
|
||||||
}}</i
|
|
||||||
>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
</Card>
|
|
||||||
</div>
|
|
||||||
</template>
|
|
||||||
|
|
||||||
<script setup lang="ts">
|
|
||||||
import Card from "@/components/card.vue";
|
|
||||||
import { GlobalStore } from "@/stores";
|
|
||||||
import { COMPANY } from "@/config/config";
|
|
||||||
import { ref, onMounted, watch } from "vue";
|
|
||||||
import { getPersonTypeAndEduStatisticsApi } from "@/api/modules/labor";
|
|
||||||
const store = GlobalStore();
|
|
||||||
// ts
|
|
||||||
type Props = {
|
|
||||||
statisticsCount?: any; // 传入人员数据
|
|
||||||
};
|
|
||||||
// withDefaults 定义默认值(传入的数据类型同默认值)
|
|
||||||
const props = withDefaults(defineProps<Props>(), {
|
|
||||||
statisticsCount: {}
|
|
||||||
});
|
|
||||||
// 人员概况数据
|
|
||||||
const statisticsCount = ref({
|
|
||||||
workercount: {},
|
|
||||||
presencecount: {}
|
|
||||||
} as any);
|
|
||||||
|
|
||||||
watch(
|
|
||||||
() => props.statisticsCount,
|
|
||||||
newVal => {
|
|
||||||
// console.log(newVal, "newVal");
|
|
||||||
if (newVal) {
|
|
||||||
// props.xData = newVal;
|
|
||||||
statisticsCount.value = newVal;
|
|
||||||
}
|
|
||||||
}
|
|
||||||
);
|
|
||||||
const presencePerson = ref(0)
|
|
||||||
const attendancePerson = ref(0)
|
|
||||||
const toaltPerson = ref(0)
|
|
||||||
//获取人员数据
|
|
||||||
const getPersonList = async () => {
|
|
||||||
const res = await getPersonTypeAndEduStatisticsApi({
|
|
||||||
projectSn: store.sn
|
|
||||||
});
|
|
||||||
if (res.result) {
|
|
||||||
console.log("+++++++++++++++++++++++++++++++++")
|
|
||||||
console.log(res)
|
|
||||||
presencePerson.value = res.result.personType.presencePerson;
|
|
||||||
attendancePerson.value = res.result.personType.attendancePerson;
|
|
||||||
toaltPerson.value = res.result.personType.toaltPerson;
|
|
||||||
}
|
|
||||||
};
|
|
||||||
onMounted( async () => {
|
|
||||||
getPersonList();
|
|
||||||
});
|
|
||||||
</script>
|
|
||||||
|
|
||||||
<style lang="scss" scoped>
|
|
||||||
.leftTop {
|
|
||||||
width: 100%;
|
|
||||||
height: 100%;
|
|
||||||
.topPeopleNum {
|
|
||||||
height: 40%;
|
|
||||||
display: flex;
|
|
||||||
.dataTlo {
|
|
||||||
width: 35%;
|
|
||||||
height: 100%;
|
|
||||||
background: url("@/assets/images/comprehensiveManage/project9.png") no-repeat;
|
|
||||||
background-size: 100% 100%;
|
|
||||||
margin-left: 10%;
|
|
||||||
}
|
|
||||||
.dataTlt {
|
|
||||||
width: 35%;
|
|
||||||
height: 100%;
|
|
||||||
background: url("@/assets/images/comprehensiveManage/project12.png") no-repeat;
|
|
||||||
background-size: 100% 100%;
|
|
||||||
margin-left: 10%;
|
|
||||||
}
|
|
||||||
.text {
|
|
||||||
color: #fff;
|
|
||||||
font-size: 14px;
|
|
||||||
margin-left: 50%;
|
|
||||||
margin-top: 15%;
|
|
||||||
}
|
|
||||||
.num {
|
|
||||||
font-size: 24px;
|
|
||||||
font-weight: bold;
|
|
||||||
background-image: linear-gradient(to right, rgba(122, 160, 234, 1), rgba(255, 255, 255, 1));
|
|
||||||
-webkit-background-clip: text;
|
|
||||||
-webkit-text-fill-color: transparent;
|
|
||||||
margin-left: 47%;
|
|
||||||
margin-top: 5%;
|
|
||||||
}
|
|
||||||
}
|
|
||||||
.bottomPeopleNum {
|
|
||||||
height: 60%;
|
|
||||||
div {
|
|
||||||
height: 20%;
|
|
||||||
color: #fff;
|
|
||||||
font-size: 16px;
|
|
||||||
}
|
|
||||||
.peopleData {
|
|
||||||
height: 80%;
|
|
||||||
display: flex;
|
|
||||||
.peoImg {
|
|
||||||
width: 30%;
|
|
||||||
height: 100%;
|
|
||||||
img {
|
|
||||||
margin-left: 30%;
|
|
||||||
width: 50%;
|
|
||||||
margin-top: 7%;
|
|
||||||
}
|
|
||||||
}
|
|
||||||
.peoNum {
|
|
||||||
height: 100%;
|
|
||||||
width: 70%;
|
|
||||||
position: relative;
|
|
||||||
.penName {
|
|
||||||
background: rgba(39, 88, 192, 0.6);
|
|
||||||
margin: 5% 5%;
|
|
||||||
}
|
|
||||||
.penN {
|
|
||||||
height: 10px;
|
|
||||||
background: url("@/assets/images/comprehensiveManage/project8.png") no-repeat;
|
|
||||||
background-size: 100% 100%;
|
|
||||||
margin: 13% 5%;
|
|
||||||
}
|
|
||||||
.numData1 {
|
|
||||||
left: 5%;
|
|
||||||
top: -10%;
|
|
||||||
}
|
|
||||||
.numData2 {
|
|
||||||
left: 35%;
|
|
||||||
top: -10%;
|
|
||||||
}
|
|
||||||
.numData3 {
|
|
||||||
left: 65%;
|
|
||||||
top: -10%;
|
|
||||||
}
|
|
||||||
.numData {
|
|
||||||
position: absolute;
|
|
||||||
height: 60%;
|
|
||||||
width: 30%;
|
|
||||||
display: flex;
|
|
||||||
flex-direction: column;
|
|
||||||
align-items: center;
|
|
||||||
.text {
|
|
||||||
margin-top: 18%;
|
|
||||||
font-size: 16px;
|
|
||||||
}
|
|
||||||
.num {
|
|
||||||
font-size: 20px;
|
|
||||||
margin-top: 18%;
|
|
||||||
// margin-left: 10%;
|
|
||||||
}
|
|
||||||
}
|
|
||||||
}
|
|
||||||
}
|
|
||||||
}
|
|
||||||
}
|
|
||||||
::v-deep .h-card .content {
|
|
||||||
height: 80%;
|
|
||||||
}
|
|
||||||
</style>
|
|
||||||
@ -1,31 +1,17 @@
|
|||||||
<template>
|
<template>
|
||||||
<div class="leftTop">
|
<div class="leftTop">
|
||||||
<Card title="项目信息">
|
<div class="header">
|
||||||
<div class="projectInfo">
|
<div class="hLeft">
|
||||||
<div><span>项目名称：</span> {{ projectData.projectName || "" }}</div>
|
人员履职情况分析
|
||||||
<div :title="projectLocal"><span>项目地址：</span> {{ projectLocal }}</div>
|
</div>
|
||||||
<div><span>项目经理：</span> {{ projectData.projectManage || "" }}</div>
|
<div class="hRight">
|
||||||
<div><span>联系电话：</span> {{ projectData.projectTel || "" }}</div>
|
<el-date-picker style="width: 85%" v-model="value1" type="daterange" range-separator="To" start-placeholder="Start date" end-placeholder="End date" :size="size"/>
|
||||||
<div><span>建筑面积：</span> {{ projectData.projectAcreage || "" }} ㎡</div>
|
</div>
|
||||||
<div><span>开工日期：</span> {{ projectData.startWorkDate || "" }}</div>
|
|
||||||
<div><span>项目编号：</span> {{ projectData.projectNumber || "" }}</div>
|
|
||||||
<div><span>工程类别：</span> {{ projectData.projectType && projectTypeEnumList.length > 0 ? projectTypeEnumList[projectData.projectType - 1].name : "" }}</div>
|
|
||||||
</div>
|
</div>
|
||||||
<!-- <div class="projectInfo">
|
|
||||||
<div><span>建设地点：</span> 南平市建阳区</div>
|
|
||||||
<div><span>变电容量：</span> 2x50兆伏安</div>
|
|
||||||
<div><span>间隔名称：</span> 110千伏江坑问隔</div>
|
|
||||||
<div><span>架空线路：</span> 67.49公里</div>
|
|
||||||
<div><span>电缆长度：</span> 0.31公里</div>
|
|
||||||
<div><span>通讯光缆：</span> 74.79公里</div>
|
|
||||||
<div><span>总投资：</span> 11762万元</div>
|
|
||||||
</div> -->
|
|
||||||
</Card>
|
|
||||||
</div>
|
</div>
|
||||||
</template>
|
</template>
|
||||||
|
|
||||||
<script setup lang="ts">
|
<script setup lang="ts">
|
||||||
import Card from "@/components/card.vue";
|
|
||||||
import { GlobalStore } from "@/stores";
|
import { GlobalStore } from "@/stores";
|
||||||
import { ref, onMounted, watch } from "vue";
|
import { ref, onMounted, watch } from "vue";
|
||||||
import { getStageOption } from "@/api/modules/projectOverview";
|
import { getStageOption } from "@/api/modules/projectOverview";
|
||||||
@ -82,35 +68,29 @@ watch(
|
|||||||
}
|
}
|
||||||
);
|
);
|
||||||
</script>
|
</script>
|
||||||
|
|
||||||
<style lang="scss" scoped>
|
<style lang="scss" scoped>
|
||||||
.leftTop {
|
.leftTop {
|
||||||
|
background: url("@/assets/images/commandScreen/card-left-top.png") no-repeat;
|
||||||
|
// background-color: #fff;
|
||||||
|
background-size: 100% 100%;
|
||||||
width: 100%;
|
width: 100%;
|
||||||
height: 100%;
|
height: 100%;
|
||||||
.projectInfo {
|
.header{
|
||||||
width: 100%;
|
// width: 100%;
|
||||||
height: 100%;
|
// height: 100%;
|
||||||
color: #fff;
|
display: flex;
|
||||||
padding: 2% 0 0 4%;
|
// align-items: center;
|
||||||
|
justify-content: space-between;
|
||||||
div {
|
padding: 20px 20px;
|
||||||
width: 95%;
|
// border-bottom: 1px solid #0644b7;
|
||||||
height: 12%;
|
border-bottom: 2px solid #0644b7;
|
||||||
font-size: 15px;
|
.hLeft{
|
||||||
white-space: nowrap; //单行
|
width: 50%;
|
||||||
overflow: hidden;
|
color: white;
|
||||||
text-overflow: ellipsis;
|
}
|
||||||
span {
|
.hRight{
|
||||||
margin-right: 3%;
|
width: 50%;
|
||||||
color: #ccc;
|
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
}
|
|
||||||
}
|
|
||||||
::v-deep .h-card .content {
|
|
||||||
height: 80%;
|
|
||||||
}
|
|
||||||
::v-deep .h-card {
|
|
||||||
position: relative;
|
|
||||||
}
|
}
|
||||||
</style>
|
</style>
|
||||||
|
|||||||
@ -25,7 +25,11 @@ export default {
|
|||||||
.h-card {
|
.h-card {
|
||||||
width: 100%;
|
width: 100%;
|
||||||
height: 100%;
|
height: 100%;
|
||||||
background: url("@/assets/images/commandScreen/card-bg.png") no-repeat;
|
// background: url("@/assets/images/commandScreen/card-bg.png") no-repeat;
|
||||||
|
// background-size: contain;
|
||||||
|
// background-size: 100% 100%;
|
||||||
|
|
||||||
|
|
||||||
.title {
|
.title {
|
||||||
// background: url("@/assets/images/titleImg.png") no-repeat;
|
// background: url("@/assets/images/titleImg.png") no-repeat;
|
||||||
background-size: 100% 100%;
|
background-size: 100% 100%;
|
||||||
|
|||||||
Loading…
x
Reference in New Issue
Block a user