24 
          <div id="div1" :style="`background-image: url(${titleImgBg})`" class="title">
24 
          <div :style="`background-image: url(${titleImgBg})`" class="title" id="div1">
25 25 
            <span class="title-span">告警分析</span>
26 26 
          </div>
27 27 
          <div id="bar" style="height: 100%;width: 100%"></div>
@ -46,8 +46,8 @@
46 46 
          <span class="title-span">重点区域监控</span>
47 47 
        </div>
48 48 
        <!--        <video-player ref="videoPlayer" :options="videoOptions" :playsinline="true" class="vjs-custom-skin videoPlayer"></video-player>-->
49 
        <div id="div11">
50 
          <video-player v-if="videoOptions !== {}" id="div111" ref="videoPlayer" :options="videoOptions" :playsinline="true" class="vjs-custom-skin videoPlayer">
49 
        <div id="div11" style="padding-right: 7%;padding-left: 7%">
50 
          <video-player v-if="videoOptions !== {}" ref="videoPlayer" :options="videoOptions" :playsinline="true"  id="div111" class="vjs-custom-skin videoPlayer">
51 51
52 52 
          </video-player>
53 53 
        </div>
@ -102,7 +102,7 @@ import 'video.js/dist/video-js.css'
102 102 
import 'vue-video-player/src/custom-theme.css'
103 103 
import 'videojs-flash'
104 104 
import videojs from 'video.js'
105 
import EventBus from '../../bus'
105 
import EventBus from "../../bus";
106 106 
window.videojs = videojs
107 107
108 108 
require('video.js/dist/lang/zh-CN.js')
@ -116,27 +116,27 @@ export default {
116 116 
      month >= 10 ? month : '0' + month
117 117 
      var day = value.getDate() >= 10 ? value.getDate() : '0' + value.getDate()
118 118 
      var hours =
119 
        value.getHours() >= 10 ? value.getHours() : '0' + value.getHours()
119 
          value.getHours() >= 10 ? value.getHours() : '0' + value.getHours()
120 120 
      var minutes =
121 
        value.getMinutes() >= 10
122 
          ? value.getMinutes()
123 
          : '0' + value.getMinutes()
121 
          value.getMinutes() >= 10
122 
              ? value.getMinutes()
123 
              : '0' + value.getMinutes()
124 124 
      var seconds =
125 
        value.getSeconds() >= 10
126 
          ? value.getSeconds()
127 
          : '0' + value.getSeconds()
125 
          value.getSeconds() >= 10
126 
              ? value.getSeconds()
127 
              : '0' + value.getSeconds()
128 128 
      return (
129 
        year +
130 
        '年' +
131 
        month +
132 
        '月' +
133 
        day +
134 
        '日 ' +
135 
        hours +
136 
        ':' +
137 
        minutes +
138 
        ':' +
139 
        seconds
129 
          year +
130 
          '年' +
131 
          month +
132 
          '月' +
133 
          day +
134 
          '日 ' +
135 
          hours +
136 
          ':' +
137 
          minutes +
138 
          ':' +
139 
          seconds
140 140 
      )
141 141 
    }
142 142 
  },
