lw-cdp-ui 1.4.12 → 1.4.13

package/dist/components/lwBiChart/page.vue

@@ -1,71 +1,50 @@
 <template>
-  <div class="global-layout">
-    <lw-search v-if="searchOptions.length > 0"
-               class="search-body"
-               :options="searchOptions"
-               v-model="searchParams"
-               :hideLabel="true"
-               @search="search"
-               @reset="reset" />
+  <div class="lw-bi-chart-global-layout">
+    <lw-search v-if="searchOptions.length > 0" class="search-body" :options="searchOptions" v-model="searchParams"
+      :hideLabel="true" @search="search" @reset="reset" />
 
-    <GridLayout v-model:layout="chartList"
-                :col-num="12"
-                :row-height="30"
-                :is-draggable="designMode"
-                :is-resizable="designMode"
-                :use-css-transforms="false"
-                vertical-compact
-                use-css-transforms>
-      <GridItem v-for="(item, index) in chartList"
-                :key="item.i"
-                :x="item.x"
-                :y="item.y"
-                :w="item.w"
-                :h="item.h"
-                :i="item.i">
-        <div class="global-layout-item"
-             :class="{edit: designMode}">
-          <div v-if="item.data?.setting?.activeDateUnitFilter"
-               class="filter-top">
-            <el-radio-group v-model="item.timeUnit"
-                            @change="changeTimeUnit(item, index)">
-              <el-radio-button :label="key"
-                               :value="value"
-                               v-for="(value, key) in item.data?.setting?.optionalDateUnitRanges" />
+    <GridLayout v-model:layout="chartList" :col-num="12" :row-height="30" :is-draggable="designMode"
+      :is-resizable="designMode" :use-css-transforms="false" vertical-compact use-css-transforms>
+      <GridItem v-for="(item, index) in chartList" :key="item.i" :x="item.x" :y="item.y" :w="item.w" :h="item.h"
+        :i="item.i">
+        <div class="lw-bi-chart-global-layout-item" :class="{ edit: designMode }">
+          <div v-if="item.data?.setting?.activeDateUnitFilter" class="filter-top">
+            <el-radio-group v-model="item.timeUnit" @change="changeTimeUnit(item, index)">
+              <el-radio-button :label="key" :value="value"
+                v-for="(value, key) in item.data?.setting?.optionalDateUnitRanges" />
               <el-radio-button disabled
-                               v-if="Object.keys(item.data?.setting?.optionalDateUnitRanges).length == 0">未选择周期列表</el-radio-button>
+                v-if="Object.keys(item.data?.setting?.optionalDateUnitRanges).length == 0">未选择周期列表</el-radio-button>
             </el-radio-group>
           </div>
+
+          <div v-if="item?.type == 'Dashboard'" class="grid-item-dashboard">
+            <lwBiChartPage :chartId="item.id" />
+          </div>
           <lwBiChartItem :rawData="item.data"
-                         :height="item.data?.setting?.activeDateUnitFilter ? 'calc(100% - 36px)' : '100%'" />
-          <div class="remove"
-               v-if="designMode"
-               @click="removeChart(index)">
-            <el-button type="primary"
-                       link
-                       icon="el-icon-delete"></el-button>
+            :height="item.data?.setting?.activeDateUnitFilter ? 'calc(100% - 36px)' : '100%'" />
+          <div class="remove" v-if="designMode" @click="removeChart(index)">
+            <el-button type="primary" link icon="el-icon-delete"></el-button>
           </div>
         </div>
 
       </GridItem>
     </GridLayout>
-    <div class="no-record-panel e-unselect"
-         v-if="chartList.length===0">
+    <div class="no-record-panel e-unselect" v-if="chartList.length === 0">
       <el-empty :description="designMode ? '点击上方工具栏中的按钮，添加图表至当前仪表板' : '仪表板中还没有添加任何图表'" />
     </div>
   </div>
 </template>
 
 <script>
