| | |
| | | * @Author: shuishen 1109946754@qq.com |
| | | * @Date: 2022-11-30 15:18:29 |
| | | * @LastEditors: shuishen 1109946754@qq.com |
| | | * @LastEditTime: 2023-01-31 10:47:22 |
| | | * @LastEditTime: 2023-02-03 11:50:17 |
| | | * @FilePath: \srs-police-affairs\src\api\dept\index.js |
| | | * @Description: |
| | | * |
| | |
| | | |
| | | |
| | | // 获取现有房屋 |
| | | export const getHouseStatisticInfo = (deptld, isFollow) => { |
| | | export const getHouseStatisticInfo = (deptId, isFollow) => { |
| | | return request({ |
| | | url: `/api/houseStatistic/houseStatistic/getHouseStatisticInfo`, |
| | | method: 'get', |
| | | params: { |
| | | deptld, |
| | | deptId, |
| | | isFollow |
| | | } |
| | | }) |
| | |
| | | * @Author: shuishen 1109946754@qq.com |
| | | * @Date: 2023-01-13 15:52:59 |
| | | * @LastEditors: shuishen 1109946754@qq.com |
| | | * @LastEditTime: 2023-02-01 16:57:05 |
| | | * @LastEditTime: 2023-02-03 15:18:05 |
| | | * @FilePath: \srs-police-affairs\src\views\home\components\bottomContainer.vue |
| | | * @Description: |
| | | * |
| | |
| | | <div class="header"> |
| | | <div class="bottom-title">警情动态</div> |
| | | <div class="timeTab" v-show="historytype"> |
| | | <span |
| | | class="beforetime" |
| | | :class="{ choosed: timetype == 0 }" |
| | | @click="timeTabClick(0)" |
| | | >周</span> |
| | | <span |
| | | class="beforetime" |
| | | :class="{ choosed: timetype == 1 }" |
| | | @click="timeTabClick(1)" |
| | | >月</span> |
| | | <span |
| | | class="beforetime" |
| | | :class="{ choosed: timetype == 2 }" |
| | | @click="timeTabClick(2)" |
| | | >自定义</span> |
| | | <span class="beforetime" :class="{ choosed: timetype == 0 }" @click="timeTabClick(0)">周</span> |
| | | <span class="beforetime" :class="{ choosed: timetype == 1 }" @click="timeTabClick(1)">月</span> |
| | | <span class="beforetime" :class="{ choosed: timetype == 2 }" @click="timeTabClick(2)">自定义</span> |
| | | </div> |
| | | |
| | | <div class="timeSeclect" v-show="historytype"> |
| | | <el-date-picker |
| | | v-show="timetype == 0" |
| | | v-model="currentWeekTime" |
| | | @change="datePickerChange" |
| | | type="week" |
| | | align="center" |
| | | format="yyyy 第 WW 周" |
| | | placeholder="选择周" |
| | | popper-class="date-week-style" |
| | | ></el-date-picker> |
| | | <el-date-picker v-show="timetype == 0" v-model="currentWeekTime" @change="datePickerChange" |
| | | type="week" align="center" format="yyyy 第 WW 周" placeholder="选择周" |
| | | popper-class="date-week-style"></el-date-picker> |
| | | |
| | | <el-date-picker |
| | | v-show="timetype == 1" |
| | | v-model="currentMonthTime" |
| | | @change="datePickerChange" |
| | | type="month" |
| | | align="center" |
| | | placeholder="选择月" |
| | | popper-class="date-mouth-style" |
| | | ></el-date-picker> |
| | | <el-date-picker v-show="timetype == 1" v-model="currentMonthTime" @change="datePickerChange" |
| | | type="month" align="center" placeholder="选择月" popper-class="date-mouth-style"></el-date-picker> |
| | | |
| | | <el-date-picker |
| | | v-show="timetype == 2" |
| | | :clearable="false" |
| | | v-model="currentTime" |
| | | type="daterange" |
| | | align="center" |
| | | unlink-panels |
| | | range-separator="至" |
| | | start-placeholder="开始日期" |
| | | end-placeholder="结束日期" |
| | | @change="datePickerChange" |
| | | :picker-options="pickerOptions" |
| | | popper-class="date-day-style" |
| | | ></el-date-picker> |
| | | <el-date-picker v-show="timetype == 2" :clearable="false" v-model="currentTime" type="daterange" |
| | | align="center" unlink-panels range-separator="至" start-placeholder="开始日期" end-placeholder="结束日期" |
| | | @change="datePickerChange" :picker-options="pickerOptions" |
| | | popper-class="date-day-style"></el-date-picker> |
| | | </div> |
| | | |
| | | <div class="history-tab"> |
| | | <span |
| | | class="beforetime" |
| | | :class="{ choosed: historytype == 0 }" |
| | | @click="historyTabClick(0)" |
| | | >实时</span> |
| | | <span |
| | | class="beforetime" |
| | | :class="{ choosed: historytype == 1 }" |
| | | @click="historyTabClick(1)" |
| | | >历史</span> |
| | | <span class="beforetime" :class="{ choosed: historytype == 0 }" |
| | | @click="historyTabClick(0)">实时</span> |
| | | <span class="beforetime" :class="{ choosed: historytype == 1 }" |
| | | @click="historyTabClick(1)">历史</span> |
| | | </div> |
| | | </div> |
| | | |
| | | <div |
| | | class="body" |
| | | v-if="historytype == 0" |
| | | ref="tableBox" |
| | | @click="handleSelectClick($event)" |
| | | > |
| | | <div class="body" v-if="historytype == 0" ref="tableBox" @click="handleSelectClick($event)"> |
| | | <ul class="title-header"> |
| | | <li> |
| | | <span class="num">序号</span> |
| | |
| | | </li> |
| | | </ul> |
| | | |
| | | <vue-seamless-scroll |
| | | v-if="policeSituationRealtimeArr.length > 0" |
| | | :data="policeSituationRealtimeArr" |
| | | class="warp" |
| | | :class-option="classOption" |
| | | > |
| | | <vue-seamless-scroll v-if="policeSituationRealtimeArr.length > 0" :data="policeSituationRealtimeArr" |
| | | class="warp" :class-option="classOption"> |
| | | <ul class="item"> |
| | | <li |
| | | v-for="(item, index) in policeSituationRealtimeArr" |
| | | :key="index" |
| | | :data-obj="JSON.stringify(item)" |
| | | class="row" |
| | | > |
| | | <li v-for="(item, index) in policeSituationRealtimeArr" :key="index" |
| | | :data-obj="JSON.stringify(item)" class="row"> |
| | | <span class="num" v-text="item.index"></span> |
| | | <span class="receiving-alarm-unit" v-text="item.JJDWMC"></span> |
| | | <span class="receiving-alarm-people" v-text="item.JJYXM"></span> |
| | | <span |
| | | class="receiving-alarm-time" |
| | | :title="item.BJSJ" |
| | | v-text="item.BJSJ.substring(0, 10)" |
| | | ></span> |
| | | <span class="receiving-alarm-time" :title="item.BJSJ" |
| | | v-text="item.BJSJ.substring(0, 10)"></span> |
| | | <span class="call-people" v-text="item.BJRXM"></span> |
| | | <span class="call-phone" v-text="item.LXDH"></span> |
| | | <span class="call-police-content" :title="item.BJNR" v-text="item.BJNR"></span> |
| | |
| | | </div> |
| | | |
| | | <div class="current-table-body" ref="ElTableBox" v-if="historytype == 1"> |
| | | <el-table |
| | | :data="policeSituationHistoryArr" |
| | | :key="currentPage" |
| | | style="width: 100%" |
| | | <el-table :data="policeSituationHistoryArr" :key="currentPage" style="width: 100%" |
| | | :height="currentTableHeight" |
| | | :header-cell-style="{ 'text-align': 'center', 'background-color': 'rgba(9, 40, 199, 0.5)', 'borderColor': '#324e75' }" |
| | | :cell-style="{ 'text-align': 'center', 'borderColor': '#324e75' }" |
| | | @cell-click="rowClick" |
| | | > |
| | | <el-table-column |
| | | :show-overflow-tooltip="true" |
| | | prop="index" |
| | | label="序号" |
| | | min-width="6%" |
| | | ></el-table-column> |
| | | <el-table-column |
| | | :show-overflow-tooltip="true" |
| | | prop="JJDWMC" |
| | | label="接警单位" |
| | | min-width="12.6%" |
| | | ></el-table-column> |
| | | <el-table-column |
| | | :show-overflow-tooltip="true" |
| | | prop="JJYXM" |
| | | label="接警员" |
| | | min-width="7.6%" |
| | | ></el-table-column> |
| | | :cell-style="{ 'text-align': 'center', 'borderColor': '#324e75' }" @cell-click="rowClick"> |
| | | <el-table-column :show-overflow-tooltip="true" prop="index" label="序号" |
| | | min-width="6%"></el-table-column> |
| | | <el-table-column :show-overflow-tooltip="true" prop="JJDWMC" label="接警单位" |
| | | min-width="12.6%"></el-table-column> |
| | | <el-table-column :show-overflow-tooltip="true" prop="JJYXM" label="接警员" |
| | | min-width="7.6%"></el-table-column> |
| | | <el-table-column label="报警时间" min-width="9.6%"> |
| | | <template slot-scope="scope"> |
| | | <span>{{ scope.row.BJSJ.substring(0, 10) }}</span> |
| | | </template> |
| | | </el-table-column> |
| | | <el-table-column |
| | | :show-overflow-tooltip="true" |
| | | prop="BJRXM" |
| | | label="报警人" |
| | | min-width="7.6%" |
| | | ></el-table-column> |
| | | <el-table-column |
| | | :show-overflow-tooltip="true" |
| | | prop="LXDH" |
| | | label="联系电话" |
| | | min-width="10%" |
| | | ></el-table-column> |
| | | <el-table-column |
| | | :show-overflow-tooltip="true" |
| | | prop="BJNR" |
| | | label="报警内容" |
| | | min-width="12%" |
| | | ></el-table-column> |
| | | <el-table-column |
| | | :show-overflow-tooltip="true" |
| | | prop="SFDZ" |
| | | label="事发地址" |
| | | min-width="12%" |
| | | ></el-table-column> |
| | | <el-table-column |
| | | :show-overflow-tooltip="true" |
| | | prop="BJLX" |
| | | label="报警类型" |
| | | min-width="8%" |
| | | ></el-table-column> |
| | | <el-table-column |
| | | :show-overflow-tooltip="true" |
| | | prop="MEMO" |
| | | label="备注" |
| | | min-width="12%" |
| | | ></el-table-column> |
| | | <el-table-column :show-overflow-tooltip="true" prop="BJRXM" label="报警人" |
| | | min-width="7.6%"></el-table-column> |
| | | <el-table-column :show-overflow-tooltip="true" prop="LXDH" label="联系电话" |
| | | min-width="10%"></el-table-column> |
| | | <el-table-column :show-overflow-tooltip="true" prop="BJNR" label="报警内容" |
| | | min-width="12%"></el-table-column> |
| | | <el-table-column :show-overflow-tooltip="true" prop="SFDZ" label="事发地址" |
| | | min-width="12%"></el-table-column> |
| | | <el-table-column :show-overflow-tooltip="true" prop="BJLX" label="报警类型" |
| | | min-width="8%"></el-table-column> |
| | | <el-table-column :show-overflow-tooltip="true" prop="MEMO" label="备注" |
| | | min-width="12%"></el-table-column> |
| | | </el-table> |
| | | |
| | | <div class="pages" ref="ElPagination" v-if="policeSituationHistoryArr.length > 0"> |
| | | <el-pagination |
| | | background |
| | | layout="prev, pager, next" |
| | | :page-size="pagesize" |
| | | :page-count="pagesCount" |
| | | :current-page="currentPage" |
| | | @current-change="handleCurrentChange" |
| | | ></el-pagination> |
| | | <el-pagination background layout="prev, pager, next" :page-size="pagesize" :page-count="pagesCount" |
| | | :current-page="currentPage" @current-change="handleCurrentChange"></el-pagination> |
| | | </div> |
| | | </div> |
| | | </div> |
| | | |
| | | <svg class="border-svg"> |
| | | <defs> |
| | | <path |
| | | id="bottom-box-path" |
| | | d="M0,0c56.33,0,112.67,0,169,0c2.5,4.31,6.95,6.19,11,9c0.67,1,1.33,2,2,3c16.33,0,32.67,0,49,0 |
| | | <path id="bottom-box-path" d="M0,0c56.33,0,112.67,0,169,0c2.5,4.31,6.95,6.19,11,9c0.67,1,1.33,2,2,3c16.33,0,32.67,0,49,0 |
| | | c55.99,0,112.01,0,168,0c238.64,0,477.36,0,716,0c1.01,1.73,4.64,4.26,5,5c0,20,0,40,0,60c0,49,0,98,0,147c-0.89,1.52,0,19.4,0,25 |
| | | c0,22.33,0,44.67,0,67c-1.43,0.78-4.01,2.77-5,4c-13,0-26,0-39,0c-3-3.33-6-6.67-9-10c-22,0-44,0-66,0c-2.26,3.84-6.72,5.26-8,10 |
| | | c-241.98,0-484.02,0-726,0c-64.33,0-128.67,0-193,0c-17,0-34,0-51,0c-5.68,0-16.19,1.49-20-1c-4.4-2.88-3-12.84-3-20 |
| | | c0-19.33,0-38.67,0-58C0,160.67,0,80.33,0,0z" |
| | | fill="transparent" |
| | | /> |
| | | c0-19.33,0-38.67,0-58C0,160.67,0,80.33,0,0z" fill="transparent" /> |
| | | <radialGradient id="border-box-gradient" cx="50%" cy="50%" r="50%"> |
| | | <stop offset="0%" stop-color="#fff" stop-opacity="1" /> |
| | | <stop offset="100%" stop-color="#fff" stop-opacity="0" /> |
| | | </radialGradient> |
| | | <mask id="border-box-mask"> |
| | | <circle cx="0" cy="0" r="150" fill="url(#border-box-gradient)"> |
| | | <animateMotion |
| | | dur="8s" |
| | | path="M0,0c56.33,0,112.67,0,169,0c2.5,4.31,6.95,6.19,11,9c0.67,1,1.33,2,2,3c16.33,0,32.67,0,49,0 |
| | | <animateMotion dur="8s" path="M0,0c56.33,0,112.67,0,169,0c2.5,4.31,6.95,6.19,11,9c0.67,1,1.33,2,2,3c16.33,0,32.67,0,49,0 |
| | | c55.99,0,112.01,0,168,0c238.64,0,477.36,0,716,0c1.01,1.73,4.64,4.26,5,5c0,20,0,40,0,60c0,49,0,98,0,147c-0.89,1.52,0,19.4,0,25 |
| | | c0,22.33,0,44.67,0,67c-1.43,0.78-4.01,2.77-5,4c-13,0-26,0-39,0c-3-3.33-6-6.67-9-10c-22,0-44,0-66,0c-2.26,3.84-6.72,5.26-8,10 |
| | | c-241.98,0-484.02,0-726,0c-64.33,0-128.67,0-193,0c-17,0-34,0-51,0c-5.68,0-16.19,1.49-20-1c-4.4-2.88-3-12.84-3-20 |
| | | c0-19.33,0-38.67,0-58C0,160.67,0,80.33,0,0z" |
| | | rotate="auto" |
| | | repeatCount="indefinite" |
| | | /> |
| | | c0-19.33,0-38.67,0-58C0,160.67,0,80.33,0,0z" rotate="auto" repeatCount="indefinite" /> |
| | | </circle> |
| | | </mask> |
| | | </defs> |
| | | |
| | | <use |
| | | stroke-width="2" |
| | | xlink:href="#bottom-box-path" |
| | | mask="url(#border-box-mask)" |
| | | stroke="#4fd2dd" |
| | | > |
| | | <animate |
| | | attributeName="stroke-dasharray" |
| | | from="0, 3220" |
| | | to="3220, 0" |
| | | dur="8s" |
| | | repeatCount="indefinite" |
| | | /> |
| | | <use stroke-width="2" xlink:href="#bottom-box-path" mask="url(#border-box-mask)" stroke="#4fd2dd"> |
| | | <animate attributeName="stroke-dasharray" from="0, 3220" to="3220, 0" dur="8s" |
| | | repeatCount="indefinite" /> |
| | | </use> |
| | | </svg> |
| | | </div> |
| | |
| | | currentPage: 1, |
| | | // table高度 |
| | | currentTableHeight: 0, |
| | | policeStaionID: '' |
| | | } |
| | | }, |
| | | |
| | |
| | | }, |
| | | |
| | | created () { |
| | | this.getAnswerPolices() |
| | | this.getHomeAllData() |
| | | |
| | | this.defaultDate() |
| | | |
| | |
| | | } |
| | | } |
| | | |
| | | |
| | | |
| | | window.addEventListener('resize', this.setTableHeight) |
| | | |
| | | }, |
| | | |
| | | mounted () { |
| | |
| | | }, |
| | | |
| | | methods: { |
| | | /** |
| | | * @description: 获取当前组件内所有数据 |
| | | * @return {*} |
| | | */ |
| | | getHomeAllData (id = '') { |
| | | this.policeStaionID = id |
| | | |
| | | this.getAnswerPolices() |
| | | }, |
| | | |
| | | // 获取table高度 |
| | | setTableHeight () { |
| | | this.$nextTick(() => { |
| | |
| | | |
| | | // 获取实时接警记录 |
| | | getAnswerPolices () { |
| | | getAnswerPolices({ deptId: this.userInfo.dept_id }).then(res => { |
| | | getAnswerPolices({ deptId: this.policeStaionID != '' ? this.policeStaionID : this.userInfo.dept_id }).then(res => { |
| | | this.policeSituationRealtimeArr = [] |
| | | |
| | | if (res.data.result.length > 0) { |
| | |
| | | |
| | | // 获取历史接警记录 |
| | | getAlarmList (params) { |
| | | getAlarmList({ ...params, size: this.pagesize, jjdwbh: this.userInfo.dept_id }).then(res => { |
| | | getAlarmList({ ...params, size: this.pagesize, jjdwbh: this.policeStaionID != '' ? this.policeStaionID : this.userInfo.dept_id }).then(res => { |
| | | this.pagesCount = res.data.data.pages |
| | | |
| | | this.policeSituationHistoryArr = [] |
| | |
| | | <div class="box"> |
| | | <div class="title"> |
| | | <div class="title-tab"> |
| | | <span :class="{ choosed: peopletype == 0 }" @click="peopleTabClick(0)">现有人员</span> |
| | | <!-- <span :class="{ choosed: peopletype == 1 }" @click="peopleTabClick(1)">重点人员</span> --> |
| | | <span :class="{ choosed: peopletype == 0 }">现有人员</span> |
| | | </div> |
| | | <!-- <div class="title-num"> |
| | | 共 |
| | |
| | | </div>--> |
| | | </div> |
| | | <div class="sub-tab" v-show="peopletype == 0"> |
| | | <div |
| | | class="tab" |
| | | :class="{ 'select-on-tab': tabType == 0 }" |
| | | @click="personTabClick(0)" |
| | | > |
| | | <div class="tab" :class="{ 'select-on-tab': tabType == 0 }" @click="personTabClick(0)"> |
| | | <div class="tab-title-small">户籍人口:</div> |
| | | <div |
| | | class="tab-title-small" |
| | | >{{ policeStationPersonInfo.total?policeStationPersonInfo.total:0 }}人</div> |
| | | <div class="tab-title-small">{{ |
| | | personAll.total ? personAll.total : 0 |
| | | }}人</div> |
| | | </div> |
| | | <div |
| | | class="tab" |
| | | :class="{ 'select-on-tab': tabType == 1 }" |
| | | @click="personTabClick(1)" |
| | | > |
| | | <div class="tab" :class="{ 'select-on-tab': tabType == 1 }" @click="personTabClick(1)"> |
| | | <div class="tab-title-small">重点人员:</div> |
| | | <div |
| | | class="tab-title-small" |
| | | >{{ policeStationPersonInfo.emphasisNum?policeStationPersonInfo.emphasisNum:0 }}人</div> |
| | | <div class="tab-title-small">{{ |
| | | personAll.emphasisNum ? personAll.emphasisNum : 0 |
| | | }}人</div> |
| | | </div> |
| | | <!-- <div class="tab3" :class="{ 'select-on-tab': tabType == 2 }" @click="personTabClick(2)"> |
| | | <div class="num">91995人</div> |
| | |
| | | </div>--> |
| | | </div> |
| | | <div id="PersonEcharts" class="echarts-box"></div> |
| | | <div |
| | | class="back" |
| | | title="返回上一级" |
| | | v-show="dataDeep == 2 && peopletype == 0 && showBack" |
| | | @click="backBegin" |
| | | ></div> |
| | | <div class="back" title="返回上一级" v-show="dataDeep == 2 && peopletype == 0 && showBack" |
| | | @click="backBegin"></div> |
| | | </div> |
| | | |
| | | <svg class="border-svg"> |
| | | <defs> |
| | | <path |
| | | id="border-box-8-path-974b4d7cfafa444396861ca1d1173c8c" |
| | | <path id="border-box-8-path-974b4d7cfafa444396861ca1d1173c8c" |
| | | d="M0.27,0.03c52.66,0,105.34,0,158,0c1.67,2,3.33,4,5,6c1,0.33,2,0.67,3,1c1.33,1.67,2.67,3.33,4,5 |
| | | c16,0,32,0,48,0c53.66,0,107.34,0,161,0c1.13,1.72,0.63,1.36,3,2c0,0.67,0,1.33,0,2c0.67,0,1.33,0,2,0 |
| | | c0.01,104.58,0.01,206.44,0,309c-1.43,0.78-4.01,2.77-5,4c-12,0-24,0-36,0c-2.67-3.33-5.33-6.67-8-10c-21,0-42,0-63,0 |
| | | c-1.08,2.32-2.35,4.25-4,6c-0.67,0.33-1.33,0.67-2,1c-0.33,1-0.67,2-1,3c-20,0-40,0-60,0c-66.66,0-133.34,0-200,0 |
| | | c-1.28-1.57-2.76-2.25-4-4c-0.33,0-0.67,0-1,0c0-8.67,0-17.33,0-26c0-19.66,0-39.34,0-59C0.27,160.04,0.27,80.02,0.27,0.03z" |
| | | fill="transparent" |
| | | /> |
| | | <radialGradient |
| | | id="border-box-8-gradient-974b4d7cfafa444396861ca1d1173c8c" |
| | | cx="50%" |
| | | cy="50%" |
| | | r="50%" |
| | | > |
| | | c-1.28-1.57-2.76-2.25-4-4c-0.33,0-0.67,0-1,0c0-8.67,0-17.33,0-26c0-19.66,0-39.34,0-59C0.27,160.04,0.27,80.02,0.27,0.03z" fill="transparent" /> |
| | | <radialGradient id="border-box-8-gradient-974b4d7cfafa444396861ca1d1173c8c" cx="50%" cy="50%" |
| | | r="50%"> |
| | | <stop offset="0%" stop-color="#fff" stop-opacity="1" /> |
| | | <stop offset="100%" stop-color="#fff" stop-opacity="0" /> |
| | | </radialGradient> |
| | | <mask id="border-box-8-mask-974b4d7cfafa444396861ca1d1173c8c"> |
| | | <circle |
| | | cx="0" |
| | | cy="0" |
| | | r="150" |
| | | fill="url(#border-box-8-gradient-974b4d7cfafa444396861ca1d1173c8c)" |
| | | > |
| | | <animateMotion |
| | | dur="8s" |
| | | <circle cx="0" cy="0" r="150" |
| | | fill="url(#border-box-8-gradient-974b4d7cfafa444396861ca1d1173c8c)"> |
| | | <animateMotion dur="8s" |
| | | path="M0.27,0.03c52.66,0,105.34,0,158,0c1.67,2,3.33,4,5,6c1,0.33,2,0.67,3,1c1.33,1.67,2.67,3.33,4,5 |
| | | c16,0,32,0,48,0c53.66,0,107.34,0,161,0c1.13,1.72,0.63,1.36,3,2c0,0.67,0,1.33,0,2c0.67,0,1.33,0,2,0 |
| | | c0.01,104.58,0.01,206.44,0,309c-1.43,0.78-4.01,2.77-5,4c-12,0-24,0-36,0c-2.67-3.33-5.33-6.67-8-10c-21,0-42,0-63,0 |
| | | c-1.08,2.32-2.35,4.25-4,6c-0.67,0.33-1.33,0.67-2,1c-0.33,1-0.67,2-1,3c-20,0-40,0-60,0c-66.66,0-133.34,0-200,0 |
| | | c-1.28-1.57-2.76-2.25-4-4c-0.33,0-0.67,0-1,0c0-8.67,0-17.33,0-26c0-19.66,0-39.34,0-59C0.27,160.04,0.27,80.02,0.27,0.03z" |
| | | rotate="auto" |
| | | repeatCount="indefinite" |
| | | /> |
| | | rotate="auto" repeatCount="indefinite" /> |
| | | </circle> |
| | | </mask> |
| | | </defs> |
| | | |
| | | <use |
| | | stroke-width="2" |
| | | xlink:href="#border-box-8-path-974b4d7cfafa444396861ca1d1173c8c" |
| | | mask="url(#border-box-8-mask-974b4d7cfafa444396861ca1d1173c8c)" |
| | | stroke="#4fd2dd" |
| | | > |
| | | <animate |
| | | attributeName="stroke-dasharray" |
| | | from="0, 1442" |
| | | to="1442, 0" |
| | | dur="8s" |
| | | repeatCount="indefinite" |
| | | /> |
| | | <use stroke-width="2" xlink:href="#border-box-8-path-974b4d7cfafa444396861ca1d1173c8c" |
| | | mask="url(#border-box-8-mask-974b4d7cfafa444396861ca1d1173c8c)" stroke="#4fd2dd"> |
| | | <animate attributeName="stroke-dasharray" from="0, 1442" to="1442, 0" dur="8s" |
| | | repeatCount="indefinite" /> |
| | | </use> |
| | | </svg> |
| | | </div> |
| | |
| | | <div class="box"> |
| | | <div class="title">现有住宅</div> |
| | | <div class="sub-tab"> |
| | | <div |
| | | class="tab" |
| | | :class="{ 'select-on-tab': tabTypeTwo == 0 }" |
| | | @click="houseTabClick(0)" |
| | | > |
| | | <div class="tab" :class="{ 'select-on-tab': tabTypeTwo == 0 }" @click="houseTabClick(0)"> |
| | | <div class="tab-title-small">实有楼栋:</div> |
| | | <div class="tab-title-small">{{realHouseNum?realHouseNum:0}}栋</div> |
| | | </div> |
| | | <div |
| | | class="tab" |
| | | :class="{ 'select-on-tab': tabTypeTwo == 1 }" |
| | | @click="houseTabClick(1)" |
| | | > |
| | | <div class="tab" :class="{ 'select-on-tab': tabTypeTwo == 1 }" @click="houseTabClick(1)"> |
| | | <div class="tab-title-small">关注场所:</div> |
| | | <div class="tab-title-small">{{keyPlaceNum?keyPlaceNum:0}}栋</div> |
| | | </div> |
| | |
| | | </div> |
| | | |
| | | <svg class="border-svg"> |
| | | <use |
| | | stroke-width="2" |
| | | xlink:href="#border-box-8-path-974b4d7cfafa444396861ca1d1173c8c" |
| | | mask="url(#border-box-8-mask-974b4d7cfafa444396861ca1d1173c8c)" |
| | | stroke="#4fd2dd" |
| | | > |
| | | <animate |
| | | attributeName="stroke-dasharray" |
| | | from="0, 1442" |
| | | to="1442, 0" |
| | | dur="8s" |
| | | repeatCount="indefinite" |
| | | /> |
| | | <use stroke-width="2" xlink:href="#border-box-8-path-974b4d7cfafa444396861ca1d1173c8c" |
| | | mask="url(#border-box-8-mask-974b4d7cfafa444396861ca1d1173c8c)" stroke="#4fd2dd"> |
| | | <animate attributeName="stroke-dasharray" from="0, 1442" to="1442, 0" dur="8s" |
| | | repeatCount="indefinite" /> |
| | | </use> |
| | | </svg> |
| | | </div> |
| | | <div class="land-box" style="position: relative;"> |
| | | <div class="box"> |
| | | <div class="title">现有地</div> |
| | | <div class="sub-tab" v-if="isAllPoliceStation"> |
| | | <div |
| | | class="tab" |
| | | :class="{ 'select-on-tab': tabTypeThree == 0 }" |
| | | @click="landTabClick(0)" |
| | | > |
| | | <div class="sub-tab" v-show="isAllPoliceStation"> |
| | | <div class="tab" :class="{ 'select-on-tab': tabTypeThree == 0 }" @click="landTabClick(0)"> |
| | | <div class="tab-title-small">小区:</div> |
| | | <div class="tab-title-small">{{ villageNum?villageNum:0 }}个</div> |
| | | </div> |
| | | <div |
| | | class="tab" |
| | | :class="{ 'select-on-tab': tabTypeThree == 1 }" |
| | | @click="landTabClick(1)" |
| | | > |
| | | <div class="tab" :class="{ 'select-on-tab': tabTypeThree == 1 }" @click="landTabClick(1)"> |
| | | <div class="tab-title-small">责任区:</div> |
| | | <div class="tab-title-small">{{ areaNum?areaNum:0 }}个</div> |
| | | </div> |
| | | </div> |
| | | <div class="sub-tab" v-else> |
| | | <div class="sub-tab" v-show="!isAllPoliceStation"> |
| | | <div class="tab1 select-on-tab"> |
| | | <div class="tab-title-small">小区:</div> |
| | | <div class="tab-title-small">{{ policeVillageNum?policeVillageNum:0 }}个</div> |
| | | <div class="tab-title-small">{{ villageNum?villageNum: 0 }}个</div> |
| | | </div> |
| | | </div> |
| | | |
| | |
| | | </div> |
| | | |
| | | <svg class="border-svg"> |
| | | <use |
| | | stroke-width="2" |
| | | xlink:href="#border-box-8-path-974b4d7cfafa444396861ca1d1173c8c" |
| | | mask="url(#border-box-8-mask-974b4d7cfafa444396861ca1d1173c8c)" |
| | | stroke="#4fd2dd" |
| | | > |
| | | <animate |
| | | attributeName="stroke-dasharray" |
| | | from="0, 1442" |
| | | to="1442, 0" |
| | | dur="8s" |
| | | repeatCount="indefinite" |
| | | /> |
| | | <use stroke-width="2" xlink:href="#border-box-8-path-974b4d7cfafa444396861ca1d1173c8c" |
| | | mask="url(#border-box-8-mask-974b4d7cfafa444396861ca1d1173c8c)" stroke="#4fd2dd"> |
| | | <animate attributeName="stroke-dasharray" from="0, 1442" to="1442, 0" dur="8s" |
| | | repeatCount="indefinite" /> |
| | | </use> |
| | | </svg> |
| | | </div> |
| | |
| | | import { getAreaStatisticInfo } from "@/api/home/index.js" |
| | | import { getVillagePersonStatisticInfo, getVillagePersonStatisticInfoByPoliceStationId, getPersonInfo, getPersonInfoPage, getHouseStatisticInfo } from "@/api/dept" |
| | | |
| | | let homePersonmyChart |
| | | let homePersonmyChart = null |
| | | let houseMyChart |
| | | let landMyChart |
| | | let keyPersonmyChart |
| | |
| | | areaNum: '', |
| | | villageNum: '', |
| | | policeVillageNum: '', |
| | | areaOptionData: [], |
| | | villageOptionData: [], |
| | | policeStationPersonInfo: {}, |
| | | villagePersonStatisticInfoList: [], |
| | | showBack: true, |
| | | isAllPoliceStation: false, |
| | | policeVillageOptionData: [], |
| | | isAllPoliceStation: true, |
| | | realHouseNum: '', |
| | | keyPlaceNum: '', |
| | | personAll: '', |
| | | // 记录当前选中派出所的ID |
| | | policeStaionID: '' |
| | | } |
| | | }, |
| | | |
| | | created () { |
| | | this.getAreaStatisticInfo(1) |
| | | this.getAreaStatisticInfo(2) |
| | | this.getAreaStatisticInfo(3, this.userInfo.dept_id) |
| | | }, |
| | | |
| | | mounted () { |
| | | this.initLandEcharts() |
| | | // 获取所有数据并加载 |
| | | this.getHomeAllData() |
| | | |
| | | this.inithouseEcharts() |
| | | this.clickLandChart() |
| | | |
| | | console.log(1312399999) |
| | | console.log(this.userInfo.dept_id, 98999) |
| | | this.getHouseStatisticInfo(this.userInfo.dept_id, 2) |
| | | if (this.userInfo.dept_id != '1123598813738675201') { |
| | | this.showBack = false |
| | | this.getVillagePersonStatisticInfoByPoliceStationId(this.userInfo.dept_id) |
| | | } else { |
| | | this.getPoliceStationInfo() |
| | | this.isAllPoliceStation = false |
| | | } |
| | | |
| | | this.$nextTick(() => { |
| | |
| | | }) |
| | | }, |
| | | methods: { |
| | | echartsResize () { |
| | | homePersonmyChart && homePersonmyChart != null && homePersonmyChart.resize() |
| | | landMyChart && landMyChart != null && landMyChart.resize() |
| | | keyPersonmyChart && keyPersonmyChart != null && keyPersonmyChart.resize() |
| | | houseMyChart && houseMyChart != null && houseMyChart.resize() |
| | | }, |
| | | /** |
| | | * @description: 获取首页的所有数据 |
| | | * @return {*} |
| | | */ |
| | | getHomeAllData (id = '') { |
| | | this.policeStaionID = id |
| | | |
| | | getHouseStatisticInfo (deptld, isFollow) { |
| | | getHouseStatisticInfo(deptld, isFollow).then(res => { |
| | | let xDate = [] |
| | | let yDate = [] |
| | | if (isFollow == 1) { |
| | | this.keyPlaceNum = res.data.data.count |
| | | if (id != '') { |
| | | this.showBack = false |
| | | this.isAllPoliceStation = false |
| | | } else { |
| | | this.realHouseNum = res.data.data.count |
| | | this.showBack = true |
| | | this.isAllPoliceStation = true |
| | | } |
| | | res.data.data.data.forEach(item => { |
| | | xDate.push(item.name) |
| | | yDate.push(item.num) |
| | | }) |
| | | this.inithouseEcharts(xDate, yDate) |
| | | |
| | | this.personTabClick(0) |
| | | |
| | | this.houseTabClick(0) |
| | | |
| | | this.landTabClick(0) |
| | | }, |
| | | |
| | | /** |
| | | * @description: 户籍人口和重点人员切换 |
| | | * @param {*} type |
| | | * @return {*} |
| | | */ |
| | | personTabClick (type) { |
| | | this.tabType = type |
| | | this.dataDeep = 1 |
| | | |
| | | if (homePersonmyChart != null) { |
| | | homePersonmyChart.dispose() |
| | | homePersonmyChart.off('click') |
| | | } |
| | | |
| | | if (type == 0) { |
| | | if (this.userInfo.dept_id == '1123598813738675201' && this.policeStaionID == '') { |
| | | this.getPoliceStationInfo() |
| | | } else { |
| | | this.getVillagePersonStatisticInfoByPoliceStationId(this.policeStaionID != '' ? this.policeStaionID : this.userInfo.dept_id) |
| | | } |
| | | |
| | | } else if (type == 1) { |
| | | |
| | | this.initkeyPersonEcharts() |
| | | |
| | | } |
| | | }, |
| | | |
| | | /** |
| | | * @description: 获取分局户籍人口数据 |
| | | * @return {*} |
| | | */ |
| | | getPoliceStationInfo () { |
| | | getVillagePersonStatisticInfo().then(res => { |
| | | if (res.data.code == 200) { |
| | | this.personAll = res.data.data |
| | | this.policeStationPersonInfo = res.data.data |
| | | //异步,因此放进接口方法内部 |
| | | this.initPersonEcharts() |
| | | this.clickPeopleChart() |
| | | } |
| | | }) |
| | | }, |
| | | |
| | | |
| | | /** |
| | | * @description: 获取派出所户籍人口数据 |
| | | * @param {*} policeStationId |
| | | * @param {*} name |
| | | * @return {*} |
| | | */ |
| | | getVillagePersonStatisticInfoByPoliceStationId (policeStationId, name) { |
| | | getVillagePersonStatisticInfoByPoliceStationId(policeStationId, name).then(res => { |
| | | if (res.data.code == 200) { |
| | | var chartDom = document.getElementById('PersonEcharts') |
| | | homePersonmyChart = this.$echarts.init(chartDom) |
| | | this.personAll = res.data.data |
| | | |
| | | this.villagePersonStatisticInfoList = res.data.data |
| | | var xDate = [], yDate = [], colors = ['#ccf9d0', '#f9d888', '#f7857e'] |
| | | |
| | | if (this.villagePersonStatisticInfoList.data.length > 0) { |
| | | this.villagePersonStatisticInfoList.data.forEach(e => { |
| | | xDate.push(e.name.replace('居民委员会', '')) |
| | | yDate.push({ |
| | | value: e.num, |
| | | name: e.name, |
| | | id: e.id |
| | | }) |
| | | }) |
| | | } |
| | | |
| | | homePersonmyChart.setOption(this.initPersonOptions(xDate, yDate, colors), true) |
| | | this.clickPeopleChart() |
| | | } |
| | | }) |
| | | }, |
| | | |
| | | /** |
| | | * @description: 初始化现有人图表 |
| | | * @return {*} |
| | | */ |
| | | initPersonEcharts () { |
| | | var chartDom = document.getElementById('PersonEcharts') |
| | | homePersonmyChart = this.$echarts.init(chartDom) |
| | | |
| | | var xDate = [], yDate = [] |
| | | //传入x,y轴数据 |
| | | |
| | | if (this.policeStationPersonInfo.data.length > 0) { |
| | | this.policeStationPersonInfo.data.forEach(e => { |
| | | xDate.push(e.name.replace('派出', '')) |
| | | yDate.push({ |
| | |
| | | name: e.name |
| | | }) |
| | | }) |
| | | } |
| | | |
| | | homePersonmyChart.setOption(this.initPersonOptions(xDate, yDate, ['#06B5D7', '#44C0C1', '#71C8B1'])) |
| | | }, |
| | | |
| | | /** |
| | | * @description: 图表数据处理 |
| | | * @param {*} xDate |
| | | * @param {*} yDate |
| | | * @param {*} colors |
| | | * @return {*} |
| | | */ |
| | | initPersonOptions (xDate, yDate, colors) { |
| | | return { |
| | | let options |
| | | |
| | | if (xDate.length == 0) { |
| | | options = { |
| | | title: { |
| | | text: '暂无数据', |
| | | x: 'center', |
| | | y: 'center', |
| | | textStyle: { |
| | | color: "#fff", |
| | | fontSize: fontSize(14), |
| | | fontWeight: 'normal', |
| | | } |
| | | } |
| | | } |
| | | } else { |
| | | options = { |
| | | tooltip: { |
| | | trigger: 'item', |
| | | formatter: ' <span style="display: inline-block; margin-right: 4px; border-radius: 10px; width: 10px; height: 10px;background-color: #91cc75;"></span> {b0}<strong style="margin-left:10px">{c0}人</strong>', |
| | |
| | | }, |
| | | yAxis: { |
| | | type: 'value', |
| | | minInterval: 1, |
| | | splitLine: { |
| | | show: false |
| | | }, |
| | |
| | | containLabel: true |
| | | }, |
| | | } |
| | | } |
| | | |
| | | return options |
| | | |
| | | }, |
| | | |
| | | personTabClick (type) { |
| | | this.tabType = type |
| | | /** |
| | | * @description: 现有人图表中的返回按钮 |
| | | * @return {*} |
| | | */ |
| | | backBegin () { |
| | | this.dataDeep = 1 |
| | | let xDate, yDate, colors |
| | | |
| | | if (type == 0) { |
| | | homePersonmyChart.dispose() |
| | | this.initPersonEcharts() |
| | | homePersonmyChart.off('click') |
| | | this.clickPeopleChart() |
| | | // let xDate, yDate, colors |
| | | // if (this.tabType == 0) { |
| | | // xDate = ['车站所', '沙溪所', '灵溪所', '北门所', '江光所', '水南所', '秦峰所', '茅家岭所', '西市所', '朝阳所'] |
| | | // yDate = [881, 2211, 6414, 4321, 1232, 881, 2211, 6414, 4321, 1232] |
| | | // colors = ['#06B5D7', '#44C0C1', '#71C8B1'] |
| | | // } else if (this.tabType == 1) { |
| | | // xDate = ['湖北', '上海', '北京', '广东', '浙江'] |
| | | // yDate = [6414, 4231, 2211, 1231, 881] |
| | | // colors = ['#ef9faa', '#f7bfc6', '#fedade'] |
| | | // } else if (this.tabType == 2) { |
| | | // xDate = ['日本', '美国', '俄罗斯', '英国', '印度'] |
| | | // yDate = [881, 1231, 2211, 4321, 6414] |
| | | // colors = ['#7d65c0', '#a47db4', '#e0a8c5'] |
| | | // } |
| | | // homePersonmyChart.setOption(this.initPersonOptions(xDate, yDate, colors), true) |
| | | } else if (type == 1) { |
| | | this.peopleTabClick(type) |
| | | }, |
| | | |
| | | /** |
| | | * @description: 获取现有住宅信息 |
| | | * @param {*} deptld |
| | | * @param {*} isFollow |
| | | * @return {*} |
| | | */ |
| | | getHouseStatisticInfo (isFollow) { |
| | | getHouseStatisticInfo(this.policeStaionID != '' ? this.policeStaionID : this.userInfo.dept_id, isFollow).then(res => { |
| | | let xDate = [] |
| | | let yDate = [] |
| | | if (isFollow == 1) { |
| | | this.keyPlaceNum = res.data.data.count |
| | | } else { |
| | | this.realHouseNum = res.data.data.count |
| | | } |
| | | res.data.data.data.forEach(item => { |
| | | xDate.push(item.name) |
| | | yDate.push(item.num) |
| | | }) |
| | | this.inithouseEcharts(xDate, yDate) |
| | | }) |
| | | }, |
| | | |
| | | inithouseEcharts (xDate, yDate) { |
| | |
| | | msg = params.value + '栋' |
| | | } |
| | | |
| | | msg = `${params.marker}${params.name}<strong style="margin-left:10px">${msg}</strong>'` |
| | | msg = `${params.marker}${params.name}<strong style="margin-left:10px">${msg}</strong>` |
| | | return msg |
| | | }, |
| | | backgroundColor: 'rgba(8, 56, 185, 0.9)', |
| | |
| | | houseTabClick (type) { |
| | | this.tabTypeTwo = type |
| | | if (type == 0) { |
| | | this.getHouseStatisticInfo(this.userInfo.dept_id, 2) |
| | | this.getHouseStatisticInfo(2) |
| | | } else { |
| | | this.getHouseStatisticInfo(this.userInfo.dept_id, 1) |
| | | this.getHouseStatisticInfo(1) |
| | | } |
| | | }, |
| | | |
| | | initLandEcharts () { |
| | | initLandEcharts (landData) { |
| | | var chartDom = document.getElementById('landEcharts') |
| | | landMyChart = this.$echarts.init(chartDom) |
| | | if (this.userInfo.dept_id != '1123598813738675201') { |
| | | this.isAllPoliceStation = false |
| | | landMyChart.setOption(this.initLandOptions(this.policeVillageOptionData[0], this.policeVillageOptionData[1])) |
| | | } else { |
| | | this.isAllPoliceStation = true |
| | | landMyChart.setOption(this.initLandOptions(this.villageOptionData[0], this.villageOptionData[1])) |
| | | } |
| | | |
| | | landMyChart.setOption(this.initLandOptions(landData[0], landData[1])) |
| | | }, |
| | | |
| | | initLandOptions (xDate, yDate) { |
| | |
| | | } |
| | | }, |
| | | |
| | | landTabClick (type) { |
| | | this.tabTypeThree = type |
| | | let xDate, yDate |
| | | |
| | | if (type == 0) { |
| | | xDate = this.villageOptionData[0] |
| | | yDate = this.villageOptionData[1] |
| | | } else if (type == 1) { |
| | | xDate = this.areaOptionData[0] |
| | | yDate = this.areaOptionData[1] |
| | | } |
| | | |
| | | landMyChart.setOption(this.initLandOptions(xDate, yDate), true) |
| | | }, |
| | | |
| | | peopleTabClick (type) { |
| | | // this.peopletype = type |
| | | homePersonmyChart.dispose() |
| | | this.$nextTick(() => { |
| | | if (type == 0) { |
| | | this.initPersonEcharts() |
| | | homePersonmyChart.off('click') |
| | | this.clickPeopleChart() |
| | | } else { |
| | | this.initkeyPersonEcharts() |
| | | homePersonmyChart.off('click') |
| | | this.clickkeyPersonChart() |
| | | } |
| | | homePersonmyChart.resize() |
| | | }) |
| | | }, |
| | | |
| | | clickPeopleChart () { |
| | | homePersonmyChart.on('click', params => { |
| | | this.dataDeep = 2 |
| | |
| | | * @return {*} |
| | | */ |
| | | getPersonInfo () { |
| | | const data = getPersonInfo({ deptId: this.userInfo.dept_id }).then(res => { |
| | | const data = getPersonInfo({ deptId: this.policeStaionID != '' ? this.policeStaionID : this.userInfo.dept_id }).then(res => { |
| | | res.data = res.data.map(item => { |
| | | item = { |
| | | ...item, |
| | |
| | | * @return {*} |
| | | */ |
| | | initkeyPersonOption (dataArr) { |
| | | return { |
| | | let options |
| | | if (dataArr.length == 0) { |
| | | options = { |
| | | title: { |
| | | text: '暂无数据', |
| | | x: 'center', |
| | | y: 'center', |
| | | textStyle: { |
| | | color: "#fff", |
| | | fontSize: fontSize(14), |
| | | fontWeight: 'normal', |
| | | } |
| | | } |
| | | } |
| | | } else { |
| | | options = { |
| | | tooltip: { |
| | | trigger: 'item', |
| | | formatter: params => { |
| | |
| | | y2: 20 |
| | | }, |
| | | } |
| | | } |
| | | |
| | | return options |
| | | }, |
| | | |
| | | /** |
| | |
| | | */ |
| | | }, |
| | | |
| | | selectPoliceChangeData (name) { |
| | | if (this.peopletype == 0 && this.tabType == 0) { |
| | | let xDate, yDate, colors |
| | | if (name == '车站所') { |
| | | this.dataDeep = 2 |
| | | xDate = ['责任区1', '责任区2', '责任区3', '责任区4', '责任区5'] |
| | | yDate = [88, 221, 641, 432, 123] |
| | | colors = ['#0f97f2', '#7d629d', '#e1344f'] |
| | | homePersonmyChart.setOption(this.initPersonOptions(xDate, yDate, colors), true) |
| | | } else if (name == '沙溪所') { |
| | | this.dataDeep = 2 |
| | | xDate = ['责任区1', '责任区2', '责任区3', '责任区4', '责任区5'] |
| | | yDate = [641, 423, 221, 123, 88] |
| | | colors = ['#584d7b', '#9b836a', '#f8ce52'] |
| | | homePersonmyChart.setOption(this.initPersonOptions(xDate, yDate, colors), true) |
| | | } else if (name == '灵溪所') { |
| | | this.dataDeep = 2 |
| | | xDate = ['责任区1', '责任区2', '责任区3', '责任区4', '责任区5'] |
| | | yDate = [111, 531, 211, 431, 64] |
| | | colors = ['#7d65c0', '#a47db4', '#e0a8c5'] |
| | | homePersonmyChart.setOption(this.initPersonOptions(xDate, yDate, colors), true) |
| | | } else if (name == '北门所') { |
| | | this.dataDeep = 2 |
| | | xDate = ['责任区1', '责任区2', '责任区3', '责任区4', '责任区5'] |
| | | yDate = [887, 234, 452, 321, 154] |
| | | colors = ['#6e978f', '#ad885a', '#e97b27'] |
| | | homePersonmyChart.setOption(this.initPersonOptions(xDate, yDate, colors), true) |
| | | } else if (name == '江光所') { |
| | | this.dataDeep = 2 |
| | | xDate = ['责任区1', '责任区2', '责任区3', '责任区4', '责任区5'] |
| | | yDate = [400, 500, 200, 450, 245] |
| | | colors = ['#7e81d5', '#86abe6', '#8fe5e3'] |
| | | homePersonmyChart.setOption(this.initPersonOptions(xDate, yDate, colors), true) |
| | | } else if (name == '全部') { |
| | | this.dataDeep = 1 |
| | | xDate = ['车站所', '沙溪所', '灵溪所', '北门所', '江光所'] |
| | | yDate = [881, 2211, 6414, 4321, 1232] |
| | | colors = ['#f750c2', '#d6369a', '#bc1f76'] |
| | | homePersonmyChart.setOption(this.initPersonOptions(xDate, yDate, colors), true) |
| | | } |
| | | } else if (this.peopletype == 1) { |
| | | let arr = [] |
| | | if (name == '全部') { |
| | | this.keyPersonSelectArr = this.keyPersonDetailArr |
| | | } else { |
| | | this.keyPersonDetailArr.some(item => { |
| | | if (item.policeStation == name) { |
| | | arr.push(item) |
| | | } |
| | | this.keyPersonSelectArr = arr |
| | | this.keyPersonSelectSaveArr = arr |
| | | }) |
| | | } |
| | | this.initkeyPersonEcharts() |
| | | /** |
| | | * @description: 现有地切换 |
| | | * @param {*} type |
| | | * @return {*} |
| | | */ |
| | | landTabClick (type) { |
| | | |
| | | this.tabTypeThree = type |
| | | |
| | | if (type == 0) { |
| | | this.getAreaStatisticInfo(2) |
| | | } else if (type == 1) { |
| | | this.getAreaStatisticInfo(1) |
| | | } |
| | | |
| | | }, |
| | | |
| | | backBegin () { |
| | | this.dataDeep = 1 |
| | | this.initPersonEcharts() |
| | | // let xDate, yDate, colors |
| | | // if (this.tabType == 0) { |
| | | // xDate = ['车站所', '沙溪所', '灵溪所', '北门所', '江光所', '水南所', '秦峰所', '茅家岭所', '西市所', '朝阳所'] |
| | | // yDate = [881, 2211, 6414, 4321, 1232, 881, 2211, 6414, 4321, 1232] |
| | | // colors = ['#06B5D7', '#44C0C1', '#71C8B1'] |
| | | // } else if (this.tabType == 1) { |
| | | // xDate = ['湖北', '上海', '北京', '广东', '浙江'] |
| | | // yDate = [6414, 4231, 2211, 1231, 881] |
| | | // colors = ['#ef9faa', '#f7bfc6', '#fedade'] |
| | | // } else if (this.tabType == 2) { |
| | | // xDate = ['日本', '美国', '俄罗斯', '英国', '印度'] |
| | | // yDate = [881, 1231, 2211, 4321, 6414] |
| | | // colors = ['#7d65c0', '#a47db4', '#e0a8c5'] |
| | | // } |
| | | // homePersonmyChart.setOption(this.initPersonOptions(xDate, yDate, colors), true) |
| | | }, |
| | | |
| | | selectAreaChangeData (name) { |
| | | if (this.peopletype == 1) { |
| | | if (this.peopletype == 1 && name != '全部') { |
| | | let arr = [] |
| | | this.keyPersonSelectSaveArr.some(item => { |
| | | if (item.housingEastate == name) { |
| | | arr.push(item) |
| | | } |
| | | }) |
| | | this.keyPersonSelectArr = arr |
| | | } else { |
| | | this.keyPersonSelectArr = this.keyPersonSelectSaveArr |
| | | } |
| | | this.initkeyPersonEcharts() |
| | | } |
| | | |
| | | }, |
| | | |
| | | // echartsResize (echartsName) { |
| | | // echartsName.resize() |
| | | // }, |
| | | |
| | | getAreaStatisticInfo (type, deptId) { |
| | | getAreaStatisticInfo(type, deptId).then(res => { |
| | | /** |
| | | * @description: 获取现有地数据 |
| | | * @param {*} type |
| | | * @param {*} deptId |
| | | * @return {*} |
| | | */ |
| | | getAreaStatisticInfo (type) { |
| | | getAreaStatisticInfo(type, this.policeStaionID != '' ? this.policeStaionID : this.userInfo.dept_id).then(res => { |
| | | let landData = [] |
| | | if (type == 2) { |
| | | this.areaNum = res.data.data.areaNum |
| | | this.villageNum = res.data.data.villageNum |
| | |
| | | nameArr.push(item.name.replace('派出', '')) |
| | | countArr.push({ value: item.count, id: item.id }) |
| | | }) |
| | | this.villageOptionData = [nameArr, countArr] |
| | | landData = [nameArr, countArr] |
| | | } else if (type == 1) { |
| | | // this.areaNum = res.data.data.areaNum |
| | | // this.villageNum = res.data.data.villageNum |
| | |
| | | nameArr.push(item.name.replace('派出', '')) |
| | | countArr.push({ value: item.count, id: item.id }) |
| | | }) |
| | | this.areaOptionData = [nameArr, countArr] |
| | | } else if (type == 3) { |
| | | this.policeVillageNum = res.data.data.villageNum |
| | | let nameArr = [] |
| | | let countArr = [] |
| | | res.data.data.data.forEach(item => { |
| | | nameArr.push(item.name.replace('居民委员会', '')) |
| | | countArr.push({ value: item.count, id: item.id }) |
| | | }) |
| | | this.policeVillageOptionData = [nameArr, countArr] |
| | | landData = [nameArr, countArr] |
| | | } |
| | | this.initLandEcharts() |
| | | |
| | | this.initLandEcharts(landData) |
| | | }) |
| | | }, |
| | | |
| | | //获取各个派出所的人口数量 |
| | | getPoliceStationInfo () { |
| | | getVillagePersonStatisticInfo().then(res => { |
| | | if (res.data.code == 200) { |
| | | this.policeStationPersonInfo = res.data.data |
| | | //异步,因此放进接口方法内部 |
| | | this.initPersonEcharts() |
| | | this.clickPeopleChart() |
| | | } |
| | | }) |
| | | /** |
| | | * @description: 视图窗口改变时,echarts图表重置 |
| | | * @return {*} |
| | | */ |
| | | echartsResize () { |
| | | homePersonmyChart && homePersonmyChart != null && homePersonmyChart.resize() |
| | | landMyChart && landMyChart != null && landMyChart.resize() |
| | | keyPersonmyChart && keyPersonmyChart != null && keyPersonmyChart.resize() |
| | | houseMyChart && houseMyChart != null && houseMyChart.resize() |
| | | }, |
| | | |
| | | //获取该派出所下的辖区 |
| | | getVillagePersonStatisticInfoByPoliceStationId (policeStationId, name) { |
| | | getVillagePersonStatisticInfoByPoliceStationId(policeStationId, name).then(res => { |
| | | if (res.data.code == 200) { |
| | | var chartDom = document.getElementById('PersonEcharts') |
| | | homePersonmyChart = this.$echarts.init(chartDom) |
| | | this.villagePersonStatisticInfoList = res.data.data |
| | | var xDate = [], yDate = [], colors = ['#ccf9d0', '#f9d888', '#f7857e'] |
| | | this.villagePersonStatisticInfoList.forEach(e => { |
| | | xDate.push(e.name.replace('居民委员会', '')) |
| | | yDate.push({ |
| | | value: e.num, |
| | | name: e.name, |
| | | id: e.id |
| | | }) |
| | | }) |
| | | homePersonmyChart.setOption(this.initPersonOptions(xDate, yDate, colors), true) |
| | | this.clickPeopleChart() |
| | | } |
| | | }) |
| | | } |
| | | |
| | | |
| | | |
| | | }, |
| | | |
| | |
| | | |
| | | .tab { |
| | | display: flex; |
| | | justify-content: space-around; |
| | | padding: 0 10%; |
| | | justify-content: center; |
| | | } |
| | | |
| | | .tab1 { |
| | | width: 50%; |
| | | padding: 0 10%; |
| | | margin-left: 25% !important; |
| | | display: flex; |
| | | justify-content: space-around; |
| | | justify-content: center; |
| | | margin: 0 10px; |
| | | background: $sub-tab-bg-color; |
| | | border-radius: 8px; |
| | |
| | | linetype: 0, |
| | | tableHeight: 0, |
| | | schedulingList: [], |
| | | |
| | | policeStaionID: '' |
| | | } |
| | | }, |
| | | created () { |
| | |
| | | |
| | | mounted () { |
| | | this.initEquipmentEcharts() |
| | | this.initEventChangeEcharts() |
| | | |
| | | this.getHomeAllData() |
| | | |
| | | this.clickEquimentChart() |
| | | |
| | | this.$nextTick(() => { |
| | |
| | | // this.$emit('changeActivityType', type) |
| | | // this.$emit('activityChange') |
| | | // }, |
| | | |
| | | /** |
| | | * @description: 获取当前组件内所有数据 |
| | | * @return {*} |
| | | */ |
| | | getHomeAllData (id = '') { |
| | | this.policeStaionID = id |
| | | |
| | | this.initEventChangeEcharts() |
| | | }, |
| | | |
| | | getSchedulingList () { |
| | | getSchedulingList().then(res => { |
| | |
| | | |
| | | // 获取案件统计值 |
| | | getCaseAll (start, end) { |
| | | const caseAll = getCaseAll(start, end, this.userInfo.dept_id).then(res => { |
| | | const caseAll = getCaseAll(start, end, this.policeStaionID != '' ? this.policeStaionID : this.userInfo.dept_id).then(res => { |
| | | if (res.data.length > 0) { |
| | | return res.data.reduce((previous, current) => { |
| | | previous.xData.push(current.days) |
| | |
| | | * @Author: shuishen 1109946754@qq.com |
| | | * @Date: 2022-08-18 16:18:17 |
| | | * @LastEditors: shuishen 1109946754@qq.com |
| | | * @LastEditTime: 2023-02-02 15:02:18 |
| | | * @LastEditTime: 2023-02-03 15:14:54 |
| | | * @FilePath: \srs-police-affairs\src\views\home\index.vue |
| | | * @Description: 小区-栋-层-房屋 |
| | | * |
| | |
| | | }], |
| | | activityList: [], |
| | | policeSituationList: [], |
| | | policeStationCheckValue: '请选择派出所', |
| | | policeStationCheckValue: '全部', |
| | | areaOptionData: [], |
| | | areaCheckValue: '请选择责任区', |
| | | housingCheckValue: '请选择小区', |
| | |
| | | }, |
| | | peoplePoliceName: '', |
| | | peopleCallPhone: '', |
| | | |
| | | // 当前下拉选中的ID |
| | | policeStaionID: '' |
| | | } |
| | | }, |
| | | |
| | |
| | | }, |
| | | |
| | | policeStationSelect (item) { |
| | | if (this.policeStationCheckValue == item.name) return |
| | | |
| | | this.policeStationCheckValue = item.name |
| | | |
| | | if (item.name == "全部") { |
| | |
| | | this.housingOptions = [] |
| | | this.areaCheckValue = '请选择责任区' |
| | | this.housingCheckValue = '请选择小区' |
| | | |
| | | this.policeStaionID = '' |
| | | } else { |
| | | cylinderLayer.clear() |
| | | this.initAreaOptionLayer(item) |
| | | this.areaCheckValue = '请选择责任区' |
| | | this.housingCheckValue = '请选择小区' |
| | | this.getPoliceStationTree(2, item.id) |
| | | |
| | | this.policeStaionID = item.id |
| | | } |
| | | |
| | | this.$refs.leftContainer.getHomeAllData(this.policeStaionID) |
| | | this.$refs.rightContainer.getHomeAllData(this.policeStaionID) |
| | | this.$refs.bottomContainer.getHomeAllData(this.policeStaionID) |
| | | |
| | | this.policeStaionChecked = item |
| | | |
| | | // this.$refs.leftContainer.selectPoliceChangeData(item.policeStationName) |
| | | // this.$refs.rightContainer.selectPoliceChangeEquimentData(item.policeStationName) |
| | | // this.$refs.rightContainer.selectPoliceChangeEventData(item.policeStationName) |
| | |
| | | this.areaChecked = item |
| | | this.initAreaOptionLayer(item) |
| | | } |
| | | this.$refs.leftContainer.selectAreaChangeData(item.areaCheckName) |
| | | }, |
| | | |
| | | housingSelect (item) { |
| | |
| | | }) |
| | | |
| | | const center = this.getAllRegionCenter(this.policeStationOptions) |
| | | |
| | | console.log(center, 456) |
| | | |
| | | this.$EventBus.$emit('toPosition', { |
| | | siteJd: center[0], |