细节

徐旺旺

2021-01-14 bf3323fcbe32918dda7099f05be56aa7151b1e26

细节

 src/assets/images/map-pages/icon/panel/gd.png

 src/assets/images/map-pages/icon/panel/hb.png

 src/assets/images/map-pages/icon/panel/pk.png

 src/assets/images/map-pages/icon/tab_item.png

 src/components/panel/DischargeSearch.vue

New file
@@ -0,0 +1,170 @@
<template>
  <div>
    <el-card class="search-panel">
      <el-form ref="form" :model="form" label-width="90px" class="search-form">
        <el-form-item label="查询类型：">
          <el-select v-model="form.pipelineType" @change="handlePipelineType">
            <el-option
                v-for="item in pipelineTypeOptions"
                :key="item.value"
                :label="item.label"
                :value="item.value">
            </el-option>
          </el-select>
        </el-form-item>
        <el-form-item label="模糊搜索：">
          <el-input v-model="form.key" size="mini"
                    placeholder="在此输入关键字"></el-input>
        </el-form-item>
        <el-form-item>
          <input type="button" class="btn-ok" @click="handleSearch" value="查询">
          <input type="button" class="btn-reset" @click="handleSearch" value="重置">
        </el-form-item>
      </el-form>
    </el-card>
    <el-card class="search-result" style="height:271px;">
      <div class="B-TMD-table-list" v-for="(item,index) in list" :key="index">
        <div class="B-TMD-table-list-title">
          <div class="B-TMD-table-list-head">
            <div class="B-TMD-table-list-title-y"
                 :class="['B-TMD-table-list-title-y-nam', { 'warning': item.vehicleStatus==='910003' }, { 'offline': item.vehicleStatus==='910001' }]">
              <span>运单号：</span>
              <span id="waybillNumber" class="B-TMD-table-list-title-y-num"
                    :title="item.transNo">
                                                <span class="B-TMD-table-list-title-y-alarm">{{ item.transNo }}</span>
                                            </span>
            </div>
            <div class="B-TMD-table-list-title-c">
              载具号：
              <span id="plateNumber_p">
                                                <span id="plateNumber_n"><a href="#">{{ item.vehicleNo }}</a></span>
                                            </span>
            </div>
          </div>
          <div class="B-TMD-table-icons" style="float:right">
            <ul>
              <li class="B-TMD-table-list-title-y-adress"
                  @click="handleLocation(item)"></li>
              <li :class="[{'B-TMD-table-list-title-y-car': item.vehicleStatus ==='910002', 'B-TMD-table-list-title-y-car-offline': item.vehicleStatus ==='910001','B-TMD-table-list-title-y-car-warning': item.vehicleStatus==='910003' }]"></li>
            </ul>
          </div>
        </div>
        <div class="B-TMD-table-list-content">
          <div>
            <span>发货企业：</span>
            <span id="b_twe_consignment" :title="item.outWarehouseName">{{
                item.outWarehouseName == null ? "暂无" : item.outWarehouseName
              }}</span>
          </div>
          <div>
            <span>承&nbsp;&nbsp;运&nbsp;&nbsp;商：</span>
            <span id="b_twe_loan" :title="item.carrierName">{{ item.carrierName }}</span>
          </div>
          <div><span>收货企业：</span> <span
              id="b_twe_loan1" :title="item.recvWarehouseName">{{ item.recvWarehouseName }}</span></div>
        </div>
        <div class="B-TMD-table-list-bottom">
          <div class="B-TMD-table-list-bottom-name">
            货物名称：<span :title="item.materialName">{{ item.materialName }}</span></div>
        </div>
      </div>
    </el-card>

    <el-card class="footer-page" v-if="total > 10">
      <el-pagination
          small
          @current-change="handlePage"
          :page-size=pageSize
          layout="prev, pager, next"
          :total=total
          :current-page=current
          class="warnPagination"
      >
      </el-pagination>
    </el-card>
  </div>
</template>

