flx:修改项目大屏和总览大屏样式问题
This commit is contained in:
parent
0f60a72dd5
commit
f579491e4a
@ -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'
|
||||||
|
|||||||
@ -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='
|
||||||
|
|
||||||
|
|||||||
@ -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"; //苏立信项目
|
||||||
|
|||||||
@ -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: [
|
||||||
|
|||||||
@ -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
|
||||||
},
|
},
|
||||||
|
|||||||
@ -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%;
|
||||||
|
|||||||
@ -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;
|
||||||
};
|
};
|
||||||
|
|||||||
@ -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;
|
||||||
};
|
};
|
||||||
|
|||||||
@ -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;
|
||||||
|
|||||||
@ -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"
|
||||||
|
|||||||
@ -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
|
||||||
},
|
},
|
||||||
|
|||||||
@ -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;
|
||||||
|
|||||||
Loading…
x
Reference in New Issue
Block a user