666

commandCenter/src/assets/css/main.scss

@@ -677,3 +677,18 @@ div.box-40 {
 .width100 {
     width: 100% !important;
 }
+
+.el-button {
+    &.el-button--default {
+        background: transparent !important;
+    }
+}
+.el-button--small {
+    padding: 8px 20px !important;
+}
+.v-modal{
+    background: transparent;
+}
+strong{
+    font-weight: 100;
+}

commandCenter/src/components/common/Header.vue

@@ -165,6 +165,9 @@ $colorOption: rgba(250, 250, 250, 0.6);
             .en {
                 font-size: 12px;
                 letter-spacing: 2px;
+                white-space: nowrap;
+                overflow: hidden;
+                text-overflow: ellipsis;
             }
         }
     }
@@ -200,7 +203,7 @@ $colorOption: rgba(250, 250, 250, 0.6);
             margin-top: 20px;
             margin-right: 60px;
         }
-        .saveColumn-select{
+        .saveColumn-select {
             width: 125px;
         }
         .selectIocn {

commandCenter/src/components/common/XKModal.vue

@@ -97,7 +97,7 @@ export default {
 };
 </script>
 
-<style lang="scss">
+<style lang="scss" scoped>
 .xk-modal {
     overflow: hidden;
     .el-dialog {

commandCenter/src/components/common/alertModal.vue

@@ -1,12 +1,4 @@
-<!--
- * @Author: wf
- * @Date: 2021-08-12 16:12:17
- * @LastEditors: wfmodal.customClass
- * @LastEditTime: 2021-08-13 09:15:25
- * @Description: element-ui Dialog弹窗封装
--->
 <template>
-    <!-- <transition name="el-zoom-in-center"> -->
     <el-dialog
         v-if="modal.show"
         :visible.sync="modal.show"
@@ -23,27 +15,25 @@
         :close-on-click-modal="false"
         :close-on-press-escape="false"
     >
-        <div slot="title">
+        <template slot="title">
             <div class="title_row">
                 <strong class="title">{{ modal.title }}</strong>
                 {{ modal.star }}
                 <span v-if="modal.hideStar"></span>
                 <span v-else-if="modal.title && !modal.notip"> (<span class="color-danger">*为必填项</span>) </span>
             </div>
-        </div>
+        </template>
         <div class="content">
             <component :id="modal.id" :is="modal.component" :params="modal.props" :ref="modal.id" @close="close"></component>
         </div>
-        <!-- </div> -->
-        <span slot="footer" class="dialog-footer" v-if="!modal.fullscreen || modal.showFooter">
+        <!-- <span slot="footer" class="dialog-footer" v-if="!modal.fullscreen || modal.showFooter">
             <el-button @click="alertReset(modal.id)" class="reset" v-if="modal.showResetButton">重置</el-button>
             <el-button @click="close" class="reset" v-if="!modal.showCancelButton">{{ modal.cancelButtonText || '取消' }}</el-button>
             <el-button type="primary" v-if="!modal.showConfirmButton" @click="submit(modal.id)">{{
                 modal.confirmButtonText || '保存'
             }}</el-button>
-        </span>
+        </span> -->
     </el-dialog>
-    <!-- </transition> -->
 </template>
 
 <script>
@@ -70,7 +60,6 @@ export default {
     },
     computed: {
         modal() {
-            // const xx = this.$store.getters['getPopups'];
             let obj = this.params;
             if (obj && obj.height) {
                 this.$nextTick(() => {
@@ -107,7 +96,6 @@ export default {
         }
     },
     created() {
-        // debugger
         // this.modal=this.params;
     }
 };
@@ -120,18 +108,31 @@ export default {
     /deep/.el-dialog {
         color: #424656;
         .el-dialog__header {
-            height: rem(50);
-            border-radius: 6px 6px 0 0;
-            background: rgba(248, 252, 255, 1);
-            padding: 0 rem(25);
+            height: 40px;
+            border-radius: 9px 9px 0 0;
+            background: linear-gradient(270deg, rgba(0, 178, 255, 0) 0%, #00b2ff 100%);
+            padding: 0 10px;
             display: flex;
             align-items: center;
             justify-content: space-between;
-            font-size: rem(14);
+            font-size: 14px;
+            .el-dialog__headerbtn {
+                position: absolute;
+                top: 0;
+                top: 12px;
+                right: 7px;
+                .el-dialog__close {
+                    color: white;
+                }
+            }
+            .title_row {
+                color: white;
+            }
         }
         .el-dialog__body {
-            padding: rem(20) rem(25);
+            padding: 10px;
             overflow: auto;
+            color: #ffffff;
             .content {
                 height: 100%;
             }
@@ -150,8 +151,8 @@ export default {
             border-top: none;
             position: relative;
             bottom: rem(10);
-            margin-top: rem(10);
-            padding: rem(10) rem(20) rem(20);
+            margin-top: rem(20);
+            padding: 10px 20px 20px;
             .dialog-footer .reset {
                 border: 1px solid #0eaeff;
                 color: #0eaeff;
@@ -177,25 +178,22 @@ export default {
     }
 }
 .is-modal {
-    .el-dialog {
-        border-radius: rem(8);
+    /deep/ .el-dialog {
+        border-radius: 9px;
         width: auto;
         max-height: 80%;
-        min-height: rem(210);
+        min-height: 210px;
         position: absolute;
         top: 50%;
         left: 50%;
         transform: translate(-50%, -50%);
-        background: #fff;
+        background: #00000069;
         .el-dialog__body {
             /deep/ .content {
                 height: 100% !important;
             }
         }
     }
-    //     .el-dialog__body::-webkit-scrollbar {
-    // 	display: none;
-    // }
 }
 
 .newpop .el-dialog {

commandCenter/src/store/store.js

@@ -208,9 +208,9 @@ const store = new Vuex.Store({
                 })
                 .catch((err) => {
                     if (err.message.indexOf('Loading chunk') == 0) {
-                        ELEMENT.Message.info('版本已更新，请刷新页面重试');
+                        this.$message.info('版本已更新，请刷新页面重试');
                     } else {
-                        ELEMENT.Message.info(err.message);
+                        this.$message.info(err.message);
                     }
                 });
         },
@@ -245,7 +245,7 @@ const store = new Vuex.Store({
                     ctx.commit('setModalParams', params);
                 })
                 .catch((err) => {
-                    ELEMENT.Message.error(`${err.message}，请刷新页面重试`);
+                   this.$message.error(`${err.message}，请刷新页面重试`);
                 });
         },
         closeModal(ctx) {

commandCenter/src/views/commandDispatch/index.vue

@@ -3,11 +3,11 @@
         <div
             class="img-content"
             ref="divImg"
-            :style="`backgroundImage:url(${imgUrl});backgroundSize: cover;`"
+            :style="`backgroundImage:url(${imgUrl});backgroundSize: 100% 100%;`"
             @click="edit ? paintingPoint($event) : null"
         ></div>
         <div class="point" :style="styleObj()">
-            <span class="point-type point-type1"></span>
+            <span class="point-type point-type1" @click="togglePop"></span>
             <span class="textStyle">xxxx</span>
         </div>
         <div class="index-content-left"></div>
@@ -40,18 +40,31 @@ export default {
     },
     methods: {
         styleObj() {
-            return `top:${0.4979166666666667 * Number(this.height)}px;left:${0.5009633911368016 * Number(this.width)}px`;
+            return `left:49.843750%;top:23.909986%`;
+        },
+        togglePop() {
+            this.$store.dispatch('addPopup', {
+                url: '/commandDispatch/pop/typeCamera.vue',
+                title: '普通摄像头',
+                notip: true,
+                width: '2.89rem',
+                height: '2.25rem',
+                props: {
+                    // data: JSON.parse(JSON.stringify(this.cruUserInfo)),
+                    // callback: resolve
+                }
+            });
         },
         paintingPoint(e) {
             let width = window.getComputedStyle(this.$refs.divImg).width.replace(/px/, ''),
                 height = window.getComputedStyle(this.$refs.divImg).height.replace(/px/, '');
 
             let pointObj = {
-                type: '',
+                type: 1,
                 x: ((e.x / width) * 100).toFixed(6) + '%',
                 y: ((e.y / height) * 100).toFixed(6) + '%'
             };
-            console.log(e.x / width, e.y / height);
+            console.log(pointObj);
         }
     }
 };

commandCenter/src/views/commandDispatch/pop/typeCamera.vue

@@ -0,0 +1,53 @@
+<template>
+    <div class="diyTable">
+        <div class="list">
+            <div class="list-title">门禁位置</div>
+            <div class="list-text">滨江华府A栋一单元出入口</div>
+        </div>
+        <div class="list">
+            <div class="list-title">通行人数</div>
+            <div class="list-text">266人</div>
+        </div>
+        <div class="list">
+            <div class="list-title">状态</div>
+            <div class="list-text">正常</div>
+        </div>
+        <div class="list">
+            <div class="list-title">门禁位置</div>
+            <div class="list-text">滨江华府A栋一单元出入口</div>
+        </div>
+    </div>
+</template>
+<script>
+export default {
+    data() {
+        return {};
+    }
+};
+</script>
+<style lang="scss" scoped>
+.diyTable {
+    border: 1px solid #ffffff29;
+    border-radius: 6px;
+    font-size: 12px;
+    .list {
+        line-height: 40px;
+        display: flex;
+        border-bottom: 1px solid #ffffff29;
+        &:last-child {
+            border: none;
+        }
+        &-title {
+            width: 90px;
+            text-align: center;
+            border-right: 1px solid #ffffff29;
+        }
+        &-text {
+            padding-left: 20px;
+            white-space: nowrap;
+            overflow: hidden;
+            text-overflow: ellipsis;
+        }
+    }
+}
+</style>