<script>
export default {
  name: 'MonitorAreaTips',
  components: {},
  data () {
    return {
      isPanelVisible: false,
      total: 0,
      list: [],
      form: {
        name: '',
        region: '',
        date1: '',
        date2: '',
        delivery: false,
        type: [],
        resource: '',
        desc: ''
      }
    }
  },
  methods: {
    handleClose (done) {
      console.log(done)
    },
    handleClick (tab, event) {
      console.log(tab, event)
    },
    handleSearch () {

    }
  },
  mounted () {
    this.handleSearch()
  }
}
</script>

<style lang="less">
.monitorHz {
  .el-message-box__content {
    background-color: #030D2E;
  }

  .search-form .el-form-item {
    margin: 0px;
  }

  .search-form .el-icon-search {
    display: grid;
    line-height: 30px;
    font-size: 18px;
  }

  .search-panel {
    border: #07325B;
    background-color: #07325B;
  }

  .search-result {
    margin: 5px 0px 0px 0px;
    padding: 0px;
    border: #051842;
    overflow-y: scroll;
    background-color: #051842;
  }

  .B-TMD-table-list {
    margin-top: 10px;
    text-align: left;
    padding-left: 10px;
    color: #328EB5;
    width: 100%;
    line-height: 25px;
    background-color: #0B3B6D;
  }

  .footer-page {
    position: absolute;
    bottom: 5px;
  }
}
</style>

 src/components/panel/EnvProtectSearch.vue

New file
@@ -0,0 +1,180 @@
<template>
  <div>
    <el-card class="search-panel">
      <el-form ref="form" :model="form" label-width="90px" class="search-form">
        <el-form-item label="类型：">
          <el-select v-model="form.pipelineType" @change="handlePipelineType">
            <el-option
                v-for="item in pipelineTypeOptions"
                :key="item.value"
                :label="item.label"
                :value="item.value">
            </el-option>
          </el-select>
        </el-form-item>
        <el-form-item label="数据类型：">
          <el-select v-model="form.dataType">
            <el-option
                v-for="item in dataTypeOptions"
                :key="item.value"
                :label="item.label"
                :value="item.value">
            </el-option>
          </el-select>
        </el-form-item>
        <el-form-item label="模糊搜索：">
          <el-input v-model="form.key" size="mini"
                    placeholder="在此输入关键字"></el-input>
        </el-form-item>
        <el-form-item>
          <input type="button" class="btn-ok" @click="handleSearch" value="查询">
          <input type="button" class="btn-reset" @click="handleSearch" value="重置">
        </el-form-item>
      </el-form>
    </el-card>
    <el-card class="search-result" style="height:271px;">
      <div class="B-TMD-table-list" v-for="(item,index) in list" :key="index">
        <div class="B-TMD-table-list-title">
          <div class="B-TMD-table-list-head">
            <div class="B-TMD-table-list-title-y"
                 :class="['B-TMD-table-list-title-y-nam', { 'warning': item.vehicleStatus==='910003' }, { 'offline': item.vehicleStatus==='910001' }]">
              <span>运单号：</span>
              <span id="waybillNumber" class="B-TMD-table-list-title-y-num"
                    :title="item.transNo">
                                                <span class="B-TMD-table-list-title-y-alarm">{{ item.transNo }}</span>
                                            </span>
            </div>
            <div class="B-TMD-table-list-title-c">
              载具号：
              <span id="plateNumber_p">
                                                <span id="plateNumber_n"><a href="#">{{ item.vehicleNo }}</a></span>
                                            </span>
            </div>
          </div>
          <div class="B-TMD-table-icons" style="float:right">
            <ul>
              <li class="B-TMD-table-list-title-y-adress"
                  @click="handleLocation(item)"></li>
              <li :class="[{'B-TMD-table-list-title-y-car': item.vehicleStatus ==='910002', 'B-TMD-table-list-title-y-car-offline': item.vehicleStatus ==='910001','B-TMD-table-list-title-y-car-warning': item.vehicleStatus==='910003' }]"></li>
            </ul>
          </div>
        </div>
        <div class="B-TMD-table-list-content">
          <div>
            <span>发货企业：</span>
            <span id="b_twe_consignment" :title="item.outWarehouseName">{{
                item.outWarehouseName == null ? "暂无" : item.outWarehouseName
              }}</span>
          </div>
          <div>
            <span>承&nbsp;&nbsp;运&nbsp;&nbsp;商：</span>
            <span id="b_twe_loan" :title="item.carrierName">{{ item.carrierName }}</span>
          </div>
          <div><span>收货企业：</span> <span
              id="b_twe_loan1" :title="item.recvWarehouseName">{{ item.recvWarehouseName }}</span></div>
        </div>
        <div class="B-TMD-table-list-bottom">
          <div class="B-TMD-table-list-bottom-name">
            货物名称：<span :title="item.materialName">{{ item.materialName }}</span></div>
        </div>
      </div>
    </el-card>

    <el-card class="footer-page" v-if="total > 10">
      <el-pagination
          small
          @current-change="handlePage"
          :page-size=pageSize
          layout="prev, pager, next"
          :total=total
          :current-page=current
          class="warnPagination"
      >
      </el-pagination>
    </el-card>
  </div>
