改背景

zpzgiser

2021-07-13 d5f3b5005f0daaf4e89101ff05c9259071bd6ed6

 src/views/wel/index.vue

@@ -2,7 +2,7 @@
  <div class="bajgxt-home">
    <div class="head-title">
      <span>保安监管系统可视化平台</span>
      <img src="../../../public/img/bajgxt/linkimg.png" title="进入系统" >
      <img src="../../../public/img/bajgxt/linkimg.png" title="进入系统" />
    </div>
    <div class="content">
      <div class="left">
@@ -24,21 +24,21 @@
      <div class="middle">
        <div class="mapimg">
          <!-- <div></div> -->
          <div class="mapBtn">
          <div class="mapBtn" @click="getTableData('car')">
            <img src="../../../public/img/bajgxt/car.png" alt="" />
            <div class="text">
              <span>押运车辆</span>
              <span>700</span>
            </div>
          </div>
          <div class="mapBtn">
          <div class="mapBtn" @click="getTableData('peo')">
            <img src="../../../public/img/bajgxt/peo.png" alt="" />
            <div class="text">
              <span>保安员</span>
              <span>700</span>
            </div>
          </div>
          <div class="mapBtn">
          <div class="mapBtn" @click="getTableData('gun')">
            <img src="../../../public/img/bajgxt/gun.png" alt="" />
            <div class="text">
              <span>枪支</span>
@@ -56,13 +56,49 @@
          <el-table :data="tableData" stripe>
            <el-table-column type="index" label="序号" width="50">
            </el-table-column>
            <el-table-column prop="carNum" label="押运车辆车牌号" width="180">
            <el-table-column
              v-if="curTableType === 'car'"
              prop="carNum"
              label="押运车辆车牌号"
              width="180"
            >
            </el-table-column>
            <el-table-column
              v-if="curTableType === 'peo'"
              prop="name"
              label="押运人员名称"
              width="180"
            >
            </el-table-column>
            <el-table-column
              v-if="curTableType === 'gun'"
              prop="number"
              label="枪支编号"
              width="180"
            >
            </el-table-column>
            <el-table-column prop="location" label="实时位置">
            </el-table-column>
            <el-table-column prop="company" label="所属公司"> </el-table-column>
            <el-table-column prop="linkman" label="联系人"> </el-table-column>
            <el-table-column
              v-if="curTableType === 'car'"
              prop="linkman"
              label="联系人"
            >
            </el-table-column>
            <el-table-column
              v-if="curTableType === 'gun'"
              prop="linkman"
              label="负责人"
            >
            </el-table-column>
            <el-table-column prop="tel" label="联系电话"> </el-table-column>
            <el-table-column
              v-if="curTableType === 'peo'"
              prop="bz"
              label="备注"
            >
            </el-table-column>
          </el-table>
        </div>
      </div>
@@ -139,43 +175,8 @@
  data() {
    return {
      map: null,
      tableData: [
        {
          carNum: "111111111111",
          location: "红谷滩",
          company: "公司",
          linkman: "小李",
          tel: "13999999999"
        },
        {
          carNum: "111111111111",
          location: "红谷滩",
          company: "公司",
          linkman: "小李",
          tel: "13999999999"
        },
        {
          carNum: "111111111111",
          location: "红谷滩",
          company: "公司",
          linkman: "小李",
          tel: "13999999999"
        },
        {
          carNum: "111111111111",
          location: "红谷滩",
          company: "公司",
          linkman: "小李",
          tel: "13999999999"
        },
        {
          carNum: "111111111111",
          location: "红谷滩",
          company: "公司",
          linkman: "小李",
          tel: "13999999999"
        }
      ],
      curTableType: "car",
      tableData: [],
      value1: "1",
      options1: [
        {
@@ -240,6 +241,139 @@
      right3Echart.setOption(optionJs.right3Data(data));
    },

    getTableData(type) {
      this.curTableType = type;
      if (type === "car") {
        this.tableData = [
          {
            carNum: "111111111111",
            location: "红谷滩",
            company: "公司",
            linkman: "小李",
            tel: "13999999999"
          },
          {
            carNum: "111111111111",
            location: "红谷滩",
            company: "公司",
            linkman: "小李",
            tel: "13999999999"
          },
          {
            carNum: "111111111111",
            location: "红谷滩",
            company: "公司",
            linkman: "小李",
            tel: "13999999999"
          },
          {
            carNum: "111111111111",
            location: "红谷滩",
            company: "公司",
            linkman: "小李",
            tel: "13999999999"
          },
          {
            carNum: "111111111111",
            location: "红谷滩",
            company: "公司",
            linkman: "小李",
            tel: "13999999999"
          }
        ];
      } else if (type === "peo") {
        this.tableData = [
          {
            name: "小张",
            location: "红谷滩",
            company: "公司",
            tel: "13999999999",
            bz: "zzz"
          },
          {
            name: "小张",
            location: "红谷滩",
            company: "公司",
            tel: "13999999999",
            bz: "zzz"
          },
          {
            name: "小张",
            location: "红谷滩",
            company: "公司",
            tel: "13999999999",
            bz: "zzz"
          },
          {
            name: "小张",
            location: "红谷滩",
            company: "公司",
            tel: "13999999999",
            bz: "zzz"
          },
          {
            name: "小张",
            location: "红谷滩",
            company: "公司",
            tel: "13999999999",
            bz: "zzz"
          },
          {
            name: "小张",
            location: "红谷滩",
            company: "公司",
            tel: "13999999999",
            bz: "zzz"
          }
        ];
      } else if (type === "gun") {
        this.tableData = [
          {
            number: "Q1111",
            location: "红谷滩",
            company: "公司",
            linkman: "张强",
            tel: "13999999999"
          },
          {
            number: "Q1111",
            location: "红谷滩",
            company: "公司",
            linkman: "张强",
            tel: "13999999999"
          },
          {
            number: "Q1111",
            location: "红谷滩",
            company: "公司",
            linkman: "张强",
            tel: "13999999999"
          },
          {
            number: "Q1111",
            location: "红谷滩",
            company: "公司",
            linkman: "张强",
            tel: "13999999999"
          },
          {
            number: "Q1111",
            location: "红谷滩",
            company: "公司",
            linkman: "张强",
            tel: "13999999999"
          },
          {
            number: "Q1111",
            location: "红谷滩",
            company: "公司",
            linkman: "张强",
            tel: "13999999999"
          }
        ];
      }
    },

    initMap() {
      this.map = new Map({
        target: "map", // 对应页面里 id 为 map 的元素
@@ -281,8 +415,6 @@
        });
        this.map.addLayer(vectorLayer);
      });

      // debugger;
      // var center = new transform(
      //   [104.06667, 30.66667],
      //   "EPSG:4326",
@@ -305,6 +437,7 @@
  },
  mounted() {
    this.initEchart();
    this.getTableData("car");
    this.initMap();
  }
};