拖旺项目:聊城公交辅助决策系统
master
2022-04-29 941f6f70206d33c3f507c092c32fc5647a240c37
添加公交地图界面部分地图
2个文件已修改
450 ■■■■■ 已修改文件
src/views/map/map.vue 122 ●●●●● 补丁 | 查看 | 原始文档 | blame | 历史
src/views/map/zhandianinfo.vue 328 ●●●●● 补丁 | 查看 | 原始文档 | blame | 历史
src/views/map/map.vue
@@ -123,6 +123,7 @@
import img_zhandian_s_url from "../../assets/mapv2/icon_zhandian_s.png";
import img_cheliang_s_url from "../../assets/mapv2/icon_cheliang_s.png";
import img_cheliang_ss_url from "../../assets/mapv2/icon_cheliang_ss.png";
// import bus_model from '../../assets/model/bus3.gltf'
import img_bg_s_url from '../../assets/mapv2/bg_s.png';
import fgsmarkers from '../../assets/json/fgsmarkers.json';
import czmarkers from '../../assets/json/czmarkers.json';
@@ -272,6 +273,9 @@
      if (window.drawTool) { window.drawTool.disable(); }
      switch (type) {
        case 0:
          window.marsmap._layerCache.zhandian_layer && window.marsmap._layerCache.zhandian_layer.remove()
           window.marsmap._layerCache.changzhan_layer && window.marsmap._layerCache.changzhan_layer.remove()
           window.marsmap._layerCache.cheliang_layer && window.marsmap._layerCache.cheliang_layer.remove()
          this.initfgsLayer();
          this.isActivatetool = false
          this.isActivatetoolcl = false
@@ -282,6 +286,9 @@
          this.bar[type].text_div = false;
          break;
        case 1:
           window.marsmap._layerCache.zhandian_layer && window.marsmap._layerCache.zhandian_layer.remove()
           window.marsmap._layerCache.fengongsi_layer && window.marsmap._layerCache.fengongsi_layer.remove()
           window.marsmap._layerCache.cheliang_layer && window.marsmap._layerCache.cheliang_layer.remove()
          this.initczLayer();
          this.$store.commit("SET_MapMenu", "场站")
          this.$store.commit("SET_SelAttr", { visa: false })
@@ -302,6 +309,9 @@
          this.initxlLayer();
          break;
        case 3:
          window.marsmap._layerCache.fengongsi_layer && window.marsmap._layerCache.fengongsi_layer.remove()
          window.marsmap._layerCache.changzhan_layer && window.marsmap._layerCache.changzhan_layer.remove()
          window.marsmap._layerCache.cheliang_layer && window.marsmap._layerCache.cheliang_layer.remove()
          this.initzdLayer();
          this.isActivatetool = false
          this.isActivatetoolcl = false
@@ -313,6 +323,9 @@
          this.bar[type].text_div = false;
          break;
        case 4:
          window.marsmap._layerCache.fengongsi_layer && window.marsmap._layerCache.fengongsi_layer.remove()
          window.marsmap._layerCache.changzhan_layer && window.marsmap._layerCache.changzhan_layer.remove()
          window.marsmap._layerCache.zhandian_layer && window.marsmap._layerCache.zhandian_layer.remove()
          this.initclLayer();
          this.isActivatetool = false
          this.isActivatetoolcl = true
@@ -500,9 +513,11 @@
    hideAllLayer () {
      utils.hideAllLayer();
    },
    // 分公司按钮
    initfgsLayer () {
      let that = this
      //utils.initfgsLayer();
      const fengongsi_layer = new this.mars3d.layer.GraphicLayer({ id: 'fengongsi_layer' })
      // 2.在layer上绑定监听事件
      fengongsi_layer.on(this.mars3d.EventType.click, function (event) {
@@ -515,7 +530,6 @@
      const fengongsi_area_layer = new this.mars3d.layer.GraphicLayer({ id: 'fengongsi_area_layer' })
      window.marsmap.addLayer(fengongsi_layer)
      window.marsmap.addLayer(fengongsi_area_layer)
      this.$axios.get(this.$Interface.mapResource.getFenGongSiAll, {}).then((res) => {
        if (res.code === 0) {
          console.log(res.data);
@@ -541,19 +555,15 @@
        }
      });
    },
    // 站点按钮
    initzdLayer () {
      // let datas = []
      // this.$axios.get(this.$Interface.mapResource.getZhandianDataAll, {}).then((res) => {
      //   console.log(res, "站点接口")
      // })
      let that = this
      //utils.initfgsLayer();
      const zhandian_layer = new this.mars3d.layer.GraphicLayer({ id: 'zhandian_layer' })
      // 2.在layer上绑定监听事件
      zhandian_layer.on(this.mars3d.EventType.click, function (event) {
        console.log('监听layer,单击了矢量对象', event)
        console.log(event.graphic.attr)
        store.commit("SET_SelAttr", { visa: true, type: "zhandian", id: event.graphic.attr.id, value: event.graphic.attr.name })
        that.$store.commit("SET_SelAttr", { visa: true, type: "zhandian", id: event.graphic.attr.stationId, value: event.graphic.attr.stationName })
        event.graphic.flyTo({ radius: 2000, duration: 1 })
      })
@@ -565,13 +575,12 @@
        if (res.code === 0) {
          console.log(res.data);
          for (let i = 0; i < res.data.length; i++) {
            const graphic = new this.mars3d.graphic.DivGraphic({
              position: [res.data[i].longitude, res.data[i].latitude, 1000],
            let positionses = [res.data[i].longitude, res.data[i].latitude, 0]
            const graphic = new this.mars3d.graphic.BillboardPrimitive({
              position: positionses,
              style: {
                html: `<div class="marsBlueGradientPnl"><div>` + res.data[i].companyName + `</div></div>`,
                offsetY: -60,
                horizontalOrigin: Cesium.HorizontalOrigin.CENTER,
                verticalOrigin: Cesium.VerticalOrigin.BOTTOM,
                image: img_zhandian_m_url,
                scale: 0.3,
                distanceDisplayCondition: new Cesium.DistanceDisplayCondition(0, 400000), // 按视距距离显示
                // 高亮时的样式
                highlight: {
@@ -586,19 +595,94 @@
        }
      });
    },
    // 场站图层
    initczLayer () {
      let datas = []
      this.$axios.get(this.$Interface.mapResource.getChangZhanAllData, {}).then((res) => {
        console.log(res, "场站接口")
      let that = this
      const changzhan_layer = new this.mars3d.layer.GraphicLayer({ id: 'changzhan_layer' })
      // 2.在layer上绑定监听事件
      changzhan_layer.on(this.mars3d.EventType.click, function (event) {
        console.log('监听layer,单击了矢量对象', event)
        console.log(event.graphic.attr)
        that.$store.commit("SET_SelAttr", { visa: true, type: "changzhan", id: event.graphic.attr.stationId, value: event.graphic.attr.stationName })
        event.graphic.flyTo({ radius: 2000, duration: 1 })
      })
      const changzhan_area_layer = new this.mars3d.layer.GraphicLayer({ id: 'changzhan_area_layer' })
      window.marsmap.addLayer(changzhan_layer)
      window.marsmap.addLayer(changzhan_area_layer)
      this.$axios.get(this.$Interface.mapResource.getChangZhanAllData, {}).then((res) => {
        console.log(res,"changzhan")
        if (res.code === 0) {
          console.log(res.data);
          for (let i = 0; i < res.data.length; i++) {
            let positionses = [res.data[i].longitude, res.data[i].latitude, 0]
            const graphic = new this.mars3d.graphic.BillboardPrimitive({
              position: positionses,
              style: {
                image: img_zhandian_m_url,
                scale: 0.3,
                distanceDisplayCondition: new Cesium.DistanceDisplayCondition(0, 400000), // 按视距距离显示
                // 高亮时的样式
                highlight: {
                  type: this.mars3d.EventType.click,
                  className: "marsBlueGradientPnl-highlight"
                }
              },
              attr: res.data[i]
            })
            changzhan_layer.addGraphic(graphic)
          }
        }
      });
    },
    initxlLayer () {
      // utils.loadGeometryById("411", "1");
      console.log("eee")
    },
    // 车辆图层
    initclLayer () {
      // utils.initcheliangLayer();
      console.log("eeeeeeee")
      let that = this
      const cheliang_layer = new this.mars3d.layer.GraphicLayer({ id: 'cheliang_layer' })
      // 2.在layer上绑定监听事件
      cheliang_layer.on(this.mars3d.EventType.click, function (event) {
        console.log('监听layer,单击了矢量对象', event)
        console.log(event.graphic.attr)
        that.$store.commit("SET_SelAttr", { visa: true, type: "cheliang", id: event.graphic.attr.stationId, value: event.graphic.attr.stationName })
        event.graphic.flyTo({ radius: 2000, duration: 1 })
      })
      const cheliang_area_layer = new this.mars3d.layer.GraphicLayer({ id: 'cheliang_area_layer' })
      window.marsmap.addLayer(cheliang_layer)
      window.marsmap.addLayer(cheliang_area_layer)
      this.$axios.get(this.$Interface.mapResource.getChangZhanAllData, {}).then((res) => {
        console.log(res,"cheliang")
        if (res.code === 0) {
          console.log(res.data);
          for (let i = 0; i < res.data.length; i++) {
            let positionses = [res.data[i].longitude, res.data[i].latitude, 0]
            const graphic = new this.mars3d.graphic.ModelEntity({
              position: positionses,
              style: {
                url: "//data.mars3d.cn/gltf/mars/car/bus3.gltf",
                scale: 0.1,
                minimumPixelSize: 20,
                distanceDisplayCondition: new Cesium.DistanceDisplayCondition(0, 400000), // 按视距距离显示
                // 高亮时的样式
                highlight: {
                  type: this.mars3d.EventType.click,
                  className: "marsBlueGradientPnl-highlight"
                }
              },
              attr: res.data[i]
            })
            cheliang_layer.addGraphic(graphic)
          }
        }
      });
    },
    closediv (str) {
      if (str === "zhandian") {
src/views/map/zhandianinfo.vue
@@ -5,18 +5,31 @@
                <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>
@@ -25,7 +38,9 @@
            <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>
@@ -35,7 +50,9 @@
                </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>
@@ -47,7 +64,9 @@
            <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>
@@ -57,7 +76,9 @@
                </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>
@@ -68,11 +89,14 @@
            </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>
@@ -80,16 +104,14 @@
                线路时段客流表(人)
            </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">
@@ -100,149 +122,173 @@
                            </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>
@@ -346,7 +392,8 @@
                });
            },
            changline(row){
                utils.loadLineNetworkByName(this.zdid,this.zdname,row)
      console.log("eee")
      // utils.loadLineNetworkByName(this.zdid,this.zdname,row)
                this.talbestyle = true
            },
            initstate(){
@@ -384,7 +431,7 @@
        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 {
@@ -393,33 +440,85 @@
        }
        .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;
@@ -444,21 +543,17 @@
                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;
@@ -489,8 +584,5 @@
            color:#fff;
            font-weight: 600;
        }
    }
</style>