</template>

<script>
export default {
  name: 'MonitorAreaTips',
  components: {},
  data () {
    return {
      isPanelVisible: false,
      total: 0,
      list: [],
      form: {
        name: '',
        region: '',
        date1: '',
        date2: '',
        delivery: false,
        type: [],
        resource: '',
        desc: ''
      }
    }
  },
  methods: {
    handleClose (done) {
      console.log(done)
    },
    handleClick (tab, event) {
      console.log(tab, event)
    },
    handleSearch () {

    }
  },
  mounted () {
    this.handleSearch()
  }
}
</script>

<style lang="less">
.monitorHz {
  .el-message-box__content {
    background-color: #030D2E;
  }

  .search-form .el-form-item {
    margin: 0px;
  }

  .search-form .el-icon-search {
    display: grid;
    line-height: 30px;
    font-size: 18px;
  }

  .search-panel {
    border: #07325B;
    background-color: #07325B;
  }

  .search-result {
    margin: 5px 0px 0px 0px;
    padding: 0px;
    border: #051842;
    overflow-y: scroll;
    background-color: #051842;
  }

  .B-TMD-table-list {
    margin-top: 10px;
    text-align: left;
    padding-left: 10px;
    color: #328EB5;
    width: 100%;
    line-height: 25px;
    background-color: #0B3B6D;
  }

  .footer-page {
    position: absolute;
    bottom: 5px;
  }
}
</style>

 src/components/panel/MonitorHZ.vue

File was deleted

 src/components/panel/RightSearchPanel.vue

File was renamed from src/components/panel/MonitorPanel.vue
@@ -1,31 +1,22 @@
<template>
  <div id="right-panel">
    <div class="panel-tab">
      <ul>
        <li id="test" @click="toggleMonitorPanel">
          <div class="btn-stretch"></div>
        </li>
        <li class="B-TMT-tab-div" @click="showHZ">
          <div class="B-TMT-tab-waybill" :class="{'B-TMT-tab-waybill-isActive': isWaybillHover}"></div>
        </li>
        <li class="B-TMT-tab-div:hover" @click="showWayBill">
          <div class="B-TMT-tab-route" :class="{'B-TMT-tab-route-isActive': isRouteHover}"></div>
        </li>
      </ul>
      <div class="btn-stretch" @click="toggleMonitorPanel"></div>
      <div class="tab-gd" @click="handleGd" :class="{'B-TMT-tab-waybill-isActive': isWaybillHover}"></div>
      <div class="tab-hb" @click="handleHb" :class="{'B-TMT-tab-route-isActive': isRouteHover}"></div>
      <div class="tab-pk" @click="handlePk" :class="{'B-TMT-tab-route-isActive': isRouteHover}"></div>
    </div>
    <div class="right-control">
      <div class="el-message-box__header panel_header">
        <div class="el-message-box__title panel_title"><!----><span>管线信息查询</span>
          <div class="panel_searchTotal">共<span style="color: #f5c228;margin:0 5px">{{ total }}</span>条记录
          </div>
        <div class="el-message-box__title panel_title"><!----><span>{{ title }}</span>
        </div>
      </div>
      <div class="el-message-box__content" style="padding:6px;font-size: 13px;">
        <div class="monitor1" v-if="wayBillVisible">
        <div class="monitor1" v-if="gdVisible">
          <div>
            <el-card class="search-panel">
              <el-form ref="form" :model="form" label-width="90px" class="search-form">
                <el-form-item label="管线类型：">
                <el-form-item label="类型：">
                  <el-select v-model="form.pipelineType" @change="handlePipelineType">
                    <el-option
                        v-for="item in pipelineTypeOptions"
