1863 lines
55 KiB
Vue
1863 lines
55 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,
|
|||
|
|
getDConstructionStageListApi
|
|||
|
|
} 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
|
|||
|
|
},
|
|||
|
|
//查询项目概况阶段
|
|||
|
|
getDictionaryItemList(){
|
|||
|
|
getDConstructionStageListApi({
|
|||
|
|
sn: this.searchsn
|
|||
|
|
}).then(res=>{
|
|||
|
|
console.log('查询项目概况阶段----',res);
|
|||
|
|
let nameData=[]
|
|||
|
|
let dataX=[]
|
|||
|
|
if(res.result.length>0){
|
|||
|
|
res.result.forEach(item=>{
|
|||
|
|
nameData.push(item.name)
|
|||
|
|
dataX.push(item.count)
|
|||
|
|
})
|
|||
|
|
}
|
|||
|
|
this.createProjectChart(nameData,dataX)
|
|||
|
|
})
|
|||
|
|
},
|
|||
|
|
|
|||
|
|
//安全分析
|
|||
|
|
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.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();
|
|||
|
|
this.getDictionaryItemList()
|
|||
|
|
},
|
|||
|
|
//获取项目详细
|
|||
|
|
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) {
|
|||
|
|
console.log("test1");
|
|||
|
|
var _this = this;
|
|||
|
|
if (_this.mapData[index].list) {
|
|||
|
|
console.log("test2");
|
|||
|
|
var json = {
|
|||
|
|
sn: _this.mapData[index].companySn,
|
|||
|
|
name: _this.mapData[index].name,
|
|||
|
|
};
|
|||
|
|
_this.backArr.forEach(element=>{
|
|||
|
|
if(element.name==json.name){
|
|||
|
|
return
|
|||
|
|
}
|
|||
|
|
})
|
|||
|
|
_this.backArr.push(json);
|
|||
|
|
_this.$store.commit("setMapBackArr", _this.backArr);
|
|||
|
|
_this.showMapDialog = false;
|
|||
|
|
_this.initData()
|
|||
|
|
} else {
|
|||
|
|
console.log("test3");
|
|||
|
|
if (_this.mapData[index].projectName && _this.backArr.length < 3) {
|
|||
|
|
console.log("test4");
|
|||
|
|
var json = {
|
|||
|
|
sn: _this.mapData[index].projectSn,
|
|||
|
|
name: _this.mapData[index].name,
|
|||
|
|
};
|
|||
|
|
_this.backArr.forEach(element=>{
|
|||
|
|
if(element.name==json.name){
|
|||
|
|
return
|
|||
|
|
}
|
|||
|
|
})
|
|||
|
|
_this.backArr.push(json);
|
|||
|
|
_this.$store.commit("setMapBackArr", _this.backArr);
|
|||
|
|
_this.showMapDialog = false;
|
|||
|
|
_this.initData()
|
|||
|
|
} else {
|
|||
|
|
_this.$message("该区域下没有数据！");
|
|||
|
|
}
|
|||
|
|
}
|
|||
|
|
},
|
|||
|
|
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?v.value1:0)
|
|||
|
|
// [100, 138, 350, 173, 180, 150, 180, 230]
|
|||
|
|
let yAxisData2 = echartData.map((v) => v.value2? v.value2:0)
|
|||
|
|
let yAxisData3 = echartData.map((v) => v.value3?v.value3:0)
|
|||
|
|
// [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: 45,
|
|||
|
|
left: 15,
|
|||
|
|
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(nameData,dataX) {
|
|||
|
|
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: [
|
|||
|
|
// "施工证获取",
|
|||
|
|
// "土方开挖",
|
|||
|
|
// "桩基",
|
|||
|
|
// "垫层完成",
|
|||
|
|
// "正负零",
|
|||
|
|
// "工程达到预售条件",
|
|||
|
|
// "主体施工",
|
|||
|
|
// "主体封顶",
|
|||
|
|
// "装饰装修",
|
|||
|
|
// "竣工备案完成",
|
|||
|
|
// ],
|
|||
|
|
data: nameData,
|
|||
|
|
},
|
|||
|
|
series: [
|
|||
|
|
{
|
|||
|
|
name: "项目数",
|
|||
|
|
type: "bar",
|
|||
|
|
stack: "总量",
|
|||
|
|
label: {
|
|||
|
|
show: true,
|
|||
|
|
position: "insideRight",
|
|||
|
|
fontSize: 14,
|
|||
|
|
},
|
|||
|
|
barMinHeight: 18,
|
|||
|
|
barMaxWidth: 24,
|
|||
|
|
data: dataX,
|
|||
|
|
},
|
|||
|
|
],
|
|||
|
|
};
|
|||
|
|
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>
|