Browse Source

[FE]修改细节样式

luoxu5 4 years ago
parent
commit
396712858c

+ 3 - 3
security-protection-platform/src/modules/access/component/instrumentRecord/index.vue

@ -19,7 +19,7 @@
19 19
        <t-button color="primary" @click="btnsearch">查询</t-button>
20 20
        <t-button @click="reset">重置</t-button>
21 21
      </div>
22
      <t-button color="primary" icon="upload" style="width:128px;height:32px" class="upload">导出至Excel</t-button>
22
       <t-button  icon="upload" style="width:128px;height:32px" class="upload">导出至Excel</t-button>
23 23
24 24
    </div> -->
25 25
    <div class="track-container">
@ -36,9 +36,9 @@
36 36
            </div>
37 37
          </div>
38 38
          <div class="btns">
39
            <t-button color="primary" icon="upload" style="width:128px;height:32px" class="upload">导出至Excel</t-button>
39
            <t-button icon="upload" style="width:128px;height:32px" class="upload">导出至Excel</t-button>
40 40
            <t-dropdown :visibled="customVisibled" trigger-mode="custom">
41
              <t-button slot="trigger" color="secondary" icon="tile-four-outline" @click="onTriggerClick"></t-button>
41
              <t-button slot="trigger" color="secondary" icon="tile-four-outline" class="trigger-button" @click="onTriggerClick"></t-button>
42 42
              <div slot="popper">
43 43
                <div style="border-radius: 5px;padding: 20px 20px 20px 20px;background-color: white;">
44 44
                  <t-checkbox-group v-model="social" vertical @change="checkAllGroupChange">

+ 9 - 3
security-protection-platform/src/modules/access/component/io-record/index.vue

@ -20,7 +20,7 @@
20 20
        <t-button @click="reset">重置</t-button>
21 21
      </div>
22 22
23
      <t-button color="primary" icon="upload" style="width:128px;height:32px" class="upload">导出至Excel</t-button>
23
       <t-button  icon="upload" style="width:128px;height:32px" class="upload">导出至Excel</t-button>
24 24
25 25
    </div> -->
26 26
    <div class="track-container">
@ -37,9 +37,9 @@
37 37
            </div>
38 38
          </div>
39 39
          <div class="btns">
40
            <t-button color="primary" icon="upload" style="width:128px;height:32px" class="upload">导出至Excel</t-button>
40
            <t-button icon="upload" style="width:128px;height:32px" class="upload">导出至Excel</t-button>
41 41
            <t-dropdown :visibled="customVisibled" trigger-mode="custom">
42
              <t-button slot="trigger" color="secondary" icon="tile-four-outline" @click="onTriggerClick"></t-button>
42
              <t-button slot="trigger" color="secondary" icon="tile-four-outline" class="trigger-button" @click="onTriggerClick"></t-button>
43 43
              <div slot="popper">
44 44
                <div style="border-radius: 5px;padding: 20px 20px 20px 20px;background-color: white;">
45 45
                  <t-checkbox-group v-model="social" vertical @change="checkAllGroupChange">
@ -87,6 +87,9 @@
87 87
      <t-table-column v-if="columns[4].show" :formatter="date_formatter" label="职务" prop="employeePositionZh" width="80px">
88 88
      </t-table-column>
89 89
      <t-table-column v-if="columns[5].show" :formatter="date_formatter" prop="simi" label="相似度" width="75px">
90
        <template v-slot="{row}">
91
          {{ getSimi(row) }}
92
        </template>
90 93
      </t-table-column>
91 94
      <t-table-column v-if="columns[6].show" :formatter="date_formatter" label="进出时间" prop="taskExecuteTime" width="160px">
92 95
      </t-table-column>
@ -568,6 +571,9 @@ export default {
568 571
      } else {
569 572
        return cellValue
570 573
      }
574
    },
575
    getSimi (row) {
576
      return (row.simi.split('%')[0] - 0).toFixed(2) + '%'
571 577
    }
572 578
    // //将分数转换为小数
573 579
    // toPoint (percent) {

+ 3 - 3
security-protection-platform/src/modules/aialarm/index.vue

@ -21,7 +21,7 @@
21 21
        <t-button color="primary" @click="btnsearch">查询</t-button>