@@ -50,8 +41,8 @@
                            placeholder="在此输入关键字"></el-input>
                </el-form-item>
                <el-form-item>
                  <input type="button" class="btn-ok" @click="handleSearch" value="查询">
                  <input type="button" class="btn-reset" @click="handleSearch" value="重置">
                  <input type="button" class="btn-ok" @click="handleSearch" value="确定">
                </el-form-item>
              </el-form>
            </el-card>
@@ -117,8 +108,11 @@
            </el-card>
          </div>
        </div>
        <div class="monitor2" v-if="hzVisible">
          <monitor-h-z></monitor-h-z>
        <div class="monitor2" v-if="hbVisible">
          <env-protect-search></env-protect-search>
        </div>
        <div class="monitor2" v-if="pkVisible">
          <discharge-search></discharge-search>
        </div>
      </div>
    </div>
@@ -127,21 +121,21 @@

<script>
import $ from 'jquery'
import MonitorHZ from './MonitorHZ'
import mapApi from '@/api/mapApi'
import { mapState } from 'vuex'
import EnvProtectSearch from './EnvProtectSearch'
import DischargeSearch from './DischargeSearch'

export default {
  name: 'MonitorPanel',
  components: { MonitorHZ },
  components: { EnvProtectSearch, DischargeSearch },
  data () {
    return {
      isPanelVisible: false,
      wayBillVisible: true,
      hzVisible: false,
      gdVisible: true,
      hbVisible: false,
      pkVisible: false,
      toggleMonitorStyle: 'right:0px',
      list: [],
      total: 0,
      title: '管道信息查询',
      pipelineTypeOptions: [{
        value: '1',
        label: '管线本体'
@@ -212,53 +206,8 @@
      isRouteHover: false
    }
  },
  computed: {
    ...mapState({
      currentCorpType: state => state.currentCorpType,
      currentCorp: state => state.currentCorp
    }),
    layerHelper () {
      return this.$store.layerHelper
    }
  },
  watch: {
    currentCorpType: async function (val) {
      const params = {
        transNo: '',
        carrierName: '',
        transMode: '',
        vehicleNo: '',
        orderState: '',
        vehicleStatus: '',
        orgCode: this.currentCorp,
        ownerSectorCode: val,
        size: 10,
        current: 1
      }
      const datas = await this.handleGetDatas(params)
      console.log(datas)
      // this.list = datas.data.records
      // this.total = datas.data.total
    },
    currentCorp: async function (val) {
      const params = {
        transNo: '',
        carrierName: '',
        transMode: '',
        vehicleNo: '',
        orderState: '',
        vehicleStatus: '',
        orgCode: val,
        ownerSectorCode: this.currentCorpType,
        size: 10,
        current: 1
      }
      const datas = await this.handleGetDatas(params)
      console.log(datas)
      // this.list = datas.data.records
      // this.total = datas.data.total
    }
  },
  computed: {},
  watch: {},
  methods: {
    handleClose (done) {
      console.log(done)
@@ -271,27 +220,25 @@
        this.dataTypeOptions = this.pipelineOptions
      }
    },
    async handlePage (page) {
      console.log(page)
      const params = {
        transNo: '',
        carrierName: '',
        transMode: '',
        vehicleNo: '',
        orderState: '',
        vehicleStatus: '',
        orgCode: this.currentCorp,
        ownerSectorCode: this.currentCorpType,
        size: this.pageSize,
        current: page
      }
      const datas = await this.handleGetDatas(params)
      console.log(datas)
      // this.list = datas.data.records
      // this.total = datas.data.total
    handlePage (page) {
    },
    handleLocation (item) {
      window.vectorLayerHelper.vectorLayerMap.cheliang.showGeometryByXY(item.transNo, item.vehicleNo, item.lng, item.lat)
    handleGd () {
      this.gdVisible = true
      this.hbVisible = false
      this.pkVisible = false
      this.title = '管道信息查询'
    },
    handleHb () {
      this.gdVisible = false
      this.hbVisible = true
      this.pkVisible = false
      this.title = '环保设施查询'
    },
    handlePk () {
      this.gdVisible = false
      this.hbVisible = false
      this.pkVisible = true
      this.title = '排口信息查询'
    },
    toggleMonitorPanel () {
      const el = $('.btn-stretch')
@@ -317,91 +264,16 @@
          transition: 'transform 1s linear'
        })
      }
    },
    async handleSearch () {
      // this.list = wayBillData.data
      // this.total = wayBillData.data.length
      const params = {
        transNo: this.form.transNo,
        carrierName: this.form.carrierName,
        transMode: this.form.transMode,
        vehicleNo: this.form.vehicleNo,
        orderState: this.form.orderState,
        vehicleStatus: '',
        orgCode: this.orgCodeStrings,
        size: this.pageSize,
        current: this.current
      }
      const datas = await this.handleGetDatas(params)
      console.log(datas)
      // this.list = datas.data.pager.records
      // this.total = datas.data.pager.total
    },
    async handleInit () {
      // this.list = wayBillData.data
      // this.total = wayBillData.data.length
      const params = {
        transNo: '',
        carrierName: '',
        transMode: '',
        vehicleNo: '',
        orderState: '',
        vehicleStatus: '',
        orgCode: this.currentCorp,
        ownerSectorCode: this.currentCorpType,
        size: 10,
        current: 1
      }
      const datas = await this.handleGetDatas(params)
      console.log(datas)
      // this.list = datas.data.records
      // this.total = datas.data.total
    },
    async handleSetOrgCodeStrings () {
      const orgCodes = await this.handleGetOrgCode()
      let orgCodesString = ''
      for (let i = 0; i < orgCodes.data.length; i++) {
        const org = orgCodes.data[i]
        orgCodesString += org.orgCode + ','
      }
      this.orgCodeStrings = orgCodesString.substring(0, orgCodesString.length - 1)
    },
    async handleGetOrgCode () {
      const params = {
        orgSector: this.currentCorpType,
        serviceType: ''
      }
      const datas = await mapApi.getOrganizationompanyList(params)
      return datas
    },
    async handleGetDatas (params) {
      // let datas = await mapApi.getTransOrderlist(params)

      const datas = params
      return datas
    },
    showHZ () {
      this.wayBillVisible = true
      this.hzVisible = false
      this.isWaybillHover = true
      this.isRouteHover = false
    },
    showWayBill () {
      this.hzVisible = true
      this.wayBillVisible = false
      this.isWaybillHover = false
      this.isRouteHover = true
    }
  },
  mounted () {
    this.handleInit()
  }
}
</script>