@ -180,8 +180,6 @@ export default {
180 180 
    setInterval(() => { // 识别记录
181 181 
      this.initRecognition()
182 182 
    }, 5000)
183 
    // console.log(textDom.nextSibling)
184 
    // textDom.nextSibling.nodeValue = ''
185 183 
    // EventBus.$on('sendAiData', (msg) => { // 获取镜屏推送消息
186 184 
    //   console.log('已接收镜屏消息...')
187 185 
    //   var oDiv = document.getElementById("div111");
@ -199,44 +197,45 @@ export default {
199 197 
    // })
200 198 
  },
201 199 
  methods: {
202 
    testHKK (box, alarmMemo) {
200 
    testHKK(box, alarmMemo) {
203 201 
      var width = box[2] - box[0]
204 202 
      var height = box[3] - box[1]
205 
      var oDiv = document.getElementById('div111')
203 
      var oDiv = document.getElementById("div111");
206 204 
      // var aBox = this.getByClass(oDiv,"vjs-tech");
207 205 
      // alert(aBox.length);
208 
      var e = oDiv
209 
      var div = document.createElement('div')
206 
      var e = oDiv;
207 
      var div = document.createElement("div");
210 208 
      // div.className = "form-group";
211 209 
      var del = document.createElement('p')
212 210 
      var x = 10 + this.hkk
213 
      this.hkk++
214 
      del.innerHTML = '<div class="hkk" style="color: white;border: 2px solid #00d8f3;position: absolute;top: ' + box[1] + 'px;left: ' + box[0] + 'px;width: ' + width + 'px;height: ' + height + 'px;"> ' + alarmMemo + ' </div>'
215 
      div.appendChild(del)
216 
      e.appendChild(div)
217 
      setTimeout(function () {
218 
        del.remove()
211 
      this.hkk ++
212 
      del.innerHTML = '<div class="hkk" style="color: white;border: 2px solid #00d8f3;position: absolute;top: ' + box[1] + 'px;left: ' + box[0] + 'px;width: ' + width + 'px;height: ' + height + 'px;"> ' + alarmMemo + ' </div>';
213 
      div.appendChild(del);
214 
      e.appendChild(div);
215 
      setTimeout(function() {
216 
        del.remove();
219 217 
      }, 3000)
220 218 
    },
221 219
222 
    findInArr (arr, n) {
223 
      for (var i = 0; i < arr.length; i++) {
224 
        if (arr[i] == n) {
225 
          return true
220
221 
    findInArr(arr,n){
222 
      for(var i=0;i<arr.length;i++){
223 
        if(arr[i] == n){
224 
          return true;
226 225 
        }
227 226 
      }
228 
      return false
227 
      return false;
229 228 
    },
230 
    getByClass (oParent, sClass) {
231 
      var ret = []
232 
      var aEle = oParent.getElementsByTagName('*')
233 
      for (var i = 0; i < aEle.length; i++) {
234 
        var _aTmp = aEle[i].className.split(' ')
235 
        if (this.findInArr(_aTmp, sClass)) {
236 
          ret.push(aEle[i])
229 
    getByClass(oParent,sClass){
230 
      var ret = [];
231 
      var aEle = oParent.getElementsByTagName("*");
232 
      for(var i = 0; i < aEle.length; i++){
233 
        var _aTmp = aEle[i].className.split(" ");
234 
        if(this.findInArr(_aTmp,sClass)){
235 
          ret.push(aEle[i]);
237 236 
        }
238 237 
      }
239 
      return ret
238 
      return ret;
240 239 
    },
241 240 
    async createMyButton () {
242 241 
      this.$nextTick(() => {
@ -245,13 +244,6 @@ export default {
245 244 
        let start = document.getElementsByClassName('vjs-play-control vjs-control vjs-button')
246 245 
        let volume = document.getElementsByClassName('vjs-volume-panel vjs-control vjs-volume-panel-horizontal')
247 246 
        let text = document.getElementsByClassName('vjs-live-control vjs-control')
248 
        // 删除直播文本节点
249 
        let textDoms = document.querySelectorAll('.vjs-live-control .vjs-live-display .vjs-control-text')
250 
        textDoms.forEach(item => {
251 
          // 这样设置没用 不知道为啥 明明在nextTick中 真正的“直播”文本节点还是没选到
252 
          item.nextSibling.nodeValue = ''
253 
          // item.nextSibling.data = ''
254 
        })
255 247 
        bars.forEach((item, index) => {
256 248 
          time.forEach(item => {
257 249 
            item.remove()
@ -281,7 +273,7 @@ export default {
281 273 
          loop: false, // 导致视频一结束就重新开始。
282 274 
          preload: 'auto', // 建议浏览器在<video>加载元素后是否应该开始下载视频数据。auto浏览器选择最佳行为,立即开始加载视频（如果浏览器支持）
283 275 
          language: 'zh-CN',
284 
          aspectRatio: '16:10', // 将播放器置于流畅模式，并在计算播放器的动态大小时使用该值。值应该代表一个比例 - 用冒号分隔的两个数字（例如"16:9"或"4:3"）
276 
          aspectRatio: '4:3', // 将播放器置于流畅模式，并在计算播放器的动态大小时使用该值。值应该代表一个比例 - 用冒号分隔的两个数字（例如"16:9"或"4:3"）
285 277 
          // fluid: true, // 当true时，Video.js player将拥有流体大小。换句话说，它将按比例缩放以适应其容器。
286 278 
          // 是否流体自适应容器宽高
287 279 
          fluid: true,
@ -394,16 +386,20 @@ export default {
394 386 
          data = data.slice(0, 4)
395 387 
        }
396 388 
        data.forEach(e => {
397 
          if (e.employeeName == null || e.employeeName == '') {
389 
          if (e.employeeName == null || e.employeeName == ''){
398 390 
            e.employeeCode = '未识别成功'
399 391 
          }
400 
          e.simi = e.simi.split('.')[0] + '%'
392 
          if (e.simi){
393 
            e.simi = e.simi.split('.')[0] + '%'
394 
          }else {
395 
            e.simi = '0%'
396 
          }
401 397 
          e.newImg = e.idenPictureUrl
402 398 
          var loadTimer
403 399 
          var imgObject = new Image()
404 400 
          imgObject.setAttribute('crossOrigin', 'anonymous')
405 401 
          imgObject.src = e.idenPictureUrl
406 
          imgObject.onLoad = onImgLoaded()
402 
          imgObject.onload = onImgLoaded()
407 403 
          function onImgLoaded () {
408 404 
            if (loadTimer != null) clearTimeout(loadTimer)
409 405 
            if (!imgObject.complete) {
@ -411,6 +407,10 @@ export default {
411 407 
                onImgLoaded()
412 408 
              }, 3)
413 409 
            } else {
410 
              e.box[0] = imgObject.width * e.box[0]
411 
              e.box[1] = imgObject.height * e.box[1]
412 
              e.box[2] = imgObject.width * e.box[2]
413 
              e.box[3] = imgObject.height * e.box[3]
414 414 
              e.newImg = getImagePortion(imgObject, e.box[2] - e.box[0], e.box[3] - e.box[1], e.box[0], e.box[1])
415 415 
            }
416 416 
          }
@ -575,11 +575,11 @@ export default {
575 575 
            itemStyle: {
576 576 
              normal: {
577 577 
                color: new echarts.graphic.LinearGradient(
578 
                  0, 0, 0, 1,
579 
                  [
580 
                    { offset: 0, color: '#00FEFF' },
581 
                    { offset: 1, color: '#0C7EFC' }
582 
                  ]
578 
                    0, 0, 0, 1,
579 
                    [
580 
                      { offset: 0, color: '#00FEFF' },
581 
                      { offset: 1, color: '#0C7EFC' }
582 
                    ]
583 583 
                ),
584 584 
                label: {
585 585 
                  show: true, // 是否展示
@ -865,7 +865,7 @@ export default {
865 865 
.vjs-tech {
866 866 
  pointer-events: none;
867 867 
}
868 
.checkedIndex {
868 
.checkedIndex{
869 869 
  border: 1px solid #009bf3;
870 870 
}
871 871 
</style>

+ 1 - 1
security-protection-platform/src/modules/system/devicemana/components/modal/addDeviceModal.vue
Целия файл 

@ -92,7 +92,7 @@ export default {
92 92 
      },
93 93 
      // 提交表单是否显示loading
94 94 
      loadingSubmit: false,
95 
      action: 'http://10.19.90.34:8018/sp/resourceTool/uploadResourceToolPicture',
95 
      action: 'http://10.1.252.196:8018/sp/resourceTool/uploadResourceToolPicture',
96 96 
      uploadList: () => []
97 97 
    }
98 98 
  },

+ 2 - 2
security-protection-platform/src/modules/usermana/components/modal/addUser.vue
Целия файл 

@ -40,7 +40,7 @@
40 40 
            multiple
41 41 
            style="width:120px;height:160px;background-color:#FFFFFF;"
42 42 
            type="drag"
43 
            action="http://10.19.90.34:8018/sp/employeeManagement/uploadEmployeePicture"
43 
            action="http://10.1.252.196:8018/sp/employeeManagement/uploadEmployeePicture"
44 44 
            class="demo-upload-list"
45 45 
            @success = "$_onUploadSuccess"
46 46 
          >
 
@ -61,7 +61,7 @@
61 61 
            :before-upload="$_onUploadBeforeUpload"
62 62 
            multiple
63 63 
            type="drag"
64 
            action="http://10.19.90.34:8018/sp/employeeManagement/uploadEmployeePicture"
64 
            action="http://10.1.252.196:8018/sp/employeeManagement/uploadEmployeePicture"
65 65 
            class="upload-edit"
66 66 
            @success = "$_onUploadSuccess"
67 67 
          >

+ 20 - 20
security-protection-platform/src/modules/videoSurveillance/components/ReplayDialog/index.vue
Целия файл 

@ -223,33 +223,33 @@ export default {
223 223 
    /*
224 224 
   * 获取真实视频地址
225 225 
   */
226 
    // async getOriVideoUrl (fileId) {
227 
    //   const res = await sysapi.getFileUrl(fileId)
228 
    //   // fake
229 
    //   return new Promise((resolve, reject) => {
230 
    //     setTimeout(() => {
231 
    //       const url = res.data.data.fileUrl
232 
    //       resolve({
233 
    //         url
234 
    //       })
235 
    //     }, 1000)
236 
    //   })
237 
    // },
226 
    async getOriVideoUrl (fileId) {
227 
      const res = await sysapi.getFileUrl(fileId)
228 
      // fake
229 
      return new Promise((resolve, reject) => {
230 
        setTimeout(() => {
231 
          const url = res.data.data.fileUrl
232 
          resolve({
233 
            url
234 
          })
235 
        }, 1000)
236 
      })
237 
    },
238 238 
    getData () {
239 239 
      this.$emit('get-list', { beginDay: this.beginDay, endDay: this.endDay })
240 240 
    },
241 241 
    resetData () {
242 242 
      this.beginDay = formatDateTime(new Date(+new Date() - 10 * 60 * 1000), 'yyyy-MM-dd hh:mm:ss')
243 243 
      this.endDay = formatDateTime(new Date(), 'yyyy-MM-dd hh:mm:ss')
244 
      // this.getData()
245 
    }
244 
      this.getData()
245 
    },
246 246 
    // 刷新组件
247 
    // reload () {
248 
    //   this.isShow = false
249 
    //   this.$nextTick(() => {
250 
    //     this.isShow = true
251 
    //   })
252 
    // }
247 
    reload () {
248 
      this.isShow = false
249 
      this.$nextTick(() => {
250 
        this.isShow = true
251 
      })
252 
    }
253 253 
  }
254 254 
}
255 255 
</script>

+ 7 - 7
security-protection-platform/src/modules/videoSurveillance/distinguishRecord/index.vue
Целия файл 

@ -47,7 +47,7 @@
47 47 
        <t-carousel dots="none" :speed="10000000000" arrow="always" style="width: 100%">
48 48 
          <t-carousel-item v-for="(item1,index1) in dataImgList" :key="index1" style="width: 100%;padding-left: 10%">
49 49 
            <div v-for="(item, index) in item1" :key="index" :src="item.idenPictureUrl" class="image-carousel">
50 
              <img :src="'http://10.19.90.34:19000/ai-image/'+item.idenPictureUrl" class="img-viewer-size" @click="getParticularsData(item.aiIdenLogId,index)">
50 
              <img :src="'http://10.1.194.18:9000/ai-image/'+item.idenPictureUrl" class="img-viewer-size" @click="getParticularsData(item.aiIdenLogId,index)">
51 51 
              <span :class="{'fileName' : index === fileNameIndex}" style="width: 132px;margin-right: 14px;text-align:center">{{ item.fileName }}</span>
52 52 
            </div>
53 53 
          </t-carousel-item>
 
@ -81,17 +81,17 @@ export default {
81 81 
        aspectRatio: '13:10', // 将播放器置于流畅模式，并在计算播放器的动态大小时使用该值。值应该代表一个比例 - 用冒号分隔的两个数字（例如"16:9"或"4:3"）
82 82 
        // fluid: true, // 当true时，Video.js player将拥有流体大小。换句话说，它将按比例缩放以适应其容器。
83 83 
        // 是否流体自适应容器宽高
84 
        fluid: false,
84 
        fluid: true,
85 85 
        // // 设置视频播放器的显示宽度（以像素为单位）
86 
        // width: '500px',
86 
        // width: '100px',
87 87 
        // // 设置视频播放器的显示高度（以像素为单位）
88 
        height: 380,
88 
        // height: '300px',
89 89 
        sources: [{
90 
          type: 'video/mp4', // 这里的种类支持很多种：基本视频格式、直播、流媒体等，具体可以参看git网址项目
90 
          type: 'application/x-mpegURL', // 这里的种类支持很多种：基本视频格式、直播、流媒体等，具体可以参看git网址项目
91 91 
          src: '' // url地址
92 92 
        }],
93 93
94 
        notSupportedMessage: '暂无视频可播放，请稍后再试', // 允许覆盖Video.js无法播放媒体源时显示的默认信息。
94 
        notSupportedMessage: '此视频暂无法播放，请稍后再试', // 允许覆盖Video.js无法播放媒体源时显示的默认信息。
95 95 
        controlBar: {
96 96 
          timeDivider: true,
97 97 
          // durationDisplay: true,
 
@ -174,7 +174,7 @@ export default {
174 174 
        this.defineResult = res.data.data.alarmInfo.alarmMemo
175 175 
        this.captureTIme = res.data.data.pictureInfo.fileDateTimeStr
176 176 
        this.distinguishUrl = res.data.data.pictureInfo.fileUrl
177 
        this.playerOptions.sources[0].src = res.data.data.videoInfo.videoFileUrl
177 
        this.playerOptions.sources[0].src = res.data.data.videoInfo
178 178 
      })
179 179 
    },
180 180 
    // 重置数据

+ 14 - 14
security-protection-platform/src/router.js
Целия файл 

@ -39,21 +39,21 @@ export default () => {
39 39 
     * 单客户端判断。
40 40 
     * 参见src/frame.vue和src/store.js文件中的逻辑。
41 41 
     */
42 
    let isLogged = router.app.$options.store.getters.getLogged || sessionStorage.getItem('isLogged')
43 
    console.log(isLogged)
44 
    if (to.meta.ignoreAuth === true) {
45 
      if (isLogged === true && to.path === '/login') {
46 
        router.replace({ name: 'dashboard' })
47 
      } else {
42 
    // let isLogged = router.app.$options.store.getters.getLogged || sessionStorage.getItem('isLogged')
43 
    // console.log(isLogged)
44 
    // if (to.meta.ignoreAuth === true) {
45 
    //   if (isLogged === true && to.path === '/login') {
46 
    //     router.replace({ name: 'dashboard' })
47 
    //   } else {
48 
    //     next()
49 
    //   }
50 
    // } else {
51 
    //   if (isLogged === false) {
52 
    //     router.replace({ name: 'login' })
53 
    //   } else {
48 54 
        next()
49 
      }
50 
    } else {
51 
      if (isLogged === false) {
52 
        router.replace({ name: 'login' })
53 
      } else {
54 
        next()
55 
      }
56 
    }
55 
    //   }
56 
    // }
57 57 
  })
58 58
59 59 
  router.afterEach(() => {

common-ui - Nuosi Git Service
Home Explore Help
Sign In
liuyang50
/
common-ui
Watch 1
Star 0
Fork 0
Code Issues 0 Pull Requests 0 Commits 10 Releases 0 Wiki

AIoT前端公共UI

Tree: 9d218263f7
Branches Tags
common-ui
ZIP TAR.GZ
liuyang 9d218263f7 update 2 years ago
.vscode b53d9d73ad create： 创建common-ui工程 2 years ago
docs 9d218263f7 update 2 years ago
examples 9d218263f7 update 2 years ago
lib d69a3532bf update: 修改说明文档 2 years ago
packages d69a3532bf update: 修改说明文档 2 years ago
.eslintignore.js b53d9d73ad create： 创建common-ui工程 2 years ago
.eslintrc b53d9d73ad create： 创建common-ui工程 2 years ago
.gitignore ae7c7c9fa5 update: 修改配置信息 2 years ago
.gitignore copy b53d9d73ad create： 创建common-ui工程 2 years ago
.prettierrc b53d9d73ad create： 创建common-ui工程 2 years ago
INFO.md b53d9d73ad create： 创建common-ui工程 2 years ago
README.md 495d3fe273 fixed: 修改表格插件 + 修改svg-icon为common-icon 2 years ago
auto-imports.d.ts b53d9d73ad create： 创建common-ui工程 2 years ago
components.d.ts 1360efe95e update： 修改表单先关接入方式 2 years ago
index.html b53d9d73ad create： 创建common-ui工程 2 years ago
package-lock.json d69a3532bf update: 修改说明文档 2 years ago
package.json d69a3532bf update: 修改说明文档 2 years ago
pnpm-lock.yaml 9d218263f7 update 2 years ago
tsconfig.json b53d9d73ad create： 创建common-ui工程 2 years ago
tsconfig.node.json b53d9d73ad create： 创建common-ui工程 2 years ago
vite.config.ts b53d9d73ad create： 创建common-ui工程 2 years ago
开发规范.md b53d9d73ad create： 创建common-ui工程 2 years ago

README.md

Vue 3 + TypeScript + Vite

This template should help get you started developing with Vue 3 and TypeScript in Vite. The template uses Vue 3 <script setup> SFCs, check out the script setup docs to learn more.

Recommended IDE Setup

Type Support For .vue Imports in TS

TypeScript cannot handle type information for .vue imports by default, so we replace the tsc CLI with vue-tsc for type checking. In editors, we need TypeScript Vue Plugin (Volar) to make the TypeScript language service aware of .vue types.

If the standalone TypeScript plugin doesn't feel fast enough to you, Volar has also implemented a Take Over Mode that is more performant. You can enable it by the following steps:

  1. Disable the built-in TypeScript Extension
    1. Run Extensions: Show Built-in Extensions from VSCode's command palette
    2. Find TypeScript and JavaScript Language Features, right click and select Disable (Workspace)
  2. Reload the VSCode window by running Developer: Reload Window from the command palette.

快速上手

common-ui 基于 vue3 + ts + Element-plus 再次封装的基础组件

安装

npm install common-module-ui
&
yarn add common-module-ui -S

使用

// main.ts
import CommonUI from 'common-module-ui'
import 'common-module-ui/lib/style.css'
const app = createApp(App)
app.use(CommonUI)
app.mount('#app')

文档详见：http://123.57.35.51:18087/components/info/base.html