| | |
| | | params: params |
| | | }); |
| | | }; |
| | | export const selectExtypeUser = () => { |
| | | return request({ |
| | | url: "/api/information/selectExtypeUser", |
| | | method: "post", |
| | | }); |
| | | }; |
| | | |
| | | |
| | | |
| | |
| | | import( /* webpackChunkName: "views" */ '@/views/securityUnitOperation/operationTable') |
| | | }] |
| | | }, |
| | | // { |
| | | // path: '/securityUnitOperation/economicTable', |
| | | // redirect: '/securityUnitOperation/economicTable/index', |
| | | // component: Layout, |
| | | // children: [{ |
| | | // path: 'index', |
| | | // name: '公司经济情况智能分析详情表', |
| | | // meta: { |
| | | // i18n: 'index', |
| | | // }, |
| | | // component: () => |
| | | // import( /* webpackChunkName: "views" */ '@/views/securityUnitOperation/economicTable') |
| | | // }] |
| | | // }, |
| | | { |
| | | path: '/securityUnitOperation/economicTable', |
| | | redirect: '/securityUnitOperation/economicTable/index', |
| | | path: '/statisticalQueryManagement/companyDetails', |
| | | redirect: '/statisticalQueryManagement/companyDetails/index', |
| | | component: Layout, |
| | | children: [{ |
| | | path: 'index', |
| | | name: '公司经济情况智能分析详情表', |
| | | name: '保安公司人员详情', |
| | | meta: { |
| | | i18n: 'index', |
| | | }, |
| | | component: () => |
| | | import( /* webpackChunkName: "views" */ '@/views/securityUnitOperation/economicTable') |
| | | import( /* webpackChunkName: "views" */ '@/views/statisticalQueryManagement/companyDetails') |
| | | }] |
| | | }, |
| | | // { |
| | | // path: '/securityUnitOperation/economicTable', |
| | | // redirect: '/securityUnitOperation/economicTable/index', |
| | | // component: Layout, |
| | | // children: [{ |
| | | // path: 'index', |
| | | // name: '公司经济情况智能分析详情表', |
| | | // meta: { |
| | | // i18n: 'index', |
| | | // }, |
| | | // component: () => |
| | | // import( /* webpackChunkName: "views" */ '@/views/securityUnitOperation/economicTable') |
| | | // }] |
| | | // }, |
| | | { |
| | | path: '/statisticalQueryManagement/companyDetails', |
| | | redirect: '/statisticalQueryManagement/companyDetails/index', |
| | |
| | | }] |
| | | }, |
| | | { |
| | | path: '/statisticalQueryManagement/companyDetails', |
| | | redirect: '/statisticalQueryManagement/companyDetails/index', |
| | | path: '/statisticalQueryManagement/businessStatisticsDetail', |
| | | redirect: '/statisticalQueryManagement/businessStatisticsDetail/index', |
| | | component: Layout, |
| | | children: [{ |
| | | path: 'index', |
| | | name: '保安公司人员详情', |
| | | name: '业务情况明细', |
| | | meta: { |
| | | i18n: 'index', |
| | | }, |
| | | component: () => |
| | | import( /* webpackChunkName: "views" */ '@/views/statisticalQueryManagement/companyDetails') |
| | | }] |
| | | }, |
| | | { |
| | | path: '/securityUnitOperation/economicTable', |
| | | redirect: '/securityUnitOperation/economicTable/index', |
| | | component: Layout, |
| | | children: [{ |
| | | path: 'index', |
| | | name: '公司经济情况智能分析详情表', |
| | | meta: { |
| | | i18n: 'index', |
| | | }, |
| | | component: () => |
| | | import( /* webpackChunkName: "views" */ '@/views/securityUnitOperation/economicTable') |
| | | import( /* webpackChunkName: "views" */ '@/views/statisticalQueryManagement/businessStatisticsDetail') |
| | | }] |
| | | } |
| | | ] |
| | |
| | | |
| | | echartAutoTools.loopShowTooltip = function (chart, chartOption, options) { |
| | | var defaultOptions = { |
| | | interval: 2000, |
| | | interval: 10000, |
| | | loopSeries: false, |
| | | seriesIndex: 1, |
| | | updateData: null |
| | |
| | | width: 44px; |
| | | height: 56px; |
| | | position: absolute; |
| | | margin-left: -7px; |
| | | margin-top: -9px; |
| | | left: -7px; |
| | | top: -9px; |
| | | } |
| | | .leftbottom { |
| | | background: url("../../../public/img/bajgxt/leftbottom.png") no-repeat; |
| | |
| | | width: 44px; |
| | | height: 56px; |
| | | position: absolute; |
| | | margin-left: -7px; |
| | | margin-top: calc(40% - 66px); |
| | | left: -7px; |
| | | bottom: -7px; |
| | | } |
| | | .righttop { |
| | | background: url("../../../public/img/bajgxt/righttop.png") no-repeat; |
| | |
| | | width: 44px; |
| | | height: 56px; |
| | | position: absolute; |
| | | margin-left: calc(100% - 37px); |
| | | margin-top: -9px; |
| | | left: calc(100% - 37px); |
| | | top: -9px; |
| | | } |
| | | .rightbottom { |
| | | background: url("../../../public/img/bajgxt/rightbottom.png") no-repeat; |
| | |
| | | width: 44px; |
| | | height: 56px; |
| | | position: absolute; |
| | | margin-left: calc(100% - 37px); |
| | | margin-top: calc(40% - 66px); |
| | | left: calc(100% - 37px); |
| | | bottom: -7px; |
| | | } |
| | | } |
| | | } |
| | |
| | | .el-table th.is-leaf { |
| | | border-bottom-color: transparent; |
| | | } |
| | | /deep/ .el-table__header th{ |
| | | /deep/ .el-table__header th { |
| | | border-bottom: 1px solid #031a38 !important; |
| | | } |
| | | /deep/.el-table--enable-row-hover .el-table__body tr:hover > td { |
| | |
| | | padding: 15px; |
| | | } |
| | | .card-list { |
| | | margin: 15px 60px 10px 90px; |
| | | margin: 15px 60px 10px 50px; |
| | | display: flex; |
| | | height: 55px; |
| | | line-height: 55px; |
| | |
| | | height: 100%; |
| | | } |
| | | } |
| | | .left2-btn{ |
| | | .left2-btn { |
| | | height: 21px; |
| | | width: 69px; |
| | | background-color: #0445b5; |
| | | background-color: #4478d0; |
| | | color: #fff; |
| | | font-size: 13px !important; |
| | | font-weight: 700; |
| | | color: #fff !important; |
| | | |
| | | line-height: 21px !important; |
| | | text-align: center; |
| | | position: absolute; |
| | | cursor: pointer; |
| | | } |
| | | .left2-btn.btn1{ |
| | | .left2-btn.btn1 { |
| | | right: 106px; |
| | | margin-top: 25px; |
| | | } |
| | | .left2-btn.btn2{ |
| | | .left2-btn.btn2 { |
| | | right: 25px; |
| | | margin-top: 25px; |
| | | } |
| | | .left2-btn.date{ |
| | | margin-left: 74px; |
| | | .left2-btn.date { |
| | | right: 47px; |
| | | margin-top: 27px; |
| | | } |
| | | .left2-btn.mounce{ |
| | | margin-left: 208px; |
| | | .left2-btn.mounce { |
| | | right: 47px; |
| | | margin-top: 71px; |
| | | } |
| | | .left2-btn.all{ |
| | | right: 100px; |
| | | .left2-btn.all { |
| | | right: 47px; |
| | | margin-top: 114px; |
| | | } |
| | | |
| | | .rightData{ |
| | | position: relative; |
| | | color: #fff; |
| | | background: #010945; |
| | | border-radius: 11px; |
| | | height: 52px; |
| | | display: inline-flex; |
| | | width: 174px; |
| | | cursor: pointer; |
| | | font-weight: 700; |
| | | img { |
| | | margin: 12px; |
| | | height: 28px; |
| | | width: 30px; |
| | | } |
| | | .text { |
| | | width: 100px; |
| | | text-align: center; |
| | | // margin: 3px; |
| | | line-height: 25px; |
| | | span:nth-child(1) { |
| | | width: 100%; |
| | | display: block; |
| | | font-size: 14px; |
| | | } |
| | | span:nth-child(2) { |
| | | width: 100%; |
| | | display: block; |
| | | color: #00CCFF; |
| | | font-size: 15px; |
| | | } |
| | | } |
| | | .rightData { |
| | | position: relative; |
| | | color: #fff; |
| | | background: #010945; |
| | | border-radius: 11px; |
| | | height: 52px; |
| | | display: inline-flex; |
| | | width: 174px; |
| | | cursor: pointer; |
| | | font-weight: 700; |
| | | img { |
| | | margin: 12px; |
| | | height: 28px; |
| | | width: 30px; |
| | | } |
| | | .rightData1{ |
| | | margin-left: 42px; |
| | | margin-top: 23px; |
| | | } |
| | | .rightData2{ |
| | | margin-left: 58px; |
| | | margin-top: 23px; |
| | | } |
| | | .rightData3{ |
| | | margin-top: 21px; |
| | | margin-left: 42px; |
| | | } |
| | | .rightData4{ |
| | | margin-top: 21px; |
| | | margin-left: 58px; |
| | | } |
| | | .rightData5{ |
| | | margin-top: 8px; |
| | | margin-left: 42px; |
| | | } |
| | | |
| | | .textBox { |
| | | width: 70%; |
| | | height: 58px; |
| | | // margin: 0 auto; |
| | | overflow: hidden; |
| | | position: absolute; |
| | | text-align: left; |
| | | color: #09b560; |
| | | left: 20px; |
| | | top: 20px; |
| | | font-size: 15px; |
| | | .text { |
| | | .text { |
| | | width: 100px; |
| | | text-align: center; |
| | | // margin: 3px; |
| | | line-height: 25px; |
| | | span:nth-child(1) { |
| | | width: 100%; |
| | | position: absolute; |
| | | bottom: 0; |
| | | display: block; |
| | | font-size: 14px; |
| | | } |
| | | .slide-enter-active, .slide-leave-active { |
| | | transition: all 0.5s linear; |
| | | } |
| | | .slide-enter{ |
| | | transform: translateY(20px) scale(1); |
| | | opacity: 1; |
| | | } |
| | | .slide-leave-to { |
| | | transform: translateY(-20px) scale(0.8); |
| | | opacity: 0; |
| | | span:nth-child(2) { |
| | | width: 100%; |
| | | display: block; |
| | | color: #00ccff; |
| | | font-size: 15px; |
| | | } |
| | | } |
| | | .leftEchartTitle{ |
| | | height: 30px; |
| | | display: flex; |
| | | line-height: 30px; |
| | | margin-top: 10px; |
| | | margin-left: 28px; |
| | | } |
| | | .rightData1 { |
| | | margin-left: 42px; |
| | | margin-top: 23px; |
| | | } |
| | | .rightData2 { |
| | | margin-left: 58px; |
| | | margin-top: 23px; |
| | | } |
| | | .rightData3 { |
| | | margin-top: 21px; |
| | | margin-left: 42px; |
| | | } |
| | | .rightData4 { |
| | | margin-top: 21px; |
| | | margin-left: 58px; |
| | | } |
| | | .rightData5 { |
| | | margin-top: 8px; |
| | | margin-left: 42px; |
| | | } |
| | | |
| | | .textBox { |
| | | width: 70%; |
| | | height: 58px; |
| | | // margin: 0 auto; |
| | | overflow: hidden; |
| | | position: absolute; |
| | | text-align: left; |
| | | color: #09b560; |
| | | left: 20px; |
| | | top: 20px; |
| | | font-size: 15px; |
| | | .text { |
| | | width: 100%; |
| | | position: absolute; |
| | | .block1{ |
| | | width: 23px; |
| | | height: 13px; |
| | | background: #2ec7c9; |
| | | border-radius: 3px; |
| | | margin-top: 9px; |
| | | } |
| | | span:nth-child(2){ |
| | | color: #fff; |
| | | font-size: 13px; |
| | | margin: 0px 10px 0px 3px; |
| | | } |
| | | span:nth-child(3){ |
| | | color: #2ec7c9; |
| | | bottom: 0; |
| | | } |
| | | .slide-enter-active, |
| | | .slide-leave-active { |
| | | transition: all 0.5s linear; |
| | | } |
| | | .slide-enter { |
| | | transform: translateY(20px) scale(1); |
| | | opacity: 1; |
| | | } |
| | | .slide-leave-to { |
| | | transform: translateY(-20px) scale(0.8); |
| | | opacity: 0; |
| | | } |
| | | } |
| | | .leftEchartTitle { |
| | | height: 30px; |
| | | display: flex; |
| | | line-height: 30px; |
| | | margin-top: 10px; |
| | | margin-left: 28px; |
| | | position: absolute; |
| | | .block1 { |
| | | width: 23px; |
| | | height: 13px; |
| | | background: #2ec7c9; |
| | | border-radius: 3px; |
| | | margin-top: 9px; |
| | | } |
| | | span:nth-child(2) { |
| | | color: #fff; |
| | | font-size: 13px; |
| | | margin: 0px 10px 0px 3px; |
| | | } |
| | | span:nth-child(3) { |
| | | color: #2ec7c9; |
| | | font-size: 17px; |
| | | font-weight: 700; |
| | | display: block; |
| | | width: 65px; |
| | | text-align: center; |
| | | } |
| | | span:nth-child(4){ |
| | | font-size: 13px; |
| | | color: #2ec7c9; |
| | | } |
| | | } |
| | | .leftEchartTitle2{ |
| | | right: 35px; |
| | | .block1{ |
| | | background: #b6a2de; |
| | | } |
| | | span:nth-child(3){ |
| | | color: #b6a2de; |
| | | span:nth-child(4) { |
| | | font-size: 13px; |
| | | color: #2ec7c9; |
| | | } |
| | | } |
| | | .leftEchartTitle2 { |
| | | right: 35px; |
| | | .block1 { |
| | | background: #b6a2de; |
| | | } |
| | | span:nth-child(3) { |
| | | color: #b6a2de; |
| | | font-size: 15px; |
| | | } |
| | | } |
| | | .leftEchartTitle3{ |
| | | margin-top: 37px; |
| | | .block1{ |
| | | background: #5ab1ef; |
| | | } |
| | | span:nth-child(3){ |
| | | color: #5ab1ef; |
| | | } |
| | | .leftEchartTitle3 { |
| | | margin-top: 37px; |
| | | .block1 { |
| | | background: #5ab1ef; |
| | | } |
| | | span:nth-child(3) { |
| | | color: #5ab1ef; |
| | | font-size: 15px; |
| | | } |
| | | } |
| | | .leftEchartTitle4{ |
| | | margin-top: 37px; |
| | | right: 22px; |
| | | .block1{ |
| | | background: #ffb980; |
| | | } |
| | | span:nth-child(3){ |
| | | color: #ffb980; |
| | | } |
| | | .leftEchartTitle4 { |
| | | margin-top: 37px; |
| | | right: 22px; |
| | | .block1 { |
| | | background: #ffb980; |
| | | } |
| | | span:nth-child(3) { |
| | | color: #ffb980; |
| | | font-size: 15px; |
| | | } |
| | | } |
| | | .leftEchartTitle5{ |
| | | margin-top: 64px; |
| | | .block1{ |
| | | background: #fc8452; |
| | | } |
| | | span:nth-child(3){ |
| | | color: #fc8452; |
| | | } |
| | | .leftEchartTitle5 { |
| | | margin-top: 64px; |
| | | .block1 { |
| | | background: #fc8452; |
| | | } |
| | | span:nth-child(3) { |
| | | color: #fc8452; |
| | | font-size: 15px; |
| | | } |
| | | } |
| | | |
| | | |
| | | } |
| | | .bayHover { |
| | | background-color: #0445b5; |
| | | color: #fff !important; |
| | | } |
| | | .leftEchartTitle.xbNan { |
| | | right: 47px; |
| | | margin-top: 76px; |
| | | .block1 { |
| | | width: 30px; |
| | | height: 15px; |
| | | background: #008dec; |
| | | margin-top: 7px; |
| | | } |
| | | span:nth-child(2) { |
| | | color: #fff; |
| | | font-size: 13px; |
| | | } |
| | | span:nth-child(3) { |
| | | color: #008dec; |
| | | font-size: 17px; |
| | | } |
| | | span:nth-child(4) { |
| | | font-size: 13px; |
| | | color: #008dec; |
| | | } |
| | | } |
| | | .leftEchartTitle.xbNv { |
| | | right: 47px; |
| | | margin-top: 135px; |
| | | .block1 { |
| | | width: 30px; |
| | | height: 15px; |
| | | background: #886eff; |
| | | margin-top: 7px; |
| | | } |
| | | span:nth-child(2) { |
| | | color: #fff; |
| | | font-size: 13px; |
| | | } |
| | | span:nth-child(3) { |
| | | color: #886eff; |
| | | font-size: 17px; |
| | | } |
| | | span:nth-child(4) { |
| | | font-size: 13px; |
| | | color: #886eff; |
| | | } |
| | | } |
| | |
| | | <div class="title-pane2"> |
| | | <img src="../../../public/img/bajgxt/icon1.png" /> |
| | | <span>保安员持证情况</span> |
| | | <span class="left2-btn btn1" @click="getHolderNum(0)" |
| | | <span |
| | | class="left2-btn btn1" |
| | | :class="[left2EchartType === 0 ? 'bayHover' : '']" |
| | | @click="getHolderNum(0)" |
| | | >辖区统计</span |
| | | > |
| | | <span class="left2-btn btn2" @click="getHolderNum(1)" |
| | | <span |
| | | class="left2-btn btn2" |
| | | :class="[left2EchartType === 1 ? 'bayHover' : '']" |
| | | @click="getHolderNum(1)" |
| | | >男女结构</span |
| | | > |
| | | </div> |
| | | |
| | | <div v-if="left2EchartType === 1" class="leftEchartTitle xbNan"> |
| | | <div class="block1"></div> |
| | | <span>男</span> |
| | | <span>{{ leftData.nan }}</span> |
| | | <span>人</span> |
| | | </div> |
| | | <div v-if="left2EchartType === 1" class="leftEchartTitle xbNv"> |
| | | <div class="block1"></div> |
| | | <span>女</span> |
| | | <span>{{ leftData.nv }}</span> |
| | | <span>人</span> |
| | | </div> |
| | | <div id="left2Echart" v-loading="left2loading"></div> |
| | | </div> |
| | |
| | | </el-select> |
| | | </div> |
| | | <div class="right-content" v-loading="right1loading"> |
| | | <span class="left2-btn date" @click="getPoorPerformance(0)" |
| | | <span |
| | | class="left2-btn date" |
| | | :class="[poorPerformanceType === 0 ? 'bayHover' : '']" |
| | | @click="getPoorPerformance(0)" |
| | | >当日</span |
| | | > |
| | | <span class="left2-btn mounce" @click="getPoorPerformance(1)" |
| | | <span |
| | | class="left2-btn mounce" |
| | | :class="[poorPerformanceType === 1 ? 'bayHover' : '']" |
| | | @click="getPoorPerformance(1)" |
| | | >当月</span |
| | | > |
| | | <span class="left2-btn all" @click="getPoorPerformance(2)" |
| | | <span |
| | | class="left2-btn all" |
| | | :class="[poorPerformanceType === 2 ? 'bayHover' : '']" |
| | | @click="getPoorPerformance(2)" |
| | | >全部</span |
| | | > |
| | | <div class="card-list" style="margin-top: 38px"> |
| | | <div class="card-list" style="margin-top: 21px"> |
| | | <img src="../../../public/img/bajgxt/u4.png" /> |
| | | <img src="../../../public/img/bajgxt/u256.png" /> |
| | | <img src="../../../public/img/bajgxt/u1.png" /> |
| | |
| | | <div class="rightData rightData1"> |
| | | <img src="../../../public/img/bajgxt/u231.png" alt /> |
| | | <div class="text"> |
| | | <span>数据未更新</span> |
| | | <span>45条</span> |
| | | <span>数据更新异常</span> |
| | | <span>45个</span> |
| | | </div> |
| | | </div> |
| | | <div class="rightData rightData2"> |
| | | <img src="../../../public/img/bajgxt/u232.png" alt /> |
| | | <div class="text"> |
| | | <span>资质不全</span> |
| | | <span>资质未过审</span> |
| | | <span>23个</span> |
| | | </div> |
| | | </div> |
| | | <div class="rightData rightData3"> |
| | | <img src="../../../public/img/bajgxt/u233.png" alt /> |
| | | <div class="text"> |
| | | <span>没开展业务</span> |
| | | <span>业务经营异常</span> |
| | | <span>12个</span> |
| | | </div> |
| | | </div> |
| | | <div class="rightData rightData4"> |
| | | <img src="../../../public/img/bajgxt/111.png" alt /> |
| | | <div class="text"> |
| | | <span>被公安查处</span> |
| | | <span>监管处罚</span> |
| | | <span>6个</span> |
| | | </div> |
| | | </div> |
| | |
| | | </template> |
| | | |
| | | <script> |
| | | import './echarts-auto-tooltip' |
| | | import "./echarts-auto-tooltip"; |
| | | // import "ol/ol.css"; |
| | | import * as echarts from "echarts"; |
| | | import optionJs from "./indexEchart"; |
| | |
| | | selectExtype, |
| | | seCountUg, |
| | | seCountI, |
| | | selectExtypeUser |
| | | } from "../../api/index/index"; |
| | | |
| | | import car from "@/assets/img/car.png"; |
| | |
| | | poorPerformance: 0, |
| | | qualification: 0, |
| | | socialSecurity: 0, |
| | | noholder: 0, |
| | | noholder: 0 |
| | | }, |
| | | carNum: 0, |
| | | peoNum: 0, |
| | |
| | | left1Echart: null, |
| | | left2Echart: null, |
| | | mapEchart: null, |
| | | right3Echart: null, |
| | | right3Echart: null |
| | | }, |
| | | left1loading: true, |
| | | left2loading: true, |
| | |
| | | px: 0, |
| | | fw: 0, |
| | | wz: 0, |
| | | kqy:0 |
| | | kqy: 0, |
| | | nan: 0, |
| | | nv: 0 |
| | | }, |
| | | left2EchartType: 0, |
| | | poorPerformanceType: 2 |
| | | }; |
| | | }, |
| | | computed: { |
| | | text() { |
| | | return { |
| | | id: this.number, |
| | | val: this.textArr[this.number], |
| | | val: this.textArr[this.number] |
| | | }; |
| | | }, |
| | | } |
| | | }, |
| | | methods: { |
| | | startMove() { |
| | |
| | | }, |
| | | // 左侧表的接口返回数据 |
| | | initEchart() { |
| | | securityTotal().then((res) => { |
| | | securityTotal().then(res => { |
| | | if (res.data.code == 200) { |
| | | let securityData = res.data.data; |
| | | if (!this.echarts.left1Echart) { |
| | |
| | | } |
| | | this.left1loading = false; |
| | | }); |
| | | seCountI({ jurisdiction: "", deptid: "" }).then((res) => { |
| | | seCountI({ jurisdiction: "", deptid: "" }).then(res => { |
| | | if (res.data.code == 200) { |
| | | let data = res.data.data; |
| | | data.forEach((item) => { |
| | | data.forEach(item => { |
| | | if (item.stats === "0") { |
| | | this.leftData.zz = item.num; |
| | | } |
| | |
| | | this.$message.error(res.msg); |
| | | } |
| | | }); |
| | | selectFj().then((res) => { |
| | | selectFj().then(res => { |
| | | if (res.data.code === 200) { |
| | | if (!this.echarts.right3Echart) { |
| | | this.echarts.right3Echart = echarts.init( |
| | |
| | | }, |
| | | |
| | | getHolderNum(type) { |
| | | this.left2EchartType = type; |
| | | this.left2loading = true; |
| | | if (this.echarts.left2Echart) { |
| | | this.echarts.left2Echart.clear(); |
| | | } |
| | | if (type === 0) { |
| | | holderNum().then((res) => { |
| | | holderNum().then(res => { |
| | | if (res.data.code === 200) { |
| | | let data = res.data.data; |
| | | this.echarts.left2Echart = echarts.init( |
| | |
| | | this.left2loading = false; |
| | | }); |
| | | } else { |
| | | seCountUg({ jurisdiction: "", deptid: "" }).then((res) => { |
| | | seCountUg({ jurisdiction: "", deptid: "" }).then(res => { |
| | | if (res.data.code === 200) { |
| | | this.echarts.left2Echart = echarts.init( |
| | | document.getElementById("left2Echart") |
| | |
| | | this.echarts.left2Echart.setOption( |
| | | optionJs.left3Data(res.data.data, true) |
| | | ); |
| | | this.leftData.nan = res.data.data[0].mnum; |
| | | this.leftData.nv = res.data.data[0].gnum; |
| | | } |
| | | this.left2loading = false; |
| | | }); |
| | |
| | | this.echarts.mapEchart = echarts.init(document.getElementById("map")); |
| | | } |
| | | this.echarts.mapEchart.setOption(optionJs.middleData(data, type)); |
| | | echartAutoTools.loopShowTooltip(this.echarts.mapEchart, optionJs.middleData(data, type), {loopSeries: true}); |
| | | echartAutoTools.loopShowTooltip( |
| | | this.echarts.mapEchart, |
| | | optionJs.middleData(data, type), |
| | | { loopSeries: true } |
| | | ); |
| | | }, |
| | | setMapData(type) { |
| | | this.middleloading = true; |
| | |
| | | this.middleloading = false; |
| | | this.textArr = []; |
| | | if (type === 2) { |
| | | this.tableData.forEach((item) => { |
| | | this.tableData.forEach(item => { |
| | | let obj = |
| | | "押运车辆车牌号" + |
| | | item.carNum + |
| | |
| | | this.textArr.push(obj); |
| | | }); |
| | | } else if (type === 1) { |
| | | this.tableData.forEach((item) => { |
| | | this.tableData.forEach(item => { |
| | | let obj = |
| | | "押运人员" + |
| | | item.name + |
| | |
| | | this.textArr.push(obj); |
| | | }); |
| | | } else if (type === 3) { |
| | | this.tableData.forEach((item) => { |
| | | this.tableData.forEach(item => { |
| | | let obj = |
| | | "枪支编号" + |
| | | item.number + |
| | |
| | | let middleData = { |
| | | 1: { |
| | | table: [], |
| | | geoData: [], |
| | | geoData: [] |
| | | }, |
| | | 2: { |
| | | table: [], |
| | | geoData: [], |
| | | geoData: [] |
| | | }, |
| | | 3: { |
| | | table: [], |
| | | geoData: [], |
| | | }, |
| | | geoData: [] |
| | | } |
| | | }; |
| | | getLiveLocationVoList({ type: type }).then((res) => { |
| | | getLiveLocationVoList({ type: type }).then(res => { |
| | | if (res.data.code === 200) { |
| | | let allData = res.data.data; |
| | | allData.forEach((m) => { |
| | | allData.forEach(m => { |
| | | let obj = { |
| | | location: m.location, |
| | | name: m.name, |
| | |
| | | linkman: m.linkman, |
| | | company: m.company, |
| | | tel: m.tel, |
| | | carNum: m.carNum, |
| | | carNum: m.carNum |
| | | }; |
| | | |
| | | // let geoObj = { |
| | |
| | | // }; |
| | | middleData[m.type]["geoData"].push([ |
| | | Number(m.longitude), |
| | | Number(m.latitude), |
| | | Number(m.latitude) |
| | | ]); |
| | | middleData[m.type]["table"].push(obj); |
| | | }); |
| | |
| | | zIndex: 4, |
| | | title: "影像", |
| | | source: new XYZ({ |
| | | url: "http://t3.tianditu.com/DataServer?T=img_w&x={x}&y={y}&l={z}&tk=e9533f5acb2ac470b07f406a4d24b4f0", // 行政区划 |
| | | }), |
| | | url: |
| | | "http://t3.tianditu.com/DataServer?T=img_w&x={x}&y={y}&l={z}&tk=e9533f5acb2ac470b07f406a4d24b4f0" // 行政区划 |
| | | }) |
| | | }), |
| | | new Tile({ |
| | | zIndex: 5, |
| | | title: "道路+中文注记", |
| | | source: new XYZ({ |
| | | url: "http://t3.tianditu.com/DataServer?T=cta_w&x={x}&y={y}&l={z}&tk=e9533f5acb2ac470b07f406a4d24b4f0", // 注记 |
| | | }), |
| | | }), |
| | | url: |
| | | "http://t3.tianditu.com/DataServer?T=cta_w&x={x}&y={y}&l={z}&tk=e9533f5acb2ac470b07f406a4d24b4f0" // 注记 |
| | | }) |
| | | }) |
| | | ], |
| | | view: new View({ |
| | | projection: "EPSG:4326", |
| | | center: [115.892151, 28.676493], |
| | | zoom: 10, |
| | | }), |
| | | zoom: 10 |
| | | }) |
| | | }); |
| | | this.carVectorLayer = new VectorLayer({ |
| | | zIndex: 99, |
| | | source: new VectorSource(), |
| | | source: new VectorSource() |
| | | }); |
| | | |
| | | this.peoVectorLayer = new VectorLayer({ |
| | | zIndex: 99, |
| | | source: new VectorSource(), |
| | | source: new VectorSource() |
| | | }); |
| | | |
| | | this.gunVectorLayer = new VectorLayer({ |
| | | zIndex: 99, |
| | | source: new VectorSource(), |
| | | source: new VectorSource() |
| | | }); |
| | | this.map.addLayer(this.carVectorLayer); |
| | | this.map.addLayer(this.peoVectorLayer); |
| | |
| | | }, |
| | | // 获取辖区列表 |
| | | getOfficeData() { |
| | | lazyTreeJu().then((res) => { |
| | | lazyTreeJu().then(res => { |
| | | if (res.data.code === 200) { |
| | | this.options1 = res.data.data; |
| | | this.options2 = res.data.data; |
| | |
| | | // 获取完辖区列表之后再获取具体数据 |
| | | this.getNoholderNum(); |
| | | this.getNoSocialSecurity(); |
| | | this.getQualification(); |
| | | this.getPoorPerformance(); |
| | | // this.getQualification(); |
| | | this.getPoorPerformance(2); |
| | | } else { |
| | | this.$message.error(res.msg); |
| | | } |
| | |
| | | }, |
| | | // 未持证 |
| | | getNoholderNum() { |
| | | noholderNum({ jurisdiction: this.value2 }).then((res) => { |
| | | noholderNum({ jurisdiction: this.value2 }).then(res => { |
| | | if (res.data.code === 200) { |
| | | this.rightData.noholder = res.data.data[0].Count; |
| | | } else { |
| | |
| | | }, |
| | | // 未缴纳社保 |
| | | getNoSocialSecurity() { |
| | | noSocialSecurity({ jurisdiction: this.value2 }).then((res) => { |
| | | noSocialSecurity({ jurisdiction: this.value2 }).then(res => { |
| | | if (res.data.code === 200) { |
| | | this.rightData.socialSecurity = res.data.data[0].Count; |
| | | } else { |
| | |
| | | }); |
| | | }, |
| | | // 现实表现差 |
| | | // getPoorPerformance() { |
| | | // selectBx({ jurisdiction: this.value1 }).then((res) => { |
| | | // if (res.data.code === 200) { |
| | | // this.rightData.poorPerformance = res.data.data[0].count; |
| | | // } else { |
| | | // this.$message.error(res.msg); |
| | | // } |
| | | // this.right1loading = false; |
| | | // }); |
| | | // }, |
| | | getPoorPerformance(type) { |
| | | this.right1loading = true; |
| | | this.poorPerformanceType = type; |
| | | if (type === 0) { |
| | | this.rightData.poorPerformance = 2; |
| | | this.rightData.qualification = 3; |
| | | this.right1loading = false; |
| | | } else if (type === 1) { |
| | | this.rightData.poorPerformance = 11; |
| | | this.rightData.qualification = 14; |
| | | this.right1loading = false; |
| | | } else if (type === 2) { |
| | | // this.rightData.poorPerformance = 32; |
| | | // this.rightData.qualification = 45; |
| | | selectBx({ jurisdiction: this.value1 }).then(res => { |
| | | if (res.data.code === 200) { |
| | | this.rightData.poorPerformance = res.data.data[0].count; |
| | | } else { |
| | | this.$message.error(res.msg); |
| | | } |
| | | this.right1loading = false; |
| | | }); |
| | | selectExtypeUser().then(res => { |
| | | if (res.status === 200) { |
| | | this.rightData.qualification = res.data; |
| | | } else { |
| | | this.$message.error(res.msg); |
| | | } |
| | | }); |
| | | } |
| | | // this.right1loading = false; |
| | | }, |
| | | // 资格审查异常 |
| | | getQualification() { |
| | | selectExtype({ jurisdiction: this.value1 }).then((res) => { |
| | | selectExtype({ jurisdiction: this.value1 }).then(res => { |
| | | if (res.data.code === 200) { |
| | | this.rightData.qualification = res.data.data[0].count; |
| | | } else { |
| | | this.$message.error(res.msg); |
| | | } |
| | | this.right1loading = false; |
| | | }); |
| | | }, |
| | | peoWarning() { |
| | |
| | | |
| | | companyWarning() { |
| | | this.right1loading = true; |
| | | this.getPoorPerformance(); |
| | | this.getQualification(); |
| | | this.getPoorPerformance(2); |
| | | // this.getQualification(); |
| | | }, |
| | | |
| | | goSystemHome() { |
| | | // this.$router.push({ path: "/register/index" }); |
| | | this.$router.push({ path: "/securityGuardManagement/register" }); |
| | | }, |
| | | getPoorPerformance(type) { |
| | | if (type === 0) { |
| | | this.rightData.poorPerformance = 2; |
| | | this.rightData.qualification = 3; |
| | | } else if (type === 1) { |
| | | this.rightData.poorPerformance = 11; |
| | | this.rightData.qualification = 14; |
| | | } else if (type === 2) { |
| | | this.rightData.poorPerformance = 32; |
| | | this.rightData.qualification = 45; |
| | | } |
| | | }, |
| | | } |
| | | }, |
| | | mounted() { |
| | | this.startMove(); |
| | | this.initEchart(); |
| | | this.getHolderNum(0); |
| | | this.getPoorPerformance(0); |
| | | this.getPoorPerformance(2); |
| | | // this.getTableData("car"); |
| | | // this.initMap(); |
| | | this.getTableData(0); |
| | | // this.initMapEchart(); |
| | | this.getOfficeData(); |
| | | }, |
| | | } |
| | | }; |
| | | </script> |
| | | |
| | |
| | | import * as echarts from "echarts"; |
| | | import nc from '../../../public/nc.json'; |
| | | import nc from "../../../public/nc.json"; |
| | | function left1Data(allData) { |
| | | let nameArr = []; |
| | | let data1 = []; |
| | |
| | | data4.push(item.server.armed); |
| | | data5.push(item.server.region); |
| | | }); |
| | | nameArr.reverse(); |
| | | data1.reverse(); |
| | | data2.reverse(); |
| | | data3.reverse(); |
| | | data4.reverse(); |
| | | data5.reverse(); |
| | | let option = { |
| | | tooltip: { |
| | | trigger: "axis", |
| | |
| | | // borderColor: "gray", //设置边框颜色 |
| | | textStyle: { |
| | | color: "#fff" //设置文字颜色 |
| | | }, |
| | | } |
| | | }, |
| | | color: [ |
| | | '#2ec7c9', |
| | | '#b6a2de', |
| | | '#5ab1ef', |
| | | '#ffb980', |
| | | "#2ec7c9", |
| | | "#b6a2de", |
| | | "#5ab1ef", |
| | | "#ffb980", |
| | | |
| | | // "#fac858", |
| | | // "#73c0de", |
| | |
| | | "#9a60b4", |
| | | "#3fb1e3", |
| | | "#6be6c1", |
| | | '#626c91', |
| | | '#a0a7e6', |
| | | '#c4ebad', |
| | | '#96dee8' |
| | | "#626c91", |
| | | "#a0a7e6", |
| | | "#c4ebad", |
| | | "#96dee8" |
| | | ], |
| | | // legend: { |
| | | // data: ["自招保安单位", "保安培训公司", "保安服务公司", "武装守押公司"], |
| | |
| | | // // } |
| | | // }, |
| | | grid: { |
| | | top: '5%', |
| | | top: "5%", |
| | | left: "5%", |
| | | right: "8%", |
| | | right: "10%", |
| | | bottom: "5%", |
| | | containLabel: true |
| | | }, |
| | |
| | | name: "自招保安单位", |
| | | type: "bar", |
| | | stack: "total", |
| | | barWidth: 20, |
| | | barWidth: 17, |
| | | emphasis: { |
| | | focus: "series" |
| | | }, |
| | |
| | | // borderColor: "gray", //设置边框颜色 |
| | | textStyle: { |
| | | color: "#fff" //设置文字颜色 |
| | | }, |
| | | } |
| | | }, |
| | | color: [ |
| | | "#3fb1e3", |
| | |
| | | "#9a60b4", |
| | | "#3fb1e3", |
| | | "#6be6c1", |
| | | '#626c91', |
| | | '#a0a7e6', |
| | | '#c4ebad', |
| | | '#96dee8' |
| | | "#626c91", |
| | | "#a0a7e6", |
| | | "#c4ebad", |
| | | "#96dee8" |
| | | ], |
| | | legend: { |
| | | data: ["持证人数", "未持证人数"], |
| | |
| | | } |
| | | }, |
| | | grid: { |
| | | top: '5%', |
| | | top: "10%", |
| | | left: "5%", |
| | | right: "6%", |
| | | bottom: "15%", |
| | | bottom: "4%", |
| | | containLabel: true |
| | | }, |
| | | xAxis: { |
| | | type: "category", |
| | | axisLabel: { |
| | | color: "#fff", |
| | | rotate: -80 |
| | | }, |
| | | data: nameArr |
| | | }, |
| | | yAxis: { |
| | | type: "value", |
| | | axisLabel: { |
| | | color: "#fff" |
| | |
| | | splitLine: { |
| | | show: false |
| | | } |
| | | }, |
| | | yAxis: { |
| | | type: "category", |
| | | axisLabel: { |
| | | color: "#fff" |
| | | }, |
| | | data: nameArr |
| | | }, |
| | | series: [ |
| | | { |
| | |
| | | |
| | | function left3Data(allData) { |
| | | let data = [ |
| | | { value: allData[0].mnum ? Number(allData[0].mnum) : 0, name: '男' }, |
| | | { value: allData[0].gnum ? Number(allData[0].gnum) : 0, name: '女' } |
| | | ] |
| | | { value: allData[0].mnum ? Number(allData[0].mnum) : 0, name: "男" }, |
| | | { value: allData[0].gnum ? Number(allData[0].gnum) : 0, name: "女" } |
| | | ]; |
| | | let option = { |
| | | tooltip: { |
| | | trigger: 'item', |
| | | trigger: "item", |
| | | formatter: "{a}<br>{b}:{c}({d}%)", |
| | | axisPointer: { |
| | | type: "shadow" |
| | |
| | | // borderColor: "gray", //设置边框颜色 |
| | | textStyle: { |
| | | color: "#fff" //设置文字颜色 |
| | | }, |
| | | } |
| | | }, |
| | | color: [ |
| | | '#008DEC', |
| | | '#886EFF', |
| | | ], |
| | | legend: { |
| | | right: "8%", |
| | | bottom: "10%", |
| | | itemHeight: 10, |
| | | show: true, |
| | | selectedMode: false, |
| | | textStyle: { |
| | | color: "#fff" |
| | | }, |
| | | data: ['男', '女'], |
| | | orient: "vertical" |
| | | color: ["#008DEC", "#886EFF"], |
| | | // legend: { |
| | | // right: "8%", |
| | | // bottom: "10%", |
| | | // itemHeight: 10, |
| | | // show: true, |
| | | // selectedMode: false, |
| | | // textStyle: { |
| | | // color: "#fff" |
| | | // }, |
| | | // data: ['男', '女'], |
| | | // orient: "vertical" |
| | | // }, |
| | | grid: { |
| | | top: "10%", |
| | | left: "5%", |
| | | right: "30%", |
| | | bottom: "4%", |
| | | containLabel: true |
| | | }, |
| | | series: [ |
| | | { |
| | | name: '性别比例', |
| | | type: 'pie', |
| | | center: ['43%', '50%'], |
| | | radius: '70%', |
| | | name: "性别比例", |
| | | type: "pie", |
| | | center: ["33%", "50%"], |
| | | radius: "70%", |
| | | data: data, |
| | | emphasis: { |
| | | itemStyle: { |
| | | shadowBlur: 10, |
| | | shadowOffsetX: 0, |
| | | shadowColor: 'rgba(0, 0, 0, 0.5)' |
| | | } |
| | | }, |
| | | label: { |
| | | color: "#fff" |
| | | } |
| | | } |
| | | ] |
| | | }; |
| | | return option |
| | | return option; |
| | | } |
| | | |
| | | function right1Data(allData) { |
| | |
| | | "#9a60b4", |
| | | "#3fb1e3", |
| | | "#6be6c1", |
| | | '#626c91', |
| | | '#a0a7e6', |
| | | '#c4ebad', |
| | | '#96dee8' |
| | | "#626c91", |
| | | "#a0a7e6", |
| | | "#c4ebad", |
| | | "#96dee8" |
| | | ], |
| | | |
| | | legend: { |
| | |
| | | "#9a60b4", |
| | | "#3fb1e3", |
| | | "#6be6c1", |
| | | '#626c91', |
| | | '#a0a7e6', |
| | | '#c4ebad', |
| | | '#96dee8' |
| | | "#626c91", |
| | | "#a0a7e6", |
| | | "#c4ebad", |
| | | "#96dee8" |
| | | ], |
| | | |
| | | legend: { |
| | |
| | | let data = []; |
| | | let legendData = []; |
| | | let datas = allData.sort((a, b) => { |
| | | return b.Count - a.Count |
| | | }) |
| | | return b.Count - a.Count; |
| | | }); |
| | | datas.forEach(item => { |
| | | let obj = { |
| | | name: item.jurname, |
| | | value: item.Count |
| | | } |
| | | legendData.push(item.jurname) |
| | | }; |
| | | legendData.push(item.jurname); |
| | | // sumValue += Number(item.Count) |
| | | data.push(obj) |
| | | }) |
| | | data.push(obj); |
| | | }); |
| | | // let arrName = getArrayValue(data, "name"); |
| | | // let arrValue = getArrayValue(data, "value"); |
| | | // let sumValue = 1000; |
| | |
| | | // borderColor: "gray", //设置边框颜色 |
| | | textStyle: { |
| | | color: "#fff" //设置文字颜色 |
| | | }, |
| | | } |
| | | }, |
| | | legend: { |
| | | right: "2%", |
| | | top: "10%", |
| | | right: "5%", |
| | | top: "5%", |
| | | itemHeight: 10, |
| | | show: true, |
| | | itemGap:8, |
| | | selectedMode: false, |
| | | textStyle: { |
| | | color: "#fff" |
| | | color: "#fff", |
| | | fontSize:11 |
| | | }, |
| | | data: legendData, |
| | | orient: "vertical" |
| | |
| | | "#9a60b4", |
| | | "#3fb1e3", |
| | | "#6be6c1", |
| | | '#626c91', |
| | | '#a0a7e6', |
| | | '#c4ebad', |
| | | '#96dee8' |
| | | "#626c91", |
| | | "#a0a7e6", |
| | | "#c4ebad", |
| | | "#96dee8" |
| | | ], |
| | | series: [ |
| | | { |
| | | name: '分局预警占比', |
| | | type: 'pie', |
| | | radius: '75%', |
| | | center: ['30%', '50%'], |
| | | roseType: 'radius', |
| | | name: "分局预警占比", |
| | | type: "pie", |
| | | radius: "75%", |
| | | center: ["35%", "55%"], |
| | | roseType: "radius", |
| | | itemStyle: { |
| | | borderRadius: 0 |
| | | }, |
| | |
| | | } |
| | | }, |
| | | data: data |
| | | }, |
| | | } |
| | | // { |
| | | // name: '面积模式', |
| | | // type: 'pie', |
| | |
| | | // } |
| | | // return res; |
| | | // }; |
| | | let name = ''; |
| | | let label = ''; |
| | | let symbolUrl = ''; |
| | | let geoData = [] |
| | | allData['table'].forEach((item, i) => { |
| | | let name = ""; |
| | | let label = ""; |
| | | let symbolUrl = ""; |
| | | let geoData = []; |
| | | allData["table"].forEach((item, i) => { |
| | | let obj = {}; |
| | | if (type === 1) { |
| | | name = '保安员名称'; |
| | | label = "押运人员:" + |
| | | name = "保安员名称"; |
| | | label = |
| | | "押运人员:" + |
| | | item.name + |
| | | "<br />当前位置:" + |
| | | item.location + |
| | |
| | | item.linkman + |
| | | "<br />联系电话:" + |
| | | item.tel; |
| | | symbolUrl = require('@/assets/img/people.png') |
| | | symbolUrl = require("@/assets/img/people.png"); |
| | | obj = { |
| | | name: label, |
| | | value: allData['geoData'][i] |
| | | } |
| | | value: allData["geoData"][i] |
| | | }; |
| | | } else if (type === 2) { |
| | | name = '押运车辆'; |
| | | name = "押运车辆"; |
| | | label = |
| | | "押运车辆车牌号:" + |
| | | item.carNum + |
| | |
| | | item.linkman + |
| | | "<br />联系电话:" + |
| | | item.tel; |
| | | symbolUrl = require('@/assets/img/car.png') |
| | | symbolUrl = require("@/assets/img/car.png"); |
| | | obj = { |
| | | name: label, |
| | | value: allData['geoData'][i], |
| | | } |
| | | value: allData["geoData"][i] |
| | | }; |
| | | } else if (type === 3) { |
| | | name = '枪支'; |
| | | label = "枪支编号:" + |
| | | name = "枪支"; |
| | | label = |
| | | "枪支编号:" + |
| | | item.number + |
| | | "<br />当前位置:" + |
| | | item.location + |
| | |
| | | item.linkman + |
| | | "<br />联系电话:" + |
| | | item.tel; |
| | | symbolUrl = require('@/assets/img/gun.png') |
| | | symbolUrl = require("@/assets/img/gun.png"); |
| | | obj = { |
| | | name: label, |
| | | value: allData['geoData'][i] |
| | | } |
| | | value: allData["geoData"][i] |
| | | }; |
| | | } |
| | | geoData.push(obj) |
| | | }) |
| | | geoData.push(obj); |
| | | }); |
| | | |
| | | |
| | | echarts.registerMap('ncMap', ncMap); |
| | | echarts.registerMap("ncMap", ncMap); |
| | | // echarts.registerMap('chinaMapOutline', chinaMapOutline); |
| | | let option = { |
| | | // backgroundColor: '#181F4E', |
| | |
| | | // trigger: 'item', |
| | | // }, |
| | | tooltip: { |
| | | trigger: 'item', |
| | | formatter: function (params) { |
| | | if (typeof (params.value)[1] == "undefined") { |
| | | trigger: "item", |
| | | formatter: function(params) { |
| | | if (typeof params.value[1] == "undefined") { |
| | | return params.name; |
| | | } else { |
| | | debugger |
| | | return params.name; |
| | | } |
| | | }, |
| | |
| | | color: "#fff", |
| | | borderWidth: "0", //边框宽度设置1 |
| | | borderColor: "gray", //设置边框颜色 |
| | | extraCssText: 'box-shadow: 0 0 3px rgba( 211,211,211, 0.5);', |
| | | extraCssText: "box-shadow: 0 0 3px rgba( 211,211,211, 0.5);", |
| | | textStyle: { |
| | | color: "#fff" //设置文字颜色 |
| | | }, |
| | | } |
| | | }, |
| | | geo: { |
| | | // silent: true, |
| | | map: 'ncMap', |
| | | map: "ncMap", |
| | | show: true, |
| | | zoom: 1.04, |
| | | top: '8%', |
| | | top: "8%", |
| | | label: { |
| | | show: false, |
| | | color: '#fff', |
| | | color: "#fff", |
| | | emphasis: { |
| | | textStyle: { |
| | | color: '#fff' |
| | | color: "#fff" |
| | | } |
| | | } |
| | | }, |
| | | |
| | | roam: true, |
| | | itemStyle: { |
| | | areaColor: 'rgba(0,255,255,.02)', |
| | | borderColor: '#00ffff', |
| | | areaColor: "rgba(0,255,255,.02)", |
| | | borderColor: "#00ffff", |
| | | borderWidth: 1.5, |
| | | shadowColor: '#00ffff', |
| | | shadowColor: "#00ffff", |
| | | shadowOffsetX: 0, |
| | | shadowOffsetY: 4, |
| | | shadowBlur: 10, |
| | | |
| | | shadowBlur: 10 |
| | | }, |
| | | emphasis: { |
| | | itemStyle: { |
| | | color: 'transparent', //悬浮背景 |
| | | color: "transparent", //悬浮背景 |
| | | textStyle: { |
| | | color: '#fff' |
| | | color: "#fff" |
| | | } |
| | | } |
| | | } |
| | | }, |
| | | series: [ |
| | | { |
| | | map: 'ncMap', |
| | | map: "ncMap", |
| | | // silent: true, |
| | | type: 'map', |
| | | type: "map", |
| | | geoIndex: 0, |
| | | // aspectScale: 0.75, //长宽比 |
| | | zoom: 1.14, |
| | | label: { |
| | | show: false, |
| | | color: '#fff' |
| | | color: "#fff" |
| | | }, |
| | | emphasis: { |
| | | label: { |
| | | color: '#fff' |
| | | color: "#fff" |
| | | } |
| | | }, |
| | | top: '10%', |
| | | top: "10%", |
| | | roam: true, |
| | | itemStyle: { |
| | | areaColor: 'rgba(0,255,255,.02)', |
| | | borderColor: '#00ffff', |
| | | areaColor: "rgba(0,255,255,.02)", |
| | | borderColor: "#00ffff", |
| | | borderWidth: 1.5, |
| | | shadowColor: '#00ffff', |
| | | shadowColor: "#00ffff", |
| | | shadowOffsetX: 0, |
| | | shadowOffsetY: 4, |
| | | shadowBlur: 10, |
| | | |
| | | shadowBlur: 10 |
| | | }, |
| | | emphasis: { |
| | | itemStyle: { |
| | | areaColor: 'transparent', //悬浮背景 |
| | | areaColor: "transparent", //悬浮背景 |
| | | textStyle: { |
| | | color: '#fff' |
| | | color: "#fff" |
| | | } |
| | | } |
| | | } |
| | | }, |
| | | { |
| | | name: name, |
| | | type: 'scatter', |
| | | coordinateSystem: 'geo', |
| | | type: "scatter", |
| | | coordinateSystem: "geo", |
| | | // roam: false, |
| | | symbol: 'image://' + symbolUrl, |
| | | symbol: "image://" + symbolUrl, |
| | | symbolSize: [30, 30], |
| | | label: { |
| | | show: false, |
| | | color: '#fff', |
| | | fontSize: 9, |
| | | color: "#fff", |
| | | fontSize: 9 |
| | | }, |
| | | itemStyle: { |
| | | color: '#FF0000', //标志颜色 |
| | | color: "#FF0000" //标志颜色 |
| | | }, |
| | | data: geoData, |
| | | showEffectOn: 'render', |
| | | showEffectOn: "render", |
| | | rippleEffect: { |
| | | brushType: 'stroke' |
| | | brushType: "stroke" |
| | | }, |
| | | hoverAnimation: true, |
| | | emphasis: { |
| | |
| | | zlevel: 1 |
| | | } |
| | | ] |
| | | } |
| | | return option |
| | | }; |
| | | return option; |
| | | } |
| | | export default { |
| | | left1Data, |
| | |
| | | function bottomOption(alldata) { |
| | | let data = []; |
| | | for (var i in alldata) { |
| | | data.push(alldata[i]) |
| | | data.push(alldata[i]); |
| | | } |
| | | let option = { |
| | | // title: { |
| | |
| | | // borderColor: "gray", //设置边框颜色 |
| | | textStyle: { |
| | | color: "#fff" //设置文字颜色 |
| | | }, |
| | | } |
| | | }, |
| | | xAxis: { |
| | | type: "category", |
| | |
| | | return option; |
| | | } |
| | | function bottomOption1(alldata) { |
| | | |
| | | let option = { |
| | | // title: { |
| | | // text: "公司运营趋势", |
| | |
| | | // borderColor: "gray", //设置边框颜色 |
| | | textStyle: { |
| | | color: "#fff" //设置文字颜色 |
| | | }, |
| | | } |
| | | }, |
| | | xAxis: { |
| | | type: "category", |
| | |
| | | series: [ |
| | | { |
| | | name: "趋势", |
| | | data: [10,20,14,15,16,17,24,15,3,7,11,23], |
| | | data: [10, 20, 14, 15, 16, 17, 24, 15, 3, 7, 11, 23], |
| | | type: "line", |
| | | smooth: true, |
| | | areaStyle: {} |
| | |
| | | alldata.forEach(item => { |
| | | for (var i in item) { |
| | | for (var j in item[i]) { |
| | | if (i === 'baoan') { |
| | | baoan.push(item[i][j]) |
| | | } else if (i === 'zc') { |
| | | zc.push(item[i][j]) |
| | | } |
| | | else if (i === 'chiz') { |
| | | chiz.push(item[i][j]) |
| | | } |
| | | else if (i === 'sheb') { |
| | | sheb.push(item[i][j]) |
| | | } |
| | | else if (i === 'paiq') { |
| | | paiq.push(item[i][j]) |
| | | if (i === "baoan") { |
| | | baoan.push(item[i][j]); |
| | | } else if (i === "zc") { |
| | | zc.push(item[i][j]); |
| | | } else if (i === "chiz") { |
| | | chiz.push(item[i][j]); |
| | | } else if (i === "sheb") { |
| | | sheb.push(item[i][j]); |
| | | } else if (i === "paiq") { |
| | | paiq.push(item[i][j]); |
| | | } |
| | | } |
| | | } |
| | | }) |
| | | }); |
| | | let option = { |
| | | // title: { |
| | | // text: "公司保安类数据对比", |
| | |
| | | // borderColor: "gray", //设置边框颜色 |
| | | textStyle: { |
| | | color: "#fff" //设置文字颜色 |
| | | }, |
| | | } |
| | | }, |
| | | legend: { |
| | | data: [ |
| | |
| | | function middleOption2(alldata) { |
| | | let data = []; |
| | | for (var i in alldata) { |
| | | data.push(alldata[i]) |
| | | data.push(alldata[i]); |
| | | } |
| | | let option = { |
| | | // title: { |
| | |
| | | // borderColor: "gray", //设置边框颜色 |
| | | textStyle: { |
| | | color: "#fff" //设置文字颜色 |
| | | }, |
| | | } |
| | | }, |
| | | legend: { |
| | | data: ["客户数"], |
| | |
| | | function economicMiddle(data) { |
| | | let data1 = []; |
| | | for (var a in data) { |
| | | data1.push(data[a]) |
| | | data1.push(data[a]); |
| | | } |
| | | let option = { |
| | | tooltip: { |
| | |
| | | // borderColor: "gray", //设置边框颜色 |
| | | textStyle: { |
| | | color: "#fff" //设置文字颜色 |
| | | }, |
| | | } |
| | | }, |
| | | legend: { |
| | | data: ["缴纳社保人数", "公司派遣人数"], |
| | |
| | | return option; |
| | | } |
| | | function economicPieOption(allData) { |
| | | |
| | | let title = "总"; |
| | | let total = Number(allData.PCount) + Number(allData.WPCount); |
| | | let option = { |
| | |
| | | // borderColor: "gray", //设置边框颜色 |
| | | textStyle: { |
| | | color: "#fff" //设置文字颜色 |
| | | }, |
| | | } |
| | | }, |
| | | legend: { |
| | | bottom: "0%", |
| | |
| | | name: "人员分布", |
| | | type: "pie", |
| | | radius: ["40%", "70%"], |
| | | label: { |
| | | color: "#fff" |
| | | }, |
| | | data: [ |
| | | { value: allData.PCount, name: "已派遣人数" }, |
| | | { value: allData.WPCount, name: "未派遣人" } |
| | |
| | | :permission="permissionList" |
| | | :before-open="beforeOpen" |
| | | @date-change="dateChange" |
| | | @row-click="handleRowClick" |
| | | @cell-click="handleRowClick" |
| | | :cell-style="cellStyle" |
| | | class="businessStatisticsStyle" |
| | | > |
| | | </avue-crud> |
| | | </basic-container> |
| | |
| | | company: "江西省永安保安服务有限公司", |
| | | subOffice: "南昌市公安局", |
| | | customer: "76", |
| | | num: "1124", |
| | | num: "1124" |
| | | }, |
| | | { |
| | | company: "南昌市赣水保安服务有限公司", |
| | | subOffice: "东湖分局", |
| | | customer: "85", |
| | | num: "1428", |
| | | num: "1428" |
| | | }, |
| | | { |
| | | company: "江西中业兴达保安服务有限公司", |
| | | subOffice: "西湖分局", |
| | | customer: "46", |
| | | num: "974", |
| | | }, |
| | | num: "974" |
| | | } |
| | | ], |
| | | tablePage: { |
| | | pageSize: 10, |
| | | currentPage: 1, |
| | | total: 0, |
| | | total: 0 |
| | | }, |
| | | tableOption: { |
| | | excelBtn: true, |
| | |
| | | prop: "company", |
| | | search: true, |
| | | searchSpan: 4, |
| | | display: false, |
| | | display: false |
| | | }, |
| | | |
| | | { |
| | |
| | | type: "select", |
| | | props: { |
| | | label: "label", |
| | | value: "value", |
| | | value: "value" |
| | | }, |
| | | // cascaderItem: ["city", "area"], |
| | | // dicUrl:subofficeOptions, |
| | | dicData: [ |
| | | { |
| | | value: "0", |
| | | label: "南昌市公安局", |
| | | label: "南昌市公安局" |
| | | }, |
| | | { |
| | | value: "2", |
| | | label: "东湖分局", |
| | | label: "东湖分局" |
| | | }, |
| | | { |
| | | value: "3", |
| | | label: "西湖分局", |
| | | label: "西湖分局" |
| | | }, |
| | | { |
| | | value: "4", |
| | | label: "青云谱分局", |
| | | label: "青云谱分局" |
| | | }, |
| | | { |
| | | value: "5", |
| | | label: "青山湖分局", |
| | | }, |
| | | label: "青山湖分局" |
| | | } |
| | | ], |
| | | search: true, |
| | | rules: [ |
| | | { |
| | | required: true, |
| | | message: "请选择所属辖区", |
| | | trigger: "blur", |
| | | }, |
| | | ], |
| | | trigger: "blur" |
| | | } |
| | | ] |
| | | }, |
| | | { |
| | | label: "服务对象数量", |
| | | prop: "customer", |
| | | display: false, |
| | | display: false |
| | | }, |
| | | { |
| | | label: "保安员人数", |
| | | prop: "num", |
| | | display: false, |
| | | }, |
| | | ], |
| | | }, |
| | | display: false |
| | | } |
| | | ] |
| | | } |
| | | }; |
| | | }, |
| | | computed: { |
| | |
| | | addBtn: this.vaildData(this.permission.post_add, false), |
| | | viewBtn: this.vaildData(this.permission.post_view, false), |
| | | delBtn: this.vaildData(this.permission.post_delete, false), |
| | | editBtn: this.vaildData(this.permission.post_edit, false), |
| | | editBtn: this.vaildData(this.permission.post_edit, false) |
| | | }; |
| | | }, |
| | | } |
| | | }, |
| | | methods: { |
| | | handleRowClick(row, event, column) { |
| | | this.$router.push({ path: "/statisticalQueryManagement/businessStatisticsDetail" }); |
| | | handleRowClick(row, column, cell, event) { |
| | | if (column.label == "服务对象数量" || column.label == "保安员人数") { |
| | | this.$router.push({ |
| | | path: "/statisticalQueryManagement/businessStatisticsDetail" |
| | | }); |
| | | } |
| | | }, |
| | | dateChange() {}, |
| | | cellStyle(row, column, rowIndex, columnIndex) { |
| | | // if (columnIndex == 4 || columnIndex == 5) { |
| | | // } |
| | | }, |
| | | dateChange() {} |
| | | // downExcel() { |
| | | // let et = XLSX.utils.table_to_book(document.getElementById("table")); |
| | | // let etout = XLSX.write(et, { |
| | |
| | | // return etout; |
| | | // } |
| | | }, |
| | | mounted() {}, |
| | | mounted() {} |
| | | }; |
| | | </script> |
| | | <style lang="scss" scoped> |
| | | /deep/ .businessStatisticsStyle .el-table__row:hover td:nth-child(5), |
| | | /deep/ .businessStatisticsStyle .el-table__row:hover td:nth-child(6) { |
| | | cursor: pointer; |
| | | } |
| | | </style> |
| | |
| | | :before-open="beforeOpen" |
| | | @date-change="dateChange" |
| | | @row-click="handleRowClick" |
| | | class="rowClick" |
| | | > |
| | | <template slot-scope="{ type, size }" slot="menu"> |
| | | <el-button icon="el-icon-check" :size="size" :type="type" |
| | |
| | | }, |
| | | }, |
| | | methods: { |
| | | toCompanyDetails() { |
| | | this.$router.push({ path: "/statisticalQueryManagement/companyDetails" }); |
| | | }, |
| | | // toCompanyDetails() { |
| | | // this.$router.push({ path: "/statisticalQueryManagement/companyDetails" }); |
| | | // }, |
| | | handleRowClick(row, event, column) { |
| | | this.$router.push({ path: "/statisticalQueryManagement/companyDetails" }); |
| | | }, |
| | |
| | | mounted() {}, |
| | | }; |
| | | </script> |
| | | <style lang="scss" scoped> |
| | | <style lang="scss" scoped> |
| | | /deep/ .rowClick .el-table__row:hover td{ |
| | | cursor: pointer; |
| | | } |
| | | </style> |