halfwidth"> 
            orgId: item.id + '',
238 
            id: item.code,
239 
            label: item.name,
240 
            pid: item.parentCode
241 
          })
242 
          this.nextDepartment(item.departments, arr)
243 
        })
244 
      }
245 
    },
246 
    $_onDeleteIconClick (file) {
247 
      this.$refs.uploader.removeFile(file)
248 
    },
249 
    $_onUploadRemoveFlie (file, fileList) {
250 
      this.uploadList = fileList
251 
    },
252 
    $_onUploadPreviewFlie (file) {
253 
      console.log(file)
254 
    },
255 
    $_onUploadProgress (e, file) {
256 
      console.log(e)
257 
      console.log(file)
258 
    },
259 
    $_onUploadSuccess (res, file) {
260 
      this.imgUrl = res.data.data.toolPictureUrl
261 
      this.addDeviceModalForm.pictureUrl = res.data.data.pictureUrl
262 
      // 因为演示用的上传服务器返回数据格式的原因，这里模拟添加 url
263 
      console.log(file)
264 
      this.uploadList.push(file)
265 
    },
266 
    $_onUploadRemoveFile () { },
267 
    $_onUploadExceededSize () { },
268 
    $_onUploadError (errMsg, response, file) {
269 
      console.log(file)
270 
      console.log(errMsg.message)
271 
      this.$Notice.warning({
272 
        title: `文件${file.name}上传失败`,
273 
        desc:
274 
          '原因：' + errMsg
275 
      })
276 
    },
277 
    $_onUploadFileExtError (file, files) {
278 
      this.$Notice.warning({
279 
        title: '文件格式不正确',
280 
        desc:
281 
          '文件 ' + file.name + ' 格式不正确，请上传 jpg 或 png 格式的图片。'
282 
      })
283 
      console.log(files)
284 
    },
285 
    $_onUploadFileExceededSize (file) {
286 
      this.$Notice.warning({
287 
        title: '超出文件大小限制',
288 
        desc: '文件 ' + file.name + ' 太大，不能超过 2M。'
289 
      })
290 
    },
291 
    $_onUploadFormatError () { },
292 
    $_onUploadBeforeUpload () {
293 
      const check = this.uploadList.length < 5
294 
      if (!check) {
295 
        this.$Notice.warning({
296 
          title: '最多只能上传 5 张图片。'
297 
        })
298 
      }
299 
      return check
143 
    }
300 
    }
144 
  }
301 
  }
145 
}
302 
}
146 
</script>
303 
</script>
147
304
148 
<style>
149
305 
<style lang="scss" scoped>
306 
.demo-upload-list{
307 
  .upload--drag{
308 
  background-color:#FFFFFF
309 
}
310 
}
311 
.picture-upload{
312 
  display:flex;
313 
  flex-direction:column;
314 
  width:100%;
315 
  height: 100%;
316 
  justify-content: center;
317 
  .upload-icon{
318 
    align-items:center;
319 
    justify-content:center;
320 
    color:white;
321 
    display: flex;
322 
  }
323 
  .aidicon.aidicon-plus-outline:before{
324 
    width: 32px;
325 
    height: 32px;
326 
    display: flex;
327 
    justify-content: center;
328 
    align-items: center;
329 
    background-color: #D0D0D0;
330 
    border-radius:45px;
331 
  }
332 
}
150 
</style>
333 
</style>

+ 1 - 2
security-protection-platform/src/modules/usermana/index.vue
Wyświetl plik

64 
        </t-pager>
 64 
        </t-pager>
65 
      </div>
 65 
      </div>
66 
    </t-card>
 66 
    </t-card>
67 
    <add-user-modal :department-types-list="departmentTypesList" :company-list="companyTypesList" :visible.sync="addDeviceModal"></add-user-modal>
67 
    <add-user-modal :company-list="companyTypesList" :visible.sync="addDeviceModal"></add-user-modal>
68 
    <auditModal :auditshow.sync="auditshow" :auditid="auditid" :company-name="companyName" @refeshUserList="getUserList"></auditModal>
 68 
    <auditModal :auditshow.sync="auditshow" :auditid="auditid" :company-name="companyName" @refeshUserList="getUserList"></auditModal>
69 
  </div>
 69 
  </div>
70 
</template>
 70 
</template>
306 
    // 显示新增设备对话框
 306 
    // 显示新增设备对话框
307 
    showAddDeviceModal () {
 307 
    showAddDeviceModal () {
308 
      this.addDeviceModal = true
 308 
      this.addDeviceModal = true
309 
      console.log(this.addDeviceModal)
310 
    },
 309 
    },
