feat:完成现场大屏左上角承包商信息轮播开发
This commit is contained in:
Vce
parent
0eb25e1b55
commit
bbbbc93e53
@ -21,6 +21,10 @@ export const countTaskProgressApi = (params: {}, noLoading: boolean) => {
|
||||
export const countProjectEnterpriseApi = (params: {}, noLoading: boolean) => {
|
||||
return http.post(BASEURL + `/xmgl/projectEnterprise/list`, params, { headers: { noLoading: noLoading } });
|
||||
};
|
||||
//获取承包商进度列表API
|
||||
export const countProcessApi = (params: {}, noLoading: boolean) => {
|
||||
return http.get(BASEURL + `/xmgl/xzTaskProgress/list?projectSn=`+params.projectSn+`&orderBy=`+params.orderBy, );
|
||||
};
|
||||
|
||||
//获取企业信息API
|
||||
export const getEnterpriseInfoByIdApi = (params: {}, noLoading: boolean) => {
|
||||
|
||||
@ -100,14 +100,12 @@ async function getLwInfo() {
|
||||
// if(res1.success){
|
||||
// if(res1.result){
|
||||
// lwInfo1.value = res1.result
|
||||
// // console.log(lwInfo1.value)
|
||||
// }
|
||||
// }
|
||||
// })
|
||||
selectWorkerTeamAndDepartmentStatisticsApi({
|
||||
projectSn: store.sn,
|
||||
},true).then(res2 => {
|
||||
console.log(res2)
|
||||
if(res2.success){
|
||||
if(res2.result){
|
||||
lwInfo2.value = res2.result
|
||||
|
||||
@ -126,7 +126,7 @@ function playVideo(){
|
||||
|
||||
//测试方法，对接口时改成相应的方法注释
|
||||
const centerTopMethod = async () => {
|
||||
console.log("centerTopMethod")
|
||||
|
||||
}
|
||||
//将方法暴露给父组件
|
||||
defineExpose({
|
||||
|
||||
@ -192,7 +192,6 @@ function drawPie() {
|
||||
|
||||
//测试方法，对接口时改成相应的方法注释
|
||||
const leftBottomMethod = async () => {
|
||||
// console.log("leftBottomMethod");
|
||||
getSpecialInfo()
|
||||
};
|
||||
//将方法暴露给父组件
|
||||
|
||||
@ -1,10 +1,11 @@
|
||||
<template>
|
||||
<div class="leftTop">
|
||||
<Card title="承包商项目信息">
|
||||
<Card title="总包单位信息轮播">
|
||||
<!-- <el-carousel style="width: 110%;transform:translateX(-4.5%) translateY(-5%);" :autoplay="false" indicator-position="none" -->
|
||||
<el-carousel style="width: 110%;transform:translateX(-4.5%) translateY(-5%);" :autoplay="true" :interval="10000" indicator-position="none"
|
||||
v-if="cbsProjectInfo && cbsProjectInfo.length>0">
|
||||
<el-carousel-item style="height:100%" v-for="(item,i) in cbsProjectInfo" :key="i">
|
||||
<div class="mainContainer" style="transform:translateX(5%) translateY(5%)">
|
||||
<div class="mainContainer" style="transform:translateX(5%) translateY(5%)" v-if="item.lbType == 1">
|
||||
<div class="lineBox">
|
||||
<span class="aLine" style="width:auto;margin-left: 5%;">承包商名称：</span>
|
||||
<span class="cLine">{{item.projectEnterprise.cbsName || '--'}}</span>
|
||||
@ -66,6 +67,76 @@
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="mainContainer" style="transform:translateX(5%) translateY(5%)" v-else>
|
||||
<div>
|
||||
<span>承包商名称：</span>
|
||||
<span>{{item.name || '--'}}</span>
|
||||
</div>
|
||||
<div class="cbProcess" v-if="item.processList.length > 3">
|
||||
<!-- v-if="listData.length>0" :list="listData" -->
|
||||
<vue3-seamless-scroll
|
||||
v-if="item.processList.length > 0"
|
||||
:list="item.processList"
|
||||
:speed="1"
|
||||
:limitScrollNum="3"
|
||||
:step="0.3"
|
||||
:hover="true"
|
||||
class="scroll"
|
||||
>
|
||||
<div class="pItem" v-for="(item2, i) in item.processList" :key="i">
|
||||
<div class="pLeft">
|
||||
<span :class="['plInner', 'plBgc' + ((i + 1) % 12)]">
|
||||
<span style="margin-left: 10px">Top{{ i + 1 }}</span>
|
||||
</span>
|
||||
</div>
|
||||
<div class="pRight">
|
||||
<div class="prTop">
|
||||
<div class="prtLeft">{{ item2.taskName }}</div>
|
||||
<div class="prtRight">{{ item2.progressRatio }}%</div>
|
||||
</div>
|
||||
<div class="prBottom">
|
||||
<div class="processLineBg">
|
||||
<div :class="['processLine', 'plBtnBgc' + ((i + 1) % 12)]" :style="{ width: item2.progressRatio + '%' }">
|
||||
<div class="processLineBtn"></div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</vue3-seamless-scroll>
|
||||
</div>
|
||||
<div class="cbProcess" v-else-if="item.processList.length == 0">
|
||||
<div class="processNotDta" v-if="item.processList.length == 0">
|
||||
<img src="@/assets/images/noData.png" alt="" />
|
||||
<p>暂无数据</p>
|
||||
</div>
|
||||
</div>
|
||||
<div class="cbProcess" v-else>
|
||||
<div class="pItem" v-for="(item2, i) in item.processList" :key="i">
|
||||
<div class="pLeft">
|
||||
<span :class="['plInner', 'plBgc' + ((i + 1) % 12)]">
|
||||
<span style="margin-left: 10px">Top{{ i + 1 }}</span>
|
||||
</span>
|
||||
</div>
|
||||
<div class="pRight">
|
||||
<div class="prTop">
|
||||
<div class="prtLeft">{{ item2.taskName }}</div>
|
||||
<div class="prtRight">{{ item2.progressRatio }}%</div>
|
||||
</div>
|
||||
<div class="prBottom">
|
||||
<div class="processLineBg">
|
||||
<div :class="['processLine', 'plBtnBgc' + ((i + 1) % 12)]" :style="{ width: item2.progressRatio + '%' }">
|
||||
<div class="processLineBtn"></div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<!-- </vue3-seamless-scroll> -->
|
||||
</div>
|
||||
|
||||
|
||||
</div>
|
||||
</el-carousel-item>
|
||||
</el-carousel>
|
||||
<div class="not-data" v-else>
|
||||
@ -81,33 +152,77 @@ import Card from "@/components/card.vue";
|
||||
import { GlobalStore } from "@/stores";
|
||||
import { ref, onMounted, watch } from "vue";
|
||||
import { COMPANY } from "@/config/config";
|
||||
import { Vue3SeamlessScroll } from "vue3-seamless-scroll";
|
||||
//引入现场大屏API
|
||||
import {
|
||||
getEnterpriseIdApi,
|
||||
getEnterpriseInfoByIdApi,
|
||||
countProjectEnterpriseApi,
|
||||
countProcessApi,
|
||||
} from "@/api/modules/agjtLiveApi";
|
||||
const store = GlobalStore();
|
||||
const BASEURL = import.meta.env.VITE_API_URL
|
||||
|
||||
const cbsProjectInfo = ref({} as any)
|
||||
async function getCbsProjectInfo() {
|
||||
let data = {
|
||||
let data1 = {
|
||||
page:1,
|
||||
pageSize:999,
|
||||
projectSn:store.sn,
|
||||
isCountMainEnterprise:1
|
||||
}
|
||||
await countProjectEnterpriseApi(data,true).then(res => {
|
||||
let peList:any = []
|
||||
await countProjectEnterpriseApi(data1,true).then((res:any) => {
|
||||
if(res.success){
|
||||
if(res.result.records){
|
||||
cbsProjectInfo.value = res.result.records
|
||||
if(res.result && res.result.records){
|
||||
peList = res.result.records
|
||||
peList.map((item: any) => {
|
||||
item.lbType = 1
|
||||
})
|
||||
}
|
||||
}
|
||||
});
|
||||
let data2 = {
|
||||
projectSn:store.sn,
|
||||
orderBy: 1
|
||||
}
|
||||
let pList:any = []
|
||||
await countProcessApi(data2,true).then((res:any) => {
|
||||
if(res.success){
|
||||
pList = res.result
|
||||
}
|
||||
})
|
||||
cbsProjectInfo.value = []
|
||||
peList.map((item: any,i: any) => {
|
||||
cbsProjectInfo.value.push(item)
|
||||
let processList = pList.filter((item2: any) => item2.enterpriseId == item.id) || []
|
||||
if(processList.length>3){
|
||||
let tempList:any = []
|
||||
// cbsProjectInfo.value.map((item3:any,i:any) => {
|
||||
processList.map((item3:any,i:any) => {
|
||||
tempList.push(item3)
|
||||
if((i+1)%3 == 0){
|
||||
cbsProjectInfo.value.push({
|
||||
id: item.id,
|
||||
name: item.projectEnterprise.cbsName,
|
||||
lbType: 2,
|
||||
processList: tempList
|
||||
})
|
||||
tempList = []
|
||||
}
|
||||
})
|
||||
}else{
|
||||
cbsProjectInfo.value.push({
|
||||
id: item.id,
|
||||
name: item.projectEnterprise.cbsName,
|
||||
lbType: 2,
|
||||
processList: processList
|
||||
})
|
||||
}
|
||||
})
|
||||
console.log('cbsProjectInfo',cbsProjectInfo.value)
|
||||
};
|
||||
// async function getCbsProjectInfo() {
|
||||
// console.log("BASEURL===>",BASEURL)
|
||||
// //获取企业Id
|
||||
// await getEnterpriseIdApi().then(res => {
|
||||
// if(res.success){
|
||||
@ -168,7 +283,7 @@ onMounted( async () => {
|
||||
.leftTop {
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
overflow: hidden;
|
||||
overflow: hidden;
|
||||
.mainContainer{
|
||||
width: calc(100% - 20px);
|
||||
height: calc(80% - 20px);
|
||||
@ -196,31 +311,225 @@ onMounted( async () => {
|
||||
word-wrap: break-word;
|
||||
}
|
||||
}
|
||||
.cbProcess {
|
||||
padding-top: 5px;
|
||||
height: calc(100% - 55px);
|
||||
// width: calc(100% - 55px);
|
||||
overflow: hidden;
|
||||
// background-color: #fff;
|
||||
.pItem {
|
||||
width: 85%;
|
||||
height: 55px;
|
||||
display: flex;
|
||||
// background-color: #fff;
|
||||
font-size: 13px;
|
||||
color: #fff;
|
||||
.pLeft {
|
||||
width: 20%;
|
||||
height: 55px;
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
align-items: center;
|
||||
.plInner {
|
||||
width: 80px;
|
||||
// text-align: center;
|
||||
line-height: 30px;
|
||||
// background-color: darkred;
|
||||
border-radius: 100px;
|
||||
}
|
||||
}
|
||||
.pRight {
|
||||
width: 80%;
|
||||
height: 55px;
|
||||
.prTop {
|
||||
// background-color: darkblue;
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
height: 30px;
|
||||
.prtLeft {
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
align-items: flex-end;
|
||||
}
|
||||
.prtRight {
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
align-items: flex-end;
|
||||
}
|
||||
}
|
||||
.prBottom {
|
||||
// background-color: purple;
|
||||
height: 15px;
|
||||
.processLineBg {
|
||||
background-color: rgba(50, 50, 50, 0.5);
|
||||
// transform: scaleX(-1);
|
||||
.processLine {
|
||||
margin-top: 10px;
|
||||
// padding-top: 10px;
|
||||
height: 5px;
|
||||
display: flex;
|
||||
justify-content: flex-end;
|
||||
.processLineBtn {
|
||||
width: 3px;
|
||||
height: 9px;
|
||||
background: #fff;
|
||||
transform: translateY(-2px);
|
||||
}
|
||||
}
|
||||
// .plBgc1{
|
||||
// background: rgb(150,0,0);
|
||||
// background: linear-gradient(90deg, rgba(50,50,50,0.5) 10%, rgba(150,0,0,1) 100%);
|
||||
// }
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.notoDta {
|
||||
top: 38%;
|
||||
width: 50%;
|
||||
// left: 40%;
|
||||
position: absolute;
|
||||
text-align: center;
|
||||
left: 50%;
|
||||
transform: translateX(-50%);
|
||||
|
||||
img {
|
||||
width: 40%;
|
||||
margin: 5% 30%;
|
||||
}
|
||||
|
||||
// .projectInfo {
|
||||
// width: 100%;
|
||||
// height: 100%;
|
||||
// color: #fff;
|
||||
// padding: 2% 0 0 4%;
|
||||
p {
|
||||
color: #fff;
|
||||
font-size: calc(100vw * 14 / 1920);
|
||||
margin: -6% 30%;
|
||||
}
|
||||
}
|
||||
|
||||
// div {
|
||||
// width: 95%;
|
||||
// height: 12%;
|
||||
// font-size: 15px;
|
||||
// white-space: nowrap; //单行
|
||||
// overflow: hidden;
|
||||
// text-overflow: ellipsis;
|
||||
// span {
|
||||
// margin-right: 3%;
|
||||
// color: #ccc;
|
||||
// }
|
||||
// }
|
||||
// }
|
||||
}
|
||||
.scroll {
|
||||
height: 100%;
|
||||
width: 100%;
|
||||
overflow: hidden;
|
||||
}
|
||||
.processNotDta {
|
||||
top: 25%;
|
||||
width: 40%;
|
||||
// left: 40%;
|
||||
position: absolute;
|
||||
text-align: center;
|
||||
left: 45%;
|
||||
transform: translateX(-50%);
|
||||
|
||||
img {
|
||||
width: 40%;
|
||||
margin: 5% 30%;
|
||||
}
|
||||
|
||||
p {
|
||||
color: #fff;
|
||||
font-size: calc(100vw * 14 / 1920);
|
||||
margin: -6% 30%;
|
||||
}
|
||||
}
|
||||
.plBgc1 {
|
||||
background: rgb(139, 0, 0);
|
||||
background: linear-gradient(90deg, rgba(139, 0, 0, 1) 35%, rgba(0, 0, 0, 0.5) 100%);
|
||||
}
|
||||
.plBtnBgc1 {
|
||||
background: rgb(139, 0, 0);
|
||||
background: linear-gradient(90deg, rgba(50, 50, 50, 0.5) 10%, rgba(139, 0, 0, 1) 100%);
|
||||
}
|
||||
.plBgc2 {
|
||||
background: rgb(155, 155, 0);
|
||||
background: linear-gradient(90deg, rgba(155, 155, 0, 1) 35%, rgba(0, 0, 0, 0.5) 100%);
|
||||
}
|
||||
.plBtnBgc2 {
|
||||
background: rgb(155, 155, 0);
|
||||
background: linear-gradient(90deg, rgba(50, 50, 50, 0.5) 10%, rgba(155, 155, 0, 1) 100%);
|
||||
}
|
||||
.plBgc3 {
|
||||
background: rgb(0, 0, 139);
|
||||
background: linear-gradient(90deg, rgba(0, 0, 139, 1) 35%, rgba(0, 0, 0, 0.5) 100%);
|
||||
}
|
||||
.plBtnBgc3 {
|
||||
background: rgb(0, 0, 139);
|
||||
background: linear-gradient(90deg, rgba(50, 50, 50, 0.5) 10%, rgba(0, 0, 139, 1) 100%);
|
||||
}
|
||||
.plBgc4 {
|
||||
background: rgb(139, 0, 139);
|
||||
background: linear-gradient(90deg, rgba(139, 0, 139, 1) 35%, rgba(0, 0, 0, 0.5) 100%);
|
||||
}
|
||||
.plBtnBgc4 {
|
||||
background: rgb(139, 0, 139);
|
||||
background: linear-gradient(90deg, rgba(50, 50, 50, 0.5) 10%, rgba(139, 0, 139, 1) 100%);
|
||||
}
|
||||
.plBgc5 {
|
||||
background: rgb(72, 61, 139);
|
||||
background: linear-gradient(90deg, rgba(72, 61, 139, 1) 35%, rgba(0, 0, 0, 0.5) 100%);
|
||||
}
|
||||
.plBtnBgc5 {
|
||||
background: rgb(72, 61, 139);
|
||||
background: linear-gradient(90deg, rgba(50, 50, 50, 0.5) 10%, rgba(72, 61, 139, 1) 100%);
|
||||
}
|
||||
.plBgc6 {
|
||||
background: rgb(0, 206, 209);
|
||||
background: linear-gradient(90deg, rgba(0, 206, 209, 1) 35%, rgba(0, 0, 0, 0.5) 100%);
|
||||
}
|
||||
.plBtnBgc6 {
|
||||
background: rgb(0, 206, 209);
|
||||
background: linear-gradient(90deg, rgba(50, 50, 50, 0.5) 10%, rgba(0, 206, 209, 1) 100%);
|
||||
}
|
||||
.plBgc7 {
|
||||
background: rgb(47, 79, 79);
|
||||
background: linear-gradient(90deg, rgba(47, 79, 79, 1) 35%, rgba(0, 0, 0, 0.5) 100%);
|
||||
}
|
||||
.plBtnBgc7 {
|
||||
background: rgb(47, 79, 79);
|
||||
background: linear-gradient(90deg, rgba(50, 50, 50, 0.5) 10%, rgba(47, 79, 79, 1) 100%);
|
||||
}
|
||||
.plBgc8 {
|
||||
background: rgb(0, 100, 0);
|
||||
background: linear-gradient(90deg, rgba(0, 100, 0, 1) 35%, rgba(0, 0, 0, 0.5) 100%);
|
||||
}
|
||||
.plBtnBgc8 {
|
||||
background: rgb(0, 100, 0);
|
||||
background: linear-gradient(90deg, rgba(50, 50, 50, 0.5) 10%, rgba(0, 100, 0, 1) 100%);
|
||||
}
|
||||
.plBgc9 {
|
||||
background: rgb(189, 183, 107);
|
||||
background: linear-gradient(90deg, rgba(189, 183, 107, 1) 35%, rgba(0, 0, 0, 0.5) 100%);
|
||||
}
|
||||
.plBtnBgc9 {
|
||||
background: rgb(189, 183, 107);
|
||||
background: linear-gradient(90deg, rgba(50, 50, 50, 0.5) 10%, rgba(189, 183, 107, 1) 100%);
|
||||
}
|
||||
.plBgc10 {
|
||||
background: rgb(255, 140, 0);
|
||||
background: linear-gradient(90deg, rgba(255, 140, 0, 1) 35%, rgba(0, 0, 0, 0.5) 100%);
|
||||
}
|
||||
.plBtnBgc10 {
|
||||
background: rgb(255, 140, 0);
|
||||
background: linear-gradient(90deg, rgba(50, 50, 50, 0.5) 10%, rgba(255, 140, 0, 1) 100%);
|
||||
}
|
||||
.plBgc11 {
|
||||
background: rgb(233, 150, 122);
|
||||
background: linear-gradient(90deg, rgba(233, 150, 122, 1) 35%, rgba(0, 0, 0, 0.5) 100%);
|
||||
}
|
||||
.plBtnBgc11 {
|
||||
background: rgb(233, 150, 122);
|
||||
background: linear-gradient(90deg, rgba(50, 50, 50, 0.5) 10%, rgba(233, 150, 122, 1) 100%);
|
||||
}
|
||||
.plBgc0 {
|
||||
background: rgb(0, 139, 139);
|
||||
background: linear-gradient(90deg, rgba(0, 139, 139, 1) 35%, rgba(0, 0, 0, 0.5) 100%);
|
||||
}
|
||||
.plBtnBgc0 {
|
||||
background: rgb(0, 139, 139);
|
||||
background: linear-gradient(90deg, rgba(50, 50, 50, 0.5) 10%, rgba(0, 139, 139, 1) 100%);
|
||||
}
|
||||
::v-deep .h-card .content {
|
||||
height: 80%;
|
||||
}
|
||||
|
||||
Loading…
x
Reference in New Issue
Block a user