admin-ui/src/views/iot/dataAnalysis/exponentialTrend/index.vue

<template>
  <div class="page">
    <el-card shadow="nover">
      <el-form inline>
        <el-form-item label="选择产品" prop="productKey">
          <el-select v-model="params.productKey" filterable placeholder="请选择产品" @change="productChange">
            <el-option v-for="item in productList" :key="item.key" :label="item.name" :value="item.key">
              <span style="float: left">{{ item.name }}</span>
              <span style="float: right; font-size: 13px">{{ item.key }}</span>
            </el-option>
          </el-select>
        </el-form-item>

        <el-form-item label="选择设备" prop="deviceKey">
          <el-select v-model="params.deviceKey" filterable placeholder="请选择设备" @change="deviceChange">
            <el-option v-for="item in deviceList" :key="item.key" :label="item.name" :value="item.key">
              <span style="float: left">{{ item.name }}</span>
              <span style="float: right; font-size: 13px">{{ item.key }}</span>
            </el-option>
          </el-select>
        </el-form-item>

        <el-form-item label="选择属性" prop="deviceKey">
          <el-select v-model="params.deviceKey" filterable placeholder="请选择属性" @change="deviceChange">
            <el-option v-for="item in deviceList" :key="item.key" :label="item.name" :value="item.key">
              <span style="float: left">{{ item.name }}</span>
              <span style="float: right; font-size: 13px">{{ item.key }}</span>
            </el-option>
          </el-select>
        </el-form-item>
        <el-form-item>
          <el-button type="primary" class="ml10" @click="getData">
            <el-icon>
              <ele-Search />
            </el-icon>
            查询
          </el-button>
        </el-form-item>
      </el-form>
    </el-card>
  </div>
</template>

<script lang="ts" setup>
import { ref, toRefs, reactive, onMounted, defineComponent } from 'vue';
import { ElMessageBox, ElMessage } from 'element-plus';
import api from '/@/api/device';

const productList = ref<any[]>([])
const deviceList = ref<any[]>([])

const params = reactive({
  productKey: '',
  deviceKey: '',
})


api.product.getLists({ status: 1 }).then((res: any) => {
  productList.value = res.product || [];
});

function getData() {

}

function productChange(productKey: string) {
  params.deviceKey = ''
  deviceList.value = []
  api.device.allList({ productKey }).then((res: any) => {
    deviceList.value = res.device;
  });
}

function deviceChange() {

}

</script>