feat:首页添加地图

ZhangXianQiang

2024-03-12 05e80f0a0531e3b3d10836599f63189af0ee0524

 src/views/home/data-view/index.vue

@@ -5,35 +5,40 @@
        <h1 class="title">运维报表</h1>
      </el-col>
    </el-row>
    <el-row :gutter="20" class="data-plane">
      <el-col :xs='24' :md="6" :xl="{ span: '4-8' }" :sm="12" v-for="item, index in dataList" :key="item.id">
        <div class="col-content">
          <el-card>
            <el-row type="flex" align="middle" justify="space-between">
              <el-col :xl="8" :lg="8" :md="10" :sm="8" :xs="6">
                <div class="icon-container" :style="{ backgroundColor: iconList[index].color }">
                  <i :class="iconList[index].icon" class="icon-font"></i>
                </div>
              </el-col>
              <el-col :xl="14" :lg="14" :md="12" :sm="14" :xs="16">
                <div class="data-info">
                  <div class="data-num">{{ item.num }}</div>
                  <div class="data-lable">{{ item.type }}</div>
                </div>
              </el-col>
            </el-row>
          </el-card>
        </div>
      </el-col>

    </el-row>

    <el-card class="map-wrapper">
      <el-row :gutter="40" class="data-plane" style="height: 100%;">
        <el-col :xs='24' :md="24" :sm="24" :lg="12" :xl="6" style="height: 100%;">
          <data-icon :activeData="activeData"></data-icon>
        </el-col>
        <el-col :xs='24' :md="24" :sm="24" :lg="12" :xl="12" style="height: 100%;">
          <data-map @filterData="filterData"></data-map>
        </el-col>
        <el-col :xs='24' :md="24" :sm="24" :lg="12" :xl="6" style="height: 100%;">
          <data-hola :activeData="activeData"></data-hola>
        </el-col>
      </el-row>
    </el-card>

  </div>

</template>

<script>
// import DataPlane from './components/data-plane.vue';

import DataMap from './components/data-map.vue';
import DataIcon from './components/data-icon.vue';
import DataHola from './components/data-hola.vue';

export default {
  name: 'DataView',
  components: {
    DataMap,
    DataIcon,
    DataHola,
    // DataPlane
  },
  data() {
    return {
      dataList: [
@@ -49,8 +54,193 @@
        { icon: 'el-icon-edit', color: '#3da7f8' },
        { icon: 'el-icon-warning', color: '#ffbe40' },
        { icon: 'el-icon-error', color: '#fe640d' },
      ]
      ],
      totalList: [
        {
          "name": "虹口乡",
          "data1": 3,
          "data2": 82,
          "data3": 5,
          "data4": 95,
          "data5": 50
        },
        {
          "name": "玉堂镇",
          "data1": 1,
          "data2": 94,
          "data3": 38,
          "data4": 60,
          "data5": 87
        },
        {
          "name": "崇义镇",
          "data1": 15,
          "data2": 57,
          "data3": 81,
          "data4": 77,
          "data5": 85
        },
        {
          "name": "龙池镇",
          "data1": 8,
          "data2": 7,
          "data3": 60,
          "data4": 77,
          "data5": 43
        },
        {
          "name": "中兴镇",
          "data1": 40,
          "data2": 75,
          "data3": 50,
          "data4": 69,
          "data5": 79
        },
        {
          "name": "蒲阳镇",
          "data1": 68,
          "data2": 38,
          "data3": 27,
          "data4": 43,
          "data5": 95
        },
        {
          "name": "大观镇",
          "data1": 52,
          "data2": 9,
          "data3": 74,
          "data4": 40,
          "data5": 82
        },
        {
          "name": "幸福镇",
          "data1": 52,
          "data2": 10,
          "data3": 26,
          "data4": 70,
          "data5": 61
        },
        {
          "name": "天马镇",
          "data1": 66,
          "data2": 44,
          "data3": 77,
          "data4": 68,
          "data5": 51
        },
        {
          "name": "安龙镇",
          "data1": 80,
          "data2": 77,
          "data3": 84,
          "data4": 79,
          "data5": 47
        },
        {
          "name": "聚源镇",
          "data1": 85,
          "data2": 78,
          "data3": 12,
          "data4": 37,
          "data5": 32
        },
        {
          "name": "胥家镇",
          "data1": 91,
          "data2": 76,
          "data3": 30,
          "data4": 47,
          "data5": 28
        },
        {
          "name": "向峨乡",
          "data1": 32,
          "data2": 41,
          "data3": 45,
          "data4": 60,
          "data5": 54
        },
        {
          "name": "柳街镇",
          "data1": 8,
          "data2": 80,
          "data3": 4,
          "data4": 14,
          "data5": 20
        },
        {
          "name": "紫坪铺镇",
          "data1": 1,
          "data2": 88,
          "data3": 41,
          "data4": 21,
          "data5": 88
        },
        {
          "name": "灌口镇",
          "data1": 85,
          "data2": 72,
          "data3": 79,
          "data4": 27,
          "data5": 42
        },
        {
          "name": "青城山镇",
          "data1": 77,
          "data2": 1,
          "data3": 33,
          "data4": 92,
          "data5": 45
        },
        {
          "name": "滨江街道",
          "data1": 82,
          "data2": 43,
          "data3": 9,
          "data4": 34,
          "data5": 96
        },
        {
          "name": "翠月湖镇",
          "data1": 30,
          "data2": 41,
          "data3": 80,
          "data4": 9,
          "data5": 53
        },
        {
          "name": "石羊镇",
          "data1": 9,
          "data2": 15,
          "data3": 24,
          "data4": 92,
          "data5": 37
        }
      ],
      activeData: {name: '自贡市', data1: 0, data2: 0, data3: 0, data4: 0, data5:0}
    }
  },
  methods: {
    filterData(name) {
      if (name) {
        this.activeData = this.totalList.find(item => item.name === name);
      } else {
        this.countTotal();
      }
    },
    countTotal() {
      let data = {};
      this.totalList.forEach((item) => {
        Object.keys(item).forEach((key) => {
          data[key] = data[key] ? data[key] + item[key] : item[key];
        });
      });
      data.name = '自贡市';
      this.activeData = data;
    }
  },
  created() {
    this.countTotal();
  }
}
</script>
@@ -59,6 +249,7 @@
.data-container {
  margin-bottom: 20px;
}

.title {
  text-align: left;
}
@@ -71,33 +262,13 @@
  margin-bottom: 10px;
}

.icon-container {
  display: flex;
  justify-content: center;
  align-items: center;
  border-radius: 8px;
.map-wrapper {
  // background-color: rgb(48, 65, 86);

  .icon-font {
    font-size: 30px;
    color: #fff;
  }
}

.data-info {
  display: flex;
  height: 100%;
  flex-direction: column;
  justify-content: center;
  text-align: left;

  .data-num {
    font-size: 32px;
  }

  .data-lable {
    font-size: 16px;
    text-indent: 3px;
  }
.data-plane {
  aspect-ratio: 6/2;
}

@media screen and (min-width: 1200px) {