3445 lines
100 KiB
Vue
3445 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">
|
||
<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>
|
||
</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;
|
||
// 从 store 获取数据
|
||
const taskData = that.$store.state.taskData.selectTaskHasCreated || [];
|
||
for (var i = 0; i < taskData.length; i++) {
|
||
that.reportoptions.push({
|
||
value: taskData[i].id,
|
||
label: taskData[i].taskName,
|
||
});
|
||
that.taskoptions.push({
|
||
value: taskData[i].id,
|
||
label: taskData[i].taskName,
|
||
});
|
||
that.wTaskOptions.push({
|
||
value: taskData[i].id,
|
||
label: taskData[i].taskName,
|
||
});
|
||
}
|
||
},
|
||
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>
|