feat:动态数据中心

ZhangXianQiang

2024-05-24 aa05304d221b1883d746e686f390d6f3fba598a7

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

@@ -8,14 +8,31 @@


    <el-card class="map-wrapper">
      <el-row>
        <el-col :span="5">
          <div class="select-container">
            <div class="select-label">
              数据源
            </div>
            <el-select v-model="selectOption" placeholder="请选择">
              <el-option v-for="item in options" :key="item.value" :label="item.label" :value="item.value">
              </el-option>
            </el-select>
          </div>

        </el-col>
        <el-col :offset="17" :span="2">
          <el-button type="primary" @click="toScreen">可视化大屏</el-button>
        </el-col>
      </el-row>
      <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%;">
        <el-col :xs='24' :md="24" :sm="24" :lg="6" :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%;">
        <el-col :xs='24' :md="24" :sm="24" :lg="6" :xl="6" style="height: 100%;">
          <data-hola :activeData="activeData"></data-hola>
        </el-col>
      </el-row>
@@ -45,8 +62,8 @@
        { id: 1, type: '工单数', num: 523, },
        { id: 2, type: '恢复数', num: 50, },
        { id: 3, type: '待恢复数', num: 523, },
        { id: 4, type: '产生违约事项数', num: 123, },
        { id: 5, type: '产生违约责任书', num: 512323, },
        { id: 4, type: '超期未处理数', num: 123, },
        { id: 5, type: '超期责任数', num: 512323, },
      ],
      iconList: [
        { icon: 'el-icon-tickets', color: '#7868d9' },
@@ -57,7 +74,7 @@
      ],
      totalList: [
        {
          "name": "虹口乡",
          "name": "荣县",
          "data1": 3,
          "data2": 82,
          "data3": 5,
@@ -65,7 +82,7 @@
          "data5": 50
        },
        {
          "name": "玉堂镇",
          "name": "贡井区",
          "data1": 1,
          "data2": 94,
          "data3": 38,
@@ -73,7 +90,7 @@
          "data5": 87
        },
        {
          "name": "崇义镇",
          "name": "自流井区",
          "data1": 15,
          "data2": 57,
          "data3": 81,
@@ -81,7 +98,7 @@
          "data5": 85
        },
        {
          "name": "龙池镇",
          "name": "沿滩区",
          "data1": 8,
          "data2": 7,
          "data3": 60,
@@ -89,7 +106,7 @@
          "data5": 43
        },
        {
          "name": "中兴镇",
          "name": "富顺县",
          "data1": 40,
          "data2": 75,
          "data3": 50,
@@ -97,127 +114,30 @@
          "data5": 79
        },
        {
          "name": "蒲阳镇",
          "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}
      activeData: { name: '自贡市', data1: 0, data2: 0, data3: 0, data4: 0, data5: 0 },
      options: [
        {
          value: 1,
          label: '省厅数据'
        },
        {
          value: 2,
          label: '市局数据'
        },
        {
          value: 3,
          label: '公安部数据'
        },
      ],
      selectOption: 1
    }
  },
  methods: {
@@ -227,6 +147,7 @@
      } else {
        this.countTotal();
      }

    },
    countTotal() {
      let data = {};
@@ -237,6 +158,12 @@
      });
      data.name = '自贡市';
      this.activeData = data;
    },

    toScreen() {
      this.$router.push({
        path: '/screen'
      })
    }
  },
  created() {
@@ -271,9 +198,19 @@
  aspect-ratio: 6/2;
}

.select-container {
  display: flex;
  align-items: center;
  .select-label {
    color: #666;
    margin-right: 20px;
    font-size: 16px;
  }
}

@media screen and (min-width: 1200px) {
  .el-col-md-6 {
    width: 20%;
  }
}
</style>
</style>