22 22
        <t-button @click="reset">重置</t-button>
23 23
      </div>
24
      <t-button color="primary" icon="upload" style="width:128px;height:32px" class="upload">导出至Excel</t-button>
24
       <t-button  icon="upload" style="width:128px;height:32px" class="upload">导出至Excel</t-button>
25 25

26 26
    </div> -->
27 27
    <div class="track-container">
@ -39,9 +39,9 @@
39 39
            </div>
40 40
          </div>
41 41
          <div class="btns">
42
            <t-button color="primary" icon="upload" style="width:128px;height:32px" class="upload">导出至Excel</t-button>
42
            <t-button icon="upload" style="width:128px;height:32px" class="upload">导出至Excel</t-button>
43 43
            <t-dropdown :visibled="customVisibled" trigger-mode="custom">
44
              <t-button slot="trigger" color="secondary" icon="tile-four-outline" @click="onTriggerClick"></t-button>
44
              <t-button slot="trigger" color="secondary" icon="tile-four-outline" class="trigger-button" @click="onTriggerClick"></t-button>
45 45
              <div slot="popper">
46 46
                <div style="border-radius: 5px;padding: 20px 20px 20px 20px;background-color: white;">
47 47
                  <t-checkbox-group v-model="social" vertical @change="checkAllGroupChange">

+ 2 - 2
security-protection-platform/src/modules/attendance/abnormal/index.vue

@ -14,11 +14,11 @@
14 14
              </div>
15 15
            </div>
16 16
            <div class="btns">
17
              <t-button color="primary">
17
              <t-button>
18 18
                <t-icon size="14" icon="upload-outline"></t-icon> 导出至Excel
19 19
              </t-button>
20 20
              <t-dropdown :visibled="customVisibled" trigger-mode="custom">
21
                <t-button slot="trigger" color="secondary" icon="tile-four-outline" @click="onTriggerClick"></t-button>
21
                <t-button slot="trigger" color="secondary" icon="tile-four-outline" class="trigger-button" @click="onTriggerClick"></t-button>
22 22
                <div slot="popper">
23 23
                  <div style="border-radius: 5px;padding: 20px 20px 20px 20px;background-color: white;">
24 24
                    <t-checkbox-group v-model="social" vertical @change="checkAllGroupChange">

+ 4 - 4
security-protection-platform/src/modules/attendance/report/index.vue

@ -17,11 +17,11 @@
17 17
                  </div>
18 18
                </div>
19 19
                <div class="btns">
20
                  <t-button color="primary">
20
                  <t-button>
21 21
                    <t-icon size="14" icon="upload-outline"></t-icon> 导出至Excel
22 22
                  </t-button>
23 23
                  <t-dropdown :visibled="customVisibled0" trigger-mode="custom">
24
                    <t-button slot="trigger" color="secondary" icon="tile-four-outline" @click="onTriggerClick"></t-button>
24
                    <t-button slot="trigger" color="secondary" icon="tile-four-outline" class="trigger-button" @click="onTriggerClick"></t-button>
25 25
                    <div slot="popper">
26 26
                      <div style="border-radius: 5px;padding: 20px 20px 20px 20px;background-color: white;">
27 27
                        <t-checkbox-group v-model="social0" vertical @change="checkAllGroupChange">
@ -82,11 +82,11 @@
82 82
                  </div>
83 83
                </div>
84 84
                <div class="btns">
85
                  <t-button color="primary">
85
                  <t-button>
86 86
                    <t-icon size="14" icon="upload-outline"></t-icon> 导出至Excel
87 87
                  </t-button>
88 88
                  <t-dropdown :visibled="customVisibled1" trigger-mode="custom">
89
                    <t-button slot="trigger" color="secondary" icon="tile-four-outline" @click="onTriggerClick"></t-button>
89
                    <t-button slot="trigger" color="secondary" icon="tile-four-outline" class="trigger-button" @click="onTriggerClick"></t-button>
90 90
                    <div slot="popper">
91 91
                      <div style="border-radius: 5px;padding: 20px 20px 20px 20px;background-color: white;">
92 92
                        <t-checkbox-group v-model="social1" vertical @change="checkAllGroupChange">

