首页部分逻辑处理

shuishen

2021-07-14 4b7bd629df45b7ad68c2ffb14861cec75dce8aea

首页部分逻辑处理

 src/mock/menu.js

@@ -1,8 +1,8 @@
import Mock from 'mockjs'

const top = [{
  label: "保安人员管理",
  path: "/register/index",
  label: "首页",
  path: "/wel",
  icon: 'el-icon-menu',
  meta: {
    i18n: 'dashboard',

 src/page/login/userlogin.vue

@@ -137,7 +137,7 @@
              spinner: "el-icon-loading"
            });
            this.$store.dispatch("LoginByUsername", this.loginForm).then(() => {
              this.$router.push({path: this.tagWel.value});
              this.$router.push({path: '/wel'});
              loading.close();
            }).catch(() => {
              loading.close();

 src/views/home/index.vue

@@ -1,158 +1,155 @@
<template>
  <div class="bajgxt-home">
    <div class="head-title">
      <span>保安监管系统可视化平台</span>
      <img src="../../../public/img/bajgxt/linkimg.png" title="进入系统" />
    <div class="bajgxt-home">
        <div class="head-title">
            <span>保安监管系统可视化平台</span>
            <img src="../../../public/img/bajgxt/linkimg.png"
                 @click.stop="goSystemHome"
                 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"
                         @click="getTableData('car')">
                        <img src="../../../public/img/bajgxt/car.png"
                             alt="" />
                        <div class="text">
                            <span>押运车辆</span>
                            <span>700</span>
                        </div>
                    </div>
                    <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"
                         @click="getTableData('gun')">
                        <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 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 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>
            <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>
    <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" @click="getTableData('car')">
            <img src="../../../public/img/bajgxt/car.png" alt="" />
            <div class="text">
              <span>押运车辆</span>
              <span>700</span>
            </div>
          </div>
          <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" @click="getTableData('gun')">
            <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
              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
              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>
      <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>
@@ -172,285 +169,289 @@
import axios from "../../router/axios";
import { securityTotal, holderNum, securityPer } from "../../api/index/index";
export default {
  data() {
    return {
      map: null,
      curTableType: "car",
      tableData: [],
      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));
    data () {
        return {
            map: null,
            curTableType: "car",
            tableData: [],
            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);
                }
            });

    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"
          }
        ];
      }
            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));
        },

        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 的元素
                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);
            });
            // 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);
        },

        goSystemHome () {
            this.$router.push({ path: '/register/index' });
        }
    },

    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);
      });
      // 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.getTableData("car");
        this.initMap();
    }
  },
  mounted() {
    this.initEchart();
    this.getTableData("car");
    this.initMap();
  }
};
</script>

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