首页数据左上角

liuyg

2021-08-10 506ed59d7e4e8952b141a9ff1f41fbddc58a6ce0

首页数据左上角

 src/api/home/home.js

@@ -12,4 +12,12 @@
    url: '/api/alarm/alarm/countAlarm',
    method: 'get'
  })
}


export const getLeftUp = () => {
  return request({
    url: '/api/blade-user/getUserTypeCount',
    method: 'get'
  })
}

 src/styles/element-ui.scss

@@ -422,11 +422,16 @@
  border-bottom: 1px solid $mainB !important;
}
//菜单scroll
.menuClass .el-card{
.menuClass .el-card {
  height: auto !important;
}

//机构管理
.deptClass .el-card{
.deptClass .el-card {
  height: auto !important;
}

//bug窗口删除清空弹窗标题
.el-message-box__title {
  color: #fff !important;
}

 src/views/wel/home.vue

@@ -13,31 +13,23 @@
              </div>
              <div id="on_three_yjy">
                <div>
                  <div>
                    <div><img src="/img/wyh.png" alt="" /><span>20</span></div>
                    <span> 治保会队伍 </span>
                  </div>
                  <div>
                    <div><img src="/img/zabw.png" alt="" /><span>15</span></div>
                    <span> 内保干部队伍 </span>
                  </div>
                  <div>
                    <div><img src="/img/xf.png" alt="" /><span>30</span></div>
                    <span> 治安巡防队伍 </span>
                  <div v-for="(item, index) in leftUp.slice(0, 3)" :key="index">
                    <div>
                      <img :src="item.img" alt="" /><span>{{
                        item.value
                      }}</span>
                    </div>
                    <span> {{ item.name }} </span>
                  </div>
                </div>
                <div>
                  <div>
                    <div><img src="/img/xxy.png" alt="" /><span>26</span></div>
                    <span> 信息员队伍 </span>
                  </div>
                  <div>
                    <div><img src="/img/badw.png" alt="" /><span>30</span></div>
                    <span> 保安员队伍 </span>
                  </div>
                  <div>
                    <div><img src="/img/jfd.png" alt="" /><span>25</span></div>
                    <span> 警务辅助队伍</span>
                  <div v-for="(item, index) in leftUp.slice(3, 6)" :key="index">
                    <div>
                      <img :src="item.img" alt="" /><span>{{
                        item.value
                      }}</span>
                    </div>
                    <span> {{ item.name }} </span>
                  </div>
                </div>
              </div>
@@ -101,7 +93,7 @@
import * as echarts from "echarts";

import geojson from "@/geojson/nanchang.json";
import { getList, getSevenDaty } from "@/api/home/home";
import { getList, getSevenDaty, getLeftUp } from "@/api/home/home";

export default {
  data() {
@@ -118,6 +110,8 @@

      option1: "",
      echarts1: "",

      leftUp: [],
    };
  },

@@ -134,8 +128,37 @@
    this.createechart1(); //建立图表1
    this.onSixEcharts(); //图表1数据
    this.createMapJson();
    this.getLeftUp(); // 左上角数据
  },
  methods: {
    getLeftUp() {
      this.leftUp = [];
      getLeftUp().then((res) => {
        var d = res.data.data;
        d.forEach((item, index, arr) => {
          let img =
            item.region == "治保会队伍"
              ? "/img/wyh.png"
              : item.region == "内保干部队伍"
              ? "/img/zabw.png"
              : item.region == "治安巡防队伍"
              ? "/img/xf.png"
              : item.region == "信息员队伍"
              ? "/img/xxy.png"
              : item.region == "保安员队伍"
              ? "/img/badw.png"
              : item.region == "警务辅助队伍"
              ? "/img/jfd.png"
              : "";
          this.leftUp.push({
            name: item.region,
            img: img,
            value: item.num,
          });
        });
        // console.log(this.leftUp);
      });
    },
    getDataSevenDaty() {
      var that = this;
      getSevenDaty().then((res) => {
@@ -286,7 +309,7 @@
          data.push(d[k].num);
          datax.push(d[k].region);
        }
        console.log(res, 243423);
        // console.log(res, 243423);

        var option = {
          tooltip: {