<template>
<div class="s-main">
<div id="mapContainer"></div>
<left-bar v-if="statisticsData && findScore && findRisk" :leftBarData="statisticsData" class="left-bar"></left-bar>
<div class="center">
<div class="button-con">
<div @click="fxHandler" class="fengxian" :class="active === 3 ? 'yinying' : ''">
<span class="num num2">{{ statisticsData.riskTeamCount }}</span
><span class="txt">xxxx</span>
</div>
<div @click="zjHandler" class="zaijian" :class="active === 2 ? 'yinying' : ''">
<span class="num">{{ statisticsData.constructionProjectCount }}</span
><span class="txt">xxxxxxx</span>
</div>
<div @click="qbHandler" class="quanbu" :class="active === 1 ? 'yinying' : ''">
<span class="num">{{ statisticsData.allProjectCount }}</span
><span class="txt">xxxxx</span>
</div>
</div>
</div>
<rightBar v-if="statisticsData" :leftBarData="statisticsData" class="right-bar"></rightBar>
<leftBottom v-if="findScore" :leftBarData="findScore" class="left-bottom"></leftBottom>
<centertu v-if="statisticsData" :leftBarData="statisticsData" class="centertu"></centertu>
<RightBottom v-if="findRisk" class="right-bottom" :leftBarData="findRisk"></RightBottom>
<!-- 地图弹窗 -->
<div ref="infoWindow" class="infoWindow">
<div class="container" v-for="(item, index) in singleData" :key="index">
<div class="map-item">
<img class="map-icon" src="@/assets/images/statistics/map_2.png" alt="" srcset="" />
<span>{{ item.projectName }}</span>
</div>
<div class="map-item map-item2">
<img class="map-icon" src="@/assets/images/statistics/map_1.png" alt="" srcset="" />
<span>{{ item.companyName }}</span>
</div>
<div class="projectCondition99" v-if="item.projectCondition == '99'">
<span class="projectCondition99-name">{{ item.name }}</span
><span class="projectCondition99-clues">{{ item.clues }}</span>
</div>
</div>
</div>
<el-dialog title="企业信息" :visible.sync="dialog" width="1200px" append-to-body :close-on-click-modal="false">
<transition name="fade">
<company-detail v-if="dialog" :row="row">
<el-button class="close" type="primary" @click="dialog = false" size="middle" style="margin-top:30px">关闭</el-button>
</company-detail>
</transition>
</el-dialog>
<el-dialog title="个人信息" :visible.sync="dialog2" width="1200px" append-to-body :close-on-click-modal="false">
<transition name="fade">
<labour-info :row="row" v-if="dialog2">
<el-button class="close" type="primary" size="middle" @click="dialog2 = false">关闭</el-button>
</labour-info>
</transition>
</el-dialog>
</div>
</template>
<script>
import labourInfo from '../info/labourInfo.vue'
import companyDetail from '@/pages/company/companyDetail.vue'
import leftBar from './component/leftBar.vue'
import rightBar from './component/rightBar.vue'
import leftBottom from './component/leftBottom.vue'
import centertu from './component/centertu.vue'
import { tiantai } from './component/tiantai'
import RightBottom from './component/rightBottom.vue'
import { teamLeader } from '@/util/api'
export default {
components: { labourInfo, companyDetail, leftBar, rightBar, leftBottom, centertu, RightBottom },
data() {
return {
row: {},
dialog: false,
dialog2: false,
map: {},
tjArr: [],
leftBarData: [1, 2, 3, 4],
active: 1,
statisticsData: null,
findScore: null,
findScoreNum: 0,
findRisk: null,
findRiskNum: 0,
findAllProjectData: null,
singleData: [],
infoWindow: null,
marker: null,
markerArray: [],
findRiskTeamData: null,
extData2: 0,
closeMarker: null,
}
},
async created() {
this.init()
this.getFindScoreRecords()
this.getFindRiskRecords()
},
async mounted() {
await this.getFindAllProject()
this.createMap()
// eslint-disable-next-line no-undef
this.addPolygon(tiantai)
},
methods: {
closeView() {
console.log('bbbb')
this.infoWindow.close()
},
// GetCompanyProjectInfo: Project.GetCompanyProjectInfo,
async qbHandler() {
this.active = 1
this.map.remove(this.markerArray)
await this.getFindAllProject()
this.addMarkers()
},
async zjHandler() {
this.active = 2
this.infoWindow.close()
await this.getFindConstructionProject()
this.map.remove(this.markerArray)
this.addMarkers()
// this.createMap()
},
async fxHandler() {
this.active = 3
this.infoWindow.close()
await this.getFindRiskTeam()
this.map.remove(this.markerArray)
this.addMarkers()
},
async getFindAllProject() {
console.log('mmmm')
let res = await teamLeader.findAllProject()
if (res) {
this.findAllProjectData = res
}
},
async getFindRiskTeam() {
let res = await teamLeader.findRiskTeam()
if (res) {
this.findAllProjectData = res
}
},
async getFindConstructionProject() {
console.log('mmmm')
let res = await teamLeader.findConstructionProject()
if (res) {
this.findAllProjectData = res
}
},
async init() {
let res = await teamLeader.getTianTaiStatistics({
provinceCode: 330000,
cityCode: 331000,
countyCode: 331023,
})
if (res) {
this.statisticsData = res
this.tjArr = [res.teamLeaderCount, res.workerCount, this.findScoreNum, this.frDataNum]
this.statisticsData.tjArr = this.tjArr
}
console.log(res)
},
// 用工信息反馈
async getFindScoreRecords() {
let fsData = await teamLeader.findScoreRecords(
{
provinceCode: 330000,
cityCode: 331000,
countyCode: 331023,
},
{
PageIndex: 1,
PageSize: 20,
}
)
if (fsData) {
console.log('fs', fsData)
this.findScore = fsData
this.findScoreNum = fsData.page?.total || 0
this.tjArr[3] = this.findScoreNum
}
},
// findRiskRecords班组风险
async getFindRiskRecords() {
let frData = await teamLeader.findRiskRecords(
{
provinceCode: 330000,
cityCode: 331000,
countyCode: 331023,
},
{
PageIndex: 1,
PageSize: 20,
}
)
if (frData) {
this.findRisk = frData
this.findRiskNum = frData.page?.total || 0
this.tjArr[2] = this.findRiskNum
console.log('this.findRiskNum', this.findRiskNum, 'frData.page', frData.page)
// this.statisticsData['tjArr'] = this.tjArr
}
},
// 添加地图
async createMap() {
this.markerArray = []
// const imgss = require('src/assets/images/statistics/map_icon_2.png')
// eslint-disable-next-line no-undef
this.map = new window.AMap['Map']('mapContainer', {
zoom: 9.6, //设置地图的缩放级别
zooms: [8, 20], //设置地图的缩放级别区间
center: [120.9966, 28.97], //设置地图中心点坐标
features: ['road', 'point'], //设置地图的底图元素,缺少则显示全部元素,bg区域面、point兴趣点、road道路及道路标注、building建筑物
})
this.map.on('click', this.closeView)
// await this.getFindAllProject()
this.addMarkers()
},
addMarkers() {
this.findAllProjectData.map((item) => {
let img = null,
awidth = 30,
aheight = 40
this.infoWindow = new window.AMap.InfoWindow({
isCustom: true, //使用自定义窗体
content: this.$refs.infoWindow,
})
// item.cidF = '6666666667'
if (item.projectCondition == '3') {
img = require('@/assets/images/statistics/map_icon_2.png')
} else if (item.projectCondition == '99') {
img = require('@/assets/images/statistics/map_icon_3.png')
awidth = 40
aheight = 40
} else {
img = require('@/assets/images/statistics/map_icon_1.png')
}
let icon = new window.AMap.Icon({
image: img, // Icon的图像
size: new window.AMap.Size(awidth, aheight),
imageSize: new window.AMap.Size(awidth, aheight), // 根据所设置的大小拉伸或压缩图片
})
this.marker = new window.AMap.Marker({
position: [item.lng, item.lat],
map: this.map,
icon: icon,
extData: item.pidF,
offset: new window.AMap.Pixel(-12, -25),
})
this.markerArray.push(this.marker)
this.marker.setMap(this.map)
this.marker.setTitle(item.projectName)
this.marker.on('click', (e) => {
if (e.target._opts.extData === item.pidF) {
this.singleData = []
this.singleData.push(item)
this.row = item
this.extData2 = item.projectCondition
}
this.infoWindow.open(this.map, e.lnglat)
})
this.infoWindow.on('click', (e) => {
// e.target.getExtData() === item.pidF
console.log('e.target', e.target._opts.extData2)
if (this.extData2 == '99') {
this.dialog2 = true
} else {
this.dialog = true
}
})
// this.marker.on('mouseout ', (e) => {
// console.log('eeee', e)
// this.infoWindow.close()
// })
this.map.add(this.marker)
// this.marker.setMap(this.map)
})
},
close() {
this.dialog = false
},
addPolygon(data) {
let that = this
let polygon = new window.AMap.Polygon({
path: data,
fillColor: '#ccebc5',
strokeOpacity: 1,
fillOpacity: 0.5,
strokeColor: '#2b8cbe',
strokeWeight: 1,
strokeStyle: 'dashed',
strokeDasharray: [5, 5],
})
// polygon.on('mouseover', () => {
// polygon.setOptions({
// fillOpacity: 0.7,
// fillColor: '#7bccc4',
// })
// })
polygon.on('click', () => {
this.infoWindow.close()
// polygon.setOptions({
// fillOpacity: 0.5,
// fillColor: '#ccebc5',
// })
})
that.map.add(polygon)
},
},
}
</script>
<style scoped lang="scss">
@import './component/var.scss';
// 滚动条隐藏
::-webkit-scrollbar-thumb {
display: none;
}
.infoWindow {
cursor: pointer;
background: #fff;
padding: 15px;
font-size: 12px;
.container {
display: flex;
flex-direction: column;
.projectCondition99 {
display: flex;
margin-top: 10px;
align-items: center;
.projectCondition99-name {
margin-left: 10px;
font-weight: 600;
}
.projectCondition99-clues {
padding: 4px;
border: 1px solid #f8f3c5;
color: #fee515;
margin-left: 10px;
}
}
}
.map-item {
display: flex;
align-items: center;
}
.map-item2 {
margin-top: 5px;
color: #1d50ff;
}
.map-icon {
display: flex;
width: 18px;
height: 18px;
margin-right: 5px;
}
}
::v-deep .amap-logo {
display: none !important;
}
::v-deep .amap-copyright {
display: none !important;
}
.s-main {
// font-family: 'PilcrowIconsMedium', sans-serif;
font-size: 20px;
padding: 0 !important;
position: relative;
overflow: scroll;
}
#mapContainer {
width: 100%;
height: 830px;
}
.left-bar {
font-family: 'PilcrowIconsMedium', sans-serif;
border-radius: 10px;
position: absolute;
top: 0;
left: 0;
width: 420px;
height: $top-height;
background: $bgc_rgba;
}
.right-bar {
border-radius: 10px;
position: absolute;
top: 0;
right: 0;
width: 420px;
height: $top-height;
background: $bgc_rgba;
}
.left-bottom {
border-radius: 10px;
background: $bgc_rgba;
width: 420px;
position: absolute;
top: $top;
left: 0;
height: $height2;
font-family: 'PingFangSC-Regular', 'Microsoft YaHei';
}
.center {
border-radius: 10px;
background: transparent;
// width: calc(100% - 880px);
position: absolute;
top: 0;
right: 450px;
height: 70px;
display: flex;
justify-content: center;
.button-con {
flex-direction: column;
width: 56px;
display: flex;
justify-content: space-between;
margin-top: 10px;
// font-family: 'PilcrowIconsMedium', sans-serif;
}
.quanbu,
.zaijian,
.fengxian {
// border: 5px solid #fff;
padding: 5px;
cursor: pointer;
width: 56px;
height: 70px;
background: rgba(255, 255, 255, 0.7);
border-radius: 5px;
display: flex;
flex-direction: column;
justify-content: center;
align-items: center;
text-align: center;
margin-bottom: 10px;
box-shadow: 0px 3px 7px 0px rgba(117, 146, 189, 0.5);
}
.num {
text-align: center;
font-size: 20px;
color: #1172ff;
}
.num2 {
color: #ff692a;
}
.txt {
margin-top: 1px;
font-size: 12px;
}
.yinying {
color: #fff !important;
background-color: #1172ff;
box-shadow: 0px 3px 3px 3px rgba(117, 146, 189, 0.9);
.num,
.num2,
.txt {
color: #fff;
}
}
}
.centertu {
border-radius: 10px;
background: $bgc_rgba;
width: calc(100% - 880px);
position: absolute;
top: $top;
left: 440px;
height: $height2;
font-family: 'PingFangSC-Regular', 'Microsoft YaHei';
}
.right-bottom {
border-radius: 10px;
background: $bgc_rgba;
width: 420px;
position: absolute;
top: $top;
right: 0;
height: $height2;
font-family: 'PingFangSC-Regular', 'Microsoft YaHei';
}
</style>
以上代码仅供参考