311 
    async editDeviceData (id) {
 310 
    async editDeviceData (id) {
312 
      const res = await sysapi.getDeviceInfo(id)
 311 
      const res = await sysapi.getDeviceInfo(id)

+ 154 - 81
security-protection-platform/src/modules/videoSurveillance/index.vue
Wyświetl plik

11 
        <t-option v-for="(item,index) in organizationList" :key="index" :value="item.id">{{ item.name }}</t-option>
 11 
        <t-option v-for="(item,index) in organizationList" :key="index" :value="item.id">{{ item.name }}</t-option>
12 
      </t-select>
 12 
      </t-select>
13 
    </div>
 13 
    </div>
14 
    <div class="page-bottom">
15 
      <div v-for="(item,index) in videoList" :key="index" :value="item.resourceToolId" style="width:400px;margin:24px 0px 0 24px;">
16 
        <videoPlayer
17 
          ref="videoPlayer"
18 
          :options="videoOptions"
19 
          :playsinline="true"
20 
          class="vjs-custom-skin videoPlayer"
21 
        />
22 
        <!-- <rtmp-video :list="getVideoPlayList(item)" @goDistinguishRecord="goDistinguishRecord(item.resourceToolId)" @videoReplay="handleReview"></rtmp-video> -->
23 
      </div>
14
15 
    <div class="page-bottom grid-demo">
16 
      <t-col v-for="(item,index) in videoList" :span="viewLayoutSpan" :key="index" :value="item.resourceToolId" style="margin-top:24px">
17 
        <video-player
18 
            :ref="'video'+index"
19 
            :options="videoOptions[index]"
20 
            :playsinline="false"
21 
            :events="events"
22 
            class="vjs-custom-skin videoPlayer"
23 
            @dblclick="handlefullscreenchange"
24 
        ></video-player>
25 
      </t-col>
26 
      <!-- <rtmp-video :list="getVideoPlayList(item)" @goDistinguishRecord="goDistinguishRecord(item.resourceToolId)" @videoReplay="handleReview"></rtmp-video> -->
24 
    </div>
 27 
    </div>
25 
    <t-pager :page-size="videoPageSize" :current="videoCurrent" :total="videoTotal" :sizer-range="[ 5, 10, 20, 30 ]" class="pager" show-elevator @on-change="onChangeGate"></t-pager>
28 
    <t-pager :page-size="videoPageSize" :current="videoCurrent" :total="videoTotal" :sizer-range="[ 1, 4, 9, 16 ]" class="pager" show-elevator @on-change="onChangeGate"></t-pager>
26 
    <replay-dialog :list="replayList" :visibled.sync="showReplayDialog" @get-list="queryMonitorVideoLog" />
 29 
    <replay-dialog :list="replayList" :visibled.sync="showReplayDialog" @get-list="queryMonitorVideoLog" />
27 
  </div>
 30 
  </div>
28 
</template>
 31 
</template>
30 
import sysapi from '@/api/videoSurveillance'
 33 
import sysapi from '@/api/videoSurveillance'
31 
import RtmpVideo from './components/rtmpVideoPlay'
 34 
import RtmpVideo from './components/rtmpVideoPlay'
32 
import ReplayDialog from './components/ReplayDialog'
 35 
import ReplayDialog from './components/ReplayDialog'
33 
import VideoPlayer from '@/components/VideoPlayer'
34 
import formatDateTime from '@/utils/formatDateTime.js'
 36 
import formatDateTime from '@/utils/formatDateTime.js'
35 
import videojs from 'video.js'
 37 
import videojs from 'video.js'
36 
window.videojs = videojs
 38 
window.videojs = videojs
37
39
38 
require('videojs-flash')
39 
require('videojs-playlist')
40 
require('video.js/dist/lang/zh-CN.js')
 40 
require('video.js/dist/lang/zh-CN.js')
41 
require('video.js/dist/video-js.min.css')
 41 
require('video.js/dist/video-js.min.css')
42
42
43 
export default {
 43 
export default {
44 
  components: { ReplayDialog, VideoPlayer, RtmpVideo },
44 
  components: { ReplayDialog, RtmpVideo },
45 
  filters: {
 45 
  filters: {
46 
    handleText (value) {
 46 
    handleText (value) {
47 
      if (!value) return ''
 47 
      if (!value) return ''
53 
  },
 53 
  },
54 
  data () {
 54 
  data () {
55 
    return {
 55 
    return {
56 
      videoOptions: {
57 
        autoplay: true, // 如果true,浏览器准备好时开始回放。
58 
        muted: true, // 默认情况下将会消除任何音频。
59 
        loop: false, // 导致视频一结束就重新开始。
60 
        preload: 'auto', // 建议浏览器在<video>加载元素后是否应该开始下载视频数据。auto浏览器选择最佳行为,立即开始加载视频（如果浏览器支持）
61 
        language: 'zh-CN',
62 
        aspectRatio: '13:10', // 将播放器置于流畅模式，并在计算播放器的动态大小时使用该值。值应该代表一个比例 - 用冒号分隔的两个数字（例如"16:9"或"4:3"）
63 
        // fluid: true, // 当true时，Video.js player将拥有流体大小。换句话说，它将按比例缩放以适应其容器。
64 
        // 是否流体自适应容器宽高
65 
        fluid: true,
66 
        // // 设置视频播放器的显示宽度（以像素为单位）
67 
        // width: '100px',
68 
        // // 设置视频播放器的显示高度（以像素为单位）
69 
        // height: '300px',
70 
        sources: [{
71 
          withCredentials: false,
72 
          type: 'application/x-mpegURL', // 这里的种类支持很多种：基本视频格式、直播、流媒体等，具体可以参看git网址项目
73 
          src: 'http://10.19.90.34:1080/live/1.m3u8' // url地址
74 
        }],
75 
        flash: { hls: { withCredentials: false } },
76 
        html5: { hls: { withCredentials: false } },
77 
        notSupportedMessage: '此视频暂无法播放，请稍后再试', // 允许覆盖Video.js无法播放媒体源时显示的默认信息。
78 
        controlBar: {
79 
          timeDivider: false,
80 
          // durationDisplay: true,
81 
          remainingTimeDisplay: false,
82 
          fullscreenToggle: true, // 全屏按钮,
83 
          pictureInPictureToggle: false
84 
        }
85 
      },
56 
      viewLayoutSpan: 3,
57 
      events: ['fullscreenchange'],
58 
      videoOptions: [],
86 
      videoCurrent: 1, // 大门分页数据
 59 
      videoCurrent: 1, // 大门分页数据
87 
      videoPageSize: 10, // 大门分页数据
 60 
      videoPageSize: 10, // 大门分页数据
88 
      videoTotal: 0, // 大门分页总数
 61 
      videoTotal: 0, // 大门分页总数
105 
      // endDay: '2020-12-19 20:14:00'
 78 
      // endDay: '2020-12-19 20:14:00'
106 
    }
 79 
    }
107 
  },
 80 
  },
81 
  computed: {
82 
    player() {
83 
      return this.$refs.videoPlayer1.player
84 
    }
85 
  },
108 
  mounted () {
 86 
  mounted () {
109 
    this.getWindFiledList() // 获取风场列表
 87 
    this.getWindFiledList() // 获取风场列表
110 
  },
 88 
  },
111 
  methods: {
 89 
  methods: {
112 
    getVideoPlayList (item) {
113 
      return [{
114 
        fileId: item.videoUrl,
115 
        fileType: 'rtmp/flv',
116 
        id: item.resourceToolId
117 
      }]
90 
    // 修改视频组件控制栏的元素以及样式
91 
    async createMyButton () {
92 
      this.$nextTick(() => {
93 
        const bars = document.querySelectorAll('.vjs-control-bar')
94 
        let time = document.getElementsByClassName('vjs-current-time vjs-time-control vjs-control')
95 
        let start = document.getElementsByClassName('vjs-play-control vjs-control vjs-button')
96 
        let volume = document.getElementsByClassName('vjs-volume-panel vjs-control vjs-volume-panel-horizontal')
97 
        let text = document.getElementsByClassName('vjs-live-control vjs-control')
98 
        bars.forEach((item, index) => {
99 
          time.forEach(item => {
100 
            item.remove()
101 
          })
102 
          start.forEach(item => {
103 
            item.remove()
104 
          })
105 
          volume.forEach(item => {
106 
            item.remove()
107 
          })
108 
          text.forEach(item => {
109 
            item.remove()
110 
          })
111 
          let txt = document.createElement('span')
112 
          txt.innerHTML = '集控室（人脸识别）'
113 
          txt.style.marginLeft = '12px'
114 
          let btn = document.createElement('button')
115 
          btn.style.color = 'white'
116 
          btn.style.cursor = 'pointer'
117 
          btn.style.marginLeft = 'auto'
118 
          btn.className = 'aidicon aidicon-image-outline'
119 
          btn.setAttribute('title', '识别记录')
120 
          btn.addEventListener('click', () => {
121 
            this.goDistinguishRecord()
122 
          })
123 
          let btn1 = document.createElement('button')
124 
          btn1.style.color = 'white'
125 
          btn1.style.cursor = 'pointer'
126 
          btn1.className = 'aidicon aidicon-piechart-outline'
127 
          btn1.setAttribute('title', '视频回放')
128 
          btn1.addEventListener('click', () => {
129 
            this.handleReview(this.videoList[index].id)
130 
          })
131 
          item.appendChild(txt)
132 
          item.appendChild(btn)
133 
          item.appendChild(btn1)
134 
        })
135 
      })
118 
    },
 136 
    },
119 
    // 获取场景列表
 137 
    // 获取场景列表
120 
    getSceneList () {
 138 
    getSceneList () {
124 
        if (element.id === this.gateFieldData) {
 142 
        if (element.id === this.gateFieldData) {
125 
          sysapi.getMonitorScene(this.organizationList[index].id).then((resp) => {
 143 
          sysapi.getMonitorScene(this.organizationList[index].id).then((resp) => {
126 
            this.sceneList = resp.data.data || []
 144 
            this.sceneList = resp.data.data || []
145 
            if (resp.data.data[0].monitorViewLayout === '1X1') {
146 
              this.viewLayoutSpan = 10
147 
              this.videoPageSize = 1
148 
            } else if (resp.data.data[0].monitorViewLayout === '2X2') {
149 
              this.viewLayoutSpan = 6
150 
              this.videoPageSize = 4
151 
            } else if (resp.data.data[0].monitorViewLayout === '3X3') {
152 
              this.viewLayoutSpan = 4
153 
              this.videoPageSize = 9
154 
            } else if (resp.data.data[0].monitorViewLayout === '4X4') {
155 
              this.viewLayoutSpan = 3
156 
              this.videoPageSize = 16
157 
            }
127 
            this.tabClick(this.sceneList[0].monitorSceneId)
 158 
            this.tabClick(this.sceneList[0].monitorSceneId)
128 
          })
 159 
          })
129 
        }
 160 
        }
170 
        console.log(err)
 201 
        console.log(err)
171 
      })
 202 
      })
172 
    },
 203 
    },
204 
    handlefullscreenchange(val) {
205 
      // 因为我是又封装了一个组件，打印val会有相应所需的属性，全屏状态为：isFullscreen_
206 
      val.isFullscreen_ = !val.isFullscreen_
207 
      // this.$emit('fullscreenchange', val)
208 
    },
173 
    // 获得风场大门数据
 209 
    // 获得风场大门数据
174 
    getVideoSurveillanceData () {
 210 
    getVideoSurveillanceData () {
175 
      var id = this.tabId
 211 
      var id = this.tabId
176 
      this.paramsObj.page = this.videoCurrent
 212 
      this.paramsObj.page = this.videoCurrent
177 
      sysapi.getVideoSurveillanceDataForPage({ params: { monitorSceneId: id, pageNumber: this.videoCurrent, pageSize: this.videoPageSize} })
178 
      .then(res => {
179 
        debugger
180 
        this.videoList = res.data.data.data
181 
        this.videoTotal = res.data.data.total
213 
      sysapi.getVideoSurveillanceData({ params: { monitorSceneId: id } }).then(res => {
214 
        this.videoList = res.data.data
215 
        for (let i in res.data.data) {
216 
          let obj = {
217 
            autoplay: true, // 如果true,浏览器准备好时开始回放。
218 
            muted: true, // 默认情况下将会消除任何音频。
219 
            loop: false, // 导致视频一结束就重新开始。
220 
            preload: 'auto', // 建议浏览器在<video>加载元素后是否应该开始下载视频数据。auto浏览器选择最佳行为,立即开始加载视频（如果浏览器支持）
221 
            language: 'zh-CN',
222 
            aspectRatio: '13:10', // 将播放器置于流畅模式，并在计算播放器的动态大小时使用该值。值应该代表一个比例 - 用冒号分隔的两个数字（例如"16:9"或"4:3"）
223 
            // fluid: true, // 当true时，Video.js player将拥有流体大小。换句话说，它将按比例缩放以适应其容器。
224 
            // 是否流体自适应容器宽高
225 
            fluid: true,
226 
            // // 设置视频播放器的显示宽度（以像素为单位）
227 
            // width: '100px',
228 
            // // 设置视频播放器的显示高度（以像素为单位）
229 
            // height: '300px',
230 
            sources: [{
231 
              withCredentials: false,
232 
              type: 'application/x-mpegURL', // 这里的种类支持很多种：基本视频格式、直播、流媒体等，具体可以参看git网址项目
233 
              src: res.data.data[i].videoUrl // url地址
234 
            }],
235 
            flash: { hls: { withCredentials: false } },
236 
            html5: { hls: { withCredentials: false } },
237 
            notSupportedMessage: '此视频暂无法播放，请稍后再试', // 允许覆盖Video.js无法播放媒体源时显示的默认信息。
238 
            controlBar: {
239 
              timeDivider: false,
240 
              durationDisplay: false,
241 
              remainingTimeDisplay: false,
242 
              fullscreenToggle: true, // 全屏按钮,
243 
              pictureInPictureToggle: false
244 
            }
245 
          }
246 
          this.videoOptions.push(obj)
247 
        }
248 
        this.createMyButton()
182 
      })
 249 
      })
183 
    },
 250 
    },
184 
    // 进入识别记录界面
 251 
    // 进入识别记录界面
247 
      }
 314 
      }
248 
    }
 315 
    }
