1830 lines
54 KiB
Vue
1830 lines
54 KiB
Vue
<template>
|
||
<div class="fullHeight">
|
||
<div v-if="company == 'henan' " id="map" class="fullHeight" style="width:100%;height: 100%"></div>
|
||
<vue-scroll v-else>
|
||
<div class="top blockBox">
|
||
<!-- 人员概况 -->
|
||
<div class="whiteBlock">
|
||
<div class="blockInner">
|
||
<div class="pageTitle">
|
||
{{ $t("message.firmProject.leftBlock1.title1") }}
|
||
</div>
|
||
<div
|
||
class="item1"
|
||
style="background-color: rgba(81, 129, 246, 0.06)"
|
||
>
|
||
<div class="numBox">
|
||
<img
|
||
src="@/assets/images/longguang/1.png"
|
||
v-if="company == 'longguang'"
|
||
/>
|
||
<img src="@/assets/images/companyProject/1.png" v-else />
|
||
<div class="dataBox">
|
||
<p class="num primaryText">
|
||
{{ statisticsCount.workercount.totalPerson }}
|
||
</p>
|
||
<p class="text">
|
||
{{ $t("message.firmProject.leftBlock1.Block1.text1") }}
|
||
</p>
|
||
</div>
|
||
</div>
|
||
<div class="todayAdd">
|
||
<p class="">
|
||
{{ $t("message.firmProject.leftBlock1.Block1.todayAdd") }}
|
||
</p>
|
||
<p>
|
||
{{ $t("message.firmProject.leftBlock1.Block1.labour")
|
||
}}{{ statisticsCount.workercount.lwPersonYesterdayAdd
|
||
}}{{ $t("message.firmProject.leftBlock1.Block1.people") }}
|
||
{{ $t("message.firmProject.leftBlock1.Block1.manage")
|
||
}}{{ statisticsCount.workercount.glPersonYesterdayAdd
|
||
}}{{ $t("message.firmProject.leftBlock1.Block1.people") }}
|
||
{{ $t("message.firmProject.leftBlock1.Block1.RealNameSystem")
|
||
}}{{
|
||
statisticsCount.workercount.lwPersonYesterdayAdd +
|
||
statisticsCount.workercount.glPersonYesterdayAdd
|
||
}}{{ $t("message.firmProject.leftBlock1.Block1.people") }}
|
||
</p>
|
||
</div>
|
||
</div>
|
||
<div class="item2">
|
||
<div class="itemInner">
|
||
<div class="numItem">
|
||
{{ $t("message.firmProject.leftBlock1.Block2.itemInner1")
|
||
}}<span class="primaryText">{{
|
||
statisticsCount.workercount.jfGlPersonTotal
|
||
}}</span>
|
||
</div>
|
||
<div class="numItem">
|
||
{{ $t("message.firmProject.leftBlock1.Block2.itemInner2")
|
||
}}<span class="primaryText">{{
|
||
statisticsCount.workercount.jlGlPersonTotal
|
||
}}</span>
|
||
</div>
|
||
</div>
|
||
<div class="itemInner">
|
||
<div class="numItem">
|
||
{{ $t("message.firmProject.leftBlock1.Block2.itemInner3")
|
||
}}<span class="primaryText">{{
|
||
statisticsCount.workercount.yfGlPersonTotal
|
||
}}</span>
|
||
</div>
|
||
<div class="numItem">
|
||
{{ $t("message.firmProject.leftBlock1.Block2.itemInner4")
|
||
}}<span class="primaryText">{{
|
||
statisticsCount.workercount.lwPersonTotal
|
||
}}</span>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
<div
|
||
class="item1"
|
||
style="
|
||
background-color: rgba(68, 215, 182, 0.06);
|
||
margin-top: 16px;
|
||
"
|
||
>
|
||
<div class="numBox">
|
||
<img src="@/assets/images/companyProject/2.png" />
|
||
<div class="dataBox">
|
||
<p class="num primaryText3">
|
||
{{ statisticsCount.presencecount.totalPerson }}
|
||
</p>
|
||
<p class="text">
|
||
{{ $t("message.firmProject.leftBlock1.Block2.text2") }}
|
||
</p>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
<div class="item2">
|
||
<div class="itemInner">
|
||
<div class="numItem">
|
||
{{ $t("message.firmProject.leftBlock1.Block3.itemInner1")
|
||
}}<span class="primaryText">{{
|
||
statisticsCount.presencecount.glPersonTotal
|
||
}}</span>
|
||
</div>
|
||
<div class="numItem">
|
||
{{ $t("message.firmProject.leftBlock1.Block3.itemInner2")
|
||
}}<span class="primaryText">{{
|
||
statisticsCount.presencecount.lwPersonTotal
|
||
}}</span>
|
||
</div>
|
||
</div>
|
||
<div class="itemInner">
|
||
<div class="numItem">
|
||
{{ $t("message.firmProject.leftBlock1.Block3.itemInner3")
|
||
}}<span class="primaryText">{{
|
||
statisticsCount.presencecount.jfGlPersonTotal
|
||
}}</span>
|
||
</div>
|
||
<div class="numItem">
|
||
{{ $t("message.firmProject.leftBlock1.Block3.itemInner4")
|
||
}}<span class="primaryText">{{
|
||
statisticsCount.presencecount.jlGlPersonTotal
|
||
}}</span>
|
||
</div>
|
||
</div>
|
||
<div class="itemInner">
|
||
<div class="numItem">
|
||
{{ $t("message.firmProject.leftBlock1.Block3.itemInner5")
|
||
}}<span class="primaryText">{{
|
||
statisticsCount.presencecount.yfGlPersonTotal
|
||
}}</span>
|
||
</div>
|
||
<div class="numItem">
|
||
在场临时人员<span class="primaryText">{{
|
||
statisticsCount.presencecount.lsPersonTotal
|
||
}}</span>
|
||
</div>
|
||
<!-- <div class="numItem">
|
||
{{$t('message.firmProject.leftBlock1.Block3.itemInner6')}}<span class="primaryText">{{statisticsCount.presencecount.totalPerson}}</span>
|
||
</div> -->
|
||
</div>
|
||
</div>
|
||
<div class="numBoxContainer">
|
||
<div class="numBox">
|
||
<img src="@/assets/images/companyProject/3.png" />
|
||
<div class="dataBox">
|
||
<p class="num primaryText">
|
||
{{ statisticsCount.workercount.totalPerson }}
|
||
</p>
|
||
<p class="text">
|
||
{{ $t("message.firmProject.leftBlock1.Block3.numBox1") }}
|
||
</p>
|
||
</div>
|
||
</div>
|
||
<div class="numBox">
|
||
<img src="@/assets/images/companyProject/4.png" />
|
||
<div class="dataBox">
|
||
<p class="num" style="color: #f67f51">
|
||
{{ statisticsCount.workercount.lsPersonTotal }}
|
||
</p>
|
||
<!-- <p class="text">{{$t('message.firmProject.leftBlock1.Block3.numBox2')}}</p> -->
|
||
<p class="text">临时人员数</p>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
<div class="numBoxContainer">
|
||
<div class="numBox">
|
||
<img
|
||
src="@/assets/images/longguang/5.png"
|
||
v-if="company == 'longguang'"
|
||
/>
|
||
<img src="@/assets/images/companyProject/5.png" v-else />
|
||
<div class="dataBox">
|
||
<p class="num primaryText3">
|
||
{{
|
||
(
|
||
(isNaN(
|
||
statisticsCount.workercount.manPersonTotal /
|
||
(statisticsCount.workercount.womanPersonTotal +
|
||
statisticsCount.workercount.manPersonTotal)
|
||
)
|
||
? 0
|
||
: statisticsCount.workercount.manPersonTotal /
|
||
(statisticsCount.workercount.womanPersonTotal +
|
||
statisticsCount.workercount.manPersonTotal)) * 100
|
||
).toFixed(2)
|
||
}}%
|
||
</p>
|
||
<p class="text">
|
||
{{ $t("message.firmProject.leftBlock1.Block3.numBox3") }}
|
||
</p>
|
||
</div>
|
||
</div>
|
||
<div class="numBox">
|
||
<img
|
||
src="@/assets/images/longguang/6.png"
|
||
v-if="company == 'longguang'"
|
||
/>
|
||
<img src="@/assets/images/companyProject/6.png" v-else />
|
||
<div class="dataBox">
|
||
<p class="num" style="color: #7851f6">
|
||
{{ statisticsCount.currentMonthEducationPerson }}
|
||
</p>
|
||
<p class="text">
|
||
{{ $t("message.firmProject.leftBlock1.Block3.numBox4") }}
|
||
</p>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
<!-- 分布地图/宣传视频 -->
|
||
<div class="whiteBlock centerBlock">
|
||
<div class="blockInner">
|
||
<div class="tabBox">
|
||
<ul>
|
||
<li
|
||
:class="mapTabIndex ? 'active' : ''"
|
||
@click="change(1)"
|
||
>
|
||
分布地图
|
||
</li>
|
||
<li
|
||
:class="mapTabIndex ? '' : 'active'"
|
||
@click="change(0)"
|
||
>
|
||
宣传视频
|
||
</li>
|
||
</ul>
|
||
</div>
|
||
<el-button
|
||
v-show="
|
||
mapTabIndex == 0 &&
|
||
$store.state.userInfo.propagateFile &&
|
||
$store.state.userInfo.propagateFile != '-1'
|
||
"
|
||
type="danger"
|
||
size="mini"
|
||
class="deleteBtn"
|
||
@click="saveOrDeleteVideo(-1)"
|
||
>删除视频</el-button
|
||
>
|
||
<div class="mapContainer" v-show="mapTabIndex===0">
|
||
<video
|
||
v-if="
|
||
$store.state.userInfo.propagateFile &&
|
||
$store.state.userInfo.propagateFile != '-1'
|
||
"
|
||
:src="
|
||
$store.state.FILEURL + $store.state.userInfo.propagateFile
|
||
"
|
||
width="100%"
|
||
height="100%"
|
||
autoplay
|
||
controls
|
||
loop
|
||
></video>
|
||
<div class="placeholderBox" v-else>
|
||
<img
|
||
src="@/assets/images/longguang/noData.png"
|
||
alt=""
|
||
srcset=""
|
||
v-if="company == 'longguang'"
|
||
/>
|
||
<img src="@/assets/images/noData.png" alt="" srcset="" v-else />
|
||
<p>
|
||
{{ $t("message.videoManage.empty") }},
|
||
<el-upload
|
||
style="display: inline-block"
|
||
class="upload-demo"
|
||
:action="$store.state.UPLOADURL"
|
||
:on-success="(file) => handleSuccess(file, 1)"
|
||
:on-error="(file) => handleError(file, 1)"
|
||
:beforeUpload="(file) => handleBeforeUpload(file, 1)"
|
||
name="files"
|
||
:show-file-list="false"
|
||
>
|
||
<span>点我上传</span>
|
||
</el-upload>
|
||
</p>
|
||
</div>
|
||
</div>
|
||
|
||
<div class="mapContainer" v-show="mapTabIndex===1">
|
||
<div class="mapBack" v-if="showMapBack" @click="goBack">
|
||
<i class="el-icon-arrow-left"></i>
|
||
</div>
|
||
<div class="mapTitle" v-if="backArr.length != 0">
|
||
{{ backArr[backArr.length - 1].name }}
|
||
</div>
|
||
<div class="selectContainer">
|
||
<div
|
||
class="selectBox"
|
||
@click="showMapDialog = !showMapDialog"
|
||
v-show="backArr.length == 1"
|
||
>
|
||
城市列表
|
||
<i v-show="!showMapDialog" class="el-icon-arrow-up"></i>
|
||
<i v-show="showMapDialog" class="el-icon-arrow-down"></i>
|
||
</div>
|
||
<div
|
||
class="selectBox"
|
||
@click="showMapDialog = !showMapDialog"
|
||
v-show="backArr.length == 2"
|
||
>
|
||
项目列表
|
||
<i v-show="!showMapDialog" class="el-icon-arrow-up"></i>
|
||
<i v-show="showMapDialog" class="el-icon-arrow-down"></i>
|
||
</div>
|
||
<div class="selectContent" v-show="showMapDialog">
|
||
<vue-scroll style="height: 100%">
|
||
<div
|
||
class="selectItem"
|
||
@click="mapJumpToNext(index)"
|
||
v-for="(item, index) in mapData"
|
||
:key="index"
|
||
>
|
||
<p class="title">{{ item.name }}</p>
|
||
<div class="datas">
|
||
<div class="numBox2">
|
||
<p>{{ item.videoNum }}</p>
|
||
<p>视频数</p>
|
||
</div>
|
||
<div class="numBox2">
|
||
<p>{{ item.ufaceDevNum }}</p>
|
||
<p>门禁数</p>
|
||
</div>
|
||
<div class="numBox2" v-show="!item.projectName">
|
||
<p>{{ item.projectNum }}</p>
|
||
<p>项目数</p>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</vue-scroll>
|
||
</div>
|
||
</div>
|
||
<div id="map" class="fullHeight"></div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
<!-- 项目概况 -->
|
||
<div class="whiteBlock">
|
||
<div class="blockInner">
|
||
<div class="pageTitle">
|
||
{{ $t("message.firmProject.rightBlock1.title") }}
|
||
</div>
|
||
<div class="statictisBox">
|
||
<div class="numBox">
|
||
<div class="dataBox" v-if="backArr.length < 3">
|
||
<p class="num primaryText">
|
||
{{ statisticsCount.projectcount.projectNum }}
|
||
</p>
|
||
<p class="text">
|
||
{{ $t("message.firmProject.rightBlock1.numBox1") }}
|
||
</p>
|
||
</div>
|
||
<div class="dataBox" v-else>
|
||
<!-- bug100000-->
|
||
<p class="num primaryText">{{ mapData[0].households ||0}}</p>
|
||
<p class="text">
|
||
{{ $t("message.firmProject.rightBlock1.numBox3") }}
|
||
</p>
|
||
</div>
|
||
</div>
|
||
<div class="numBox">
|
||
<div class="dataBox" v-if="backArr.length < 3">
|
||
<p class="num primaryText3">
|
||
{{ statisticsCount.projectcount.saleAcreageTotal }}
|
||
</p>
|
||
<p class="text">销售总面积</p>
|
||
</div>
|
||
<div class="dataBox" v-else>
|
||
<p class="num primaryText3">
|
||
{{ mapData[0].projectAcreage }}
|
||
</p>
|
||
<!-- 在建总面积-->
|
||
<p class="text">
|
||
{{ $t("message.firmProject.rightBlock1.numBox2") }}
|
||
</p>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
<div class="chart" ref="projectChart"></div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
<div class="bottom blockBox">
|
||
<!-- 年龄结构 -->
|
||
<div class="whiteBlock">
|
||
<div class="blockInner">
|
||
<div class="pageTitle">
|
||
{{ $t("message.firmProject.bottomBlock1.title") }}
|
||
</div>
|
||
<div class="statictisBox">
|
||
<div class="numBox">
|
||
<div class="dataBox">
|
||
<p class="num primaryText">
|
||
{{ statisticsCount.presencecount.avgage.toFixed(0) }}
|
||
</p>
|
||
<p class="text">
|
||
{{ $t("message.firmProject.bottomBlock1.numBox1") }}
|
||
</p>
|
||
</div>
|
||
</div>
|
||
<div class="numBox">
|
||
<div class="dataBox">
|
||
<p class="num primaryText3">
|
||
{{ statisticsCount.workercount.avgage.toFixed(0) }}
|
||
</p>
|
||
<p class="text">
|
||
{{ $t("message.firmProject.bottomBlock1.numBox2") }}
|
||
</p>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
<div class="chart" ref="ageChart"></div>
|
||
</div>
|
||
</div>
|
||
<!-- 设备在线统计 -->
|
||
<div class="whiteBlock centerBlock">
|
||
<div class="blockInner">
|
||
<div class="pageTitle">
|
||
{{ $t("message.firmProject.bottomBlock2.title") }}
|
||
</div>
|
||
<div class="statictisBox big">
|
||
<div class="numBox">
|
||
<div class="dataBox">
|
||
<p class="num" style="color: #f67f51">
|
||
{{ statisticsCount.devcount.videoNum }}
|
||
</p>
|
||
<p class="text">
|
||
{{ $t("message.firmProject.bottomBlock2.numBox1") }}
|
||
</p>
|
||
</div>
|
||
</div>
|
||
<div class="numBox">
|
||
<div class="dataBox">
|
||
<p class="num primaryText">
|
||
{{ statisticsCount.devcount.ufaceDevNum }}
|
||
</p>
|
||
<p class="text">
|
||
{{ $t("message.firmProject.bottomBlock2.numBox2") }}
|
||
</p>
|
||
</div>
|
||
</div>
|
||
<div class="numBox">
|
||
<div class="dataBox">
|
||
<p class="num primaryText3">
|
||
{{ statisticsCount.devcount.environmentDevNum }}
|
||
</p>
|
||
<p class="text">
|
||
{{ $t("message.firmProject.bottomBlock2.numBox3") }}
|
||
</p>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
<div class="chart" ref="devChart"></div>
|
||
</div>
|
||
</div>
|
||
<!-- 安全分析 -->
|
||
<div class="whiteBlock">
|
||
<div class="blockInner">
|
||
<div class="pageTitle">
|
||
{{ $t("message.firmProject.bottomBlock3.title") }}
|
||
</div>
|
||
<div
|
||
class="statictisBox"
|
||
style="margin: 5px 0 10px; font-size: 14px"
|
||
>
|
||
<p style="margin-right: 50px">
|
||
{{ $t("message.firmProject.bottomBlock3.numBox1") }}：<span
|
||
class="primaryText"
|
||
>{{ eduPersonTotal }}</span
|
||
>{{ $t("message.firmProject.bottomBlock3.people") }}
|
||
</p>
|
||
<p>
|
||
{{ $t("message.firmProject.bottomBlock3.numBox2") }}：<span
|
||
class="primaryText"
|
||
>{{
|
||
(
|
||
(isNaN(
|
||
eduPersonTotal / statisticsCount.workercount.totalPerson
|
||
)
|
||
? 0
|
||
: eduPersonTotal /
|
||
statisticsCount.workercount.totalPerson) * 100
|
||
).toFixed(2)
|
||
}}%</span
|
||
>
|
||
</p>
|
||
</div>
|
||
<!-- <div class="safeBtns">
|
||
<el-button type="primary" size="mini">安全培训统计</el-button>
|
||
<el-button type="info" size="mini">安全培训统计</el-button>
|
||
</div> -->
|
||
<div
|
||
class="chart"
|
||
ref="safeChart"
|
||
style="height: calc(100% - 50px)"
|
||
></div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</vue-scroll>
|
||
<areaTree :videoType="0"></areaTree>
|
||
</div>
|
||
</template>
|
||
<script>
|
||
import {
|
||
getComapnyStatisticsListApi,
|
||
getWorkerStatisticsCountApi,
|
||
editCompanyBySnApi,
|
||
getProjectDevStatisticsCountApi,
|
||
selectWorkerSafeEducationStatisticsApi,
|
||
selectWorkerBlacklistStatisticsApi,
|
||
} from "@/assets/js/api/company/project";
|
||
import {
|
||
getProjectModuleList,
|
||
getAllModuleApi,
|
||
} from "@/assets/js/api/jxjadmin.js";
|
||
import { getProjectDetail } from "@/assets/js/api/baseInfo.js";
|
||
import areaTree from "@/components/areaTree";
|
||
import echarts from 'echarts4';;
|
||
|
||
export default {
|
||
components: { areaTree },
|
||
data() {
|
||
return {
|
||
mapObj: null,
|
||
mapName: "",
|
||
mapData: [],
|
||
backArr: [],
|
||
searchsn: "",
|
||
showMapDialog: false,
|
||
showMapBack: false,
|
||
statisticsCount: {
|
||
currentMonthEducationPerson: 0,
|
||
projectcount: {
|
||
constructionStageCount14: 0,
|
||
constructionStageCount13: 0,
|
||
constructionStageCount15: 0,
|
||
constructionStageCount10: 0,
|
||
constructionStageCount12: 0,
|
||
constructionStageCount11: 0,
|
||
constructionStageCount1: 0,
|
||
saleAcreageTotal: 0,
|
||
constructionStageCount9: 0,
|
||
constructionStageCount8: 0,
|
||
constructionStageCount7: 0,
|
||
constructionStageCount6: 0,
|
||
constructionStageCount5: 0,
|
||
constructionStageCount4: 0,
|
||
constructionStageCount3: 0,
|
||
constructionStageCount2: 0,
|
||
projectNum: 0,
|
||
},
|
||
workercount: {
|
||
lwPersonYesterdayAdd: 0,
|
||
eduPersonTotal: 0,
|
||
jfGlPersonTotal: 0,
|
||
age18: 0,
|
||
age18to25: 0,
|
||
womanPersonTotal: 0,
|
||
lsPersonTotal: 0,
|
||
jlGlPersonTotal: 0,
|
||
age45to60: 0,
|
||
lwPersonTotal: 0,
|
||
manPersonTotal: 0,
|
||
totalPerson: 0,
|
||
age25to35: 0,
|
||
glPersonTotal: 0,
|
||
yfGlPersonTotal: 0,
|
||
avgage: 0,
|
||
age35to45: 0,
|
||
glPersonYesterdayAdd: 0,
|
||
age60: 0,
|
||
},
|
||
devcount: { ufaceDevNum: 0, videoNum: 0, environmentDevNum: 0 },
|
||
presencecount: {
|
||
jfGlPersonTotal: 0,
|
||
age18: 0,
|
||
age18to25: 0,
|
||
womanPersonTotal: 0,
|
||
lsPersonTotal: 0,
|
||
jlGlPersonTotal: 0,
|
||
age45to60: 0,
|
||
lwPersonTotal: 0,
|
||
manPersonTotal: 0,
|
||
totalPerson: 0,
|
||
age25to35: 0,
|
||
glPersonTotal: 0,
|
||
yfGlPersonTotal: 0,
|
||
avgage: 0,
|
||
age35to45: 0,
|
||
age60: 0,
|
||
},
|
||
},
|
||
mapTabIndex: 1,
|
||
fullscreenLoading: null,
|
||
eduPersonTotal: 0,
|
||
company: "",
|
||
};
|
||
},
|
||
watch: {
|
||
"$store.state.mapBackArr": function () {
|
||
this.initData();
|
||
},
|
||
},
|
||
created() {
|
||
this.company = COMPANY;
|
||
|
||
this.$store.commit("setIsShowBackIndex", false);
|
||
},
|
||
mounted() {
|
||
|
||
this.initMap();
|
||
//获取地图数据
|
||
this.initData(true);
|
||
// this.getAllModule();
|
||
},
|
||
methods: {
|
||
//地图/视频切换
|
||
change(index){
|
||
console.log('切换的索引',index);
|
||
this.mapTabIndex=index
|
||
},
|
||
//安全分析
|
||
getSafeData() {
|
||
selectWorkerSafeEducationStatisticsApi({ sn: this.searchsn }).then(
|
||
(res) => {
|
||
console.log('培训学校',res)
|
||
var xData = [],
|
||
yData1 = [],
|
||
yData2 = [];
|
||
if (res.result) {
|
||
this.eduPersonTotal = res.result.totalEducationPerson;
|
||
var arr = res.result.list;
|
||
arr.forEach((element) => {
|
||
xData.push(element.name);
|
||
yData1.push(element.num);
|
||
});
|
||
}
|
||
selectWorkerBlacklistStatisticsApi({ sn: this.searchsn }).then(
|
||
(res) => {
|
||
if (res.result) {
|
||
var arr = res.result.list;
|
||
arr.forEach((element) => {
|
||
if (xData.length == 0) {
|
||
xData.push(element.name);
|
||
}
|
||
yData2.push(element.num);
|
||
});
|
||
}
|
||
this.createdSafeCharts(xData, yData1, yData2);
|
||
}
|
||
);
|
||
}
|
||
);
|
||
},
|
||
//设备在线统计
|
||
getDevCountStatictis() {
|
||
getProjectDevStatisticsCountApi({ sn: this.searchsn }).then((res) => {
|
||
console.log('设备在线统计',res.result.videoList)
|
||
if (res.result) {
|
||
var arr3 = res.result.environmentList;
|
||
var arr2 = res.result.ufaceList;
|
||
var arr1 = res.result.videoList;
|
||
console.log('arr1数据',arr1);
|
||
arr1.forEach((element, index) => {
|
||
arr1[index].value1 = (element.devOnlineNum / element.devNum) * 100;
|
||
arr1[index].value2 =(arr2[index].devOnlineNum / arr2[index].devNum) * 100;
|
||
if(arr1[index].value3){
|
||
arr1[index].value3 =(arr3[index].devOnlineNum / arr3[index].devNum) * 100;
|
||
}else{
|
||
arr1[index].value3=0
|
||
}
|
||
// setTimeout(()=>{
|
||
// arr1[index].value3 =(arr3[index].devOnlineNum / arr3[index].devNum?(arr3[index].devOnlineNum / arr3[index].devNum:0) * 100;
|
||
|
||
// },2000)
|
||
console.log(' arr1[index].value3', arr1[index].value3);
|
||
|
||
arr1[index].name = element.queryTime;
|
||
});
|
||
console.log(arr1);
|
||
this.createDevChart(arr1);
|
||
} else {
|
||
this.createDevChart([]);
|
||
}
|
||
});
|
||
},
|
||
//统计企业下项目各人员统计
|
||
getWorkerStatisticsCount() {
|
||
getWorkerStatisticsCountApi({ sn: this.searchsn }).then((res) => {
|
||
console.log('统计企业下项目各人员',res);
|
||
this.statisticsCount = res.result;
|
||
this.createProjectChart();
|
||
this.createdAgeCharts();
|
||
|
||
});
|
||
},
|
||
//获取所有企业下区域数据
|
||
loadData(type) {
|
||
//type：true代表第一调用
|
||
// console.log('type,',type)
|
||
getComapnyStatisticsListApi({
|
||
sn: this.searchsn,
|
||
}).then((res) => {
|
||
this.mapData = res.result.companyList
|
||
? res.result.companyList
|
||
: res.result.projectList;
|
||
|
||
if (type) {
|
||
// this.showMapBack=false
|
||
this.backArr = [];
|
||
// if(this.$store.state.userInfo.accountType==4){
|
||
if (res.result.firstCompany) {
|
||
this.backArr.push({
|
||
name: res.result.firstCompany.companyName,
|
||
sn: res.result.firstCompany.companySn,
|
||
});
|
||
}
|
||
if (res.result.parentCompany) {
|
||
this.backArr.push({
|
||
name: res.result.parentCompany.companyName,
|
||
sn: res.result.parentCompany.companySn,
|
||
});
|
||
}
|
||
// }
|
||
// if(this.$store.state.userInfo.accountType==3||this.$store.state.userInfo.accountType==4){
|
||
if (res.result.companyInfo) {
|
||
this.backArr.push({
|
||
name: res.result.companyInfo.companyName,
|
||
sn: res.result.companyInfo.companySn,
|
||
});
|
||
}
|
||
// }
|
||
if (
|
||
(this.backArr.length == 0 &&
|
||
this.$store.state.userInfo.accountType == 2) ||
|
||
(this.backArr.length == 1 &&
|
||
this.$store.state.userInfo.accountType == 3) ||
|
||
(this.backArr.length == 2 &&
|
||
this.$store.state.userInfo.accountType == 4) ||
|
||
(this.backArr.length == 3 &&
|
||
this.$store.state.userInfo.accountType == 7)
|
||
) {
|
||
this.showMapBack = false;
|
||
} else {
|
||
this.showMapBack = true;
|
||
}
|
||
this.$store.commit("setMapBackArr", this.backArr);
|
||
}
|
||
if (this.mapData.length > 0) {
|
||
this.mapObj.clearMap();
|
||
this.setAreaMarker();
|
||
} else {
|
||
this.$message("该区域下没有数据！");
|
||
}
|
||
});
|
||
},
|
||
initData(type) {
|
||
console.log('执行',720);
|
||
this.backArr = this.$store.state.mapBackArr;
|
||
//
|
||
if (this.backArr.length > 0) {
|
||
this.searchsn = this.backArr[this.backArr.length - 1].sn;
|
||
} else {
|
||
switch (this.$store.state.userInfo.accountType) {
|
||
case 2:
|
||
this.searchsn = this.$store.state.userInfo.headquartersSn;
|
||
break;
|
||
case 3:
|
||
this.searchsn = this.$store.state.userInfo.sn;
|
||
break;
|
||
case 4:
|
||
this.searchsn = this.$store.state.userInfo.sn;
|
||
break;
|
||
case 7:
|
||
this.searchsn = this.$store.state.userInfo.sn;
|
||
break;
|
||
}
|
||
}
|
||
if (
|
||
(this.backArr.length == 0 &&
|
||
this.$store.state.userInfo.accountType == 2) ||
|
||
(this.backArr.length == 1 &&
|
||
this.$store.state.userInfo.accountType == 3) ||
|
||
(this.backArr.length == 2 &&
|
||
this.$store.state.userInfo.accountType == 4) ||
|
||
(this.backArr.length == 3 &&
|
||
this.$store.state.userInfo.accountType == 7)
|
||
) {
|
||
this.showMapBack = false;
|
||
} else {
|
||
this.showMapBack = true;
|
||
}
|
||
if (this.backArr.length == 4) {
|
||
this.getProjectDetail();
|
||
} else {
|
||
this.loadData(type);
|
||
}
|
||
this.getWorkerStatisticsCount();
|
||
this.getDevCountStatictis();
|
||
this.getSafeData();
|
||
},
|
||
//获取项目详细
|
||
getProjectDetail() {
|
||
let data = {
|
||
projectSn: this.searchsn,
|
||
};
|
||
getProjectDetail(data).then((res) => {
|
||
if (res.code == 200) {
|
||
if (res.result) {
|
||
console.log(res.result);
|
||
this.mapData = [res.result];
|
||
this.mapObj.clearMap();
|
||
this.setAreaMarker();
|
||
}
|
||
}
|
||
});
|
||
},
|
||
initMap() {
|
||
//地图加载
|
||
this.mapObj = new AMap.Map("map", {
|
||
resizeEnable: true,
|
||
});
|
||
},
|
||
goBack() {
|
||
//
|
||
if (this.backArr.length == 1) {
|
||
this.backArr = [];
|
||
} else {
|
||
this.backArr = this.backArr.splice(0, this.backArr.length - 1);
|
||
}
|
||
this.$store.commit("setMapBackArr", this.backArr);
|
||
// this.initData()
|
||
},
|
||
setAreaMarker() {
|
||
this.mapObj.clearMap();
|
||
var _this = this;
|
||
this.mapData.forEach((element, index) => {
|
||
var marker = new AMap.Marker({
|
||
position: [element.longitude, element.latitude],
|
||
icon: new AMap.Icon({
|
||
image: "https://webapi.amap.com/theme/v1.3/markers/n/mark_b.png",
|
||
size: new AMap.Size(230, 43), //图标大小
|
||
imageSize: new AMap.Size(230, 43),
|
||
}),
|
||
});
|
||
var htmls = "";
|
||
if (!element.projectName) {
|
||
htmls = `<div class='datas'>
|
||
<p class='num'>${
|
||
element.projectNum
|
||
}</p><p class='text'>${this.$t(
|
||
"message.firmProject.marker.projectsNum"
|
||
)}</p>
|
||
</div>`;
|
||
}
|
||
marker.setLabel({
|
||
offset: new AMap.Pixel(0, 0), //设置文本标注偏移量
|
||
content: `<div class='mapInfo'>
|
||
<div class='areaName datas'>${
|
||
element.name
|
||
}</div>${htmls}
|
||
<div class='datas'><p class='num'>${
|
||
element.videoNum
|
||
}</p>
|
||
<p class='text'>${this.$t(
|
||
"message.firmProject.marker.videoNum"
|
||
)}</p>
|
||
</div>
|
||
<div class='datas'><p class='num'>${
|
||
element.ufaceDevNum
|
||
}</p>
|
||
<p class='text'>${this.$t(
|
||
"message.firmProject.marker.guardNum"
|
||
)}</p>
|
||
</div>
|
||
</div>`,
|
||
direction: "center", //设置文本标注方位
|
||
});
|
||
AMap.event.addListener(marker, "click", function (e) {
|
||
_this.mapJumpToNext(index);
|
||
//得到的数据
|
||
});
|
||
marker.setMap(this.mapObj);
|
||
this.mapObj.setFitView();
|
||
});
|
||
// this.$nextTick(() => {
|
||
// setTimeout(() => {
|
||
// var infoList = document.getElementsByClassName('mapInfo')
|
||
// // console.log('添加点击marker事件',infoList)
|
||
// infoList.forEach((element, index) => {
|
||
// // console.log(element)
|
||
// // element.removeEventListener("click",_this.mapJumpToNext(index),false);
|
||
// element.addEventListener('click', function () {
|
||
// console.log('点击marker',index)
|
||
// _this.mapJumpToNext(index)
|
||
// })
|
||
// // element.addEventListener('click', _this.mapJumpToNext(index))
|
||
// });
|
||
// }, 1000)
|
||
// })
|
||
},
|
||
//地图跳转到下一级
|
||
mapJumpToNext(index) {
|
||
var _this = this;
|
||
console.log("mapJumpToNext",_this.mapData[index].list);
|
||
if (_this.mapData[index].list) {
|
||
var json = {
|
||
sn: _this.mapData[index].companySn,
|
||
name: _this.mapData[index].name,
|
||
};
|
||
_this.backArr.push(json);
|
||
_this.$store.commit("setMapBackArr", _this.backArr);
|
||
_this.showMapDialog = false;
|
||
} else {
|
||
//这里的4指除去总公司外的层级数
|
||
// if (_this.mapData[index].projectName && _this.backArr.length < 3) {
|
||
if (_this.mapData[index].projectName && _this.backArr.length < 4) {
|
||
var json = {
|
||
sn: _this.mapData[index].projectSn,
|
||
name: _this.mapData[index].name,
|
||
};
|
||
_this.backArr.push(json);
|
||
_this.$store.commit("setMapBackArr", _this.backArr);
|
||
_this.showMapDialog = false;
|
||
console.log('执行888');
|
||
}
|
||
}
|
||
},
|
||
createDevChart(echartData) {
|
||
let that = this;
|
||
let devChart = echarts.init(this.$refs.devChart);
|
||
// let bgColor = "#fff";
|
||
let color =
|
||
that.company == "longguang"
|
||
? ["#4378D8", "#1AA388",'#BC5D12',"#FF515A", "#8B5CFF", "#00CA69"]
|
||
: ["#5181F6", "#00DBB6", "#F67F51", "#FF515A", "#8B5CFF", "#00CA69"];
|
||
var symbolSize = 10;
|
||
// let echartData = [{
|
||
// name: "10-01",
|
||
// value1: 90,
|
||
// value2: 85,
|
||
// value3: 70
|
||
// },
|
||
// {
|
||
// name: "10-02",
|
||
// value1: 92,
|
||
// value2: 87,
|
||
// value3: 77
|
||
// },
|
||
// {
|
||
// name: "10-03",
|
||
// value1: 95,
|
||
// value2: 88,
|
||
// value3: 74
|
||
// },
|
||
// {
|
||
// name: "10-04",
|
||
// value1: 89,
|
||
// value2: 83,
|
||
// value3: 72
|
||
// },
|
||
// {
|
||
// name: "10-05",
|
||
// value1: 88,
|
||
// value2: 80,
|
||
// value3: 70
|
||
// },
|
||
// {
|
||
// name: "10-06",
|
||
// value1: 95,
|
||
// value2: 90,
|
||
// value3: 80
|
||
// },
|
||
// {
|
||
// name: "10-07",
|
||
// value1: 93,
|
||
// value2: 84,
|
||
// value3: 82
|
||
// },
|
||
// {
|
||
// name: "10-08",
|
||
// value1: 93,
|
||
// value2: 89,
|
||
// value3: 75
|
||
// }
|
||
// ];
|
||
|
||
let xAxisData = echartData.map((v) => v.name);
|
||
// ["1", "2", "3", "4", "5", "6", "7", "8"]
|
||
let yAxisData1 = echartData.map((v) => v.value1);
|
||
// [100, 138, 350, 173, 180, 150, 180, 230]
|
||
let yAxisData2 = echartData.map((v) => v.value2);
|
||
let yAxisData3 = echartData.map((v) => v.value3);
|
||
// [233, 233, 200, 180, 199, 233, 210, 180]
|
||
const hexToRgba = (hex, opacity) => {
|
||
let rgbaColor = "";
|
||
let reg = /^#[\da-f]{6}$/i;
|
||
if (reg.test(hex)) {
|
||
rgbaColor = `rgba(${parseInt("0x" + hex.slice(1, 3))},${parseInt(
|
||
"0x" + hex.slice(3, 5)
|
||
)},${parseInt("0x" + hex.slice(5, 7))},${opacity})`;
|
||
}
|
||
return rgbaColor;
|
||
};
|
||
|
||
var option = {
|
||
// backgroundColor: bgColor,
|
||
color: color,
|
||
legend: {
|
||
right: 10,
|
||
top: 5,
|
||
textStyle: {
|
||
color: "#9fa2ad",
|
||
},
|
||
},
|
||
tooltip: {
|
||
trigger: "axis",
|
||
formatter: function (params) {
|
||
let html = "";
|
||
params.forEach((v) => {
|
||
// console.log(v)
|
||
html += `<div style="color: #666;font-size: 14px;line-height: 24px">
|
||
<span style="display:inline-block;margin-right:5px;border-radius:10px;width:10px;height:10px;background-color:${
|
||
color[v.componentIndex]
|
||
};"></span>
|
||
${v.seriesName}.${v.name}
|
||
<span style="color:${
|
||
color[v.componentIndex]
|
||
};font-weight:700;font-size: 18px">${v.value}</span>
|
||
%`;
|
||
});
|
||
return html;
|
||
},
|
||
extraCssText:
|
||
"background: #fff; border-radius: 0;box-shadow: 0 0 3px rgba(0, 0, 0, 0.2);color: #333;",
|
||
// axisPointer: {
|
||
// type: 'shadow',
|
||
// shadowStyle: {
|
||
// color: '#ffffff',
|
||
// shadowColor: 'rgba(225,225,225,1)',
|
||
// shadowBlur: 5
|
||
// }
|
||
// }
|
||
},
|
||
grid: {
|
||
top: 35,
|
||
right: 20,
|
||
left: 0,
|
||
bottom: 0,
|
||
containLabel: true,
|
||
},
|
||
xAxis: [
|
||
{
|
||
type: "category",
|
||
boundaryGap: false,
|
||
axisLabel: {
|
||
formatter: "{value}",
|
||
textStyle: {
|
||
color: "#9fa2ad",
|
||
},
|
||
},
|
||
axisTick: {
|
||
show: false,
|
||
},
|
||
axisLine: {
|
||
lineStyle: {
|
||
color: "#D9D9D9",
|
||
},
|
||
},
|
||
data: xAxisData,
|
||
},
|
||
],
|
||
yAxis: [
|
||
{
|
||
type: "value",
|
||
name: "单位：%",
|
||
axisLabel: {
|
||
textStyle: {
|
||
color: "#9fa2ad",
|
||
},
|
||
},
|
||
nameTextStyle: {
|
||
color: "#9fa2ad",
|
||
fontSize: 12,
|
||
lineHeight: 24,
|
||
},
|
||
splitLine: {
|
||
lineStyle: {
|
||
type: "dashed",
|
||
color: "rgba(231, 233, 243, 0.5)",
|
||
},
|
||
},
|
||
axisLine: {
|
||
show: false,
|
||
},
|
||
axisTick: {
|
||
show: false,
|
||
},
|
||
},
|
||
],
|
||
series: [
|
||
{
|
||
name: "视频设备",
|
||
type: "line",
|
||
smooth: true,
|
||
// showSymbol: false,/
|
||
symbolSize: symbolSize,
|
||
zlevel: 3,
|
||
lineStyle: {
|
||
normal: {
|
||
color: color[0],
|
||
shadowBlur: 3,
|
||
shadowColor: hexToRgba(color[0], 0.76),
|
||
shadowOffsetY: 8,
|
||
},
|
||
},
|
||
data: yAxisData1,
|
||
},
|
||
{
|
||
name: "人脸设备",
|
||
type: "line",
|
||
smooth: true,
|
||
// showSymbol: false,
|
||
symbolSize: symbolSize,
|
||
zlevel: 3,
|
||
lineStyle: {
|
||
normal: {
|
||
color: color[1],
|
||
shadowBlur: 3,
|
||
shadowColor: hexToRgba(color[1], 0.76),
|
||
shadowOffsetY: 8,
|
||
},
|
||
},
|
||
data: yAxisData2,
|
||
},
|
||
{
|
||
name: "环境设备",
|
||
type: "line",
|
||
smooth: true,
|
||
// showSymbol: false,
|
||
symbolSize: symbolSize,
|
||
zlevel: 3,
|
||
lineStyle: {
|
||
normal: {
|
||
color: color[2],
|
||
shadowBlur: 3,
|
||
shadowColor: hexToRgba(color[2], 0.76),
|
||
shadowOffsetY: 8,
|
||
},
|
||
},
|
||
data: yAxisData3,
|
||
},
|
||
],
|
||
};
|
||
devChart.setOption(option);
|
||
},
|
||
//年龄结构---图表
|
||
createdAgeCharts() {
|
||
var json1 = this.statisticsCount.presencecount;
|
||
var json2 = this.statisticsCount.workercount;
|
||
var arr1 = [
|
||
json1.age18,
|
||
json1.age18to25,
|
||
json1.age25to35,
|
||
json1.age35to45,
|
||
json1.age45to60,
|
||
json1.age60,
|
||
];
|
||
var arr2 = [
|
||
json2.age18,
|
||
json2.age18to25,
|
||
json2.age25to35,
|
||
json2.age35to45,
|
||
json2.age45to60,
|
||
json2.age60,
|
||
];
|
||
let that = this;
|
||
let ageChart = echarts.init(this.$refs.ageChart);
|
||
// ageChart.clear();
|
||
let option = {
|
||
grid: {
|
||
top: 40,
|
||
left: 0,
|
||
bottom: 0,
|
||
right: 20,
|
||
containLabel: true,
|
||
},
|
||
color:
|
||
that.company == "longguang"
|
||
? ["#4378D8", "#1AA388"]
|
||
: ["#5181F6", "#61D2B9"],
|
||
tooltip: {
|
||
trigger: "axis",
|
||
axisPointer: {
|
||
type: "shadow",
|
||
},
|
||
},
|
||
legend: {
|
||
show: true,
|
||
align: "left",
|
||
top: 5,
|
||
left: 0,
|
||
itemWidth: 13,
|
||
itemHeight: 5,
|
||
textStyle: {
|
||
color: "#9fa2ad",
|
||
},
|
||
},
|
||
xAxis: [
|
||
{
|
||
type: "category",
|
||
data: [
|
||
"18及以下",
|
||
"18-25岁",
|
||
"25-35岁",
|
||
"35-45岁",
|
||
"45-59岁",
|
||
"60及以上",
|
||
],
|
||
boundaryGap: true,
|
||
axisTick: {
|
||
show: false,
|
||
},
|
||
axisLine: {
|
||
show: false,
|
||
},
|
||
axisLabel: {
|
||
color: "#9fa2ad",
|
||
fontSize: 12,
|
||
},
|
||
},
|
||
],
|
||
|
||
yAxis: {
|
||
type: "value",
|
||
axisTick: {
|
||
show: false,
|
||
},
|
||
axisLine: {
|
||
show: false,
|
||
},
|
||
splitLine: {
|
||
lineStyle: {
|
||
type: "dashed",
|
||
color: "rgba(231, 233, 243, 0.5)",
|
||
},
|
||
},
|
||
axisLabel: {
|
||
color: "#9fa2ad",
|
||
},
|
||
},
|
||
series: [
|
||
{
|
||
name: "在职人数",
|
||
type: "bar",
|
||
data: arr2,
|
||
barWidth: 14,
|
||
barGap: 0.1,
|
||
},
|
||
{
|
||
name: "在场人数",
|
||
type: "bar",
|
||
data: arr1,
|
||
barWidth: 14,
|
||
},
|
||
],
|
||
};
|
||
|
||
ageChart.setOption(option);
|
||
},
|
||
//安全分析---图表
|
||
createdSafeCharts(xData, yData1, yData2) {
|
||
let that = this;
|
||
let safeChart = echarts.init(this.$refs.safeChart);
|
||
// ageChart.clear();
|
||
let option = {
|
||
grid: {
|
||
top: 40,
|
||
left: 0,
|
||
bottom: 15,
|
||
right: 20,
|
||
containLabel: true,
|
||
},
|
||
legend: {
|
||
show: true,
|
||
align: "left",
|
||
top: 0,
|
||
left: 0,
|
||
itemWidth: 13,
|
||
itemHeight: 5,
|
||
selectedMode: "single",
|
||
textStyle: {
|
||
color: "#9fa2ad",
|
||
},
|
||
},
|
||
color:
|
||
that.company == "longguang"
|
||
? ["#4378D8", "#1AA388"]
|
||
: ["#5181F6", "#61D2B9"],
|
||
tooltip: {
|
||
trigger: "axis",
|
||
axisPointer: {
|
||
type: "shadow",
|
||
},
|
||
},
|
||
xAxis: [
|
||
{
|
||
type: "category",
|
||
data: xData,
|
||
boundaryGap: true,
|
||
axisTick: {
|
||
show: false,
|
||
},
|
||
axisLine: {
|
||
show: false,
|
||
},
|
||
axisLabel: {
|
||
color: "#9fa2ad",
|
||
fontSize: 12,
|
||
interval:0,
|
||
formatter: function(value){
|
||
let valueTxt = ''
|
||
if (value.length > 4) {
|
||
valueTxt = value.substring(0,4) + '...'
|
||
} else {
|
||
valueTxt = value
|
||
}
|
||
return valueTxt
|
||
}
|
||
},
|
||
|
||
},
|
||
],
|
||
|
||
yAxis: {
|
||
type: "value",
|
||
axisTick: {
|
||
show: false,
|
||
},
|
||
axisLine: {
|
||
show: false,
|
||
},
|
||
splitLine: {
|
||
lineStyle: {
|
||
type: "dashed",
|
||
color: "rgba(231, 233, 243, 0.5)",
|
||
},
|
||
},
|
||
axisLabel: {
|
||
color: "#9fa2ad",
|
||
},
|
||
},
|
||
series: [
|
||
{
|
||
name: "安全培训统计",
|
||
type: "bar",
|
||
data: yData1,
|
||
barWidth: 26,
|
||
label: {
|
||
show: true,
|
||
position: "top",
|
||
fontSize: 12,
|
||
color: "rgba(42, 46, 63, 0.44)",
|
||
// formatter:'{c}\n{c}%'
|
||
},
|
||
},
|
||
{
|
||
name: "不良人数统计",
|
||
type: "bar",
|
||
data: yData2,
|
||
barWidth: 26,
|
||
label: {
|
||
show: true,
|
||
position: "top",
|
||
fontSize: 12,
|
||
color: "rgba(42, 46, 63, 0.44)",
|
||
// formatter:'{c}\n{c}%'
|
||
},
|
||
},
|
||
],
|
||
dataZoom: [{
|
||
type: 'slider',
|
||
show: true, //flase直接隐藏图形
|
||
xAxisIndex: [0],
|
||
// left: '9%', //滚动条靠左侧的百分比
|
||
bottom: 5,
|
||
start: 0,//滚动条的起始位置
|
||
end: 20, //滚动条的截止位置（按比例分割你的柱状图x轴长度）
|
||
height:6,
|
||
showDetail: false,
|
||
showDataShadow: false,
|
||
}]
|
||
};
|
||
safeChart.setOption(option);
|
||
},
|
||
createProjectChart() {
|
||
let that = this;
|
||
var arr = [];
|
||
if (this.statisticsCount.projectcount) {
|
||
var json = this.statisticsCount.projectcount;
|
||
arr = [
|
||
json.constructionStageCount1,
|
||
json.constructionStageCount2,
|
||
json.constructionStageCount3,
|
||
json.constructionStageCount4,
|
||
json.constructionStageCount5,
|
||
json.constructionStageCount6,
|
||
json.constructionStageCount7,
|
||
json.constructionStageCount8,
|
||
json.constructionStageCount9,
|
||
json.constructionStageCount10,
|
||
json.constructionStageCount11,
|
||
json.constructionStageCount12,
|
||
json.constructionStageCount13,
|
||
json.constructionStageCount14,
|
||
json.constructionStageCount15,
|
||
];
|
||
}
|
||
|
||
let projectChart = echarts.init(this.$refs.projectChart);
|
||
var option = {
|
||
tooltip: {
|
||
trigger: "axis",
|
||
axisPointer: {
|
||
// 坐标轴指示器，坐标轴触发有效
|
||
type: "shadow", // 默认为直线，可选为：'line' | 'shadow'
|
||
},
|
||
},
|
||
color: that.company == "longguang" ? ["#1AA388"] : ["#44D7B6"],
|
||
grid: {
|
||
left: "0",
|
||
right: "20",
|
||
bottom: "0",
|
||
top: "20",
|
||
containLabel: true,
|
||
},
|
||
xAxis: {
|
||
type: "value",
|
||
splitLine: {
|
||
lineStyle: {
|
||
type: "dashed",
|
||
color: "rgba(231, 233, 243, 0.5)",
|
||
},
|
||
},
|
||
axisLine: {
|
||
lineStyle: {
|
||
color: "#D9D9D9",
|
||
},
|
||
},
|
||
axisLabel: {
|
||
textStyle: {
|
||
color: "#9fa2ad",
|
||
},
|
||
},
|
||
axisTick: {
|
||
show: false,
|
||
},
|
||
},
|
||
yAxis: {
|
||
axisLabel: {
|
||
textStyle: {
|
||
color: "#9fa2ad",
|
||
},
|
||
},
|
||
axisLine: {
|
||
lineStyle: {
|
||
color: "#D9D9D9",
|
||
},
|
||
},
|
||
type: "category",
|
||
axisTick: {
|
||
show: false,
|
||
},
|
||
data: [
|
||
"施工证获取",
|
||
"土方开挖",
|
||
"桩基",
|
||
"垫层完成",
|
||
"正负零",
|
||
"工程达到预售条件",
|
||
"主体施工",
|
||
"主体封顶",
|
||
"装饰装修",
|
||
"竣工备案完成",
|
||
],
|
||
},
|
||
series: [
|
||
{
|
||
name: "项目数",
|
||
type: "bar",
|
||
stack: "总量",
|
||
label: {
|
||
show: true,
|
||
position: "insideRight",
|
||
fontSize: 14,
|
||
},
|
||
barMinHeight: 18,
|
||
barMaxWidth: 24,
|
||
data: arr,
|
||
},
|
||
],
|
||
};
|
||
projectChart.setOption(option);
|
||
},
|
||
// 文件上传 之前
|
||
handleBeforeUpload(file, type) {
|
||
console.log(file);
|
||
let fileType = file.type.split("/")[0];
|
||
if (fileType == "video") {
|
||
this.fullscreenLoading = this.$loading({
|
||
lock: true,
|
||
text: "上传中，请稍等。。。",
|
||
spinner: "el-icon-loading",
|
||
background: "rgba(0, 0, 0, 0.7)",
|
||
});
|
||
return true;
|
||
} else {
|
||
this.$message.error("请选择视频");
|
||
return false;
|
||
}
|
||
},
|
||
//上传失败
|
||
handleError(file, type) {
|
||
this.fullscreenLoading.close();
|
||
this.$message.error("上传失败，请重试");
|
||
},
|
||
//上传成功
|
||
handleSuccess(file, type) {
|
||
if (file.code == 200 || file.status == "SUCCESS") {
|
||
var url = file.data[0].imageUrl;
|
||
this.saveOrDeleteVideo(url);
|
||
}
|
||
this.fullscreenLoading.close();
|
||
},
|
||
//保存或删除宣传视频
|
||
saveOrDeleteVideo(url) {
|
||
editCompanyBySnApi({
|
||
companySn: this.$store.state.userInfo.headquartersSn,
|
||
propagateFile: url,
|
||
}).then((res) => {
|
||
this.$message.success("上传成功");
|
||
var json = this.$store.state.userInfo;
|
||
json.propagateFile = url == "-1" ? "" : url;
|
||
this.$store.commit("setUserInfo", json);
|
||
});
|
||
},
|
||
},
|
||
};
|
||
</script>
|
||
<style lang="less" scoped>
|
||
.pageTitle {
|
||
margin-bottom: 10px;
|
||
}
|
||
|
||
.blockBox {
|
||
overflow: hidden;
|
||
|
||
&.bottom {
|
||
height: calc(100% - 550px);
|
||
min-height: 230px;
|
||
.chart {
|
||
// height: 170px;
|
||
height: calc(100% - 70px);
|
||
}
|
||
}
|
||
|
||
&.top {
|
||
margin-bottom: 20px;
|
||
height: 530px;
|
||
|
||
.centerBlock {
|
||
height: 100%;
|
||
position: relative;
|
||
.blockInner {
|
||
height: calc(100% - 30px);
|
||
}
|
||
}
|
||
|
||
.chart {
|
||
height: 423px;
|
||
}
|
||
}
|
||
.whiteBlock {
|
||
margin-right: 20px;
|
||
width: 400px;
|
||
float: left;
|
||
height: 100%;
|
||
&:last-child {
|
||
margin-right: 0;
|
||
}
|
||
}
|
||
|
||
.blockInner {
|
||
padding: 15px;
|
||
position: relative;
|
||
height: calc(100% - 30px);
|
||
}
|
||
|
||
.centerBlock {
|
||
width: calc(100% - 800px - 40px);
|
||
}
|
||
}
|
||
.mapContainer {
|
||
margin-top: 12px;
|
||
height: calc(100% - 40px);
|
||
position: relative;
|
||
}
|
||
.item1 {
|
||
display: flex;
|
||
align-items: center;
|
||
padding: 6px;
|
||
}
|
||
|
||
.numBox {
|
||
display: flex;
|
||
align-items: center;
|
||
|
||
.dataBox {
|
||
margin-left: 12px;
|
||
}
|
||
|
||
.num {
|
||
font-size: 20px;
|
||
}
|
||
|
||
.text {
|
||
font-size: 14px;
|
||
// color: #7C829E;
|
||
opacity: 0.7;
|
||
}
|
||
}
|
||
|
||
.todayAdd {
|
||
text-align: center;
|
||
margin-left: 20px;
|
||
|
||
p:nth-child(1) {
|
||
font-size: 17px;
|
||
}
|
||
|
||
p:nth-child(2) {
|
||
font-size: 14px;
|
||
// color: #7C829E;
|
||
opacity: 0.7;
|
||
}
|
||
}
|
||
|
||
.item2 {
|
||
padding: 15px 10px;
|
||
border-bottom: 1px dashed rgba(231, 233, 243, 1);
|
||
|
||
.itemInner {
|
||
display: flex;
|
||
margin-bottom: 9px;
|
||
|
||
&:last-child {
|
||
margin-bottom: 0;
|
||
}
|
||
|
||
.numItem {
|
||
flex: 1;
|
||
// color: rgba(38, 45, 71, 0.6);
|
||
opacity: 0.6;
|
||
font-size: 14px;
|
||
|
||
span {
|
||
font-size: 15px;
|
||
margin-left: 8px;
|
||
}
|
||
}
|
||
}
|
||
}
|
||
|
||
.numBoxContainer {
|
||
display: flex;
|
||
align-items: center;
|
||
margin-top: 15px;
|
||
|
||
.numBox {
|
||
min-width: 170px;
|
||
}
|
||
}
|
||
/deep/ .amap-marker-label {
|
||
background-color: @--color-primary;
|
||
color: #ffffff;
|
||
border: none;
|
||
border-radius: 5px;
|
||
width: 230px;
|
||
.mapInfo {
|
||
background-color: @--color-primary;
|
||
display: flex;
|
||
padding: 5px 0;
|
||
cursor: pointer;
|
||
.datas {
|
||
flex: 1;
|
||
text-align: center;
|
||
align-self: center;
|
||
}
|
||
.areaName {
|
||
display: flex;
|
||
align-items: center;
|
||
justify-content: center;
|
||
border-right: 1px solid #ddd;
|
||
padding: 0 5px;
|
||
white-space: normal;
|
||
}
|
||
}
|
||
}
|
||
|
||
.mapTitle {
|
||
top: 5px;
|
||
font-size: 14px;
|
||
padding: 5px 10px;
|
||
background-color: rgba(0, 0, 0, 0.5);
|
||
color: rgb(255, 255, 255);
|
||
border-radius: 3px;
|
||
transform: translate(-50%);
|
||
left: 50%;
|
||
position: absolute;
|
||
z-index: 9999;
|
||
}
|
||
|
||
.mapBack {
|
||
width: 30px;
|
||
height: 30px;
|
||
border-radius: 50%;
|
||
font-size: 22px;
|
||
color: #ffffff;
|
||
margin: 5px;
|
||
position: absolute;
|
||
background-color: rgba(0, 0, 0, 0.5);
|
||
z-index: 9999;
|
||
text-align: center;
|
||
line-height: 30px;
|
||
cursor: pointer;
|
||
}
|
||
|
||
.statictisBox {
|
||
display: flex;
|
||
align-items: center;
|
||
margin: auto;
|
||
justify-content: center;
|
||
|
||
.numBox {
|
||
margin-right: 87px;
|
||
|
||
&:last-child {
|
||
margin-right: 0 !important;
|
||
}
|
||
}
|
||
|
||
&.big {
|
||
.numBox {
|
||
margin-right: 0;
|
||
flex: auto;
|
||
justify-content: center;
|
||
}
|
||
}
|
||
|
||
.dataBox {
|
||
text-align: center;
|
||
}
|
||
}
|
||
|
||
.safeBtns {
|
||
position: absolute;
|
||
right: 15px;
|
||
top: 15px;
|
||
}
|
||
.selectBox {
|
||
position: absolute;
|
||
right: 10px;
|
||
top: 5px;
|
||
color: @--color-primary;
|
||
font-size: 12px;
|
||
background-color: #fff;
|
||
text-align: center;
|
||
width: 80px;
|
||
height: 30px;
|
||
line-height: 30px;
|
||
border-radius: 10px;
|
||
z-index: 9999;
|
||
cursor: pointer;
|
||
}
|
||
.selectContent {
|
||
padding: 10px;
|
||
box-sizing: border-box;
|
||
font-size: 14px;
|
||
background-color: #fff;
|
||
width: 230px;
|
||
height: calc(100% - 60px);
|
||
top: 50px;
|
||
right: 10px;
|
||
position: absolute;
|
||
z-index: 9999;
|
||
.selectItem {
|
||
cursor: pointer;
|
||
}
|
||
.title {
|
||
margin: 10px 0 5px;
|
||
font-weight: 600;
|
||
}
|
||
.datas {
|
||
display: flex;
|
||
align-items: center;
|
||
justify-content: space-around;
|
||
font-size: 12px;
|
||
height: 40px;
|
||
background-color: #fbfbfb;
|
||
.numBox2 {
|
||
p:first-child {
|
||
color: @--color-primary;
|
||
}
|
||
}
|
||
}
|
||
}
|
||
.deleteBtn {
|
||
position: absolute;
|
||
top: 15px;
|
||
right: 15px;
|
||
}
|
||
</style>
|