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

flx：修改现场大屏样式

Browse Source
This commit is contained in:
X_Rian 2024-06-26 10:01:05 +08:00
parent 30ab53c652
commit cc7fc0d7b8
6 changed files with 95 additions and 83 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

4
.env.development
View File

@ -5,7 +5,7 @@ NODE_ENV = 'development'
# 后端本地 # 后端本地
# 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'
@ -24,7 +24,7 @@ VITE_API_URL = 'http://182.90.224.237:51234' #雄哥远程
# 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://jxj.zhgdyun.com:19812' # VITE_API_URL = 'http://jxj.zhgdyun.com:19812'
# 苏立信/重庆市南岸区 # 苏立信/重庆市南岸区
# VITE_API_URL = 'http://101.43.164.214:11111' # VITE_API_URL = 'http://101.43.164.214:11111'

4
.env.production
View File

@ -22,7 +22,7 @@ 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'
# 中科安信 # 中科安信
@ -30,7 +30,7 @@ NODE_ENV = "production"
# 中科佳成 # 中科佳成
# VITE_API_URL = 'http://1.13.185.209:8089' # 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=' VITE_ULD_API_URL = 'http://jxj.zhgdyun.com:8012/onlinePreview?url='

2
src/config/config.ts
View File

@ -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 = "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"; //鞍钢集团项目总览

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