249 
  }
 316 
  }
250 
  .pager {
317 
.pager {
251 
    margin-right: auto;
 318 
    margin-right: auto;
252 
    margin: 21px 0px 24px 0;
 319 
    margin: 21px 0px 24px 0;
253 
    float: right;
 320 
    float: right;
254 
  }
 321 
  }
255 
  .btn-primary,
256 
  .radio-group-button .form-radio:checked,
257 
  .radio-group-button .form-radio[checked] {
258 
    color: #0089d4;
259 
    background-color: #fff;
260 
    border: 1px solid #0089d4;
261 
  }
262 
  .btn-secondary,
263 
  .radio-group-button .form-radio,
264 
  .checkbox-group--button .form-checkbox .form-checkbox__inner,
265 
  .btn-dashed-secondary,
266 
  .btn-outline-secondary {
267 
    background: none;
268 
  }
269 
  .video-js .vjs-control:focus, .video-js .vjs-control:focus:before, .video-js .vjs-control:hover:before{
270 
    color:#0089d4;
271 
    text-shadow: none;
272 
  }
273 
  .vjs-control-bar{
274 
    justify-content: flex-end;
275 
  }
276 
  .video-js .vjs-control{
322 
.vjs-custom-skin > .video-js .vjs-control-bar .vjs-fullscreen-control{
323 
  height:38px !important;
324 
}
325 
.video-js .vjs-control{
277 
    cursor: pointer;
 326 
    cursor: pointer;
327 
    width: 28px;
328 
    margin-right:12px;
278 
  }
 329 
  }
