feat:动态数据中心

ZhangXianQiang

2024-05-24 aa05304d221b1883d746e686f390d6f3fba598a7

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

@@ -9,11 +9,20 @@

    <el-card class="map-wrapper">
      <el-row>
        <el-col :offset="21" :span="3">
          <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>
        <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%;">
@@ -123,6 +132,10 @@
          value: 2,
          label: '市局数据'
        },
        {
          value: 3,
          label: '公安部数据'
        },
      ],
      selectOption: 1
    }
@@ -145,6 +158,12 @@
      });
      data.name = '自贡市';
      this.activeData = data;
    },

    toScreen() {
      this.$router.push({
        path: '/screen'
      })
    }
  },
  created() {
@@ -179,6 +198,16 @@
  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%;