首页

components.d.ts

@@ -7,23 +7,16 @@ export {}
 
 declare module '@vue/runtime-core' {
   export interface GlobalComponents {
-    ABadge: typeof import('ant-design-vue/es')['Badge']
     AButton: typeof import('ant-design-vue/es')['Button']
     ACard: typeof import('ant-design-vue/es')['Card']
     ACol: typeof import('ant-design-vue/es')['Col']
-    ADatePicker: typeof import('ant-design-vue/es')['DatePicker']
     AForm: typeof import('ant-design-vue/es')['Form']
     AFormItem: typeof import('ant-design-vue/es')['FormItem']
-    AInput: typeof import('ant-design-vue/es')['Input']
-    AInputGroup: typeof import('ant-design-vue/es')['InputGroup']
-    AInputNumber: typeof import('ant-design-vue/es')['InputNumber']
-    AInputPassword: typeof import('ant-design-vue/es')['InputPassword']
     AModal: typeof import('ant-design-vue/es')['Modal']
     APopconfirm: typeof import('ant-design-vue/es')['Popconfirm']
     ARow: typeof import('ant-design-vue/es')['Row']
     ASelect: typeof import('ant-design-vue/es')['Select']
     ATooltip: typeof import('ant-design-vue/es')['Tooltip']
-    AUpload: typeof import('ant-design-vue/es')['Upload']
     BadgeStatus: typeof import('./src/components/BadgeStatus/index.vue')['default']
     CardBox: typeof import('./src/components/CardBox/index.vue')['default']
     GeoComponent: typeof import('./src/components/GeoComponent/index.vue')['default']

src/views/iot/home/components/ComprehensiveHome/index.vue

@@ -186,5 +186,5 @@ const opsStepDetails = [
         linkUrl: '/a',
         auth: false,
     },
-];
+] as recommendList[];
 </script>

src/views/iot/home/components/DevOpsHome/index.vue

@@ -27,6 +27,7 @@ import BasicCountCard from '../BasicCountCard.vue';
 import PlatformPicCard from '../PlatformPicCard.vue';
 import StepCard from '../StepCard.vue';
 
+import {recommendList} from '../../index'
 // import {getImage} from '@/utils/comm'
 
 // 运维引导-数据
@@ -93,7 +94,7 @@ const stepDetails = [
         linkUrl: '/a',
         auth: false,
     },
-];
+] as recommendList[];
 </script>
 
 <style lang="less" scoped>

src/views/iot/home/components/DeviceHome/index.vue

@@ -26,6 +26,9 @@ import BootCard from '../BootCard.vue';
 import DeviceCountCard from '../DeviceCountCard.vue';
 import PlatformPicCard from '../PlatformPicCard.vue';
 import StepCard from '../StepCard.vue';
+
+import {recommendList} from '../../index'
+
 // import {getImage} from '@/utils/comm'
 
 // 物联网引导-数据
@@ -90,7 +93,7 @@ const stepDetails = [
         linkUrl: '/a',
         auth: false,
     },
-];
+] as recommendList[];
 </script>
 
 <style lang="less" scoped>

src/views/iot/home/components/Pie.vue

@@ -4,8 +4,9 @@
 
 <script setup lang="ts">
 import * as echarts from 'echarts';
+import { ComponentInternalInstance } from 'vue';
 
