382 lines
8.7 KiB
Vue
382 lines
8.7 KiB
Vue
<script>
|
|
import levitatedsphere from "@/components/levitatedsphere/levitatedsphere.vue"
|
|
export default {
|
|
name: "standardScheduleNewsHome",
|
|
data() {
|
|
return {
|
|
tabTitle: ["承包商列表", "厂区列表"],
|
|
current: 0,
|
|
projectObject: {
|
|
projectSurplusDayNum: 0,
|
|
projectTotalDayNum: 0,
|
|
projectTotalProgress: 0
|
|
},
|
|
tabList: [],
|
|
isShowAudit: false,
|
|
projectProgressShow: false
|
|
};
|
|
},
|
|
watch: {
|
|
current() {
|
|
this.getTabsList()
|
|
}
|
|
},
|
|
onLoad() {
|
|
this.getLength()
|
|
this.getTabsList()
|
|
this.getAuditMenu();
|
|
},
|
|
methods: {
|
|
// 去审批页面
|
|
toAuditPage() {
|
|
uni.navigateTo({
|
|
url: "./auditPage"
|
|
})
|
|
},
|
|
// 查询是否配置了进度审批的菜单
|
|
getAuditMenu() {
|
|
let userInfo = JSON.parse(uni.getStorageSync('userInfo'));
|
|
if (userInfo.menuAuthority && userInfo.menuAuthority.menuList) {
|
|
userInfo.menuAuthority.menuList.map(item => {
|
|
if (item.menuName == "进度审批") {
|
|
this.isShowAudit = true;
|
|
}
|
|
})
|
|
}
|
|
},
|
|
px(d) {
|
|
return uni.upx2px(d)
|
|
},
|
|
change(e) {
|
|
console.log(e.id)
|
|
if (this.current === 0) {
|
|
uni.navigateTo({
|
|
url: "./index?enterpriseId=" + e.id
|
|
})
|
|
} else {
|
|
uni.navigateTo({
|
|
url: "./index?qualityRegionId=" + e.id
|
|
})
|
|
}
|
|
},
|
|
getLength() {
|
|
let that = this
|
|
// 获取统计信息
|
|
this.sendRequest({
|
|
url: "xmgl/xzTaskProgress/countTaskProgress",
|
|
data: {
|
|
projectSn: uni.getStorageSync("dept"),
|
|
enterpriseId: uni.getStorageSync("company").companySn
|
|
},
|
|
method: "post",
|
|
success(res) {
|
|
console.log(res, "获取统计信息")
|
|
let {
|
|
code,
|
|
result
|
|
} = res;
|
|
if (code === 200) {
|
|
console.log(777888)
|
|
that.projectObject = result;
|
|
that.projectProgressShow = true;
|
|
}
|
|
}
|
|
})
|
|
},
|
|
//获取分包公司
|
|
getTabsList() {
|
|
let data = {
|
|
// enterpriseTypeId: this.checkType,
|
|
pageNo: 1,
|
|
pageSize: 999,
|
|
projectSn: uni.getStorageSync("dept"),
|
|
};
|
|
let url = ""
|
|
let that = this
|
|
if (this.current === 0) {
|
|
url = 'xmgl/projectEnterprise/list';
|
|
} else {
|
|
// url = 'xmgl/qualityRegion/list';
|
|
url = 'xmgl/qualityRegion/notTreeList'
|
|
}
|
|
this.sendRequest({
|
|
url,
|
|
method: 'post',
|
|
data: data,
|
|
success: (res) => {
|
|
if (res.code === 200) {
|
|
let responseData = "";
|
|
if (that.current === 0) {
|
|
responseData = res.result.records;
|
|
responseData.map(item => {
|
|
item.name = item.enterpriseName
|
|
})
|
|
} else {
|
|
responseData = res.result;
|
|
responseData.map(item => {
|
|
item.name = item.regionName
|
|
})
|
|
}
|
|
that.tabList = responseData
|
|
}
|
|
}
|
|
})
|
|
},
|
|
// getTabsList() {
|
|
// // 获取承包商和厂区列表
|
|
// let that = this;
|
|
// let url = ""
|
|
// if (this.current === 0) {
|
|
// url = 'xmgl/enterpriseInfo/selectHierarchyEnterpriseList';
|
|
// } else {
|
|
// url = 'xmgl/qualityRegion/list';
|
|
// }
|
|
// this.sendRequest({
|
|
// url,
|
|
// data: {
|
|
// projectSn: uni.getStorageSync("dept")
|
|
// },
|
|
// method: "post",
|
|
// success(res) {
|
|
// console.log(res, "获取承包商")
|
|
// let {
|
|
// code,
|
|
// result
|
|
// } = res;
|
|
// if (code === 200) {
|
|
// let responseData = result;
|
|
// if (that.current === 0) {
|
|
// responseData.map(item => {
|
|
// item.name = item.enterpriseName
|
|
// })
|
|
// } else {
|
|
// responseData.map(item => {
|
|
// item.name = item.regionName
|
|
// })
|
|
// }
|
|
// that.tabList = responseData
|
|
// }
|
|
// }
|
|
// })
|
|
// }
|
|
}
|
|
}
|
|
</script>
|
|
|
|
<template>
|
|
<view class="content">
|
|
<view class="big-progressr" v-if="projectProgressShow">
|
|
<u-circle-progress width="450" border-width="24" inactive-color="#fff" active-color="#2979ff"
|
|
:percent="projectObject.projectTotalProgress" :duration="100">
|
|
<view class="u-progress-content">
|
|
<view class="svgImage">
|
|
<svg :width="px(400)" :height="px(400)" xmlns="http://www.w3.org/2000/svg">
|
|
<defs>
|
|
<linearGradient id="grad1" x1="0%" y1="0%" x2="100%" y2="0%">
|
|
<stop offset="0%" style="stop-color:#72e7d1;stop-opacity:1" />
|
|
<stop offset="100%" style="stop-color:#4871e3;stop-opacity:1" />
|
|
</linearGradient>
|
|
</defs>
|
|
<circle :cx="px(198)" :cy="px(198)" :r="px(160)" stroke="url(#grad1)" stroke-width="3"
|
|
fill="none" stroke-dasharray="5,5" />
|
|
</svg>
|
|
</view>
|
|
<view class="u-progress-box">
|
|
<text class='value'>{{ projectObject.projectTotalProgress }}%</text>
|
|
<text class='title'>项目总进度</text>
|
|
</view>
|
|
</view>
|
|
</u-circle-progress>
|
|
</view>
|
|
<!-- <view class="boxs">
|
|
<view class="box">
|
|
<image src="@/static/Vector1.png"></image>
|
|
<view class="box-content">
|
|
<view class="box-title">项目剩余天数</view>
|
|
<view class="box-value v1">{{ projectObject.projectSurplusDayNum }}</view>
|
|
</view>
|
|
</view>
|
|
<view class="box">
|
|
<image src="@/static/Vector2.png"></image>
|
|
<view class="box-content">
|
|
<view class="box-title">项目总天数</view>
|
|
<view class="box-value v2">{{ projectObject.projectTotalDayNum }}</view>
|
|
</view>
|
|
</view>
|
|
</view> -->
|
|
|
|
<view class="tabs">
|
|
<view class="tabTitle">
|
|
<view class="title" v-for="(item,index) in tabTitle" :key="index" :class="{active:current===index}"
|
|
@click="current=index">{{
|
|
item
|
|
}}
|
|
</view>
|
|
</view>
|
|
<view class="tabContent" v-if="current == 1">
|
|
<liu-folding-panel :img1="require('@/static/Union.png')" :dataList="tabList"
|
|
@change="change"></liu-folding-panel>
|
|
<!-- 问题分类 -->
|
|
<!-- <tki-tree ref="issueTree" @confirm="(val)=>change(val)" idKey='id' :range="tabList" rangeKey="enterpriseName"
|
|
confirmColor="#4e8af7" /> -->
|
|
</view>
|
|
<view class="tabContent" v-else>
|
|
<liu-folding-panel :img1="require('@/static/Union.png')" :dataList="tabList"
|
|
@change="change"></liu-folding-panel>
|
|
<!-- <tki-tree ref="issueTree" @confirm="(val)=>change(val)" idKey='id' :range="tabList" rangeKey="regionName"
|
|
confirmColor="#4e8af7" /> -->
|
|
</view>
|
|
</view>
|
|
<view class="addProgess" @click="toAuditPage" v-if="isShowAudit">
|
|
进度审批
|
|
</view>
|
|
<levitatedsphere :x="100" :y="80"></levitatedsphere>
|
|
</view>
|
|
</template>
|
|
|
|
<style scoped lang="scss">
|
|
.content {
|
|
height: 100%;
|
|
padding: 30rpx 20rpx;
|
|
display: flex;
|
|
flex-direction: column;
|
|
|
|
.svgImage {
|
|
position: absolute;
|
|
left: -3rpx;
|
|
top: -3rpx;
|
|
}
|
|
|
|
.big-progressr {
|
|
width: 100%;
|
|
display: flex;
|
|
justify-content: center;
|
|
position: relative;
|
|
transform: rotate(180deg);
|
|
$offset: 30rpx;
|
|
|
|
.u-progress-content {
|
|
transform: rotate(180deg);
|
|
position: absolute;
|
|
left: $offset;
|
|
right: $offset;
|
|
top: $offset;
|
|
bottom: $offset;
|
|
border-radius: 50%;
|
|
padding: 70rpx;
|
|
box-shadow: 0 0 50rpx 0rpx rgba(114, 231, 209, .5);
|
|
|
|
|
|
.u-progress-box {
|
|
border-radius: 50%;
|
|
background-color: #fff;
|
|
width: 100%;
|
|
height: 100%;
|
|
box-shadow: 0 0 15rpx 0rpx #eee;
|
|
display: flex;
|
|
align-items: center;
|
|
justify-content: center;
|
|
flex-direction: column;
|
|
color: #3570FF;
|
|
|
|
.value {
|
|
font-size: 60rpx;
|
|
}
|
|
|
|
.title {
|
|
font-size: 30rpx;
|
|
}
|
|
}
|
|
}
|
|
}
|
|
|
|
.boxs {
|
|
position: relative;
|
|
margin-top: 30rpx;
|
|
z-index: 10;
|
|
display: flex;
|
|
justify-content: space-between;
|
|
|
|
image {
|
|
width: 80rpx;
|
|
height: 80rpx;
|
|
}
|
|
|
|
.box {
|
|
display: flex;
|
|
justify-content: space-between;
|
|
padding: 20rpx;
|
|
width: calc(50% - 15rpx);
|
|
box-shadow: 0 0 20rpx 1rpx rgba(99, 225, 214, .5);
|
|
border-radius: 12rpx;
|
|
align-items: center;
|
|
|
|
.box-content {
|
|
font-size: 25rpx;
|
|
text-align: right;
|
|
|
|
.box-title {}
|
|
|
|
.box-value {
|
|
font-size: 50rpx;
|
|
|
|
&.v1 {
|
|
color: #e15057;
|
|
}
|
|
|
|
&.v2 {
|
|
color: #e38a38;
|
|
}
|
|
}
|
|
}
|
|
}
|
|
}
|
|
|
|
.tabs {
|
|
margin-top: 80rpx;
|
|
position: relative;
|
|
z-index: 10;
|
|
|
|
.tabTitle {
|
|
display: flex;
|
|
align-items: end;
|
|
|
|
.title {
|
|
background-color: #f3f3f3;
|
|
flex: 1;
|
|
padding: 20rpx 0;
|
|
text-align: center;
|
|
border-radius: 12rpx 12rpx 0 0;
|
|
height: fit-content;
|
|
|
|
&.active {
|
|
color: #fff;
|
|
background-color: #698cf3;
|
|
padding: 30rpx 0;
|
|
}
|
|
}
|
|
}
|
|
|
|
.tabContent {
|
|
padding: 0 20rpx;
|
|
box-shadow: 0 6rpx 15rpx 0 #eee;
|
|
border-radius: 10rpx;
|
|
overflow: hidden;
|
|
margin-bottom: 30rpx;
|
|
}
|
|
}
|
|
}
|
|
|
|
.addProgess {
|
|
width: 70%;
|
|
background: #5181f6;
|
|
text-align: center;
|
|
margin: 0 auto;
|
|
margin-top: auto;
|
|
height: 80rpx;
|
|
color: #fff;
|
|
border-radius: 40rpx;
|
|
line-height: 80rpx;
|
|
font-size: 28rpx;
|
|
}
|
|
</style> |