3457 lines
100 KiB
Vue
3457 lines
100 KiB
Vue
|
<template>
|
|||
|
|
<div id="mapDiv">
|
|||
|
|
<Map @mapView="getMap"></Map>
|
|||
|
|
<div id="control">
|
|||
|
|
<div class="map-control">
|
|||
|
|
<div class="map-type-button" v-if="!isHot" @click="changeHotMap">
|
|||
|
|
<img class="map-img" src="../../../static/img/hot.png" />
|
|||
|
|
</div>
|
|||
|
|
<div class="map-type-button" v-else @click="changeHotMap">
|
|||
|
|
<img class="map-img" src="../../../static/img/vec.png" />
|
|||
|
|
</div>
|
|||
|
|
</div>
|
|||
|
|
</div>
|
|||
|
|
<transition
|
|||
|
|
v-on:before-enter="beforeEnter"
|
|||
|
|
v-on:enter="enter"
|
|||
|
|
v-on:before-leave="beforeLeave"
|
|||
|
|
v-on:leave="leave"
|
|||
|
|
>
|
|||
|
|
<div v-show="collapsed" id="leftPanel">
|
|||
|
|
<div>
|
|||
|
|
<!--展开折叠开关-->
|
|||
|
|
<div @click.prevent="collapse" id="toLeft">
|
|||
|
|
<i
|
|||
|
|
v-if="collapsed"
|
|||
|
|
class="el-icon-arrow-left"
|
|||
|
|
title="收起"
|
|||
|
|
style="margin-top: 13px; color: #264672"
|
|||
|
|
></i>
|
|||
|
|
<i
|
|||
|
|
v-else
|
|||
|
|
class="el-icon-arrow-right"
|
|||
|
|
title="展开"
|
|||
|
|
style="margin-top: 13px; color: #264672"
|
|||
|
|
></i>
|
|||
|
|
</div>
|
|||
|
|
</div>
|
|||
|
|
<div id="leftPanelScroll">
|
|||
|
|
<div class="left-content">
|
|||
|
|
<el-tabs v-model="activeName">
|
|||
|
|
<el-tab-pane label="任务进度" name="first">
|
|||
|
|
<el-select
|
|||
|
|
v-model="task"
|
|||
|
|
size="small"
|
|||
|
|
style="width: 45%; margin-bottom: 15px"
|
|||
|
|
placeholder="请选择任务"
|
|||
|
|
@change="changeTask()"
|
|||
|
|
>
|
|||
|
|
<el-option
|
|||
|
|
v-for="item in taskoptions"
|
|||
|
|
:key="item.value"
|
|||
|
|
:label="item.label"
|
|||
|
|
:value="item.value"
|
|||
|
|
></el-option>
|
|||
|
|
</el-select>
|
|||
|
|
<el-select
|
|||
|
|
id="sTable"
|
|||
|
|
v-model="table"
|
|||
|
|
size="small"
|
|||
|
|
style="width: 45%; margin-bottom: 15px"
|
|||
|
|
placeholder="请选择表"
|
|||
|
|
@focus="getTables()"
|
|||
|
|
@change="changeTable1()"
|
|||
|
|
>
|
|||
|
|
<el-option
|
|||
|
|
v-for="item in tableoptions"
|
|||
|
|
:key="item.value"
|
|||
|
|
:label="item.label"
|
|||
|
|
:value="item.value"
|
|||
|
|
></el-option>
|
|||
|
|
</el-select>
|
|||
|
|
<el-date-picker
|
|||
|
|
size="small"
|
|||
|
|
style="width: 91% !important; margin-bottom: 15px"
|
|||
|
|
v-model="date"
|
|||
|
|
type="datetimerange"
|
|||
|
|
value-format="yyyy-MM-dd HH:mm:ss"
|
|||
|
|
range-separator="至"
|
|||
|
|
start-placeholder="开始日期"
|
|||
|
|
end-placeholder="结束日期"
|
|||
|
|
></el-date-picker>
|
|||
|
|
<div style="width: 70%; margin-left: auto; margin-right: auto">
|
|||
|
|
<el-radio v-model="radio" label="day" style="width: 20%"
|
|||
|
|
>日</el-radio
|
|||
|
|
>
|
|||
|
|
<el-radio v-model="radio" label="month" style="width: 20%"
|
|||
|
|
>月</el-radio
|
|||
|
|
>
|
|||
|
|
<el-button
|
|||
|
|
size="small"
|
|||
|
|
icon="el-icon-search"
|
|||
|
|
@click="getEChart()"
|
|||
|
|
class="dateBtn"
|
|||
|
|
></el-button>
|
|||
|
|
</div>
|
|||
|
|
<el-radio-group
|
|||
|
|
v-model="echartRadio"
|
|||
|
|
size="mini"
|
|||
|
|
v-show="isEchartShow"
|
|||
|
|
>
|
|||
|
|
<el-radio-button :label="1">任务采集总量</el-radio-button>
|
|||
|
|
<el-radio-button :label="2">任务采集进度</el-radio-button>
|
|||
|
|
</el-radio-group>
|
|||
|
|
<div style="display: flex; justify-content: center">
|
|||
|
|
<div
|
|||
|
|
id="myChart1"
|
|||
|
|
style="margin-top: 20px; width: 350px; height: 600px"
|
|||
|
|
v-show="echartRadio == '1'"
|
|||
|
|
></div>
|
|||
|
|
</div>
|
|||
|
|
<div style="display: flex; justify-content: center">
|
|||
|
|
<div
|
|||
|
|
id="myChart2"
|
|||
|
|
style="width: 350px; height: 600px"
|
|||
|
|
v-show="echartRadio == '2'"
|
|||
|
|
></div>
|
|||
|
|
</div>
|
|||
|
|
</el-tab-pane>
|
|||
|
|
<el-tab-pane label="任务报告" name="second">
|
|||
|
|
<p>
|
|||
|
|
任务：
|
|||
|
|
<el-select
|
|||
|
|
v-model="ReportTask"
|
|||
|
|
size="small"
|
|||
|
|
style="width: 60%; margin-bottom: 15px"
|
|||
|
|
placeholder="请选择任务"
|
|||
|
|
@change="table = ''"
|
|||
|
|
>
|
|||
|
|
<el-option
|
|||
|
|
v-for="item in reportoptions"
|
|||
|
|
:key="item.value"
|
|||
|
|
:label="item.label"
|
|||
|
|
:value="item.value"
|
|||
|
|
></el-option>
|
|||
|
|
</el-select>
|
|||
|
|
</p>
|
|||
|
|
<el-button size="small" @click="getReport()" class="dateBtn"
|
|||
|
|
>查看报告</el-button
|
|||
|
|
>
|
|||
|
|
</el-tab-pane>
|
|||
|
|
<el-tab-pane label="异常监管" name="third">
|
|||
|
|
<el-form
|
|||
|
|
ref="warningform"
|
|||
|
|
:model="warningform"
|
|||
|
|
label-width="100px"
|
|||
|
|
>
|
|||
|
|
<el-form-item label="任务:" style="margin-bottom: 10px">
|
|||
|
|
<el-select
|
|||
|
|
style="width: 90%; margin-left: -30px"
|
|||
|
|
v-model="warningform.task"
|
|||
|
|
size="small"
|
|||
|
|
placeholder="请选择任务"
|
|||
|
|
@change="getWarningTables"
|
|||
|
|
>
|
|||
|
|
<el-option
|
|||
|
|
v-for="item in wTaskOptions"
|
|||
|
|
:key="item.value"
|
|||
|
|
:label="item.label"
|
|||
|
|
:value="item.value"
|
|||
|
|
></el-option>
|
|||
|
|
</el-select>
|
|||
|
|
</el-form-item>
|
|||
|
|
<el-form-item label="表:" style="margin-bottom: 10px">
|
|||
|
|
<el-select
|
|||
|
|
style="width: 90%; margin-left: -30px"
|
|||
|
|
v-model="warningform.table"
|
|||
|
|
size="small"
|
|||
|
|
placeholder="请选择表"
|
|||
|
|
>
|
|||
|
|
<el-option
|
|||
|
|
v-for="item in WTableOptions"
|
|||
|
|
:key="item.value"
|
|||
|
|
:label="item.label"
|
|||
|
|
:value="item.value"
|
|||
|
|
></el-option>
|
|||
|
|
</el-select>
|
|||
|
|
</el-form-item>
|
|||
|
|
<el-form-item
|
|||
|
|
label="异常上限比例:"
|
|||
|
|
style="margin-bottom: 10px"
|
|||
|
|
>
|
|||
|
|
<el-tooltip
|
|||
|
|
effect="light"
|
|||
|
|
content="异常上限值为小数，如1.5，代表对于采集平均量的比例。根据异常上限值统计采集量高于采集平均量乘以异常上限值的异常情况。"
|
|||
|
|
placement="right"
|
|||
|
|
>
|
|||
|
|
<!-- <el-input
|
|||
|
|
style="width: 90%; margin-left: -30px"
|
|||
|
|
type="number"
|
|||
|
|
v-model="warningform.maxratio"
|
|||
|
|
placeholder="默认1.33"
|
|||
|
|
clearable
|
|||
|
|
></el-input> -->
|
|||
|
|
<el-input-number
|
|||
|
|
style="width: 90%; margin-left: -30px"
|
|||
|
|
v-model="warningform.maxratio"
|
|||
|
|
:precision="2"
|
|||
|
|
:step="0.1"
|
|||
|
|
:max="10"
|
|||
|
|
:min="0"
|
|||
|
|
placeholder="默认1.33"
|
|||
|
|
>
|
|||
|
|
</el-input-number>
|
|||
|
|
</el-tooltip>
|
|||
|
|
</el-form-item>
|
|||
|
|
<el-form-item
|
|||
|
|
label="异常下限比例:"
|
|||
|
|
style="margin-bottom: 10px"
|
|||
|
|
>
|
|||
|
|
<el-tooltip
|
|||
|
|
effect="light"
|
|||
|
|
content="异常下限值为小数，如0.5，代表对于采集平均量的比例。根据异常下限值统计采集量低于采集平均量乘以异常下限值的异常情况。"
|
|||
|
|
placement="right"
|
|||
|
|
>
|
|||
|
|
<el-input-number
|
|||
|
|
style="width: 90%; margin-left: -30px"
|
|||
|
|
v-model="warningform.minratio"
|
|||
|
|
:precision="2"
|
|||
|
|
:step="0.1"
|
|||
|
|
:max="10"
|
|||
|
|
:min="0"
|
|||
|
|
placeholder="默认0.67"
|
|||
|
|
>
|
|||
|
|
</el-input-number>
|
|||
|
|
<!-- <el-input
|
|||
|
|
style="width: 90%; margin-left: -30px"
|
|||
|
|
type="number"
|
|||
|
|
v-model="warningform.minratio"
|
|||
|
|
placeholder="默认0.67"
|
|||
|
|
clearable
|
|||
|
|
></el-input> -->
|
|||
|
|
</el-tooltip>
|
|||
|
|
</el-form-item>
|
|||
|
|
</el-form>
|
|||
|
|
<el-button size="small" @click="getWarning()" class="dateBtn"
|
|||
|
|
>查看详情</el-button
|
|||
|
|
>
|
|||
|
|
<!-- <div style="text-align: left">
|
|||
|
|
注：异常上限值和异常下限值均输入带小数的数字，如（1.5和0.5），代表对于采集平均量的比例。根据上限值统计采集量超出平均量*上限比例的异常情况，根据下限值统计低于平均量*下限比例的异常情况。
|
|||
|
|
</div> -->
|
|||
|
|
<div v-show="IsWarningShow">
|
|||
|
|
<div style="text-align: left">
|
|||
|
|
<p
|
|||
|
|
style="
|
|||
|
|
font-size: 15px !important;
|
|||
|
|
font-weight: bold;
|
|||
|
|
text-indent: 2em;
|
|||
|
|
"
|
|||
|
|
>
|
|||
|
|
该任务的平均采集为{{ averageNum }}，异常上限采集量为{{
|
|||
|
|
highLimitNum
|
|||
|
|
}}，异常下限采集量为{{ lowLimitNum }}。共有{{
|
|||
|
|
warningWorkerNum
|
|||
|
|
}}人工作完成情况异常，详情如下：
|
|||
|
|
</p>
|
|||
|
|
</div>
|
|||
|
|
<el-table
|
|||
|
|
:data="warningData"
|
|||
|
|
border
|
|||
|
|
row-key="id"
|
|||
|
|
:tree-props="{ children: 'children' }"
|
|||
|
|
height="650px"
|
|||
|
|
style="width: 98%; margin-top: 5px"
|
|||
|
|
>
|
|||
|
|
<el-table-column
|
|||
|
|
prop="username"
|
|||
|
|
label="姓名"
|
|||
|
|
min-width="100"
|
|||
|
|
></el-table-column>
|
|||
|
|
<el-table-column
|
|||
|
|
prop="date"
|
|||
|
|
label="日期"
|
|||
|
|
min-width="120"
|
|||
|
|
></el-table-column>
|
|||
|
|
<el-table-column
|
|||
|
|
prop="count"
|
|||
|
|
label="采集量"
|
|||
|
|
min-width="60"
|
|||
|
|
></el-table-column>
|
|||
|
|
</el-table>
|
|||
|
|
</div>
|
|||
|
|
</el-tab-pane>
|
|||
|
|
<el-tab-pane label="人员统计" name="fourth">
|
|||
|
|
<span>任务:</span>
|
|||
|
|
<el-select
|
|||
|
|
style="width: 80%; margin-bottom: 20px"
|
|||
|
|
v-model="workersTask"
|
|||
|
|
size="small"
|
|||
|
|
placeholder="请选择任务"
|
|||
|
|
>
|
|||
|
|
<el-option
|
|||
|
|
v-for="item in wTaskOptions"
|
|||
|
|
:key="item.value"
|
|||
|
|
:label="item.label"
|
|||
|
|
:value="item.value"
|
|||
|
|
></el-option>
|
|||
|
|
</el-select>
|
|||
|
|
<el-button size="small" @click="getWorkers()" class="dateBtn"
|
|||
|
|
>查看详情</el-button
|
|||
|
|
>
|
|||
|
|
</el-tab-pane>
|
|||
|
|
</el-tabs>
|
|||
|
|
</div>
|
|||
|
|
</div>
|
|||
|
|
</div>
|
|||
|
|
</transition>
|
|||
|
|
<el-card class="ReportCard" v-show="this.IsCardShow">
|
|||
|
|
<div slot="header" class="clearfix">
|
|||
|
|
<span>任务报告</span>
|
|||
|
|
<el-button
|
|||
|
|
style="float: right; padding: 3px 0"
|
|||
|
|
type="text"
|
|||
|
|
@click="IsCardShow = false"
|
|||
|
|
>关闭</el-button
|
|||
|
|
>
|
|||
|
|
</div>
|
|||
|
|
<el-tabs v-model="activeName1" style="height: 100%">
|
|||
|
|
<el-tab-pane
|
|||
|
|
label="任务信息统计报告"
|
|||
|
|
name="first"
|
|||
|
|
style="height: 100%; overflow: scroll"
|
|||
|
|
>
|
|||
|
|
<div class="reportPage" v-show="this.taskMessage == true">
|
|||
|
|
<div v-for="i in tableStatNum" :key="i">
|
|||
|
|
<p style="font-size: 17px !important; font-weight: bold">
|
|||
|
|
{{ i }} {{ tableName[i - 1] }}
|
|||
|
|
</p>
|
|||
|
|
<p
|
|||
|
|
style="
|
|||
|
|
font-size: 16px !important;
|
|||
|
|
font-weight: bold;
|
|||
|
|
margin-left: 10px;
|
|||
|
|
"
|
|||
|
|
>
|
|||
|
|
{{ i }}.1 每日采集量
|
|||
|
|
</p>
|
|||
|
|
<div
|
|||
|
|
style="height: 300px; width: 600px; margin: 0 auto"
|
|||
|
|
:id="'dailyDataEchart' + (i - 1)"
|
|||
|
|
></div>
|
|||
|
|
<p style="font-size: 15px !important; margin-left: 20px">
|
|||
|
|
其中，采集总量为{{ tableCount[i - 1] }}，平均每天的采集量为{{
|
|||
|
|
tableDailyAvg[i - 1]
|
|||
|
|
}}，{{ tableMaxDaily[i - 1] }}采集量最多，为{{
|
|||
|
|
tableMaxDailyNum[i - 1]
|
|||
|
|
}}；{{ tableMinDaily[i - 1] }}采集量最少，为{{
|
|||
|
|
tableMinDailyNum[i - 1]
|
|||
|
|
}}。
|
|||
|
|
</p>
|
|||
|
|
<p
|
|||
|
|
style="
|
|||
|
|
font-size: 16px !important;
|
|||
|
|
font-weight: bold;
|
|||
|
|
margin-left: 10px;
|
|||
|
|
"
|
|||
|
|
>
|
|||
|
|
{{ i }}.2 每日采集进度
|
|||
|
|
</p>
|
|||
|
|
<div
|
|||
|
|
style="height: 300px; width: 600px; margin: 0 auto"
|
|||
|
|
:id="'dailyRatioEchart' + (i - 1)"
|
|||
|
|
></div>
|
|||
|
|
<p
|
|||
|
|
style="
|
|||
|
|
font-size: 16px !important;
|
|||
|
|
font-weight: bold;
|
|||
|
|
margin-left: 10px;
|
|||
|
|
"
|
|||
|
|
>
|
|||
|
|
{{ i }}.3 每月采集量
|
|||
|
|
</p>
|
|||
|
|
<div
|
|||
|
|
style="height: 300px; width: 600px; margin: 0 auto"
|
|||
|
|
:id="'monthlyDataEchart' + (i - 1)"
|
|||
|
|
></div>
|
|||
|
|
<p style="font-size: 15px !important; margin-left: 20px">
|
|||
|
|
其中，平均每月的采集量为{{ tableMonthlyAvg[i - 1] }}，{{
|
|||
|
|
tableMaxMonthly[i - 1]
|
|||
|
|
}}采集量最多，为{{ tableMaxMonthlyNum[i - 1] }}；{{
|
|||
|
|
tableMinMonthly[i - 1]
|
|||
|
|
}}采集量最少，为{{ tableMinMonthlyNum[i - 1] }}。
|
|||
|
|
</p>
|
|||
|
|
<p
|
|||
|
|
style="
|
|||
|
|
font-size: 16px !important;
|
|||
|
|
font-weight: bold;
|
|||
|
|
margin-left: 10px;
|
|||
|
|
"
|
|||
|
|
>
|
|||
|
|
{{ i }}.4 每月采集进度
|
|||
|
|
</p>
|
|||
|
|
<div
|
|||
|
|
style="height: 300px; width: 600px; margin: 0 auto"
|
|||
|
|
:id="'monthlyRatioEchart' + (i - 1)"
|
|||
|
|
></div>
|
|||
|
|
</div>
|
|||
|
|
</div>
|
|||
|
|
</el-tab-pane>
|
|||
|
|
<el-tab-pane
|
|||
|
|
label="人员信息统计报告"
|
|||
|
|
name="second"
|
|||
|
|
style="height: 100%; overflow: scroll"
|
|||
|
|
>
|
|||
|
|
<div class="reportPage" v-show="this.workerMessage == true">
|
|||
|
|
<p style="font-size: 17px !important; font-weight: bold">
|
|||
|
|
一、工作人员列表
|
|||
|
|
</p>
|
|||
|
|
<el-table :data="workerInfo" style="width: 100%">
|
|||
|
|
<el-table-column
|
|||
|
|
prop="name"
|
|||
|
|
label="工作人员"
|
|||
|
|
min-width="180"
|
|||
|
|
></el-table-column>
|
|||
|
|
<el-table-column
|
|||
|
|
prop="phone"
|
|||
|
|
label="手机号"
|
|||
|
|
min-width="180"
|
|||
|
|
></el-table-column>
|
|||
|
|
<el-table-column prop="email" label="邮箱"></el-table-column>
|
|||
|
|
</el-table>
|
|||
|
|
<!--对于表统计-->
|
|||
|
|
<p style="font-size: 17px !important; font-weight: bold">
|
|||
|
|
二、下面分别对子任务下工作人员完成任务的情况进行统计
|
|||
|
|
</p>
|
|||
|
|
<div v-for="(j, m) in tableNum" :key="m">
|
|||
|
|
<p
|
|||
|
|
style="
|
|||
|
|
font-size: 16px !important;
|
|||
|
|
font-weight: bold;
|
|||
|
|
margin-left: 10px;
|
|||
|
|
"
|
|||
|
|
>
|
|||
|
|
2.{{ j }} {{ TableList[j - 1] }}
|
|||
|
|
</p>
|
|||
|
|
<p style="font-size: 15px !important; margin-left: 10px">
|
|||
|
|
2.{{ j }}.1 每人完成工作任务总量统计图
|
|||
|
|
</p>
|
|||
|
|
<div
|
|||
|
|
style="height: 300px; width: 600px; margin: 0 auto"
|
|||
|
|
:id="'workLoad' + (j - 1)"
|
|||
|
|
></div>
|
|||
|
|
<p style="font-size: 15px !important; margin-left: 10px">
|
|||
|
|
2.{{ j }}.2 每人每天完成工作任务平均量统计图
|
|||
|
|
</p>
|
|||
|
|
<div
|
|||
|
|
style="height: 300px; width: 600px; margin: 0 auto"
|
|||
|
|
:id="'avgWorkLoad' + (j - 1)"
|
|||
|
|
></div>
|
|||
|
|
</div>
|
|||
|
|
<div>
|
|||
|
|
<p style="font-size: 17px !important; font-weight: bold">
|
|||
|
|
三、下面分别对每人每天完成的工作任务量进行统计
|
|||
|
|
</p>
|
|||
|
|
<div v-for="(k, m) in workerNum" :key="m">
|
|||
|
|
<p
|
|||
|
|
style="
|
|||
|
|
font-size: 16px !important;
|
|||
|
|
font-weight: bold;
|
|||
|
|
margin-left: 10px;
|
|||
|
|
"
|
|||
|
|
>
|
|||
|
|
3.{{ k }} {{ WorkerList[k - 1] }}
|
|||
|
|
</p>
|
|||
|
|
<div v-for="(j, m) in tableNum" :key="m">
|
|||
|
|
<p style="font-size: 15px !important; margin-left: 20px">
|
|||
|
|
3.{{ k }}.{{ j }} {{ TableList[j - 1] }}
|
|||
|
|
</p>
|
|||
|
|
<div
|
|||
|
|
style="height: 300px; width: 600px; margin: 0 auto"
|
|||
|
|
:id="
|
|||
|
|
'workLoadDaily' + (j - 1).toString() + (k - 1).toString()
|
|||
|
|
"
|
|||
|
|
></div>
|
|||
|
|
</div>
|
|||
|
|
</div>
|
|||
|
|
</div>
|
|||
|
|
</div>
|
|||
|
|
</el-tab-pane>
|
|||
|
|
</el-tabs>
|
|||
|
|
</el-card>
|
|||
|
|
<el-dialog title="人员统计情况" :visible.sync="IsWorkersShow">
|
|||
|
|
<el-table
|
|||
|
|
:data="workersData"
|
|||
|
|
border
|
|||
|
|
height="450px"
|
|||
|
|
style="width: 98%; margin-top: 5px"
|
|||
|
|
show-summary
|
|||
|
|
>
|
|||
|
|
<el-table-column
|
|||
|
|
prop="realName"
|
|||
|
|
label="用户"
|
|||
|
|
min-width="60"
|
|||
|
|
></el-table-column>
|
|||
|
|
<el-table-column
|
|||
|
|
prop="reviewerTotalWorkload"
|
|||
|
|
label="分配任务量"
|
|||
|
|
min-width="50"
|
|||
|
|
></el-table-column>
|
|||
|
|
<el-table-column
|
|||
|
|
prop="collectedDataCount"
|
|||
|
|
label="采集数据量"
|
|||
|
|
min-width="50"
|
|||
|
|
></el-table-column>
|
|||
|
|
<el-table-column
|
|||
|
|
prop="invalidDataCount"
|
|||
|
|
label="未通过审核的数据量"
|
|||
|
|
min-width="90"
|
|||
|
|
></el-table-column>
|
|||
|
|
<el-table-column
|
|||
|
|
prop="toBeReviewedDataCount"
|
|||
|
|
label="待审核的数据量"
|
|||
|
|
min-width="70"
|
|||
|
|
></el-table-column>
|
|||
|
|
<el-table-column
|
|||
|
|
prop="validDataCount"
|
|||
|
|
label="通过审核的数据量"
|
|||
|
|
min-width="80"
|
|||
|
|
></el-table-column>
|
|||
|
|
<el-table-column
|
|||
|
|
prop="newDataCount"
|
|||
|
|
label="新增数据量"
|
|||
|
|
min-width="60"
|
|||
|
|
></el-table-column>
|
|||
|
|
</el-table>
|
|||
|
|
</el-dialog>
|
|||
|
|
|
|||
|
|
<el-dialog
|
|||
|
|
v-dialogDrag
|
|||
|
|
class="infoDialog2"
|
|||
|
|
title="数据信息"
|
|||
|
|
:close-on-click-modal="false"
|
|||
|
|
:visible.sync="dialogVisible"
|
|||
|
|
>
|
|||
|
|
<p>
|
|||
|
|
请选择查看数据：
|
|||
|
|
<el-select
|
|||
|
|
v-model="currentFeatureId"
|
|||
|
|
style="width: 55%"
|
|||
|
|
placeholder="请选择数据id"
|
|||
|
|
>
|
|||
|
|
<el-option
|
|||
|
|
v-for="item in FeaturesId"
|
|||
|
|
:key="item.value"
|
|||
|
|
:label="item.label"
|
|||
|
|
:value="item.value"
|
|||
|
|
></el-option>
|
|||
|
|
</el-select>
|
|||
|
|
</p>
|
|||
|
|
<featureInfo :data="Info" style="margin: 0 auto" />
|
|||
|
|
</el-dialog>
|
|||
|
|
</div>
|
|||
|
|
</template>
|
|||
|
|
|
|||
|
|
<script>
|
|||
|
|
import Map from "../Mapview/Map";
|
|||
|
|
import VectorLayer from "ol/layer/Vector";
|
|||
|
|
import VectorSource from "ol/source/Vector";
|
|||
|
|
import GeoJSON from "ol/format/GeoJSON";
|
|||
|
|
import { ajax as request } from "@/request.js";
|
|||
|
|
import featureInfo from "../DataManagement/featureInfo";
|
|||
|
|
import Select from "ol/interaction/Select";
|
|||
|
|
import "ol/ol.css";
|
|||
|
|
import Feature from "ol/Feature";
|
|||
|
|
import Point from "ol/geom/Point";
|
|||
|
|
import HeatmapLayer from "ol/layer/heatmap";
|
|||
|
|
import { Cluster } from "ol/source";
|
|||
|
|
import { Circle as CircleStyle, Fill, Stroke, Style, Text } from "ol/style";
|
|||
|
|
let echarts = require("echarts/lib/echarts");
|
|||
|
|
require("echarts/lib/chart/bar");
|
|||
|
|
require("echarts/lib/component/title");
|
|||
|
|
require("echarts/lib/component/tooltip");
|
|||
|
|
require("echarts/lib/component/dataZoom");
|
|||
|
|
require("echarts/lib/component/legend");
|
|||
|
|
|
|||
|
|
export default {
|
|||
|
|
name: "ViewTask",
|
|||
|
|
data() {
|
|||
|
|
return {
|
|||
|
|
workerMessage: false,
|
|||
|
|
taskMessage: false,
|
|||
|
|
isHot: false,
|
|||
|
|
heatmapLayer: null,
|
|||
|
|
IsWarningShow: false,
|
|||
|
|
sameCount: [],
|
|||
|
|
WarningTask: "",
|
|||
|
|
warningData: [],
|
|||
|
|
warningWorkerNum: 0,
|
|||
|
|
|
|||
|
|
activeName1: "first",
|
|||
|
|
|
|||
|
|
///人员统计
|
|||
|
|
workerNum: [],
|
|||
|
|
tableNum: [],
|
|||
|
|
|
|||
|
|
workerInfo: [],
|
|||
|
|
|
|||
|
|
//放表名 一个表 一个每人统计数据 统计 每人的工作总量 每人的平均工作量
|
|||
|
|
TableList: [],
|
|||
|
|
//工作人员
|
|||
|
|
WorkerList: [],
|
|||
|
|
//工作总总量 数组 数组 按照table顺序排列[按照人员排列]
|
|||
|
|
workLoadList: [],
|
|||
|
|
//平均工作量 上同
|
|||
|
|
avgWorkLoadList: [],
|
|||
|
|
|
|||
|
|
//选择人 选择表 数组 数组 按照table顺序排列 按照人员排列 天及其对应的工作量
|
|||
|
|
workLoadDaily: [],
|
|||
|
|
myWorkLoadEchart: [],
|
|||
|
|
myAvgWorkLoadEchart: [],
|
|||
|
|
myWorkLoadDailyEchart: [],
|
|||
|
|
|
|||
|
|
myTableDailyDataEchart: [],
|
|||
|
|
myTableDailyRatioEchart: [],
|
|||
|
|
myTableMonthlyRatioEchart: [],
|
|||
|
|
myTableMonthlyDataEchart: [],
|
|||
|
|
//表数
|
|||
|
|
tableStatNum: [],
|
|||
|
|
//表名字、采集总量
|
|||
|
|
tableName: [],
|
|||
|
|
tableCount: [],
|
|||
|
|
tableDailyAvg: [],
|
|||
|
|
tableMonthlyAvg: [],
|
|||
|
|
|
|||
|
|
//对象数组数组 包含所有表的按天统计数据
|
|||
|
|
dailyTableData: [],
|
|||
|
|
//对象数组数组 包含所有表的按月统计数据
|
|||
|
|
monthlyTableData: [],
|
|||
|
|
|
|||
|
|
//对象数组数组 包含所有表的按天统计比率
|
|||
|
|
dailyTableRatio: [],
|
|||
|
|
//对象数组数组 包含所有表的按月统计比率
|
|||
|
|
monthlyTableRatio: [],
|
|||
|
|
|
|||
|
|
//最大采集量日
|
|||
|
|
tableMaxDaily: [],
|
|||
|
|
tableMaxDailyNum: [],
|
|||
|
|
//最大采集量月
|
|||
|
|
tableMaxMonthly: [],
|
|||
|
|
tableMaxMonthlyNum: [],
|
|||
|
|
//最小采集量日
|
|||
|
|
tableMinDaily: [],
|
|||
|
|
tableMinDailyNum: [],
|
|||
|
|
//最小采集量月
|
|||
|
|
tableMinMonthly: [],
|
|||
|
|
tableMinMonthlyNum: [],
|
|||
|
|
ReportTask: "",
|
|||
|
|
reportoptions: [],
|
|||
|
|
|
|||
|
|
IsCardShow: false,
|
|||
|
|
|
|||
|
|
collapsed: true,
|
|||
|
|
drawer: false,
|
|||
|
|
activeName: "first",
|
|||
|
|
total: "",
|
|||
|
|
myChart1: null,
|
|||
|
|
myChart2: null,
|
|||
|
|
data: [],
|
|||
|
|
ratio: [],
|
|||
|
|
task: "",
|
|||
|
|
table: "",
|
|||
|
|
date: "",
|
|||
|
|
radio: "day",
|
|||
|
|
value: "",
|
|||
|
|
taskoptions: [],
|
|||
|
|
tableoptions: [],
|
|||
|
|
myChart: null,
|
|||
|
|
min: [],
|
|||
|
|
max: [],
|
|||
|
|
avg: [],
|
|||
|
|
count: [],
|
|||
|
|
sum: [],
|
|||
|
|
distribute: false,
|
|||
|
|
minSize: "",
|
|||
|
|
maxSize: "",
|
|||
|
|
clusters: null,
|
|||
|
|
isClusters: false,
|
|||
|
|
vectorLayer: null,
|
|||
|
|
isVectorLayer: false,
|
|||
|
|
cellLayer: null,
|
|||
|
|
dialogVisible: false,
|
|||
|
|
selectclick: null,
|
|||
|
|
Info: {},
|
|||
|
|
currentFeatureId: "",
|
|||
|
|
FeaturesId: [],
|
|||
|
|
vectorSource: null,
|
|||
|
|
feature: null,
|
|||
|
|
warningform: { task: "", table: "", maxratio: "1.33", minratio: "0.67" },
|
|||
|
|
wTaskOptions: [],
|
|||
|
|
WTableOptions: [],
|
|||
|
|
averageNum: "",
|
|||
|
|
lowLimitNum: "",
|
|||
|
|
highLimitNum: "",
|
|||
|
|
echartRadio: "1",
|
|||
|
|
isEchartShow: false,
|
|||
|
|
workersTask: "",
|
|||
|
|
IsWorkersShow: false,
|
|||
|
|
workersData: [],
|
|||
|
|
};
|
|||
|
|
},
|
|||
|
|
components: {
|
|||
|
|
Map,
|
|||
|
|
featureInfo,
|
|||
|
|
},
|
|||
|
|
created() {
|
|||
|
|
this.initList();
|
|||
|
|
},
|
|||
|
|
watch: {
|
|||
|
|
dialogVisible: {
|
|||
|
|
handler() {
|
|||
|
|
if (this.dialogVisible == false) {
|
|||
|
|
this.getClusters();
|
|||
|
|
this.clearAll();
|
|||
|
|
}
|
|||
|
|
},
|
|||
|
|
},
|
|||
|
|
currentFeatureId: {
|
|||
|
|
handler() {
|
|||
|
|
if (this.vectorLayer && this.currentFeatureId !== "") {
|
|||
|
|
this.setCurrentStyle();
|
|||
|
|
}
|
|||
|
|
},
|
|||
|
|
},
|
|||
|
|
activeName: {
|
|||
|
|
handler() {
|
|||
|
|
this.IsWarningShow = false;
|
|||
|
|
this.IsWorkersShow = false;
|
|||
|
|
},
|
|||
|
|
},
|
|||
|
|
},
|
|||
|
|
methods: {
|
|||
|
|
getMap(val) {
|
|||
|
|
this.map = val;
|
|||
|
|
let that = this;
|
|||
|
|
this.map.on("moveend", function (e) {
|
|||
|
|
//移除所有
|
|||
|
|
if (that.clusters) {
|
|||
|
|
if (that.isClusters) {
|
|||
|
|
that.map.removeLayer(that.clusters);
|
|||
|
|
that.isClusters = false;
|
|||
|
|
}
|
|||
|
|
that.clusters = null;
|
|||
|
|
}
|
|||
|
|
if (that.vectorLayer) {
|
|||
|
|
if (that.isVectorLayer) {
|
|||
|
|
that.map.removeLayer(that.vectorLayer);
|
|||
|
|
that.map.removeInteraction(that.selectclick);
|
|||
|
|
that.isVectorLayer = false;
|
|||
|
|
}
|
|||
|
|
that.vectorLayer = null;
|
|||
|
|
that.selectclick = null;
|
|||
|
|
}
|
|||
|
|
if (that.distribute && that.cellLayer) {
|
|||
|
|
that.debounce(that.getClusters(), 500);
|
|||
|
|
}
|
|||
|
|
});
|
|||
|
|
},
|
|||
|
|
debounce(fn, delay) {
|
|||
|
|
let timer = null; //借助闭包
|
|||
|
|
return function () {
|
|||
|
|
if (timer) {
|
|||
|
|
clearTimeout(timer);
|
|||
|
|
timer = setTimeout(fn, delay);
|
|||
|
|
} else {
|
|||
|
|
timer = setTimeout(fn, delay);
|
|||
|
|
}
|
|||
|
|
};
|
|||
|
|
},
|
|||
|
|
// 初始化任务清单
|
|||
|
|
initList() {
|
|||
|
|
this.reportoptions = [];
|
|||
|
|
this.taskoptions = [];
|
|||
|
|
|
|||
|
|
this.wTaskOptions = [];
|
|||
|
|
let that = this;
|
|||
|
|
request({
|
|||
|
|
url: "/task/selectTaskHasCreated",
|
|||
|
|
method: "get",
|
|||
|
|
}).then(function (response) {
|
|||
|
|
if (response.data.success == true) {
|
|||
|
|
var jsondata = JSON.parse(response.data.data);
|
|||
|
|
var options = jsondata.data;
|
|||
|
|
for (var i = 0; i < options.length; i++) {
|
|||
|
|
that.reportoptions.push({
|
|||
|
|
value: options[i].id,
|
|||
|
|
label: options[i].taskName,
|
|||
|
|
});
|
|||
|
|
that.taskoptions.push({
|
|||
|
|
value: options[i].id,
|
|||
|
|
label: options[i].taskName,
|
|||
|
|
});
|
|||
|
|
that.wTaskOptions.push({
|
|||
|
|
value: options[i].id,
|
|||
|
|
label: options[i].taskName,
|
|||
|
|
});
|
|||
|
|
}
|
|||
|
|
} else if (response.data.status == "401") {
|
|||
|
|
that.$alert(response.data.message);
|
|||
|
|
that.$router.push({ path: "/login" });
|
|||
|
|
}
|
|||
|
|
});
|
|||
|
|
},
|
|||
|
|
getWarningTables() {
|
|||
|
|
if (this.warningform.task != "") {
|
|||
|
|
this.WTableOptions = [];
|
|||
|
|
var taskname = "";
|
|||
|
|
for (var i = 0; i < this.wTaskOptions.length; i++) {
|
|||
|
|
if (this.warningform.task == this.wTaskOptions[i].value) {
|
|||
|
|
taskname = this.wTaskOptions[i].label;
|
|||
|
|
break;
|
|||
|
|
}
|
|||
|
|
}
|
|||
|
|
this.tableoptions = [];
|
|||
|
|
let that = this;
|
|||
|
|
request({
|
|||
|
|
url: "/statistic/getTables",
|
|||
|
|
method: "post",
|
|||
|
|
params: {
|
|||
|
|
tskName: taskname,
|
|||
|
|
},
|
|||
|
|
}).then(function (response) {
|
|||
|
|
// 获取数据存入config
|
|||
|
|
if (response.data.status == "401") {
|
|||
|
|
that.$alert(response.data.message);
|
|||
|
|
that.$router.push({ path: "/login" });
|
|||
|
|
} else if (response.status === 200) {
|
|||
|
|
var json = response.data;
|
|||
|
|
that.warningform.table = "mmoo";
|
|||
|
|
that.WTableOptions.push({
|
|||
|
|
value: "mmoo",
|
|||
|
|
label: "默认",
|
|||
|
|
});
|
|||
|
|
for (var key in json) {
|
|||
|
|
that.WTableOptions.push({
|
|||
|
|
value: key,
|
|||
|
|
label: json[key],
|
|||
|
|
});
|
|||
|
|
}
|
|||
|
|
}
|
|||
|
|
});
|
|||
|
|
}
|
|||
|
|
},
|
|||
|
|
// 左侧面板收缩动画
|
|||
|
|
collapse() {
|
|||
|
|
this.collapsed = !this.collapsed;
|
|||
|
|
},
|
|||
|
|
beforeEnter: function (el) {
|
|||
|
|
el.style.transform = "translate(410px,0px)";
|
|||
|
|
},
|
|||
|
|
enter: function (el, done) {
|
|||
|
|
el.style.transform = "translate(0px,0px)";
|
|||
|
|
el.style.transition = "all 0.6s ease";
|
|||
|
|
done();
|
|||
|
|
},
|
|||
|
|
beforeLeave: function (el) {
|
|||
|
|
el.style.transform = "translate(0px,0px)";
|
|||
|
|
},
|
|||
|
|
leave: function (el, done) {
|
|||
|
|
el.style.transform = "translate(-425px,0px)";
|
|||
|
|
el.style.transition = "all 0.6s ease";
|
|||
|
|
// done();
|
|||
|
|
},
|
|||
|
|
handleClose(done) {
|
|||
|
|
done();
|
|||
|
|
},
|
|||
|
|
changeTask() {
|
|||
|
|
this.table = "";
|
|||
|
|
if (this.myChart1) {
|
|||
|
|
this.myChart1.clear();
|
|||
|
|
this.myChart2.clear();
|
|||
|
|
this.isEchartShow = false;
|
|||
|
|
}
|
|||
|
|
//清空
|
|||
|
|
//清空
|
|||
|
|
if (this.clusters) {
|
|||
|
|
if (this.isClusters) {
|
|||
|
|
this.map.removeLayer(this.clusters);
|
|||
|
|
this.isClusters = false;
|
|||
|
|
}
|
|||
|
|
this.clusters = null;
|
|||
|
|
}
|
|||
|
|
if (this.vectorLayer) {
|
|||
|
|
if (this.isVectorLayer) {
|
|||
|
|
this.map.removeLayer(this.vectorLayer);
|
|||
|
|
this.map.removeInteraction(this.selectclick);
|
|||
|
|
this.isVectorLayer = false;
|
|||
|
|
}
|
|||
|
|
this.vectorLayer = null;
|
|||
|
|
this.selectclick = null;
|
|||
|
|
}
|
|||
|
|
this.cellLayer = null;
|
|||
|
|
this.distribute = false;
|
|||
|
|
if (this.isHot) {
|
|||
|
|
this.isHot = false;
|
|||
|
|
this.removeHeatmapLayer();
|
|||
|
|
this.heatmapLayer = null;
|
|||
|
|
} else {
|
|||
|
|
this.heatmapLayer = null;
|
|||
|
|
}
|
|||
|
|
},
|
|||
|
|
changeTable1() {
|
|||
|
|
//清空
|
|||
|
|
if (this.myChart1) {
|
|||
|
|
this.myChart1.clear();
|
|||
|
|
this.myChart2.clear();
|
|||
|
|
this.isEchartShow = false;
|
|||
|
|
}
|
|||
|
|
//清空
|
|||
|
|
//清空
|
|||
|
|
if (this.clusters) {
|
|||
|
|
if (this.isClusters) {
|
|||
|
|
this.map.removeLayer(this.clusters);
|
|||
|
|
this.isClusters = false;
|
|||
|
|
}
|
|||
|
|
this.clusters = null;
|
|||
|
|
}
|
|||
|
|
if (this.vectorLayer) {
|
|||
|
|
if (this.isVectorLayer) {
|
|||
|
|
this.map.removeLayer(this.vectorLayer);
|
|||
|
|
this.map.removeInteraction(this.selectclick);
|
|||
|
|
this.isVectorLayer = false;
|
|||
|
|
}
|
|||
|
|
this.vectorLayer = null;
|
|||
|
|
this.selectclick = null;
|
|||
|
|
}
|
|||
|
|
this.cellLayer = null;
|
|||
|
|
|
|||
|
|
this.distribute = true;
|
|||
|
|
this.getRange(0);
|
|||
|
|
this.initHeatmapLayer();
|
|||
|
|
this.isHot = false;
|
|||
|
|
},
|
|||
|
|
getRange(addToMap) {
|
|||
|
|
let that = this;
|
|||
|
|
request({
|
|||
|
|
url: "/allocation/info/cell/all",
|
|||
|
|
method: "post",
|
|||
|
|
params: {
|
|||
|
|
taskId: that.task,
|
|||
|
|
},
|
|||
|
|
}).then(function (response) {
|
|||
|
|
// 获取数据存入config
|
|||
|
|
if (response.data.status === 200) {
|
|||
|
|
var result = response.data.data;
|
|||
|
|
if (result.features.length != 0) {
|
|||
|
|
that.drawCellLayer(result);
|
|||
|
|
that.map.getView().fit(that.cellLayer.getSource().getExtent());
|
|||
|
|
that.getClusters();
|
|||
|
|
} else {
|
|||
|
|
that.$message.info("获取任务范围失败，未上传数据！");
|
|||
|
|
}
|
|||
|
|
} else if (response.data.status == "401") {
|
|||
|
|
that.$alert(response.data.message);
|
|||
|
|
that.$router.push({ path: "/login" });
|
|||
|
|
}
|
|||
|
|
});
|
|||
|
|
},
|
|||
|
|
getClusters() {
|
|||
|
|
var zoom = 0;
|
|||
|
|
zoom = this.map.getView().getZoom();
|
|||
|
|
//获取地图范围
|
|||
|
|
var coordinates = this.map.getView().calculateExtent(this.map.getSize());
|
|||
|
|
var geoHashLength = "";
|
|||
|
|
switch (zoom) {
|
|||
|
|
case 8:
|
|||
|
|
case 9:
|
|||
|
|
geoHashLength = 4;
|
|||
|
|
break;
|
|||
|
|
case 10:
|
|||
|
|
case 11:
|
|||
|
|
case 12:
|
|||
|
|
geoHashLength = 5;
|
|||
|
|
break;
|
|||
|
|
case 13:
|
|||
|
|
case 14:
|
|||
|
|
case 15:
|
|||
|
|
case 16:
|
|||
|
|
geoHashLength = 6;
|
|||
|
|
break;
|
|||
|
|
case 17:
|
|||
|
|
case 18:
|
|||
|
|
case 19:
|
|||
|
|
case 20:
|
|||
|
|
geoHashLength = 7;
|
|||
|
|
break;
|
|||
|
|
default:
|
|||
|
|
geoHashLength = 3;
|
|||
|
|
}
|
|||
|
|
if (this.distribute) {
|
|||
|
|
if (zoom < 15) {
|
|||
|
|
//请求聚类图层
|
|||
|
|
let that = this;
|
|||
|
|
that.minSize = 0;
|
|||
|
|
that.maxSize = 0;
|
|||
|
|
request({
|
|||
|
|
url: "/base/getCountByGeoHash",
|
|||
|
|
method: "post",
|
|||
|
|
params: {
|
|||
|
|
taskId: that.task,
|
|||
|
|
tableName: that.table,
|
|||
|
|
accuracy: geoHashLength,
|
|||
|
|
longitudeMin: coordinates[0],
|
|||
|
|
latitudeMin: coordinates[1],
|
|||
|
|
longitudeMax: coordinates[2],
|
|||
|
|
latitudeMax: coordinates[3],
|
|||
|
|
},
|
|||
|
|
}).then(function (response) {
|
|||
|
|
if (response.data.success) {
|
|||
|
|
if (response.data.data) {
|
|||
|
|
var result = response.data.data;
|
|||
|
|
var geojson = [];
|
|||
|
|
for (var i = 0; i < result.length; i++) {
|
|||
|
|
var count = result[i].count;
|
|||
|
|
if (i == 0) {
|
|||
|
|
that.minSize = count;
|
|||
|
|
that.maxSize = count;
|
|||
|
|
} else {
|
|||
|
|
if (count < that.minSize) {
|
|||
|
|
that.minSize = count;
|
|||
|
|
}
|
|||
|
|
if (count > that.maxSize) {
|
|||
|
|
that.maxSize = count;
|
|||
|
|
}
|
|||
|
|
}
|
|||
|
|
//存入count
|
|||
|
|
var geojson1 = result[i].feature;
|
|||
|
|
geojson1.properties = {};
|
|||
|
|
geojson1.properties.count = count;
|
|||
|
|
geojson.push(result[i].feature);
|
|||
|
|
}
|
|||
|
|
var geojsonObject = {
|
|||
|
|
type: "FeatureCollection",
|
|||
|
|
features: geojson,
|
|||
|
|
crs: { type: "EPSG", properties: { code: "4326" } },
|
|||
|
|
};
|
|||
|
|
that.drawClusterLayer(geojsonObject);
|
|||
|
|
} else {
|
|||
|
|
that.$message.info("获取范围内数据为空！");
|
|||
|
|
}
|
|||
|
|
} else if (response.data.status == "401") {
|
|||
|
|
that.$alert(response.data.message);
|
|||
|
|
that.$router.push({ path: "/login" });
|
|||
|
|
}
|
|||
|
|
});
|
|||
|
|
} else {
|
|||
|
|
let that = this;
|
|||
|
|
request({
|
|||
|
|
url: "/get/getDataByRangeIntersection",
|
|||
|
|
method: "post",
|
|||
|
|
params: {
|
|||
|
|
taskId: that.task,
|
|||
|
|
tableName: that.table,
|
|||
|
|
longitudeMin: coordinates[0],
|
|||
|
|
latitudeMin: coordinates[1],
|
|||
|
|
longitudeMax: coordinates[2],
|
|||
|
|
latitudeMax: coordinates[3],
|
|||
|
|
},
|
|||
|
|
}).then(function (response) {
|
|||
|
|
if (response.data.success) {
|
|||
|
|
if (response.data.data) {
|
|||
|
|
var geojson = response.data.data;
|
|||
|
|
var geojsonObject = {
|
|||
|
|
type: "FeatureCollection",
|
|||
|
|
features: geojson,
|
|||
|
|
crs: { type: "EPSG", properties: { code: "4326" } },
|
|||
|
|
};
|
|||
|
|
that.drawVectorLayer(geojsonObject);
|
|||
|
|
} else {
|
|||
|
|
that.$message.info("获取范围内数据为空！");
|
|||
|
|
}
|
|||
|
|
} else if (response.data.status == "401") {
|
|||
|
|
that.$alert(response.data.message);
|
|||
|
|
that.$router.push({ path: "/login" });
|
|||
|
|
}
|
|||
|
|
});
|
|||
|
|
}
|
|||
|
|
}
|
|||
|
|
},
|
|||
|
|
drawCellLayer(geojsonObject) {
|
|||
|
|
//
|
|||
|
|
if (this.cellLayer) {
|
|||
|
|
this.map.removeLayer(this.cellLayer);
|
|||
|
|
}
|
|||
|
|
var vectorSource = new VectorSource({
|
|||
|
|
features: new GeoJSON().readFeatures(geojsonObject),
|
|||
|
|
});
|
|||
|
|
this.cellLayer = new VectorLayer({
|
|||
|
|
source: vectorSource,
|
|||
|
|
});
|
|||
|
|
this.cellLayer.setZIndex(5);
|
|||
|
|
},
|
|||
|
|
drawClusterLayer(geojsonObject) {
|
|||
|
|
if (this.clusters) {
|
|||
|
|
if (this.isClusters) {
|
|||
|
|
this.map.removeLayer(this.clusters);
|
|||
|
|
this.isClusters = false;
|
|||
|
|
}
|
|||
|
|
this.clusters = null;
|
|||
|
|
}
|
|||
|
|
if (this.vectorLayer) {
|
|||
|
|
if (this.isVectorLayer) {
|
|||
|
|
this.map.removeLayer(this.vectorLayer);
|
|||
|
|
this.map.removeInteraction(this.selectclick);
|
|||
|
|
}
|
|||
|
|
this.vectorLayer = null;
|
|||
|
|
this.selectclick = null;
|
|||
|
|
}
|
|||
|
|
var vectorSource = new VectorSource({
|
|||
|
|
features: new GeoJSON().readFeatures(geojsonObject),
|
|||
|
|
});
|
|||
|
|
|
|||
|
|
this.clusters = new VectorLayer({
|
|||
|
|
source: vectorSource,
|
|||
|
|
style: function (feature) {
|
|||
|
|
let count = feature.get("count").toString();
|
|||
|
|
let style = new Style({
|
|||
|
|
stroke: new Stroke({
|
|||
|
|
lineDash: [1, 2, 3, 4, 5, 6],
|
|||
|
|
color: "rgba(70,130,180, 0.9)",
|
|||
|
|
width: 2,
|
|||
|
|
}),
|
|||
|
|
fill: new Fill({
|
|||
|
|
color: [255, 153, 0, 0.8],
|
|||
|
|
}),
|
|||
|
|
text: new Text({
|
|||
|
|
text: feature.get("count").toString(),
|
|||
|
|
font: "16px Microsoft YaHei",
|
|||
|
|
fill: new Fill({
|
|||
|
|
color: "#fff",
|
|||
|
|
}),
|
|||
|
|
stroke: new Stroke({
|
|||
|
|
color: "rgba(0, 0, 0, 0.6)",
|
|||
|
|
width: 3,
|
|||
|
|
}),
|
|||
|
|
}),
|
|||
|
|
});
|
|||
|
|
return [style];
|
|||
|
|
},
|
|||
|
|
});
|
|||
|
|
this.clusters.setZIndex(4);
|
|||
|
|
this.map.addLayer(this.clusters);
|
|||
|
|
this.isClusters = true;
|
|||
|
|
},
|
|||
|
|
drawVectorLayer(geojsonObject) {
|
|||
|
|
if (this.clusters) {
|
|||
|
|
if (this.isClusters) {
|
|||
|
|
this.map.removeLayer(this.clusters);
|
|||
|
|
this.isClusters = false;
|
|||
|
|
}
|
|||
|
|
this.clusters = null;
|
|||
|
|
}
|
|||
|
|
if (this.vectorLayer) {
|
|||
|
|
if (this.isVectorLayer) {
|
|||
|
|
this.map.removeLayer(this.vectorLayer);
|
|||
|
|
this.map.removeInteraction(this.selectclick);
|
|||
|
|
this.isVectorLayer = false;
|
|||
|
|
}
|
|||
|
|
this.vectorLayer = null;
|
|||
|
|
this.selectclick = null;
|
|||
|
|
}
|
|||
|
|
this.vectorSource = new VectorSource({
|
|||
|
|
features: new GeoJSON().readFeatures(geojsonObject),
|
|||
|
|
});
|
|||
|
|
var styles = {
|
|||
|
|
Point: new Style({
|
|||
|
|
image: new CircleStyle({
|
|||
|
|
radius: 7,
|
|||
|
|
fill: new Fill({
|
|||
|
|
color: "rgba(173,216,230)",
|
|||
|
|
}),
|
|||
|
|
stroke: new Stroke({
|
|||
|
|
lineDash: [1, 2, 3, 4, 5, 6],
|
|||
|
|
color: "rgba(70,130,180)",
|
|||
|
|
width: 2,
|
|||
|
|
}),
|
|||
|
|
}),
|
|||
|
|
stroke: new Stroke({
|
|||
|
|
lineDash: [1, 2, 3, 4, 5, 6],
|
|||
|
|
color: "rgba(70,130,180)",
|
|||
|
|
width: 2,
|
|||
|
|
}),
|
|||
|
|
fill: new Fill({
|
|||
|
|
color: "rgba(173,216,230)",
|
|||
|
|
}),
|
|||
|
|
}),
|
|||
|
|
LineString: new Style({
|
|||
|
|
stroke: new Stroke({
|
|||
|
|
color: "green",
|
|||
|
|
width: 3,
|
|||
|
|
}),
|
|||
|
|
}),
|
|||
|
|
Polygon: new Style({
|
|||
|
|
stroke: new Stroke({
|
|||
|
|
color: "blue",
|
|||
|
|
lineDash: [4],
|
|||
|
|
width: 3,
|
|||
|
|
}),
|
|||
|
|
fill: new Fill({
|
|||
|
|
color: "rgba(0, 0, 255, 0.1)",
|
|||
|
|
}),
|
|||
|
|
}),
|
|||
|
|
};
|
|||
|
|
var styleFunction = function (feature) {
|
|||
|
|
return styles[feature.getGeometry().getType()];
|
|||
|
|
};
|
|||
|
|
var allfearures = this.vectorSource.getFeatures();
|
|||
|
|
for (var i = 0; i < allfearures.length; i++) {
|
|||
|
|
allfearures[i].setId(allfearures[i].get("id"));
|
|||
|
|
}
|
|||
|
|
this.vectorLayer = new VectorLayer({
|
|||
|
|
id: "vectorlayer",
|
|||
|
|
source: this.vectorSource,
|
|||
|
|
style: styleFunction,
|
|||
|
|
});
|
|||
|
|
this.vectorLayer.setZIndex(4);
|
|||
|
|
this.map.addLayer(this.vectorLayer);
|
|||
|
|
this.isVectorLayer = true;
|
|||
|
|
let this1 = this;
|
|||
|
|
this.selectclick = new Select({
|
|||
|
|
layers: [this.vectorLayer],
|
|||
|
|
style: new Style({
|
|||
|
|
image: new CircleStyle({
|
|||
|
|
radius: 7,
|
|||
|
|
fill: new Fill({
|
|||
|
|
color: "yellow",
|
|||
|
|
}),
|
|||
|
|
stroke: new Stroke({
|
|||
|
|
color: "#37eed0",
|
|||
|
|
width: 3,
|
|||
|
|
}),
|
|||
|
|
}),
|
|||
|
|
fill: new Fill({
|
|||
|
|
color: "yellow",
|
|||
|
|
}),
|
|||
|
|
stroke: new Stroke({
|
|||
|
|
color: "#37eed0",
|
|||
|
|
width: 3,
|
|||
|
|
}),
|
|||
|
|
}),
|
|||
|
|
});
|
|||
|
|
this.selectclick.on("select", function (e) {
|
|||
|
|
this1.FeaturesId = [];
|
|||
|
|
var features = e.selected;
|
|||
|
|
if (features.length > 0) {
|
|||
|
|
this1.dialogVisible = true;
|
|||
|
|
let that = this1;
|
|||
|
|
var feature = features[0];
|
|||
|
|
var type = feature.getGeometry().getType();
|
|||
|
|
var tmp = 1;
|
|||
|
|
if (type == "LineString" || type == "Point") {
|
|||
|
|
that.FeaturesId.push({
|
|||
|
|
value: feature.get("id"),
|
|||
|
|
label: feature.get("id"),
|
|||
|
|
});
|
|||
|
|
that.currentFeatureId = feature.get("id");
|
|||
|
|
tmp = 0;
|
|||
|
|
}
|
|||
|
|
this.getFeatures().clear();
|
|||
|
|
var coordinate = e.mapBrowserEvent.coordinate;
|
|||
|
|
var Features = that.vectorSource.getFeaturesAtCoordinate(coordinate);
|
|||
|
|
for (var i = 0; i < Features.length; i++) {
|
|||
|
|
that.FeaturesId.push({
|
|||
|
|
value: Features[i].get("id"),
|
|||
|
|
label: Features[i].get("id"),
|
|||
|
|
});
|
|||
|
|
if (i == 0 && tmp == 1) {
|
|||
|
|
that.currentFeatureId = Features[i].get("id");
|
|||
|
|
}
|
|||
|
|
}
|
|||
|
|
}
|
|||
|
|
});
|
|||
|
|
this.map.addInteraction(this.selectclick);
|
|||
|
|
},
|
|||
|
|
initEchart() {
|
|||
|
|
if (this.myChart1) {
|
|||
|
|
this.myChart1.clear();
|
|||
|
|
this.myChart2.clear();
|
|||
|
|
this.isEchartShow = false;
|
|||
|
|
}
|
|||
|
|
var selectDate = [];
|
|||
|
|
var selectCount = [];
|
|||
|
|
var selectRatio = [];
|
|||
|
|
if (this.data) {
|
|||
|
|
if (this.data.length) {
|
|||
|
|
for (var i = 0; i < this.data.length; i++) {
|
|||
|
|
selectDate.push(this.data[i].date);
|
|||
|
|
selectCount.push(this.data[i].count);
|
|||
|
|
}
|
|||
|
|
} else {
|
|||
|
|
this.$alert("无任务采集进度信息！", "提示", {
|
|||
|
|
confirmButtonText: "确定",
|
|||
|
|
});
|
|||
|
|
return;
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
if (this.ratio.length) {
|
|||
|
|
for (var j = 0; j < this.ratio.length; j++) {
|
|||
|
|
selectRatio.push(this.ratio[j].ratio);
|
|||
|
|
}
|
|||
|
|
} else {
|
|||
|
|
this.$alert("无任务采集进度信息！", "提示", {
|
|||
|
|
confirmButtonText: "确定",
|
|||
|
|
});
|
|||
|
|
return;
|
|||
|
|
}
|
|||
|
|
} else {
|
|||
|
|
this.$alert("无任务采集进度信息！", "提示", {
|
|||
|
|
confirmButtonText: "确定",
|
|||
|
|
});
|
|||
|
|
return;
|
|||
|
|
}
|
|||
|
|
this.myChart1 = echarts.init(document.getElementById("myChart1"));
|
|||
|
|
this.myChart2 = echarts.init(document.getElementById("myChart2"));
|
|||
|
|
this.isEchartShow = true;
|
|||
|
|
|
|||
|
|
// 绘制图表
|
|||
|
|
var myColor = [
|
|||
|
|
"#eb2100",
|
|||
|
|
"#eb3600",
|
|||
|
|
"#d0570e",
|
|||
|
|
"#d0a00e",
|
|||
|
|
"#34da62",
|
|||
|
|
"#00e9db",
|
|||
|
|
"#00c0e9",
|
|||
|
|
"#0096f3",
|
|||
|
|
"#33CCFF",
|
|||
|
|
"#33FFCC",
|
|||
|
|
];
|
|||
|
|
var gridWidth = 350; //可以根据canvas的宽度和grid的right,left,width进行计算
|
|||
|
|
var fontsize = 14; //字体大小
|
|||
|
|
var wordNum = parseInt(gridWidth / selectDate.length / fontsize);
|
|||
|
|
var option1 = {
|
|||
|
|
title: { text: "采集总量：" + this.total },
|
|||
|
|
xAxis: {
|
|||
|
|
data: selectDate,
|
|||
|
|
axisLabel: {
|
|||
|
|
interval: 0,
|
|||
|
|
formatter: function (value, index) {
|
|||
|
|
var strs = value.split("");
|
|||
|
|
var str = "";
|
|||
|
|
for (var i = 0, s; (s = strs[i++]); ) {
|
|||
|
|
str += s;
|
|||
|
|
if (!(i % wordNum)) str += "\n";
|
|||
|
|
}
|
|||
|
|
return str;
|
|||
|
|
},
|
|||
|
|
},
|
|||
|
|
axisTick: {
|
|||
|
|
show: false,
|
|||
|
|
},
|
|||
|
|
axisLine: {
|
|||
|
|
show: false,
|
|||
|
|
},
|
|||
|
|
z: 10,
|
|||
|
|
},
|
|||
|
|
yAxis: {
|
|||
|
|
axisLine: {
|
|||
|
|
show: false,
|
|||
|
|
},
|
|||
|
|
axisTick: {
|
|||
|
|
show: false,
|
|||
|
|
},
|
|||
|
|
axisLabel: {
|
|||
|
|
textStyle: {
|
|||
|
|
color: "#999",
|
|||
|
|
},
|
|||
|
|
},
|
|||
|
|
},
|
|||
|
|
dataZoom: [
|
|||
|
|
{
|
|||
|
|
type: "inside",
|
|||
|
|
},
|
|||
|
|
],
|
|||
|
|
series: [
|
|||
|
|
{
|
|||
|
|
type: "bar",
|
|||
|
|
showBackground: true,
|
|||
|
|
itemStyle: {
|
|||
|
|
normal: {
|
|||
|
|
color: function (params) {
|
|||
|
|
var num = myColor.length;
|
|||
|
|
return myColor[params.dataIndex % num];
|
|||
|
|
},
|
|||
|
|
},
|
|||
|
|
},
|
|||
|
|
label: {
|
|||
|
|
show: true,
|
|||
|
|
position: "top",
|
|||
|
|
},
|
|||
|
|
emphasis: {
|
|||
|
|
itemStyle: {
|
|||
|
|
color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
|
|||
|
|
{ offset: 0, color: "#eb2100" },
|
|||
|
|
{ offset: 0.7, color: "#d0570e" },
|
|||
|
|
{ offset: 1, color: "#d0a00e" },
|
|||
|
|
]),
|
|||
|
|
},
|
|||
|
|
},
|
|||
|
|
data: selectCount,
|
|||
|
|
},
|
|||
|
|
],
|
|||
|
|
};
|
|||
|
|
this.myChart1.setOption(option1);
|
|||
|
|
this.myChart1.on("datazoom", function (params) {
|
|||
|
|
if (params.batch) {
|
|||
|
|
var start = params.batch[0].start;
|
|||
|
|
var end = params.batch[0].end;
|
|||
|
|
} else {
|
|||
|
|
var start = params.start;
|
|||
|
|
var end = params.end;
|
|||
|
|
}
|
|||
|
|
var cur_col_num = ((end - start) / 100) * selectDate.length; //计算缩放后可以显示几个柱子
|
|||
|
|
wordNum = parseInt(Math.ceil(gridWidth / cur_col_num) / 14); //重新计算wordNum
|
|||
|
|
});
|
|||
|
|
|
|||
|
|
var option2 = {
|
|||
|
|
xAxis: {
|
|||
|
|
data: selectDate,
|
|||
|
|
axisLabel: {
|
|||
|
|
interval: 0,
|
|||
|
|
formatter: function (value, index) {
|
|||
|
|
var strs = value.split("");
|
|||
|
|
var str = "";
|
|||
|
|
for (var i = 0, s; (s = strs[i++]); ) {
|
|||
|
|
str += s;
|
|||
|
|
if (!(i % wordNum)) str += "\n";
|
|||
|
|
}
|
|||
|
|
return str;
|
|||
|
|
},
|
|||
|
|
},
|
|||
|
|
axisTick: {
|
|||
|
|
show: false,
|
|||
|
|
},
|
|||
|
|
axisLine: {
|
|||
|
|
show: false,
|
|||
|
|
},
|
|||
|
|
z: 10,
|
|||
|
|
},
|
|||
|
|
yAxis: {
|
|||
|
|
axisLine: {
|
|||
|
|
show: false,
|
|||
|
|
},
|
|||
|
|
axisTick: {
|
|||
|
|
show: false,
|
|||
|
|
},
|
|||
|
|
axisLabel: {
|
|||
|
|
textStyle: {
|
|||
|
|
color: "#999",
|
|||
|
|
},
|
|||
|
|
},
|
|||
|
|
},
|
|||
|
|
dataZoom: [
|
|||
|
|
{
|
|||
|
|
type: "inside",
|
|||
|
|
},
|
|||
|
|
],
|
|||
|
|
series: [
|
|||
|
|
{
|
|||
|
|
type: "bar",
|
|||
|
|
showBackground: true,
|
|||
|
|
itemStyle: {
|
|||
|
|
normal: {
|
|||
|
|
color: function (params) {
|
|||
|
|
var num = myColor.length;
|
|||
|
|
return myColor[params.dataIndex % num];
|
|||
|
|
},
|
|||
|
|
},
|
|||
|
|
},
|
|||
|
|
label: {
|
|||
|
|
show: true,
|
|||
|
|
position: "top",
|
|||
|
|
formatter: function (params) {
|
|||
|
|
var str = Number(params.value * 100).toFixed(2);
|
|||
|
|
str += "%";
|
|||
|
|
return str;
|
|||
|
|
},
|
|||
|
|
},
|
|||
|
|
emphasis: {
|
|||
|
|
itemStyle: {
|
|||
|
|
color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
|
|||
|
|
{ offset: 0, color: "#eb2100" },
|
|||
|
|
{ offset: 0.7, color: "#d0570e" },
|
|||
|
|
{ offset: 1, color: "#d0a00e" },
|
|||
|
|
]),
|
|||
|
|
},
|
|||
|
|
},
|
|||
|
|
data: selectRatio,
|
|||
|
|
},
|
|||
|
|
],
|
|||
|
|
};
|
|||
|
|
this.myChart2.setOption(option2);
|
|||
|
|
this.myChart2.on("datazoom", function (params) {
|
|||
|
|
if (params.batch) {
|
|||
|
|
var start = params.batch[0].start;
|
|||
|
|
var end = params.batch[0].end;
|
|||
|
|
} else {
|
|||
|
|
var start = params.start;
|
|||
|
|
var end = params.end;
|
|||
|
|
}
|
|||
|
|
var cur_col_num = ((end - start) / 100) * selectDate.length; //计算缩放后可以显示几个柱子
|
|||
|
|
wordNum = parseInt(Math.ceil(gridWidth / cur_col_num) / 14); //重新计算wordNum
|
|||
|
|
});
|
|||
|
|
|
|||
|
|
// var option = {
|
|||
|
|
// title: { text: "任务采集进度" },
|
|||
|
|
// xAxis: [
|
|||
|
|
// {
|
|||
|
|
// show: false,
|
|||
|
|
// },
|
|||
|
|
// ],
|
|||
|
|
// yAxis: {
|
|||
|
|
// axisLine: {
|
|||
|
|
// show: false,
|
|||
|
|
// },
|
|||
|
|
// axisLabel: {
|
|||
|
|
// margin: 2,
|
|||
|
|
// },
|
|||
|
|
// nameTextStyle: {
|
|||
|
|
// color: "#ffffff",
|
|||
|
|
// fontSize: "10",
|
|||
|
|
// },
|
|||
|
|
// data: selectDate,
|
|||
|
|
// },
|
|||
|
|
// grid: {
|
|||
|
|
// left: 35,
|
|||
|
|
// },
|
|||
|
|
// series: [
|
|||
|
|
// {
|
|||
|
|
// name: "条",
|
|||
|
|
// type: "bar",
|
|||
|
|
// yAxisIndex: 0,
|
|||
|
|
// data: selectRatio,
|
|||
|
|
// label: {
|
|||
|
|
// show: true,
|
|||
|
|
// position: "right",
|
|||
|
|
// formatter: function (params) {
|
|||
|
|
// var str = Number(params.value * 100).toFixed(2);
|
|||
|
|
// str += "%";
|
|||
|
|
// return str;
|
|||
|
|
// },
|
|||
|
|
// },
|
|||
|
|
// barWidth: 15,
|
|||
|
|
// itemStyle: {
|
|||
|
|
// normal: {
|
|||
|
|
// color: function (params) {
|
|||
|
|
// var num = myColor.length;
|
|||
|
|
// return myColor[params.dataIndex % num];
|
|||
|
|
// },
|
|||
|
|
// },
|
|||
|
|
// },
|
|||
|
|
// z: 2,
|
|||
|
|
// },
|
|||
|
|
// ],
|
|||
|
|
// };
|
|||
|
|
// this.myChart2.setOption(option);
|
|||
|
|
},
|
|||
|
|
getWorkers() {
|
|||
|
|
if (this.workersTask == "") {
|
|||
|
|
this.$alert("请先选择任务！", "提示", {
|
|||
|
|
confirmButtonText: "确定",
|
|||
|
|
});
|
|||
|
|
} else {
|
|||
|
|
let that = this;
|
|||
|
|
request({
|
|||
|
|
url: "/report/workloadByUser",
|
|||
|
|
method: "get",
|
|||
|
|
params: {
|
|||
|
|
taskId: that.workersTask,
|
|||
|
|
},
|
|||
|
|
}).then(function (response) {
|
|||
|
|
// 获取数据存入config
|
|||
|
|
if (response.data.status == "401") {
|
|||
|
|
that.$alert(response.data.message);
|
|||
|
|
that.$router.push({ path: "/login" });
|
|||
|
|
} else if (response.data.status === 200) {
|
|||
|
|
that.IsWorkersShow = true;
|
|||
|
|
that.workersData = response.data.data;
|
|||
|
|
}
|
|||
|
|
});
|
|||
|
|
}
|
|||
|
|
},
|
|||
|
|
getTables() {
|
|||
|
|
if (this.task === "") {
|
|||
|
|
this.$alert("请先选择任务！", "提示", {
|
|||
|
|
confirmButtonText: "确定",
|
|||
|
|
});
|
|||
|
|
document.getElementById("sTable").blur();
|
|||
|
|
} else {
|
|||
|
|
var taskname = "";
|
|||
|
|
for (var i = 0; i < this.taskoptions.length; i++) {
|
|||
|
|
if (this.task == this.taskoptions[i].value) {
|
|||
|
|
taskname = this.taskoptions[i].label;
|
|||
|
|
break;
|
|||
|
|
}
|
|||
|
|
}
|
|||
|
|
this.tableoptions = [];
|
|||
|
|
let that = this;
|
|||
|
|
request({
|
|||
|
|
url: "/statistic/getTables",
|
|||
|
|
method: "get",
|
|||
|
|
params: {
|
|||
|
|
tskName: taskname,
|
|||
|
|
},
|
|||
|
|
}).then(function (response) {
|
|||
|
|
// 获取数据存入config
|
|||
|
|
if (response.data.status == "401") {
|
|||
|
|
that.$alert(response.data.message);
|
|||
|
|
that.$router.push({ path: "/login" });
|
|||
|
|
} else if (response.status === 200) {
|
|||
|
|
var json = response.data;
|
|||
|
|
for (var key in json) {
|
|||
|
|
that.tableoptions.push({
|
|||
|
|
value: key,
|
|||
|
|
label: json[key],
|
|||
|
|
});
|
|||
|
|
}
|
|||
|
|
}
|
|||
|
|
});
|
|||
|
|
}
|
|||
|
|
},
|
|||
|
|
getEChart() {
|
|||
|
|
if (this.task === "") {
|
|||
|
|
this.$alert("请选择任务！", "提示", {
|
|||
|
|
confirmButtonText: "确定",
|
|||
|
|
});
|
|||
|
|
return;
|
|||
|
|
}
|
|||
|
|
if (this.table === "") {
|
|||
|
|
this.$alert("请选择表！", "提示", {
|
|||
|
|
confirmButtonText: "确定",
|
|||
|
|
});
|
|||
|
|
return;
|
|||
|
|
}
|
|||
|
|
if (this.date.length < 2) {
|
|||
|
|
this.$alert("请选择日期！", "提示", {
|
|||
|
|
confirmButtonText: "确定",
|
|||
|
|
});
|
|||
|
|
return;
|
|||
|
|
}
|
|||
|
|
if (this.date[0] == this.date[1]) {
|
|||
|
|
this.$message.info("查询时间重复！");
|
|||
|
|
return;
|
|||
|
|
}
|
|||
|
|
var taskname = "";
|
|||
|
|
for (var i = 0; i < this.taskoptions.length; i++) {
|
|||
|
|
if (this.task == this.taskoptions[i].value) {
|
|||
|
|
taskname = this.taskoptions[i].label;
|
|||
|
|
break;
|
|||
|
|
}
|
|||
|
|
}
|
|||
|
|
let that = this;
|
|||
|
|
request({
|
|||
|
|
url: "statistic/stat",
|
|||
|
|
method: "post",
|
|||
|
|
params: {
|
|||
|
|
tblName: that.table,
|
|||
|
|
operation: that.radio,
|
|||
|
|
startTime: that.date[0],
|
|||
|
|
endTime: that.date[1],
|
|||
|
|
tskName: taskname,
|
|||
|
|
},
|
|||
|
|
}).then(function (response) {
|
|||
|
|
// 获取数据存入config
|
|||
|
|
if (response.data.status == "401") {
|
|||
|
|
that.$alert(response.data.message);
|
|||
|
|
that.$router.push({ path: "/login" });
|
|||
|
|
} else if (response.status === 200) {
|
|||
|
|
that.data = response.data.data;
|
|||
|
|
that.ratio = response.data.ratio;
|
|||
|
|
that.total = response.data.total;
|
|||
|
|
that.initEchart();
|
|||
|
|
}
|
|||
|
|
});
|
|||
|
|
},
|
|||
|
|
|
|||
|
|
getReport() {
|
|||
|
|
if (this.ReportTask === "") {
|
|||
|
|
this.$alert("请先选择查看的任务！", "提示", {
|
|||
|
|
confirmButtonText: "确定",
|
|||
|
|
});
|
|||
|
|
return;
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
//组织数据格式
|
|||
|
|
let that = this;
|
|||
|
|
request({
|
|||
|
|
url: "/report/featuresInfo",
|
|||
|
|
method: "get",
|
|||
|
|
params: {
|
|||
|
|
taskId: that.ReportTask,
|
|||
|
|
},
|
|||
|
|
}).then(function (response) {
|
|||
|
|
//先清空
|
|||
|
|
that.tableStatNum = [];
|
|||
|
|
that.tableName = [];
|
|||
|
|
that.tableCount = [];
|
|||
|
|
that.tableDailyAvg = [];
|
|||
|
|
that.tableMonthlyAvg = [];
|
|||
|
|
that.dailyTableRatio = [];
|
|||
|
|
that.dailyTableData = [];
|
|||
|
|
that.monthlyTableRatio = [];
|
|||
|
|
that.monthlyTableData = [];
|
|||
|
|
that.tableMaxDaily = [];
|
|||
|
|
that.tableMaxDailyNum = [];
|
|||
|
|
that.tableMaxMonthly = [];
|
|||
|
|
that.tableMaxMonthlyNum = [];
|
|||
|
|
that.tableMinDaily = [];
|
|||
|
|
that.tableMinDailyNum = [];
|
|||
|
|
that.tableMinMonthly = [];
|
|||
|
|
that.tableMinMonthlyNum = [];
|
|||
|
|
|
|||
|
|
if (response.data.status == "401") {
|
|||
|
|
that.$alert(response.data.message);
|
|||
|
|
that.$router.push({ path: "/login" });
|
|||
|
|
} else if (response.status === 200) {
|
|||
|
|
if (response.data.length) {
|
|||
|
|
var result = response.data;
|
|||
|
|
var tableStatNum1 = result.length;
|
|||
|
|
for (var i = 0; i < tableStatNum1; i++) {
|
|||
|
|
that.tableStatNum.push(i + 1);
|
|||
|
|
}
|
|||
|
|
for (var j = 0; j < result.length; j++) {
|
|||
|
|
var onetabledata = result[j];
|
|||
|
|
that.tableName.push(onetabledata.name_ch);
|
|||
|
|
that.tableCount.push(onetabledata.count);
|
|||
|
|
|
|||
|
|
//读取每天
|
|||
|
|
var statDaily = onetabledata.statDaily;
|
|||
|
|
that.tableDailyAvg.push(statDaily.avg);
|
|||
|
|
var dailydata = [];
|
|||
|
|
var dailyratio = [];
|
|||
|
|
for (var k = 0; k < statDaily.data.length; k++) {
|
|||
|
|
dailydata.push(statDaily.data[k]);
|
|||
|
|
}
|
|||
|
|
that.dailyTableData.push(dailydata);
|
|||
|
|
|
|||
|
|
for (var k = 0; k < statDaily.ratio.length; k++) {
|
|||
|
|
dailyratio.push(statDaily.ratio[k]);
|
|||
|
|
}
|
|||
|
|
that.dailyTableRatio.push(dailyratio);
|
|||
|
|
|
|||
|
|
var maxdailyJson = statDaily.maxDay;
|
|||
|
|
for (var key in maxdailyJson) {
|
|||
|
|
that.tableMaxDaily.push(key);
|
|||
|
|
that.tableMaxDailyNum.push(maxdailyJson[key]);
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
var mindailyJson = statDaily.minDay;
|
|||
|
|
for (var key in mindailyJson) {
|
|||
|
|
that.tableMinDaily.push(key);
|
|||
|
|
that.tableMinDailyNum.push(mindailyJson[key]);
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
//读取每月
|
|||
|
|
var statMonthly = onetabledata.statMonthly;
|
|||
|
|
that.tableMonthlyAvg.push(statMonthly.avg);
|
|||
|
|
var monthlydata = [];
|
|||
|
|
var monthlyratio = [];
|
|||
|
|
for (var k = 0; k < statMonthly.data.length; k++) {
|
|||
|
|
monthlydata.push(statMonthly.data[k]);
|
|||
|
|
}
|
|||
|
|
that.monthlyTableData.push(monthlydata);
|
|||
|
|
for (var k = 0; k < statMonthly.ratio.length; k++) {
|
|||
|
|
monthlyratio.push(statMonthly.ratio[k]);
|
|||
|
|
}
|
|||
|
|
that.monthlyTableRatio.push(monthlyratio);
|
|||
|
|
|
|||
|
|
var maxmonthlyJson = statMonthly.maxMonth;
|
|||
|
|
for (var key in maxmonthlyJson) {
|
|||
|
|
that.tableMaxMonthly.push(key);
|
|||
|
|
that.tableMaxMonthlyNum.push(maxmonthlyJson[key]);
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
var minmonthlyJson = statMonthly.minMonth;
|
|||
|
|
for (var key in minmonthlyJson) {
|
|||
|
|
that.tableMinMonthly.push(key);
|
|||
|
|
that.tableMinMonthlyNum.push(minmonthlyJson[key]);
|
|||
|
|
}
|
|||
|
|
}
|
|||
|
|
that.IsCardShow = true;
|
|||
|
|
that.tableStatNum = that.tableStatNum.slice(0);
|
|||
|
|
setTimeout(function () {
|
|||
|
|
for (var i = 0; i < that.tableStatNum.length; i++) {
|
|||
|
|
that.initTableDaliyData(i);
|
|||
|
|
that.initTableDaliyRatio(i);
|
|||
|
|
that.initTableMonthlyData(i);
|
|||
|
|
that.initTableMonthlyRatio(i);
|
|||
|
|
}
|
|||
|
|
}, 50);
|
|||
|
|
that.taskMessage = true;
|
|||
|
|
} else {
|
|||
|
|
that.$message.info("数据为空，无法生成任务信息统计报告！");
|
|||
|
|
that.taskMessage = false;
|
|||
|
|
}
|
|||
|
|
}
|
|||
|
|
});
|
|||
|
|
|
|||
|
|
request({
|
|||
|
|
url: "/report/collectorsInfo",
|
|||
|
|
method: "post",
|
|||
|
|
params: {
|
|||
|
|
taskId: that.ReportTask,
|
|||
|
|
},
|
|||
|
|
}).then(function (response) {
|
|||
|
|
if (response.data.status == "401") {
|
|||
|
|
that.$alert(response.data.message);
|
|||
|
|
that.$router.push({ path: "/login" });
|
|||
|
|
} else {
|
|||
|
|
//先清空
|
|||
|
|
that.workerNum = [];
|
|||
|
|
that.tableNum = [];
|
|||
|
|
that.workerInfo = [];
|
|||
|
|
that.TableList = [];
|
|||
|
|
that.WorkerList = [];
|
|||
|
|
that.workLoadList = [];
|
|||
|
|
that.avgWorkLoadList = [];
|
|||
|
|
|
|||
|
|
if (response.status === 200) {
|
|||
|
|
if (response.data.length) {
|
|||
|
|
var result = response.data;
|
|||
|
|
if (result.length > 0) {
|
|||
|
|
var workerNum1 = result.length;
|
|||
|
|
var tableNum1 = 0;
|
|||
|
|
for (var key in result[0]) {
|
|||
|
|
if (key != "name" && key != "phone" && key != "email") {
|
|||
|
|
that.TableList.push(key);
|
|||
|
|
tableNum1 = tableNum1 + 1;
|
|||
|
|
}
|
|||
|
|
}
|
|||
|
|
for (var i = 0; i < workerNum1; i++) {
|
|||
|
|
that.workerNum.push(i + 1);
|
|||
|
|
}
|
|||
|
|
for (var i = 0; i < tableNum1; i++) {
|
|||
|
|
that.tableNum.push(i + 1);
|
|||
|
|
}
|
|||
|
|
for (var i = 0; i < result.length; i++) {
|
|||
|
|
var oneworkerdata = result[i];
|
|||
|
|
that.workerInfo.push({
|
|||
|
|
name: oneworkerdata.name,
|
|||
|
|
phone: oneworkerdata.phone,
|
|||
|
|
email: oneworkerdata.email,
|
|||
|
|
});
|
|||
|
|
that.WorkerList.push(oneworkerdata.name);
|
|||
|
|
|
|||
|
|
//读取表信息
|
|||
|
|
var tablesinfo = [];
|
|||
|
|
for (var key in oneworkerdata) {
|
|||
|
|
if (key != "name" && key != "phone" && key != "email") {
|
|||
|
|
tablesinfo.push(oneworkerdata[key]);
|
|||
|
|
}
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
for (var j = 0; j < that.tableNum.length; j++) {
|
|||
|
|
var onetabledata = tablesinfo[j];
|
|||
|
|
if (that.workLoadList[j]) {
|
|||
|
|
that.workLoadList[j].push(onetabledata.workLoad);
|
|||
|
|
that.avgWorkLoadList[j].push(onetabledata.avgWorkLoad);
|
|||
|
|
that.workLoadDaily[j].push(onetabledata.workLoadDaily);
|
|||
|
|
} else {
|
|||
|
|
var workLoadList1 = [];
|
|||
|
|
var avgWorkLoadList1 = [];
|
|||
|
|
var workLoadDaily1 = [];
|
|||
|
|
workLoadList1.push(onetabledata.workLoad);
|
|||
|
|
avgWorkLoadList1.push(onetabledata.avgWorkLoad);
|
|||
|
|
workLoadDaily1.push(onetabledata.workLoadDaily);
|
|||
|
|
|
|||
|
|
that.workLoadList[j] = workLoadList1;
|
|||
|
|
that.avgWorkLoadList[j] = avgWorkLoadList1;
|
|||
|
|
that.workLoadDaily[j] = workLoadDaily1;
|
|||
|
|
}
|
|||
|
|
}
|
|||
|
|
}
|
|||
|
|
that.IsCardShow = true;
|
|||
|
|
that.tableNum = that.tableNum.slice(0);
|
|||
|
|
that.workerNum = that.workerNum.slice(0);
|
|||
|
|
setTimeout(function () {
|
|||
|
|
for (var k = 0; k < that.tableNum.length; k++) {
|
|||
|
|
that.initWorkLoad(k);
|
|||
|
|
that.initAvgWorkLoad(k);
|
|||
|
|
for (var j = 0; j < that.workerNum.length; j++) {
|
|||
|
|
that.initWorkLoadDaily(k, j);
|
|||
|
|
}
|
|||
|
|
}
|
|||
|
|
}, 50);
|
|||
|
|
that.workerMessage = true;
|
|||
|
|
} else {
|
|||
|
|
that.$message.info("数据为空，无法生成人员信息统计报告！");
|
|||
|
|
that.workerMessage = false;
|
|||
|
|
}
|
|||
|
|
} else {
|
|||
|
|
that.$message.info("数据为空，无法生成人员信息统计报告！");
|
|||
|
|
}
|
|||
|
|
}
|
|||
|
|
}
|
|||
|
|
});
|
|||
|
|
},
|
|||
|
|
//i表示第几个表
|
|||
|
|
initTableDaliyData(i) {
|
|||
|
|
if (this.myTableDailyDataEchart[i])
|
|||
|
|
this.myTableDailyDataEchart[i].clear();
|
|||
|
|
|
|||
|
|
var dates = [];
|
|||
|
|
var counts = [];
|
|||
|
|
for (let j = 0; j < this.dailyTableData[i].length; j++) {
|
|||
|
|
dates.push(this.dailyTableData[i][j].date);
|
|||
|
|
counts.push(this.dailyTableData[i][j].count);
|
|||
|
|
}
|
|||
|
|
this.myTableDailyDataEchart[i] = echarts.init(
|
|||
|
|
document.getElementById("dailyDataEchart" + i)
|
|||
|
|
);
|
|||
|
|
|
|||
|
|
//绘制
|
|||
|
|
var option = {
|
|||
|
|
backgroundColor: "#323a5e",
|
|||
|
|
tooltip: {
|
|||
|
|
trigger: "axis",
|
|||
|
|
axisPointer: {
|
|||
|
|
// 坐标轴指示器，坐标轴触发有效
|
|||
|
|
type: "shadow", // 默认为直线，可选为：'line' | 'shadow'
|
|||
|
|
},
|
|||
|
|
},
|
|||
|
|
grid: {
|
|||
|
|
left: "2%",
|
|||
|
|
right: "4%",
|
|||
|
|
bottom: "14%",
|
|||
|
|
top: "16%",
|
|||
|
|
containLabel: true,
|
|||
|
|
},
|
|||
|
|
legend: {
|
|||
|
|
data: ["采集量"],
|
|||
|
|
right: 10,
|
|||
|
|
top: 12,
|
|||
|
|
textStyle: {
|
|||
|
|
color: "#fff",
|
|||
|
|
},
|
|||
|
|
itemWidth: 12,
|
|||
|
|
itemHeight: 10,
|
|||
|
|
},
|
|||
|
|
xAxis: {
|
|||
|
|
type: "category",
|
|||
|
|
data: dates,
|
|||
|
|
axisLine: {
|
|||
|
|
lineStyle: {
|
|||
|
|
color: "white",
|
|||
|
|
},
|
|||
|
|
},
|
|||
|
|
axisLabel: {
|
|||
|
|
textStyle: {
|
|||
|
|
fontFamily: "Microsoft YaHei",
|
|||
|
|
},
|
|||
|
|
},
|
|||
|
|
},
|
|||
|
|
yAxis: {
|
|||
|
|
type: "value",
|
|||
|
|
axisLine: {
|
|||
|
|
show: false,
|
|||
|
|
lineStyle: {
|
|||
|
|
color: "white",
|
|||
|
|
},
|
|||
|
|
},
|
|||
|
|
splitLine: {
|
|||
|
|
show: true,
|
|||
|
|
lineStyle: {
|
|||
|
|
color: "rgba(255,255,255,0.3)",
|
|||
|
|
},
|
|||
|
|
},
|
|||
|
|
axisLabel: {},
|
|||
|
|
},
|
|||
|
|
dataZoom: [
|
|||
|
|
{
|
|||
|
|
show: true,
|
|||
|
|
height: 12,
|
|||
|
|
xAxisIndex: [0],
|
|||
|
|
bottom: "8%",
|
|||
|
|
start: 10,
|
|||
|
|
end: 90,
|
|||
|
|
handleIcon:
|
|||
|
|
"path://M306.1,413c0,2.2-1.8,4-4,4h-59.8c-2.2,0-4-1.8-4-4V200.8c0-2.2,1.8-4,4-4h59.8c2.2,0,4,1.8,4,4V413z",
|
|||
|
|
handleSize: "110%",
|
|||
|
|
handleStyle: {
|
|||
|
|
color: "#d3dee5",
|
|||
|
|
},
|
|||
|
|
textStyle: {
|
|||
|
|
color: "#fff",
|
|||
|
|
},
|
|||
|
|
borderColor: "#90979c",
|
|||
|
|
},
|
|||
|
|
{
|
|||
|
|
type: "inside",
|
|||
|
|
show: true,
|
|||
|
|
height: 15,
|
|||
|
|
start: 1,
|
|||
|
|
end: 35,
|
|||
|
|
},
|
|||
|
|
],
|
|||
|
|
series: [
|
|||
|
|
{
|
|||
|
|
name: "采集量",
|
|||
|
|
type: "bar",
|
|||
|
|
barWidth: "5%",
|
|||
|
|
itemStyle: {
|
|||
|
|
normal: {
|
|||
|
|
color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
|
|||
|
|
{
|
|||
|
|
offset: 0,
|
|||
|
|
color: "#fccb05",
|
|||
|
|
},
|
|||
|
|
{
|
|||
|
|
offset: 1,
|
|||
|
|
color: "#f5804d",
|
|||
|
|
},
|
|||
|
|
]),
|
|||
|
|
barBorderRadius: 12,
|
|||
|
|
},
|
|||
|
|
},
|
|||
|
|
data: counts,
|
|||
|
|
},
|
|||
|
|
],
|
|||
|
|
};
|
|||
|
|
|
|||
|
|
var app = {
|
|||
|
|
currentIndex: -1,
|
|||
|
|
};
|
|||
|
|
let that = this;
|
|||
|
|
setInterval(function () {
|
|||
|
|
var dataLen = option.series[0].data.length;
|
|||
|
|
|
|||
|
|
// 取消之前高亮的图形
|
|||
|
|
that.myTableDailyDataEchart[i].dispatchAction({
|
|||
|
|
type: "downplay",
|
|||
|
|
seriesIndex: 0,
|
|||
|
|
dataIndex: app.currentIndex,
|
|||
|
|
});
|
|||
|
|
app.currentIndex = (app.currentIndex + 1) % dataLen;
|
|||
|
|
|
|||
|
|
// 高亮当前图形
|
|||
|
|
that.myTableDailyDataEchart[i].dispatchAction({
|
|||
|
|
type: "highlight",
|
|||
|
|
seriesIndex: 0,
|
|||
|
|
dataIndex: app.currentIndex,
|
|||
|
|
});
|
|||
|
|
// 显示 tooltip
|
|||
|
|
that.myTableDailyDataEchart[i].dispatchAction({
|
|||
|
|
type: "showTip",
|
|||
|
|
seriesIndex: 0,
|
|||
|
|
dataIndex: app.currentIndex,
|
|||
|
|
});
|
|||
|
|
}, 1000);
|
|||
|
|
this.myTableDailyDataEchart[i].setOption(option);
|
|||
|
|
},
|
|||
|
|
//i表示第几个表
|
|||
|
|
initTableDaliyRatio(i) {
|
|||
|
|
if (this.myTableDailyRatioEchart[i])
|
|||
|
|
this.myTableDailyRatioEchart[i].clear();
|
|||
|
|
|
|||
|
|
var dates = [];
|
|||
|
|
var counts = [];
|
|||
|
|
var j = 0;
|
|||
|
|
for (j; j < this.dailyTableRatio[i].length; j++) {
|
|||
|
|
dates.push(this.dailyTableRatio[i][j].date);
|
|||
|
|
counts.push(this.dailyTableRatio[i][j].ratio);
|
|||
|
|
}
|
|||
|
|
this.myTableDailyRatioEchart[i] = echarts.init(
|
|||
|
|
document.getElementById("dailyRatioEchart" + i)
|
|||
|
|
);
|
|||
|
|
|
|||
|
|
//绘制
|
|||
|
|
var option = {
|
|||
|
|
backgroundColor: "#323a5e",
|
|||
|
|
tooltip: {
|
|||
|
|
trigger: "axis",
|
|||
|
|
axisPointer: {
|
|||
|
|
// 坐标轴指示器，坐标轴触发有效
|
|||
|
|
type: "shadow", // 默认为直线，可选为：'line' | 'shadow'
|
|||
|
|
},
|
|||
|
|
},
|
|||
|
|
grid: {
|
|||
|
|
left: "2%",
|
|||
|
|
right: "4%",
|
|||
|
|
bottom: "14%",
|
|||
|
|
top: "16%",
|
|||
|
|
containLabel: true,
|
|||
|
|
},
|
|||
|
|
legend: {
|
|||
|
|
data: ["采集进度"],
|
|||
|
|
right: 10,
|
|||
|
|
top: 12,
|
|||
|
|
textStyle: {
|
|||
|
|
color: "#fff",
|
|||
|
|
},
|
|||
|
|
itemWidth: 12,
|
|||
|
|
itemHeight: 10,
|
|||
|
|
},
|
|||
|
|
xAxis: {
|
|||
|
|
type: "category",
|
|||
|
|
data: dates,
|
|||
|
|
axisLine: {
|
|||
|
|
lineStyle: {
|
|||
|
|
color: "white",
|
|||
|
|
},
|
|||
|
|
},
|
|||
|
|
axisLabel: {
|
|||
|
|
textStyle: {
|
|||
|
|
fontFamily: "Microsoft YaHei",
|
|||
|
|
},
|
|||
|
|
},
|
|||
|
|
},
|
|||
|
|
yAxis: {
|
|||
|
|
type: "value",
|
|||
|
|
axisLine: {
|
|||
|
|
show: false,
|
|||
|
|
lineStyle: {
|
|||
|
|
color: "white",
|
|||
|
|
},
|
|||
|
|
},
|
|||
|
|
splitLine: {
|
|||
|
|
show: true,
|
|||
|
|
lineStyle: {
|
|||
|
|
color: "rgba(255,255,255,0.3)",
|
|||
|
|
},
|
|||
|
|
},
|
|||
|
|
axisLabel: {},
|
|||
|
|
},
|
|||
|
|
dataZoom: [
|
|||
|
|
{
|
|||
|
|
show: true,
|
|||
|
|
height: 12,
|
|||
|
|
xAxisIndex: [0],
|
|||
|
|
bottom: "8%",
|
|||
|
|
start: 10,
|
|||
|
|
end: 90,
|
|||
|
|
handleIcon:
|
|||
|
|
"path://M306.1,413c0,2.2-1.8,4-4,4h-59.8c-2.2,0-4-1.8-4-4V200.8c0-2.2,1.8-4,4-4h59.8c2.2,0,4,1.8,4,4V413z",
|
|||
|
|
handleSize: "110%",
|
|||
|
|
handleStyle: {
|
|||
|
|
color: "#d3dee5",
|
|||
|
|
},
|
|||
|
|
textStyle: {
|
|||
|
|
color: "#fff",
|
|||
|
|
},
|
|||
|
|
borderColor: "#90979c",
|
|||
|
|
},
|
|||
|
|
{
|
|||
|
|
type: "inside",
|
|||
|
|
show: true,
|
|||
|
|
height: 15,
|
|||
|
|
start: 1,
|
|||
|
|
end: 35,
|
|||
|
|
},
|
|||
|
|
],
|
|||
|
|
series: [
|
|||
|
|
{
|
|||
|
|
name: "采集进度",
|
|||
|
|
type: "bar",
|
|||
|
|
barWidth: "5%",
|
|||
|
|
itemStyle: {
|
|||
|
|
normal: {
|
|||
|
|
color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
|
|||
|
|
{
|
|||
|
|
offset: 0,
|
|||
|
|
color: "#8bd46e",
|
|||
|
|
},
|
|||
|
|
{
|
|||
|
|
offset: 1,
|
|||
|
|
color: "#09bcb7",
|
|||
|
|
},
|
|||
|
|
]),
|
|||
|
|
barBorderRadius: 12,
|
|||
|
|
},
|
|||
|
|
},
|
|||
|
|
data: counts,
|
|||
|
|
},
|
|||
|
|
],
|
|||
|
|
};
|
|||
|
|
|
|||
|
|
var app = {
|
|||
|
|
currentIndex: -1,
|
|||
|
|
};
|
|||
|
|
let that = this;
|
|||
|
|
setInterval(function () {
|
|||
|
|
var dataLen = option.series[0].data.length;
|
|||
|
|
|
|||
|
|
// 取消之前高亮的图形
|
|||
|
|
that.myTableDailyRatioEchart[i].dispatchAction({
|
|||
|
|
type: "downplay",
|
|||
|
|
seriesIndex: 0,
|
|||
|
|
dataIndex: app.currentIndex,
|
|||
|
|
});
|
|||
|
|
app.currentIndex = (app.currentIndex + 1) % dataLen;
|
|||
|
|
|
|||
|
|
// 高亮当前图形
|
|||
|
|
that.myTableDailyRatioEchart[i].dispatchAction({
|
|||
|
|
type: "highlight",
|
|||
|
|
seriesIndex: 0,
|
|||
|
|
dataIndex: app.currentIndex,
|
|||
|
|
});
|
|||
|
|
// 显示 tooltip
|
|||
|
|
that.myTableDailyRatioEchart[i].dispatchAction({
|
|||
|
|
type: "showTip",
|
|||
|
|
seriesIndex: 0,
|
|||
|
|
dataIndex: app.currentIndex,
|
|||
|
|
});
|
|||
|
|
}, 1000);
|
|||
|
|
|
|||
|
|
this.myTableDailyRatioEchart[i].setOption(option);
|
|||
|
|
},
|
|||
|
|
//i表示第几个表
|
|||
|
|
initTableMonthlyData(i) {
|
|||
|
|
if (this.myTableMonthlyDataEchart[i])
|
|||
|
|
this.myTableMonthlyDataEchart[i].clear();
|
|||
|
|
|
|||
|
|
var dates = [];
|
|||
|
|
var counts = [];
|
|||
|
|
var j = 0;
|
|||
|
|
for (j; j < this.monthlyTableData[i].length; j++) {
|
|||
|
|
dates.push(this.monthlyTableData[i][j].date);
|
|||
|
|
counts.push(this.monthlyTableData[i][j].count);
|
|||
|
|
}
|
|||
|
|
this.myTableMonthlyDataEchart[i] = echarts.init(
|
|||
|
|
document.getElementById("monthlyDataEchart" + i)
|
|||
|
|
);
|
|||
|
|
|
|||
|
|
//绘制
|
|||
|
|
var option = {
|
|||
|
|
backgroundColor: "#323a5e",
|
|||
|
|
tooltip: {
|
|||
|
|
trigger: "axis",
|
|||
|
|
axisPointer: {
|
|||
|
|
// 坐标轴指示器，坐标轴触发有效
|
|||
|
|
type: "shadow", // 默认为直线，可选为：'line' | 'shadow'
|
|||
|
|
},
|
|||
|
|
},
|
|||
|
|
grid: {
|
|||
|
|
left: "2%",
|
|||
|
|
right: "4%",
|
|||
|
|
bottom: "14%",
|
|||
|
|
top: "16%",
|
|||
|
|
containLabel: true,
|
|||
|
|
},
|
|||
|
|
legend: {
|
|||
|
|
data: ["采集量"],
|
|||
|
|
right: 10,
|
|||
|
|
top: 12,
|
|||
|
|
textStyle: {
|
|||
|
|
color: "#fff",
|
|||
|
|
},
|
|||
|
|
itemWidth: 12,
|
|||
|
|
itemHeight: 10,
|
|||
|
|
},
|
|||
|
|
xAxis: {
|
|||
|
|
type: "category",
|
|||
|
|
data: dates,
|
|||
|
|
axisLine: {
|
|||
|
|
lineStyle: {
|
|||
|
|
color: "white",
|
|||
|
|
},
|
|||
|
|
},
|
|||
|
|
axisLabel: {
|
|||
|
|
textStyle: {
|
|||
|
|
fontFamily: "Microsoft YaHei",
|
|||
|
|
},
|
|||
|
|
},
|
|||
|
|
},
|
|||
|
|
yAxis: {
|
|||
|
|
type: "value",
|
|||
|
|
axisLine: {
|
|||
|
|
show: false,
|
|||
|
|
lineStyle: {
|
|||
|
|
color: "white",
|
|||
|
|
},
|
|||
|
|
},
|
|||
|
|
splitLine: {
|
|||
|
|
show: true,
|
|||
|
|
lineStyle: {
|
|||
|
|
color: "rgba(255,255,255,0.3)",
|
|||
|
|
},
|
|||
|
|
},
|
|||
|
|
axisLabel: {},
|
|||
|
|
},
|
|||
|
|
dataZoom: [
|
|||
|
|
{
|
|||
|
|
show: true,
|
|||
|
|
height: 12,
|
|||
|
|
xAxisIndex: [0],
|
|||
|
|
bottom: "8%",
|
|||
|
|
start: 10,
|
|||
|
|
end: 90,
|
|||
|
|
handleIcon:
|
|||
|
|
"path://M306.1,413c0,2.2-1.8,4-4,4h-59.8c-2.2,0-4-1.8-4-4V200.8c0-2.2,1.8-4,4-4h59.8c2.2,0,4,1.8,4,4V413z",
|
|||
|
|
handleSize: "110%",
|
|||
|
|
handleStyle: {
|
|||
|
|
color: "#d3dee5",
|
|||
|
|
},
|
|||
|
|
textStyle: {
|
|||
|
|
color: "#fff",
|
|||
|
|
},
|
|||
|
|
borderColor: "#90979c",
|
|||
|
|
},
|
|||
|
|
{
|
|||
|
|
type: "inside",
|
|||
|
|
show: true,
|
|||
|
|
height: 15,
|
|||
|
|
start: 1,
|
|||
|
|
end: 35,
|
|||
|
|
},
|
|||
|
|
],
|
|||
|
|
series: [
|
|||
|
|
{
|
|||
|
|
name: "采集量",
|
|||
|
|
type: "bar",
|
|||
|
|
barWidth: "5%",
|
|||
|
|
itemStyle: {
|
|||
|
|
normal: {
|
|||
|
|
color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
|
|||
|
|
{
|
|||
|
|
offset: 0,
|
|||
|
|
color: "#fccb05",
|
|||
|
|
},
|
|||
|
|
{
|
|||
|
|
offset: 1,
|
|||
|
|
color: "#f5804d",
|
|||
|
|
},
|
|||
|
|
]),
|
|||
|
|
barBorderRadius: 12,
|
|||
|
|
},
|
|||
|
|
},
|
|||
|
|
data: counts,
|
|||
|
|
},
|
|||
|
|
],
|
|||
|
|
};
|
|||
|
|
|
|||
|
|
var app = {
|
|||
|
|
currentIndex: -1,
|
|||
|
|
};
|
|||
|
|
let that = this;
|
|||
|
|
setInterval(function () {
|
|||
|
|
var dataLen = option.series[0].data.length;
|
|||
|
|
|
|||
|
|
// 取消之前高亮的图形
|
|||
|
|
that.myTableMonthlyDataEchart[i].dispatchAction({
|
|||
|
|
type: "downplay",
|
|||
|
|
seriesIndex: 0,
|
|||
|
|
dataIndex: app.currentIndex,
|
|||
|
|
});
|
|||
|
|
app.currentIndex = (app.currentIndex + 1) % dataLen;
|
|||
|
|
|
|||
|
|
// 高亮当前图形
|
|||
|
|
that.myTableMonthlyDataEchart[i].dispatchAction({
|
|||
|
|
type: "highlight",
|
|||
|
|
seriesIndex: 0,
|
|||
|
|
dataIndex: app.currentIndex,
|
|||
|
|
});
|
|||
|
|
// 显示 tooltip
|
|||
|
|
that.myTableMonthlyDataEchart[i].dispatchAction({
|
|||
|
|
type: "showTip",
|
|||
|
|
seriesIndex: 0,
|
|||
|
|
dataIndex: app.currentIndex,
|
|||
|
|
});
|
|||
|
|
}, 1000);
|
|||
|
|
|
|||
|
|
this.myTableMonthlyDataEchart[i].setOption(option);
|
|||
|
|
},
|
|||
|
|
//i表示第几个表
|
|||
|
|
initTableMonthlyRatio(i) {
|
|||
|
|
if (this.myTableMonthlyRatioEchart[i])
|
|||
|
|
this.myTableMonthlyRatioEchart[i].clear();
|
|||
|
|
|
|||
|
|
var dates = [];
|
|||
|
|
var counts = [];
|
|||
|
|
var j = 0;
|
|||
|
|
for (j; j < this.monthlyTableRatio[i].length; j++) {
|
|||
|
|
dates.push(this.monthlyTableRatio[i][j].date);
|
|||
|
|
counts.push(this.monthlyTableRatio[i][j].ratio);
|
|||
|
|
}
|
|||
|
|
this.myTableMonthlyRatioEchart[i] = echarts.init(
|
|||
|
|
document.getElementById("monthlyRatioEchart" + i)
|
|||
|
|
);
|
|||
|
|
|
|||
|
|
//绘制
|
|||
|
|
var option = {
|
|||
|
|
backgroundColor: "#323a5e",
|
|||
|
|
tooltip: {
|
|||
|
|
trigger: "axis",
|
|||
|
|
axisPointer: {
|
|||
|
|
// 坐标轴指示器，坐标轴触发有效
|
|||
|
|
type: "shadow", // 默认为直线，可选为：'line' | 'shadow'
|
|||
|
|
},
|
|||
|
|
},
|
|||
|
|
grid: {
|
|||
|
|
left: "2%",
|
|||
|
|
right: "4%",
|
|||
|
|
bottom: "14%",
|
|||
|
|
top: "16%",
|
|||
|
|
containLabel: true,
|
|||
|
|
},
|
|||
|
|
legend: {
|
|||
|
|
data: ["采集进度"],
|
|||
|
|
right: 10,
|
|||
|
|
top: 12,
|
|||
|
|
textStyle: {
|
|||
|
|
color: "#fff",
|
|||
|
|
},
|
|||
|
|
itemWidth: 12,
|
|||
|
|
itemHeight: 10,
|
|||
|
|
},
|
|||
|
|
xAxis: {
|
|||
|
|
type: "category",
|
|||
|
|
data: dates,
|
|||
|
|
axisLine: {
|
|||
|
|
lineStyle: {
|
|||
|
|
color: "white",
|
|||
|
|
},
|
|||
|
|
},
|
|||
|
|
axisLabel: {
|
|||
|
|
textStyle: {
|
|||
|
|
fontFamily: "Microsoft YaHei",
|
|||
|
|
},
|
|||
|
|
},
|
|||
|
|
},
|
|||
|
|
yAxis: {
|
|||
|
|
type: "value",
|
|||
|
|
axisLine: {
|
|||
|
|
show: false,
|
|||
|
|
lineStyle: {
|
|||
|
|
color: "white",
|
|||
|
|
},
|
|||
|
|
},
|
|||
|
|
splitLine: {
|
|||
|
|
show: true,
|
|||
|
|
lineStyle: {
|
|||
|
|
color: "rgba(255,255,255,0.3)",
|
|||
|
|
},
|
|||
|
|
},
|
|||
|
|
axisLabel: {},
|
|||
|
|
},
|
|||
|
|
dataZoom: [
|
|||
|
|
{
|
|||
|
|
show: true,
|
|||
|
|
height: 12,
|
|||
|
|
xAxisIndex: [0],
|
|||
|
|
bottom: "8%",
|
|||
|
|
start: 10,
|
|||
|
|
end: 90,
|
|||
|
|
handleIcon:
|
|||
|
|
"path://M306.1,413c0,2.2-1.8,4-4,4h-59.8c-2.2,0-4-1.8-4-4V200.8c0-2.2,1.8-4,4-4h59.8c2.2,0,4,1.8,4,4V413z",
|
|||
|
|
handleSize: "110%",
|
|||
|
|
handleStyle: {
|
|||
|
|
color: "#d3dee5",
|
|||
|
|
},
|
|||
|
|
textStyle: {
|
|||
|
|
color: "#fff",
|
|||
|
|
},
|
|||
|
|
borderColor: "#90979c",
|
|||
|
|
},
|
|||
|
|
{
|
|||
|
|
type: "inside",
|
|||
|
|
show: true,
|
|||
|
|
height: 15,
|
|||
|
|
start: 1,
|
|||
|
|
end: 35,
|
|||
|
|
},
|
|||
|
|
],
|
|||
|
|
series: [
|
|||
|
|
{
|
|||
|
|
name: "采集进度",
|
|||
|
|
type: "bar",
|
|||
|
|
barWidth: "5%",
|
|||
|
|
itemStyle: {
|
|||
|
|
normal: {
|
|||
|
|
color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
|
|||
|
|
{
|
|||
|
|
offset: 0,
|
|||
|
|
color: "#8bd46e",
|
|||
|
|
},
|
|||
|
|
{
|
|||
|
|
offset: 1,
|
|||
|
|
color: "#09bcb7",
|
|||
|
|
},
|
|||
|
|
]),
|
|||
|
|
barBorderRadius: 12,
|
|||
|
|
},
|
|||
|
|
},
|
|||
|
|
data: counts,
|
|||
|
|
},
|
|||
|
|
],
|
|||
|
|
};
|
|||
|
|
|
|||
|
|
var app = {
|
|||
|
|
currentIndex: -1,
|
|||
|
|
};
|
|||
|
|
let that = this;
|
|||
|
|
setInterval(function () {
|
|||
|
|
var dataLen = option.series[0].data.length;
|
|||
|
|
|
|||
|
|
// 取消之前高亮的图形
|
|||
|
|
that.myTableMonthlyRatioEchart[i].dispatchAction({
|
|||
|
|
type: "downplay",
|
|||
|
|
seriesIndex: 0,
|
|||
|
|
dataIndex: app.currentIndex,
|
|||
|
|
});
|
|||
|
|
app.currentIndex = (app.currentIndex + 1) % dataLen;
|
|||
|
|
|
|||
|
|
// 高亮当前图形
|
|||
|
|
that.myTableMonthlyRatioEchart[i].dispatchAction({
|
|||
|
|
type: "highlight",
|
|||
|
|
seriesIndex: 0,
|
|||
|
|
dataIndex: app.currentIndex,
|
|||
|
|
});
|
|||
|
|
// 显示 tooltip
|
|||
|
|
that.myTableMonthlyRatioEchart[i].dispatchAction({
|
|||
|
|
type: "showTip",
|
|||
|
|
seriesIndex: 0,
|
|||
|
|
dataIndex: app.currentIndex,
|
|||
|
|
});
|
|||
|
|
}, 1000);
|
|||
|
|
|
|||
|
|
this.myTableMonthlyRatioEchart[i].setOption(option);
|
|||
|
|
},
|
|||
|
|
|
|||
|
|
initWorkLoad(i) {
|
|||
|
|
if (this.myWorkLoadEchart[i]) this.myWorkLoadEchart[i].clear();
|
|||
|
|
|
|||
|
|
this.myWorkLoadEchart[i] = echarts.init(
|
|||
|
|
document.getElementById("workLoad" + i)
|
|||
|
|
);
|
|||
|
|
|
|||
|
|
//绘制
|
|||
|
|
var option = {
|
|||
|
|
backgroundColor: "#323a5e",
|
|||
|
|
tooltip: {
|
|||
|
|
trigger: "axis",
|
|||
|
|
axisPointer: {
|
|||
|
|
// 坐标轴指示器，坐标轴触发有效
|
|||
|
|
type: "shadow", // 默认为直线，可选为：'line' | 'shadow'
|
|||
|
|
},
|
|||
|
|
},
|
|||
|
|
grid: {
|
|||
|
|
left: "2%",
|
|||
|
|
right: "4%",
|
|||
|
|
bottom: "14%",
|
|||
|
|
top: "16%",
|
|||
|
|
containLabel: true,
|
|||
|
|
},
|
|||
|
|
legend: {
|
|||
|
|
data: ["采集量"],
|
|||
|
|
right: 10,
|
|||
|
|
top: 12,
|
|||
|
|
textStyle: {
|
|||
|
|
color: "#fff",
|
|||
|
|
},
|
|||
|
|
itemWidth: 12,
|
|||
|
|
itemHeight: 10,
|
|||
|
|
},
|
|||
|
|
xAxis: {
|
|||
|
|
type: "category",
|
|||
|
|
data: this.WorkerList,
|
|||
|
|
axisLine: {
|
|||
|
|
lineStyle: {
|
|||
|
|
color: "white",
|
|||
|
|
},
|
|||
|
|
},
|
|||
|
|
axisLabel: {
|
|||
|
|
textStyle: {
|
|||
|
|
fontFamily: "Microsoft YaHei",
|
|||
|
|
},
|
|||
|
|
},
|
|||
|
|
},
|
|||
|
|
yAxis: {
|
|||
|
|
type: "value",
|
|||
|
|
axisLine: {
|
|||
|
|
show: false,
|
|||
|
|
lineStyle: {
|
|||
|
|
color: "white",
|
|||
|
|
},
|
|||
|
|
},
|
|||
|
|
splitLine: {
|
|||
|
|
show: true,
|
|||
|
|
lineStyle: {
|
|||
|
|
color: "rgba(255,255,255,0.3)",
|
|||
|
|
},
|
|||
|
|
},
|
|||
|
|
axisLabel: {},
|
|||
|
|
},
|
|||
|
|
dataZoom: [
|
|||
|
|
{
|
|||
|
|
show: true,
|
|||
|
|
height: 12,
|
|||
|
|
xAxisIndex: [0],
|
|||
|
|
bottom: "8%",
|
|||
|
|
start: 10,
|
|||
|
|
end: 90,
|
|||
|
|
handleIcon:
|
|||
|
|
"path://M306.1,413c0,2.2-1.8,4-4,4h-59.8c-2.2,0-4-1.8-4-4V200.8c0-2.2,1.8-4,4-4h59.8c2.2,0,4,1.8,4,4V413z",
|
|||
|
|
handleSize: "110%",
|
|||
|
|
handleStyle: {
|
|||
|
|
color: "#d3dee5",
|
|||
|
|
},
|
|||
|
|
textStyle: {
|
|||
|
|
color: "#fff",
|
|||
|
|
},
|
|||
|
|
borderColor: "#90979c",
|
|||
|
|
},
|
|||
|
|
{
|
|||
|
|
type: "inside",
|
|||
|
|
show: true,
|
|||
|
|
height: 15,
|
|||
|
|
start: 1,
|
|||
|
|
end: 35,
|
|||
|
|
},
|
|||
|
|
],
|
|||
|
|
series: [
|
|||
|
|
{
|
|||
|
|
name: "采集量",
|
|||
|
|
type: "bar",
|
|||
|
|
barWidth: "5%",
|
|||
|
|
itemStyle: {
|
|||
|
|
normal: {
|
|||
|
|
color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
|
|||
|
|
{
|
|||
|
|
offset: 0,
|
|||
|
|
color: "#fccb05",
|
|||
|
|
},
|
|||
|
|
{
|
|||
|
|
offset: 1,
|
|||
|
|
color: "#f5804d",
|
|||
|
|
},
|
|||
|
|
]),
|
|||
|
|
barBorderRadius: 12,
|
|||
|
|
},
|
|||
|
|
},
|
|||
|
|
data: this.workLoadList[i],
|
|||
|
|
},
|
|||
|
|
],
|
|||
|
|
};
|
|||
|
|
|
|||
|
|
var app = {
|
|||
|
|
currentIndex: -1,
|
|||
|
|
};
|
|||
|
|
let that = this;
|
|||
|
|
setInterval(function () {
|
|||
|
|
var dataLen = option.series[0].data.length;
|
|||
|
|
|
|||
|
|
// 取消之前高亮的图形
|
|||
|
|
that.myWorkLoadEchart[i].dispatchAction({
|
|||
|
|
type: "downplay",
|
|||
|
|
seriesIndex: 0,
|
|||
|
|
dataIndex: app.currentIndex,
|
|||
|
|
});
|
|||
|
|
app.currentIndex = (app.currentIndex + 1) % dataLen;
|
|||
|
|
|
|||
|
|
// 高亮当前图形
|
|||
|
|
that.myWorkLoadEchart[i].dispatchAction({
|
|||
|
|
type: "highlight",
|
|||
|
|
seriesIndex: 0,
|
|||
|
|
dataIndex: app.currentIndex,
|
|||
|
|
});
|
|||
|
|
// 显示 tooltip
|
|||
|
|
that.myWorkLoadEchart[i].dispatchAction({
|
|||
|
|
type: "showTip",
|
|||
|
|
seriesIndex: 0,
|
|||
|
|
dataIndex: app.currentIndex,
|
|||
|
|
});
|
|||
|
|
}, 1000);
|
|||
|
|
|
|||
|
|
this.myWorkLoadEchart[i].setOption(option);
|
|||
|
|
},
|
|||
|
|
initAvgWorkLoad(i) {
|
|||
|
|
if (this.myAvgWorkLoadEchart[i]) this.myAvgWorkLoadEchart[i].clear();
|
|||
|
|
|
|||
|
|
this.myAvgWorkLoadEchart[i] = echarts.init(
|
|||
|
|
document.getElementById("avgWorkLoad" + i)
|
|||
|
|
);
|
|||
|
|
|
|||
|
|
//绘制
|
|||
|
|
var option = {
|
|||
|
|
backgroundColor: "#323a5e",
|
|||
|
|
tooltip: {
|
|||
|
|
trigger: "axis",
|
|||
|
|
axisPointer: {
|
|||
|
|
// 坐标轴指示器，坐标轴触发有效
|
|||
|
|
type: "shadow", // 默认为直线，可选为：'line' | 'shadow'
|
|||
|
|
},
|
|||
|
|
},
|
|||
|
|
grid: {
|
|||
|
|
left: "2%",
|
|||
|
|
right: "4%",
|
|||
|
|
bottom: "14%",
|
|||
|
|
top: "16%",
|
|||
|
|
containLabel: true,
|
|||
|
|
},
|
|||
|
|
legend: {
|
|||
|
|
data: ["采集量"],
|
|||
|
|
right: 10,
|
|||
|
|
top: 12,
|
|||
|
|
textStyle: {
|
|||
|
|
color: "#fff",
|
|||
|
|
},
|
|||
|
|
itemWidth: 12,
|
|||
|
|
itemHeight: 10,
|
|||
|
|
},
|
|||
|
|
xAxis: {
|
|||
|
|
type: "category",
|
|||
|
|
data: this.WorkerList,
|
|||
|
|
axisLine: {
|
|||
|
|
lineStyle: {
|
|||
|
|
color: "white",
|
|||
|
|
},
|
|||
|
|
},
|
|||
|
|
axisLabel: {
|
|||
|
|
textStyle: {
|
|||
|
|
fontFamily: "Microsoft YaHei",
|
|||
|
|
},
|
|||
|
|
},
|
|||
|
|
},
|
|||
|
|
yAxis: {
|
|||
|
|
type: "value",
|
|||
|
|
axisLine: {
|
|||
|
|
show: false,
|
|||
|
|
lineStyle: {
|
|||
|
|
color: "white",
|
|||
|
|
},
|
|||
|
|
},
|
|||
|
|
splitLine: {
|
|||
|
|
show: true,
|
|||
|
|
lineStyle: {
|
|||
|
|
color: "rgba(255,255,255,0.3)",
|
|||
|
|
},
|
|||
|
|
},
|
|||
|
|
axisLabel: {},
|
|||
|
|
},
|
|||
|
|
dataZoom: [
|
|||
|
|
{
|
|||
|
|
show: true,
|
|||
|
|
height: 12,
|
|||
|
|
xAxisIndex: [0],
|
|||
|
|
bottom: "8%",
|
|||
|
|
start: 10,
|
|||
|
|
end: 90,
|
|||
|
|
handleIcon:
|
|||
|
|
"path://M306.1,413c0,2.2-1.8,4-4,4h-59.8c-2.2,0-4-1.8-4-4V200.8c0-2.2,1.8-4,4-4h59.8c2.2,0,4,1.8,4,4V413z",
|
|||
|
|
handleSize: "110%",
|
|||
|
|
handleStyle: {
|
|||
|
|
color: "#d3dee5",
|
|||
|
|
},
|
|||
|
|
textStyle: {
|
|||
|
|
color: "#fff",
|
|||
|
|
},
|
|||
|
|
borderColor: "#90979c",
|
|||
|
|
},
|
|||
|
|
{
|
|||
|
|
type: "inside",
|
|||
|
|
show: true,
|
|||
|
|
height: 15,
|
|||
|
|
start: 1,
|
|||
|
|
end: 35,
|
|||
|
|
},
|
|||
|
|
],
|
|||
|
|
series: [
|
|||
|
|
{
|
|||
|
|
name: "采集量",
|
|||
|
|
type: "bar",
|
|||
|
|
barWidth: "5%",
|
|||
|
|
itemStyle: {
|
|||
|
|
normal: {
|
|||
|
|
color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
|
|||
|
|
{
|
|||
|
|
offset: 0,
|
|||
|
|
color: "#33CCFF",
|
|||
|
|
},
|
|||
|
|
{
|
|||
|
|
offset: 1,
|
|||
|
|
color: "#0096f3",
|
|||
|
|
},
|
|||
|
|
]),
|
|||
|
|
barBorderRadius: 12,
|
|||
|
|
},
|
|||
|
|
},
|
|||
|
|
data: this.avgWorkLoadList[i],
|
|||
|
|
},
|
|||
|
|
],
|
|||
|
|
};
|
|||
|
|
|
|||
|
|
var app = {
|
|||
|
|
currentIndex: -1,
|
|||
|
|
};
|
|||
|
|
let that = this;
|
|||
|
|
setInterval(function () {
|
|||
|
|
var dataLen = option.series[0].data.length;
|
|||
|
|
|
|||
|
|
// 取消之前高亮的图形
|
|||
|
|
that.myAvgWorkLoadEchart[i].dispatchAction({
|
|||
|
|
type: "downplay",
|
|||
|
|
seriesIndex: 0,
|
|||
|
|
dataIndex: app.currentIndex,
|
|||
|
|
});
|
|||
|
|
app.currentIndex = (app.currentIndex + 1) % dataLen;
|
|||
|
|
|
|||
|
|
// 高亮当前图形
|
|||
|
|
that.myAvgWorkLoadEchart[i].dispatchAction({
|
|||
|
|
type: "highlight",
|
|||
|
|
seriesIndex: 0,
|
|||
|
|
dataIndex: app.currentIndex,
|
|||
|
|
});
|
|||
|
|
// 显示 tooltip
|
|||
|
|
that.myAvgWorkLoadEchart[i].dispatchAction({
|
|||
|
|
type: "showTip",
|
|||
|
|
seriesIndex: 0,
|
|||
|
|
dataIndex: app.currentIndex,
|
|||
|
|
});
|
|||
|
|
}, 1000);
|
|||
|
|
|
|||
|
|
this.myAvgWorkLoadEchart[i].setOption(option);
|
|||
|
|
},
|
|||
|
|
initWorkLoadDaily(i, j) {
|
|||
|
|
if (this.myWorkLoadDailyEchart[i]) {
|
|||
|
|
if (this.myWorkLoadDailyEchart[i][j])
|
|||
|
|
this.myWorkLoadDailyEchart[i][j].clear();
|
|||
|
|
}
|
|||
|
|
var dates = [];
|
|||
|
|
var counts = [];
|
|||
|
|
var k = 0;
|
|||
|
|
for (k; k < this.workLoadDaily[i][j].length; k++) {
|
|||
|
|
dates.push(this.workLoadDaily[i][j][k].date);
|
|||
|
|
counts.push(this.workLoadDaily[i][j][k].count);
|
|||
|
|
}
|
|||
|
|
var myWorkLoadDailyEchart1 = echarts.init(
|
|||
|
|
document.getElementById("workLoadDaily" + i + j)
|
|||
|
|
);
|
|||
|
|
|
|||
|
|
//绘制
|
|||
|
|
var option = {
|
|||
|
|
backgroundColor: "#323a5e",
|
|||
|
|
tooltip: {
|
|||
|
|
trigger: "axis",
|
|||
|
|
axisPointer: {
|
|||
|
|
// 坐标轴指示器，坐标轴触发有效
|
|||
|
|
type: "shadow", // 默认为直线，可选为：'line' | 'shadow'
|
|||
|
|
},
|
|||
|
|
},
|
|||
|
|
grid: {
|
|||
|
|
left: "2%",
|
|||
|
|
right: "4%",
|
|||
|
|
bottom: "14%",
|
|||
|
|
top: "16%",
|
|||
|
|
containLabel: true,
|
|||
|
|
},
|
|||
|
|
legend: {
|
|||
|
|
data: ["采集量"],
|
|||
|
|
right: 10,
|
|||
|
|
top: 12,
|
|||
|
|
textStyle: {
|
|||
|
|
color: "#fff",
|
|||
|
|
},
|
|||
|
|
itemWidth: 12,
|
|||
|
|
itemHeight: 10,
|
|||
|
|
},
|
|||
|
|
xAxis: {
|
|||
|
|
type: "category",
|
|||
|
|
data: dates,
|
|||
|
|
axisLine: {
|
|||
|
|
lineStyle: {
|
|||
|
|
color: "white",
|
|||
|
|
},
|
|||
|
|
},
|
|||
|
|
axisLabel: {
|
|||
|
|
textStyle: {
|
|||
|
|
fontFamily: "Microsoft YaHei",
|
|||
|
|
},
|
|||
|
|
},
|
|||
|
|
},
|
|||
|
|
yAxis: {
|
|||
|
|
type: "value",
|
|||
|
|
axisLine: {
|
|||
|
|
show: false,
|
|||
|
|
lineStyle: {
|
|||
|
|
color: "white",
|
|||
|
|
},
|
|||
|
|
},
|
|||
|
|
splitLine: {
|
|||
|
|
show: true,
|
|||
|
|
lineStyle: {
|
|||
|
|
color: "rgba(255,255,255,0.3)",
|
|||
|
|
},
|
|||
|
|
},
|
|||
|
|
axisLabel: {},
|
|||
|
|
},
|
|||
|
|
dataZoom: [
|
|||
|
|
{
|
|||
|
|
show: true,
|
|||
|
|
height: 12,
|
|||
|
|
xAxisIndex: [0],
|
|||
|
|
bottom: "8%",
|
|||
|
|
start: 10,
|
|||
|
|
end: 90,
|
|||
|
|
handleIcon:
|
|||
|
|
"path://M306.1,413c0,2.2-1.8,4-4,4h-59.8c-2.2,0-4-1.8-4-4V200.8c0-2.2,1.8-4,4-4h59.8c2.2,0,4,1.8,4,4V413z",
|
|||
|
|
handleSize: "110%",
|
|||
|
|
handleStyle: {
|
|||
|
|
color: "#d3dee5",
|
|||
|
|
},
|
|||
|
|
textStyle: {
|
|||
|
|
color: "#fff",
|
|||
|
|
},
|
|||
|
|
borderColor: "#90979c",
|
|||
|
|
},
|
|||
|
|
{
|
|||
|
|
type: "inside",
|
|||
|
|
show: true,
|
|||
|
|
height: 15,
|
|||
|
|
start: 1,
|
|||
|
|
end: 35,
|
|||
|
|
},
|
|||
|
|
],
|
|||
|
|
series: [
|
|||
|
|
{
|
|||
|
|
name: "采集量",
|
|||
|
|
type: "bar",
|
|||
|
|
barWidth: "5%",
|
|||
|
|
itemStyle: {
|
|||
|
|
normal: {
|
|||
|
|
color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
|
|||
|
|
{
|
|||
|
|
offset: 0,
|
|||
|
|
color: "#8bd46e",
|
|||
|
|
},
|
|||
|
|
{
|
|||
|
|
offset: 1,
|
|||
|
|
color: "#09bcb7",
|
|||
|
|
},
|
|||
|
|
]),
|
|||
|
|
barBorderRadius: 12,
|
|||
|
|
},
|
|||
|
|
},
|
|||
|
|
data: counts,
|
|||
|
|
},
|
|||
|
|
],
|
|||
|
|
};
|
|||
|
|
|
|||
|
|
var app = {
|
|||
|
|
currentIndex: -1,
|
|||
|
|
};
|
|||
|
|
let that = this;
|
|||
|
|
setInterval(function () {
|
|||
|
|
var dataLen = option.series[0].data.length;
|
|||
|
|
|
|||
|
|
// 取消之前高亮的图形
|
|||
|
|
myWorkLoadDailyEchart1.dispatchAction({
|
|||
|
|
type: "downplay",
|
|||
|
|
seriesIndex: 0,
|
|||
|
|
dataIndex: app.currentIndex,
|
|||
|
|
});
|
|||
|
|
app.currentIndex = (app.currentIndex + 1) % dataLen;
|
|||
|
|
|
|||
|
|
// 高亮当前图形
|
|||
|
|
myWorkLoadDailyEchart1.dispatchAction({
|
|||
|
|
type: "highlight",
|
|||
|
|
seriesIndex: 0,
|
|||
|
|
dataIndex: app.currentIndex,
|
|||
|
|
});
|
|||
|
|
// 显示 tooltip
|
|||
|
|
myWorkLoadDailyEchart1.dispatchAction({
|
|||
|
|
type: "showTip",
|
|||
|
|
seriesIndex: 0,
|
|||
|
|
dataIndex: app.currentIndex,
|
|||
|
|
});
|
|||
|
|
}, 1000);
|
|||
|
|
myWorkLoadDailyEchart1.setOption(option);
|
|||
|
|
var sub1 = [];
|
|||
|
|
if (this.myWorkLoadDailyEchart[i]) {
|
|||
|
|
sub1 = this.myWorkLoadDailyEchart[i];
|
|||
|
|
sub1.push(myWorkLoadDailyEchart1);
|
|||
|
|
this.myWorkLoadDailyEchart[i] = sub1;
|
|||
|
|
} else {
|
|||
|
|
sub1.push(myWorkLoadDailyEchart1);
|
|||
|
|
this.myWorkLoadDailyEchart.push(sub1);
|
|||
|
|
}
|
|||
|
|
},
|
|||
|
|
getWarning() {
|
|||
|
|
if (this.warningform.task == "") {
|
|||
|
|
this.$alert("请先选择查看的任务！", "提示", {
|
|||
|
|
confirmButtonText: "确定",
|
|||
|
|
});
|
|||
|
|
return;
|
|||
|
|
} else if (this.warningform.table == "") {
|
|||
|
|
this.$alert("请先选择查看的表！", "提示", {
|
|||
|
|
confirmButtonText: "确定",
|
|||
|
|
});
|
|||
|
|
return;
|
|||
|
|
}
|
|||
|
|
// 给个默认值0.67-1.33
|
|||
|
|
// else if (this.warningform.maxratio == "") {
|
|||
|
|
// this.$alert("请先输入异常上限值！", "提示", {
|
|||
|
|
// confirmButtonText: "确定",
|
|||
|
|
// });
|
|||
|
|
// return;
|
|||
|
|
// } else if (this.warningform.minratio == "") {
|
|||
|
|
// this.$alert("请先输入异常下限值！", "提示", {
|
|||
|
|
// confirmButtonText: "确定",
|
|||
|
|
// });
|
|||
|
|
// return;
|
|||
|
|
// }
|
|||
|
|
else {
|
|||
|
|
let that = this;
|
|||
|
|
this.warningData = [];
|
|||
|
|
let low =
|
|||
|
|
this.warningform.minratio == "" ? 0.67 : this.warningform.minratio;
|
|||
|
|
let high =
|
|||
|
|
this.warningform.maxratio == "" ? 1.33 : this.warningform.maxratio;
|
|||
|
|
request({
|
|||
|
|
url: "/base/getWarningForUser",
|
|||
|
|
method: "post",
|
|||
|
|
params: {
|
|||
|
|
taskId: that.warningform.task,
|
|||
|
|
tableName: that.warningform.table,
|
|||
|
|
lowLimit: low,
|
|||
|
|
highLimit: high,
|
|||
|
|
},
|
|||
|
|
}).then(function (response) {
|
|||
|
|
if (response.data.status == 200) {
|
|||
|
|
if (response.data.data) {
|
|||
|
|
var result = response.data.data.unusualData;
|
|||
|
|
that.warningWorkerNum = result.length;
|
|||
|
|
that.averageNum = response.data.data.averageNum;
|
|||
|
|
that.lowLimitNum = response.data.data.lowLimitNum;
|
|||
|
|
that.highLimitNum = response.data.data.highLimitNum;
|
|||
|
|
var idcount = 0;
|
|||
|
|
for (var i = 0; i < result.length; i++) {
|
|||
|
|
var user = result[i].userName;
|
|||
|
|
var dataaaa = {
|
|||
|
|
id: "",
|
|||
|
|
username: user,
|
|||
|
|
date: "",
|
|||
|
|
count: "",
|
|||
|
|
children: [],
|
|||
|
|
};
|
|||
|
|
for (var j = 0; j < result[i].unusualDay.length; j++) {
|
|||
|
|
if (j == 0) {
|
|||
|
|
dataaaa.id = (idcount + 1).toString();
|
|||
|
|
dataaaa.date = result[i].unusualDay[j].day;
|
|||
|
|
dataaaa.count = result[i].unusualDay[j].num;
|
|||
|
|
} else {
|
|||
|
|
dataaaa.children.push({
|
|||
|
|
id: (idcount + 1).toString(),
|
|||
|
|
username: user,
|
|||
|
|
date: result[i].unusualDay[j].day,
|
|||
|
|
count: result[i].unusualDay[j].num,
|
|||
|
|
});
|
|||
|
|
}
|
|||
|
|
idcount = idcount + 1;
|
|||
|
|
}
|
|||
|
|
that.warningData.push(dataaaa);
|
|||
|
|
}
|
|||
|
|
//that.getSameCount();
|
|||
|
|
that.IsWarningShow = true;
|
|||
|
|
} else {
|
|||
|
|
that.IsWarningShow = false;
|
|||
|
|
that.$alert("该任务目前无工作异常情况~");
|
|||
|
|
}
|
|||
|
|
} else if (response.data.status == "401") {
|
|||
|
|
that.$alert(response.data.message);
|
|||
|
|
that.$router.push({ path: "/login" });
|
|||
|
|
} else {
|
|||
|
|
that.IsWarningShow = false;
|
|||
|
|
that.$alert(response.data.message);
|
|||
|
|
}
|
|||
|
|
});
|
|||
|
|
}
|
|||
|
|
},
|
|||
|
|
getSameCount() {
|
|||
|
|
if (this.warningData.length > 0) {
|
|||
|
|
this.sameCount = [];
|
|||
|
|
var j = 0;
|
|||
|
|
for (var i = 0; i < this.warningData.length; i++) {
|
|||
|
|
this.sameCount.push(1);
|
|||
|
|
}
|
|||
|
|
for (var i = 1; i < this.warningData.length; i++) {
|
|||
|
|
if (this.warningData[j].username == this.warningData[i].username) {
|
|||
|
|
this.sameCount[j] = this.sameCount[j] + 1;
|
|||
|
|
this.sameCount[i] = 0;
|
|||
|
|
} else {
|
|||
|
|
j = i;
|
|||
|
|
}
|
|||
|
|
}
|
|||
|
|
}
|
|||
|
|
},
|
|||
|
|
objectSpanMethod({ row, column, rowIndex, columnIndex }) {
|
|||
|
|
if (columnIndex === 0) {
|
|||
|
|
var _row = this.sameCount[rowIndex];
|
|||
|
|
var _col = _row > 0 ? 1 : 0;
|
|||
|
|
return {
|
|||
|
|
rowspan: _row,
|
|||
|
|
colspan: _col,
|
|||
|
|
};
|
|||
|
|
}
|
|||
|
|
},
|
|||
|
|
tableRowClassName({ row, rowIndex }) {
|
|||
|
|
if (rowIndex % 2 === 0) {
|
|||
|
|
return "success-row";
|
|||
|
|
}
|
|||
|
|
return "";
|
|||
|
|
},
|
|||
|
|
getClusterData(geojsonObject) {
|
|||
|
|
var Features = new GeoJSON().readFeatures(geojsonObject);
|
|||
|
|
var features = new Array(Features.length);
|
|||
|
|
for (var i = 0; i < Features.length; i++) {
|
|||
|
|
var geometry = Features[i].getGeometry();
|
|||
|
|
var coordinates = geometry.getCoordinates();
|
|||
|
|
var coordinate = [];
|
|||
|
|
if (coordinates[0][0]) {
|
|||
|
|
if (coordinates[0][0][0]) {
|
|||
|
|
coordinate = coordinates[0][0];
|
|||
|
|
} else {
|
|||
|
|
coordinate = coordinates[0];
|
|||
|
|
}
|
|||
|
|
} else {
|
|||
|
|
coordinate = coordinates;
|
|||
|
|
}
|
|||
|
|
features[i] = new Feature(new Point(coordinate));
|
|||
|
|
}
|
|||
|
|
var clusterSource = new VectorSource({
|
|||
|
|
features: features,
|
|||
|
|
});
|
|||
|
|
var cluster = new Cluster({
|
|||
|
|
distance: 40,
|
|||
|
|
source: clusterSource,
|
|||
|
|
});
|
|||
|
|
var styleCache = {};
|
|||
|
|
this.clusters = new VectorLayer({
|
|||
|
|
id: "clusterlayer",
|
|||
|
|
source: cluster,
|
|||
|
|
style: function (feature) {
|
|||
|
|
if (feature.get("features")) {
|
|||
|
|
var size = feature.get("features").length;
|
|||
|
|
var style = styleCache[size];
|
|||
|
|
if (!style) {
|
|||
|
|
style = new Style({
|
|||
|
|
image: new CircleStyle({
|
|||
|
|
radius: 10,
|
|||
|
|
stroke: new Stroke({
|
|||
|
|
color: "#fff",
|
|||
|
|
}),
|
|||
|
|
fill: new Fill({
|
|||
|
|
color: "#3399CC",
|
|||
|
|
}),
|
|||
|
|
}),
|
|||
|
|
text: new Text({
|
|||
|
|
text: size.toString(),
|
|||
|
|
fill: new Fill({
|
|||
|
|
color: "#fff",
|
|||
|
|
}),
|
|||
|
|
}),
|
|||
|
|
});
|
|||
|
|
styleCache[size] = style;
|
|||
|
|
}
|
|||
|
|
return style;
|
|||
|
|
}
|
|||
|
|
},
|
|||
|
|
});
|
|||
|
|
//聚类图层
|
|||
|
|
this.clusters.setZIndex(4);
|
|||
|
|
this.map.addLayer(this.clusters);
|
|||
|
|
this.isClusters = true;
|
|||
|
|
},
|
|||
|
|
setCurrentStyle() {
|
|||
|
|
if (this.currentFeatureId !== "") {
|
|||
|
|
this.getFeatureData();
|
|||
|
|
//改变样式
|
|||
|
|
if (this.feature) {
|
|||
|
|
this.feature.setStyle(undefined);
|
|||
|
|
}
|
|||
|
|
this.feature = this.vectorSource.getFeatureById(this.currentFeatureId);
|
|||
|
|
var style = new Style({
|
|||
|
|
image: new CircleStyle({
|
|||
|
|
radius: 7,
|
|||
|
|
fill: new Fill({
|
|||
|
|
color: "yellow",
|
|||
|
|
}),
|
|||
|
|
stroke: new Stroke({
|
|||
|
|
color: "#37eed0",
|
|||
|
|
width: 3,
|
|||
|
|
}),
|
|||
|
|
}),
|
|||
|
|
fill: new Fill({
|
|||
|
|
color: "yellow",
|
|||
|
|
}),
|
|||
|
|
stroke: new Stroke({
|
|||
|
|
color: "#37eed0",
|
|||
|
|
width: 3,
|
|||
|
|
}),
|
|||
|
|
});
|
|||
|
|
this.feature.setStyle(style);
|
|||
|
|
} else {
|
|||
|
|
if (this.feature) {
|
|||
|
|
this.feature.setStyle(undefined);
|
|||
|
|
this.feature = null;
|
|||
|
|
}
|
|||
|
|
}
|
|||
|
|
},
|
|||
|
|
clearAll() {
|
|||
|
|
this.currentFeatureId = "";
|
|||
|
|
this.Info = {};
|
|||
|
|
this.FeaturesId = [];
|
|||
|
|
},
|
|||
|
|
getFeatureData() {
|
|||
|
|
if (this.currentFeatureId !== "") {
|
|||
|
|
let that = this;
|
|||
|
|
//获取数据
|
|||
|
|
request({
|
|||
|
|
url: "/get/getDataById",
|
|||
|
|
method: "post",
|
|||
|
|
params: {
|
|||
|
|
taskId: that.task,
|
|||
|
|
tableName: that.table,
|
|||
|
|
polygonId: that.currentFeatureId,
|
|||
|
|
requestor: "browser",
|
|||
|
|
},
|
|||
|
|
}).then(function (response) {
|
|||
|
|
if (response.data.success == true) {
|
|||
|
|
var jsondata = response.data.data;
|
|||
|
|
var imagedata = [];
|
|||
|
|
var videodata = [];
|
|||
|
|
for (var i = 0; i < jsondata.mediaFileURLs.length; i++) {
|
|||
|
|
if (
|
|||
|
|
jsondata.mediaFileURLs[i].substring(
|
|||
|
|
jsondata.mediaFileURLs[i].length - 3
|
|||
|
|
) == "jpg"
|
|||
|
|
) {
|
|||
|
|
imagedata.push(jsondata.mediaFileURLs[i]);
|
|||
|
|
} else if (
|
|||
|
|
jsondata.mediaFileURLs[i].substring(
|
|||
|
|
jsondata.mediaFileURLs[i].length - 3
|
|||
|
|
) == "avi"
|
|||
|
|
) {
|
|||
|
|
videodata.push(jsondata.mediaFileURLs[i]);
|
|||
|
|
}
|
|||
|
|
}
|
|||
|
|
jsondata.imagedata = imagedata;
|
|||
|
|
jsondata.videodata = videodata;
|
|||
|
|
that.Info = jsondata;
|
|||
|
|
} else if (response.data.status == "401") {
|
|||
|
|
that.$alert(response.data.message);
|
|||
|
|
that.$router.push({ path: "/login" });
|
|||
|
|
}
|
|||
|
|
});
|
|||
|
|
}
|
|||
|
|
},
|
|||
|
|
changeHotMap() {
|
|||
|
|
if (!this.isHot) {
|
|||
|
|
if (this.task && this.table) {
|
|||
|
|
if (this.heatmapLayer) {
|
|||
|
|
this.isHot = !this.isHot;
|
|||
|
|
this.addHeatmapLayer();
|
|||
|
|
} else {
|
|||
|
|
this.$alert("该任务暂无热力图统计数据！");
|
|||
|
|
}
|
|||
|
|
} else {
|
|||
|
|
this.$alert("请先在任务进度中选择生成热力图的任务和表！");
|
|||
|
|
}
|
|||
|
|
} else {
|
|||
|
|
this.isHot = !this.isHot;
|
|||
|
|
this.removeHeatmapLayer();
|
|||
|
|
}
|
|||
|
|
},
|
|||
|
|
addHeatmapLayer() {
|
|||
|
|
if (this.clusters) {
|
|||
|
|
if (this.isClusters) {
|
|||
|
|
this.map.removeLayer(this.clusters);
|
|||
|
|
this.isClusters = false;
|
|||
|
|
}
|
|||
|
|
this.clusters = null;
|
|||
|
|
}
|
|||
|
|
if (this.vectorLayer) {
|
|||
|
|
if (this.isVectorLayer) {
|
|||
|
|
this.map.removeLayer(this.vectorLayer);
|
|||
|
|
this.map.removeInteraction(this.selectclick);
|
|||
|
|
this.isVectorLayer = false;
|
|||
|
|
}
|
|||
|
|
this.vectorLayer = null;
|
|||
|
|
this.selectclick = null;
|
|||
|
|
}
|
|||
|
|
this.distribute = false;
|
|||
|
|
if (this.heatmapLayer) {
|
|||
|
|
this.heatmapLayer.setVisible(true);
|
|||
|
|
}
|
|||
|
|
},
|
|||
|
|
removeHeatmapLayer() {
|
|||
|
|
this.distribute = true;
|
|||
|
|
this.getClusters();
|
|||
|
|
if (this.heatmapLayer) {
|
|||
|
|
this.heatmapLayer.setVisible(false);
|
|||
|
|
}
|
|||
|
|
},
|
|||
|
|
initHeatmapLayer() {
|
|||
|
|
let that = this;
|
|||
|
|
request({
|
|||
|
|
url: "base/getHeatData",
|
|||
|
|
method: "post",
|
|||
|
|
params: {
|
|||
|
|
taskId: that.task,
|
|||
|
|
tableName: that.table,
|
|||
|
|
},
|
|||
|
|
}).then(function (response) {
|
|||
|
|
// 获取数据存入config
|
|||
|
|
if (response.data.status == "401") {
|
|||
|
|
that.$alert(response.data.message);
|
|||
|
|
that.$router.push({ path: "/login" });
|
|||
|
|
} else if (response.data.status === 200) {
|
|||
|
|
if (response.data.data) {
|
|||
|
|
var features = [];
|
|||
|
|
var max = 1;
|
|||
|
|
var datas = response.data.data;
|
|||
|
|
if (datas.length == 0) return;
|
|||
|
|
else {
|
|||
|
|
max = Math.max.apply(
|
|||
|
|
Math,
|
|||
|
|
datas.map(function (o) {
|
|||
|
|
return o.count;
|
|||
|
|
})
|
|||
|
|
);
|
|||
|
|
}
|
|||
|
|
for (var i = 0; i < datas.length; i++) {
|
|||
|
|
var data = datas[i];
|
|||
|
|
var center = [
|
|||
|
|
data.feature.geometry.coordinates[0],
|
|||
|
|
data.feature.geometry.coordinates[1],
|
|||
|
|
];
|
|||
|
|
var geometry = new Point(center);
|
|||
|
|
var feature = new Feature({
|
|||
|
|
geometry: geometry,
|
|||
|
|
weight: parseFloat(data.count) / max.toFixed(10),
|
|||
|
|
});
|
|||
|
|
features.push(feature);
|
|||
|
|
}
|
|||
|
|
var vectorSource = new VectorSource({
|
|||
|
|
features: features,
|
|||
|
|
});
|
|||
|
|
that.heatmapLayer = new HeatmapLayer({
|
|||
|
|
source: vectorSource,
|
|||
|
|
weight: "weight",
|
|||
|
|
});
|
|||
|
|
that.heatmapLayer.setZIndex(8);
|
|||
|
|
that.heatmapLayer.setVisible(false);
|
|||
|
|
that.map.addLayer(that.heatmapLayer);
|
|||
|
|
}
|
|||
|
|
}
|
|||
|
|
});
|
|||
|
|
},
|
|||
|
|
},
|
|||
|
|
};
|
|||
|
|
</script>
|
|||
|
|
|
|||
|
|
<style scoped lang='scss'>
|
|||
|
|
.el-input__inner {
|
|||
|
|
>>> &::placeholder {
|
|||
|
|
font-family: PingFangSC-Regular;
|
|||
|
|
font-size: 14px;
|
|||
|
|
color: #c0c4cc;
|
|||
|
|
}
|
|||
|
|
}
|
|||
|
|
>>> .el-card__body {
|
|||
|
|
height: calc(100% - 74px);
|
|||
|
|
padding: 20px;
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
>>> .el-tabs__content {
|
|||
|
|
height: calc(100% - 40px);
|
|||
|
|
}
|
|||
|
|
>>> .el-radio-button__orig-radio:checked + .el-radio-button__inner {
|
|||
|
|
background-color: #264672;
|
|||
|
|
border-color: #264672;
|
|||
|
|
}
|
|||
|
|
#map {
|
|||
|
|
height: 100%;
|
|||
|
|
width: 100%;
|
|||
|
|
left: 0;
|
|||
|
|
top: 0;
|
|||
|
|
position: absolute;
|
|||
|
|
}
|
|||
|
|
body {
|
|||
|
|
overflow: hidden;
|
|||
|
|
height: 100%;
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
.map-text {
|
|||
|
|
background-color: #304156;
|
|||
|
|
color: white;
|
|||
|
|
font-size: 14px;
|
|||
|
|
}
|
|||
|
|
@media screen and (min-width: 1401px) {
|
|||
|
|
#control {
|
|||
|
|
margin-top: 5px;
|
|||
|
|
}
|
|||
|
|
}
|
|||
|
|
@media screen and (min-width: 840px) and (max-width: 1401px) {
|
|||
|
|
#control {
|
|||
|
|
margin-top: 55px;
|
|||
|
|
}
|
|||
|
|
}
|
|||
|
|
@media screen and (min-width: 420px) and (max-width: 840px) {
|
|||
|
|
#control {
|
|||
|
|
margin-top: 105px;
|
|||
|
|
}
|
|||
|
|
}
|
|||
|
|
@media screen and (max-width: 420px) {
|
|||
|
|
#control {
|
|||
|
|
margin-top: 155px;
|
|||
|
|
}
|
|||
|
|
}
|
|||
|
|
.taskChoser {
|
|||
|
|
margin: 5px 0px 5px 0px;
|
|||
|
|
}
|
|||
|
|
.el-card__body {
|
|||
|
|
padding: 20px;
|
|||
|
|
height: 90% !important;
|
|||
|
|
}
|
|||
|
|
.el-tabs__content {
|
|||
|
|
overflow: auto !important;
|
|||
|
|
position: relative !important;
|
|||
|
|
height: 90% !important;
|
|||
|
|
}
|
|||
|
|
.el-table .success-row {
|
|||
|
|
background: #f0f9eb;
|
|||
|
|
}
|
|||
|
|
#control {
|
|||
|
|
z-index: 1;
|
|||
|
|
position: absolute;
|
|||
|
|
display: flex;
|
|||
|
|
flex-flow: row;
|
|||
|
|
align-items: center;
|
|||
|
|
bottom: 20px;
|
|||
|
|
right: 192px;
|
|||
|
|
}
|
|||
|
|
.map-img {
|
|||
|
|
width: 80px;
|
|||
|
|
height: 100px;
|
|||
|
|
}
|
|||
|
|
.map-type-button {
|
|||
|
|
width: 50px;
|
|||
|
|
display: inline-block;
|
|||
|
|
text-align: center;
|
|||
|
|
}
|
|||
|
|
.map-control .map-type-button {
|
|||
|
|
margin-right: 35px;
|
|||
|
|
}
|
|||
|
|
.demo-table-expand {
|
|||
|
|
font-size: 0;
|
|||
|
|
}
|
|||
|
|
>>> .demo-table-expand label {
|
|||
|
|
width: 150px;
|
|||
|
|
font-weight: bold;
|
|||
|
|
}
|
|||
|
|
>>> .demo-table-expand .el-form-item {
|
|||
|
|
margin-right: 0;
|
|||
|
|
margin-bottom: 0;
|
|||
|
|
width: 80%;
|
|||
|
|
}
|
|||
|
|
</style>
|