fix: 优化

src/components/CodeMirror/index.tsx

@@ -25,9 +25,9 @@ export const CodeMirrorTsx = defineComponent({
 
     const editorRef = ref()
 
-    console.log(JSON.stringify(JSON.parse(props.bodyJson)[0]))
-
     const transDoc = () => {
+      console.log(' props.bodyType:', props.bodyType)
+
       return props.bodyType === 'javascript' ? props.bodyJson : JSON.stringify(JSON.parse(props.bodyJson), null, '\t')
     }
 

src/layout/components/Sidebar/SidebarItem.vue

@@ -5,14 +5,14 @@
     >
       <a-menu-item :key="item.path" @click="changeRoute(item)" >
         <Icon :name="item.icon"   />
-        <span>{{item.name}}</span>
+        <span style="font-size: 16px;" >{{item.name}}</span>
       </a-menu-item>
     </template>
 
       <a-sub-menu v-else :key="item.path" >
         <template #title>
           <Icon :name="item.icon"   />
-          <span>
+          <span style="font-size: 16px;" >
             {{item.name}}
           </span>
         </template>

src/pages/Iot/devOps/nowAlert.vue

@@ -18,14 +18,15 @@
       :loading="state.loading"
       :data-source="state.dataSource"
       style="margin-top: 20px;"
+      :pagination="queryParams"
+      @change="changePage"
     >
-
     </a-table>
   </a-card>
   </template>
 <script lang='ts' setup >
 import { DevOpsController } from '@/controller/iot/devOps'
-import { onMounted, reactive } from 'vue'
+import { onMounted, reactive, watch } from 'vue'
 
 const durationList = [
   { name: '30分钟', key: 1800000 },
@@ -74,6 +75,18 @@ const state = reactive({
   dataSource: []
 })
 
+watch(
+  () => queryParams.duration,
+  () => {
+    getWarnPage()
+  }
+)
+
+const changePage = ({ current }) => {
+  queryParams.page = current
+  getWarnPage()
+}
+
 const getWarnPage = async () => {
   state.loading = true
   const { data, sum } = await DevOpsController.pageWarn(queryParams)

src/pages/Iot/devOps/onlineTest.vue

@@ -123,8 +123,7 @@
                 @tabChange="onTabChange" -->
             <a-card
                 title="应用模拟器"
-                style="width: 100%;height: 100%;margin-top: 10px;position: relative;"
-
+                style="width: 100%;height: 632px;margin-top: 10px;position: relative;"
             >
                 <a-row :gutter="[8, 8]">
                     <a-col span="24" ><a-tag color="blue" style="scale: 1.2;" >命令下发</a-tag></a-col>

src/pages/Iot/devOps/statistReport.vue

@@ -1,67 +1,60 @@
 <template>
-    <!-- <a-row :gutter="[8, 8]" justify="space-between" >
-    <a-col :lg="5" :sm="1" :md="3"  v-for="item in state.statsSource" :key="item.key">
-      <a-card style="width: 300px" :title="item.name" >
-        <div style="font-size: 18px;" >{{item.value}}</div>
-      </a-card>
-    </a-col>
-  </a-row> -->
   <a-row :gutter="[8, 8]">
-    <a-col :xl="12" :xs="24" :md="24" >
+    <a-col :xl="24" :xs="24" :md="24" >
       <a-card>
-  <template #title >
-    <upload-outlined /> 数据监控
-  </template>
-  <a-row style="width: 100%;" >
-    <a-col :span="8" >
-      <div class="statis-item" >
-        <div>{{state.statsSource.transportSuccessCounter?.value}}</div>
-        <div><check-circle-two-tone  two-tone-color="#52c41a"  /> {{state.statsSource.transportSuccessCounter?.name}}</div>
-      </div>
-    </a-col>
-    <a-col :span="8" >
-      <div class="statis-item" >
-        <div>{{state.statsSource.transportFailCounter?.value}}</div>
-        <div> <close-circle-two-tone two-tone-color="#eb2f96" /> {{ state.statsSource.transportFailCounter?.name }}</div>
-      </div>
-    </a-col>
-    <a-col :span="8">
-      <div class="statis-item" >
-        <div>{{state.statsSource.transportTotalCounter?.value}}</div>
-        <div><pie-chart-two-tone /> {{state.statsSource.transportTotalCounter?.name}}</div>
-      </div>
-    </a-col>
-  </a-row>
+      <template #title >
+        <upload-outlined /> 数据监控
+      </template>
+      <a-row style="width: 100%;" >
+        <a-col :span="8" >
+          <div class="statis-item" >
+            <div class="count" >{{state.statsSource.transportSuccessCounter?.value}}</div>
+            <div><check-circle-two-tone  two-tone-color="#52c41a"  /> {{state.statsSource.transportSuccessCounter?.name}}</div>
+          </div>
+        </a-col>
+        <a-col :span="8" >
+          <div class="statis-item" >
+            <div class="count" >{{state.statsSource.transportFailCounter?.value}}</div>
+            <div> <close-circle-two-tone two-tone-color="#eb2f96" /> {{ state.statsSource.transportFailCounter?.name }}</div>
+          </div>
+        </a-col>
+        <a-col :span="8">
+          <div class="statis-item" >
+            <div class="count" >{{state.statsSource.transportTotalCounter?.value}}</div>
+            <div><pie-chart-two-tone /> {{state.statsSource.transportTotalCounter?.name}}</div>
+          </div>
+        </a-col>
+      </a-row>
       </a-card>
     </a-col>
-    <a-col :xl="12" :xs="24" :md="24" >
+    <a-col :xl="24" :xs="24" :md="24" >
       <a-card>
-  <template #title >
-    <pull-request-outlined  color="#eb2f96" />设备请求
-  </template>
-  <a-row>
-    <a-col :span="8" >
-      <div class="statis-item" >
-        <div>{{state.statsSource.transportReqSuccessCounter?.value}}</div>
-        <div> <check-circle-two-tone  two-tone-color="#52c41a"/> {{ state.statsSource.transportReqSuccessCounter?.name }}</div>
-      </div>
-    </a-col>
-    <a-col :span="8" >
-      <div class="statis-item" >
-        <div>{{state.statsSource.transportReqFailCounter?.value}}</div>
-        <div> <close-circle-two-tone two-tone-color="#eb2f96" /> {{ state.statsSource.transportReqFailCounter?.name }}</div>
-      </div>
-    </a-col>
-    <a-col :span="8" >
-      <div class="statis-item" >
-        <div>{{state.statsSource.transportReqFailCounter?.value}}</div>
-        <div><pie-chart-two-tone /> {{state.statsSource.transportReqFailCounter?.name}}</div>
-      </div>
-    </a-col>
-  </a-row>
+        <template #title >
+          <pull-request-outlined  color="#eb2f96" />设备请求
+        </template>
+        <a-row>
+          <a-col :span="8" >
+            <div class="statis-item" >
+              <div class="count" >{{state.statsSource.transportReqSuccessCounter?.value}}</div>
+              <div> <check-circle-two-tone  two-tone-color="#52c41a"/> {{ state.statsSource.transportReqSuccessCounter?.name }}</div>
+            </div>
+          </a-col>
+          <a-col :span="8" >
+            <div class="statis-item" >
+              <div class="count" >{{state.statsSource.transportReqFailCounter?.value}}</div>
+              <div> <close-circle-two-tone two-tone-color="#eb2f96" /> {{ state.statsSource.transportReqFailCounter?.name }}</div>
+            </div>
+          </a-col>
+          <a-col :span="8" >
+            <div class="statis-item" >
+              <div class="count" >{{state.statsSource.transportReqFailCounter?.value}}</div>
+              <div><pie-chart-two-tone /> {{state.statsSource.transportReqFailCounter?.name}}</div>
+            </div>
+          </a-col>
+        </a-row>
       </a-card>
     </a-col>
-    <a-col :xl="12" :xs="24" :md="24" >
+    <a-col :xl="24" :xs="24" :md="24" >
       <a-card>
         <template #title >
           <video-camera-add-outlined /> 发送到设备
@@ -69,19 +62,19 @@
         <a-row>
           <a-col :span="8" >
             <div class="statis-item" >
-              <div>{{ state.statsSource.toTransportSuccessCounter?.value }}</div>
+              <div class="count" >{{ state.statsSource.toTransportSuccessCounter?.value }}</div>
               <div> <check-circle-two-tone  two-tone-color="#52c41a"/> {{ state.statsSource.toTransportSuccessCounter?.name }}</div>
             </div>
           </a-col>
           <a-col :span="8" >
             <div class="statis-item" >
-              <div>{{ state.statsSource.toTransportFailCounter?.value }}</div>
+              <div class="count" >{{ state.statsSource.toTransportFailCounter?.value }}</div>
               <div> <close-circle-two-tone two-tone-color="#eb2f96" /> {{ state.statsSource.toTransportFailCounter?.name }}</div>
             </div>
           </a-col>
           <a-col :span="8" >
             <div class="statis-item" >
-              <div>{{ state.statsSource.toTransportTotalCounter?.value }}</div>
+              <div class="count" >{{ state.statsSource.toTransportTotalCounter?.value }}</div>
               <div><pie-chart-two-tone /> {{state.statsSource.toTransportTotalCounter?.name}}</div>
             </div>
           </a-col>
@@ -89,10 +82,6 @@
       </a-card>
     </a-col>
   </a-row>
-<!-- <check-circle-outlined /> -->
-<!-- <close-circle-outlined /> -->
-<!-- <pie-chart-outlined /> -->
-<!-- <check-circle-two-tone /> -->
 </template>
 <script lang='ts' setup >
 import { DevOpsController } from '@/controller/iot/devOps'
@@ -101,7 +90,6 @@ import {
   UploadOutlined, PullRequestOutlined, VideoCameraAddOutlined,
   CheckCircleTwoTone, CloseCircleTwoTone, PieChartTwoTone
 } from '@ant-design/icons-vue'
-// {key: string, name: string, value: string}[]
 
 const state = reactive < {
   statsSource: Partial<Record<IOT.API.DEVOPS.statsType, {
@@ -126,14 +114,6 @@ const getStats = async () => {
   })
 
   state.statsSource = obj
-  // state.statsSource = data.map(item => {
-  //   return {
-  //     key: item.label,
-  //     name: DevOpsController.statsMap.get(item.label)?.name,
-  //     value: item.dataValue
-  //   }
-  // })
-  console.log()
 }
 
 onMounted(() => {
@@ -148,4 +128,9 @@ onMounted(() => {
   justify-content: space-between;
   align-items: center;
 }
+
+.count {
+  font-size: 40px;
+}
+
 </style>

src/pages/Iot/device/components/msgTrack.vue

@@ -7,7 +7,6 @@
     <AlertTsx style="margin-top: 20px;"  >
       <template #valueSlot>
         <div v-if="state.dataSource.length" >
-          <!-- 执行情况[ 中止 ] -->
           结束时间： {{state.formatStartTime}}
         </div>
         <div v-else >
@@ -81,7 +80,7 @@ const state = reactive({
   loading: false,
   dataSource: [],
   total: 0,
-  startTime: 0,
+  startTime: new Date().getTime() - 2000,
   lastId: '',
   formatStartTime: ''
 })

src/pages/Iot/device/components/overview.vue

@@ -81,7 +81,7 @@ interface IProps {
 
 const props = defineProps<IProps>()
 
-const state = reactive < {
+const state = reactive <{
   deviceDetail: IOT.API.DEVICE.Device | null,
   visible: boolean,
   deviceLabel: string,

src/pages/Iot/doc/dataDoc.vue

@@ -0,0 +1,53 @@
+<template>
+  <a-row :gutter="[8, 8]" >
+    <a-col span="12" >
+      <a-card title="数据服务使用的前提" style="height: 400px" >
+        具备APPID, 是否有APPID 可以在数据服务-开放接口的右上方查看，不具备则创建APPID
+      </a-card>
+    </a-col>
+    <a-col span="12" >
+      <a-card title="数据接口调用流程"  style="height: 400px" >
+        <div>1. 按照需求找到要请求的方法地址，一般格式为 /api/{version}/xxx</div>
+        <div>2. 查询请求参数，对请求参数进行赋值</div>
+        <div>3. 根据方法发起HTTP 请求调用</div>
+        <div>4. 验证返回结果是否满足要求</div>
+      </a-card>
+    </a-col>
+    <a-col span="12" >
+      <a-card title="签名" style="height: 400px" >
+        <div>签名使用的方法是md5。对除了sign 外的所有url参数的值进行签名</div>
+        <code-mirror-tsx :body-json="signature"  />
+      </a-card>
+    </a-col>
+    <a-col span="12" >
+      <a-card title="数据返回结构" style="height: 400px" >
+        <code-mirror-tsx :body-json="response"  />
+      </a-card>
+    </a-col>
+  </a-row>
+
+</template>
+<script lang='ts' setup >
+import { CodeMirrorTsx } from '@/components/CodeMirror/index'
+
+const response = `
+/**
+    * code 值为200 代表请求成功，其他状态码为失败，当失败时候，msg 会提示失败原因
+    * data 是查询的数据集合
+    */
+{
+    "code":200,
+    "msg":"222",
+    "data":[],
+    "sum":0 
+  }`
+
+const signature = `
+      原始请求地址：/api/v1/device?page=1&pageSize=20&appId=123
+      进行签名 分别对 page,pageSize,appId 的值进行md5
+      sign = md5(page+pageSize+appId) // + 代表字符串拼接
+      签名后请求地址：/api/v1/device?page=1&pageSize=20&appId=123&sign=xxxxxxxxx`
+
+</script>
+<style lang='less' scoped >
+</style>

src/pages/Iot/doc/deviceDoc.vue

@@ -0,0 +1,165 @@
+<template>
+  <a-alert
+    message="设备接入前提"
+    type="info"
+    show-icon
+  >
+  <template #description>
+    <div>1. 创建了模型，并已经知道模型id,模型中定义的传输协议</div>
+    <div>2. 创建了设备，能够查看设备id 、设备密钥"</div>
+  </template>
+  </a-alert>
+  <a-alert
+    message="支持数据格式"
+    type="info"
+    show-icon
+    style="margin-top: 10px;"
+  >
+  <template #description>
+    <div>1. JSON</div>
+    <div>2. 二进制码流</div>
+  </template>
+  </a-alert>
+
+  <a-alert
+    message="设备接入"
+    type="info"
+    show-icon
+    style="margin-top: 10px;"
+  >
+  <template #description>
+    <div>根据模型中定义的传输协议选择对应的协议接入方式</div>
+  </template>
+  </a-alert>
+  <a-row style="margin-top: 20px;" :gutter="[8, 8]" >
+    <a-col :xs="24" :md="24" :xl="24" >
+      <a-card
+        title="平台支持协议: HTTP 😊"
+      >
+        <a-row>
+          <a-col :span="24" ><h3>上报数据</h3></a-col>
+          <a-col :span="24" >
+            <a-form :label-col="{ span: 3 }" >
+              <a-form-item  label="请求地址" >
+                api/device/{deviceId}/attributes
+              </a-form-item>
+              <a-form-item  label="deviceId" >
+                地址栏中的{deviceId} 在使用中用设备id替换
+              </a-form-item>
+              <a-form-item  label="请求方法" >
+                POST
+              </a-form-item>
+              <a-form-item  label="其他" >
+                <div>1. 请求头中添加名称为secret的请求头，对应的值是设备密钥</div>
+                <div>2. body 中存放设备数据</div>
+              </a-form-item>
+            </a-form>
+          </a-col>
+        </a-row>
+        <a-divider />
+        <a-row style="margin-top: 10px;" >
+          <a-col><h3>接受数据</h3></a-col>
+          <a-col span="24" >暂不支持</a-col>
+        </a-row>
+      </a-card>
+    </a-col>
+    <a-col :xs="24" :md="24" :xl="24" >
+      <a-card
+        title="平台支持协议: MQTT 😊"
+      >
+      <a-row>
+          <a-col span="24" ><h3>连接</h3></a-col>
+          <a-form :label-col="{ span: 4 }" >
+              <a-form-item label="注意">
+                 暂时不支持证书接入
+              </a-form-item>
+              <a-form-item label="描述"  >
+                <a-descriptions  bordered>
+                  <a-descriptions-item :span="24" label="clientId(客户端id,客户端标识)">设备id</a-descriptions-item>
+                  <a-descriptions-item :span="24" label="username(用户名)">模型id</a-descriptions-item>
+                  <a-descriptions-item :span="24" label="password(密码)">设备密钥</a-descriptions-item>
+                </a-descriptions>
+              </a-form-item>
+          </a-form>
+      </a-row>
+      <a-divider />
+        <a-row>
+          <a-col span="24" ><h3>发布数据</h3></a-col>
+          <a-col span="24" >
+            <a-form :label-col="{ span: 3 }" >
+              <a-form-item  label="发布主题 " >
+                api/{deviceId}/attributes
+              </a-form-item>
+              <a-form-item  label="说明" >
+                deviceId 是设备id,一般情况下与连接的设备id一致，特殊情况是 连接时候使用的设备id 是网关，这里的设备id 是网关的子设备id
+              </a-form-item>
+              <a-form-item  label="参数" >
+                发布数据格式可以是json 以及任意输入
+              </a-form-item>
+            </a-form>
+          </a-col>
+          <a-divider />
+          <a-col span="24"  >
+            <h3>订阅</h3>
+          </a-col>
+          <a-col span="24" >
+            <a-form :label-col="{ span: 3 }" >
+              <a-form-item label="订阅">
+                当前版本，无论设备是否订阅，平台都会下发消息和命令到设备，所以可以不订阅
+              </a-form-item>
+              <a-form-item label="主题" >
+                 /sub/command
+              </a-form-item>
+            </a-form>
+          </a-col>
+          <a-divider />
+          <a-col span="24"  >
+            <h3>接受数据</h3>
+          </a-col>
+          <a-col span="24" >
+            <a-form :label-col="{ span: 3 }" >
+              <a-form-item label="">
+                MQTT 连接成功之后
+              </a-form-item>
+              <a-form-item label="" >
+                在设备-云端下发-下发数据/下发命令 界面可以选择下发的数据
+              </a-form-item>
+            </a-form>
+          </a-col>
+        </a-row>
+      </a-card>
+    </a-col>
+    <a-col :xs="24" :md="24" :xl="24" >
+      <!--
+        style="height: 1090px;" -->
+      <a-card
+        title="平台支持协议: COAP 😊"
+      >
+        <a-row>
+          <a-col :span="24" ><h3>上报数据</h3></a-col>
+          <a-col :span="24" >
+            <a-form :label-col="{ span: 3 }" >
+              <a-form-item  label="地址" >
+                api/{deviceId}/attributes
+              </a-form-item>
+              <a-form-item  label="deviceId" >
+                地址栏中的{deviceId} 在使用中用设备id替换
+              </a-form-item>
+              <a-form-item  label="请求方法" >
+                POST
+              </a-form-item>
+              <a-form-item  label="其他" >
+                options 中第一个other options 是设备密钥,也就是请求头的第一项是设备密钥
+              </a-form-item>
+            </a-form>
+          </a-col>
+        </a-row>
+      </a-card>
+    </a-col>
+  </a-row>
+
+</template>
+<script lang='ts' setup >
+</script>
+<style lang='less' scoped >
+</style>

src/router/index.ts

@@ -79,7 +79,7 @@ const routes: Array<ROUTER.RoutesProps> = [
       },
       {
         path: '/devOps',
-        name: ' 监控运维',
+        name: '监控运维',
         redirect: '/devOps/report',
         icon: 'CodeOutlined',
         children: [
@@ -127,6 +127,18 @@ const routes: Array<ROUTER.RoutesProps> = [
             component: () => import('@/pages/iot/dataServer/openApi.vue')
           }
         ]
+      },
+      {
+        path: '/deviceDoc',
+        name: '设备接入文档',
+        component: () => import('@/pages/iot/doc/deviceDoc.vue'),
+        icon: 'BookOutlined'
+      },
+      {
+        path: '/dataDoc',
+        name: '数据服务文档',
+        component: () => import('@/pages/iot/doc/dataDoc.vue'),
+        icon: 'CoffeeOutlined'
       }
     ]
   },