-const { proxy } = getCurrentInstance();
+const { proxy } = getCurrentInstance() as ComponentInternalInstance;
 
 const props = defineProps({
     chartRef: String,
@@ -50,7 +51,7 @@ watch(options, () => {
 });
 const initChart = () => {
     nextTick(() => {
-        const myChart = echarts.init(proxy.$refs[props.chartRef]);
+        const myChart = echarts.init(proxy?.$refs[props.chartRef as string] as HTMLElement);
 
         myChart.clear();
         myChart.setOption(options.value);

src/views/iot/home/components/StepCard.vue

@@ -11,12 +11,8 @@
         </h5>
 
         <div class="box-list">
-            <div
+            <div class="list-item" v-for="item in dataList">
-                class="list-item"
+                <div class="box-top" @click="jumpPage(item)">
-                v-for="item in dataList"
-                @click="jumpPage(item)"
-            >
-                <div class="box-top">
                     <span class="top-title">{{ item.title }}</span>
                     <img :src="item.iconUrl" alt="" />
                 </div>
@@ -25,7 +21,10 @@
         </div>
 
         <div class="dialogs">
-            <AccessMethodDialog :open-number="openAccess" />
+            <AccessMethodDialog
+                :open-number="openAccess"
+                @confirm="againJumpPage"
+            />
         </div>
     </a-card>
 </template>
@@ -39,6 +38,11 @@ import AccessMethodDialog from './dialogs/AccessMethodDialog.vue';
 
 import { recommendList } from '../index';
 
+type rowType = {
+    params: object;
+    linkUrl: string;
+};
+
 const props = defineProps({
     cardTitle: String,
     tooltip: String,
@@ -49,15 +53,25 @@ const router = useRouter();
 const { cardTitle, tooltip, dataList } = toRefs(props);
 const openAccess = ref<number>(0);
 const openFunc = ref<number>(0);
-
+let selectRow: recommendList | rowType = {
+    params: {},
+    linkUrl: '',
+};
+// 跳转页面
 const jumpPage = (row: recommendList) => {
     if (!row.auth) return message.warning('暂无权限，请联系管理员');
-    else if (row.dialogTag == 'accessMethod') return (openAccess.value += 1);
+    selectRow = row; // 二次跳转需要使用
+    if (row.dialogTag == 'accessMethod') return (openAccess.value += 1);
     else if (row.dialogTag === 'funcTest') return (openFunc.value += 1);
     else if (row.linkUrl) {
         router.push(`${row.linkUrl}${objToParams(row.params || {})}`);
     }
 };
+// 弹窗返回后的二次跳转
+const againJumpPage = (paramsSource: object) => {
+    const params = { ...(selectRow.params || {}), ...paramsSource };
+    router.push(`${selectRow.linkUrl}${objToParams(params || {})}`);
+};
 
 const objToParams = (source: object): string => {
     if (Object.prototype.toString.call(source) === '[object Object]') {

src/views/iot/home/components/dialogs/AccessMethodDialog.vue

@@ -1,18 +1,30 @@
 <template>
+    <div ref="modal" class="access-method-dialog-container"></div>
     <a-modal
         v-model:visible="visible"
         title="选择产品"
-        style="width: 500px"
+        style="width: 700px"
         @ok="handleOk"
         show-search
         :filter-option="filterOption"
+        :getContainer="getContainer"
+        :maskClosable="false"
     >
-        <a-select
+        <a-form :model="form" name="basic" autocomplete="off" layout="vertical">
-            v-model:value="productId"
+            <a-form-item
-            style="width: 100%"
+                label="产品"
-            :options="productList"
+                name="productId"
-        >
+                :rules="[{ required: true, message: '该字段是必填字段' }]"
-        </a-select>
+            >
+                <a-select
+                    v-model:value="form.productId"
+                    style="width: 100%"
+                    :options="productList"
+                >
+                </a-select>
+            </a-form-item>
+        </a-form>
+
         <template #footer>
             <a-button key="back" @click="visible = false">取消</a-button>
             <a-button key="submit" type="primary" @click="handleOk"
@@ -23,33 +35,55 @@
 </template>
 
 <script setup lang="ts">
+import { ComponentInternalInstance } from 'vue';
 import { productItem } from '../../index';
-
+const { proxy } = getCurrentInstance() as ComponentInternalInstance;
 const props = defineProps({
     openNumber: Number,
 });
 const emits = defineEmits(['confirm']);
-const { openNumber } = toRefs(props);
 const visible = ref<boolean>(false);
+const form = ref({
+    productId: '',
+});
 
-const productId = ref<string>('');
 const productList = ref<[productItem] | []>([]);
 
+const getContainer = () => proxy?.$refs.modal as HTMLElement;
 const getOptions = () => {
     productList.value = [];
 };
 const handleOk = () => {
-    emits('confirm', productId.value);
+    emits('confirm', form.value);
     visible.value = false;
 };
 const filterOption = (input: string, option: any) => {
     return option.value.toLowerCase().indexOf(input.toLowerCase()) >= 0;
 };
-watch(openNumber, () => {
+watch(
-    visible.value = true;
+    () => props.openNumber,
-    productId.value = '';
+    () => {
-    getOptions();
+        visible.value = true;
-});
+        form.value.productId = '';
+        getOptions();
+    },
+);
 </script>
 
-<style scoped></style>
+<style lang="less" scoped>
+.access-method-dialog-container {
+    :deep(.ant-modal-body) {
+        .ant-form {
+            .ant-form-item-label {
+                color: green;
+                .ant-form-item-required {
+                    &::before {
+                        position: absolute;
+                        left: 30px;
+                    }
+                }
+            }
+        }
+    }
+}
+</style>

src/views/iot/home/components/dialogs/FuncTestDialog.vue

@@ -0,0 +1,135 @@
+<template>
+    <div ref="modal" class="func-test-dialog-container"></div>
+    <a-modal
+        v-model:visible="visible"
+        title="选择产品"
+        style="width: 700px"
+        @ok="handleOk"
+        :getContainer="getContainer"
+        :maskClosable="false"
+    >
+        <div class="search">
+            <a-select
+                v-model:value="form.key"
+                style="width: 100%"
+                :options="productList"
+            />
+            <a-select
+                v-model:value="form.relation"
+                style="width: 100%"
+                :options="productList"
+            />
+            <a-input v-model:value="form.keyValue" allow-clear />
+
+            <a-button type="primary" @click="clickSearch">
+                <template #icon><SearchOutlined /></template>
+                搜索
+            </a-button>
+            <a-button type="primary" @click="clickReset">
+                <template #icon><reload-outlined /></template>
+                重置
+            </a-button>
+        </div>
+        <a-table
+            :columns="columns"
+            :data-source="tableData"
+            :row-selection="{
+                onChange: (selectedRowKeys, selectedRows) =>
+                    (selectItem = selectedRows),
+                type: 'radio',
+            }"
+        >
+        </a-table>
+
+        
+        <template #footer>
+            <a-button key="back" @click="visible = false">取消</a-button>
+            <a-button key="submit" type="primary" @click="handleOk"
+                >确认</a-button
+            >
+        </template>
+    </a-modal>
+</template>
+
+<script setup lang="ts">
+import { ComponentInternalInstance } from 'vue';
+import { SearchOutlined, ReloadOutlined } from '@ant-design/icons-vue';
+
+import { productItem, deviceInfo } from '../../index';
+
+const { proxy } = getCurrentInstance() as ComponentInternalInstance;
+const emits = defineEmits(['confirm']);
+const props = defineProps({
+    openNumber: Number,
+});
+
+// 弹窗控制
+const visible = ref<boolean>(false);
+const getContainer = () => proxy?.$refs.modal as HTMLElement;
+const handleOk = () => {
+    emits('confirm', form.value);
+    visible.value = false;
+};
+watch(
+    () => props.openNumber,
+    () => {
+        clickReset();
+        getOptions();
+        clickSearch();
+        visible.value = true;
+    },
+);
+
+// 搜索部分
+const form = ref({
+    key: '',
+    relation: '',
+    keyValue: '',
+});
+const productList = ref<[productItem] | []>([]);
+const getOptions = () => {
+    productList.value = [];
+};
+const clickSearch = ()=>{
+
+}
+const clickReset = () => {
+    Object.entries(form.value).forEach(([prop]) => {
+        form.value[prop] = '';
+    });
+};
+
+// 表格部分
+const columns = [
+    {
+        name: 'deviceId',
+        dataIndex: 'deviceId',
+        key: 'deviceId',
+    },
+    {
+        name: 'deviceName',
+        dataIndex: 'deviceName',
+        key: 'deviceName',
+    },
+    {
+        name: 'productName',
+        dataIndex: 'productName',
+        key: 'productName',
+    },
+    {
+        name: 'createTime',
+        dataIndex: 'createTime',
+        key: 'createTime',
+    },
+    {
+        name: 'status',
+        dataIndex: 'status',
+        key: 'status',
+    },
+];
+const tableData = ref<deviceInfo[]>([]);
+const selectItem: deviceInfo | {} = {};
+const getList = () => {};
+</script>
+
+<style lang="scss" scoped></style>

src/views/iot/home/index.d.ts

@@ -12,4 +12,12 @@ export interface recommendList {
 export interface productItem {
     label: string;
     value: string
+}
+
+export interface deviceInfo {
+    deviceId: string,
+    deviceName: string,
+    productName: string,
+    createTime: string,
+    status: boolean
 }