279 
.video-js .vjs-fullscreen-control{
280 
  order:2;
330 
.vjs-control-bar{
331 
    display: flex;
332 
    justify-content: center;
333 
    align-items: center;
334 
}
335 
.video-js button{
336 
  font-size:16px;
337 
}
338 
.aidicon-image-outline:hover{
339 
  color: #0089d4 !important;
340 
}
341 
.aidicon-piechart-outline:hover{
342 
  color: #0089d4 !important;
343 
}
344 
.vjs-icon-placeholder:hover{
345 
  color: #0089d4 !important;
346 
}.vjs-icon-placeholder{
347 
  font-size: 13px;
348 
  display: flex;
349 
  justify-content: center;
350 
  align-items: center;
351 
}
352 
.vjs-tech {
353 
  pointer-events: none;
281 
}
 354 
}
282 
}
 355 
}
283 
</style>
 356 
</style>

+ 1 - 1
security-protection-service/src/main/java/com/ai/bss/security/protection/controller/EmployeeManagementController.java
Wyświetl plik

133 
	@ResponseBody
 133 
	@ResponseBody
134 
	@RequestMapping("/uploadEmployeePicture")
 134 
	@RequestMapping("/uploadEmployeePicture")
135 
	public CommonResponse<Map<String, String>> uploadEmployeePicture(
 135 
	public CommonResponse<Map<String, String>> uploadEmployeePicture(
136 
			@RequestParam(value = "picture") MultipartFile meFile, @RequestParam(required = false) String pictureUrl)
136 
			@RequestParam(value = "file") MultipartFile meFile, @RequestParam(required = false) String pictureUrl)