+ 40 - 31
security-protection-platform/src/modules/dashboard/index.vue

@ -1,9 +1,10 @@
1 1
<template>
2 2
  <div class="index" style="overflow:hidden;">
3
    <div :style="`background-image: url(${imgBg})`" class="top" >
3
    <div :style="`background-image: url(${imgBg})`" class="top">
4 4
      <img src="@/assets/images/AsiainfoLogo.png" class="top-logo">
5 5
      <div style="position: absolute;top:50%;left:54%;transform: translate(-50%,-50%);vertical-align: middle; color: white; font-size: 14px">
6
        <b> | AISI安防一体化平台</b></div>
6
        <b> | AISI安防一体化平台</b>
7
      </div>
7 8
    </div>
8 9
    <div>
9 10
      <div class="time"><span style="color: #00d8f3;font-size: 21px;">{{ nowDate | dateFormat }}</span></div>
@ -20,7 +21,7 @@
20 21
          <div id="doughnut" style="height: 100%;width: 100%"></div>
21 22
        </div>
22 23
        <div :style="`height:34%;margin-top: 3%;`" class="body-left-item">
23
          <div :style="`background-image: url(${titleImgBg})`" class="title" id="div1">
24
          <div id="div1" :style="`background-image: url(${titleImgBg})`" class="title">
24 25
            <span class="title-span">告警分析</span>
25 26
          </div>
26 27
          <div id="bar" style="height: 100%;width: 100%"></div>
@ -46,7 +47,7 @@
46 47
        </div>
47 48
        <!--        <video-player ref="videoPlayer" :options="videoOptions" :playsinline="true" class="vjs-custom-skin videoPlayer"></video-player>-->
48 49
        <div id="div11">
49
          <video-player v-if="videoOptions !== {}" ref="videoPlayer" :options="videoOptions" :playsinline="true"  id="div111" class="vjs-custom-skin videoPlayer">
50
          <video-player v-if="videoOptions !== {}" id="div111" ref="videoPlayer" :options="videoOptions" :playsinline="true" class="vjs-custom-skin videoPlayer">
50 51
51 52
          </video-player>
52 53
        </div>