<style lang="less">
#right-panel {
  width: 323px;
  width: 322px;
  height: 573px;
  position: absolute;
  right: 10px;
@@ -468,21 +340,19 @@
  }

  .btn-ok {
    float: right;
    margin-right: 10px;
    width: 4rem;
    background-color: lightblue;
    background-color: #0B89B5;
    color: white;
    border: 1px solid white;
    border: 0;
  }

  .btn-reset {
    float: right;
    margin-right: 10px;
    width: 4rem;
    background-color: orange;
    color: white;
    border: 1px solid white;
    border: 0;
  }

  .component-fade-enter-active, .component-fade-leave-active {
@@ -520,40 +390,8 @@
    white-space: nowrap;
  }

  .B-TMD-table-list-title-y-adress {
    width: 16px;
    height: 22px;
    display: block;
    background: url('../../assets/images/map-pages/icon/icon.png') no-repeat 0 -90px;
    cursor: pointer;
  }

  .B-TMD-table-list-title-y-car {
    background: url('../../assets/images/map-pages/icon/icon.png') no-repeat -45px 0;
    width: 38px;
    height: 38px;
    display: block;
    margin-top: 2px !important;
  }

  .B-TMD-table-list-title-y-car-offline {
    background: url('../../assets/images/map-pages/icon/icon.png') no-repeat -90px 0;
    width: 38px;
    height: 38px;
    display: block;
    margin-top: 2px !important;
  }

  .B-TMD-table-list-title-y-car-warning {
    background: url('../../assets/images/map-pages/icon/icon.png') no-repeat 0 0;
    width: 38px;
    height: 38px;
    display: block;
    margin-top: 2px !important;
  }

  .btn-stretch {
    width: 20px;
    width: 15px;
    height: 28px;
    background: url('../../assets/images/map-pages/icon/icon.png') no-repeat -408px 0;
    margin-left: 10px;
@@ -565,8 +403,22 @@
    transition: transform 1s linear;
  }

  .btn-stretch-active {
    background: url('../../assets/images/map-pages/icon/icon.png') no-repeat -440px 0;
  .tab-gd {
    width: 32px;
    height: 30px;
    background-color: #0B3B6D;
  }

  .tab-hb {
    width: 32px;
    height: 30px;
    background-color: #545454;
  }

  .tab-pk {
    width: 32px;
    height: 30px;
    background-color: #83a6c4;
  }

  .panel-tab {
@@ -574,63 +426,9 @@
    left: 0;
    height: 120px;
    top: 0;
    width: 40px;
    width: 32px;
    z-index: 500;
    background-color: #030D2E;
    background: url('../../assets/images/map-pages/icon/caidan.png') no-repeat;
  }

  .B-TMT-tab-div {
    width: 29px;
    height: 29px;
    margin-left: 3px;
    margin-top: 10px;
    cursor: pointer;

    :hover {
      cursor: pointer;
      // background: url("");
    }
  }

  .B-TMT-tab-waybill {
    width: 29px !important;
    height: 29px !important;
    margin-top: 0 !important;
    margin-left: 0 !important;
    background: url('../../assets/images/map-pages/icon/icon.png') no-repeat -320px 0;
  }

  .B-TMT-tab-route {
    width: 20px;
    height: 19px;
    margin-left: 5px;
    margin-top: 6px;
    background: url('../../assets/images/map-pages/icon/icon.png') no-repeat -169px 0;
  }

  .B-TMT-tab-waybill-isActive, .B-TMT-tab-waybill:hover {
    width: 29px !important;
    height: 29px !important;
    margin-top: 0 !important;
    margin-left: -1px !important;
    background: url('../../assets/images/map-pages/icon/icon.png') no-repeat -361px 0 !important;
  }

  .B-TMT-tab-route-isActive, .B-TMT-tab-route:hover {
    width: 32px !important;
    height: 29px !important;
    margin-top: 0 !important;
    margin-left: -1px !important;
    background: url('../../assets/images/map-pages/icon/icon.png') no-repeat -197px 0 !important;
  }

  .panel-tab ul {
    list-style: none;
  }

  .panel-tab ul li {
    height: 30px;
  }

  .right-control {
@@ -690,7 +488,7 @@
    color: #569ee1;
  }

  input::-moz-input-placeholder {
  input::-moz-placeholder {
    color: #569ee1;
  }

@@ -735,7 +533,7 @@
    position: absolute;
    bottom: 8px;
    right: 16px;
    background: url('/assets/images/map-pages/icon/icon.png') no-repeat -481px 0;
    background: url('../../assets/images/map-pages/icon/icon.png') no-repeat -481px 0;
    cursor: pointer;
  }


 src/components/panel/TopEnterprisePanel.vue

@@ -94,10 +94,20 @@
  height: 40px;
  padding-top: 10px;
  background: #07325b;
  border: 2px solid #2A8FD4;
  border: 1px solid #2A8FD4;
  border-radius: 10px;
  text-align: center;

  .el-button {
    border-radius: 0;
  }

  .el-input__inner {
    border-radius: 0;
    border: 1px solid #0e639e;
    background-color: #061e51;
  }

  .el-form-item__label {
    color: #ffffff;
  }

 src/views/MapTemplate.vue

@@ -21,7 +21,7 @@
import LcBasemap from '@components/LayerController/modules/LcBaseMap'
import LcServiceLayer from '@components/LayerController/modules/LcServiceLayer'
import LcServiceLayerFilter from '@components/LayerController/modules/LcServiceLayerFilter'
import MonitorPanel from '@components/panel/MonitorPanel'
import MonitorPanel from '@components/panel/RightSearchPanel'
import TopEnterprisePanel from '@components/panel/TopEnterprisePanel'
import ToolBoxPanel from '@components/panel/ToolBoxPanel'