-import {GridLayout, GridItem} from 'grid-layout-plus'
+import { GridLayout, GridItem } from 'grid-layout-plus'
 export default {
-  components: {GridLayout, GridItem},
+  components: { GridLayout, GridItem },
   data() {
     return {
       id: '',
       searchOptions: [],
       chartList: [],
-      globalFilter: {values: {}, ranges: {}},
+      globalFilter: { values: {}, ranges: {} },
       searchParams: {}
     }
   },
@@ -98,7 +77,7 @@ export default {
       this.getFilter(res.filterControls)
     },
     async changeTimeUnit(chartItem, index) {
-      let {data, ...chartData} = chartItem
+      let { data, ...chartData } = chartItem
       let visualize = await this.$http.get(
         `${this.$config.API_URL}/bi-manage/{tenantId}/{buCode}/visualize/${chartData.id}`
       )
@@ -166,11 +145,11 @@ export default {
       this.getChartList(this.globalFilter)
     },
     reset() {
-      this.getChartList({values: {}, ranges: {}})
+      this.getChartList({ values: {}, ranges: {} })
     },
     async getChartList(globalFilter = {}) {
       let params = {
-        charts: this.chartList.map(({data, ...item}) => item),
+        charts: this.chartList.map(({ data, ...item }) => item),
         globalFilter
       }
       this.chartList = await this.$http.post(
@@ -241,25 +220,29 @@ export default {
 </script>
 
 <style lang="scss" scoped>
-.global-layout {
+.lw-bi-chart-global-layout {
   width: calc(100% + 30px);
-  min-height: 400px;
+  min-height: 200px;
   margin: -15px -15px 0;
+
   :deep(.vgl-layout) {
     width: 100%;
     height: 100%;
   }
+
   .search-body {
     width: calc(100% - 20px);
     margin: 10px auto -10px;
   }
-  .global-layout-item {
+
+  .lw-bi-chart-global-layout-item {
     height: 100%;
     width: 100%;
     position: relative;
     display: flex;
     flex-wrap: wrap;
     gap: 9px;
+
     .remove {
       position: absolute;
       right: 2px;
@@ -268,8 +251,10 @@ export default {
       line-height: 10px;
       background-color: rgba($color: #ffffff, $alpha: 0.8);
     }
+
     &.edit {
       border: 1px solid var(--el-fill-color);
+
       :deep(.chart-title-card) {
         background-color: transparent;
         box-shadow: 0 0 0;
@@ -282,10 +267,26 @@ export default {
       margin-bottom: -5px;
     }
   }
+
   .no-record-panel {
     width: 100%;
     padding: 100px;
     text-align: center;
   }
+
+  .grid-item-dashboard {
+    width: 100%;
+    padding: 15px 15px 0 15px;
+    background-color: var(--el-bg-color-overlay);
+    box-shadow: 0 0 30px #0000000d;
+
+    :deep(.chart) {
+      box-shadow: 0 0 0 !important;
+    }
+
+    :deep(.chart-title-card) {
+      box-shadow: 0 0 0 !important;
+    }
+  }
 }
 </style>

package/dist/components/lwLayout/components/sideM.vue

@@ -1,135 +1,185 @@
 <template>
-	<div ref="" class="mobile-nav-button" @click="showMobileNav($event)" v-drag draggable="false"><el-icon><el-icon-menu /></el-icon></div>
-
-	<el-drawer ref="mobileNavBox" title="移动端菜单" :size="240" v-model="nav" direction="ltr" :with-header="false" destroy-on-close>
-		<el-container class="mobile-nav">
-			<el-header>
-				<div class="logo-bar"><img class="logo" src="../../../assets/images/logo.svg"><span>{{ $config.APP_NAME }}</span></div>
-			</el-header>
-			<el-main>
-				<el-scrollbar>
-					<el-menu :default-active="$route.meta.active || $route.fullPath" @select="select" router background-color="#212d3d" text-color="#fff" active-text-color="#409EFF">
-						<NavMenu :navMenus="menu"></NavMenu>
-					</el-menu>
-				</el-scrollbar>
-			</el-main>
-		</el-container>
-	</el-drawer>
+  <div ref="" class="mobile-nav-button" @click="showMobileNav($event)" v-drag draggable="false">
+    <el-icon><el-icon-menu /></el-icon>
+  </div>
+
+  <el-drawer ref="mobileNavBox" title="移动端菜单" :size="240" v-model="nav" direction="ltr" :with-header="false"
+    destroy-on-close>
+    <el-container class="mobile-nav">
+      <el-header>
+        <div class="logo-bar"><img class="logo" src="../../../assets/images/logo.svg"><span>{{ $config.APP_NAME
+        }}</span></div>
+      </el-header>
+      <el-main>
+        <el-scrollbar>
+          <el-menu :default-active="$route.meta.active || $route.fullPath" @select="select" router
+            background-color="#212d3d" text-color="#fff" active-text-color="#409EFF">
+            <NavMenu :navMenus="menu"></NavMenu>
+          </el-menu>
+        </el-scrollbar>
+      </el-main>
+    </el-container>
+  </el-drawer>
 
 </template>
 
 <script>
-	import NavMenu from './NavMenu.vue';
-	export default {
-		components: {
-			NavMenu
-		},
-		data() {
-			return {
-				nav: false,
-				menu: []
-			}
-		},
-		computed:{
-
-		},
-		created() {
-			var menu = this.$router.sc_getMenu()
-			this.menu = this.filterUrl(menu)
-		},
-
-		watch: {
-
-		},
-		methods: {
-			showMobileNav(e){
-				var isdrag = e.currentTarget.getAttribute('drag-flag')
-				if (isdrag == 'true') {
-					return false;
-				}else{
-					this.nav = true;
-				}
-
-			},
-			select(){
-				this.$refs.mobileNavBox.handleClose()
-			},
-			//转换外部链接的路由
-			filterUrl(map){
-				var newMap = []
-				map && map.forEach(item => {
-					item.meta = item.meta?item.meta:{};
-					//处理隐藏
-					if(item.meta.hidden || item.meta.type=="button"){
-						return false
-					}
-					//处理http
-					if(item.meta.type=='iframe'){
-						item.path = `/i/${item.name}`;
-					}
-					//递归循环
-					if(item.children&&item.children.length > 0){
-						item.children = this.filterUrl(item.children);
-					}
-					newMap.push(item)
-				})
-				return newMap;
-			}
-		},
-		directives: {
-			drag(el){
-				let oDiv = el; //当前元素
-				let firstTime='',lastTime='';
-				//禁止选择网页上的文字
-				// document.onselectstart = function() {
-				// 	return false;
-				// };
-				oDiv.onmousedown = function(e){
-					//鼠标按下，计算当前元素距离可视区的距离
-					let disX = e.clientX - oDiv.offsetLeft;
-					let disY = e.clientY - oDiv.offsetTop;
-					document.onmousemove = function(e){
-						oDiv.setAttribute('drag-flag', true);
-						firstTime = new Date().getTime();
-						//通过事件委托，计算移动的距离
-						let l = e.clientX - disX;
-						let t = e.clientY - disY;
-
-						//移动当前元素
-
-						if(t > 0 && t < document.body.clientHeight - 50){
-							oDiv.style.top = t + "px";
-						}
-						if(l > 0 && l < document.body.clientWidth - 50){
-							oDiv.style.left = l + "px";
-						}
-
-
-					}
-					document.onmouseup = function(){
-						lastTime = new Date().getTime();
-						if( (lastTime - firstTime)>200 ){
-							oDiv.setAttribute('drag-flag', false);
-						}
-						document.onmousemove = null;
-						document.onmouseup = null;
-					};
-					//return false不加的话可能导致黏连，就是拖到一个地方时div粘在鼠标上不下来，相当于onmouseup失效
-					return false;
-				};
-			}
-		}
-	}
+import NavMenu from './NavMenu.vue';
+export default {
+  components: {
+    NavMenu
+  },
+  data() {
+    return {
+      nav: false,
+      menu: []
+    }
+  },
+  computed: {
+
+  },
+  created() {
+    var menu = this.$router.sc_getMenu()
+    this.menu = this.filterUrl(menu)
+  },
+
+  watch: {
+
+  },
+  methods: {
+    showMobileNav(e) {
+      var isdrag = e.currentTarget.getAttribute('drag-flag')
+      if (isdrag == 'true') {
+        return false;
+      } else {
+        this.nav = true;
+      }
+
+    },
+    select() {
+      this.$refs.mobileNavBox.handleClose()
+    },
+    //转换外部链接的路由
+    filterUrl(map) {
+      var newMap = []
+      map && map.forEach(item => {
+        item.meta = item.meta ? item.meta : {};
+        //处理隐藏
+        if (item.meta.hidden || item.meta.type == "button") {
+          return false
+        }
+        //处理http
+        if (item.meta.type == 'iframe') {
+          item.path = `/i/${item.name}`;
+        }
+        //递归循环
+        if (item.children && item.children.length > 0) {
+          item.children = this.filterUrl(item.children);
+        }
+        newMap.push(item)
+      })
+      return newMap;
+    }
+  },
+  directives: {
+    drag(el) {
+      let oDiv = el; //当前元素
+      let firstTime = '', lastTime = '';
+      //禁止选择网页上的文字
+      // document.onselectstart = function() {
+      // 	return false;
+      // };
+      oDiv.onmousedown = function (e) {
+        //鼠标按下，计算当前元素距离可视区的距离
+        let disX = e.clientX - oDiv.offsetLeft;
+        let disY = e.clientY - oDiv.offsetTop;
+        document.onmousemove = function (e) {
+          oDiv.setAttribute('drag-flag', true);
+          firstTime = new Date().getTime();
+          //通过事件委托，计算移动的距离
+          let l = e.clientX - disX;
+          let t = e.clientY - disY;
+
+          //移动当前元素
+
+          if (t > 0 && t < document.body.clientHeight - 50) {
+            oDiv.style.top = t + "px";
+          }
+          if (l > 0 && l < document.body.clientWidth - 50) {
+            oDiv.style.left = l + "px";
+          }
+
+
+        }
+        document.onmouseup = function () {
+          lastTime = new Date().getTime();
+          if ((lastTime - firstTime) > 200) {
+            oDiv.setAttribute('drag-flag', false);
+          }
+          document.onmousemove = null;
+          document.onmouseup = null;
+        };
+        //return false不加的话可能导致黏连，就是拖到一个地方时div粘在鼠标上不下来，相当于onmouseup失效
+        return false;
+      };
+    }
+  }
+}
 </script>
 
-<style scoped>
-	.mobile-nav-button {position: fixed;bottom:10px;left:10px;z-index: 10;width: 50px;height: 50px;background: #409EFF;box-shadow: 0 2px 12px 0 rgba(64, 158, 255, 1);border-radius: 50%;display: flex;align-items: center;justify-content: center;}
-	.mobile-nav-button i {color: #fff;font-size: 20px;}
+<style scoped lang="scss">
+.mobile-nav-button {
+  position: fixed;
+  bottom: 10px;
+  left: 10px;
+  z-index: 10;
+  width: 50px;
+  height: 50px;
+  background: var(--el-color-primary);
+  box-shadow: 0 2px 12px 0 var(--el-color-primary);
+  border-radius: 50%;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+}
+
+:deep(.el-menu-item.is-active) {
+  color: var(--el-color-primary);
+}
+
+.mobile-nav-button i {
+  color: #fff;
+  font-size: 20px;
+}
+
+.mobile-nav {
+  background: #212d3d;
+}
+
+.mobile-nav .el-header {
+  background: transparent;
+  border: 0;
+}
+
+.mobile-nav .el-main {
+  padding: 0;
+  background: #212d3d;
+}
+
+.mobile-nav .logo-bar {
+  display: flex;
+  align-items: center;
+  font-weight: bold;
+  font-size: 20px;
+  color: #fff;
+}
+
+.mobile-nav .logo-bar img {
+  width: 30px;
+  margin-right: 10px;
+}
 
-	.mobile-nav {background: #212d3d;}
-	.mobile-nav .el-header {background: transparent;border: 0;}
-	.mobile-nav .el-main {padding:0;}
-	.mobile-nav .logo-bar {display: flex;align-items: center;font-weight: bold;font-size: 20px;color: #fff;}
-	.mobile-nav .logo-bar img {width: 30px;margin-right: 10px;}
-	.mobile-nav .el-submenu__title:hover {background: #fff!important;}
+.mobile-nav .el-submenu__title:hover {
+  background: #fff !important;
+}
 </style>