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>
|