admin/zhgdlarge
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

dev:指挥部大屏

Browse Source
This commit is contained in:
Vce 2024-04-26 18:06:30 +08:00
parent 0f4372aede
commit f80be897bf
7 changed files with 375 additions and 99 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

4
.env.development
View File

@ -13,9 +13,9 @@ NODE_ENV = 'development'
# 沈阳合盈线上
# 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'
# 七参数标准版(测试平台)

4
src/config/config.ts
View File

@ -24,11 +24,11 @@ export const BASE_IMAGE_URL = import.meta.env.VITE_BASE_IMAGE_URL;
// 项目环境标识配置 部署时需更改对应的项目
// export const COMPANY: string = ""; //标准版
export const COMPANY: string = "zhzrf"; //中海·臻如府
// export const COMPANY: string = "zhzrf"; //中海·臻如府
// export const COMPANY: string = "zsbf"; //中水北方
// export const COMPANY: string = "as"; //鞍山项目
// export const COMPANY: string = "agjt"; //鞍钢集团
// export const COMPANY: string = "agjtCommand"; //鞍钢集团指挥部大屏
export const COMPANY: string = "agjtCommand"; //鞍钢集团指挥部大屏
// export const COMPANY: string = "slx"; //苏立信项目
// export const COMPANY: string = "hfqc"; //合肥启程项目
// export const COMPANY: string = "jsyc"; // 江苏盐城项目

4
src/routers/modules/staticRouter.ts
View File

