| | |
| | | <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 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="flex align-c" |
| | | @click="gozhandian()"> |
| | | <div class="small-p">查看详情</div> |
| | | <img class="more-img-size" src="../../assets/png/icon_more@2x.png" alt=""> |
| | | <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"> |
| | | <img class="close-img-size" |
| | | src="../../assets/map/icon_close_s@2x.png" |
| | | alt="" |
| | | @click="closediv"> |
| | | </div> |
| | | </div> |
| | | </div> |
| | |
| | | <div class="flex warp mt20"> |
| | | <div class="flex item-info"> |
| | | <div class="flex" > |
| | | <img class="img-size" src="../../assets/map/icon_shishikeliu.png" alt=""> |
| | | <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 item-info"> |
| | | <div class="flex" > |
| | | <img class="img-size" src="../../assets/map/icon_zuorikeliu.png" alt=""> |
| | | <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 class="flex warp mt30"> |
| | | <div class="flex item-info"> |
| | | <div class="flex" > |
| | | <img class="img-size" src="../../assets/map/icon_xianlushuliang.png" alt=""> |
| | | <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 class="flex item-info"> |
| | | <div class="flex" > |
| | | <img class="img-size" src="../../assets/map/icon_zhundianlv.png" alt=""> |
| | | <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 class="zhuangshi"> |
| | | <div class="zhuangshitext">{{form.stationTypeName}}</div> |
| | | <img class="zhuangshi-img-size" src="../../assets/map/shuangshi.png" alt=""> |
| | | <img class="zhuangshi-img-size" |
| | | src="../../assets/map/shuangshi.png" |
| | | alt=""> |
| | | </div> |
| | | |
| | | </div> |
| | | <div class="counttable" v-show="$store.state.mapMenu ==='站点' && talbestyle"> |
| | | <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 class="g-table navtable ml16 mr16"> |
| | | <el-table |
| | | :data="tableData" |
| | | <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" |
| | | <el-table-column prop="lineName" |
| | | label="线路" |
| | | width="80"> |
| | | <template slot="header"> |
| | |
| | | </div> |
| | | </template> |
| | | </el-table-column> |
| | | <el-table-column |
| | | prop="passengerFlow_0_1" |
| | | <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> |
| | | <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" |
| | | <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> |
| | | <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" |
| | | <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> |
| | | <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" |
| | | <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> |
| | | <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" |
| | | <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> |
| | | <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" |
| | | <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> |
| | | <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" |
| | | <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> |
| | | <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" |
| | | <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> |
| | | <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" |
| | | <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> |
| | | <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" |
| | | <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> |
| | | <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" |
| | | <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> |
| | | <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" |
| | | <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> |
| | | <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" |
| | | <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> |
| | | <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" |
| | | <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> |
| | | <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" |
| | | <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> |
| | | <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" |
| | | <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> |
| | | <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" |
| | | <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> |
| | | <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" |
| | | <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> |
| | | <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" |
| | | <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> |
| | | <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" |
| | | <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> |
| | | <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" |
| | | <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> |
| | | <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" |
| | | <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> |
| | | <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" |
| | | <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> |
| | | <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" |
| | | <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> |
| | | <template slot-scope="scope"> |
| | | <div class="_num">{{ formatter(scope.row.passengerFlow_23_24, 23)}}</div> |
| | | </template> |
| | | </el-table-column> |
| | | </el-table> |
| | | </div> |
| | |
| | | }); |
| | | }, |
| | | changline(row){ |
| | | utils.loadLineNetworkByName(this.zdid,this.zdname,row) |
| | | console.log("eee") |
| | | // utils.loadLineNetworkByName(this.zdid,this.zdname,row) |
| | | this.talbestyle = true |
| | | }, |
| | | initstate(){ |
| | |
| | | background: linear-gradient(180deg,#06203f, #08141c); |
| | | border: 2px solid #2a488a; |
| | | .el-table tr { |
| | | background: #0289B2!important; |
| | | background: #0289b2 !important; |
| | | height: 30px; |
| | | } |
| | | .g-table .table-header th { |
| | |
| | | } |
| | | .el-table .el-table__cell { |
| | | padding: 0; |
| | | |
| | | } |
| | | ._num { |
| | | color: #FFFFFF; |
| | | font-family: 'Digital'; |
| | | 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} |
| | | .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 |
| | | 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;} |
| | | .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'; |
| | | position: absolute; |
| | | bottom: 22px; |
| | | right: 23px; |
| | | transform: rotate(-45deg); |
| | | font-family: "PingFangSC"; |
| | | text-shadow: 0px 0px 20px #ffcc00; |
| | | font-size: 16px; |
| | | font-weight: 500; |
| | |
| | | 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'; |
| | | color: #b7eaff; |
| | | font-family: "PingFangSC"; |
| | | .navitemlist { |
| | | padding-left:10px; |
| | | line-height: 30px; |
| | | |
| | | |
| | | } |
| | | } |
| | | .navtable { |
| | | width: 100%; |
| | | padding-top: 5px; |
| | | } |
| | | |
| | | |
| | | } |
| | | .switch .el-switch__label { |
| | | position: absolute; |
| | |
| | | color:#fff; |
| | | font-weight: 600; |
| | | } |
| | | |
| | | } |
| | | |
| | | |
| | | </style> |