137 
			throws Exception {
 137 
			throws Exception {
138 
		if (meFile == null || StringUtils.isEmpty(meFile.getOriginalFilename())) {
 138 
		if (meFile == null || StringUtils.isEmpty(meFile.getOriginalFilename())) {
139 
			return CommonResponse.fail("500", "上传失败");
 139 
			return CommonResponse.fail("500", "上传失败");

+ 16 - 1
security-protection-service/src/main/java/com/ai/bss/security/protection/controller/InAndOutRecordController.java
Wyświetl plik

19 
import org.springframework.web.bind.annotation.ResponseBody;
 19 
import org.springframework.web.bind.annotation.ResponseBody;
20
20
21 
import java.util.HashMap;
 21 
import java.util.HashMap;
22 
import java.util.List;
22 
import java.util.Map;
 23 
import java.util.Map;
23
24
24 
/**
 25 
/**
72
73
73 
		return aiIdenLogManageService.queryOneAiIdenLog(aiIdenLogId);
 74 
		return aiIdenLogManageService.queryOneAiIdenLog(aiIdenLogId);
74 
	}
 75 
	}
75
76
77 
	/**
78 
	 * 首页查询进出记录
79 
	 * @return
80 
	 * @throws Exception
81 
	 */
82 
	@ResponseBody
83 
	@RequestMapping("/queryHomeLastInAndOutRecord")
84 
	public CommonResponse<List<Map<String, Object>>> queryHomeLastInAndOutRecord(@RequestParam String monitorSceneId) throws Exception {
85 
		Map<String, String> params=new HashMap<String, String>();
86 
		params.put("sceneId", monitorSceneId);
87 
		params.put("aiIdenModel", EbcConstant.AI_MODEL_FACE);
88
89 
		return aiIdenLogManageService.selectLastAiIdenLog(params);
90 
	}
76 
}
 91 
}

+ 2 - 2
security-protection-service/src/main/java/com/ai/bss/security/protection/controller/ResourceToolManageController.java
Wyświetl plik

154 
	@ResponseBody
 154 
	@ResponseBody
155 
	@RequestMapping("/uploadResourceToolPicture")
 155 
	@RequestMapping("/uploadResourceToolPicture")
156 
	public CommonResponse<Map<String, String>> uploadResourceToolPicture(
 156 
	public CommonResponse<Map<String, String>> uploadResourceToolPicture(
157 
			@RequestParam(value = "picture") MultipartFile meFile, @RequestParam(required = false) String pictureUrl)
157 
			@RequestParam(value = "file") MultipartFile meFile, @RequestParam(required = false) String pictureUrl)
158 
			throws Exception {
 158 
			throws Exception {
159 
		if (meFile == null || StringUtils.isEmpty(meFile.getOriginalFilename())) {
 159 
		if (meFile == null || StringUtils.isEmpty(meFile.getOriginalFilename())) {
160 
			return CommonResponse.fail("500", "上传失败");
 160 
			return CommonResponse.fail("500", "上传失败");
166 
	}
 166 
	}
167
167
168 
	/**
 168 
	/**
169 
	 * 根据设备CODE获取场景、AI任务等相关信息
169 
	 * 根据设备CODE获取AI任务等相关信息
170 
	 * @param meFile
 170 
	 * @param meFile
171 
	 * @return
 171 
	 * @return
172 
	 * @throws Exception
 172 
	 * @throws Exception

+ 122 - 12
security-protection-service/src/main/java/com/ai/bss/security/protection/service/impl/AiIdenLogManageServiceImpl.java
Wyświetl plik

1 
package com.ai.bss.security.protection.service.impl;
 1 
package com.ai.bss.security.protection.service.impl;
2
2
3 
import java.math.BigDecimal;
3 
import java.util.ArrayList;
 4 
import java.util.ArrayList;
4 
import java.util.HashMap;
 5 
import java.util.HashMap;
5 
import java.util.List;
 6 
import java.util.List;
13 
import com.ai.abc.api.model.CommonRequest;
 14 
import com.ai.abc.api.model.CommonRequest;
14 
import com.ai.abc.api.model.CommonResponse;
 15 
import com.ai.abc.api.model.CommonResponse;
15 
import com.ai.bss.components.common.model.PageBean;
 16 
import com.ai.bss.components.common.model.PageBean;
17 
import com.ai.bss.components.minio.config.MinioConfig;
16 
import com.ai.bss.security.protection.model.EbcMonitorVideoLog;
 18 
import com.ai.bss.security.protection.model.EbcMonitorVideoLog;
17 
import com.ai.bss.security.protection.service.interfaces.AiIdenLogManageService;
 19 
import com.ai.bss.security.protection.service.interfaces.AiIdenLogManageService;
18 
import com.ai.bss.security.protection.service.interfaces.CharSpecService;
 20 
import com.ai.bss.security.protection.service.interfaces.CharSpecService;
27 
import com.ai.bss.work.safety.service.api.AiTaskQuery;
 29 
import com.ai.bss.work.safety.service.api.AiTaskQuery;
28 
import com.alibaba.fastjson.JSON;
 30 
import com.alibaba.fastjson.JSON;
29 
import com.alibaba.fastjson.JSONArray;
 31 
import com.alibaba.fastjson.JSONArray;
32 
import com.alibaba.fastjson.JSONObject;
30 
import com.alibaba.fastjson.TypeReference;
 33 
import com.alibaba.fastjson.TypeReference;
31
34
32 
@Service
 35 
@Service
50 
	@Autowired
 53 
	@Autowired
51 
	private MonitorVideoLogManageService monitorVideoLogManageService;
 54 
	private MonitorVideoLogManageService monitorVideoLogManageService;
52
55
56 
	@Autowired
57 
	private MinioConfig minioConfig;
58
53 
	@Override
 59 
	@Override
54 
	public CommonResponse<PageBean<Map<String, Object>>> queryPageAiIdenLog(Map<String, Object> params, int pageNumber,
 60 
	public CommonResponse<PageBean<Map<String, Object>>> queryPageAiIdenLog(Map<String, Object> params, int pageNumber,
55 
			int pageSize) throws Exception {
 61 
			int pageSize) throws Exception {
68 
		for (Map<String, Object> dataMap : response.getData().getData()) {
 74 
		for (Map<String, Object> dataMap : response.getData().getData()) {
69 
			dataMap.put("taskExecuteTime", DateUtil.formatObjectToDate(dataMap.get("taskExecuteTime")));
 75 
			dataMap.put("taskExecuteTime", DateUtil.formatObjectToDate(dataMap.get("taskExecuteTime")));
70 
			dataMap.put("idenPictureSnapDate", DateUtil.formatObjectToDate(dataMap.get("idenPictureSnapDate")));
 76 
			dataMap.put("idenPictureSnapDate", DateUtil.formatObjectToDate(dataMap.get("idenPictureSnapDate")));
71
77
72 
			// 结果详情
 78 
			// 结果详情
73 
			String idenResultArr = dataMap.get("idenResult") == null ? "" : String.valueOf(dataMap.get("idenResult"));
74 
			if (StringUtils.isNotEmpty(idenResultArr)) {
75 
				List<Map<String, String>> idenResultList = JSONArray.parseObject(idenResultArr, List.class);
76 
				if (!CollectionUtils.isEmpty(idenResultList)) {
77 
					dataMap.put("idenResult", idenResultList.get(0));
78 
					//dataMap.putAll(idenResultList.get(0));
79 
			String idenResultString = dataMap.get("idenResult") == null ? ""
80 
					: String.valueOf(dataMap.get("idenResult"));
81 
			if (StringUtils.isNotEmpty(idenResultString)) {
82 
				Object idenResultObject = JSON.parse(idenResultString);
83 
				if (idenResultObject instanceof JSONObject) {
84 
					Map<String, String> idenResultMap = JSON.parseObject(idenResultString, Map.class);
85 
					dataMap.putAll(idenResultMap);
86
87 
					if (idenResultMap.get("simi") != null) {
88 
						Object simiObject = idenResultMap.get("simi");
89 
						BigDecimal simiBigDecimal = new BigDecimal(String.valueOf(simiObject));
90 
						float simi = simiBigDecimal.multiply(new BigDecimal("100"))
91 
								.setScale(2, BigDecimal.ROUND_HALF_UP).floatValue();
92 
						dataMap.put("simi", simi + "%");
93 
					}
94
95 
				} else if (idenResultObject instanceof JSONArray) {
96 
					List<Map<String, String>> idenResultList = JSONArray.parseObject(idenResultString, List.class);
97 
					if (!CollectionUtils.isEmpty(idenResultList)) {
98 
						dataMap.putAll(idenResultList.get(0));
99 
					}
79 
				}
 100 
				}
80 
			}
 101 
			}
81
102
92 
					dataMap.put("employeeName", employeeResponse.getData().getName());
 113 
					dataMap.put("employeeName", employeeResponse.getData().getName());
93 
					dataMap.put("employeeCode", employeeResponse.getData().getCode());
 114 
					dataMap.put("employeeCode", employeeResponse.getData().getCode());
94
115
95 
					dataMap.put("companyName", employeeResponse.getData().getField4());
116 
					dataMap.put("companyId", employeeResponse.getData().getField4());
96 
					dataMap.put("organizationCode", employeeResponse.getData().getOrganizeCode());
 117 
					dataMap.put("organizationCode", employeeResponse.getData().getOrganizeCode());
97 
					dataMap.put("organizationName", employeeResponse.getData().getOrgName());
 118 
					dataMap.put("organizationName", employeeResponse.getData().getOrgName());
98
119
133 
			String pictureUrl = String.valueOf(dataMap.get("idenPictureUrl"));
 154 
			String pictureUrl = String.valueOf(dataMap.get("idenPictureUrl"));
134 
			if (pictureUrl.length() > 20 && pictureUrl.lastIndexOf(".") > 18
 155 
			if (pictureUrl.length() > 20 && pictureUrl.lastIndexOf(".") > 18
135 
					&& pictureUrl.lastIndexOf(EbcConstant.AI_MONITOR_FILE_PREFIX_PICTURE) > 0) {
 156 
					&& pictureUrl.lastIndexOf(EbcConstant.AI_MONITOR_FILE_PREFIX_PICTURE) > 0) {
136
157
137 
				int picturePrefixIndex = pictureUrl.lastIndexOf(EbcConstant.AI_MONITOR_FILE_PREFIX_PICTURE)
 158 
				int picturePrefixIndex = pictureUrl.lastIndexOf(EbcConstant.AI_MONITOR_FILE_PREFIX_PICTURE)
138 
						+ EbcConstant.AI_MONITOR_FILE_PREFIX_PICTURE.length();
 159 
						+ EbcConstant.AI_MONITOR_FILE_PREFIX_PICTURE.length();
139 
				String fileName = pictureUrl.substring(picturePrefixIndex, picturePrefixIndex + 4) + "-"
 160 
				String fileName = pictureUrl.substring(picturePrefixIndex, picturePrefixIndex + 4) + "-"
165 
				new TypeReference<Map<String, String>>() {
 186 
				new TypeReference<Map<String, String>>() {
166 
				});
 187 
				});
167
188
189 
		aiIdenLogInfoMap.put("taskExecuteTime",
190 
				DateUtil.formatDate(Long.valueOf(aiIdenLogInfoMap.get("taskExecuteTime"))));
191
168 
		// 结果详情
 192 
		// 结果详情
169 
		if (StringUtils.isNotEmpty(aiIdenLog.getIdenResult())) {
 193 
		if (StringUtils.isNotEmpty(aiIdenLog.getIdenResult())) {
170 
			List<Map<String, String>> idenResultList = JSONArray.parseObject(aiIdenLog.getIdenResult(), List.class);
171 
			if (!CollectionUtils.isEmpty(idenResultList)) {
172 
				aiIdenLogInfoMap.putAll(idenResultList.get(0));
194 
			Object idenResultObject = JSON.parse(aiIdenLog.getIdenResult());
195 
			if (idenResultObject instanceof JSONObject) {
196 
				Map<String, String> idenResultMap = JSON.parseObject(aiIdenLog.getIdenResult(), Map.class);
197 
				aiIdenLogInfoMap.putAll(idenResultMap);
198
199 
				if (idenResultMap.get("simi") != null) {
200 
					Object simiObject = idenResultMap.get("simi");
201 
					BigDecimal simiBigDecimal = new BigDecimal(String.valueOf(simiObject));
202 
					float simi = simiBigDecimal.multiply(new BigDecimal("100")).setScale(2, BigDecimal.ROUND_HALF_UP)
203 
							.floatValue();
204 
					aiIdenLogInfoMap.put("simi", simi + "%");
205 
				}
206
207 
			} else if (idenResultObject instanceof JSONArray) {
208 
				List<Map<String, String>> idenResultList = JSONArray.parseObject(aiIdenLog.getIdenResult(), List.class);
209 
				if (!CollectionUtils.isEmpty(idenResultList)) {
210 
					aiIdenLogInfoMap.putAll(idenResultList.get(0));
211 
				}
173 
			}
 212 
			}
174 
		}
 213 
		}
175
214
186 
				aiIdenLogInfoMap.put("employeeName", employeeResponse.getData().getName());
 225 
				aiIdenLogInfoMap.put("employeeName", employeeResponse.getData().getName());
187 
				aiIdenLogInfoMap.put("employeeCode", employeeResponse.getData().getCode());
 226 
				aiIdenLogInfoMap.put("employeeCode", employeeResponse.getData().getCode());
188
227
228 
				String headerImageName = employeeResponse.getData().getField1();
229 
				String headerImage = uploadFileService.getFileUrl(headerImageName, minioConfig.getBucketHeaderImage());
230 
				aiIdenLogInfoMap.put("headerImage", headerImage);
231
189 
				/*
 232 
				/*
190 
				String employeePosition = employeeResponse.getData().getMainJobPosition();
 233 
				String employeePosition = employeeResponse.getData().getMainJobPosition();
191 
				aiIdenLogInfoMap.put("employeePosition", employeePosition);
 234 
				aiIdenLogInfoMap.put("employeePosition", employeePosition);
226 
	}
 269 
	}
227
270
228 
	@Override
 271 
	@Override
272 
	public CommonResponse<List<Map<String, Object>>> selectLastAiIdenLog(Map<String, String> params) throws Exception {
273 
		CommonRequest<Map<String, String>> request = new CommonRequest<Map<String, String>>(params);
274 
		CommonResponse<List<Map<String, Object>>> response = aiTaskQuery
275 
				.selectAiIdenLogBySceneIdAndAiIdenModel(request);
276
277 
		if (response == null || response.getData() == null || CollectionUtils.isEmpty(response.getData())) {
278 
			return response;
279 
		}
280
281 
		for (Map<String, Object> dataMap : response.getData()) {
282 
			dataMap.put("taskExecuteTime", DateUtil.formatObjectToDate(dataMap.get("taskExecuteTime")));
283
284 
			String idenPictureName = String.valueOf(dataMap.get("idenPictureUrl"));
285 
			String idenPictureUrl = uploadFileService.getFileUrl(idenPictureName);
286 
			dataMap.put("idenPictureUrl", idenPictureUrl);
287
288 
			// 结果详情
289 
			String idenResultString = dataMap.get("idenResult") == null ? ""
290 
					: String.valueOf(dataMap.get("idenResult"));
291 
			if (StringUtils.isNotEmpty(idenResultString)) {
292 
				Object idenResultObject = JSON.parse(idenResultString);
293 
				if (idenResultObject instanceof JSONObject) {
294 
					Map<String, String> idenResultMap = JSON.parseObject(idenResultString, Map.class);
295 
					dataMap.putAll(idenResultMap);
296
297 
					if (idenResultMap.get("simi") != null) {
298 
						Object simiObject = idenResultMap.get("simi");
299 
						BigDecimal simiBigDecimal = new BigDecimal(String.valueOf(simiObject));
300 
						float simi = simiBigDecimal.multiply(new BigDecimal("100"))
301 
								.setScale(2, BigDecimal.ROUND_HALF_UP).floatValue();
302 
						dataMap.put("simi", simi + "%");
303 
					}
304
305 
				} else if (idenResultObject instanceof JSONArray) {
306 
					List<Map<String, String>> idenResultList = JSONArray.parseObject(idenResultString, List.class);
307 
					if (!CollectionUtils.isEmpty(idenResultList)) {
308 
						dataMap.putAll(idenResultList.get(0));
309 
					}
310 
				}
311 
			}
312
313 
			// 员工信息
314 
			if (dataMap.get("relateEmployeeRoleId") != null) {
315 
				long relateEmployeeRoleId = Long.parseLong(String.valueOf(dataMap.get("relateEmployeeRoleId")));
316
317 
				EmployeeDto employeeDto = new EmployeeDto();
318 
				employeeDto.setId(relateEmployeeRoleId);
319 
				CommonRequest<EmployeeDto> requestEmployeeDto = CommonRequest.<EmployeeDto>builder().data(employeeDto)
320 
						.build();
321 
				CommonResponse<EmployeeDto> employeeResponse = employeeService.queryEmployee(requestEmployeeDto);
322
323 
				if (employeeResponse.getData() != null) {
324 
					dataMap.put("employeeName", employeeResponse.getData().getName());
325 
					dataMap.put("employeeCode", employeeResponse.getData().getCode());
326
327 
					String headerImageName = employeeResponse.getData().getField1();
328 
					String headerImage = uploadFileService.getFileUrl(headerImageName,
329 
							minioConfig.getBucketHeaderImage());
330 
					dataMap.put("headerImage", headerImage);
331 
				}
332 
			}
333 
		}
334
335 
		return response;
336 
	}
337
338 
	@Override
229 
	public CommonResponse<AiIdenLog> createAiIdenLog(AiIdenLog aiIdenLog) throws Exception {
 339 
	public CommonResponse<AiIdenLog> createAiIdenLog(AiIdenLog aiIdenLog) throws Exception {
230 
		CommonRequest<AiIdenLog> aiIdenLogRequest = new CommonRequest<AiIdenLog>(aiIdenLog);
 340 
		CommonRequest<AiIdenLog> aiIdenLogRequest = new CommonRequest<AiIdenLog>(aiIdenLog);
231 
		return aiTaskCommand.createAiIdenLog(aiIdenLogRequest);
 341 
		return aiTaskCommand.createAiIdenLog(aiIdenLogRequest);

+ 8 - 0
security-protection-service/src/main/java/com/ai/bss/security/protection/service/interfaces/AiIdenLogManageService.java
Wyświetl plik

45 
	CommonResponse<Map<String, Object>> queryOneAiIdenLog(Long aiIdenLogId) throws Exception;
 45 
	CommonResponse<Map<String, Object>> queryOneAiIdenLog(Long aiIdenLogId) throws Exception;
46
46
47 
	/**
 47 
	/**
48 
	 * 查询所有设备最后一个识别记录
49 
	 * @param params
50 
	 * @return
51 
	 * @throws Exception
52 
	 */
53 
	CommonResponse<List<Map<String, Object>>> selectLastAiIdenLog(Map<String, String> params) throws Exception;
54
55 
	/**
48 
	 * 创建AI执行结果
 56 
	 * 创建AI执行结果
49 
	 * @param aiIdenLog
 57 
	 * @param aiIdenLog
50 
	 * @return
 58 
	 * @return

+ 1 - 1
security-protection-service/src/main/java/com/ai/bss/security/protection/service/interfaces/ResourceToolManageService.java
Wyświetl plik

84 
	Map<String, String> uploadResourceToolPicture(MultipartFile meFile, String pictureUrl) throws Exception;
 84 
	Map<String, String> uploadResourceToolPicture(MultipartFile meFile, String pictureUrl) throws Exception;
85
85
86 
	/**
 86 
	/**
87 
	 * 根据设备CODE获取场景、AI任务等相关信息
87 
	 * 根据设备CODE获取AI任务等相关信息
88 
	 * @param resourceToolCode
 88 
	 * @param resourceToolCode
89 
	 * @return
 89 
	 * @return
90 
	 */
 90 
	 */

+ 30 - 11
security-protection-service/src/main/java/com/ai/bss/security/protection/service/task/AiResultRecordKafkaTask.java
Wyświetl plik

14 
import com.ai.abc.api.model.CommonResponse;
 14 
import com.ai.abc.api.model.CommonResponse;
15 
import com.ai.abc.util.JsonUtils;
 15 
import com.ai.abc.util.JsonUtils;
16 
import com.ai.bss.security.protection.service.interfaces.AiIdenLogManageService;
 16 
import com.ai.bss.security.protection.service.interfaces.AiIdenLogManageService;
17 
import com.ai.bss.security.protection.service.interfaces.ResourceToolManageService;
18 
import com.ai.bss.security.protection.utils.EbcConstant;
 17 
import com.ai.bss.security.protection.utils.EbcConstant;
18 
import com.ai.bss.user.dto.EmployeeDto;
19 
import com.ai.bss.user.service.api.EmployeeService;
19 
import com.ai.bss.work.safety.model.AiIdenLog;
 20 
import com.ai.bss.work.safety.model.AiIdenLog;
20 
import com.ai.bss.work.safety.service.api.AiTaskCommand;
 21 
import com.ai.bss.work.safety.service.api.AiTaskCommand;
21 
import com.ai.bss.work.safety.service.api.MonitorSceneQuery;
 22 
import com.ai.bss.work.safety.service.api.MonitorSceneQuery;
38 
	private AiTaskCommand aiTaskCommand;
 39 
	private AiTaskCommand aiTaskCommand;
39
40
40 
	@Autowired
 41 
	@Autowired
41 
	private ResourceToolManageService resourceToolManageService;
42
43 
	@Autowired
44 
	private MonitorSceneQuery monitorSceneQuery;
 42 
	private MonitorSceneQuery monitorSceneQuery;
45
43
46 
	@Autowired
 44 
	@Autowired
47 
	private AiIdenLogManageService aiIdenLogManageService;
 45 
	private AiIdenLogManageService aiIdenLogManageService;
48
46
47 
	@Autowired
48 
	private EmployeeService employeeService;
49
49 
	@KafkaListener(containerFactory = "kafkaBatchListener6", topics = "${kafka.topic.aitask:topic_ai_task}", groupId = "ai_group")
 50 
	@KafkaListener(containerFactory = "kafkaBatchListener6", topics = "${kafka.topic.aitask:topic_ai_task}", groupId = "ai_group")
50 
	public void AiResultRecordListener(ConsumerRecord<String, String> records, Acknowledgment ack) throws Throwable {
 51 
	public void AiResultRecordListener(ConsumerRecord<String, String> records, Acknowledgment ack) throws Throwable {
51 
		try {
 52 
		try {
54 
			String message = records.value();
 55 
			String message = records.value();
55 
			log.info("已接AI任务执行结果消息，消息为：" + message);
 56 
			log.info("已接AI任务执行结果消息，消息为：" + message);
56
57
58 
			AiIdenLog aiIdenLog = JSON.parseObject(message, new TypeReference<AiIdenLog>() {
59 
			});
60
57 
			JSONObject messageJson = JSONObject.parseObject(message);
 61 
			JSONObject messageJson = JSONObject.parseObject(message);
58 
			String resourceToolId = messageJson.getString("resourceToolId");
 62 
			String resourceToolId = messageJson.getString("resourceToolId");
59 
			String idenResultType = messageJson.getString("idenResultType");
 63 
			String idenResultType = messageJson.getString("idenResultType");
64 
			Long relateEmployeeRoleId = messageJson.getLong("relateEmployeeRoleId");
60
65
61 
			// 查询相关数据
66 
			// 关联场景信息
62 
			CommonResponse<List<Map<String, Object>>> sceneTerminalRelResponse = monitorSceneQuery
 67 
			CommonResponse<List<Map<String, Object>>> sceneTerminalRelResponse = monitorSceneQuery
63 
					.selectSceneTerminalRel(new CommonRequest<Long>(Long.valueOf(resourceToolId)));
 68 
					.selectSceneTerminalRel(new CommonRequest<Long>(Long.valueOf(resourceToolId)));
64 
			if (sceneTerminalRelResponse == null || CollectionUtils.isEmpty(sceneTerminalRelResponse.getData())) {
 69 
			if (sceneTerminalRelResponse == null || CollectionUtils.isEmpty(sceneTerminalRelResponse.getData())) {
68
73
69 
			Map<String, Object> sceneTerminalRelMap = sceneTerminalRelResponse.getData().get(0);
 74 
			Map<String, Object> sceneTerminalRelMap = sceneTerminalRelResponse.getData().get(0);
70
75
71 
			// 封装数据
72 
			AiIdenLog aiIdenLog = JSON.parseObject(message, new TypeReference<AiIdenLog>() {
73 
			});
74 
			aiIdenLog.setMonitorSceneId(sceneTerminalRelMap.get("monitorSceneId") == null ? ""
 76 
			aiIdenLog.setMonitorSceneId(sceneTerminalRelMap.get("monitorSceneId") == null ? ""
75 
					: String.valueOf(sceneTerminalRelMap.get("monitorSceneId")));
 77 
					: String.valueOf(sceneTerminalRelMap.get("monitorSceneId")));
76 
			aiIdenLog.setMonitorSceneName(sceneTerminalRelMap.get("monitorSceneName") == null ? ""
 78 
			aiIdenLog.setMonitorSceneName(sceneTerminalRelMap.get("monitorSceneName") == null ? ""
82 
			aiIdenLog.setOrganizationId(
 84 
			aiIdenLog.setOrganizationId(
83 
					sceneTerminalRelMap.get("orgId") == null ? "" : String.valueOf(sceneTerminalRelMap.get("orgId")));
 85 
					sceneTerminalRelMap.get("orgId") == null ? "" : String.valueOf(sceneTerminalRelMap.get("orgId")));
84
86
85 
			// TODO 人员信息暂时默认
86 
			aiIdenLog.setRelateEmployeeRoleId("201613310867");
87 
			aiIdenLog.setRelateEmployeeRoleName("王浩");
87 
			// 关联员工信息
88 
			EmployeeDto employeeDto = null;
89 
			if (relateEmployeeRoleId != null) {
90 
				employeeDto = new EmployeeDto();
91 
				employeeDto.setId(relateEmployeeRoleId);
92 
				CommonRequest<EmployeeDto> employeeDtoRequest = new CommonRequest<EmployeeDto>(employeeDto);
93 
				CommonResponse<EmployeeDto> employeeDtoResponse = employeeService.queryEmployee(employeeDtoRequest);
94 
				if (employeeDtoResponse == null || employeeDtoResponse.getData() == null) {
95 
					employeeDto = null;
96 
				} else {
97 
					employeeDto = employeeDtoResponse.getData();
98 
				}
99 
			}
100 
			if (employeeDto != null) {
101 
				aiIdenLog.setRelateEmployeeRoleName(employeeDto.getName());
102 
				aiIdenLog.setOrganizationId(String.valueOf(employeeDto.getOrganizeId()));
103 
			} else {
104 
				aiIdenLog.setRelateEmployeeRoleId("-1");
105 
				aiIdenLog.setRelateEmployeeRoleName(null);
106 
			}
88
107
89 
			// 执行操作
 108 
			// 执行操作
90 
			CommonResponse<AiIdenLog> aiIdenLogRunningResult = aiIdenLogManageService.createAiIdenLog(aiIdenLog);
 109 
			CommonResponse<AiIdenLog> aiIdenLogRunningResult = aiIdenLogManageService.createAiIdenLog(aiIdenLog);

common-ui - Nuosi Git Service
Strona główna Odkrywaj Pomoc
Zaloguj się
liuyang50
/
common-ui
Obserwuj 1
Polub 0
Forkuj 0
Kod Problemy 0 Oczekujące zmiany 0 Commity 20 Wydania 0 Wiki

AIoT前端公共UI

Gałąź: master
Gałęzie Tagi
common-ui
/
examples
/
views
/
TabsDemo.vue

TabsDemo.vue 827B
Bezpośredni odnośnik Historia Czysty 

    <!--
 * @Author: Devin
 * @Date: 2023-02-16 09:37:37
 * @LastEditors: Devin
 * @LastEditTime: 2023-02-16 17:47:09
 * @Description: 
-->
<template>
  <common-panel>
    <common-tabs
      :tabs="tabs"
      :components="components"
      :active-tab="activeTab"
    ></common-tabs>
  </common-panel>
</template>

<script setup lang="ts">
import { ref, shallowRef } from 'vue';
import CardDemo from './CardDemo.vue';
import GridDemo from './GridDemo.vue';
import TableDemo from './TableDemo.vue';

const components = shallowRef({
  card: CardDemo,
  grid: GridDemo,
  table: TableDemo
});
const tabs = ref<any>([
  { label: '表格示例', name: 'card' },
  { label: '栅格示例', name: 'grid' },
  { label: '卡片示例', name: 'table' }
]);

const activeTab = ref<any>('card');
</script>

<style scoped lang="scss"></style>