首页

zpzgiser

2021-07-13 e9cc2a95249cd4a1a86d5ce331f0bb7efbff97a6

 src/views/wel/index.vue

@@ -1,15 +1,323 @@
<template>
  <el-card>
    首页
  </el-card>
  <div class="bajgxt-home">
    <div class="head-title">
      <span>保安监管系统可视化平台</span>
      <img src="../../../public/img/bajgxt/linkimg.png" title="进入系统" >
    </div>
    <div class="content">
      <div class="left">
        <div class="left1">
          <div class="title-pane">
            <img src="../../../public/img/bajgxt/icon1.png" />
            <span>业务对象统计--单位</span>
          </div>
          <div id="left1Echart"></div>
        </div>
        <div class="left2">
          <div class="title-pane1">
            <img src="../../../public/img/bajgxt/icon1.png" />
            <span>保安员持证情况</span>
          </div>
          <div id="left2Echart"></div>
        </div>
      </div>
      <div class="middle">
        <div class="mapimg">
          <!-- <div></div> -->
          <div class="mapBtn">
            <img src="../../../public/img/bajgxt/car.png" alt="" />
            <div class="text">
              <span>押运车辆</span>
              <span>700</span>
            </div>
          </div>
          <div class="mapBtn">
            <img src="../../../public/img/bajgxt/peo.png" alt="" />
            <div class="text">
              <span>保安员</span>
              <span>700</span>
            </div>
          </div>
          <div class="mapBtn">
            <img src="../../../public/img/bajgxt/gun.png" alt="" />
            <div class="text">
              <span>枪支</span>
              <span>700</span>
            </div>
          </div>
          <div id="map"></div>
        </div>
        <div class="table">
          <div class="table-title">武装押运实时定位</div>
          <div class="lefttop"></div>
          <div class="leftbottom"></div>
          <div class="righttop"></div>
          <div class="rightbottom"></div>
          <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>
            <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 prop="tel" label="联系电话"> </el-table-column>
          </el-table>
        </div>
      </div>
      <div class="right">
        <div class="right1">
          <div class="title-pane1">
            <img src="../../../public/img/bajgxt/icon2.png" />
            <span>保安员预警统计</span>
            <el-select v-model="value1">
              <el-option
                v-for="item in options1"
                :key="item.value"
                :label="item.label"
                :value="item.value"
              >
              </el-option>
            </el-select>
          </div>
          <div class="card-text">
            <span>现实表现差</span><span>902,432</span><span>起</span
            ><span>审查情况</span><span>22222</span><span>起</span>
          </div>
          <div id="right1Echart"></div>
        </div>
        <div class="right2">
          <div class="title-pane1">
            <img src="../../../public/img/bajgxt/icon2.png" />
            <span>保安公司预警统计</span>
            <el-select v-model="value2" placeholder="请选择">
              <el-option
                v-for="item in options2"
                :key="item.value"
                :label="item.label"
                :value="item.value"
              >
              </el-option>
            </el-select>
          </div>
          <div class="card-text">
            <span>未缴纳社保情况</span><span>902,432</span><span>起</span
            ><span>未持证情况</span><span>22222</span><span>起</span>
          </div>
          <div id="right2Echart"></div>
        </div>
        <div class="right3">
          <div class="title-pane1">
            <img src="../../../public/img/bajgxt/icon3.png" />
            <span>分局预警占比情况</span>
          </div>
          <div id="right3Echart"></div>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