@ -101,7 +102,7 @@ import 'video.js/dist/video-js.css'
101 102
import 'vue-video-player/src/custom-theme.css'
102 103
import 'videojs-flash'
103 104
import videojs from 'video.js'
104
import EventBus from "../../bus";
105
import EventBus from '../../bus'
105 106
window.videojs = videojs
106 107
107 108
require('video.js/dist/lang/zh-CN.js')
@ -179,6 +180,8 @@ export default {
179 180
    setInterval(() => { // 识别记录
180 181
      this.initRecognition()
181 182
    }, 5000)
183
    // console.log(textDom.nextSibling)
184
    // textDom.nextSibling.nodeValue = ''
182 185
    // EventBus.$on('sendAiData', (msg) => { // 获取镜屏推送消息
183 186
    //   console.log('已接收镜屏消息...')
184 187
    //   var oDiv = document.getElementById("div111");
@ -196,45 +199,44 @@ export default {
196 199
    // })
197 200
  },
198 201
  methods: {
199
    testHKK(box, alarmMemo) {
202
    testHKK (box, alarmMemo) {
200 203
      var width = box[2] - box[0]
201 204
      var height = box[3] - box[1]
202
      var oDiv = document.getElementById("div111");
205
      var oDiv = document.getElementById('div111')
203 206
      // var aBox = this.getByClass(oDiv,"vjs-tech");
204 207
      // alert(aBox.length);
205
      var e = oDiv;
206
      var div = document.createElement("div");
208
      var e = oDiv
209
      var div = document.createElement('div')
207 210
      // div.className = "form-group";
208 211
      var del = document.createElement('p')
209 212
      var x = 10 + this.hkk
210
      this.hkk ++
211
      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>';
212
      div.appendChild(del);
213
      e.appendChild(div);
214
      setTimeout(function() {
215
        del.remove();
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()
216 219
      }, 3000)
217 220
    },
218 221
219
220
    findInArr(arr,n){
221
      for(var i=0;i<arr.length;i++){
222
        if(arr[i] == n){
223
          return true;
222
    findInArr (arr, n) {
223
      for (var i = 0; i < arr.length; i++) {
224
        if (arr[i] == n) {
225
          return true
224 226
        }
225 227
      }
226
      return false;
228
      return false
227 229
    },
228
    getByClass(oParent,sClass){
229
      var ret = [];
230
      var aEle = oParent.getElementsByTagName("*");
231
      for(var i = 0; i < aEle.length; i++){
232
        var _aTmp = aEle[i].className.split(" ");
233
        if(this.findInArr(_aTmp,sClass)){
234
          ret.push(aEle[i]);
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])
235 237
        }
236 238
      }
237
      return ret;
239
      return ret
238 240
    },
239 241
    async createMyButton () {
240 242
      this.$nextTick(() => {
@ -243,6 +245,13 @@ export default {
243 245
        let start = document.getElementsByClassName('vjs-play-control vjs-control vjs-button')
244 246
        let volume = document.getElementsByClassName('vjs-volume-panel vjs-control vjs-volume-panel-horizontal')
245 247
        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
        })
246 255
        bars.forEach((item, index) => {
247 256
          time.forEach(item => {
248 257
            item.remove()
@ -385,7 +394,7 @@ export default {
385 394
          data = data.slice(0, 4)
386 395
        }
387 396
        data.forEach(e => {
388
          if (e.employeeName == null || e.employeeName == ''){
397
          if (e.employeeName == null || e.employeeName == '') {
389 398
            e.employeeCode = '未识别成功'
390 399
          }
391 400
          e.simi = e.simi.split('.')[0] + '%'
@ -856,7 +865,7 @@ export default {
856 865
.vjs-tech {
857 866
  pointer-events: none;
858 867
}
859
.checkedIndex{
868
.checkedIndex {
860 869
  border: 1px solid #009bf3;
861 870
}
862 871
</style>

+ 1 - 1
security-protection-platform/src/modules/system/assignment/index.vue

@ -23,7 +23,7 @@
23 23
                <t-icon icon="trash" size="16"></t-icon>删除
24 24
              </t-button>
25 25
              <t-dropdown :visibled="customVisibled" trigger-mode="custom">
26
                <t-button slot="trigger" color="secondary" icon="tile-four-outline" @click="onTriggerClick"></t-button>
26
                <t-button slot="trigger" color="secondary" icon="tile-four-outline" class="trigger-button" @click="onTriggerClick"></t-button>
27 27
                <div slot="popper">
28 28
                  <div style="border-radius: 5px;padding: 20px 20px 20px 20px;background-color: white;">
29 29
                    <t-checkbox-group v-model="social" vertical @change="checkAllGroupChange">

+ 1 - 1
security-protection-platform/src/modules/system/devicemana/index.vue

@ -22,7 +22,7 @@
22 22
                <t-icon icon="trash" size="16"></t-icon>删除
23 23
              </t-button>
24 24
              <t-dropdown :visibled="customVisibled" trigger-mode="custom">
25
                <t-button slot="trigger" color="secondary" icon="tile-four-outline" @click="onTriggerClick"></t-button>
25
                <t-button slot="trigger" color="secondary" icon="tile-four-outline" class="trigger-button" @click="onTriggerClick"></t-button>
26 26
                <div slot="popper">
27 27
                  <div style="border-radius: 5px;padding: 20px 20px 20px 20px;background-color: white;">
28 28
                    <t-checkbox-group v-model="social" vertical @change="checkAllGroupChange">

+ 1 - 1
security-protection-platform/src/modules/usermana/index.vue

@ -23,7 +23,7 @@
23 23
                <t-icon icon="trash" size="16"></t-icon>删除
24 24
              </t-button>
25 25
              <t-dropdown :visibled="customVisibled" trigger-mode="custom">
26
                <t-button slot="trigger" color="secondary" icon="tile-four-outline" @click="onTriggerClick"></t-button>
26
                <t-button slot="trigger" color="secondary" icon="tile-four-outline" class="trigger-button" @click="onTriggerClick"></t-button>
27 27
                <div slot="popper">
28 28
                  <div style="border-radius: 5px;padding: 20px 20px 20px 20px;background-color: white;">
29 29
                    <t-checkbox-group v-model="social" vertical @change="checkAllGroupChange">

+ 3 - 3
security-protection-platform/src/modules/workorder/index.vue

@ -81,15 +81,15 @@
81 81
              <t-button color="primary" @click="cardReplacementModal=true">
82 82
                <t-icon icon="plus-circle-outline" size="16"></t-icon> 补卡
83 83
              </t-button>
84
              <t-button color="primary">
84
              <t-button>
85 85
                <t-icon icon="upload" size="16"></t-icon> 导出至Excel
86 86
              </t-button>
87
              <t-button color="primary" @click="importWorkOrderModal=true">
87
              <t-button @click="importWorkOrderModal=true">
88 88
                <t-icon icon="download" size="16"></t-icon> 导入
89 89
              </t-button>
90 90
              <a href="javascript:;"> 模板下载 <t-icon icon="cloud-download-outline" size="16" style="lineHeight:24px"></t-icon></a>
91 91
              <t-dropdown :visibled="customVisibled" trigger-mode="custom">
92
                <t-button slot="trigger" color="secondary" icon="tile-four-outline" @click="onTriggerClick"></t-button>
92
                <t-button slot="trigger" color="secondary" icon="tile-four-outline" class="trigger-button" @click="onTriggerClick"></t-button>
93 93
                <div slot="popper">
94 94
                  <div style="border-radius: 5px;padding: 20px 20px 20px 20px;background-color: white;">
95 95
                    <t-checkbox-group v-model="social" vertical @change="checkAllGroupChange">

+ 19 - 6
security-protection-platform/src/styles/index.scss

@ -1,12 +1,13 @@
1
@import './variables.scss';
2
@import './sidebar.scss';
1
@import "./variables.scss";
2
@import "./sidebar.scss";
3 3
4 4
body {
5 5
  // height: 100%;
6 6
  -moz-osx-font-smoothing: grayscale;
7 7
  -webkit-font-smoothing: antialiased;
8 8
  text-rendering: optimizeLegibility;
9
  font-family: PingFangSC-Regular, Hiragino Sans GB, Microsoft YaHei, Arial, sans-serif;
9
  font-family: PingFangSC-Regular, Hiragino Sans GB, Microsoft YaHei, Arial,
10
    sans-serif;
10 11
}
11 12
12 13
label {
@ -101,7 +102,8 @@ aside {
101 102
  display: block;
102 103
  line-height: 32px;
103 104
  font-size: 16px;
104
  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Oxygen, Ubuntu, Cantarell, "Fira Sans", "Droid Sans", "Helvetica Neue", sans-serif;
105
  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Oxygen,
106
    Ubuntu, Cantarell, "Fira Sans", "Droid Sans", "Helvetica Neue", sans-serif;
105 107
  color: #2c3e50;
106 108
  -webkit-font-smoothing: antialiased;
107 109
  -moz-osx-font-smoothing: grayscale;
@ -131,7 +133,7 @@ aside {
131 133
}
132 134
133 135
.text-center {
134
  text-align: center
136
  text-align: center;
135 137
}
136 138
137 139
.sub-navbar {
@ -142,7 +144,13 @@ aside {
142 144
  text-align: right;
143 145
  padding-right: 20px;
144 146
  transition: 600ms ease position;
145
  background: linear-gradient(90deg, rgba(32, 182, 249, 1) 0%, rgba(32, 182, 249, 1) 0%, rgba(33, 120, 241, 1) 100%, rgba(33, 120, 241, 1) 100%);
147
  background: linear-gradient(
148
    90deg,
149
    rgba(32, 182, 249, 1) 0%,
150
    rgba(32, 182, 249, 1) 0%,
151
    rgba(33, 120, 241, 1) 100%,
152
    rgba(33, 120, 241, 1) 100%
153
  );
146 154
147 155
  .subtitle {
148 156
    font-size: 20px;
@ -186,3 +194,8 @@ aside {
186 194
.multiselect--active {
187 195
  z-index: 1000 !important;
188 196
}
197
198
// 解决筛选按钮的错位问题
199
.trigger-button {
200
  transform: translateY(1.5px);
201
}