添加公交地图界面部分地图

master

2022-04-29 941f6f70206d33c3f507c092c32fc5647a240c37

添加公交地图界面部分地图

 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

@@ -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>