1、添加默认打包到BI位置因为实际环境在html/BI下面

2、添加画板左右影藏，并且尺寸会左右变化。。。

1、添加默认打包到BI位置因为实际环境在html/BI下面
2、添加画板左右影藏，并且尺寸会左右变化。。。
qianbao
1 parent 9652d5c0
Showing 4 changed files with 91 additions and 65 deletions
config/index.js
src/views/bigscreenDesigner/designer/index.vue
src/views/bigscreenDesigner/designer/tools/index.js
src/views/bigscreenDesigner/designer/widget/text/widgetTime.vue
@@ -7,7 +7,6 @@ const path = require(&#39;path&#39;)
 module.exports = {
   dev: {
     // Paths
-    //assetsSubDirectory: 'BI/static',//正式打包 因为nginx转发原因，需要指定路径 使用这个
     assetsSubDirectory: 'static',
     assetsPublicPath: '/',
     proxyTable: {},
@@ -59,7 +58,7 @@ module.exports = {
      * then assetsPublicPath should be set to "/bar/".
      * In most cases please use '/' !!!
      */
-    assetsPublicPath: '/',
+    assetsPublicPath: '/BI/',//正式打包 因为nginx转发原因，需要指定路径
  
     /**
      * Source Maps
@@ -62,16 +62,13 @@
         </el-tab-pane>
       </el-tabs>
     </div>
-
-    <div
-      class="layout-left-fold"
+    <!-- 是否显示左侧组件栏-->
+    <div class="layout-left-fold"
       :style="{ width: widthLeftForToolsHideButton + 'px' }"
-      @click="toolIsShow = !toolIsShow"
-    >
-      <i class="el-icon-arrow-left"  v-if="toolIsShow" />
-      <i class="el-icon-arrow-right"  v-if="!toolIsShow" />
+      @click="toolIsShow = !toolIsShow">
+      <i :class="[toolIsShow?' el-icon-arrow-left':'el-icon-arrow-right']"/>
     </div>
-
+    <!-- 上面操作导入、导出-->
     <div
       class="layout-middle"
       :style="{ width: middleWidth + 'px', height: middleHeight + 'px' }"
@@ -173,6 +170,7 @@
           </ul>
         </span>
       </div>
+      <!-- 中间设计-->
       <div
         class="workbench-container"
         :style="{
@@ -189,6 +187,14 @@
           :position="'relative'"
           :is-scale-revise="true"
           :visible.sync="dashboard.presetLineVisible"
+          :style="{
+            //如果想尺子不变化，单独定义遍历等于工作区域
+            // width: bigscreenWidthRuler + 'px',
+            // height: bigscreenHeightRuler + 'px',
+            width: bigscreenWidthInWorkbench + 'px',
+            //高度尺子不变换，想变化放出来
+            height: bigscreenHeightInWorkbench + 'px',
+          }"
         >
           <div
             id="workbench"
@@ -229,19 +235,19 @@
         </vue-ruler-tool>
       </div>
     </div>
+    <!-- 右侧是否显示-->
     <div
       class="layout-left-fold"
-      :style="{ width: widthLeftForToolsHideButton + 'px' }"
-      @click="setupIsShow = !setupIsShow"
-    >
-      <i class="el-icon-arrow-left"  v-if="!setupIsShow" />
-      <i class="el-icon-arrow-right"  v-if="setupIsShow" />
+      :style="{ width: widthRightForToolsHideButton + 'px' }"
+      @click="setupIsShow = !setupIsShow">
+      <i :class="[setupIsShow?' el-icon-arrow-right':'el-icon-arrow-left']"/>
     </div>
+    <!-- 右侧配置-->
     <div class="layout-right" :style="{ width: widthLeftForOptions + 'px' }" v-if="setupIsShow">
       <el-tabs v-model="activeName" type="border-card" :stretch="true">
         <el-tab-pane
           v-if="
-            isNotNull(widgetOptions.setup) || isNotNull(widgetOptions.collapse)
+            this.isNotNull(widgetOptions.setup) ||  this.isNotNull(widgetOptions.collapse)
           "
           name="first"
           label="配置"
@@ -253,7 +259,7 @@
           />
         </el-tab-pane>
         <el-tab-pane
-          v-if="isNotNull(widgetOptions.data)"
+          v-if="this.isNotNull(widgetOptions.data)"
           name="second"
           label="数据"
         >
@@ -264,7 +270,7 @@
           />
         </el-tab-pane>
         <el-tab-pane
-          v-if="isNotNull(widgetOptions.position)"
+          v-if="this.isNotNull(widgetOptions.position)"
           name="third"
           label="坐标"
         >
@@ -306,6 +312,7 @@ import contentMenu from &quot;./components/contentMenu&quot;;
 import { getToken } from "@/utils/auth";
 import { Revoke } from "@/utils/revoke";
 import { mapMutations } from 'vuex';
+import process from "process";
  
 export default {
   name: "Login",
@@ -324,8 +331,9 @@ export default {
       widgetTools: widgetTools, // 左侧工具栏的组件图标，将js变量加入到当前作用域
       widthLeftForTools: 200, // 左侧工具栏宽度
       widthLeftForToolsHideButton: 15, // 左侧工具栏折叠按钮宽度
+      widthRightForToolsHideButton: 15, // 右侧工具栏折叠按钮宽度
       widthLeftForOptions: 300, // 右侧属性配置区
-      widthPaddingTools: 18,
+      widthPaddingTools: 18,//vueRuler
       toolIsShow: true, // 左侧工具栏是否显示
       setupIsShow: true, // 右侧配置是否显示
       bigscreenWidth: 1920, // 大屏设计的大小
@@ -397,18 +405,12 @@ export default {
         Authorization: getToken(), // 直接从本地获取token就行
       };
     },
-    // 左侧折叠切换时，动态计算中间区的宽度
+    // 左侧、右侧折叠切换时，动态计算中间区的宽度
     middleWidth() {
-      let widthLeftAndRight = 0;
-      if (this.toolIsShow) {
-        widthLeftAndRight += this.widthLeftForTools; // 左侧工具栏宽度
-      }
-      widthLeftAndRight += this.widthLeftForToolsHideButton; // 左侧工具栏折叠按钮宽度
-      if (this.setupIsShow) {
-        widthLeftAndRight += this.widthLeftForOptions;  // 右侧配置栏宽度
+      if(!this.setupIsShow && !this.toolIsShow){
+        return document.documentElement.clientWidth-this.widthPaddingTools;
       }
-      let middleWidth = this.bodyWidth - widthLeftAndRight;
-      return middleWidth;
+      return this.bodyWidth - this.widthLeftAndRight();
     },
     middleHeight() {
       return this.bodyHeight;
@@ -433,6 +435,13 @@ export default {
         this.getPXUnderScale(this.bigscreenHeight) + this.widthPaddingTools
       );
     },
+    // 尺子的宽度高度
+    // bigscreenWidthRuler() {
+    //   return this.middleWidth;
+    // },
+    // bigscreenHeightRuler() {
+    //   return this.middleHeight;
+    // },
   },
   watch: {
     widgets: {
@@ -731,7 +740,20 @@ export default {
         type: "error",
       });
     },
-
+    //中间区域减去的宽度
+    widthLeftAndRight(){
+      let widthLeftAndRight = 0;
+      if (this.toolIsShow) {
+        widthLeftAndRight += this.widthLeftForTools; // 左侧工具栏宽度
+        widthLeftAndRight += this.widthLeftForToolsHideButton; // 左侧工具栏折叠按钮宽度
+      }
+      if (this.setupIsShow) {
+        widthLeftAndRight += this.widthLeftForOptions;  // 右侧配置栏宽度
+        widthLeftAndRight += this.widthRightForToolsHideButton; // 右侧工具栏折叠按钮宽度
+      }
+      // console.log("中间区域增加的宽度",widthLeftAndRight,this.setupIsShow,this.toolIsShow)
+      return widthLeftAndRight;
+    },
     // 在缩放模式下的大小
     getPXUnderScale(px) {
       return this.bigscreenScaleInWorkbench * px;
@@ -941,7 +963,7 @@ export default {
           });
           this.widgetOptions.setup = newSetup;
         } else if (key === 'data') {
-           // 全局数据更改
+          // 全局数据更改
           this.dashboard.data=val;
           let newData = new Array();
           const cloneVal = this.deepClone(val);
@@ -1155,7 +1177,7 @@ export default {
   }
  
   .layout-middle {
-    // display: flex;
+    //display: flex;
     position: relative;
     //width: calc(100% - 445px);
     height: 100%;
@@ -1242,8 +1264,8 @@ export default {
         background-image: linear-gradient(
             hsla(0, 0%, 100%, 0.1) 1px,
             transparent 0
-          ),
-          linear-gradient(90deg, hsla(0, 0%, 100%, 0.1) 1px, transparent 0);
+        ),
+        linear-gradient(90deg, hsla(0, 0%, 100%, 0.1) 1px, transparent 0);
         // z-index: 2;
       }
     }
@@ -1372,7 +1394,7 @@ li {
   float: left;
   padding: 12px 30px;
   color: #999;
-  font: bold 12px;
+  font-bold: 12px;
   text-decoration: none;
 }
  
@@ -1526,23 +1548,44 @@ li {
     padding: 0;
   }
 }
-/* 设置滚动条的样式 */
-::-webkit-scrollbar {
+///* 设置滚动条的样式 */
+//::-webkit-scrollbar {
+//  width: 0;
+//}
+//
+///* 滚动槽 */
+//::-webkit-scrollbar-track {
+//  -webkit-box-shadow: inset006pxrgba(0, 0, 0, 0.3);
+//}
+//
+///* 滚动条滑块 */
+//::-webkit-scrollbar-thumb {
+//  background: rgba(0, 0, 0, 0.1);
+//  -webkit-box-shadow: inset006pxrgba(0, 0, 0, 0.5);
+//}
+//
+//::-webkit-scrollbar-thumb:window-inactive {
+//  background: rgba(255, 0, 0, 0.4);
+//}
+/*定义滚动条高宽及背景 高宽分别对应横竖滚动条的尺寸*/
+::-webkit-scrollbar{
   width: 0;
+  background-color: #242a30;
 }
  
-/* 滚动槽 */
+/*定义滚动条轨道 内阴影+圆角*/
 ::-webkit-scrollbar-track {
-  -webkit-box-shadow: inset006pxrgba(0, 0, 0, 0.3);
-}
-
-/* 滚动条滑块 */
-::-webkit-scrollbar-thumb {
-  background: rgba(0, 0, 0, 0.1);
-  -webkit-box-shadow: inset006pxrgba(0, 0, 0, 0.5);
+  box-shadow: inset 0 0 6px rgba(0, 0, 0, 0.3);
+  -webkit-box-shadow: inset 0 0 6px rgba(0, 0, 0, 0.3);
+  border-radius: 10px;
+  background-color: #F5F5F5;
 }
  
-::-webkit-scrollbar-thumb:window-inactive {
-  background: rgba(255, 0, 0, 0.4);
+/*定义滑块 内阴影+圆角*/
+::-webkit-scrollbar-thumb{
+  border-radius: 10px;
+  box-shadow: inset 0 0 6px rgba(0, 0, 0, .1);
+  -webkit-box-shadow: inset 0 0 6px rgba(0, 0, 0, .1);
+  background-color: #c8c8c8;
 }
 </style>
@@ -41,22 +41,6 @@ const screenConfig = {
         placeholder: '',
         value: ''
       },
-      // {
-      //   type: 'data-source-select',
-      //   label: '主数据源',
-      //   name: 'master',
-      //   required: false,
-      //   placeholder: '主数据源[List:sName、sValue] ',/**LIST sName、sValue 后台代码自动转成 sName:sValue Map形式*/
-      //   value: ''
-      // },
-      // {
-      //   type: 'el-input-number',
-      //   label: '刷新时间(毫秒)',
-      //   name: 'refreshMasterTime',
-      //   value: '600000',
-      //   required: false,
-      //   placeholder: '毫秒',
-      // },
       {
         type: 'vue-color',
         label: '背景颜色',
@@ -109,7 +93,7 @@ const screenConfig = {
         placeholder: '',
         relactiveDom: 'dataType',
         relactiveDomValue: 'staticData',
-        value: {title:'标题', name: '测试名字', address: '上海市普陀区金沙江路 1518 弄0001','dProductQty':100,'dProductRate':13},
+        value: {'title':'标题', 'name': '测试名字', 'address': '上海市普陀区金沙江路 1518 弄0001','dProductQty':100,'dProductRate':13},
       },
       {
         type: 'dycustComponents',
@@ -17,7 +17,7 @@ export default {
   },
   computed: {
     transStyle() {
-      console.log(this.objToOne(this.options));
+      // console.log(this.objToOne(this.options));
       return this.objToOne(this.options);
     },
     styleColor() {