flx：修改现场大屏样式

2024-06-26 10:01:05 +08:00 · 2024-06-26 10:01:05 +08:00 · cc7fc0d7b8
commit cc7fc0d7b8
parent 30ab53c652
6 changed files with 95 additions and 83 deletions
--- 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'
--- 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='

--- 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"; //鞍钢集团项目总览
--- 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"), // 只有一级路由(盘锦、嘉兴、鄱湖美湾医疗项目需切换至该首页)
--- 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;
--- a/src/views/agjtLiveScreen/liveScreen/leftBottom.vue
+++ b/src/views/agjtLiveScreen/liveScreen/leftBottom.vue
@ -6,9 +6,8 @@
 				<p>暂无数据</p>
 			</div> -->
 			<div class="mainContainer">
-				<div id="pieEchart" style="width:100%;height:100%"></div>
+				<div id="pieEchart" style="width: 100%; height: 100%"></div>
 			</div>
-			
 		</Card>
 	</div>
 </template>
@ -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} <br/>{b}: {c} ({d}%)'
-			formatter: function(params: any){
-				if(params.seriesName == 'innerPie'){
-					return "<div>"+ innerPie.value[params.dataIndex].name + '：' +innerPie.value[params.dataIndex].value + "</div>"
-							
-				}else{
-					return "<div style='width:auto;height:auto'>"+
-								"<div>"+outPie.value[params.dataIndex].name+"  "+ outPie.value[params.dataIndex].ratio +"%</div>"+
-								"<div>已完成："+outPie.value[params.dataIndex].complete+ '&nbsp;&nbsp;&nbsp;&nbsp;进行中：' + outPie.value[params.dataIndex].running +"</div>"+
-							"</div>"
+			formatter: function (params: any) {
+				if (params.seriesName == "innerPie") {
+					return "<div>" + innerPie.value[params.dataIndex].name + "：" + innerPie.value[params.dataIndex].value + "</div>";
+				} else {
+					return (
+						"<div style='width:auto;height:auto'>" +
+						"<div>" +
+						outPie.value[params.dataIndex].name +
+						"  " +
+						outPie.value[params.dataIndex].ratio +
+						"%</div>" +
+						"<div>已完成：" +
+						outPie.value[params.dataIndex].complete +
+						"&nbsp;&nbsp;&nbsp;&nbsp;进行中：" +
+						outPie.value[params.dataIndex].running +
+						"</div>" +
+						"</div>"
+					);
 				}
-			},
+			}
 		},
-		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();
 });
 </script>

@ -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%;