flx:修改项目大屏和总览大屏样式问题

This commit is contained in:
X_Rian 2024-06-20 10:15:24 +08:00
parent 0f60a72dd5
commit f579491e4a
12 changed files with 79 additions and 53 deletions

View File

@ -4,8 +4,8 @@ NODE_ENV = 'development'
# 本地环境接口地址(/api/index.ts文件中使用) # 本地环境接口地址(/api/index.ts文件中使用)
# 后端本地 # 后端本地
# VITE_API_URL = 'http://192.168.34.155:19111' # VITE_API_URL = 'http://192.168.34.155:19111'
# VITE_API_URL = 'http://192.168.34.221:9111' #雄哥本地 VITE_API_URL = 'http://192.168.34.221:9111' #雄哥本地
VITE_API_URL = 'http://182.90.224.237:51234' #雄哥远程 # VITE_API_URL = 'http://182.90.224.237:51234' #雄哥远程
# VITE_API_URL = 'http://192.168.34.221:28889' # VITE_API_URL = 'http://192.168.34.221:28889'
# VITE_API_URL = 'http://121.196.214.246/api' # VITE_API_URL = 'http://121.196.214.246/api'
# VITE_API_URL = 'http://jxj.zhgdyun.com:100' # VITE_API_URL = 'http://jxj.zhgdyun.com:100'

View File

@ -22,13 +22,13 @@ NODE_ENV = "production"
# VITE_API_URL = 'http://182.90.224.237:15551' # VITE_API_URL = 'http://182.90.224.237:15551'
# agjt # agjt
# VITE_API_URL = 'http://42.180.188.17:9809' #生产环境 # VITE_API_URL = 'http://42.180.188.17:9809' #生产环境
# VITE_API_URL = 'http://42.180.188.17:11211' #测试环境 VITE_API_URL = 'http://42.180.188.17:11211' #测试环境
# 苏立信/重庆市南岸区 # 苏立信/重庆市南岸区
# VITE_API_URL = 'http://101.43.164.214:11111' # VITE_API_URL = 'http://101.43.164.214:11111'
# 中科安信 # 中科安信
# VITE_API_URL = 'http://8.136.222.164:8808' # VITE_API_URL = 'http://8.136.222.164:8808'
# 中科佳成 # 中科佳成
VITE_API_URL = 'http://1.13.185.209:8089' # VITE_API_URL = 'http://1.13.185.209:8089'
# 打包 # 打包
VITE_ULD_API_URL = 'http://jxj.zhgdyun.com:8012/onlinePreview?url=' VITE_ULD_API_URL = 'http://jxj.zhgdyun.com:8012/onlinePreview?url='

View File

@ -28,10 +28,10 @@ export const BASE_IMAGE_URL = import.meta.env.VITE_BASE_IMAGE_URL;
// export const COMPANY: string = "zsbf"; //中水北方 // export const COMPANY: string = "zsbf"; //中水北方
// export const COMPANY: string = "as"; //鞍山项目 // export const COMPANY: string = "as"; //鞍山项目
// export const COMPANY: string = "agjt"; //鞍钢集团 // export const COMPANY: string = "agjt"; //鞍钢集团
export const COMPANY: string = "agjtLive"; //鞍钢集团现场大屏 // export const COMPANY: string = "agjtLive"; //鞍钢集团现场大屏
// export const COMPANY: string = "agjtCommand"; //鞍钢集团指挥部大屏 // export const COMPANY: string = "agjtCommand"; //鞍钢集团指挥部大屏
// export const COMPANY: string = "agjtProjectKanban"; //鞍钢集团项目看板大屏 // export const COMPANY: string = "agjtProjectKanban"; //鞍钢集团项目看板大屏
// export const COMPANY: string = "agjtOverviewScreen"; //鞍钢集团项目总览 export const COMPANY: string = "agjtOverviewScreen"; //鞍钢集团项目总览
// export const COMPANY: string = "zkjc"; //中科佳成项目 // export const COMPANY: string = "zkjc"; //中科佳成项目
// export const COMPANY: string = "cqna"; //重庆南岸项目 // export const COMPANY: string = "cqna"; //重庆南岸项目
// export const COMPANY: string = "slx"; //苏立信项目 // export const COMPANY: string = "slx"; //苏立信项目

View File

