706 lines
16 KiB
Vue
706 lines
16 KiB
Vue
<template>
|
|
<view class="container">
|
|
<!-- <view class="">
|
|
<view class="container_title">
|
|
首件样板
|
|
</view>
|
|
<view class="uni-margin-wrap">
|
|
<swiper class="swiper" circular :indicator-dots="false" autoplay :interval="2000" :duration="500">
|
|
<swiper-item v-for="item in swiperList" :key="item.id">
|
|
<image class="swiperIcon" :src="'/static/bthgIcon/'+item.imgUrl+'.jpg'"></image>
|
|
<image class="swiperIcon" @click="previewImage(item.image[0])" :src="item.image[0].url"></image>
|
|
<view class="float-window">
|
|
<view class="title" :title="item.title">{{ item.title }}</view>
|
|
<view style="margin-right: 3%">{{ item.createDate }}</view>
|
|
</view>
|
|
</swiper-item>
|
|
</swiper>
|
|
<view v-if="swiperList.length == 0">
|
|
<view class="bt_noData">
|
|
<img src="/static/bthgIcon/noData.png" alt="" />
|
|
<p>暂无数据</p>
|
|
</view>
|
|
</view>
|
|
</view>
|
|
</view> -->
|
|
<view class="container_special">
|
|
<view class="construction_header">
|
|
<view class="container_title">
|
|
文明施工
|
|
</view>
|
|
<view class="right-top_header">
|
|
<view class="right-top_header_left">
|
|
<view @click="onSpecialClick(item)"
|
|
:class="{ active: specialInfo.id == item.id }"
|
|
v-for="item in specialList" :key="item.id">
|
|
{{ item.specialName }}
|
|
</view>
|
|
</view>
|
|
</view>
|
|
</view>
|
|
<view class="minCharts">
|
|
<view class="" v-if="columnarChart1.textDataX.length != 0">
|
|
<!-- <u-charts canvas-id="columnarChart1" chartType="column" :opts="columnarChart1" ref="columnarChart1"
|
|
:cWidth="cWidth" :cHeight="cHeight" :legends="false" /> -->
|
|
<qiun-data-charts type="column" :cWidth="cWidth" :cHeight="cHeight" :ontouch="true" :opts="opts"
|
|
:chartData="columnarChart1" />
|
|
</view>
|
|
<view class="no_data" v-if="columnarChart1.textDataX.length == 0">
|
|
<image src="/static/bthgIcon/noData.png"></image>
|
|
<view>暂无数据</view>
|
|
</view>
|
|
</view>
|
|
</view>
|
|
|
|
<view class="construction_box">
|
|
<view class="construction_header">
|
|
<view class="container_title">
|
|
承包商考核
|
|
</view>
|
|
<view class="right-top_header">
|
|
<view class="right-top_header_left">
|
|
<view @click="onContractorClick(item)"
|
|
:class="{ active: contractorAssessmentInfo.id == item.id }"
|
|
v-for="item in contractorAssessmentList" :key="item.id">
|
|
{{ item.contractorAssessmentName }}
|
|
</view>
|
|
</view>
|
|
</view>
|
|
</view>
|
|
<view class="construction_main">
|
|
<!-- <swiper class="swiper" circular :indicator-dots="false" :autoplay="false" :interval="2000"
|
|
:duration="500">
|
|
<swiper-item @touchmove.stop="() => true">
|
|
<view class="card_carousel">
|
|
<view>
|
|
<image class="swiperIcon" src="/static/bthgIcon/contractor_icon1.png"></image>
|
|
</view>
|
|
<view class="">
|
|
<view>监理单位</view>
|
|
<view>
|
|
{{ rankEnterpriseInfo.supervisor && rankEnterpriseInfo.supervisor.enterpriseName }}
|
|
</view>
|
|
</view>
|
|
</view>
|
|
</swiper-item>
|
|
<swiper-item @touchmove.stop="() => true">
|
|
<view class="card_carousel">
|
|
<view>
|
|
<image class="swiperIcon" src="/static/bthgIcon/contractor_icon1.png"></image>
|
|
</view>
|
|
<view class="">
|
|
<view>施工单位</view>
|
|
<view>
|
|
{{ rankEnterpriseInfo.construction && rankEnterpriseInfo.construction.enterpriseName }}
|
|
</view>
|
|
</view>
|
|
</view>
|
|
</swiper-item>
|
|
<swiper-item @touchmove.stop="() => true">
|
|
<view class="card_carousel">
|
|
<view>
|
|
<image class="swiperIcon" src="/static/bthgIcon/contractor_icon1.png"></image>
|
|
</view>
|
|
<view class="">
|
|
<view>EPC</view>
|
|
<view>{{ rankEnterpriseInfo.epc && rankEnterpriseInfo.epc.enterpriseName }}
|
|
</view>
|
|
</view>
|
|
</view>
|
|
</swiper-item>
|
|
</swiper> -->
|
|
<view class="swiper_my">
|
|
<view class="uni-swiper-item_my" @touchmove.stop="() => true">
|
|
<view class="card_carousel">
|
|
<view>
|
|
<image class="swiperIcon" src="/static/bthgIcon/contractor_icon1.png"></image>
|
|
</view>
|
|
<view class="">
|
|
<view>监理单位</view>
|
|
<view>
|
|
{{ rankEnterpriseInfo.supervisor && rankEnterpriseInfo.supervisor.enterpriseName }}
|
|
</view>
|
|
</view>
|
|
</view>
|
|
</view>
|
|
<view class="uni-swiper-item_my" @touchmove.stop="() => true">
|
|
<view class="card_carousel">
|
|
<view>
|
|
<image class="swiperIcon" src="/static/bthgIcon/contractor_icon1.png"></image>
|
|
</view>
|
|
<view class="">
|
|
<view>施工单位</view>
|
|
<view>
|
|
{{ rankEnterpriseInfo.construction && rankEnterpriseInfo.construction.enterpriseName }}
|
|
</view>
|
|
</view>
|
|
</view>
|
|
</view>
|
|
<view class="uni-swiper-item_my" @touchmove.stop="() => true">
|
|
<view class="card_carousel">
|
|
<view>
|
|
<image class="swiperIcon" src="/static/bthgIcon/contractor_icon1.png"></image>
|
|
</view>
|
|
<view class="">
|
|
<view>EPC</view>
|
|
<view>{{ rankEnterpriseInfo.epc && rankEnterpriseInfo.epc.enterpriseName }}
|
|
</view>
|
|
</view>
|
|
</view>
|
|
</view>
|
|
</view>
|
|
</view>
|
|
</view>
|
|
</view>
|
|
</template>
|
|
|
|
<script>
|
|
import uCharts from '@/components/u-charts/component.vue';
|
|
import {
|
|
isJSON,
|
|
pxToRpx
|
|
} from '@/utils/tool.js'
|
|
export default {
|
|
components: {
|
|
uCharts,
|
|
},
|
|
data() {
|
|
return {
|
|
projectSn: "",
|
|
cWidth: 0,
|
|
swiperList: [
|
|
// {
|
|
// id: 1,
|
|
// imgUrl: "bg1"
|
|
// }, {
|
|
// id: 2,
|
|
// imgUrl: "bg2"
|
|
// }, {
|
|
// id: 3,
|
|
// imgUrl: "bg3"
|
|
// }, {
|
|
// id: 4,
|
|
// imgUrl: "bg4"
|
|
// },
|
|
],
|
|
contractorAssessmentList: [{
|
|
id: 1,
|
|
contractorAssessmentName: '本月'
|
|
},
|
|
{
|
|
id: 2,
|
|
contractorAssessmentName: '上月'
|
|
}
|
|
],
|
|
contractorAssessmentInfo: {
|
|
id: 1
|
|
},
|
|
rankEnterpriseInfo: {},
|
|
cWidth: 0,
|
|
cHeight: 0,
|
|
columnarChart1: {
|
|
categories: [],
|
|
textDataX: [],
|
|
series: [{
|
|
// name: "温度",
|
|
data: []
|
|
}]
|
|
},
|
|
opts: {},
|
|
specialList: [{
|
|
id: 1,
|
|
specialName: '近一周'
|
|
},
|
|
{
|
|
id: 2,
|
|
specialName: '最近30天'
|
|
}
|
|
],
|
|
specialInfo: {
|
|
id: 1
|
|
},
|
|
}
|
|
},
|
|
created() {
|
|
const that = this;
|
|
uni.getSystemInfo({
|
|
success: function(res) {
|
|
that.cWidth = res.windowWidth - 25 - 24;
|
|
}
|
|
});
|
|
},
|
|
mounted() {
|
|
const that = this;
|
|
uni.getSystemInfo({
|
|
success: function(res) {
|
|
console.log(res.windowWidth);
|
|
console.log(11111, res.windowHeight);
|
|
that.cWidth = res.windowWidth - uni.upx2px(50) - uni.upx2px(44) - uni.upx2px(34);
|
|
that.cHeight = uni.upx2px(345 + 14)
|
|
}
|
|
});
|
|
this.projectSn = JSON.parse(uni.getStorageSync('projectDetail')).projectSn;
|
|
this.getHomePageRankEnterprise();
|
|
this.getWorkList();
|
|
this.getHomePageCountSceneExposeSpecial();
|
|
},
|
|
onShow() {
|
|
|
|
},
|
|
onLoad(options) {
|
|
|
|
},
|
|
methods: {
|
|
onSpecialClick(row) {
|
|
this.specialInfo.id = row.id;
|
|
this.getHomePageCountSceneExposeSpecial();
|
|
},
|
|
getHomePageCountSceneExposeSpecial() {
|
|
const that = this;
|
|
let data = {
|
|
projectSn: this.projectSn,
|
|
timeType: this.specialInfo.id
|
|
};
|
|
console.log(this.projectSn)
|
|
this.sendRequest({
|
|
url: 'xmgl/homePage/countSceneExposeSpecial',
|
|
data,
|
|
method: 'get',
|
|
success(res) {
|
|
if (res.code == 200) {
|
|
const dataX = res.result.map(item => item.x);
|
|
const dataY = res.result.map(item => Number(item.y));
|
|
// that.columnarChart1.textDataTitle = '%';
|
|
// that.columnarChart1.textDataX = res.result.map(item => item.deviceUnitName);
|
|
// that.columnarChart1.categories = dataX
|
|
// that.columnarChart1.series = [{
|
|
// // name: "温度",
|
|
// data: dataY
|
|
// }]
|
|
that.columnarChart1 = {
|
|
textDataTitle: '%',
|
|
textDataX: res.result.map(item => item.deviceUnitName),
|
|
categories: dataX,
|
|
series: [{
|
|
// name: "温度",
|
|
data: dataY
|
|
}]
|
|
}
|
|
|
|
that.opts = {
|
|
color: [
|
|
"#5181F6",
|
|
"#00DBB6",
|
|
"#F67F51",
|
|
"#FF515A",
|
|
"#8B5CFF",
|
|
"#00CA69",
|
|
],
|
|
padding: [uni.upx2px(30), 0, uni.upx2px(20), uni.upx2px(20)],
|
|
enableScroll: true,
|
|
animation: false,
|
|
duration: 0,
|
|
width: that.cWidth - uni.upx2px(60),
|
|
height: that.cHeight,
|
|
fontSize: uni.upx2px(22),
|
|
legend: {
|
|
show: false
|
|
},
|
|
xAxis: {
|
|
disableGrid: true,
|
|
itemCount: 4,
|
|
labelCount: that.columnarChart1.categories.length,
|
|
fontSize: uni.upx2px(22),
|
|
lineHeight: uni.upx2px(40),
|
|
format: "Xdemo",
|
|
// scrollShow: true,
|
|
},
|
|
yAxis: {
|
|
format: (val) => {
|
|
console.log(111, val);
|
|
if ((val + "").indexOf(".") != -1) {
|
|
return val.toFixed(0); //保留小数后1位
|
|
} else {
|
|
return val;
|
|
}
|
|
},
|
|
},
|
|
extra: {
|
|
column: {
|
|
type: "group",
|
|
width: uni.upx2px(28),
|
|
},
|
|
}
|
|
}
|
|
// that.$nextTick(() => {
|
|
// that.$refs.columnarChart1.changeData('columnarChart1', that.columnarChart1)
|
|
// })
|
|
}
|
|
}
|
|
})
|
|
},
|
|
//预览图片
|
|
previewImage(row) {
|
|
const url = row.url.includes('http://') ? row.url : url_config + 'image/' + row.url
|
|
uni.previewImage({
|
|
urls: [url]
|
|
})
|
|
},
|
|
getWorkList() {
|
|
const that = this;
|
|
let data = {
|
|
pageNo: 1,
|
|
pageSize: 10,
|
|
projectSn: this.projectSn,
|
|
type: 11,
|
|
}
|
|
this.sendRequest({
|
|
url: 'xmgl/partyBuildingGuidance/page',
|
|
method: 'get',
|
|
data: data,
|
|
success: res => {
|
|
if (res.code == 200) {
|
|
console.log("workList======================", res)
|
|
// this.listData = res.result.records
|
|
// this.workList=this.workList.concat(res.result)
|
|
const newResult = res.result.records.map(item => {
|
|
return {
|
|
...item,
|
|
image: isJSON(item.file) ? JSON
|
|
.parse(item.file) : [],
|
|
}
|
|
})
|
|
that.swiperList = newResult;
|
|
}
|
|
}
|
|
})
|
|
},
|
|
onContractorClick(row) {
|
|
this.contractorAssessmentInfo.id = row.id;
|
|
this.getHomePageRankEnterprise();
|
|
},
|
|
getHomePageRankEnterprise() {
|
|
const that = this;
|
|
let data = {
|
|
projectSn: this.projectSn,
|
|
type: this.contractorAssessmentInfo.id
|
|
};
|
|
console.log(this.projectSn)
|
|
this.sendRequest({
|
|
url: 'xmgl/homePage/rankEnterprise',
|
|
data,
|
|
method: 'post',
|
|
success(res) {
|
|
if (res.code == 200) {
|
|
that.rankEnterpriseInfo = res.result;
|
|
console.log('承包商考核排名', res);
|
|
}
|
|
}
|
|
})
|
|
|
|
},
|
|
},
|
|
}
|
|
</script>
|
|
|
|
<style lang="scss" scoped>
|
|
.no_data {
|
|
position: absolute;
|
|
top: 50%;
|
|
left: 50%;
|
|
transform: translate(-50%, -50%);
|
|
text-align: center;
|
|
color: rgba(0, 0, 0, 0.5);
|
|
font-size: 28rpx;
|
|
|
|
uni-image {
|
|
width: 300rpx;
|
|
height: 300rpx;
|
|
display: block;
|
|
margin: 0 auto;
|
|
}
|
|
}
|
|
|
|
.bt_noData {
|
|
position: absolute;
|
|
left: 50%;
|
|
top: 50%;
|
|
transform: translate(-50%, -50%);
|
|
font-size: 0.875rem;
|
|
color: #252c47;
|
|
text-align: center;
|
|
|
|
>img {
|
|
width: 280rpx;
|
|
height: 280rpx;
|
|
}
|
|
|
|
>p {
|
|
margin: 0;
|
|
}
|
|
}
|
|
|
|
.container_special {
|
|
position: relative;
|
|
|
|
.minCharts {
|
|
width: calc(100%);
|
|
// min-height: 345px;
|
|
min-height: calc(400rpx);
|
|
background: #FFFFFF;
|
|
box-shadow: 0px 10rpx 20rpx 0px rgba(46, 91, 255, 0.2);
|
|
border-radius: 8rpx;
|
|
border: 2rpx solid rgba(102, 111, 232, 0.08);
|
|
padding: 24rpx;
|
|
margin-top: 20rpx;
|
|
position: relative;
|
|
}
|
|
|
|
.construction_header {
|
|
display: flex;
|
|
justify-content: space-between;
|
|
}
|
|
|
|
.right-top_header {
|
|
display: flex;
|
|
align-items: center;
|
|
justify-content: space-between;
|
|
|
|
.right-top_header_left {
|
|
display: flex;
|
|
|
|
>view {
|
|
border: 1px solid #0056A8;
|
|
padding: 6rpx 12rpx;
|
|
font-size: 24rpx;
|
|
color: #0056a8;
|
|
cursor: pointer;
|
|
position: relative;
|
|
border-radius: 6rpx;
|
|
}
|
|
|
|
>view:not(:first-child) {
|
|
margin-left: 20rpx;
|
|
}
|
|
|
|
>view.active {
|
|
background-color: #2B8DF3;
|
|
border-color: #2B8DF3;
|
|
color: white;
|
|
}
|
|
}
|
|
}
|
|
}
|
|
|
|
.container {
|
|
margin-top: 24rpx;
|
|
padding: 0 32rpx 20rpx;
|
|
|
|
.construction_main {
|
|
|
|
.swiper_my {
|
|
height: 192rpx;
|
|
margin-top: 60rpx;
|
|
margin-bottom: 20rpx;
|
|
display: flex;
|
|
justify-content: space-between;
|
|
}
|
|
|
|
.uni-swiper-item_my {
|
|
width: 196rpx !important;
|
|
height: 192rpx !important;
|
|
}
|
|
|
|
.uni-swiper-item_my:nth-child(1) {
|
|
// transform: translateX(249.5rpx) scale(1) !important;
|
|
|
|
.card_carousel {
|
|
>view:first-child {
|
|
background-image: url(../../../static/bthgIcon/contractor_bg2.png);
|
|
}
|
|
}
|
|
}
|
|
|
|
.uni-swiper-item_my:nth-child(2) {
|
|
// transform: translateX(454.415rpx) scale(0.83) !important;
|
|
// transform: translateX(474.415rpx) scale(1) !important;
|
|
|
|
.card_carousel {
|
|
>view:first-child {
|
|
background-image: url(../../../static/bthgIcon/contractor_bg3.png);
|
|
}
|
|
}
|
|
}
|
|
|
|
.uni-swiper-item_my:nth-child(3) {
|
|
// transform: translateX(25.415rpx) scale(0.83) !important;
|
|
// transform: translateX(25.415rpx) scale(1) !important;
|
|
|
|
.card_carousel {
|
|
>view:first-child {
|
|
background-image: url(../../../static/bthgIcon/contractor_bg1.png);
|
|
}
|
|
}
|
|
}
|
|
|
|
.card_carousel {
|
|
// width: 14.684vh;
|
|
// height: 14.384vh;
|
|
width: 196rpx;
|
|
height: 192rpx;
|
|
// background: #e9f2ff;
|
|
border-radius: 16rpx;
|
|
|
|
>view:first-child {
|
|
// background-image: url(~@/assets/images/bthgIcon/contractor_bg1.png);
|
|
background-repeat: no-repeat;
|
|
background-size: 100% 100%;
|
|
height: 88rpx;
|
|
border-radius: 16rpx;
|
|
|
|
>image {
|
|
width: 42rpx;
|
|
height: 45rpx;
|
|
}
|
|
}
|
|
|
|
|
|
>view:last-child {
|
|
display: flex;
|
|
flex-direction: column;
|
|
justify-content: center;
|
|
align-items: center;
|
|
|
|
>view {
|
|
margin-top: 10rpx;
|
|
}
|
|
|
|
>view:first-child {
|
|
font-weight: 800;
|
|
font-size: 28rpx;
|
|
color: #171717;
|
|
}
|
|
|
|
>view:last-child {
|
|
font-weight: 800;
|
|
font-size: 24rpx;
|
|
color: #444444;
|
|
padding: 0 24rpx;
|
|
word-break: break-all;
|
|
text-overflow: ellipsis;
|
|
display: -webkit-box;
|
|
-webkit-box-orient: vertical;
|
|
-webkit-line-clamp: 1;
|
|
overflow: hidden;
|
|
}
|
|
}
|
|
}
|
|
}
|
|
|
|
|
|
.uni-margin-wrap {
|
|
// height: 230rpx;
|
|
box-shadow: 0 10rpx 20rpx 0 rgba(46, 91, 255, 0.2);
|
|
border-radius: 16rpx;
|
|
border: 8rpx solid #E9F2FF;
|
|
position: relative;
|
|
|
|
.swiper {
|
|
height: 330rpx;
|
|
position: relative;
|
|
|
|
.swiperIcon {
|
|
width: 100%;
|
|
height: 100%;
|
|
}
|
|
|
|
.float-window {
|
|
position: absolute;
|
|
bottom: 0%;
|
|
width: 100%;
|
|
padding: 2% 0%;
|
|
color: #ffffff;
|
|
font-size: 24rpx;
|
|
display: flex;
|
|
align-items: center;
|
|
justify-content: space-between;
|
|
background: rgba(5, 18, 32, 0.7);
|
|
|
|
.title {
|
|
margin-left: 3%;
|
|
width: 60%;
|
|
white-space: nowrap; //单行
|
|
overflow: hidden;
|
|
text-overflow: ellipsis;
|
|
}
|
|
}
|
|
}
|
|
}
|
|
|
|
.construction_box {
|
|
width: calc(100%);
|
|
// background: #FFFFFF;
|
|
// box-shadow: 0px 10rpx 20rpx 0px rgba(46, 91, 255, 0.2);
|
|
border-radius: 8rpx;
|
|
// border: 2rpx solid rgba(102, 111, 232, 0.08);
|
|
// padding: 24rpx;
|
|
margin-top: 36rpx;
|
|
|
|
.construction_header {
|
|
display: flex;
|
|
justify-content: space-between;
|
|
}
|
|
}
|
|
|
|
.right-top_header {
|
|
display: flex;
|
|
align-items: center;
|
|
justify-content: space-between;
|
|
|
|
.right-top_header_left {
|
|
display: flex;
|
|
|
|
>view {
|
|
// border: 1px solid #0056a8;
|
|
background-color: #FFFFFF;
|
|
padding: 6rpx 12rpx;
|
|
font-size: 24rpx;
|
|
color: #0056a8;
|
|
cursor: pointer;
|
|
position: relative;
|
|
border-radius: 6rpx;
|
|
}
|
|
|
|
>view:not(:first-child) {
|
|
margin-left: 20rpx;
|
|
}
|
|
|
|
>view.active {
|
|
background-color: #2B8DF3;
|
|
color: white;
|
|
}
|
|
}
|
|
}
|
|
}
|
|
|
|
.container_title {
|
|
font-size: 30rpx;
|
|
font-weight: bold;
|
|
position: relative;
|
|
margin-left: 20rpx;
|
|
margin-bottom: 16rpx;
|
|
margin-top: 32rpx;
|
|
color: #2D8EF3;
|
|
}
|
|
|
|
.container_title::after {
|
|
content: '';
|
|
position: absolute;
|
|
left: -20rpx;
|
|
top: 50%;
|
|
width: 4rpx;
|
|
height: 80%;
|
|
transform: translateY(-50%);
|
|
background-color: #2D8EF3;
|
|
}
|
|
</style> |