2474 lines
110 KiB
HTML
2474 lines
110 KiB
HTML
<!DOCTYPE html>
|
||
<html lang="en">
|
||
<head>
|
||
<meta charset="UTF-8">
|
||
<title>Title</title>
|
||
<link rel="stylesheet" href="css/reset.css">
|
||
<link rel="stylesheet" href="css/style.css">
|
||
<script src="js/rem.js"></script>
|
||
<link rel="stylesheet" href="http://cdn.bootcss.com/leaflet/1.0.3/leaflet.css">
|
||
<link rel="stylesheet" href="js/geoman/leaflet-geoman.css">
|
||
</head>
|
||
<body>
|
||
<div id="app" v-cloak>
|
||
<div class="page-title">
|
||
<div class="title-area">
|
||
<div class="select">
|
||
<select v-model="areaLv1Selected" @change="selectArea('1')">
|
||
<option value="0">请选择旗县区</option>
|
||
<option :value="area.areaCode" v-for="area in areaLv1">{{area.areaName}}</option>
|
||
</select>
|
||
<select v-if="areaLv2 && areaLv2.length > 0" v-model="areaLv2Selected" @change="selectArea('2')">
|
||
<option value="0">请选择办事处</option>
|
||
<option :value="area.areaCode" v-for="area in areaLv2">{{area.areaName}}</option>
|
||
</select>
|
||
<select v-if="areaLv3 && areaLv3.length > 0" v-model="areaLv3Selected" @change="selectArea('3')">
|
||
<option value="0">请选择居委会</option>
|
||
<option :value="area.areaCode" v-for="area in areaLv3">{{area.areaName}}</option>
|
||
</select>
|
||
</div>
|
||
</div>
|
||
<span>乌兰察布市市域社会治理</span>
|
||
<a href="javascript:void(0);" class="map-btn" @click="toggleMap">网格地图</a>
|
||
</div>
|
||
<div class="page-content">
|
||
<div class="left">
|
||
<!--事件-->
|
||
<div class="case">
|
||
<div class="title-line">
|
||
<h3>事件总览</h3>
|
||
</div>
|
||
<!--事件来源-->
|
||
<div class="case-from">
|
||
<h3 class="title">事件来源</h3>
|
||
<div class="case-from-container">
|
||
<div class="case-from-box">
|
||
<div class="case-from-name">网格员</div>
|
||
<p>{{caseFrom.wangGeYuan}} <span>件</span></p>
|
||
</div>
|
||
<div class="case-from-box">
|
||
<div class="case-from-name">小程序</div>
|
||
<p>{{caseFrom.xiaoChengXu}} <span>件</span></p>
|
||
</div>
|
||
<div class="case-from-box">
|
||
<div class="case-from-name">微信</div>
|
||
<p>{{caseFrom.weiXin}} <span>件</span></p>
|
||
</div>
|
||
<div class="case-from-box">
|
||
<div class="case-from-name">信访</div>
|
||
<p>{{caseFrom.xinFang}} <span>件</span></p>
|
||
</div>
|
||
<div class="case-from-box">
|
||
<div class="case-from-name">其他</div>
|
||
<p>{{caseFrom.qiTa}} <span>件</span></p>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
<!--事件总览-->
|
||
<div class="case-overview">
|
||
<h3 class="title">事件总览</h3>
|
||
<div class="case-overview-container">
|
||
<div class="case-overview-box">
|
||
<p>{{caseView.totalCount}} <span>件</span></p>
|
||
<h4>事件总比</h4>
|
||
<div class="case-overview-info">
|
||
<div class="info-row">
|
||
<span>环比</span>
|
||
<span class="right up">{{caseView.totalMOM}}%</span>
|
||
</div>
|
||
<div class="info-row">
|
||
<span>同比</span>
|
||
<span class="right down">{{caseView.totalYOY}}%</span>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
<div class="case-overview-box">
|
||
<p>{{caseView.shouLiCount}} <span>件</span></p>
|
||
<h4>受理</h4>
|
||
<div class="case-overview-info">
|
||
<div class="info-row">
|
||
<span>环比</span>
|
||
<span class="right up">{{caseView.shouLiMOM}}%</span>
|
||
</div>
|
||
<div class="info-row">
|
||
<span>同比</span>
|
||
<span class="right down">{{caseView.shouLiYOY}}%</span>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
<div class="case-overview-box">
|
||
<p>{{caseView.xiaPaiCount}} <span>件</span></p>
|
||
<h4>下派</h4>
|
||
<div class="case-overview-info">
|
||
<div class="info-row">
|
||
<span>环比</span>
|
||
<span class="right up">{{caseView.xiaPaiMOM}}%</span>
|
||
</div>
|
||
<div class="info-row">
|
||
<span>同比</span>
|
||
<span class="right down">{{caseView.xiaPaiYOY}}%</span>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
<div class="case-overview-box">
|
||
<p>{{caseView.duBanCount}} <span>件</span></p>
|
||
<h4>督办</h4>
|
||
<div class="case-overview-info">
|
||
<div class="info-row">
|
||
<span>环比</span>
|
||
<span class="right up">{{caseView.duBanMOM}}%</span>
|
||
</div>
|
||
<div class="info-row">
|
||
<span>同比</span>
|
||
<span class="right down">{{caseView.duBanYOY}}%</span>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
<div class="case-overview-box">
|
||
<p>{{caseView.chaoShiCount}} <span>件</span></p>
|
||
<h4>超时</h4>
|
||
<div class="case-overview-info">
|
||
<div class="info-row">
|
||
<span>环比</span>
|
||
<span class="right up">{{caseView.chaoShiMOM}}%</span>
|
||
</div>
|
||
<div class="info-row">
|
||
<span>同比</span>
|
||
<span class="right down">{{caseView.chaoShiYOY}}%</span>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
<div class="case-overview-box">
|
||
<p>{{caseView.banJieCount}} <span>件</span></p>
|
||
<h4>办结</h4>
|
||
<div class="case-overview-info">
|
||
<div class="info-row">
|
||
<span>环比</span>
|
||
<span class="right up">{{caseView.banJieMOM}}%</span>
|
||
</div>
|
||
<div class="info-row">
|
||
<span>同比</span>
|
||
<span class="right down">{{caseView.banJieYOY}}%</span>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
<!--事件分析-->
|
||
<div class="case-analysis">
|
||
<h3 class="title">事件分析</h3>
|
||
<div class="case-analysis-container">
|
||
<div class="case-analysis-box" id="hotCase"></div>
|
||
<div class="case-analysis-box" id="caseTime"></div>
|
||
<div class="case-analysis-box" id="caseArea"></div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
<!--人口-->
|
||
<div class="population">
|
||
<div class="title-line">
|
||
<h3>人口房屋</h3>
|
||
</div>
|
||
<div class="population-container">
|
||
<!--基础人口-->
|
||
<div class="base-population">
|
||
<h3 class="title">基础人口</h3>
|
||
<div class="base-population-outer">
|
||
<div class="base-population-inner">
|
||
<div class="base-population-box" v-for="box in populationList">
|
||
<p>{{box.populationCount}} <span>人</span></p>
|
||
<h4>{{box.areaName}}</h4>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
<!--特殊人口占比-->
|
||
<div class="special-population">
|
||
<h3 class="title">特殊人口占比</h3>
|
||
<div class="population-charts">
|
||
<div class="population-charts-box" id="abroad"></div>
|
||
<div class="population-charts-box" id="floating"></div>
|
||
<div class="population-charts-box" id="important"></div>
|
||
<div class="population-charts-box" id="special"></div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
<!--住房总览-->
|
||
<div class="floor-overview">
|
||
<h3 class="title">住房总览</h3>
|
||
<div class="floor-top">
|
||
<div class="floor-top-left">
|
||
<div class="floor-count">
|
||
登记住房
|
||
<span>{{roomCount}}套</span>
|
||
</div>
|
||
<div class="lease" id="lease"></div>
|
||
</div>
|
||
<div class="floor-top-right" id="floorType"></div>
|
||
</div>
|
||
<div class="floor-bottom" id="areaFloor"></div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
<div class="mid" v-if="showMap">
|
||
<div class="map" id="map"></div>
|
||
<div class="select-slide" v-if="caseList1 && caseList1.length > 0">
|
||
<div class="slide">
|
||
<h3 class="title">实时事件清单</h3>
|
||
<div class="slide-title">
|
||
<span>序号</span>
|
||
<span>事件地区</span>
|
||
<span>事件网格</span>
|
||
<span>事件分类</span>
|
||
<span>事件描述</span>
|
||
<span>发生时间</span>
|
||
<span>操作</span>
|
||
</div>
|
||
<div class="slide-box">
|
||
<div class="bd">
|
||
<ul>
|
||
<li v-for="(item,idx) in caseList1">
|
||
<span>{{idx+1}}</span>
|
||
<span>{{item.caseArea}}</span>
|
||
<span>{{item.caseGrid}}</span>
|
||
<span>{{item.caseSubType}}</span>
|
||
<span>{{item.caseDescription}}</span>
|
||
<span>{{item.caseReportTime}}</span>
|
||
<span>
|
||
<a href="javascript:void(0);" @click="checkCaseDetail(item.uid)">详情</a>
|
||
<a href="javascript:void(0);" @click="setCenter(item.caseAreaLat, item.caseAreaLng)">位置</a>
|
||
</span>
|
||
</li>
|
||
</ul>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
<div class="case-detail" v-if="showDetail">
|
||
<div class="case-detail-container">
|
||
<div class="case-row">
|
||
<span>事件地区</span>{{caseDetail.caseAreaAll}}
|
||
</div>
|
||
<div class="case-row">
|
||
<span>事件网格</span>{{caseDetail.caseGrid}}
|
||
</div>
|
||
<div class="case-row">
|
||
<span>事件分类</span>{{caseDetail.caseSubType}}
|
||
</div>
|
||
<div class="case-row img-row" v-if="caseDetail.caseImage && caseDetail.caseImage.length > 0">
|
||
<span>事件图片</span>
|
||
<div class="case-img">
|
||
<img :src="requestUrl + 'route/file/download/true/' + img" alt="" v-for="img in caseDetail.caseImage">
|
||
</div>
|
||
</div>
|
||
<div class="case-row" v-if="caseDetail.caseVideo">
|
||
<span>事件视频</span>
|
||
<div class="case-video">
|
||
<video :src="requestUrl + 'route/file/download/true/' + caseDetail.caseVideo" controls></video>
|
||
</div>
|
||
</div>
|
||
<div class="case-row" v-if="caseDetail.caseAudio">
|
||
<span>事件音频</span>
|
||
<div class="case-video">
|
||
<audio :src="requestUrl + 'route/file/download/true/' + caseDetail.caseAudio" controls></audio>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
<div class="grid" v-if="showGridDetail">
|
||
<div class="grid-info">
|
||
<div class="grid-avatar">
|
||
<img src="images/avatar.jpg" alt="">
|
||
</div>
|
||
<div class="grid-info-text">
|
||
<p class="name">张三</p>
|
||
<p>地区：123123</p>
|
||
<p>网格：123456</p>
|
||
<p>联系方式：13355556666</p>
|
||
</div>
|
||
|
||
</div>
|
||
<div class="grid-count">
|
||
<div class="grid-count-box">
|
||
今日上报
|
||
<span>999<em>件</em></span>
|
||
</div>
|
||
<div class="grid-count-box">
|
||
今日上报
|
||
<span>999<em>件</em></span>
|
||
</div>
|
||
<div class="grid-count-box">
|
||
今日上报
|
||
<span>999<em>件</em></span>
|
||
</div>
|
||
<div class="grid-count-box">
|
||
今日上报
|
||
<span>999<em>件</em></span>
|
||
</div>
|
||
<div class="grid-count-box">
|
||
今日上报
|
||
<span>999<em>件</em></span>
|
||
</div>
|
||
<div class="grid-count-box">
|
||
今日上报
|
||
<span>999<em>件</em></span>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
<div class="right">
|
||
<div class="comprehensive">
|
||
<div class="title-line">
|
||
<h3>综合治理</h3>
|
||
</div>
|
||
<div class="source">
|
||
<h3 class="title">综治资源</h3>
|
||
<div class="source-count">
|
||
<div class="source-count-box">
|
||
<div class="source-name">网格总数</div>
|
||
<div class="source-count-detail">
|
||
<img src="images/source-icon1.png" alt="">
|
||
<span>{{gridCount}}个</span>
|
||
</div>
|
||
</div>
|
||
<div class="source-count-box">
|
||
<div class="source-name">网格员总数</div>
|
||
<div class="source-count-detail">
|
||
<img src="images/source-icon2.png" alt="">
|
||
<span>{{gridManCount}}人</span>
|
||
</div>
|
||
</div>
|
||
<div class="source-count-box">
|
||
<div class="source-name">专管机构总数</div>
|
||
<div class="source-count-detail">
|
||
<img src="images/source-icon3.png" alt="">
|
||
<span>{{orgCount}}个</span>
|
||
</div>
|
||
</div>
|
||
<div class="source-count-box">
|
||
<div class="source-name">专管员总数</div>
|
||
<div class="source-count-detail">
|
||
<img src="images/source-icon4.png" alt="">
|
||
<span>{{specializeCount}}个</span>
|
||
</div>
|
||
</div>
|
||
<div class="source-count-box">
|
||
<div class="source-name">综治队伍总数</div>
|
||
<div class="source-count-detail">
|
||
<img src="images/source-icon5.png" alt="">
|
||
<span>{{teamCount}}个</span>
|
||
</div>
|
||
</div>
|
||
<div class="source-count-box">
|
||
<div class="source-name">综治成员总数</div>
|
||
<div class="source-count-detail">
|
||
<img src="images/source-icon6.png" alt="">
|
||
<span>{{teamManCount}}个</span>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
<div class="analysis">
|
||
<h3 class="title">综治分析</h3>
|
||
<div class="analysis-container">
|
||
<div class="analysis-box">
|
||
<h3 class="title">重点场所巡查统计</h3>
|
||
<div class="analysis-charts">
|
||
<div class="analysis-left">
|
||
<div class="important-area">
|
||
<h4>重点场所</h4>
|
||
<p>{{placeCount}}<span>处</span></p>
|
||
</div>
|
||
<div class="important-area">
|
||
<h4>巡查总量</h4>
|
||
<p>{{placePatrol.totalCount}}</p>
|
||
</div>
|
||
<div class="compare">
|
||
同比 <span class="compare-up">{{placePatrol.totalYOY}}%</span>
|
||
</div>
|
||
<div class="compare">
|
||
环比 <span class="compare-down">{{placePatrol.totalMOM}}%</span>
|
||
</div>
|
||
</div>
|
||
<div class="analysis-right" id="important-place"></div>
|
||
</div>
|
||
</div>
|
||
<div class="analysis-box">
|
||
<h3 class="title">重点区域巡查统计</h3>
|
||
<div class="analysis-charts">
|
||
<div class="analysis-left">
|
||
<div class="important-area">
|
||
<h4>重点区域</h4>
|
||
<p>{{areaCount}}<span>处</span></p>
|
||
</div>
|
||
<div class="important-area">
|
||
<h4>巡查总量</h4>
|
||
<p>{{areaPatrol.totalCount}}</p>
|
||
</div>
|
||
<div class="compare">
|
||
同比 <span class="compare-up">{{areaPatrol.totalYOY}}%</span>
|
||
</div>
|
||
<div class="compare">
|
||
环比 <span class="compare-down">{{areaPatrol.totalYOY}}%</span>
|
||
</div>
|
||
</div>
|
||
<div class="analysis-right" id="important-area"></div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
<div class="big-case">
|
||
<div class="big-case-count">
|
||
<h3 class="title">重大事件发生情况统计</h3>
|
||
<div class="big-case-count-detail">
|
||
<div class="big-case-count-box" v-for="item in caseList">
|
||
<h3 class="title">{{item.caseName}}</h3>
|
||
<div class="count-up-down">
|
||
<div class="case-count">{{item.caseCount}}</div>
|
||
<div class="up-down">
|
||
<p>同比 <span class="case-up">{{item.caseMOM}}</span></p>
|
||
<p>环比 <span class="case-down">{{item.caseYOY}}</span></p>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
<div class="big-case-charts" id="caseCharts"></div>
|
||
</div>
|
||
<div class="title-line">
|
||
<h3>任务考核</h3>
|
||
</div>
|
||
<div class="mission">
|
||
<div class="mission-box" id="handleCount"></div>
|
||
<div class="mission-box">
|
||
<h3 class="title">事件承办评价高分排名</h3>
|
||
<div class="rank" v-for="(score,idx) in caseScore">
|
||
<div class="rank-img">
|
||
<img src="images/rank1.png" alt="" v-if="idx == 0">
|
||
<img src="images/rank2.png" alt="" v-if="idx == 1">
|
||
<img src="images/rank3.png" alt="" v-if="idx == 2">
|
||
</div>
|
||
<div class="rank-info">
|
||
<h4>{{score.departmentName}}</h4>
|
||
<div class="rank-count-score">
|
||
<span>承办量{{score.bearCount}}</span>
|
||
<em>综合打分{{score.bearScore}}</em>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
<div class="mission-box" id="missionCount"></div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
|
||
<script type="text/javascript" src="js/leaflet.js"></script>
|
||
<script type="text/javascript" src="js/iclient-leaflet.min.js"></script>
|
||
<script type="text/javascript" src="js/geoman/leaflet-geoman.min.js"></script>
|
||
<script src="js/jquery-2.1.4.min.js"></script>
|
||
<script src="js/jquery.SuperSlide.2.1.1.js"></script>
|
||
<script src="js/echarts.js"></script>
|
||
<script src="js/vue.js"></script>
|
||
<script src="js/ajax.js"></script>
|
||
<script>
|
||
var vue = new Vue({
|
||
el: '#app',
|
||
data: {
|
||
showMap: false,
|
||
showDetail: false,
|
||
requestUrl: 'http://www.wlcbsyzl.cn/systemetl/',
|
||
areaLv1: [],
|
||
areaLv2: [],
|
||
areaLv3: [],
|
||
areaLv4: [],
|
||
areaLv1Selected: '0',
|
||
areaLv2Selected: '0',
|
||
areaLv3Selected: '0',
|
||
caseFrom: {},
|
||
caseView: {},
|
||
populationList: [],
|
||
specialPopulation: {},
|
||
roomCount: '0',
|
||
roomType: {},
|
||
gridCount: '0',
|
||
gridManCount: '0',
|
||
orgCount: '0',
|
||
specializeCount: '0',
|
||
teamCount: '0',
|
||
teamManCount: '0',
|
||
placeMonth: [],
|
||
placeCount: '0',
|
||
placePatrol: {},
|
||
areaCount: '0',
|
||
areaPatrol: {},
|
||
caseList: [],
|
||
mapCaseList: [],
|
||
caseDetail: {},
|
||
markerList: [],
|
||
mapInit: {},
|
||
showGridDetail: false,
|
||
testList: [
|
||
{
|
||
caseId: '67caf021-7327-426a-a61b-87a57e88ad6d',
|
||
caseArea: '集宁区',
|
||
caseGrid: '150902000000001',
|
||
caseSubType: '市容环境/暴露垃圾',
|
||
caseDescription: '集宁区发送市容环境暴露垃圾类型的事件，进行上报',
|
||
caseAreaLng: '113.05618286132812',
|
||
caseAreaLat: '40.87655676413673',
|
||
caseReportTime: '2022-01-19 15:25:36'
|
||
}
|
||
],
|
||
caseList1: [],
|
||
caseScore: [
|
||
{
|
||
departmentName:'就业局',
|
||
bearScore:5.0,
|
||
bearCount:999
|
||
},
|
||
{
|
||
departmentName:'民政局',
|
||
bearScore:4.0,
|
||
bearCount:900
|
||
},
|
||
{
|
||
departmentName:'公安局',
|
||
bearScore:3.0,
|
||
bearCount:700
|
||
}
|
||
]
|
||
// caseList1: [
|
||
// {
|
||
// caseId: '67caf021-7327-426a-a61b-87a57e88ad6d',
|
||
// caseArea: '集宁区',
|
||
// caseGrid: '150902000000001',
|
||
// caseSubType: '市容环境/暴露垃圾',
|
||
// caseDescription: '集宁区发送市容环境暴露垃圾类型的事件，进行上报',
|
||
// caseAreaLng: '113.05618286132812',
|
||
// caseAreaLat: '40.87655676413673',
|
||
// caseReportTime: '2022-01-19 15:25:36'
|
||
// }
|
||
// ],
|
||
},
|
||
methods: {
|
||
// 热点事件类型
|
||
initHotCase: function (arr) {
|
||
var pie = echarts.init(document.getElementById("hotCase"));
|
||
var titleList = []
|
||
var dataList = []
|
||
for (let i = 0; i < arr.length; i++) {
|
||
titleList.push(arr[i].caseSubType)
|
||
dataList.push(arr[i].count)
|
||
}
|
||
var option = {
|
||
title: {
|
||
text: '热点事件类型',
|
||
textStyle: {
|
||
fontSize: 14,
|
||
color: '#fff'
|
||
}
|
||
},
|
||
tooltip: {
|
||
trigger: 'axis',
|
||
axisPointer: {
|
||
type: 'shadow'
|
||
}
|
||
},
|
||
// legend: {},
|
||
grid: {
|
||
top: '15%',
|
||
left: '3%',
|
||
right: '4%',
|
||
bottom: '3%',
|
||
containLabel: true
|
||
},
|
||
xAxis: {
|
||
type: 'value',
|
||
boundaryGap: [0, 0.01],
|
||
axisLabel: {
|
||
show: true,
|
||
textStyle: {
|
||
color: '#fff'
|
||
}
|
||
},
|
||
minInterval: 1
|
||
},
|
||
yAxis: {
|
||
type: 'category',
|
||
data: titleList,
|
||
axisLabel: {
|
||
show: true,
|
||
textStyle: {
|
||
color: '#fff',
|
||
},
|
||
inside: true,
|
||
},
|
||
axisTick: {
|
||
inside: true
|
||
},
|
||
z: 100000
|
||
},
|
||
series: [
|
||
{
|
||
// name: '2011',
|
||
type: 'bar',
|
||
data: dataList
|
||
}
|
||
]
|
||
};
|
||
pie.setOption(option);
|
||
},
|
||
// 事件发生时间
|
||
initCaseTime: function (arr) {
|
||
var pie = echarts.init(document.getElementById("caseTime"));
|
||
var titleList = []
|
||
var dataList = []
|
||
for (let i = 0; i < arr.length; i++) {
|
||
titleList.push(arr[i].hours + '时')
|
||
dataList.push(arr[i].count)
|
||
}
|
||
var option = {
|
||
title: {
|
||
text: '事件发生时间',
|
||
textStyle: {
|
||
color: '#fff',
|
||
fontSize: 14
|
||
}
|
||
},
|
||
grid: {
|
||
top: '18%',
|
||
left: '8%',
|
||
right: '5%',
|
||
bottom: '15%'
|
||
},
|
||
tooltip: {
|
||
trigger: 'axis'
|
||
},
|
||
xAxis: {
|
||
type: 'category',
|
||
boundaryGap: false,
|
||
data: titleList,
|
||
axisLabel: {
|
||
textStyle: {
|
||
color: '#fff',
|
||
fontSize: 12,
|
||
}
|
||
}
|
||
},
|
||
yAxis: {
|
||
type: 'value',
|
||
axisLabel: {
|
||
show: true,
|
||
textStyle: {
|
||
color: '#fff',
|
||
fontSize: 12,
|
||
},
|
||
},
|
||
axisLine: {
|
||
lineStyle: {
|
||
color: '#fff'
|
||
}
|
||
},
|
||
minInterval: 1
|
||
},
|
||
series: [
|
||
{
|
||
data: dataList,
|
||
type: 'line',
|
||
areaStyle: {}
|
||
}
|
||
]
|
||
};
|
||
pie.setOption(option);
|
||
},
|
||
// 区域事件处理
|
||
initCaseArea: function (arr) {
|
||
var pie = echarts.init(document.getElementById("caseArea"));
|
||
var titleList = []
|
||
var dataList = []
|
||
var proportion = []
|
||
for (let i = 0; i < arr.length; i++) {
|
||
titleList.push(arr[i].areaName)
|
||
dataList.push(arr[i].caseCount)
|
||
proportion.push(arr[i].caseProportion)
|
||
}
|
||
var option = {
|
||
title: {
|
||
text: '区域事件处理',
|
||
textStyle: {
|
||
color: '#fff',
|
||
fontSize: 14
|
||
}
|
||
},
|
||
legend: {
|
||
data: ['事件数量','事件占比'],
|
||
top: 'top',
|
||
right: 'right',
|
||
textStyle: {
|
||
color: '#fff'
|
||
},
|
||
orient: 'horizontal',
|
||
width: '80%'
|
||
},
|
||
grid: {
|
||
top: '18%',
|
||
left: '12%',
|
||
right: '15%',
|
||
bottom: '15%'
|
||
},
|
||
tooltip: {
|
||
trigger: 'axis'
|
||
},
|
||
xAxis: [{
|
||
type: 'category',
|
||
data: titleList,
|
||
axisLabel: {
|
||
show: true,
|
||
textStyle: {
|
||
color: '#fff'
|
||
}
|
||
}
|
||
}],
|
||
yAxis: [
|
||
{
|
||
type: 'value',
|
||
axisLabel: {
|
||
show: true,
|
||
textStyle: {
|
||
color: '#fff'
|
||
}
|
||
},
|
||
axisLine: {
|
||
lineStyle: {
|
||
color: '#fff'
|
||
}
|
||
},
|
||
},
|
||
{
|
||
type: 'value',
|
||
min: 0,
|
||
max: 100,
|
||
interval: 20,
|
||
axisLabel: {
|
||
formatter: '{value} %',
|
||
textStyle: {
|
||
color: '#fff',
|
||
fontSize: 12
|
||
}
|
||
},
|
||
axisLine: {
|
||
lineStyle: {
|
||
color: '#fff'
|
||
}
|
||
},
|
||
}
|
||
],
|
||
series: [
|
||
{
|
||
name: '事件数量',
|
||
data: dataList,
|
||
type: 'bar',
|
||
showBackground: true,
|
||
itemStyle: {
|
||
label: {
|
||
show: true,
|
||
position: 'top',
|
||
textStyle: {
|
||
color: 'white',
|
||
fontSize: 16
|
||
}
|
||
}
|
||
},
|
||
},
|
||
{
|
||
name: '事件占比',
|
||
data: proportion,
|
||
type: 'bar',
|
||
showBackground: true,
|
||
itemStyle: {
|
||
normal: {
|
||
// 随机显示
|
||
color:function(d){return "#"+Math.floor(Math.random()*(256*256*256-1)).toString(16);}
|
||
},
|
||
label: {
|
||
show: true,
|
||
position: 'top',
|
||
textStyle: {
|
||
color: 'white',
|
||
fontSize: 16
|
||
|
||
}
|
||
}
|
||
},
|
||
}
|
||
]
|
||
};
|
||
pie.setOption(option);
|
||
},
|
||
// 境外人口
|
||
initAbroad: function () {
|
||
var self = this
|
||
var pie = echarts.init(document.getElementById("abroad"));
|
||
var option = {
|
||
title: {
|
||
text: '境外人口',
|
||
left: 'center',
|
||
bottom: 'bottom',
|
||
textStyle: {
|
||
color: '#fff',
|
||
fontSize: 14
|
||
}
|
||
},
|
||
color: ['#2f4554','#c23531'],
|
||
tooltip: {
|
||
trigger: 'item',
|
||
formatter: '{a} <br/>{b}: {c} ({d}%)'
|
||
},
|
||
series: [
|
||
{
|
||
name: '境外人口',
|
||
type: 'pie', //设为饼图
|
||
radius: ['40%', '55%'], //可调整大小
|
||
clockWise: true, //默认逆时针
|
||
hoverAnimation: false, //移入放大
|
||
avoidLabelOverlap: false, //避免标注重叠
|
||
center: ['50%', '30%'],
|
||
data: [
|
||
{value: self.specialPopulation.jingWai, name: '境外人口'},
|
||
{value: self.specialPopulation.totalCount, name: '总人口'},
|
||
],
|
||
labelLine: {
|
||
show: false
|
||
},
|
||
label: {
|
||
show: false
|
||
}
|
||
}
|
||
]
|
||
}
|
||
pie.setOption(option);
|
||
},
|
||
// 流动人口
|
||
initFloating: function () {
|
||
var self = this
|
||
var pie = echarts.init(document.getElementById("floating"));
|
||
var option = {
|
||
title: {
|
||
text: '流动人口',
|
||
left: 'center',
|
||
bottom: 'bottom',
|
||
textStyle: {
|
||
color: '#fff',
|
||
fontSize: 14
|
||
}
|
||
},
|
||
color: ['#2f4554','#c23531'],
|
||
tooltip: {
|
||
trigger: 'item',
|
||
formatter: '{a} <br/>{b}: {c} ({d}%)'
|
||
},
|
||
series: [
|
||
{
|
||
name: '流动人口',
|
||
type: 'pie', //设为饼图
|
||
radius: ['40%', '55%'], //可调整大小
|
||
clockWise: true, //默认逆时针
|
||
hoverAnimation: false, //移入放大
|
||
avoidLabelOverlap: false, //避免标注重叠
|
||
center: ['50%', '30%'],
|
||
data: [
|
||
{value: self.specialPopulation.liuDong, name: '流动人口'},
|
||
{value: self.specialPopulation.totalCount, name: '总人口'},
|
||
],
|
||
labelLine: {
|
||
show: false
|
||
},
|
||
label: {
|
||
show: false
|
||
}
|
||
}
|
||
]
|
||
}
|
||
pie.setOption(option);
|
||
},
|
||
// 重点青少年
|
||
initImportant: function () {
|
||
var self = this
|
||
var pie = echarts.init(document.getElementById("important"));
|
||
var option = {
|
||
title: {
|
||
text: '重点青少年',
|
||
left: 'center',
|
||
bottom: 'bottom',
|
||
textStyle: {
|
||
color: '#fff',
|
||
fontSize: 14
|
||
}
|
||
},
|
||
color: ['#2f4554','#c23531'],
|
||
tooltip: {
|
||
trigger: 'item',
|
||
formatter: '{a} <br/>{b}: {c} ({d}%)'
|
||
},
|
||
series: [
|
||
{
|
||
name: '访问来源',
|
||
type: 'pie', //设为饼图
|
||
radius: ['40%', '55%'], //可调整大小
|
||
clockWise: true, //默认逆时针
|
||
hoverAnimation: false, //移入放大
|
||
avoidLabelOverlap: false, //避免标注重叠
|
||
center: ['50%', '30%'],
|
||
data: [
|
||
{value: self.specialPopulation.qingShaoNian, name: '重点青少年'},
|
||
{value: self.specialPopulation.totalCount, name: '重点青少年2'},
|
||
],
|
||
labelLine: {
|
||
show: false
|
||
},
|
||
label: {
|
||
show: false
|
||
}
|
||
}
|
||
]
|
||
}
|
||
pie.setOption(option);
|
||
},
|
||
// 特殊人员
|
||
initSpecial: function () {
|
||
var self = this
|
||
var pie = echarts.init(document.getElementById("special"));
|
||
var option = {
|
||
title: {
|
||
text: '特殊人员',
|
||
left: 'center',
|
||
bottom: 'bottom',
|
||
textStyle: {
|
||
color: '#fff',
|
||
fontSize: 14
|
||
}
|
||
},
|
||
color: ['#2f4554','#c23531'],
|
||
tooltip: {
|
||
trigger: 'item',
|
||
formatter: '{a} <br/>{b}: {c} ({d}%)'
|
||
},
|
||
series: [
|
||
{
|
||
name: '访问来源',
|
||
type: 'pie', //设为饼图
|
||
radius: ['40%', '55%'], //可调整大小
|
||
clockWise: true, //默认逆时针
|
||
hoverAnimation: false, //移入放大
|
||
avoidLabelOverlap: false, //避免标注重叠
|
||
center: ['50%', '30%'],
|
||
data: [
|
||
{value: self.specialPopulation.teShu, name: ''},
|
||
{value: self.specialPopulation.totalCount, name: '总人口'},
|
||
],
|
||
labelLine: {
|
||
show: false
|
||
},
|
||
label: {
|
||
show: false
|
||
}
|
||
}
|
||
]
|
||
}
|
||
pie.setOption(option);
|
||
},
|
||
// 出租屋占比
|
||
initLease: function (val) {
|
||
var pie = echarts.init(document.getElementById("lease"));
|
||
var option = {
|
||
title: {
|
||
text: '出租屋占比',
|
||
textStyle: {
|
||
color: '#fff',
|
||
fontSize: 14
|
||
}
|
||
},
|
||
// grid: {
|
||
// top: '15%',
|
||
// bottom: '15%',
|
||
// left: '5%',
|
||
// right: '5%'
|
||
// },
|
||
series: [
|
||
{
|
||
center: ['50%','85%'],
|
||
radius: '100%',
|
||
type: 'gauge',
|
||
startAngle: 180,
|
||
endAngle: 0,
|
||
min: 0,
|
||
max: 1,
|
||
splitNumber: 8,
|
||
axisLine: {
|
||
lineStyle: {
|
||
width: 6,
|
||
color: [
|
||
[0.25, '#FF6E76'],
|
||
[0.5, '#FDDD60'],
|
||
[0.75, '#58D9F9'],
|
||
[1, '#7CFFB2']
|
||
]
|
||
}
|
||
},
|
||
pointer: {
|
||
icon: 'path://M12.8,0.7l12,40.1H0.7L12.8,0.7z',
|
||
length: '25%',
|
||
width: 8,
|
||
offsetCenter: ['10%', '-10%'],
|
||
itemStyle: {
|
||
color: 'auto'
|
||
}
|
||
},
|
||
axisTick: {
|
||
length: 12,
|
||
lineStyle: {
|
||
color: 'auto',
|
||
width: 2
|
||
}
|
||
},
|
||
splitLine: {
|
||
length: 20,
|
||
lineStyle: {
|
||
color: 'auto',
|
||
width: 5
|
||
}
|
||
},
|
||
axisLabel: {
|
||
color: '#ffffff',
|
||
fontSize: 12,
|
||
distance: -40,
|
||
formatter: function (value) {
|
||
if (value === 1) {
|
||
return '100%';
|
||
} else if (value === 0.75) {
|
||
return '75%';
|
||
} else if (value === 0.5) {
|
||
return '50%';
|
||
} else if (value === 0.25) {
|
||
return '25%';
|
||
} else if (value === 0) {
|
||
return '0%';
|
||
}
|
||
return '';
|
||
}
|
||
},
|
||
title: {
|
||
offsetCenter: [0, '-20%'],
|
||
fontSize: 14
|
||
},
|
||
detail: {
|
||
fontSize: 50,
|
||
offsetCenter: [0, '0%'],
|
||
valueAnimation: true,
|
||
formatter: function (value) {
|
||
return Math.round(value * 100) + '%';
|
||
},
|
||
color: 'auto',
|
||
textStyle: {
|
||
fontSize: 14
|
||
}
|
||
},
|
||
data: [
|
||
{
|
||
value: val,
|
||
// name: 'Grade Rating'
|
||
}
|
||
]
|
||
}
|
||
]
|
||
};
|
||
pie.setOption(option);
|
||
},
|
||
// 房屋类型占比
|
||
initFloorType: function () {
|
||
var self = this
|
||
var pie = echarts.init(document.getElementById("floorType"));
|
||
var option = {
|
||
title: {
|
||
text: '房屋类型占比',
|
||
textStyle: {
|
||
color: '#fff',
|
||
fontSize: 14
|
||
}
|
||
},
|
||
tooltip: {
|
||
trigger: 'item'
|
||
},
|
||
legend: {
|
||
top: '0',
|
||
left: 'right',
|
||
textStyle: {
|
||
color: '#fff'
|
||
},
|
||
orient: "vertical"
|
||
},
|
||
series: [
|
||
{
|
||
// name: 'Access From',
|
||
type: 'pie',
|
||
center: ['45%','55%'],
|
||
radius: ['40%', '70%'],
|
||
avoidLabelOverlap: false,
|
||
label: {
|
||
show: false,
|
||
position: 'center'
|
||
},
|
||
emphasis: {
|
||
label: {
|
||
show: true,
|
||
fontSize: '20',
|
||
fontWeight: 'bold'
|
||
}
|
||
},
|
||
labelLine: {
|
||
show: false
|
||
},
|
||
data: [
|
||
{ value: self.roomType.ziZhuCount, name: '自住' },
|
||
{ value: self.roomType.heZuCount, name: '合租' },
|
||
{ value: self.roomType.xianZhiCount, name: '闲置' },
|
||
{ value: self.roomType.daiChaCount, name: '待查' },
|
||
{ value: self.roomType.chuZuCount, name: '出租' },
|
||
]
|
||
}
|
||
]
|
||
};
|
||
pie.setOption(option);
|
||
},
|
||
// 区域房屋分析
|
||
initAreaFloor: function (arr) {
|
||
var pie = echarts.init(document.getElementById("areaFloor"));
|
||
var titleList = []
|
||
var dataList = []
|
||
for (let i = 0; i < arr.length; i++) {
|
||
titleList.push(arr[i].areaName)
|
||
dataList.push(arr[i].houseCount)
|
||
}
|
||
var option = {
|
||
title: {
|
||
text: '区域房屋分析',
|
||
textStyle: {
|
||
color: '#fff',
|
||
fontSize: 14
|
||
}
|
||
},
|
||
tooltip: {
|
||
trigger: 'axis'
|
||
},
|
||
xAxis: {
|
||
type: 'category',
|
||
data: titleList,
|
||
axisLabel: {
|
||
show: true,
|
||
textStyle: {
|
||
color: '#fff'
|
||
},
|
||
// rotate: 60
|
||
},
|
||
axisLine: {
|
||
lineStyle: {
|
||
color: '#fff'
|
||
}
|
||
}
|
||
},
|
||
yAxis: {
|
||
type: 'value',
|
||
axisLabel: {
|
||
show: true,
|
||
textStyle: {
|
||
color: '#fff'
|
||
}
|
||
},
|
||
minInterval: 1,
|
||
axisLine: {
|
||
lineStyle: {
|
||
color: '#fff'
|
||
}
|
||
}
|
||
},
|
||
series: [
|
||
{
|
||
data: dataList,
|
||
type: 'bar',
|
||
showBackground: true,
|
||
itemStyle: {
|
||
label: {
|
||
show: true,
|
||
position: 'top',
|
||
textStyle: {
|
||
color: 'white',
|
||
fontSize: 16
|
||
}
|
||
}
|
||
},
|
||
}
|
||
]
|
||
};
|
||
pie.setOption(option);
|
||
},
|
||
// 重点场所巡查统计
|
||
initImportantPlace: function (arr) {
|
||
var pie = echarts.init(document.getElementById("important-place"));
|
||
var titleList = []
|
||
var data1 = [],data2 = [], data3 = []
|
||
for (let i = 0; i < arr.length; i++) {
|
||
titleList.push(arr[i].months)
|
||
data1.push(arr[i].thisMonthCount)
|
||
data2.push(arr[i].mom)
|
||
data3.push(arr[i].yoy)
|
||
}
|
||
var option = {
|
||
tooltip: {
|
||
trigger: 'axis'
|
||
},
|
||
legend: {
|
||
data: ['巡查数量', '环比变化', '同比变化'],
|
||
textStyle: {
|
||
color: '#fff'
|
||
},
|
||
right: 0,
|
||
top: 0
|
||
},
|
||
grid: {
|
||
top:'15%',
|
||
left: '3%',
|
||
right: '4%',
|
||
bottom: '15%',
|
||
},
|
||
xAxis: {
|
||
type: 'category',
|
||
boundaryGap: false,
|
||
data: titleList,
|
||
axisLabel: {
|
||
show: true,
|
||
textStyle: {
|
||
color: '#fff'
|
||
},
|
||
},
|
||
axisLine:{
|
||
lineStyle:{
|
||
color:'#fff',
|
||
}
|
||
}
|
||
},
|
||
yAxis: {
|
||
type: 'value'
|
||
},
|
||
series: [
|
||
{
|
||
name: '巡查数量',
|
||
type: 'line',
|
||
stack: 'Total',
|
||
data: data1
|
||
},
|
||
{
|
||
name: '环比变化',
|
||
type: 'line',
|
||
stack: 'Total',
|
||
data: data2
|
||
},
|
||
{
|
||
name: '同比变化',
|
||
type: 'line',
|
||
stack: 'Total',
|
||
data: data3
|
||
}
|
||
]
|
||
};
|
||
pie.setOption(option);
|
||
},
|
||
// 重点场所巡查统计
|
||
initImportantArea: function (arr) {
|
||
var pie = echarts.init(document.getElementById("important-area"));
|
||
var titleList = []
|
||
var data1 = [],data2 = [], data3 = []
|
||
for (let i = 0; i < arr.length; i++) {
|
||
titleList.push(arr[i].months)
|
||
data1.push(arr[i].thisMonthCount)
|
||
data2.push(arr[i].mom)
|
||
data3.push(arr[i].yoy)
|
||
}
|
||
var option = {
|
||
tooltip: {
|
||
trigger: 'axis'
|
||
},
|
||
legend: {
|
||
data: ['巡查数量', '环比变化', '同比变化'],
|
||
textStyle: {
|
||
color: '#fff'
|
||
},
|
||
right: 0,
|
||
top: 0
|
||
},
|
||
grid: {
|
||
top:'15%',
|
||
left: '3%',
|
||
right: '4%',
|
||
bottom: '15%',
|
||
},
|
||
xAxis: {
|
||
type: 'category',
|
||
boundaryGap: false,
|
||
data: titleList,
|
||
axisLabel: {
|
||
show: true,
|
||
textStyle: {
|
||
color: '#fff'
|
||
},
|
||
},
|
||
axisLine:{
|
||
lineStyle:{
|
||
color:'#fff',
|
||
}
|
||
}
|
||
},
|
||
yAxis: {
|
||
type: 'value'
|
||
},
|
||
series: [
|
||
{
|
||
name: '巡查数量',
|
||
type: 'line',
|
||
stack: 'Total',
|
||
data: data1
|
||
},
|
||
{
|
||
name: '环比变化',
|
||
type: 'line',
|
||
stack: 'Total',
|
||
data: data2
|
||
},
|
||
{
|
||
name: '同比变化',
|
||
type: 'line',
|
||
stack: 'Total',
|
||
data: data3
|
||
}
|
||
]
|
||
};
|
||
pie.setOption(option);
|
||
},
|
||
// 重大案件发生情况统计
|
||
initBigCase: function (arr) {
|
||
var pie = echarts.init(document.getElementById("caseCharts"));
|
||
var titleList = []
|
||
var data1 = []
|
||
var data2 = []
|
||
var data3 = []
|
||
var data4 = []
|
||
var data5 = []
|
||
for (let i = 0; i < arr.length; i++) {
|
||
titleList.push(arr[i].month_ + '月')
|
||
data1.push(arr[i].anQuanCount)
|
||
data2.push(arr[i].qunTiCount)
|
||
data3.push(arr[i].shiPinCount)
|
||
data4.push(arr[i].xingShiCount)
|
||
data5.push(arr[i].qiTaCount)
|
||
}
|
||
var option = {
|
||
tooltip: {
|
||
trigger: 'axis'
|
||
},
|
||
legend: {
|
||
data: ['安全事故', '群体性事件', '食品安全事故', '有关刑事案件', '其他'],
|
||
textStyle: {
|
||
color: '#fff'
|
||
},
|
||
right: 0,
|
||
// orient: 'vertical'
|
||
},
|
||
grid: {
|
||
left: '3%',
|
||
right: '4%',
|
||
bottom: '3%',
|
||
containLabel: true
|
||
},
|
||
xAxis: {
|
||
type: 'category',
|
||
boundaryGap: false,
|
||
data: titleList,
|
||
axisLabel: {
|
||
textStyle: {
|
||
color: '#fff',//坐标值得具体的颜色
|
||
}
|
||
},
|
||
axisLine: {
|
||
lineStyle: {
|
||
color: '#fff'
|
||
}
|
||
},
|
||
},
|
||
yAxis: {
|
||
type: 'value',
|
||
axisLabel: {
|
||
textStyle: {
|
||
color: '#fff',//坐标值得具体的颜色
|
||
}
|
||
},
|
||
axisLine: {
|
||
lineStyle: {
|
||
color: '#fff'
|
||
}
|
||
},
|
||
minInterval: 1
|
||
},
|
||
series: [
|
||
{
|
||
name: '安全事故',
|
||
type: 'line',
|
||
stack: 'Total',
|
||
data: data1
|
||
},
|
||
{
|
||
name: '群体性事件',
|
||
type: 'line',
|
||
stack: 'Total',
|
||
data: data2
|
||
},
|
||
{
|
||
name: '食品安全事故',
|
||
type: 'line',
|
||
stack: 'Total',
|
||
data: data3
|
||
},
|
||
{
|
||
name: '有关刑事案件',
|
||
type: 'line',
|
||
stack: 'Total',
|
||
data: data4
|
||
},
|
||
{
|
||
name: '其他',
|
||
type: 'line',
|
||
stack: 'Total',
|
||
data: data5
|
||
}
|
||
]
|
||
};
|
||
pie.setOption(option);
|
||
},
|
||
// 事件承办数量排名
|
||
initHandleCount: function () {
|
||
var pie = echarts.init(document.getElementById("handleCount"));
|
||
var arr = [{departmentName:'就业局', bearScore:5.0,bearProportion:98},{departmentName:'民政局', bearScore:4.0,bearProportion:78},{departmentName:'公安局', bearScore:3.0,bearProportion:50}]
|
||
var titleList = []
|
||
var data = []
|
||
for (let i = 0; i < arr.length; i++) {
|
||
titleList.push(arr[i].departmentName)
|
||
data.push(arr[i].bearProportion)
|
||
}
|
||
var option = {
|
||
title: {
|
||
text: '事件承办数量排名',
|
||
textStyle: {
|
||
fontSize: 14,
|
||
color: '#fff'
|
||
}
|
||
},
|
||
tooltip: {
|
||
trigger: 'axis',
|
||
axisPointer: {
|
||
type: 'shadow'
|
||
}
|
||
},
|
||
dataZoom: [
|
||
{
|
||
type: 'inside'
|
||
}
|
||
],
|
||
// legend: {},
|
||
grid: {
|
||
top: '15%',
|
||
left: '3%',
|
||
right: '4%',
|
||
bottom: '3%',
|
||
containLabel: true
|
||
},
|
||
xAxis: {
|
||
type: 'value',
|
||
boundaryGap: [0, 0.01],
|
||
axisLabel: {
|
||
show: true,
|
||
textStyle: {
|
||
color: '#fff'
|
||
},
|
||
}
|
||
},
|
||
yAxis: {
|
||
type: 'category',
|
||
data: titleList,
|
||
axisLabel: {
|
||
show: true,
|
||
textStyle: {
|
||
color: '#fff'
|
||
},
|
||
inside: true
|
||
},
|
||
axisTick: {
|
||
inside: true
|
||
},
|
||
z: 100000
|
||
},
|
||
series: [
|
||
{
|
||
name: '2011',
|
||
type: 'bar',
|
||
data: data,
|
||
}
|
||
]
|
||
};
|
||
pie.setOption(option);
|
||
},
|
||
// 88项考核任务排名
|
||
initMissionCount: function () {
|
||
var pie = echarts.init(document.getElementById("missionCount"));
|
||
var option = {
|
||
title: {
|
||
text: '88项考核任务排名',
|
||
textStyle: {
|
||
fontSize: 14,
|
||
color: '#fff'
|
||
}
|
||
},
|
||
tooltip: {
|
||
trigger: 'axis',
|
||
axisPointer: {
|
||
type: 'shadow'
|
||
}
|
||
},
|
||
dataZoom: [
|
||
{
|
||
type: 'inside'
|
||
}
|
||
],
|
||
// legend: {},
|
||
grid: {
|
||
top: '15%',
|
||
left: '3%',
|
||
right: '4%',
|
||
bottom: '3%',
|
||
containLabel: true
|
||
},
|
||
xAxis: {
|
||
type: 'value',
|
||
boundaryGap: [0, 0.01],
|
||
axisLabel: {
|
||
show: true,
|
||
textStyle: {
|
||
color: '#fff'
|
||
},
|
||
}
|
||
},
|
||
yAxis: {
|
||
type: 'category',
|
||
data: ['市委', '暴露垃圾', '道路不洁', '水域不洁', '废弃车辆', '绿地脏乱'],
|
||
axisLabel: {
|
||
show: true,
|
||
textStyle: {
|
||
color: '#fff'
|
||
},
|
||
}
|
||
},
|
||
series: [
|
||
{
|
||
// name: '2011',
|
||
type: 'bar',
|
||
data: [183, 289, 314, 470, 131, 230]
|
||
}
|
||
]
|
||
};
|
||
pie.setOption(option);
|
||
},
|
||
// 获取区域
|
||
getArea: function () {
|
||
var self = this
|
||
doGetForm(self.requestUrl + 'app/datacensus/sqlrelease/SY0035', {}, null, function (code, data) {
|
||
self.areaLv1 = data.dataList
|
||
self.getCaseFrom('0')
|
||
self.getCaseView('0')
|
||
self.getHotCaseRank('0')
|
||
self.getCaseTime('0')
|
||
self.getCaseArea('0')
|
||
self.getBasePopulation('0')
|
||
self.getSpecialPopulation('0')
|
||
self.getRoomCount('0')
|
||
self.getRoomType('0')
|
||
self.getRoomAnalysis('0')
|
||
self.getImportantPlaceMonth('0')
|
||
self.getImportantAreaMonth('0')
|
||
self.getPlaceCount('0')
|
||
self.getAreaCount('0')
|
||
self.getPlacePatrolCount('0')
|
||
self.getAreaPatrolCount('0')
|
||
self.getCaseList('0')
|
||
self.getCaseCountRank('0')
|
||
self.getCaseScoreRank('0')
|
||
self.getRentingRoom('0')
|
||
self.getBigCase('0')
|
||
})
|
||
},
|
||
// 选择区域
|
||
selectArea: function (lv) {
|
||
var self = this
|
||
var info = {}
|
||
if (lv == '1') {
|
||
info['AREACODE'] = self.areaLv1Selected
|
||
self.areaLv3 = []
|
||
self.areaLv3Selected = '0'
|
||
if (self.areaLv2.length > 0) {
|
||
self.areaLv2Selected = '0'
|
||
}
|
||
} else if (lv == '2') {
|
||
info['AREACODE'] = self.areaLv2Selected
|
||
}
|
||
if (lv == '3') {
|
||
self.getCaseFrom('3')
|
||
}
|
||
// if (lv != '3') {
|
||
doGetForm(self.requestUrl + 'app/datacensus/sqlrelease/SY0035', info, null, function (code, data) {
|
||
if (lv == '1') {
|
||
self.areaLv2 = data.dataList
|
||
} else if (lv == '2') {
|
||
self.areaLv3 = data.dataList
|
||
}
|
||
self.getCaseFrom(lv)
|
||
self.getCaseView(lv)
|
||
self.getHotCaseRank(lv)
|
||
self.getCaseTime(lv)
|
||
self.getCaseArea(lv)
|
||
self.getBasePopulation(lv)
|
||
self.getSpecialPopulation(lv)
|
||
self.getRoomCount(lv)
|
||
self.getRoomType(lv)
|
||
self.getRoomAnalysis(lv)
|
||
self.getImportantPlaceMonth(lv)
|
||
self.getImportantAreaMonth(lv)
|
||
self.getPlaceCount(lv)
|
||
self.getAreaCount(lv)
|
||
self.getPlacePatrolCount(lv)
|
||
self.getAreaPatrolCount(lv)
|
||
self.getCaseList(lv)
|
||
self.getCaseCountRank(lv)
|
||
self.getCaseScoreRank(lv)
|
||
self.getRentingRoom(lv)
|
||
var date = new Date()
|
||
var year = date.getFullYear()
|
||
self.getBigCase(lv, year)
|
||
if (self.showMap) {
|
||
self.getMapCaseList(lv)
|
||
}
|
||
})
|
||
// } else {
|
||
// self.getCaseFrom('3')
|
||
// }
|
||
},
|
||
// 事件来源
|
||
getCaseFrom: function (lv) {
|
||
var self = this
|
||
var info
|
||
if (lv == '0') {
|
||
info = {}
|
||
} else if (lv == '1') {
|
||
info = {
|
||
AREACODE: self.areaLv1Selected
|
||
}
|
||
} else if (lv == '2') {
|
||
info = {
|
||
AREACODE: self.areaLv2Selected
|
||
}
|
||
} else {
|
||
info = {
|
||
AREACODE: self.areaLv3Selected
|
||
}
|
||
}
|
||
doGetForm(self.requestUrl + 'app/datacensus/sqlrelease/SY0001', info, null, function (code, data) {
|
||
self.caseFrom = data.dataList[0]
|
||
})
|
||
},
|
||
// 事件总览
|
||
getCaseView: function (lv) {
|
||
var self = this
|
||
var info
|
||
if (lv == '0') {
|
||
info = {}
|
||
} else if (lv == '1') {
|
||
info = {
|
||
AREACODE: self.areaLv1Selected
|
||
}
|
||
} else if (lv == '2') {
|
||
info = {
|
||
AREACODE: self.areaLv2Selected
|
||
}
|
||
} else {
|
||
info = {
|
||
AREACODE: self.areaLv3Selected
|
||
}
|
||
}
|
||
doGetForm(self.requestUrl + 'app/datacensus/sqlrelease/SY0002', info, null, function (code, data) {
|
||
self.caseView = data.dataList[0]
|
||
})
|
||
},
|
||
// 热点事件类型排名
|
||
getHotCaseRank: function (lv) {
|
||
var self = this
|
||
var info
|
||
if (lv == '0') {
|
||
info = {}
|
||
} else if (lv == '1') {
|
||
info = {
|
||
AREACODE: self.areaLv1Selected
|
||
}
|
||
} else if (lv == '2') {
|
||
info = {
|
||
AREACODE: self.areaLv2Selected
|
||
}
|
||
} else {
|
||
info = {
|
||
AREACODE: self.areaLv3Selected
|
||
}
|
||
}
|
||
doGetForm(self.requestUrl + 'app/datacensus/sqlrelease/SY0003', info, null, function (code, data) {
|
||
self.initHotCase(data.dataList)
|
||
})
|
||
},
|
||
// 事件发生事件
|
||
getCaseTime: function (lv) {
|
||
var self = this
|
||
var info
|
||
if (lv == '0') {
|
||
info = {}
|
||
} else if (lv == '1') {
|
||
info = {
|
||
AREACODE: self.areaLv1Selected
|
||
}
|
||
} else if (lv == '2') {
|
||
info = {
|
||
AREACODE: self.areaLv2Selected
|
||
}
|
||
} else {
|
||
info = {
|
||
AREACODE: self.areaLv3Selected
|
||
}
|
||
}
|
||
doGetForm(self.requestUrl + 'app/datacensus/sqlrelease/SY0004', info, null, function (code, data) {
|
||
self.initCaseTime(data.dataList)
|
||
})
|
||
},
|
||
// 区域事件处理
|
||
getCaseArea: function (lv) {
|
||
var self = this
|
||
var info
|
||
if (lv == '0') {
|
||
info = {}
|
||
} else if (lv == '1') {
|
||
info = {
|
||
AREACODE: self.areaLv1Selected
|
||
}
|
||
} else if (lv == '2') {
|
||
info = {
|
||
AREACODE: self.areaLv2Selected
|
||
}
|
||
} else {
|
||
info = {
|
||
AREACODE: self.areaLv3Selected
|
||
}
|
||
}
|
||
doGetForm(self.requestUrl + 'app/datacensus/sqlrelease/SY0005', info, null, function (code, data) {
|
||
self.initCaseArea(data.dataList)
|
||
})
|
||
},
|
||
// 基础人口
|
||
getBasePopulation: function (lv) {
|
||
var self = this
|
||
var info
|
||
if (lv == '0') {
|
||
info = {}
|
||
} else if (lv == '1') {
|
||
info = {
|
||
AREACODE: self.areaLv1Selected
|
||
}
|
||
} else if (lv == '2') {
|
||
info = {
|
||
AREACODE: self.areaLv2Selected
|
||
}
|
||
} else {
|
||
info = {
|
||
AREACODE: self.areaLv3Selected
|
||
}
|
||
}
|
||
doGetForm(self.requestUrl + 'app/datacensus/sqlrelease/SY0007', info, null, function (code, data) {
|
||
self.populationList = data.dataList
|
||
})
|
||
},
|
||
// 特殊人口
|
||
getSpecialPopulation: function (lv) {
|
||
var self = this
|
||
var info
|
||
if (lv == '0') {
|
||
info = {}
|
||
} else if (lv == '1') {
|
||
info = {
|
||
AREACODE: self.areaLv1Selected
|
||
}
|
||
} else if (lv == '2') {
|
||
info = {
|
||
AREACODE: self.areaLv2Selected
|
||
}
|
||
} else {
|
||
info = {
|
||
AREACODE: self.areaLv3Selected
|
||
}
|
||
}
|
||
doGetForm(self.requestUrl + 'app/datacensus/sqlrelease/SY0008', info, null, function (code, data) {
|
||
self.specialPopulation = data.dataList[0]
|
||
self.initAbroad()
|
||
self.initFloating()
|
||
self.initImportant()
|
||
self.initSpecial()
|
||
})
|
||
},
|
||
// 等级住房数量
|
||
getRoomCount: function (lv) {
|
||
var self = this
|
||
var info
|
||
if (lv == '0') {
|
||
info = {}
|
||
} else if (lv == '1') {
|
||
info = {
|
||
AREACODE: self.areaLv1Selected
|
||
}
|
||
} else if (lv == '2') {
|
||
info = {
|
||
AREACODE: self.areaLv2Selected
|
||
}
|
||
} else {
|
||
info = {
|
||
AREACODE: self.areaLv3Selected
|
||
}
|
||
}
|
||
doGetForm(self.requestUrl + 'app/datacensus/sqlrelease/SY0009', info, null, function (code, data) {
|
||
self.roomCount = data.dataList[0].count
|
||
})
|
||
},
|
||
// 房屋类型占比
|
||
getRoomType: function (lv) {
|
||
var self = this
|
||
var info
|
||
if (lv == '0') {
|
||
info = {}
|
||
} else if (lv == '1') {
|
||
info = {
|
||
AREACODE: self.areaLv1Selected
|
||
}
|
||
} else if (lv == '2') {
|
||
info = {
|
||
AREACODE: self.areaLv2Selected
|
||
}
|
||
} else {
|
||
info = {
|
||
AREACODE: self.areaLv3Selected
|
||
}
|
||
}
|
||
doGetForm(self.requestUrl + 'app/datacensus/sqlrelease/SY0010', info, null, function (code, data) {
|
||
self.roomType = data.dataList[0]
|
||
self.initFloorType()
|
||
})
|
||
},
|
||
// 区域房屋分析
|
||
getRoomAnalysis: function (lv) {
|
||
var self = this
|
||
var info
|
||
if (lv == '0') {
|
||
info = {}
|
||
} else if (lv == '1') {
|
||
info = {
|
||
AREACODE: self.areaLv1Selected
|
||
}
|
||
} else if (lv == '2') {
|
||
info = {
|
||
AREACODE: self.areaLv2Selected
|
||
}
|
||
} else {
|
||
info = {
|
||
AREACODE: self.areaLv3Selected
|
||
}
|
||
}
|
||
doGetForm(self.requestUrl + 'app/datacensus/sqlrelease/SY0011', info, null, function (code, data) {
|
||
self.initAreaFloor(data.dataList)
|
||
})
|
||
},
|
||
// 网格统计
|
||
getGridCount: function () {
|
||
var self = this
|
||
doGetForm(self.requestUrl + 'app/datacensus/sqlrelease/SY0012', {}, null, function (code, data) {
|
||
self.gridCount = data.dataList[0].count
|
||
})
|
||
},
|
||
// 网格员统计
|
||
getGridManCount: function () {
|
||
var self = this
|
||
doGetForm(self.requestUrl + 'app/datacensus/sqlrelease/SY0013', {}, null, function (code, data) {
|
||
self.gridManCount = data.dataList[0].count
|
||
})
|
||
},
|
||
// 专管机构统计
|
||
getOrgCount: function () {
|
||
var self = this
|
||
doGetForm(self.requestUrl + 'app/datacensus/sqlrelease/SY0014', {}, null, function (code, data) {
|
||
self.orgCount = data.dataList[0].count
|
||
})
|
||
},
|
||
// 专管员统计
|
||
getSpecializeCount: function () {
|
||
var self = this
|
||
doGetForm(self.requestUrl + 'app/datacensus/sqlrelease/SY0015', {}, null, function (code, data) {
|
||
self.specializeCount = data.dataList[0].count
|
||
})
|
||
},
|
||
// 综治队伍统计
|
||
getTeamCount: function () {
|
||
var self = this
|
||
doGetForm(self.requestUrl + 'app/datacensus/sqlrelease/SY0016', {}, null, function (code, data) {
|
||
self.teamCount = data.dataList[0].count
|
||
})
|
||
},
|
||
// 综治成员统计
|
||
getTeamManCount: function () {
|
||
var self = this
|
||
doGetForm(self.requestUrl + 'app/datacensus/sqlrelease/SY0017', {}, null, function (code, data) {
|
||
self.teamManCount = data.dataList[0].count
|
||
})
|
||
},
|
||
// 重点场所巡查12月统计
|
||
getImportantPlaceMonth: function (lv) {
|
||
var self = this
|
||
var info
|
||
var date = new Date()
|
||
var year = date.getFullYear()
|
||
|
||
if (lv == '0') {
|
||
info = {
|
||
YEAR: year
|
||
}
|
||
} else if (lv == '1') {
|
||
info = {
|
||
AREACODE: self.areaLv1Selected,
|
||
YEAR: year
|
||
}
|
||
} else if (lv == '2') {
|
||
info = {
|
||
AREACODE: self.areaLv2Selected,
|
||
YEAR: year
|
||
}
|
||
} else {
|
||
info = {
|
||
AREACODE: self.areaLv3Selected,
|
||
YEAR: year
|
||
}
|
||
}
|
||
doGetForm(self.requestUrl + 'app/datacensus/sqlrelease/SY0031', info, null, function (code, data) {
|
||
self.initImportantPlace(data.dataList)
|
||
})
|
||
},
|
||
// 重点区域巡查12月统计
|
||
getImportantAreaMonth: function (lv) {
|
||
var self = this
|
||
var info
|
||
var date = new Date()
|
||
var year = date.getFullYear()
|
||
|
||
if (lv == '0') {
|
||
info = {
|
||
YEAR: year
|
||
}
|
||
} else if (lv == '1') {
|
||
info = {
|
||
AREACODE: self.areaLv1Selected,
|
||
YEAR: year
|
||
}
|
||
} else if (lv == '2') {
|
||
info = {
|
||
AREACODE: self.areaLv2Selected,
|
||
YEAR: year
|
||
}
|
||
} else {
|
||
info = {
|
||
AREACODE: self.areaLv3Selected,
|
||
YEAR: year
|
||
}
|
||
}
|
||
doGetForm(self.requestUrl + 'app/datacensus/sqlrelease/SY0032', info, null, function (code, data) {
|
||
self.initImportantArea(data.dataList)
|
||
})
|
||
},
|
||
// 重点场所数量
|
||
getPlaceCount: function (lv) {
|
||
var self = this
|
||
var info
|
||
if (lv == '0') {
|
||
info = {}
|
||
} else if (lv == '1') {
|
||
info = {
|
||
AREACODE: self.areaLv1Selected
|
||
}
|
||
} else if (lv == '2') {
|
||
info = {
|
||
AREACODE: self.areaLv2Selected
|
||
}
|
||
} else {
|
||
info = {
|
||
AREACODE: self.areaLv3Selected
|
||
}
|
||
}
|
||
doGetForm(self.requestUrl + 'app/datacensus/sqlrelease/SY0019', info, null, function (code, data) {
|
||
self.placeCount = data.dataList[0].count
|
||
})
|
||
},
|
||
// 重点区域数量
|
||
getAreaCount: function (lv) {
|
||
var self = this
|
||
var info
|
||
if (lv == '0') {
|
||
info = {}
|
||
} else if (lv == '1') {
|
||
info = {
|
||
AREACODE: self.areaLv1Selected
|
||
}
|
||
} else if (lv == '2') {
|
||
info = {
|
||
AREACODE: self.areaLv2Selected
|
||
}
|
||
} else {
|
||
info = {
|
||
AREACODE: self.areaLv3Selected
|
||
}
|
||
}
|
||
doGetForm(self.requestUrl + 'app/datacensus/sqlrelease/SY0021', info, null, function (code, data) {
|
||
self.areaCount = data.dataList[0].count
|
||
})
|
||
},
|
||
// 重点场所巡查数量
|
||
getPlacePatrolCount: function (lv) {
|
||
var self = this
|
||
var info
|
||
if (lv == '0') {
|
||
info = {}
|
||
} else if (lv == '1') {
|
||
info = {
|
||
AREACODE: self.areaLv1Selected
|
||
}
|
||
} else if (lv == '2') {
|
||
info = {
|
||
AREACODE: self.areaLv2Selected
|
||
}
|
||
} else {
|
||
info = {
|
||
AREACODE: self.areaLv3Selected
|
||
}
|
||
}
|
||
doGetForm(self.requestUrl + 'app/datacensus/sqlrelease/SY0024', info, null, function (code, data) {
|
||
self.placePatrol = data.dataList[0]
|
||
})
|
||
},
|
||
// 重点区域巡查数量
|
||
getAreaPatrolCount: function (lv) {
|
||
var self = this
|
||
var info
|
||
if (lv == '0') {
|
||
info = {}
|
||
} else if (lv == '1') {
|
||
info = {
|
||
AREACODE: self.areaLv1Selected
|
||
}
|
||
} else if (lv == '2') {
|
||
info = {
|
||
AREACODE: self.areaLv2Selected
|
||
}
|
||
} else {
|
||
info = {
|
||
AREACODE: self.areaLv3Selected
|
||
}
|
||
}
|
||
doGetForm(self.requestUrl + 'app/datacensus/sqlrelease/SY0025', info, null, function (code, data) {
|
||
self.areaPatrol = data.dataList[0]
|
||
})
|
||
},
|
||
// 88项考核任务排名
|
||
getMissionRank: function () {
|
||
var self = this
|
||
doGetForm(self.requestUrl + 'app/datacensus/sqlrelease/SY0026', {}, null, function (code, data) {
|
||
// self.areaPatrol = data.dataList[0]
|
||
})
|
||
},
|
||
// 事件列表
|
||
getCaseList: function (lv) {
|
||
var self = this
|
||
var info
|
||
if (lv == '0') {
|
||
info = {}
|
||
} else if (lv == '1') {
|
||
info = {
|
||
AREACODE: self.areaLv1Selected,
|
||
COUNT: 5
|
||
}
|
||
} else if (lv == '2') {
|
||
info = {
|
||
AREACODE: self.areaLv2Selected,
|
||
COUNT: 5
|
||
}
|
||
} else {
|
||
info = {
|
||
AREACODE: self.areaLv3Selected,
|
||
COUNT: 5
|
||
}
|
||
}
|
||
doGetForm(self.requestUrl + 'app/datacensus/sqlrelease/SY0023', info, null, function (code, data) {
|
||
var arr = [
|
||
{
|
||
caseName: '安全事故',
|
||
caseCount: data.dataList[0].anQuan,
|
||
caseMOM: data.dataList[0].anQuanMOM,
|
||
caseYOY: data.dataList[0].anQuanYOY
|
||
},
|
||
{
|
||
caseName: '群体性事故',
|
||
caseCount: data.dataList[0].qunTi,
|
||
caseMOM: data.dataList[0].qunTiMOM,
|
||
caseYOY: data.dataList[0].qunTiYOY
|
||
},
|
||
{
|
||
caseName: '食品安全事故',
|
||
caseCount: data.dataList[0].shiPin,
|
||
caseMOM: data.dataList[0].shiPinMOM,
|
||
caseYOY: data.dataList[0].shiPinYOY
|
||
},
|
||
{
|
||
caseName: '有关刑事案件',
|
||
caseCount: data.dataList[0].xinShi,
|
||
caseMOM: data.dataList[0].xinShiMOM,
|
||
caseYOY: data.dataList[0].xinShiYOY
|
||
},
|
||
{
|
||
caseName: '其他',
|
||
caseCount: data.dataList[0].qiTa,
|
||
caseMOM: data.dataList[0].qiTaMOM,
|
||
caseYOY: data.dataList[0].qiTaYOY
|
||
}
|
||
]
|
||
self.caseList = arr
|
||
})
|
||
},
|
||
// 事件承办量排名
|
||
getCaseCountRank: function (lv) {
|
||
var self = this
|
||
var info
|
||
if (lv == '0') {
|
||
info = {}
|
||
} else if (lv == '1') {
|
||
info = {
|
||
AREACODE: self.areaLv1Selected,
|
||
COUNT: 5
|
||
}
|
||
} else if (lv == '2') {
|
||
info = {
|
||
AREACODE: self.areaLv2Selected,
|
||
COUNT: 5
|
||
}
|
||
} else {
|
||
info = {
|
||
AREACODE: self.areaLv3Selected,
|
||
COUNT: 5
|
||
}
|
||
}
|
||
doGetForm(self.requestUrl + 'app/datacensus/sqlrelease/SY0033', info, null, function (code, data) {
|
||
|
||
})
|
||
},
|
||
// 事件承办评分排名
|
||
getCaseScoreRank: function (lv) {
|
||
var self = this
|
||
var info
|
||
if (lv == '0') {
|
||
info = {}
|
||
} else if (lv == '1') {
|
||
info = {
|
||
AREACODE: self.areaLv1Selected,
|
||
COUNT: 5
|
||
}
|
||
} else if (lv == '2') {
|
||
info = {
|
||
AREACODE: self.areaLv2Selected,
|
||
COUNT: 5
|
||
}
|
||
} else {
|
||
info = {
|
||
AREACODE: self.areaLv3Selected,
|
||
COUNT: 5
|
||
}
|
||
}
|
||
doGetForm(self.requestUrl + 'app/datacensus/sqlrelease/SY0034', info, null, function (code, data) {
|
||
|
||
})
|
||
},
|
||
// 显/隐地图
|
||
toggleMap: function () {
|
||
var self = this
|
||
this.showMap = !this.showMap
|
||
if (this.showMap) {
|
||
// this.getMapCaseList('0')
|
||
this.$nextTick(function () {
|
||
self.initSuperMap()
|
||
})
|
||
}
|
||
},
|
||
// 地图
|
||
initSuperMap: function () {
|
||
var self = this
|
||
var host = window.isLocal ? window.server : "https://iserver.supermap.io";
|
||
var codeMarkers = [], decodeMarkers = [],
|
||
url = host + "/iserver/services/map-china400/rest/maps/China_4326",
|
||
addressUrl = host + "/iserver/services/addressmatch-Address/restjsr/v1/address",
|
||
addressMatchService = L.supermap.addressMatchService(addressUrl);
|
||
self.mapInit = L.map('map', {
|
||
crs: L.CRS.EPSG4326,
|
||
center: [40.98896497581636, 113.11412662267688],
|
||
maxZoom: 18,
|
||
zoom: 10
|
||
});
|
||
L.supermap.tiledMapLayer(url).addTo(self.mapInit);
|
||
for (let i = 0; i < self.markerList.length; i++) {
|
||
var latLng = {
|
||
lng: self.markerList[i].userLng,
|
||
lat: self.markerList[i].userLat
|
||
}
|
||
var marker1 = L.marker(latLng);
|
||
marker1.addTo(self.mapInit).on('click', function (e) {
|
||
self.getGridDetail()
|
||
});
|
||
}
|
||
for (let i = 0; i < self.testList.length; i++) {
|
||
var latLng = {
|
||
lng: self.testList[i].caseAreaLng,
|
||
lat: self.testList[i].caseAreaLat
|
||
}
|
||
var marker1 = L.marker(latLng);
|
||
marker1.addTo(self.mapInit)
|
||
setTimeout(function () {
|
||
self.mapInit.removeLayer(marker1)
|
||
}, 10000)
|
||
}
|
||
// if (!isExist) {
|
||
// self.markerList.push(data)
|
||
// }
|
||
},
|
||
// 实时事件清单
|
||
getMapCaseList: function (lv) {
|
||
var self = this
|
||
var info
|
||
if (lv == '0') {
|
||
info = {}
|
||
} else if (lv == '1') {
|
||
info = {
|
||
AREACODE: self.areaLv1Selected,
|
||
COUNT: 8
|
||
}
|
||
} else if (lv == '2') {
|
||
info = {
|
||
AREACODE: self.areaLv2Selected,
|
||
COUNT: 8
|
||
}
|
||
} else {
|
||
info = {
|
||
AREACODE: self.areaLv3Selected,
|
||
COUNT: 8
|
||
}
|
||
}
|
||
doGetForm(self.requestUrl + 'app/datacensus/sqlrelease/SY0027', info, null, function (code, data) {
|
||
self.mapCaseList = data.dataList
|
||
self.$nextTick(function () {
|
||
jQuery(".slide-box").slide({mainCell:".bd ul",autoPlay:true,effect:"topMarquee",vis:8,interTime:50,trigger:"click"});
|
||
})
|
||
})
|
||
},
|
||
// 查看事件详情
|
||
checkCaseDetail: function (id) {
|
||
var self = this
|
||
doGetForm(self.requestUrl + 'app/datacensus/sqlrelease/SY0028', {
|
||
UID: id
|
||
}, null, function (code, data) {
|
||
self.showDetail = true
|
||
data.dataList[0].caseImage = data.dataList[0].caseImage.split(',')
|
||
if (data.dataList[0].caseImage.length == 1 && data.dataList[0].caseImage[0] == '') {
|
||
data.dataList[0].caseImage = []
|
||
}
|
||
self.caseDetail = data.dataList[0]
|
||
})
|
||
},
|
||
// 重大事件发生情况统计
|
||
getBigCase: function (lv, year) {
|
||
var self = this
|
||
var info
|
||
if (lv == '0') {
|
||
info = {}
|
||
} else if (lv == '1') {
|
||
info = {
|
||
AREACODE: self.areaLv1Selected,
|
||
YEAR: year
|
||
}
|
||
} else if (lv == '2') {
|
||
info = {
|
||
AREACODE: self.areaLv2Selected,
|
||
YEAR: year
|
||
}
|
||
} else {
|
||
info = {
|
||
AREACODE: self.areaLv3Selected,
|
||
YEAR: year
|
||
}
|
||
}
|
||
doGetForm(self.requestUrl + 'app/datacensus/sqlrelease/SY0022', info, null, function (code, data) {
|
||
self.initBigCase(data.dataList)
|
||
})
|
||
},
|
||
// 出租屋占比
|
||
getRentingRoom: function (lv) {
|
||
var self = this
|
||
var info
|
||
if (lv == '0') {
|
||
info = {}
|
||
} else if (lv == '1') {
|
||
info = {
|
||
AREACODE: self.areaLv1Selected,
|
||
YEAR: year
|
||
}
|
||
} else if (lv == '2') {
|
||
info = {
|
||
AREACODE: self.areaLv2Selected,
|
||
YEAR: year
|
||
}
|
||
} else {
|
||
info = {
|
||
AREACODE: self.areaLv3Selected,
|
||
YEAR: year
|
||
}
|
||
}
|
||
doGetForm(self.requestUrl + 'app/datacensus/sqlrelease/SY0030', info, null, function (code, data) {
|
||
self.initLease(data.dataList[0].chuZuProportion)
|
||
})
|
||
},
|
||
// 切换网格员地图
|
||
setCenter: function (lat,lng) {
|
||
|
||
},
|
||
// websocket
|
||
getWebSocket: function () {
|
||
var socket;
|
||
var self = this
|
||
if(typeof(WebSocket) == "undefined") {
|
||
console.log("您的浏览器不支持WebSocket");
|
||
}else{
|
||
console.log("您的浏览器支持WebSocket");
|
||
//实现化WebSocket对象，指定要连接的服务器地址与端口 建立连接
|
||
socket = new WebSocket("ws:///1.24.238.149:37210/systemetl/kafkasocket");
|
||
//打开事件
|
||
socket.onopen = function() {
|
||
console.log("Socket 已打开");
|
||
consoleLog = "Topics连接成功...\r\n\r\n";
|
||
setCodeTxt(consoleLog);
|
||
//socket.send("这是来自客户端的消息" + location.href + new Date());
|
||
};
|
||
//获得消息事件
|
||
socket.onmessage = function(msg) {
|
||
//发现消息进入
|
||
var data = JSON.parse(msg.data)
|
||
var isExist = false
|
||
for (let i = 0; i < self.markerList.length; i++) {
|
||
if (data.creator == self.markerList[i].creator) {
|
||
self.markerList[i] = data
|
||
isExist = true
|
||
}
|
||
}
|
||
if (!isExist) {
|
||
self.markerList.push(data)
|
||
}
|
||
console.log(self.markerList)
|
||
if (self.showMap) {
|
||
self.addMarker()
|
||
}
|
||
};
|
||
//关闭事件
|
||
socket.onclose = function() {
|
||
consoleLog = "Topics连接断开...\r\n\r\n";
|
||
setCodeTxt(consoleLog);
|
||
};
|
||
//发生了错误事件
|
||
socket.onerror = function() {
|
||
consoleLog = "Topics连接错误...\r\n\r\n";
|
||
setCodeTxt(consoleLog);
|
||
//此时可以尝试刷新页面
|
||
}
|
||
}
|
||
function setCodeTxt(value){
|
||
console.log(value)
|
||
}
|
||
},
|
||
// 添加marker
|
||
addMarker: function () {
|
||
var self = this
|
||
for (let i = 0; i < self.markerList.length; i++) {
|
||
var latLng = {
|
||
lng: self.markerList[i].userLng,
|
||
lat: self.markerList[i].userLat
|
||
}
|
||
var marker1 = L.marker(latLng);
|
||
if (self.markerList[i].messageTopicName == 'caseReportRealtimeLocation') {
|
||
marker1.addTo(self.mapInit)
|
||
setTimeout(function () {
|
||
self.mapInit.removeLayer(marker1)
|
||
}, 10000)
|
||
self.caseList1.push(self.markerList[i])
|
||
setTimeout(function () {
|
||
self.caseList1.splice(0,1)
|
||
}, 60000)
|
||
self.$nextTick(function () {
|
||
jQuery(".slide-box").slide({mainCell:".bd ul",autoPlay:true,effect:"topMarquee",vis:8,interTime:50,trigger:"click"});
|
||
})
|
||
} else {
|
||
marker1.addTo(self.mapInit).on('click', function (e) {
|
||
self.getGridDetail()
|
||
});
|
||
}
|
||
}
|
||
},
|
||
// 获取网格员详情
|
||
getGridDetail: function (id) {
|
||
var self = this
|
||
self.showGridDetail = true
|
||
}
|
||
},
|
||
mounted: function () {
|
||
this.getWebSocket()
|
||
this.getGridCount()
|
||
this.getGridManCount()
|
||
this.getOrgCount()
|
||
this.getSpecializeCount()
|
||
this.getTeamCount()
|
||
this.getTeamManCount()
|
||
this.initLease()
|
||
// this.initImportantArea()
|
||
this.initHandleCount()
|
||
this.initMissionCount()
|
||
this.getArea()
|
||
this.getMissionRank()
|
||
}
|
||
})
|
||
</script>
|
||
</body>
|
||
</html> |