@ -26,8 +26,8 @@ export const staticRouter: RouteRecordRaw[] = [
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/agjtLiveScreen/indexLive.vue"), //鞍钢现场大屏 // component: () => import("@/views/agjtLiveScreen/indexLive.vue"), //鞍钢现场大屏
// component: () => import("@/views/overviewScreen/indexCommand.vue"), //总览大屏 component: () => import("@/views/overviewScreen/indexCommand.vue"), //总览大屏
// component: () => import("@/views/agjtProjectKanban/indexL.vue"), //鞍钢集团项目看板大屏 // component: () => import("@/views/agjtProjectKanban/indexL.vue"), //鞍钢集团项目看板大屏
// component: () => import("@/views/sevenLargeScreen/indexL_syhy.vue"), // 只有一级路由(盘锦、嘉兴、鄱湖美湾医疗项目需切换至该首页) // component: () => import("@/views/sevenLargeScreen/indexL_syhy.vue"), // 只有一级路由(盘锦、嘉兴、鄱湖美湾医疗项目需切换至该首页)
children: [ children: [

View File

@ -204,7 +204,7 @@ const drawTwoEchart = () => {
title: { title: {
text: stateInfo.dataDetail.num, text: stateInfo.dataDetail.num,
subtext: stateInfo.dataDetail.name, subtext: stateInfo.dataDetail.name,
x: "29%", x: "24%",
y: "40%", y: "40%",
textAlign: "center", textAlign: "center",
textStyle: { textStyle: {
@ -285,7 +285,7 @@ const drawTwoEchart = () => {
name: "", name: "",
type: "pie", type: "pie",
radius: [100, 95], radius: [100, 95],
center: ["30%", "50%"], center: ["25%", "50%"],
hoverAnimation: false, hoverAnimation: false,
tooltip: { tooltip: {
trigger: "none" // tooltip.trigger 'none' trigger: "none" // tooltip.trigger 'none'
@ -426,7 +426,7 @@ const drawTwoEchart = () => {
name: "", name: "",
type: "pie", type: "pie",
radius: [60, 80], radius: [60, 80],
center: ["30%", "50%"], center: ["25%", "50%"],
hoverAnimation: true, hoverAnimation: true,
itemStyle: { itemStyle: {
borderWidth: 3, borderWidth: 3,
@ -449,7 +449,7 @@ const drawTwoEchart = () => {
{ {
type: "pie", type: "pie",
radius: ["52", "55"], radius: ["52", "55"],
center: ["30%", "50%"], center: ["25%", "50%"],
label: { label: {
show: false show: false
}, },

View File

@ -5,7 +5,7 @@
<el-carousel-item v-for="item in enterpriseInfo.dataList" :key="item.enterpriseId" style="width: 100%; height: 100%"> <el-carousel-item v-for="item in enterpriseInfo.dataList" :key="item.enterpriseId" style="width: 100%; height: 100%">
<div class="box-content"> <div class="box-content">
<div class="top-content"> <div class="top-content">
<div class="top-content-left">{{ item.enterpriseName }}</div> <div class="top-content-left text-ellipsis">{{ item.enterpriseName }}</div>
<div class="top-content-right" style="text-align: right"> <div class="top-content-right" style="text-align: right">
<div class="line1" style="display: flex; justify-content: flex-end"> <div class="line1" style="display: flex; justify-content: flex-end">
<span style="margin-left: 15px">事故报警总数</span> <span style="margin-left: 15px">事故报警总数</span>
@ -106,6 +106,15 @@ onMounted(async () => {
</script> </script>
<style lang="scss" scoped> <style lang="scss" scoped>
.text-ellipsis {
font-size: 16px;
color: #fff;
flex: 1;
overflow: hidden;
white-space: nowrap;
text-overflow: ellipsis;
-o-text-overflow: ellipsis;
}
.leftTop { .leftTop {
width: 100%; width: 100%;
height: 100%; height: 100%;

View File

@ -229,7 +229,7 @@ const openDialogData = async () => {
titleInfo: { titleInfo: {
titleLeft: "未来三天人员风险概率预测", titleLeft: "未来三天人员风险概率预测",
// titleRight: "", // titleRight: "",
percentage: 80 percentage: item.area
}, },
workerFlag: true, workerFlag: true,
workerList: [item.age, item.total, item.safe, item.workerType, item.security, item.exam] workerList: [item.age, item.total, item.safe, item.workerType, item.security, item.exam]
@ -520,6 +520,7 @@ const getWorkerRiskByProject = async (showLoading: boolean, val: number) => {
res.result.security, res.result.security,
res.result.exam res.result.exam
]; ];
randerInfo.titleInfo.percentage = res.result.area;
} }
activeIndex.value = val; activeIndex.value = val;
}; };

View File

@ -242,7 +242,7 @@ const openDialogData = async () => {
titleInfo: { titleInfo: {
titleLeft: "未来三天安全隐患风险概率预测", titleLeft: "未来三天安全隐患风险概率预测",
// titleRight: "", // titleRight: "",
percentage: 80 percentage: item.area
}, },
workerFlag: true, workerFlag: true,
workerList: [item.security, item.safe, item.levelRisk, item.limitTime] workerList: [item.security, item.safe, item.levelRisk, item.limitTime]
@ -365,6 +365,7 @@ const getSafetyRiskByProject = async (showLoading: boolean, val: number) => {
console.log("隐患风险预测趋势", res.result); console.log("隐患风险预测趋势", res.result);
randerInfo.dataList[0].value = [res.result.security, res.result.safe, res.result.levelRisk, res.result.limitTime]; randerInfo.dataList[0].value = [res.result.security, res.result.safe, res.result.levelRisk, res.result.limitTime];
randerInfo.workerList = [res.result.security, res.result.safe, res.result.levelRisk, res.result.limitTime]; randerInfo.workerList = [res.result.security, res.result.safe, res.result.levelRisk, res.result.limitTime];
randerInfo.titleInfo.percentage = res.result.area;
} }
activeInfo.activeIndex = val; activeInfo.activeIndex = val;
}; };

View File

@ -180,10 +180,10 @@ onMounted(async () => {
align-items: center; align-items: center;
line-height: 30px; line-height: 30px;
height: 30px; height: 30px;
font-size: 11px; font-size: 8px;
.numberCard { .numberCard {
font-size: 12px; font-size: 11px;
padding: 0 8px; padding: 0 8px;
margin-left: 3px; margin-left: 3px;
font-weight: bold; font-weight: bold;

View File

@ -176,14 +176,14 @@ function getImageNormalityEchart() {
textAlign: "center", textAlign: "center",
textStyle: { textStyle: {
color: "#fff", color: "#fff",
fontSize: 38, fontSize: 32,
fontWeight: "normal", fontWeight: "normal",
// align: "center", // align: "center",
fontFamily: "ABeeZee, ABeeZee" fontFamily: "ABeeZee, ABeeZee"
}, },
subtextStyle: { subtextStyle: {
color: "#9BB7D4", color: "#9BB7D4",
fontSize: 16, fontSize: 14,
fontWeight: "normal", fontWeight: "normal",
fontFamily: "ABeeZee, ABeeZee" fontFamily: "ABeeZee, ABeeZee"
// align: "center" // align: "center"
@ -294,14 +294,14 @@ function getVideoNormalityEchart() {
textAlign: "center", textAlign: "center",
textStyle: { textStyle: {
color: "#fff", color: "#fff",
fontSize: 38, fontSize: 32,
fontWeight: "normal", fontWeight: "normal",
// align: "center", // align: "center",
fontFamily: "ABeeZee, ABeeZee" fontFamily: "ABeeZee, ABeeZee"
}, },
subtextStyle: { subtextStyle: {
color: "#9BB7D4", color: "#9BB7D4",
fontSize: 16, fontSize: 14,
fontWeight: "normal", fontWeight: "normal",
fontFamily: "ABeeZee, ABeeZee" fontFamily: "ABeeZee, ABeeZee"
// align: "center" // align: "center"

View File

@ -339,7 +339,7 @@ function drawBar2() {
title: { title: {
text: stateInfo.dataDetail.num, text: stateInfo.dataDetail.num,
subtext: stateInfo.dataDetail.name, subtext: stateInfo.dataDetail.name,
x: "29%", x: "24%",
y: "40%", y: "40%",
textAlign: "center", textAlign: "center",
textStyle: { textStyle: {
@ -420,7 +420,7 @@ function drawBar2() {
name: "", name: "",
type: "pie", type: "pie",
radius: [100, 95], radius: [100, 95],
center: ["30%", "50%"], center: ["25%", "50%"],
hoverAnimation: false, hoverAnimation: false,
tooltip: { tooltip: {
trigger: "none" // tooltip.trigger 'none' trigger: "none" // tooltip.trigger 'none'
@ -561,7 +561,7 @@ function drawBar2() {
name: "", name: "",
type: "pie", type: "pie",
radius: [60, 80], radius: [60, 80],
center: ["30%", "50%"], center: ["25%", "50%"],
hoverAnimation: true, hoverAnimation: true,
itemStyle: { itemStyle: {
borderWidth: 3, borderWidth: 3,
@ -584,7 +584,7 @@ function drawBar2() {
{ {
type: "pie", type: "pie",
radius: ["52", "55"], radius: ["52", "55"],
center: ["30%", "50%"], center: ["25%", "50%"],
label: { label: {
show: false show: false
}, },

View File

@ -44,7 +44,12 @@
<el-carousel @change="onChange" indicator-position="none" style="width: 100%; height: 100%"> <el-carousel @change="onChange" indicator-position="none" style="width: 100%; height: 100%">
<el-carousel-item v-for="item in enterpriseInfo.dataList" :key="item.enterpriseId" style="width: 100%; height: 100%"> <el-carousel-item v-for="item in enterpriseInfo.dataList" :key="item.enterpriseId" style="width: 100%; height: 100%">
<div class="enterprise-info"> <div class="enterprise-info">
<div>{{ item.enterpriseName }}</div> <!-- <el-tooltip class="text-ellipsis" effect="dark" content="Top Left prompts info" placement="top-start">
<div style="text-ellipsis">{{ item.enterpriseName }}</div>
</el-tooltip> -->
<div class="text-ellipsis">
{{ item.enterpriseName }}
</div>
<div class="line1" style="display: flex"> <div class="line1" style="display: flex">
<span style="margin-left: 15px">事故报警总数</span> <span style="margin-left: 15px">事故报警总数</span>
<div class="numberCard" v-for="(ele, i) in `${enterpriseInfo.dataInfo.emergencyNum}`" :key="i"> <div class="numberCard" v-for="(ele, i) in `${enterpriseInfo.dataInfo.emergencyNum}`" :key="i">
@ -666,8 +671,8 @@ function getManAnalysisEchart() {
}, },
// color: ["#2BA5FF", "#F97766", "#1EF1FF", "#1EF1FF"], // color: ["#2BA5FF", "#F97766", "#1EF1FF", "#1EF1FF"],
grid: { grid: {
left: "6%", left: "8%",
right: "6%", right: "8%",
top: "15%", top: "15%",
bottom: "5%", bottom: "5%",
containLabel: true containLabel: true
@ -713,31 +718,31 @@ function getManAnalysisEchart() {
} }
// type: 'value' // type: 'value'
}, },
// dataZoom: [ dataZoom: [
// { {
// id: "dataZoomX", id: "dataZoomX",
// type: "inside", type: "inside",
// xAxisIndex: [0], xAxisIndex: [0],
// brushSelect: false, brushSelect: false,
// zoomOnMouseWheel: false, zoomOnMouseWheel: false,
// moveOnMouseWheel: true, // moveOnMouseWheel: true, //
// moveOnMouseMove: true, // moveOnMouseMove: true, //
// preventDefaultMouseMove: false, preventDefaultMouseMove: false,
// // start:100, // start:100,
// startValue: riskList.value.length - 1, startValue: workerRegionInfo.dateList.length - 1,
// endValue: riskList.value.length - 6, endValue: workerRegionInfo.dateList.length - 4,
// // //
// width: 8, width: 8,
// // //
// // height: "80%", // height: "80%",
// // //
// right: 3, right: 3,
// // //
// handleSize: 0, handleSize: 0,
// filterMode: "empty" filterMode: "empty"
// // top: "top", // top: "top",
// } }
// ], ],
series: workerRegionInfo.workerRegionList.map((item: any) => { series: workerRegionInfo.workerRegionList.map((item: any) => {
const color1 = Math.floor(Math.random() * 256); const color1 = Math.floor(Math.random() * 256);
const color2 = Math.floor(Math.random() * 256); const color2 = Math.floor(Math.random() * 256);
@ -945,6 +950,15 @@ onMounted(async () => {
</script> </script>
<style lang="scss" scoped> <style lang="scss" scoped>
.text-ellipsis {
font-size: 16px;
color: #fff;
flex: 1;
overflow: hidden;
white-space: nowrap;
text-overflow: ellipsis;
-o-text-overflow: ellipsis;
}
.manAnalysis-box { .manAnalysis-box {
height: 32%; height: 32%;
margin-top: 1%; margin-top: 1%;
@ -1139,6 +1153,7 @@ onMounted(async () => {
left: -8px; left: -8px;
font-size: 15px; font-size: 15px;
} }
.el-carousel__arrow--right { .el-carousel__arrow--right {
// top: 70px; // top: 70px;
right: -8px; right: -8px;