@ -24,9 +24,9 @@ export const staticRouter: RouteRecordRaw[] = [
{ {
path: "/large", path: "/large",
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"), // 只有一级路由(盘锦、嘉兴、鄱湖美湾医疗项目需切换至该首页)

3
src/views/agjtLiveScreen/indexLive.vue
View File

@ -360,7 +360,8 @@ function loginOut() {
.userItem { .userItem {
position: absolute; position: absolute;
width: 110px; width: 110px;
height: 100px; // height: 100px;
padding-bottom: 10px;
right: 2%; right: 2%;
top: 4%; top: 4%;
background: #112d59; background: #112d59;

161
src/views/agjtLiveScreen/liveScreen/leftBottom.vue
View File

@ -6,9 +6,8 @@
<p>暂无数据</p> <p>暂无数据</p>
</div> --> </div> -->
<div class="mainContainer"> <div class="mainContainer">
<div id="pieEchart" style="width:100%;height:100%"></div> <div id="pieEchart" style="width: 100%; height: 100%"></div>
</div> </div>
</Card> </Card>
</div> </div>
</template> </template>
@ -17,96 +16,102 @@
import Card from "@/components/card.vue"; import Card from "@/components/card.vue";
import { ref, onMounted, watch } from "vue"; import { ref, onMounted, watch } from "vue";
import { GlobalStore } from "@/stores"; import { GlobalStore } from "@/stores";
import * as echarts from 'echarts'; import * as echarts from "echarts";
import { COMPANY } from "@/config/config"; import { COMPANY } from "@/config/config";
//引入现场大屏API //引入现场大屏API
import { import { getStatBySpecialApi } from "@/api/modules/agjtLiveApi";
getStatBySpecialApi,
} from "@/api/modules/agjtLiveApi";
const store = GlobalStore(); 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([ const innerPie = ref([
// { value: 0, name: '进行中' }, // { value: 0, name: '进行中' },
// { value: 0, name: '已完成' }, // { value: 0, name: '已完成' },
] as any) ] as any);
const outPie = ref([ 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},
// {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() { async function getSpecialInfo() {
let data = { 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://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' // if(BASEURL == 'http://42.180.188.17:9809' || BASEURL == 'http://42.180.188.17:11211') data.projectSn = '471568F45EB247A3912A0D10EA1BFCEB'
await getStatBySpecialApi(data).then(res => { await getStatBySpecialApi(data).then(res => {
if(res.success){ if (res.success) {
if(res.result){ if (res.result) {
//内饼图 //内饼图
if(res.result.total){ if (res.result.total) {
// innerPie.value[0].value = res.result.total.running // innerPie.value[0].value = res.result.total.running
// innerPie.value[1].value = res.result.total.complete // innerPie.value[1].value = res.result.total.complete
innerPie.value.push({value: res.result.total.running,name:'进行中'}) 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.complete, name: "已完成" });
} }
//外饼图 //外饼图
outPie.value = res.result.groupByType outPie.value = res.result.groupByType;
outPie.value.map(item => { outPie.value.map(item => {
item.value = item.num item.value = item.num;
item.value = item.num });
}) drawPie();
drawPie()
} }
} }
}); });
}; }
function drawPie(){ function drawPie() {
type EChartsOption = echarts.EChartsOption; type EChartsOption = echarts.EChartsOption;
var chartDom = document.getElementById('pieEchart')!; var chartDom = document.getElementById("pieEchart")!;
var myChart = echarts.init(chartDom); var myChart = echarts.init(chartDom);
var option: EChartsOption; var option: EChartsOption;
option = { option = {
tooltip: { tooltip: {
trigger: 'item', trigger: "item",
// formatter: '{a} <br/>{b}: {c} ({d}%)' // formatter: '{a} <br/>{b}: {c} ({d}%)'
formatter: function(params: any){ formatter: function (params: any) {
if(params.seriesName == 'innerPie'){ if (params.seriesName == "innerPie") {
return "<div>"+ innerPie.value[params.dataIndex].name + '：' +innerPie.value[params.dataIndex].value + "</div>" return "<div>" + innerPie.value[params.dataIndex].name + "：" + innerPie.value[params.dataIndex].value + "</div>";
} else {
}else{ return (
return "<div style='width:auto;height:auto'>"+ "<div style='width:auto;height:auto'>" +
"<div>"+outPie.value[params.dataIndex].name+" "+ outPie.value[params.dataIndex].ratio +"%</div>"+ "<div>" +
"<div>已完成："+outPie.value[params.dataIndex].complete+ '&nbsp;&nbsp;&nbsp;&nbsp;进行中：' + outPie.value[params.dataIndex].running +"</div>"+ outPie.value[params.dataIndex].name +
"</div>" " " +
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: { // legend: {
// data: [ 'Direct', 'Marketing', 'Search Engine', 'Email', 'Union Ads', 'Video Ads', 'Baidu', 'Google', 'Bing', 'Others' ] // data: [ 'Direct', 'Marketing', 'Search Engine', 'Email', 'Union Ads', 'Video Ads', 'Baidu', 'Google', 'Bing', 'Others' ]
// }, // },
series: [ series: [
{ {
grid:{ grid: {
left: '5%', left: "5%",
right: '5%', right: "5%",
bottom: '5%', bottom: "5%",
containLabel:true containLabel: true
}, },
name: 'innerPie', name: "innerPie",
type: 'pie', type: "pie",
selectedMode: 'single', selectedMode: "single",
radius: [0, '30%'], radius: [0, "30%"],
label: { label: {
position: 'inner', position: "inner",
fontSize: 14 fontSize: 14
}, },
labelLine: { labelLine: {
@ -115,44 +120,53 @@ function drawPie(){
data: innerPie.value data: innerPie.value
}, },
{ {
name: 'pieCircle', name: "pieCircle",
type: 'pie', type: "pie",
radius: ['45%', '60%'], radius: ["45%", "60%"],
minAngle: 45,
labelLine: { labelLine: {
length: 1 length: 1
}, },
label: { label: {
// formatter: '{a|{a}}{abg|}\n{hr|}\n {b|{b}：}{c} {per|{d}%} ', // formatter: '{a|{a}}{abg|}\n{hr|}\n {b|{b}：}{c} {per|{d}%} ',
formatter: function(params: any){ formatter: function (params: any) {
let done = '已完成：'+ outPie.value[params.dataIndex].complete + ' ' 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 return (
+'} 进行中：' + outPie.value[params.dataIndex].running "{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: '#1c447b',
backgroundColor: 'rgba(28,68,123,0.5)', backgroundColor: "rgba(28,68,123,0.5)",
borderRadius: 3, borderRadius: 3,
textStyle:{ textStyle: {
color: '#FFF' color: "#FFF"
}, },
rich: { rich: {
name:{ name: {
color: '#fff', color: "#fff",
align: 'center', align: "center",
lineHeight: 20 lineHeight: 20
}, },
done:{ done: {
color: '#fff', color: "#fff",
lineHeight: 20 lineHeight: 20
}, },
hr: { hr: {
borderColor: '#8C8D8E', borderColor: "#8C8D8E",
width: '100%', width: "100%",
borderWidth: 1, borderWidth: 1,
height: 0 height: 0
}, },
per: { per: {
color: '#fff', color: "#fff",
backgroundColor: '#4C5058', backgroundColor: "#4C5058",
padding: [1, 1], padding: [1, 1],
borderRadius: 1 borderRadius: 1
} }
@ -161,24 +175,22 @@ function drawPie(){
data: outPie.value data: outPie.value
} }
] ]
}; };
option && myChart.setOption(option); option && myChart.setOption(option);
} }
//测试方法，对接口时改成相应的方法注释 //测试方法，对接口时改成相应的方法注释
const leftBottomMethod = async () => { const leftBottomMethod = async () => {
console.log("leftBottomMethod") console.log("leftBottomMethod");
} };
//将方法暴露给父组件 //将方法暴露给父组件
defineExpose({ defineExpose({
leftBottomMethod leftBottomMethod
}) });
onMounted( async () => { onMounted(async () => {
getSpecialInfo() getSpecialInfo();
}); });
</script> </script>
@ -186,14 +198,13 @@ onMounted( async () => {
.leftBottom { .leftBottom {
width: 100%; width: 100%;
height: 100%; height: 100%;
.mainContainer{ .mainContainer {
width: 100%; width: 100%;
height: 100%; height: 100%;
display: flex; display: flex;
justify-content: center; justify-content: center;
align-items: center; align-items: center;
} }
} }
::v-deep .h-card .content { ::v-deep .h-card .content {
height: 80%; height: 80%;