From cc7fc0d7b84059544e07321632d1097c784a9858 Mon Sep 17 00:00:00 2001 From: X_Rian <904416525@qq.com> Date: Wed, 26 Jun 2024 10:01:05 +0800 Subject: [PATCH] =?UTF-8?q?flx=EF=BC=9A=E4=BF=AE=E6=94=B9=E7=8E=B0?= =?UTF-8?q?=E5=9C=BA=E5=A4=A7=E5=B1=8F=E6=A0=B7=E5=BC=8F?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- .env.development | 4 +- .env.production | 4 +- src/config/config.ts | 2 +- src/routers/modules/staticRouter.ts | 4 +- src/views/agjtLiveScreen/indexLive.vue | 3 +- .../agjtLiveScreen/liveScreen/leftBottom.vue | 161 ++++++++++-------- 6 files changed, 95 insertions(+), 83 deletions(-) diff --git a/.env.development b/.env.development index d433bd5..cb3bc29 100644 --- a/.env.development +++ b/.env.development @@ -5,7 +5,7 @@ NODE_ENV = 'development' # 后端本地 # VITE_API_URL = 'http://192.168.34.155:19111' # 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://121.196.214.246/api' # VITE_API_URL = 'http://jxj.zhgdyun.com:100' @@ -24,7 +24,7 @@ VITE_API_URL = 'http://182.90.224.237:51234' #雄哥远程 # VITE_API_URL = 'http://182.90.224.237:15551' # agjt # 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://jxj.zhgdyun.com:19812' # 苏立信/重庆市南岸区 # VITE_API_URL = 'http://101.43.164.214:11111' diff --git a/.env.production b/.env.production index cb1ff4e..d0dc8f7 100644 --- a/.env.production +++ b/.env.production @@ -22,7 +22,7 @@ NODE_ENV = "production" # VITE_API_URL = 'http://182.90.224.237:15551' # agjt # 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' # 中科安信 @@ -30,7 +30,7 @@ NODE_ENV = "production" # 中科佳成 # VITE_API_URL = 'http://1.13.185.209:8089' # 合肥启程 -VITE_API_URL = 'http://192.168.100.4:9809' +# VITE_API_URL = 'http://192.168.100.4:9809' # 打包 VITE_ULD_API_URL = 'http://jxj.zhgdyun.com:8012/onlinePreview?url=' diff --git a/src/config/config.ts b/src/config/config.ts index 8db7cbf..7fdbcd2 100644 --- a/src/config/config.ts +++ b/src/config/config.ts @@ -28,7 +28,7 @@ export const BASE_IMAGE_URL = import.meta.env.VITE_BASE_IMAGE_URL; // export const COMPANY: string = "zsbf"; //中水北方 // export const COMPANY: string = "as"; //鞍山项目 // export const COMPANY: string = "agjt"; //鞍钢集团 -// export const COMPANY: string = "agjtLive"; //鞍钢集团现场大屏 +export const COMPANY: string = "agjtLive"; //鞍钢集团现场大屏 // export const COMPANY: string = "agjtCommand"; //鞍钢集团指挥部大屏 // export const COMPANY: string = "agjtProjectKanban"; //鞍钢集团项目看板大屏 // export const COMPANY: string = "agjtOverviewScreen"; //鞍钢集团项目总览 diff --git a/src/routers/modules/staticRouter.ts b/src/routers/modules/staticRouter.ts index de898ea..1ac7204 100644 --- a/src/routers/modules/staticRouter.ts +++ b/src/routers/modules/staticRouter.ts @@ -24,9 +24,9 @@ export const staticRouter: RouteRecordRaw[] = [ { path: "/large", name: "大屏", - component: () => import("@/views/sevenLargeScreen/indexL.vue"), //七参数标准版 + // component: () => import("@/views/sevenLargeScreen/indexL.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/agjtProjectKanban/indexL.vue"), //鞍钢集团项目看板大屏 // component: () => import("@/views/sevenLargeScreen/indexL_syhy.vue"), // 只有一级路由(盘锦、嘉兴、鄱湖美湾医疗项目需切换至该首页) diff --git a/src/views/agjtLiveScreen/indexLive.vue b/src/views/agjtLiveScreen/indexLive.vue index 4cfdeab..34de72b 100644 --- a/src/views/agjtLiveScreen/indexLive.vue +++ b/src/views/agjtLiveScreen/indexLive.vue @@ -360,7 +360,8 @@ function loginOut() { .userItem { position: absolute; width: 110px; - height: 100px; + // height: 100px; + padding-bottom: 10px; right: 2%; top: 4%; background: #112d59; diff --git a/src/views/agjtLiveScreen/liveScreen/leftBottom.vue b/src/views/agjtLiveScreen/liveScreen/leftBottom.vue index 3fd5b69..4c3f827 100644 --- a/src/views/agjtLiveScreen/liveScreen/leftBottom.vue +++ b/src/views/agjtLiveScreen/liveScreen/leftBottom.vue @@ -6,9 +6,8 @@