import "ol/ol.css";
import * as echarts from "echarts";
import optionJs from "./indexEchart";
import TileLayer from "ol/layer/Tile";
import { transform } from "ol/proj";
import XYZ from "ol/source/XYZ";
import { Map, View } from "ol";
import { Tile, Group } from "ol/layer";
import { OSM, TileJSON } from "ol/source";
import VectorLayer from "ol/layer/Vector";
import VectorSource from "ol/source/Vector";
import { Fill, Stroke, Circle, Style } from "ol/style";
import GeoJSON from "ol/format/GeoJSON";
import axios from "../../router/axios";
import { securityTotal, holderNum, securityPer } from "../../api/index/index";
export default {
  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"
        }
      ],
      value1: "1",
      options1: [
        {
          value: "1",
          label: "南昌市"
        },
        {
          value: "2",
          label: "赣州市"
        }
      ],
      value2: "1",
      options2: [
        {
          value: "1",
          label: "南昌市"
        },
        {
          value: "2",
          label: "赣州市"
        }
      ]
    };
  },
  methods: {
    initEchart() {
      securityTotal().then(res => {
        if (res.data.code == 200) {
          let securityData = res.data.data;
          let left1Echart = echarts.init(
            document.getElementById("left1Echart")
          );
          left1Echart.setOption(optionJs.left1Data(securityData));
        } else {
          this.$message.error(res.msg);
        }
      });

}
      holderNum().then(res => {
        if (res.data.code === 200) {
          let data = res.data.data;
          let left2Echart = echarts.init(
            document.getElementById("left2Echart")
          );
          left2Echart.setOption(optionJs.left2Data(data));
        } else {
          this.$message.error(res.msg);
        }
      });
      // securityPer().then(res => {
      //   if (res.data.code === 200) {
      //     let data = res.data.data;
      let data = [];
      let right1Echart = echarts.init(document.getElementById("right1Echart"));
      right1Echart.setOption(optionJs.right1Data(data));
      //   }
      // });

      let right2Echart = echarts.init(document.getElementById("right2Echart"));
      right2Echart.setOption(optionJs.right2Data(data));
      let right3Echart = echarts.init(document.getElementById("right3Echart"));
      right3Echart.setOption(optionJs.right3Data(data));
    },

    initMap() {
      this.map = new Map({
        target: "map", // 对应页面里 id 为 map 的元素
        layers: [
          // 图层
          new Tile({
            source: new OSM() // 图层数据源
          })
        ],
        view: new View({
          // 地图视图
          projection: "EPSG:4326", // 坐标系，有EPSG:4326和EPSG:3857
          center: [115.892151, 28.676493], //坐标 厦门
          // minZoom: 10, // 地图缩放最小级别
          zoom: 11 //地图缩放级别
        })
      });
      var image = new Circle({
        radius: 5,
        fill: new Fill({
          color: "rgba(255, 0, 0, 1)"
        }),
        stroke: new Stroke({ color: "red", width: 1 })
      });

      var styles = {
        Point: new Style({
          image: image
        })
      };
      axios.get("./nc.json").then(res => {
        let data = res.data.features;
        let vectorSource = new VectorSource({
          features: new GeoJSON().readFeatures(data)
        });
        let vectorLayer = new VectorLayer({
          source: vectorSource,
          style: styles
        });
        this.map.addLayer(vectorLayer);
      });

      // debugger;
      // var center = new transform(
      //   [104.06667, 30.66667],
      //   "EPSG:4326",
      //   "EPSG:3857"
      // );
      // this.map = new Map({
      //   view: new View({
      //     center: center,
      //     zoom: 4
      //   }),
      //   target: "map"
      // });
      // var offlineMapLayer = new TileLayer({
      //   source: new XYZ({
      //     url: "./offlineMapTiles/{z}/{x}/{y}.png"
      //   })
      // });
      // this.map.addLayer(offlineMapLayer);
    }
  },
  mounted() {
    this.initEchart();
    this.initMap();
  }
};
</script>

<style>

<style lang="scss" scoped>
@import "./index.scss";
/deep/ .el-select-dropdown {
  border: 1px solid #9199ab;
  background-color: #022c53;
}
/deep/ .el-select-dropdown__item.hover,
/deep/ .el-select-dropdown__item:hover {
  background-color: #03203e;
}
</style>