|
|
@@ -1,436 +0,0 @@
|
|
|
-<template>
|
|
|
- <div class="box">
|
|
|
- <top :active="1"></top>
|
|
|
- <div class="box-data">
|
|
|
- <DatePicker type="year" placeholder="Select year" style="width: 200px" v-model="saleDate" format="yyyy" @on-change="timeChange" />
|
|
|
- <Select v-model="model" style="width: 200px; margin-left: 20px" @on-change="changeModel">
|
|
|
- <Option v-for="item in nowmonth" :value="item.value" :key="item.value">{{ item.label }}</Option>
|
|
|
- </Select>
|
|
|
- </div>
|
|
|
- <div class="box-left">
|
|
|
- <div class="box-left-content" style="position: relative; z-index: 99998"><left :regionCode="regionCode" :year="year" :month="model" ref="leftTop"></left></div>
|
|
|
- <div class="box-center-content">
|
|
|
- <div class="box-center-content-top">
|
|
|
- <div class="back-button" @click="backClick" v-if="regionLevel === '3' && userRegionLevel !== '3'">
|
|
|
- <!-- <img src="@/assets/images/back.png" /> -->
|
|
|
- </div>
|
|
|
- <div class="num">
|
|
|
- <div class="num-item">
|
|
|
- <div class="num-item-title">总数</div>
|
|
|
- <div class="num-item-text">{{ numParam.total ? numParam.total : 0 }}</div>
|
|
|
- <!-- <img src="@/assets/images/sign-blue.png" /> -->
|
|
|
- </div>
|
|
|
- <div class="num-item">
|
|
|
- <div class="num-item-title">待办数</div>
|
|
|
- <div class="num-item-text">{{ numParam.toDoQuantity ? numParam.toDoQuantity : 0 }}</div>
|
|
|
- <!-- <img src="@/assets/images/sign-blue.png" /> -->
|
|
|
- </div>
|
|
|
- <div class="num-item">
|
|
|
- <div class="num-item-title">办结数</div>
|
|
|
- <div class="num-item-text">{{ numParam.completedQuantity ? numParam.completedQuantity : 0 }}</div>
|
|
|
- <!-- <img src="@/assets/images/sign-blue.png" /> -->
|
|
|
- </div>
|
|
|
- <div class="num-item">
|
|
|
- <div class="num-item-title">重复反映事项数</div>
|
|
|
- <div class="num-item-text color1">{{ numParam.repeatReactionNum ? numParam.repeatReactionNum : 0 }}</div>
|
|
|
- <!-- <img src="@/assets/images/sign-red.png" /> -->
|
|
|
- </div>
|
|
|
- <div class="num-item">
|
|
|
- <div class="num-item-title">逾期事项数</div>
|
|
|
- <div class="num-item-text color2">{{ numParam.overdueNum ? numParam.overdueNum : 0 }}</div>
|
|
|
- <!-- <img src="@/assets/images/sign-yellow.png" /> -->
|
|
|
- </div>
|
|
|
- <div class="num-item">
|
|
|
- <div class="num-item-title">满意率</div>
|
|
|
- <div class="num-item-text color3">{{ numParam.satisfactionRate ? numParam.satisfactionRate : 0 }}%</div>
|
|
|
- <!-- <img src="@/assets/images/sign-green.png" /> -->
|
|
|
- </div>
|
|
|
- </div>
|
|
|
- </div>
|
|
|
- <echarts-map ref="echartsMap" :mapData="mapGeoJson" :regionLevel="regionLevel" @mapClick="mapClick" @mapClicker="mapClicker"></echarts-map>
|
|
|
- <div class="box-center-content-bottom" v-if="regionLevel === '2'">
|
|
|
- <div class="region-item" v-for="item in regionList" :key="item.code">
|
|
|
- <span class="region-item-legend"></span>
|
|
|
- <span class="region-item-text" @click="changeRegion(item)">{{ item.name }}</span>
|
|
|
- </div>
|
|
|
- </div>
|
|
|
- </div>
|
|
|
- <div class="box-left-content" style="position: relative; z-index: 9999"><right :regionCode="regionCode" :year="year" :month="model" :monthStr="modelStr" ref="rightTop"></right></div>
|
|
|
- </div>
|
|
|
- </div>
|
|
|
-</template>
|
|
|
-
|
|
|
-<script>
|
|
|
- import { waterMark } from '@/mixins';
|
|
|
- import top from '../WarningAnalysis/components/top';
|
|
|
- import left from './components/left';
|
|
|
- import right from './components/right';
|
|
|
- import CommandMap from '@/api/commandMap';
|
|
|
- export default {
|
|
|
- name: 'index',
|
|
|
- mixins: [waterMark],
|
|
|
- data() {
|
|
|
- return {
|
|
|
- residentsChart: {
|
|
|
- legend: [['学生数量'], ['学校数量']],
|
|
|
- category: ['2017年', '2018年', '2019年', '2020年'],
|
|
|
- list: [[[70512, 78512, 70512, 74512]], [[9841, 12000, 10101, 10451]]],
|
|
|
- },
|
|
|
- residentsCharta: {
|
|
|
- legend: [],
|
|
|
- category: ['2017年', '2018年', '2019年', '2020年'],
|
|
|
- list: [[9841, 12000, 10101, 10451]],
|
|
|
- },
|
|
|
- saleDate: '',
|
|
|
- nowmonth: [
|
|
|
- {
|
|
|
- value: 1,
|
|
|
- label: '1月',
|
|
|
- },
|
|
|
- {
|
|
|
- value: 2,
|
|
|
- label: '2月',
|
|
|
- },
|
|
|
- {
|
|
|
- value: 3,
|
|
|
- label: '3月',
|
|
|
- },
|
|
|
- {
|
|
|
- value: 4,
|
|
|
- label: '4月',
|
|
|
- },
|
|
|
- {
|
|
|
- value: 5,
|
|
|
- label: '5月',
|
|
|
- },
|
|
|
- {
|
|
|
- value: 6,
|
|
|
- label: '6月',
|
|
|
- },
|
|
|
- {
|
|
|
- value: 7,
|
|
|
- label: '7月',
|
|
|
- },
|
|
|
- {
|
|
|
- value: 8,
|
|
|
- label: '8月',
|
|
|
- },
|
|
|
- {
|
|
|
- value: 9,
|
|
|
- label: '9月',
|
|
|
- },
|
|
|
- {
|
|
|
- value: 10,
|
|
|
- label: '10月',
|
|
|
- },
|
|
|
- {
|
|
|
- value: 11,
|
|
|
- label: '11月',
|
|
|
- },
|
|
|
- {
|
|
|
- value: 12,
|
|
|
- label: '12月',
|
|
|
- },
|
|
|
- ],
|
|
|
- model: '',
|
|
|
- modelStr: '',
|
|
|
- originChart: [
|
|
|
- { name: '小于10岁', value: 349 },
|
|
|
- { name: '11-18岁', value: 246 },
|
|
|
- { name: '19-35岁', value: 190 },
|
|
|
- { name: '36-60岁', value: 150 },
|
|
|
- { name: '60岁以上', value: 50 },
|
|
|
- ],
|
|
|
- mapGeoJson: {},
|
|
|
- regionCode: '',
|
|
|
- regionLevel: '',
|
|
|
- regionList: [
|
|
|
- {
|
|
|
- name: '经开区',
|
|
|
- code: '360986',
|
|
|
- },
|
|
|
- {
|
|
|
- name: '明月山',
|
|
|
- code: '360985',
|
|
|
- },
|
|
|
- {
|
|
|
- name: '宜阳新区',
|
|
|
- code: '360984',
|
|
|
- },
|
|
|
- ],
|
|
|
- year: '',
|
|
|
- numParam: {},
|
|
|
- userRegionLevel: '',
|
|
|
- userRegionCode: '',
|
|
|
- backDataFlag: false,
|
|
|
- };
|
|
|
- },
|
|
|
- components: {
|
|
|
- top,
|
|
|
- left,
|
|
|
- right,
|
|
|
- },
|
|
|
- mounted() {
|
|
|
- const myDate = new Date();
|
|
|
- const year = myDate.getFullYear(); // 获取当前年份
|
|
|
- this.year = year;
|
|
|
- const month = myDate.getMonth() + 1; // 获取当前月份(0-11,0代表1月所以要加1);
|
|
|
- const day = myDate.getDate(); // 获取当前日（1-31）
|
|
|
- this.saleDate = `${year}/${month}/${day}`;
|
|
|
- myDate.setMonth(myDate.getMonth() - 1);
|
|
|
- this.model = myDate.getMonth() + 1;
|
|
|
- if (this.model < 10) {
|
|
|
- this.modelStr = '0' + this.model;
|
|
|
- } else {
|
|
|
- this.modelStr = this.model + '';
|
|
|
- }
|
|
|
- this.regionCode = JSON.parse(sessionStorage.getItem('userInfo')).regionCode;
|
|
|
- this.regionLevel = JSON.parse(sessionStorage.getItem('userInfo')).regionLevel;
|
|
|
- this.userRegionLevel = JSON.parse(sessionStorage.getItem('userInfo')).regionLevel;
|
|
|
- this.userRegionCode = JSON.parse(sessionStorage.getItem('userInfo')).regionCode;
|
|
|
- this.getRegion();
|
|
|
- this.init();
|
|
|
- },
|
|
|
- methods: {
|
|
|
- init() {
|
|
|
- this.rightClick();
|
|
|
- this.leftClick();
|
|
|
- this.getNum();
|
|
|
- },
|
|
|
- timeChange(val) {
|
|
|
- this.saleDate = val;
|
|
|
- this.year = val;
|
|
|
- this.init();
|
|
|
- },
|
|
|
- changeModel(val) {
|
|
|
- console.log(val);
|
|
|
- this.model = val;
|
|
|
- if (this.model < 10) {
|
|
|
- this.modelStr = '0' + this.model;
|
|
|
- } else {
|
|
|
- this.modelStr = this.model + '';
|
|
|
- }
|
|
|
- this.init();
|
|
|
- },
|
|
|
- rightClick() {
|
|
|
- const param = {
|
|
|
- regionCode: this.regionCode,
|
|
|
- dateString: this.year + '-' + this.modelStr,
|
|
|
- regionType: '02',
|
|
|
- };
|
|
|
- this.$refs.rightTop.totalNum(param);
|
|
|
- },
|
|
|
- leftClick() {
|
|
|
- const param = {
|
|
|
- regionCode: this.regionCode,
|
|
|
- time: this.year + '-' + this.modelStr,
|
|
|
- };
|
|
|
- this.$refs.leftTop.totalNum(param);
|
|
|
- },
|
|
|
- changeRegion(item) {
|
|
|
- this.regionCode = item.code;
|
|
|
- this.regionLevel = '2';
|
|
|
- this.init();
|
|
|
- },
|
|
|
- getNum() {
|
|
|
- const params = {
|
|
|
- regionCode: this.regionCode,
|
|
|
- dateString: this.year + '-' + this.modelStr,
|
|
|
- };
|
|
|
- CommandMap.CommandMapClass.queryVolumeStatistics(params).then((res) => {
|
|
|
- const { status, message } = res.data;
|
|
|
- if (status === 0) {
|
|
|
- this.numParam = res.data.data;
|
|
|
- } else {
|
|
|
- this.$Notice.error({
|
|
|
- title: message,
|
|
|
- });
|
|
|
- }
|
|
|
- });
|
|
|
- },
|
|
|
- backClick() {
|
|
|
- this.regionCode = this.userRegionCode;
|
|
|
- this.regionLevel = '2';
|
|
|
- this.$refs.echartsMap.chart.dispose();
|
|
|
- this.getRegion();
|
|
|
- this.init();
|
|
|
- },
|
|
|
- mapClick(event) {
|
|
|
- const properties = this.mapGeoJson.features[event.target.dataIndex].properties;
|
|
|
- this.regionCode = properties.code;
|
|
|
- this.regionLevel = properties.level;
|
|
|
- this.init();
|
|
|
- if (this.regionLevel === '4') {
|
|
|
- return;
|
|
|
- }
|
|
|
- this.getRegion();
|
|
|
- },
|
|
|
- mapClicker(event) {
|
|
|
- const properties = this.mapGeoJson.features[event.target.dataIndex].properties;
|
|
|
- this.regionCode = properties.code;
|
|
|
- this.regionLevel = '3';
|
|
|
- if (!(this.regionLevel === '3' && this.userRegionLevel !== '3')) {
|
|
|
- this.backDataFlag = !this.backDataFlag;
|
|
|
- if (this.backDataFlag) {
|
|
|
- this.regionCode = properties.code;
|
|
|
- this.regionLevel = '3';
|
|
|
- } else {
|
|
|
- this.regionCode = this.userRegionCode;
|
|
|
- this.regionLevel = '2';
|
|
|
- }
|
|
|
- }
|
|
|
- this.init();
|
|
|
- },
|
|
|
- getRegion() {
|
|
|
- const params = {
|
|
|
- regionCode: this.regionCode,
|
|
|
- };
|
|
|
- CommandMap.CommandMapClass.epidemic(params).then((res) => {
|
|
|
- const { status, message } = res.data;
|
|
|
- if (status === 0) {
|
|
|
- this.mapGeoJson = res.data.data;
|
|
|
- } else {
|
|
|
- this.$Notice.error({
|
|
|
- title: message,
|
|
|
- });
|
|
|
- }
|
|
|
- });
|
|
|
- },
|
|
|
- },
|
|
|
- };
|
|
|
-</script>
|
|
|
-
|
|
|
-<style scoped lang="less">
|
|
|
- .box {
|
|
|
- // background: url('~@/assets/images/command/bg.png') no-repeat center;
|
|
|
- background-size: 100% 100%;
|
|
|
- width: 100%;
|
|
|
- height: 100%;
|
|
|
- &-data {
|
|
|
- margin-bottom: 10px;
|
|
|
- margin-left: 22px;
|
|
|
- position: relative;
|
|
|
- z-index: 99999;
|
|
|
- }
|
|
|
- &-left {
|
|
|
- height: 84vh;
|
|
|
- display: flex;
|
|
|
- justify-content: space-between;
|
|
|
- align-items: flex-start;
|
|
|
- margin-right: 22px;
|
|
|
- margin-left: 22px;
|
|
|
- &-content {
|
|
|
- width: 451px;
|
|
|
- height: 100%;
|
|
|
- z-index: 3;
|
|
|
- }
|
|
|
- }
|
|
|
- }
|
|
|
- .box-center-content {
|
|
|
- width: calc(100% - 451px - 451px);
|
|
|
- height: 100%;
|
|
|
- position: relative;
|
|
|
- z-index: 9999;
|
|
|
- &-top {
|
|
|
- position: relative;
|
|
|
- .back-button {
|
|
|
- position: absolute;
|
|
|
- left: 10px;
|
|
|
- cursor: pointer;
|
|
|
- z-index: 3;
|
|
|
- }
|
|
|
- .num {
|
|
|
- width: 80%;
|
|
|
- margin: 0 auto;
|
|
|
- display: flex;
|
|
|
- justify-content: space-between;
|
|
|
- &-item {
|
|
|
- text-align: center;
|
|
|
- &-title {
|
|
|
- font-size: 14px;
|
|
|
- font-weight: 400;
|
|
|
- color: #ffffff;
|
|
|
- line-height: 20px;
|
|
|
- padding-bottom: 5px;
|
|
|
- }
|
|
|
- &-text {
|
|
|
- font-size: 30px;
|
|
|
- font-weight: 700;
|
|
|
- color: #ffffff;
|
|
|
- line-height: 30px;
|
|
|
- }
|
|
|
- img {
|
|
|
- margin-top: -29px;
|
|
|
- }
|
|
|
- .color1 {
|
|
|
- color: #ff4141;
|
|
|
- }
|
|
|
- .color2 {
|
|
|
- color: #fbca38;
|
|
|
- }
|
|
|
- .color3 {
|
|
|
- color: #8cf347;
|
|
|
- }
|
|
|
- }
|
|
|
- }
|
|
|
- }
|
|
|
- &-bottom {
|
|
|
- float: right;
|
|
|
- margin-right: 20px;
|
|
|
- position: relative;
|
|
|
- z-index: 9999;
|
|
|
- }
|
|
|
- }
|
|
|
- .region-item {
|
|
|
- color: #fff;
|
|
|
- line-height: 35px;
|
|
|
- &-legend {
|
|
|
- display: inline-block;
|
|
|
- width: 14px;
|
|
|
- height: 14px;
|
|
|
- background: #dd7a3d;
|
|
|
- opacity: 1;
|
|
|
- border-radius: 50%;
|
|
|
- vertical-align: middle;
|
|
|
- }
|
|
|
- &-text {
|
|
|
- display: inline-block;
|
|
|
- cursor: pointer;
|
|
|
- margin-left: 10px;
|
|
|
- }
|
|
|
- }
|
|
|
- /deep/ .ivu-input {
|
|
|
- display: inline-block;
|
|
|
- width: 100%;
|
|
|
- line-height: 1.5;
|
|
|
- padding: 10px 12px;
|
|
|
- font-size: 14px;
|
|
|
- border: 1px solid #0b6bc0;
|
|
|
- border-radius: 8px;
|
|
|
- color: #fff;
|
|
|
- background-color: #071d49;
|
|
|
- background-image: none;
|
|
|
- position: relative;
|
|
|
- cursor: text;
|
|
|
- transition: border 0.2s ease-in-out, background 0.2s ease-in-out, box-shadow 0.2s ease-in-out;
|
|
|
- }
|
|
|
- /deep/ .ivu-select-selection {
|
|
|
- display: block;
|
|
|
- box-sizing: border-box;
|
|
|
- outline: none;
|
|
|
- -webkit-user-select: none;
|
|
|
- -moz-user-select: none;
|
|
|
- -ms-user-select: none;
|
|
|
- user-select: none;
|
|
|
- cursor: pointer;
|
|
|
- z-index: 3;
|
|
|
- position: relative;
|
|
|
- background-color: #071d49;
|
|
|
- border-radius: 4px;
|
|
|
- border: 1px solid #0b6bc0;
|
|
|
- transition: all 0.2s ease-in-out;
|
|
|
- }
|
|
|
- /deep/ .ivu-select-selected-value {
|
|
|
- color: #fff;
|
|
|
- }
|
|
|
-</style>
|
