From 941f6f70206d33c3f507c092c32fc5647a240c37 Mon Sep 17 00:00:00 2001
From: master <master@163.com>
Date: 星期五, 29 四月 2022 16:14:51 +0800
Subject: [PATCH] 添加公交地图界面部分地图
---
src/views/map/zhandianinfo.vue | 1050 +++++++++++++++++++++++++++++++--------------------------
1 files changed, 571 insertions(+), 479 deletions(-)
diff --git a/src/views/map/zhandianinfo.vue b/src/views/map/zhandianinfo.vue
index 61eca2b..3a35b44 100644
--- a/src/views/map/zhandianinfo.vue
+++ b/src/views/map/zhandianinfo.vue
@@ -1,496 +1,588 @@
<template>
- <div class="v-views-map-zhandianinfo">
- <div class="header">
- <div class="in-top-box flex ju-sb align-c">
- <div class="flex">
- <div class="header-title-i">{{zdname}}</div>
- <div class="header-temp"></div>
- <div class="header-switch" v-show="$store.state.mapMenu ==='绔欑偣'">
- <el-switch class="switch" v-model="linenetwork" active-text="寮�" inactive-text="鍏�" active-color="#1890ff" inactive-color="#c0c0c0" @change="changline($event,linenetwork)"></el-switch>
- </div>
- </div>
- <div class="flex">
- <div class="flex align-c" @click="gozhandian()">
- <div class="small-p">鏌ョ湅璇︽儏</div>
- <img class="more-img-size" src="../../assets/png/icon_more@2x.png" alt="">
- </div>
- <div class="header-temp"></div>
- <div class="flex align-c">
- <img class="close-img-size" src="../../assets/map/icon_close_s@2x.png" alt="" @click="closediv">
- </div>
- </div>
- </div>
+ <div class="v-views-map-zhandianinfo">
+ <div class="header">
+ <div class="in-top-box flex ju-sb align-c">
+ <div class="flex">
+ <div class="header-title-i">{{zdname}}</div>
+ <div class="header-temp"></div>
+ <div class="header-switch"
+ v-show="$store.state.mapMenu ==='绔欑偣'">
+ <el-switch class="switch"
+ v-model="linenetwork"
+ active-text="寮�"
+ inactive-text="鍏�"
+ active-color="#1890ff"
+ inactive-color="#c0c0c0"
+ @change="changline($event,linenetwork)"></el-switch>
+ </div>
</div>
- <div class="container-info color-white ">
- <div class="flex warp mt20">
- <div class="flex item-info">
- <div class="flex" >
- <img class="img-size" src="../../assets/map/icon_shishikeliu.png" alt="">
- <div class="divtext">
- <div class="divnumber">{{typeof form.realTimePassengerFlow == "number" ? form.realTimePassengerFlow : '-'}}</div>
- <div>瀹炴椂瀹㈡祦(浜烘)</div>
- </div>
- </div>
-
- </div>
- <div class="flex item-info">
- <div class="flex" >
- <img class="img-size" src="../../assets/map/icon_zuorikeliu.png" alt="">
- <div class="divtext">
- <div class="divnumber">{{typeof form.yesterdayPassengerFlow == "number" ? form.yesterdayPassengerFlow : '-'}}</div>
- <div>鏄ㄦ棩瀹㈡祦(浜烘)</div>
- </div>
- </div>
-
- </div>
+ <div class="flex">
+ <div class="flex align-c"
+ @click="gozhandian()">
+ <div class="small-p">鏌ョ湅璇︽儏</div>
+ <img class="more-img-size"
+ src="../../assets/png/icon_more@2x.png"
+ alt="">
+ </div>
+ <div class="header-temp"></div>
+ <div class="flex align-c">
+ <img class="close-img-size"
+ src="../../assets/map/icon_close_s@2x.png"
+ alt=""
+ @click="closediv">
+ </div>
+ </div>
+ </div>
+ </div>
+ <div class="container-info color-white ">
+ <div class="flex warp mt20">
+ <div class="flex item-info">
+ <div class="flex">
+ <img class="img-size"
+ src="../../assets/map/icon_shishikeliu.png"
+ alt="">
+ <div class="divtext">
+ <div class="divnumber">{{typeof form.realTimePassengerFlow == "number" ? form.realTimePassengerFlow : '-'}}</div>
+ <div>瀹炴椂瀹㈡祦(浜烘)</div>
</div>
- <div class="flex warp mt30">
- <div class="flex item-info">
- <div class="flex" >
- <img class="img-size" src="../../assets/map/icon_xianlushuliang.png" alt="">
- <div class="divtext">
- <div class="divnumber">{{typeof form.sumLine == "number" ? form.sumLine : '-'}}</div>
- <div>绾胯矾鏁伴噺(鏉�)</div>
- </div>
- </div>
-
- </div>
- <div class="flex item-info">
- <div class="flex" >
- <img class="img-size" src="../../assets/map/icon_zhundianlv.png" alt="">
- <div class="divtext">
- <div class="divnumber _green">{{form.shiftNum || '-'}}</div>
- <div>閫斿緞鐝</div>
- </div>
- </div>
-
- </div>
- </div>
- <div class="zhuangshi">
- <div class="zhuangshitext">{{form.stationTypeName}}</div>
- <img class="zhuangshi-img-size" src="../../assets/map/shuangshi.png" alt="">
- </div>
+ </div>
</div>
- <div class="counttable" v-show="$store.state.mapMenu ==='绔欑偣' && talbestyle">
- <div class="navitem mt10 ml10">
- <!-- <div v-for="(item, index) in navitemlist" :key="index" class="navitemlist">
+ <div class="flex item-info">
+ <div class="flex">
+ <img class="img-size"
+ src="../../assets/map/icon_zuorikeliu.png"
+ alt="">
+ <div class="divtext">
+ <div class="divnumber">{{typeof form.yesterdayPassengerFlow == "number" ? form.yesterdayPassengerFlow : '-'}}</div>
+ <div>鏄ㄦ棩瀹㈡祦(浜烘)</div>
+ </div>
+ </div>
+
+ </div>
+ </div>
+ <div class="flex warp mt30">
+ <div class="flex item-info">
+ <div class="flex">
+ <img class="img-size"
+ src="../../assets/map/icon_xianlushuliang.png"
+ alt="">
+ <div class="divtext">
+ <div class="divnumber">{{typeof form.sumLine == "number" ? form.sumLine : '-'}}</div>
+ <div>绾胯矾鏁伴噺(鏉�)</div>
+ </div>
+ </div>
+
+ </div>
+ <div class="flex item-info">
+ <div class="flex">
+ <img class="img-size"
+ src="../../assets/map/icon_zhundianlv.png"
+ alt="">
+ <div class="divtext">
+ <div class="divnumber _green">{{form.shiftNum || '-'}}</div>
+ <div>閫斿緞鐝</div>
+ </div>
+ </div>
+
+ </div>
+ </div>
+ <div class="zhuangshi">
+ <div class="zhuangshitext">{{form.stationTypeName}}</div>
+ <img class="zhuangshi-img-size"
+ src="../../assets/map/shuangshi.png"
+ alt="">
+ </div>
+
+ </div>
+ <div class="counttable"
+ v-show="$store.state.mapMenu ==='绔欑偣' && talbestyle">
+ <div class="navitem mt10 ml10">
+ <!-- <div v-for="(item, index) in navitemlist" :key="index" class="navitemlist">
<div>{{item.name}}</div>
</div> -->
- 绾胯矾鏃舵瀹㈡祦琛�(浜�)
- </div>
- <div class="g-table navtable ml16 mr16">
- <el-table
- :data="tableData"
- :height="300"
- stripe
- v-loading="loading"
- header-row-class-name="table-header"
- highlight-current-row
- style="width: calc(100% - 32px)">
- <el-table-column
- prop="lineName"
- label="绾胯矾"
- width="80">
- <template slot="header">
- <div class="_table-header">
- <div class="__icon"></div>
- <div class="__title">鏃舵</div>
- <div>绾胯矾</div>
- </div>
- </template>
- </el-table-column>
- <el-table-column
- prop="passengerFlow_0_1"
- label="0-1鐐�"
- width="60">
- <template slot-scope="scope"><div class="_num">{{ formatter(scope.row.passengerFlow_0_1, 0) }}</div></template>
- </el-table-column>
- <el-table-column
- prop="passengerFlow_1_2"
- label="1-2鐐�"
- width="60">
- <template slot-scope="scope"><div class="_num">{{ formatter(scope.row.passengerFlow_1_2, 1) }}</div></template>
- </el-table-column>
- <el-table-column
- prop="passengerFlow_2_3"
- label="2-3鐐�"
- width="60">
- <template slot-scope="scope"><div class="_num">{{ formatter(scope.row.passengerFlow_2_3, 2) }}</div></template>
- </el-table-column>
- <el-table-column
- prop="passengerFlow_3_4"
- label="3-4鐐�"
- width="60">
- <template slot-scope="scope"><div class="_num">{{ formatter(scope.row.passengerFlow_3_4, 3) }}</div></template>
- </el-table-column>
- <el-table-column
- prop="passengerFlow_4_5"
- label="4-5鐐�"
- width="60">
- <template slot-scope="scope"><div class="_num">{{ formatter(scope.row.passengerFlow_4_5, 4) }}</div></template>
- </el-table-column>
- <el-table-column
- prop="passengerFlow_5_6"
- label="5-6鐐�"
- width="60">
- <template slot-scope="scope"><div class="_num">{{ formatter(scope.row.passengerFlow_5_6, 5) }}</div></template>
- </el-table-column>
- <el-table-column
- prop="passengerFlow_6_7"
- label="6-7鐐�"
- width="60">
- <template slot-scope="scope"><div class="_num">{{ formatter(scope.row.passengerFlow_6_7, 6) }}</div></template>
- </el-table-column>
- <el-table-column
- prop="passengerFlow_7_8"
- label="7-8鐐�"
- width="60">
- <template slot-scope="scope"><div class="_num">{{ formatter(scope.row.passengerFlow_7_8, 7) }}</div></template>
- </el-table-column>
- <el-table-column
- prop="passengerFlow_8_9"
- label="8-9鐐�"
- width="60">
- <template slot-scope="scope"><div class="_num">{{ formatter(scope.row.passengerFlow_8_9, 8) }}</div></template>
- </el-table-column>
- <el-table-column
- prop="passengerFlow_9_10"
- label="9-10鐐�"
- width="60">
- <template slot-scope="scope"><div class="_num">{{ formatter(scope.row.passengerFlow_9_10, 9) }}</div></template>
- </el-table-column>
- <el-table-column
- prop="passengerFlow_10_11"
- label="10-11鐐�"
- width="60">
- <template slot-scope="scope"><div class="_num">{{ formatter(scope.row.passengerFlow_10_11, 10)}}</div> </template>
- </el-table-column>
- <el-table-column
- prop="passengerFlow_11_12"
- label="11-12鐐�"
- width="60">
- <template slot-scope="scope"><div class="_num">{{ formatter(scope.row.passengerFlow_11_12, 11)}}</div> </template>
- </el-table-column>
- <el-table-column
- prop="passengerFlow_12_13"
- label="12-13鐐�"
- width="60">
- <template slot-scope="scope"><div class="_num">{{ formatter(scope.row.passengerFlow_12_13, 12)}}</div> </template>
- </el-table-column>
- <el-table-column
- prop="passengerFlow_13_14"
- label="13-14鐐�"
- width="60">
- <template slot-scope="scope"><div class="_num">{{ formatter(scope.row.passengerFlow_13_14, 13)}}</div> </template>
- </el-table-column>
- <el-table-column
- prop="passengerFlow_14_15"
- label="14-15鐐�"
- width="60">
- <template slot-scope="scope"><div class="_num">{{ formatter(scope.row.passengerFlow_14_15, 14)}}</div> </template>
- </el-table-column>
- <el-table-column
- prop="passengerFlow_15_16"
- label="15-16鐐�"
- width="60">
- <template slot-scope="scope"><div class="_num">{{ formatter(scope.row.passengerFlow_15_16, 15)}}</div> </template>
- </el-table-column>
- <el-table-column
- prop="passengerFlow_16_17"
- label="16-17鐐�"
- width="60">
- <template slot-scope="scope"><div class="_num">{{ formatter(scope.row.passengerFlow_16_17, 16)}}</div> </template>
- </el-table-column>
- <el-table-column
- prop="passengerFlow_17_18"
- label="17-18鐐�"
- width="60">
- <template slot-scope="scope"><div class="_num">{{ formatter(scope.row.passengerFlow_17_18, 17)}}</div> </template>
- </el-table-column>
- <el-table-column
- prop="passengerFlow_18_19"
- label="18-19鐐�"
- width="60">
- <template slot-scope="scope"><div class="_num">{{ formatter(scope.row.passengerFlow_18_19, 18)}}</div> </template>
- </el-table-column>
- <el-table-column
- prop="passengerFlow_19_20"
- label="19-20鐐�"
- width="60">
- <template slot-scope="scope"><div class="_num">{{ formatter(scope.row.passengerFlow_19_20, 19)}}</div> </template>
- </el-table-column>
- <el-table-column
- prop="passengerFlow_20_21"
- label="20-21鐐�"
- width="60">
- <template slot-scope="scope"><div class="_num">{{ formatter(scope.row.passengerFlow_20_21, 20)}}</div> </template>
- </el-table-column>
- <el-table-column
- prop="passengerFlow_21_22"
- label="21-22鐐�"
- width="60">
- <template slot-scope="scope"><div class="_num">{{ formatter(scope.row.passengerFlow_21_22, 21)}}</div> </template>
- </el-table-column>
- <el-table-column
- prop="passengerFlow_22_23"
- label="22-23鐐�"
- width="60">
- <template slot-scope="scope"><div class="_num">{{ formatter(scope.row.passengerFlow_22_23, 22)}}</div> </template>
- </el-table-column>
- <el-table-column
- prop="passengerFlow_23_24"
- label="23-24鐐�"
- width="60">
- <template slot-scope="scope"><div class="_num">{{ formatter(scope.row.passengerFlow_23_24, 23)}}</div> </template>
- </el-table-column>
- </el-table>
- </div>
- </div>
+ 绾胯矾鏃舵瀹㈡祦琛�(浜�)
+ </div>
+ <div class="g-table navtable ml16 mr16">
+ <el-table :data="tableData"
+ :height="300"
+ stripe
+ v-loading="loading"
+ header-row-class-name="table-header"
+ highlight-current-row
+ style="width: calc(100% - 32px)">
+ <el-table-column prop="lineName"
+ label="绾胯矾"
+ width="80">
+ <template slot="header">
+ <div class="_table-header">
+ <div class="__icon"></div>
+ <div class="__title">鏃舵</div>
+ <div>绾胯矾</div>
+ </div>
+ </template>
+ </el-table-column>
+ <el-table-column prop="passengerFlow_0_1"
+ label="0-1鐐�"
+ width="60">
+ <template slot-scope="scope">
+ <div class="_num">{{ formatter(scope.row.passengerFlow_0_1, 0) }}</div>
+ </template>
+ </el-table-column>
+ <el-table-column prop="passengerFlow_1_2"
+ label="1-2鐐�"
+ width="60">
+ <template slot-scope="scope">
+ <div class="_num">{{ formatter(scope.row.passengerFlow_1_2, 1) }}</div>
+ </template>
+ </el-table-column>
+ <el-table-column prop="passengerFlow_2_3"
+ label="2-3鐐�"
+ width="60">
+ <template slot-scope="scope">
+ <div class="_num">{{ formatter(scope.row.passengerFlow_2_3, 2) }}</div>
+ </template>
+ </el-table-column>
+ <el-table-column prop="passengerFlow_3_4"
+ label="3-4鐐�"
+ width="60">
+ <template slot-scope="scope">
+ <div class="_num">{{ formatter(scope.row.passengerFlow_3_4, 3) }}</div>
+ </template>
+ </el-table-column>
+ <el-table-column prop="passengerFlow_4_5"
+ label="4-5鐐�"
+ width="60">
+ <template slot-scope="scope">
+ <div class="_num">{{ formatter(scope.row.passengerFlow_4_5, 4) }}</div>
+ </template>
+ </el-table-column>
+ <el-table-column prop="passengerFlow_5_6"
+ label="5-6鐐�"
+ width="60">
+ <template slot-scope="scope">
+ <div class="_num">{{ formatter(scope.row.passengerFlow_5_6, 5) }}</div>
+ </template>
+ </el-table-column>
+ <el-table-column prop="passengerFlow_6_7"
+ label="6-7鐐�"
+ width="60">
+ <template slot-scope="scope">
+ <div class="_num">{{ formatter(scope.row.passengerFlow_6_7, 6) }}</div>
+ </template>
+ </el-table-column>
+ <el-table-column prop="passengerFlow_7_8"
+ label="7-8鐐�"
+ width="60">
+ <template slot-scope="scope">
+ <div class="_num">{{ formatter(scope.row.passengerFlow_7_8, 7) }}</div>
+ </template>
+ </el-table-column>
+ <el-table-column prop="passengerFlow_8_9"
+ label="8-9鐐�"
+ width="60">
+ <template slot-scope="scope">
+ <div class="_num">{{ formatter(scope.row.passengerFlow_8_9, 8) }}</div>
+ </template>
+ </el-table-column>
+ <el-table-column prop="passengerFlow_9_10"
+ label="9-10鐐�"
+ width="60">
+ <template slot-scope="scope">
+ <div class="_num">{{ formatter(scope.row.passengerFlow_9_10, 9) }}</div>
+ </template>
+ </el-table-column>
+ <el-table-column prop="passengerFlow_10_11"
+ label="10-11鐐�"
+ width="60">
+ <template slot-scope="scope">
+ <div class="_num">{{ formatter(scope.row.passengerFlow_10_11, 10)}}</div>
+ </template>
+ </el-table-column>
+ <el-table-column prop="passengerFlow_11_12"
+ label="11-12鐐�"
+ width="60">
+ <template slot-scope="scope">
+ <div class="_num">{{ formatter(scope.row.passengerFlow_11_12, 11)}}</div>
+ </template>
+ </el-table-column>
+ <el-table-column prop="passengerFlow_12_13"
+ label="12-13鐐�"
+ width="60">
+ <template slot-scope="scope">
+ <div class="_num">{{ formatter(scope.row.passengerFlow_12_13, 12)}}</div>
+ </template>
+ </el-table-column>
+ <el-table-column prop="passengerFlow_13_14"
+ label="13-14鐐�"
+ width="60">
+ <template slot-scope="scope">
+ <div class="_num">{{ formatter(scope.row.passengerFlow_13_14, 13)}}</div>
+ </template>
+ </el-table-column>
+ <el-table-column prop="passengerFlow_14_15"
+ label="14-15鐐�"
+ width="60">
+ <template slot-scope="scope">
+ <div class="_num">{{ formatter(scope.row.passengerFlow_14_15, 14)}}</div>
+ </template>
+ </el-table-column>
+ <el-table-column prop="passengerFlow_15_16"
+ label="15-16鐐�"
+ width="60">
+ <template slot-scope="scope">
+ <div class="_num">{{ formatter(scope.row.passengerFlow_15_16, 15)}}</div>
+ </template>
+ </el-table-column>
+ <el-table-column prop="passengerFlow_16_17"
+ label="16-17鐐�"
+ width="60">
+ <template slot-scope="scope">
+ <div class="_num">{{ formatter(scope.row.passengerFlow_16_17, 16)}}</div>
+ </template>
+ </el-table-column>
+ <el-table-column prop="passengerFlow_17_18"
+ label="17-18鐐�"
+ width="60">
+ <template slot-scope="scope">
+ <div class="_num">{{ formatter(scope.row.passengerFlow_17_18, 17)}}</div>
+ </template>
+ </el-table-column>
+ <el-table-column prop="passengerFlow_18_19"
+ label="18-19鐐�"
+ width="60">
+ <template slot-scope="scope">
+ <div class="_num">{{ formatter(scope.row.passengerFlow_18_19, 18)}}</div>
+ </template>
+ </el-table-column>
+ <el-table-column prop="passengerFlow_19_20"
+ label="19-20鐐�"
+ width="60">
+ <template slot-scope="scope">
+ <div class="_num">{{ formatter(scope.row.passengerFlow_19_20, 19)}}</div>
+ </template>
+ </el-table-column>
+ <el-table-column prop="passengerFlow_20_21"
+ label="20-21鐐�"
+ width="60">
+ <template slot-scope="scope">
+ <div class="_num">{{ formatter(scope.row.passengerFlow_20_21, 20)}}</div>
+ </template>
+ </el-table-column>
+ <el-table-column prop="passengerFlow_21_22"
+ label="21-22鐐�"
+ width="60">
+ <template slot-scope="scope">
+ <div class="_num">{{ formatter(scope.row.passengerFlow_21_22, 21)}}</div>
+ </template>
+ </el-table-column>
+ <el-table-column prop="passengerFlow_22_23"
+ label="22-23鐐�"
+ width="60">
+ <template slot-scope="scope">
+ <div class="_num">{{ formatter(scope.row.passengerFlow_22_23, 22)}}</div>
+ </template>
+ </el-table-column>
+ <el-table-column prop="passengerFlow_23_24"
+ label="23-24鐐�"
+ width="60">
+ <template slot-scope="scope">
+ <div class="_num">{{ formatter(scope.row.passengerFlow_23_24, 23)}}</div>
+ </template>
+ </el-table-column>
+ </el-table>
+ </div>
</div>
+ </div>
</template>
<script>
- import gauge1 from '../../components/echart/gauge1.vue'
- import { message } from 'ant-design-vue'
- import utils from "../../unit/map";
- export default {
- name: 'zhandianinfo',
- props: {
- data1: {
- type:Object,
- default(){
- return{}
- }
- }
- },
- data() {
- return {
- show:false,
- zdname: "",
- zdid: "",
- loading: false,
- linenetwork: false,
- talbestyle: false,
- form: {
- "stationName": "澶忔咕璺腑",
- "stationTypeName": "涓�旂珯",
- "realTimePassengerFlow": null,
- "yesterdayPassengerFlow": null,
- "sumLine": 1,
- "headEndLeaveOnTimeRate": null
- },
- navitemlist: [],
- lindids: '',
- tableData: []
- }
- },
- components:{
- gauge1
- },
-
- methods: {
- getSelectDetailByName(params,id) {
- let lineID = ''
- if(this.$store.state.mapMenu == "绾胯矾"){
- lineID = this.$store.state.lineName
- }
- this.$axios.get(this.$Interface.mapResource.getZhandianDetailById, {
- params: { stationId: id, lineId: lineID },
- }).then((res) => {
- if(res.code == 0) {
- this.navitemlist = []
- if(res.data){
- this.form = res.data;
- if(res.data.passLine && res.data.passLineIds){
- let name = res.data.passLine.split(",")
- let ids = res.data.passLineIds.split(",")
- this.lindids = res.data.passLineIds
- let names = res.data.passLine
- for(let index = 0; index<ids.length;index++){
- this.navitemlist.push({"id":ids[index],"name":name[index]})
- }
- this.getKeliuAllDetailByStationName(names, id)
- }
- } else {
- message.warning('鑾峰彇鏁版嵁涓虹┖!')
- }
- } else {
- message.warning('鎮ㄥ綋鍓嶇綉缁滀笉绋冲畾,鏈幏鍙栧埌鏁版嵁!')
- }
- });
- },
- getKeliuAllDetailByStationName(lineids, id){
- this.$axios.get(this.$Interface.mapResource.getListStationLinePassengerFlow, {
- params: { passLine: lineids, stationId: id },
- }).then((res) => {
- if(res.code == 0) {
- if(res.data){
- // this.tableData = res.data;
- // this.tableData = this.navitemlist.map((item, index) => {
- // console.log(item, 'i', index);
-
- // return {
- // lineName: item.name,
- // ...res.data[index]
- // }
- // }) ;
- this.tableData = res.data;
- // console.log( this.tableData, ' this.tableData');
-
- } else {
- message.warning('鑾峰彇鏁版嵁涓虹┖!')
- }
- } else {
- message.warning('鎮ㄥ綋鍓嶇綉缁滀笉绋冲畾,鏈幏鍙栧埌鏁版嵁!')
- }
- });
- },
- changline(row){
- utils.loadLineNetworkByName(this.zdid,this.zdname,row)
- this.talbestyle = true
- },
- initstate(){
- this.linenetwork = false
- },
- closediv(){
- this.talbestyle = false
- this.$emit("closediv","zhandian")
- },
- gozhandian(){
- this.$router.push({ path: '/branchOfficeResource', query: { sence: 5, siteName: this.zdname }})
- }
- },
- mounted() {
- // this.initstate()
- },
- watch: {
- "$store.state.selAttr": function(newVal,oldVal){
- if(newVal.visa && newVal.type == "zhandian"){
- this.zdname = newVal.value
- this.zdid = newVal.id
- this.getSelectDetailByName(newVal.value,newVal.id)
- // this.initstate()
- }
- }
-
+import gauge1 from '../../components/echart/gauge1.vue'
+import { message } from 'ant-design-vue'
+import utils from "../../unit/map";
+export default {
+ name: 'zhandianinfo',
+ props: {
+ data1: {
+ type: Object,
+ default () {
+ return {}
+ }
}
+ },
+ data () {
+ return {
+ show: false,
+ zdname: "",
+ zdid: "",
+ loading: false,
+ linenetwork: false,
+ talbestyle: false,
+ form: {
+ "stationName": "澶忔咕璺腑",
+ "stationTypeName": "涓�旂珯",
+ "realTimePassengerFlow": null,
+ "yesterdayPassengerFlow": null,
+ "sumLine": 1,
+ "headEndLeaveOnTimeRate": null
+ },
+ navitemlist: [],
+ lindids: '',
+ tableData: []
+ }
+ },
+ components: {
+ gauge1
+ },
+
+ methods: {
+ getSelectDetailByName (params, id) {
+ let lineID = ''
+ if (this.$store.state.mapMenu == "绾胯矾") {
+ lineID = this.$store.state.lineName
+ }
+ this.$axios.get(this.$Interface.mapResource.getZhandianDetailById, {
+ params: { stationId: id, lineId: lineID },
+ }).then((res) => {
+ if (res.code == 0) {
+ this.navitemlist = []
+ if (res.data) {
+ this.form = res.data;
+ if (res.data.passLine && res.data.passLineIds) {
+ let name = res.data.passLine.split(",")
+ let ids = res.data.passLineIds.split(",")
+ this.lindids = res.data.passLineIds
+ let names = res.data.passLine
+ for (let index = 0; index < ids.length; index++) {
+ this.navitemlist.push({ "id": ids[index], "name": name[index] })
+ }
+ this.getKeliuAllDetailByStationName(names, id)
+ }
+ } else {
+ message.warning('鑾峰彇鏁版嵁涓虹┖!')
+ }
+ } else {
+ message.warning('鎮ㄥ綋鍓嶇綉缁滀笉绋冲畾,鏈幏鍙栧埌鏁版嵁!')
+ }
+ });
+ },
+ getKeliuAllDetailByStationName (lineids, id) {
+ this.$axios.get(this.$Interface.mapResource.getListStationLinePassengerFlow, {
+ params: { passLine: lineids, stationId: id },
+ }).then((res) => {
+ if (res.code == 0) {
+ if (res.data) {
+ // this.tableData = res.data;
+ // this.tableData = this.navitemlist.map((item, index) => {
+ // console.log(item, 'i', index);
+
+ // return {
+ // lineName: item.name,
+ // ...res.data[index]
+ // }
+ // }) ;
+ this.tableData = res.data;
+ // console.log( this.tableData, ' this.tableData');
+
+ } else {
+ message.warning('鑾峰彇鏁版嵁涓虹┖!')
+ }
+ } else {
+ message.warning('鎮ㄥ綋鍓嶇綉缁滀笉绋冲畾,鏈幏鍙栧埌鏁版嵁!')
+ }
+ });
+ },
+ changline (row) {
+ console.log("eee")
+ // utils.loadLineNetworkByName(this.zdid,this.zdname,row)
+ this.talbestyle = true
+ },
+ initstate () {
+ this.linenetwork = false
+ },
+ closediv () {
+ this.talbestyle = false
+ this.$emit("closediv", "zhandian")
+ },
+ gozhandian () {
+ this.$router.push({ path: '/branchOfficeResource', query: { sence: 5, siteName: this.zdname } })
+ }
+ },
+ mounted () {
+ // this.initstate()
+ },
+ watch: {
+ "$store.state.selAttr": function (newVal, oldVal) {
+ if (newVal.visa && newVal.type == "zhandian") {
+ this.zdname = newVal.value
+ this.zdid = newVal.id
+ this.getSelectDetailByName(newVal.value, newVal.id)
+ // this.initstate()
+ }
+ }
+
+ }
}
</script>
<style lang="less">
- .v-views-map-zhandianinfo {
- width: 536px;
- height: 229px;
- opacity: 0.8;
- background: linear-gradient(180deg,#06203f, #08141c);
- border: 2px solid #2a488a;
- .el-table tr {
- background: #0289B2!important;
- height: 30px;
- }
- .g-table .table-header th {
- height: 30px !important;
- line-height: 16px;
- }
- .el-table .el-table__cell {
- padding: 0;
-
- }
- ._num {
- color: #FFFFFF;
- font-family: 'Digital';
- font-size: 18px;
-
- }
- .header{width:100%;height:44px;background:url("../../assets/png/header_bg_info.png") no-repeat center/cover;}
- .in-top-box{width:90%;height:34px; margin:0 auto;}
- .header-title-i{color:#333;font-weight: 600;font-size:16px;}
- .small-p{color:#00f09b;font-size:14px;}
- .more-img-size{width:12px;height:12px}
- .divtext {padding-left: 10px; text-align: left;}
- .divnumber {font-family:'Digital';font-size: 22px;color:#69CCFF}
- ._green {
- color: #00FFB5
- }
- .container-info{width:460px;margin:15px auto 0;}
- .item-info{width:40%;text-align: center;position:relative}
- .img-size{width:48px;height:48px;}
- .line-fg{height: 1px;opacity: 0.4;border: 1px solid #2a4a8e;}
- .title-b{position: absolute;bottom:0;left:0;right:0;margin:0 auto;font-size:12px;}
- .zhuangshi {position:absolute;right:2px;top:107px;}
- .zhuangshitext {
- position:absolute;bottom:22px;right:23px;transform: rotate(-45deg);
- font-family: 'PingFangSC';
- text-shadow: 0px 0px 20px #ffcc00;
- font-size: 16px;
- font-weight: 500;
- }
- .counttable {
- width: 100%;
- display: flex;
- flex-direction: column;
- top: 50px;
- position: relative;
- opacity: 0.8;
- background: linear-gradient(180deg,#06203f, #08141c);
- border: 2px solid #2a488a;
- .navitem{
- display: flex;
- color: #08141c;
- padding-left: 10px;
- height: 30px;
- width: 100%;
- color: #333;
- font-weight: 600;
- font-size: 15px;
- line-height: 30px;
- // background: linear-gradient(90deg,rgba(255,255,255,1), rgba(255,255,255,0.1));
- color: #B7EAFF;
- font-family: 'PingFangSC';
- .navitemlist {
- padding-left:10px;
- line-height: 30px;
-
-
- }
- }
- .navtable {
- width: 100%;
- padding-top: 5px;
- }
-
-
- }
- .switch .el-switch__label {
- position: absolute;
- display: none;
- }
-
- .el-switch__core {
- width: 45px !important;
- border: 1px solid rgb(112 114 116) !important;
- }
- .switch .el-switch__label--right {
- z-index: 1;
- }
- /*鏄剧ず鏂囧瓧*/
- .switch .el-switch__label.is-active {
- display: block;
- }
- .switch .el-switch__label--right span{
- padding-right: 9px;
- color:#fff;
- font-weight: 600;
- }
- .switch .el-switch__label--left {
- z-index: 1;
- }
- .switch .el-switch__label--left span{
- padding-left: 25px;
- color:#fff;
- font-weight: 600;
- }
-
+.v-views-map-zhandianinfo {
+ width: 536px;
+ height: 229px;
+ opacity: 0.8;
+ background: linear-gradient(180deg, #06203f, #08141c);
+ border: 2px solid #2a488a;
+ .el-table tr {
+ background: #0289b2 !important;
+ height: 30px;
+ }
+ .g-table .table-header th {
+ height: 30px !important;
+ line-height: 16px;
+ }
+ .el-table .el-table__cell {
+ padding: 0;
+ }
+ ._num {
+ color: #ffffff;
+ font-family: "Digital";
+ font-size: 18px;
+ }
+ .header {
+ width: 100%;
+ height: 44px;
+ background: url("../../assets/png/header_bg_info.png") no-repeat
+ center/cover;
+ }
+ .in-top-box {
+ width: 90%;
+ height: 34px;
+ margin: 0 auto;
+ }
+ .header-title-i {
+ color: #333;
+ font-weight: 600;
+ font-size: 16px;
+ }
+ .small-p {
+ color: #00f09b;
+ font-size: 14px;
+ }
+ .more-img-size {
+ width: 12px;
+ height: 12px;
+ }
+ .divtext {
+ padding-left: 10px;
+ text-align: left;
+ }
+ .divnumber {
+ font-family: "Digital";
+ font-size: 22px;
+ color: #69ccff;
+ }
+ ._green {
+ color: #00ffb5;
+ }
+ .container-info {
+ width: 460px;
+ margin: 15px auto 0;
+ }
+ .item-info {
+ width: 40%;
+ text-align: center;
+ position: relative;
+ }
+ .img-size {
+ width: 48px;
+ height: 48px;
+ }
+ .line-fg {
+ height: 1px;
+ opacity: 0.4;
+ border: 1px solid #2a4a8e;
+ }
+ .title-b {
+ position: absolute;
+ bottom: 0;
+ left: 0;
+ right: 0;
+ margin: 0 auto;
+ font-size: 12px;
+ }
+ .zhuangshi {
+ position: absolute;
+ right: 2px;
+ top: 107px;
+ }
+ .zhuangshitext {
+ position: absolute;
+ bottom: 22px;
+ right: 23px;
+ transform: rotate(-45deg);
+ font-family: "PingFangSC";
+ text-shadow: 0px 0px 20px #ffcc00;
+ font-size: 16px;
+ font-weight: 500;
+ }
+ .counttable {
+ width: 100%;
+ display: flex;
+ flex-direction: column;
+ top: 50px;
+ position: relative;
+ opacity: 0.8;
+ background: linear-gradient(180deg, #06203f, #08141c);
+ border: 2px solid #2a488a;
+ .navitem {
+ display: flex;
+ color: #08141c;
+ padding-left: 10px;
+ height: 30px;
+ width: 100%;
+ color: #333;
+ font-weight: 600;
+ font-size: 15px;
+ line-height: 30px;
+ // background: linear-gradient(90deg,rgba(255,255,255,1), rgba(255,255,255,0.1));
+ color: #b7eaff;
+ font-family: "PingFangSC";
+ .navitemlist {
+ padding-left: 10px;
+ line-height: 30px;
+ }
}
-
+ .navtable {
+ width: 100%;
+ padding-top: 5px;
+ }
+ }
+ .switch .el-switch__label {
+ position: absolute;
+ display: none;
+ }
+ .el-switch__core {
+ width: 45px !important;
+ border: 1px solid rgb(112 114 116) !important;
+ }
+ .switch .el-switch__label--right {
+ z-index: 1;
+ }
+ /*鏄剧ず鏂囧瓧*/
+ .switch .el-switch__label.is-active {
+ display: block;
+ }
+ .switch .el-switch__label--right span {
+ padding-right: 9px;
+ color: #fff;
+ font-weight: 600;
+ }
+ .switch .el-switch__label--left {
+ z-index: 1;
+ }
+ .switch .el-switch__label--left span {
+ padding-left: 25px;
+ color: #fff;
+ font-weight: 600;
+ }
+}
</style>
--
Gitblit v1.9.1