@ -24,8 +24,8 @@ export const staticRouter: RouteRecordRaw[] = [
{
path: "/large",
name: "大屏",
component: () => import("@/views/sevenLargeScreen/indexL.vue"), //七参数标准版
// component: () => import("@/views/commandScreen/indexCommand.vue"), //指挥部大屏
// component: () => import("@/views/sevenLargeScreen/indexL.vue"), //七参数标准版
component: () => import("@/views/commandScreen/indexCommand.vue"), //指挥部大屏
// component: () => import("@/views/sevenLargeScreen/indexL_syhy.vue"), // 只有一级路由(盘锦、嘉兴、鄱湖美湾医疗项目需切换至该首页)
children: [
{

215
src/views/commandScreen/commandCenter/centerBottom.vue
View File

@ -1,6 +1,35 @@
<template>
<div class="centerBottom">
<div class="cbHeader">
<div class="cbHeaderInfo">
<div class="cubeIcon"></div>
<div>公告提示</div>
</div>
<div class="cbHeaderLine"></div>
</div>
<div class="cbContent">
<el-scrollbar height="370">
<div class="item" v-for="(item,index) in listData" :key="index">
<div class="itemHead">
<div class="itemHeadInner" v-if="item.type === 1">{{item.header}}</div>
<div class="itemHeadInner2" v-if="item.type === 3">{{item.header}}</div>
<div class="itemContent">
<el-tooltip class="box-item" effect="dark" :content="item.content" placement="top-start">
<text style="margin-left:10px">{{item.content}}</text>
</el-tooltip>
</div>
</div>
<!-- <div class="itemContent">
<el-tooltip class="box-item" effect="dark" :content="item.content" placement="top-start">
{{item.content}}
</el-tooltip>
</div> -->
<div class="itemTime">
<text class="timeInfo">{{item.startTime + '-' + item.endTime}}</text>
</div>
</div>
</el-scrollbar>
</div>
</div>
</template>
@ -10,85 +39,24 @@ import { ref, watch, onMounted } from "vue";
import { getStageOption } from "@/api/modules/projectOverview";
import { GlobalStore } from "@/stores";
const store = GlobalStore();
const progressList = ref([
// {
// name: "施工证获取",
// status: 0
// },
// {
// name: "土方开挖",
// status: 0
// },
// {
// name: "桩基",
// status: 0
// },
// {
// name: "支护开始",
// status: 0
// },
// {
// name: "垫层完成",
// status: 0
// },
// {
// name: "正负零",
// status: 0
// },
// {
// name: "工程达到预售条件",
// status: 0
// }
] as any);
// ts
type Props = {
projectData?: any; // 传入项目信息
};
// withDefaults 定义默认值(传入的数据类型同默认值)
const props = withDefaults(defineProps<Props>(), {
projectData: {}
});
// 项目信息
const projectData = ref({} as any);
watch(
() => props.projectData,
newVal => {
// console.log(newVal, "newVal");
if (newVal) {
// props.xData = newVal;
projectData.value = newVal;
console.log("当前阶段", projectData.value.constructionStage);
if (progressList.value.length > 0) {
progressList.value[projectData.value.constructionStage - 1].status = 1;
}
}
}
);
let listData = ref([
{header: '重大风险',type: 1,content: '正处于吊装施工重大风险作业阶段，请注意在操作前，应对吊装设备进行安全把控胜多负少v现场v在时代广场彼此相伴',startTime: '2024-04-01',endTime:"2024-04-20"},
{header: '硬件警报',type: 3,content: '1#塔吊报警频次较上周增长60%，塔吊间各个设sdasdasdasdasdasdasdasczxczxcz之间的衔接进行全面检查，以防止',startTime: '2024-04-01',endTime:"2024-04-20"},
{header: '重大风险',type: 1,content: '正处于吊装施工重大风险作业阶段，请注意在sdasdasdasdasdasdasdasczxczxcz作前，应对吊装设备进行安全把控',startTime: '2024-04-01',endTime:"2024-04-20"},
{header: '硬件警报',type: 3,content: '1#塔吊报警频次较上周增长60%，塔吊间各个设sdasdasdasdasdasdasdasczxczxcz之间的衔接进行全面检查，以防止',startTime: '2024-04-01',endTime:"2024-04-20"},
{header: '重大风险',type: 1,content: '正处于吊装施工重大风险作业阶段，请注意在sdasdasdasdasdasdasdasczxczxcz作前，应对吊装设备进行安全把控',startTime: '2024-04-01',endTime:"2024-04-20"},
{header: '硬件警报',type: 3,content: '1#塔吊报警频次较上周增长60%，塔吊间各个设sdasdasdasdasdasdasdasczxczxcz之间的衔接进行全面检查，以防止',startTime: '2024-04-01',endTime:"2024-04-20"},
{header: '重大风险',type: 1,content: '正处于吊装施工重大风险作业阶段，请注意在sdasdasdasdasdasdasdasczxczxcz作前，应对吊装设备进行安全把控',startTime: '2024-04-01',endTime:"2024-04-20"},
{header: '硬件警报',type: 3,content: '1#塔吊报警频次较上周增长60%，塔吊间各个设sdasdasdasdasdasdasdasczxczxcz之间的衔接进行全面检查，以防止',startTime: '2024-04-01',endTime:"2024-04-20"},
{header: '重大风险',type: 1,content: '正处于吊装施工重大风险作业阶段，请注意在sdasdasdasdasdasdasdasczxczxcz作前，应对吊装设备进行安全把控',startTime: '2024-04-01',endTime:"2024-04-20"},
{header: '硬件警报',type: 3,content: '1#塔吊报警频次较上周增长60%，塔吊间各个设sdasdasdasdasdasdasdasczxczxcz之间的衔接进行全面检查，以防止',startTime: '2024-04-01',endTime:"2024-04-20"},
{header: '重大风险',type: 1,content: '正处于吊装施工重大风险作业阶段，请注意在sdasdasdasdasdasdasdasczxczxcz作前，应对吊装设备进行安全把控',startTime: '2024-04-01',endTime:"2024-04-20"},
{header: '硬件警报',type: 3,content: '1#塔吊报警频次较上周增长60%，塔吊间各个设sdasdasdasdasdasdasdasczxczxcz之间的衔接进行全面检查，以防止',startTime: '2024-04-01',endTime:"2024-04-20"},
])
//获取里程碑option
const getProgressOption = async () => {
const res: any = await getStageOption({ dictionaryEncoding: "project_construction_stage", projectSn: store.sn });
if (res.result.length > 0) {
let newArray = res.result.map((item: any) => {
return {
name: item.name,
status: 0
};
});
progressList.value = newArray;
console.log(projectData.value, "里程碑option", res);
if (projectData.value.constructionStage) {
progressList.value[projectData.value.constructionStage - 1].status = 1;
}
}
};
//将方法暴露给父组件
defineExpose({
getProgressOption
})
onMounted( async () => {
getProgressOption();
});
</script>
@ -97,5 +65,98 @@ onMounted( async () => {
background: url("@/assets/images/commandScreen/card-center-bottom.png") no-repeat;
// background: #fff;
background-size: 100% 100%;
// width: 100%;
// height: 60%;
// background-color: #fff;
padding: 10px 20px;
position: relative;
// padding-top: 15px;
.cbHeader{
width:100%;
height: 40px;
// background-color: darkred;
.cbHeaderInfo{
color: #fff;
display: flex;
justify-content: flex-start;
align-items: center;
.cubeIcon{
width: 36px;
height: 36px;
// background-color: #fff;
background: url("@/assets/images/commandScreen/head-cube.png") no-repeat;
background-size: 100% 100%;
// margin-left: -5px;
margin: 0 3px 0 -5px;
}
}
.cbHeaderLine{
height: 4px;
width: 100%;
// background-color: darkblue;
background: url("@/assets/images/commandScreen/head-line.png") no-repeat;
background-size: 100% 100%;
}
}
.cbContent{
width: 100%;
height: calc(100% - 40px);
// background: #fff;
.item{
width: 100%;
line-height: 130%;
display: flex;
align-items: center;
// justify-content: flex-start;
justify-content: space-between;
// background-color: green;
color: #fff;
.itemHead{
white-space: nowrap;
display: flex;
justify-content: center;
align-items: center;
font-size: 16px;
width: 75%;
.itemHeadInner{
border: 1px solid #f77c7d;
box-shadow: 0 0 0 1px #f77c7d;
background: rgba(247,124,125, 0.4);
border-radius: 3px;
padding: 0 15px;
margin: 9px 0;
margin-left: 2px;
}
.itemHeadInner2{
font-size: 16px;
border: 1px solid #0db027;
box-shadow: 0 0 0 1px #0db027;
background: rgba(13,176,39, 0.4);
border-radius: 3px;
padding: 0 15px;
margin: 9px 0;
margin-left: 2px;
}
.itemContent{
margin-left: 10px;
font-size: 15px;
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
width: 100%;
}
}
.itemTime{
// background-color: #fff;
width: 25%;
font-size: 16px;
.timeInfo{
display: flex;
justify-content: flex-end;
margin-right: 10px;
}
}
}
}
}
</style>

6
src/views/commandScreen/commandCenter/index.vue
View File

@ -10,8 +10,6 @@
</div>
<div class="right">
<rightAll class="rightAll"></rightAll>
<rightCenter class="rightCenter"></rightCenter>
<rightBottom class="rightBottom"></rightBottom>
</div>
</div>
</template>
@ -51,11 +49,11 @@ const projectData = ref(null as any);
margin: 0 1%;
.centerTop {
height: 55%;
height: 53.8%;
// margin-bottom: 3%;
}
.centerBottom {
height: 45%;
height: 44.2%;
margin: 2% 0 0 0;
}
}

13
src/views/commandScreen/commandCenter/leftBottom.vue
View File

@ -12,24 +12,19 @@
<div class="cbHeader">
<div class="cbHeaderInfo">
<div class="cubeIcon"></div>
<div>教育智能提示</div>
<div>隐患智能分析</div>
</div>
<div class="cbHeaderLine"></div>
</div>
<div class="cbContent">
<el-scrollbar height="270">
<el-scrollbar height="278">
<div class="item" v-for="(item,index) in listData" :key="index">
<div class="itemHead">
<div class="itemHeadInner" v-if="item.type === 1">{{item.header}}</div>
<div class="itemHeadInner2" v-if="item.type === 2">{{item.header}}</div>
</div>
<div class="itemContent">
<el-tooltip
class="box-item"
effect="dark"
:content="item.content"
placement="top-start"
>
<el-tooltip class="box-item" effect="dark" :content="item.content" placement="top-start" >
{{item.content}}
</el-tooltip>
</div>
@ -437,7 +432,7 @@ onMounted( async () => {
// background: #fff;
.item{
width: 100%;
line-height: 160%;
line-height: 130%;
display: flex;
align-items: center;
justify-content: flex-start;

228
src/views/commandScreen/commandCenter/rightAll.vue
View File

@ -1,8 +1,57 @@
<template>
<div class="rightAll">
<!-- <Card title="安全管理"> -->
<div id="echartsSafe" style="width: 100%; height: 100%"></div>
<!-- </Card> -->
<div class="header">
<div class="hLeft">
隐患统计智能分析
</div>
<div class="hRight">
<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>
</div>
<div class="content">
<div class="contentTop">
<div class="ctHead">
<div>重大隐患超期未整改<text>{{overdueMajorDangerCount}}</text>个，占比<text>{{overdueMajorDangerRate}}%</text></div>
</div>
<div class="ctContent">
<div id="echartsSafe" style="width: 100%; height: 100%"></div>
</div>
</div>
<div class="contentMiddle">
<div class="cmHead">
<div>重大隐患未销项<text>{{majorDangerCount}}</text>个，占比<text>{{majorDangerRate}}%</text></div>
</div>
<div class="cmContent">
<div id="echartsMajorDanger" style="width: 100%; height: 100%"></div>
</div>
</div>
<div class="contentBottom">
<div class="cbHeader">
<div class="cbHeaderInfo">
<div class="cubeIcon"></div>
<div>教育智能提示</div>
</div>
<div class="cbHeaderLine"></div>
</div>
<div class="cbContent">
<el-scrollbar height="350">
<div class="item" v-for="(item,index) in listData" :key="index">
<div class="itemHead">
<div class="itemHeadInner" v-if="item.type === 1">{{item.header}}</div>
<div class="itemHeadInner2" v-if="item.type === 2">{{item.header}}</div>
</div>
<div class="itemContent">
<el-tooltip class="box-item" effect="dark" :content="item.content" placement="top-start">
{{item.content}}
</el-tooltip>
</div>
</div>
</el-scrollbar>
</div>
</div>
</div>
</div>
</template>
@ -16,6 +65,32 @@ import * as echarts from "echarts";
const echartsTest = ref();
let questionTotal = ref(0 as any);
let majorDangerCount = ref(20 as any);
let majorDangerRate = ref(50 as any);
let overdueMajorDangerCount = ref(20 as any);
let overdueMajorDangerRate = ref(50 as any);
let listData = ref([
{header: '重大风险',type: 1,content: '正处于吊装施工重大风险作业阶段，请注意在操作前，应对吊装设备进行安全把控'},
{header: '特种作业人员教育',type: 2,content: '1#塔吊报警频次较上周增长60%，塔吊间各个设备之间的衔接进行全面检查，以防止'},
{header: '重大风险',type: 1,content: '正处于吊装施工重大风险作业阶段，请注意在操作前，应对吊装设备进行安全把控'},
{header: '特种作业人员教育',type: 2,content: '1#塔吊报警频次较上周增长60%，塔吊间各个设备之间的衔接进行全面检查，以防止'},
{header: '重大风险',type: 1,content: '正处于吊装施工重大风险作业阶段，请注意在操作前，应对吊装设备进行安全把控'},
{header: '特种作业人员教育',type: 2,content: '1#塔吊报警频次较上周增长60%，塔吊间各个设备之间的衔接进行全面检查，以防止'},
{header: '重大风险',type: 1,content: '正处于吊装施工重大风险作业阶段，请注意在操作前，应对吊装设备进行安全把控'},
{header: '特种作业人员教育',type: 2,content: '1#塔吊报警频次较上周增长60%，塔吊间各个设备之间的衔接进行全面检查，以防止'},
{header: '重大风险',type: 1,content: '正处于吊装施工重大风险作业阶段，请注意在操作前，应对吊装设备进行安全把控'},
{header: '特种作业人员教育',type: 2,content: '1#塔吊报警频次较上周增长60%，塔吊间各个设备之间的衔接进行全面检查，以防止'},
{header: '重大风险',type: 1,content: '正处于吊装施工重大风险作业阶段，请注意在操作前，应对吊装设备进行安全把控'},
{header: '特种作业人员教育',type: 2,content: '1#塔吊报警频次较上周增长60%，塔吊间各个设备之间的衔接进行全面检查，以防止'},
{header: '重大风险',type: 1,content: '正处于吊装施工重大风险作业阶段，请注意在操作前，应对吊装设备进行安全把控'},
{header: '特种作业人员教育',type: 2,content: '1#塔吊报警频次较上周增长60%，塔吊间各个设备之间的衔接进行全面检查，以防止'},
{header: '重大风险',type: 1,content: '正处于吊装施工重大风险作业阶段，请注意在操作前，应对吊装设备进行安全把控'},
{header: '特种作业人员教育',type: 2,content: '1#塔吊报警频次较上周增长60%，塔吊间各个设备之间的衔接进行全面检查，以防止'},
{header: '重大风险',type: 1,content: '正处于吊装施工重大风险作业阶段，请注意在操作前，应对吊装设备进行安全把控'},
{header: '特种作业人员教育',type: 2,content: '1#塔吊报警频次较上周增长60%，塔吊间各个设备之间的衔接进行全面检查，以防止'},
])
let dataList = ref([
{
value: 30,
@ -362,6 +437,153 @@ onMounted(async () => {
background-size: 100% 100%;
width: 100%;
height: 102.1%;
.header{
// width: 100%;
// height: 100%;
display: flex;
// align-items: center;
justify-content: space-between;
padding: 20px 20px;
border-bottom: 1px solid #0059ff;
.hLeft{
width: 50%;
color: white;
}
.hRight{
width: 50%;
}
}
.content{
padding: 0 20px;
height: 100%;
.contentTop{
margin-top: 10px;
width: 100%;
height: 25%;
background-color: darkblue;
.ctHead{
padding-bottom: 5px;
color: #fff;
height: 20%;
font-size: 16px;
display: flex;
justify-content: center;
align-items: flex-end;
text{
font-size: 24px;
color: #fc4c4c;
}
}
.ctContent{
height: 80%;
background-color: darkred;
}
}
.contentMiddle{
width: 100%;
height: 25%;
background-color: darkblue;
.cmHead{
padding-bottom: 5px;
color: #fff;
height: 20%;
font-size: 16px;
display: flex;
justify-content: center;
align-items: flex-end;
text{
font-size: 24px;
color: #0db027;
}
}
.cmContent{
height: 80%;
background-color: darkred;
}
}
.contentBottom{
// width: 100%;
height: 42.5%;
// background-color: darkred;
// width: 100%;
// background-color: #fff;
// padding: 0 20px;
position: relative;
.cbHeader{
width:100%;
height: 40px;
// background-color: darkred;
.cbHeaderInfo{
color: #fff;
display: flex;
justify-content: flex-start;
align-items: center;
.cubeIcon{
width: 36px;
height: 36px;
// background-color: #fff;
background: url("@/assets/images/commandScreen/head-cube.png") no-repeat;
background-size: 100% 100%;
// margin-left: -5px;
margin: 0 3px 0 -5px;
}
}
.cbHeaderLine{
height: 4px;
width: 100%;
// background-color: darkblue;
background: url("@/assets/images/commandScreen/head-line.png") no-repeat;
background-size: 100% 100%;
}
}
.cbContent{
width: 100%;
height: calc(100% - 40px);
// background: #fff;
.item{
// width: 100%;
line-height: 130%;
display: flex;
align-items: center;
justify-content: flex-start;
// background-color: green;
color: #fff;
.itemHead{
white-space: nowrap;
.itemHeadInner{
font-size: 16px;
border: 1px solid #f77c7d;
box-shadow: 0 0 0 1px #f77c7d;
background: rgba(247,124,125, 0.4);
border-radius: 3px;
padding: 0 15px;
margin: 9px 0;
margin-left: 2px;
}
.itemHeadInner2{
font-size: 16px;
border: 1px solid #56a8f8;
box-shadow: 0 0 0 1px #56a8f8;
background: rgba(86,168,248, 0.4);
border-radius: 3px;
padding: 0 15px;
margin: 9px 0;
margin-left: 2px;
}
}
.itemContent{
margin-left: 10px;
font-size: 15px;
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
}
}
}
}
}
}
::v-deep .h-card .content {
height: 80%;