暂无数据

-->
-
+
- @@ -17,96 +16,102 @@ import Card from "@/components/card.vue"; import { ref, onMounted, watch } from "vue"; import { GlobalStore } from "@/stores"; -import * as echarts from 'echarts'; +import * as echarts from "echarts"; import { COMPANY } from "@/config/config"; //引入现场大屏API -import { - getStatBySpecialApi, - } from "@/api/modules/agjtLiveApi"; +import { getStatBySpecialApi } from "@/api/modules/agjtLiveApi"; const store = GlobalStore(); -const BASEURL = import.meta.env.VITE_API_URL +const BASEURL = import.meta.env.VITE_API_URL; -const isShow = ref(false as any) +const isShow = ref(false as any); const innerPie = ref([ // { value: 0, name: '进行中' }, // { value: 0, name: '已完成' }, -] as any) +] as any); const outPie = ref([ // {name:'高处作业',value:0,doing:0,per:0},{name:'断路作业',value:0,doing:0,per:0},{name:'吊装安全',value:0,doing:0,per:0},{name:'受限空间',value:0,doing:0,per:0}, // {name:'动火作业',value:0,doing:0,per:0},{name:'盲板抽堵',value:0,doing:0,per:0},{name:'动土作业',value:0,doing:0,per:0},{name:'临时用电',value:0,doing:0,per:0}, -] as any) +] as any); //获取特殊作业情况信息 async function getSpecialInfo() { let data = { - projectSn: store.sn, - } + projectSn: store.sn + }; // if(BASEURL == 'http://182.90.224.237:51234' || BASEURL == 'http://192.168.34.221:9111') data.projectSn = 'BD3137498CB84BF0969979E0342CDBCA' // if(BASEURL == 'http://42.180.188.17:9809' || BASEURL == 'http://42.180.188.17:11211') data.projectSn = '471568F45EB247A3912A0D10EA1BFCEB' await getStatBySpecialApi(data).then(res => { - if(res.success){ - if(res.result){ + if (res.success) { + if (res.result) { //内饼图 - if(res.result.total){ + if (res.result.total) { // innerPie.value[0].value = res.result.total.running // innerPie.value[1].value = res.result.total.complete - innerPie.value.push({value: res.result.total.running,name:'进行中'}) - innerPie.value.push({value: res.result.total.complete,name:'已完成'}) + innerPie.value.push({ value: res.result.total.running, name: "进行中" }); + innerPie.value.push({ value: res.result.total.complete, name: "已完成" }); } //外饼图 - outPie.value = res.result.groupByType + outPie.value = res.result.groupByType; outPie.value.map(item => { - item.value = item.num - item.value = item.num - }) - drawPie() + item.value = item.num; + }); + drawPie(); } } }); -}; +} -function drawPie(){ +function drawPie() { type EChartsOption = echarts.EChartsOption; - var chartDom = document.getElementById('pieEchart')!; + var chartDom = document.getElementById("pieEchart")!; var myChart = echarts.init(chartDom); var option: EChartsOption; option = { tooltip: { - trigger: 'item', + trigger: "item", // formatter: '{a}
{b}: {c} ({d}%)' - formatter: function(params: any){ - if(params.seriesName == 'innerPie'){ - return "
"+ innerPie.value[params.dataIndex].name + '：' +innerPie.value[params.dataIndex].value + "
" - - }else{ - return "
"+ - "
"+outPie.value[params.dataIndex].name+" "+ outPie.value[params.dataIndex].ratio +"%
"+ - "
已完成："+outPie.value[params.dataIndex].complete+ '    进行中：' + outPie.value[params.dataIndex].running +"
"+ - "
" + formatter: function (params: any) { + if (params.seriesName == "innerPie") { + return "
" + innerPie.value[params.dataIndex].name + "：" + innerPie.value[params.dataIndex].value + "
"; + } else { + return ( + "
" + + "
" + + outPie.value[params.dataIndex].name + + " " + + outPie.value[params.dataIndex].ratio + + "%
" + + "
已完成：" + + outPie.value[params.dataIndex].complete + + "    进行中：" + + outPie.value[params.dataIndex].running + + "
" + + "
" + ); } - }, + } }, - color: ['#fac858','#5470c6','#ee6666','#91cc75','#73c0de','#3ba272','#fc8452','#9a60b4','#ea7ccc','#5470c6'], + color: ["#fac858", "#5470c6", "#ee6666", "#91cc75", "#73c0de", "#3ba272", "#fc8452", "#9a60b4", "#ea7ccc", "#5470c6"], // legend: { // data: [ 'Direct', 'Marketing', 'Search Engine', 'Email', 'Union Ads', 'Video Ads', 'Baidu', 'Google', 'Bing', 'Others' ] // }, series: [ { - grid:{ - left: '5%', - right: '5%', - bottom: '5%', - containLabel:true + grid: { + left: "5%", + right: "5%", + bottom: "5%", + containLabel: true }, - name: 'innerPie', - type: 'pie', - selectedMode: 'single', - radius: [0, '30%'], + name: "innerPie", + type: "pie", + selectedMode: "single", + radius: [0, "30%"], label: { - position: 'inner', + position: "inner", fontSize: 14 }, labelLine: { @@ -115,44 +120,53 @@ function drawPie(){ data: innerPie.value }, { - name: 'pieCircle', - type: 'pie', - radius: ['45%', '60%'], + name: "pieCircle", + type: "pie", + radius: ["45%", "60%"], + minAngle: 45, labelLine: { length: 1 }, label: { // formatter: '{a|{a}}{abg|}\n{hr|}\n {b|{b}：}{c} {per|{d}%} ', - formatter: function(params: any){ - let done = '已完成：'+ outPie.value[params.dataIndex].complete + ' ' - return '{name|'+ outPie.value[params.dataIndex].name +'}{abg|} {per|'+ outPie.value[params.dataIndex].ratio +'%}\n{hr|}\n{done|'+ done - +'} 进行中：' + outPie.value[params.dataIndex].running + formatter: function (params: any) { + let done = "已完成：" + outPie.value[params.dataIndex].complete + " "; + return ( + "{name|" + + outPie.value[params.dataIndex].name + + "}{abg|} {per|" + + outPie.value[params.dataIndex].ratio + + "%}\n{hr|}\n{done|" + + done + + "} 进行中：" + + outPie.value[params.dataIndex].running + ); }, // backgroundColor: '#1c447b', - backgroundColor: 'rgba(28,68,123,0.5)', + backgroundColor: "rgba(28,68,123,0.5)", borderRadius: 3, - textStyle:{ - color: '#FFF' + textStyle: { + color: "#FFF" }, rich: { - name:{ - color: '#fff', - align: 'center', + name: { + color: "#fff", + align: "center", lineHeight: 20 }, - done:{ - color: '#fff', + done: { + color: "#fff", lineHeight: 20 }, hr: { - borderColor: '#8C8D8E', - width: '100%', + borderColor: "#8C8D8E", + width: "100%", borderWidth: 1, height: 0 }, per: { - color: '#fff', - backgroundColor: '#4C5058', + color: "#fff", + backgroundColor: "#4C5058", padding: [1, 1], borderRadius: 1 } @@ -161,24 +175,22 @@ function drawPie(){ data: outPie.value } ] - }; option && myChart.setOption(option); } - //测试方法，对接口时改成相应的方法注释 const leftBottomMethod = async () => { - console.log("leftBottomMethod") -} + console.log("leftBottomMethod"); +}; //将方法暴露给父组件 defineExpose({ leftBottomMethod -}) +}); -onMounted( async () => { - getSpecialInfo() +onMounted(async () => { + getSpecialInfo(); }); @@ -186,14 +198,13 @@ onMounted( async () => { .leftBottom { width: 100%; height: 100%; - .mainContainer{ + .mainContainer { width: 100%; height: 100%; display: flex; justify-content: center; align-items: center; } - } ::v-deep .h-card .content { height: 80%;