Bläddra i källkod

重构导航菜单

rsbi 4 år sedan
förälder
incheckning
ff76d0aa03
5 ändrade filer med 209 tillägg och 7 borttagningar
  1. 5 0
      package-lock.json
  2. 2 2
      src/common/biConfig.js
  3. 117 0
      src/components/NavMenu.vue
  4. 5 1
      src/view/Main.vue
  5. 80 4
      src/view/bireport/ReportDesign.vue

+ 5 - 0
package-lock.json

@@ -15554,6 +15554,11 @@
       "integrity": "sha512-4gDntzrifFnCEvyoO8PqyJDmguXgVPxKiIxrBKjIowvL9l+N66196+72XVYR8BBf1Uv1Fgt3bGevJ+sEmxfZzw==",
       "dev": true
     },
+    "vuex": {
+      "version": "3.6.0",
+      "resolved": "https://registry.npmjs.org/vuex/-/vuex-3.6.0.tgz",
+      "integrity": "sha512-W74OO2vCJPs9/YjNjW8lLbj+jzT24waTo2KShI8jLvJW8OaIkgb3wuAMA7D+ZiUxDOx3ubwSZTaJBip9G8a3aQ=="
+    },
     "w3c-hr-time": {
       "version": "1.0.2",
       "resolved": "https://registry.npmjs.org/w3c-hr-time/-/w3c-hr-time-1.0.2.tgz",

+ 2 - 2
src/common/biConfig.js

@@ -6,8 +6,8 @@
  */
 import $ from 'jquery'
 
-const baseUrl = 'http://localhost:8080/';
-//const baseUrl = "https://www.ruisitech.com/rsbi-os-4.7/";
+const baseUrl = 'http://192.168.1.8:8080/rsbi-os-4.7/';
+//const baseUrl = "http://112.124.13.251:8081/";
 
 export {
 	baseUrl

+ 117 - 0
src/components/NavMenu.vue

@@ -0,0 +1,117 @@
+<template>
+      <div class="tabpanel_tab_content">
+            <div class="tabpanel_header">
+              <ul class="tabpanel_mover">
+                <li id="t_home" class=""><div class="title"><i class="fa fa-home"></i> 首页</div></li>
+                <li id="t_93" class="active" u="../detail/Report.action"><div class="title">数据查询</div><div class="closer fa fa-close"></div></li>
+            </ul>
+            </div>
+            <div class="tabpanel_header_ref">
+                 <a class="btn btn-link btn-xs" onclick="gotab('right')" title="右移选项卡">
+                        <i class="glyphicon glyphicon-chevron-left"></i>
+                    </a>
+                    <a class="btn btn-link btn-xs" id="taboptbtn">
+                        <i class="fa fa-exchange"></i>
+                    </a>
+                    <a class="btn btn-link btn-xs" onclick="gotab('left')" title="左移选项卡">
+                        <i class="glyphicon glyphicon-chevron-right"></i>
+                    </a>
+            </div>
+  </div>
+</template>
+
+<script>
+import { ajax } from "@/common/biConfig";
+import $ from "jquery";
+
+export default {
+  name: "navMenu",
+  data() {
+    return {
+
+    };
+  },
+  mounted:function(){
+    
+  },
+  methods: {
+
+  },
+};
+</script>
+
+<style lang="css">
+.tabpanel_tab_content {
+    height: 29px;
+    background-color: #f9f9f9;
+    overflow: hidden;
+    white-space: nowrap;
+    position: relative;
+    box-shadow: 0 2px 3px 0 rgba(0,0,0,.16), 0 2px 5px 0 rgba(0,0,0,.12);
+}
+.tabpanel_mover {
+	  margin: 0px;
+    padding: 0px;
+    position: relative;
+}
+.tabpanel_mover li {
+	  width: 110px;
+    line-height: 20px;
+    padding: 5px 10px 5px 10px;
+    background-color: #f4f6f8;
+    display: inline-block;
+    position: relative;
+    list-style-type: none;
+    cursor: pointer;
+    border-right: 1px solid #ddd;
+    overflow: hidden;
+}
+.tabpanel_mover li:hover {
+	background-color: #e3e1e1;
+}
+.tabpanel_mover li .title {
+    font-size: 13px;
+    overflow: hidden;
+    float: left;
+    color: #4285f4;
+    width:80px;
+    text-overflow:ellipsis;
+}
+.J_mainContent {
+    height: 100%;
+    overflow: hidden;
+}
+.J_mainContent2 {
+	height: calc(100% - 30px);
+    overflow: hidden;
+} 
+.tabpanel_content .html_content {
+	width: 100%;
+    height: 100%;
+}
+.tabpanel_mover li .closer {
+    position: absolute;
+    right: 0px;
+    top: 10px;
+    width: 15px;
+    height: 15px;
+    cursor: pointer;
+    background:none;
+    font-size: 10px;
+    display:none;
+	color:#4285f4;
+}
+.tabpanel_mover li.active:hover > .closer {
+	display:block;
+	color:#ffffff;
+}
+.tabpanel_mover li:hover > .closer {
+	display:block;
+}
+.tabpanel_mover li.active {
+	background-color:#4285f4;
+}
+.tabpanel_mover li.active .title {
+	color:#fff;
+}
+</style>

+ 5 - 1
src/view/Main.vue

@@ -20,6 +20,7 @@
 			</div>
 		</transition>
 		<div class="page-wrapper">
+			<navMenu></navMenu>
 			<keep-alive>
 				<router-view></router-view>
 			</keep-alive>
@@ -30,7 +31,10 @@
 <script>
 	import frameTop from '../components/FrameTop'
 	import {baseUrl, ajax} from '@/common/biConfig'
+	import navMenu from '@/components/NavMenu'
 	import $ from 'jquery'
+	import "jstree";
+	import "jstree/dist/themes/default/style.min.css";
 
 	export default {
 	    data(){
@@ -40,7 +44,7 @@
 			}
 		},
 		components: {
-			frameTop
+			frameTop,navMenu
     	},
 		mounted(){
 			let ts = this;

+ 80 - 4
src/view/bireport/ReportDesign.vue

@@ -1,6 +1,50 @@
 <template>
   	<div class="wrapper-content">
-		  多维分析
+		<el-menu :default-active="activeIndex" class="el-menu-demo" text-color="#777" mode="horizontal">
+			<el-submenu index="1">
+				<template slot="title"><i class="fa fa-file"></i> 文件</template>
+				<el-menu-item index="1-1">打开</el-menu-item>
+				<el-menu-item index="1-2">新建</el-menu-item>
+				<el-menu-item index="1-3">保存</el-menu-item>
+			</el-submenu>
+			<el-submenu index="2">
+				<template slot="title"><i class="fa fa-file-excel-o"></i> 导出</template>
+				<el-menu-item index="2-1">HTML</el-menu-item>
+				<el-menu-item index="2-2">CSV</el-menu-item>
+				<el-menu-item index="2-3">EXCEL</el-menu-item>
+				<el-menu-item index="2-3">WORD</el-menu-item>
+				<el-menu-item index="2-3">PDF</el-menu-item>
+			</el-submenu>
+			<el-menu-item index="3"><i class="fa fa-print"></i> 打印</el-menu-item>
+			<el-menu-item index="4"><i class="fa fa-list-alt"></i> 解释</el-menu-item>
+		</el-menu>
+		<div class="row">
+			<div class="col-sm-3">
+				<div class="ibox" style="border:none;">
+					<div class="ibox-content">
+						<button class="btn btn-block btn-primary" @click="selectdataset()"><i class="fa fa-refresh"></i> 切换数据</button>
+						<p class="text-warning">拖拽数据到表格或图表中展现</p>
+						<div id="datasettree"></div>
+					</div>
+				</div>
+			</div>
+			
+			<div class="col-sm-9 animated fadeInRight">
+				<div class="ibox" style="border:none;">
+					<div class="ibox-content" id="p_param" style="padding:5px;">
+						<div class="ptabhelpr">拖拽维度到此处作为筛选条件</div>
+					</div>
+				</div>
+				
+				<el-tabs v-model="showtype" type="border-card">
+					<el-tab-pane label="表格" name="table">表格</el-tab-pane>
+					<el-tab-pane label="图形" name="chart">图形</el-tab-pane>
+				</el-tabs>
+						
+				
+			</div>
+		</div>
+
   	</div>
 </template>
 
@@ -11,15 +55,47 @@
 	export default {
 	    data(){
 			return {
-				
+				activeIndex:"1",
+				showtype:"table",
+				selectDs:""
 			}
 		},
 		mounted(){
-			
+			this.selectdataset();
 		},
 		computed: {
 		},
-		methods: {				
+		methods: {	
+			selectdataset(){
+				if (this.selectDs.length === 0) {
+					$('#datasettree').jstree({
+						core: {
+							data: {
+								id: 'nodata',
+								text: '您还未创建立方体',
+								icon: 'fa fa-warning icon_kpi'
+							}
+						},
+						"plugins": ["wholerow"]
+					});
+					return;
+				} else {
+					$('#datasettree').jstree({
+						core: {
+							data: {
+								url: 'model/cubeTree.action?selectDsIds=' + this.selectDs + '&t=' + Math.random()
+							},
+							check_callback: false
+						},
+						"plugins": ["wholerow"]
+					}).bind("ready.jstree", function (a, b) {
+						//dragfunc();
+					}).bind("after_open.jstree", function () {
+						//dragfunc();
+					});
+				}
+			}
+
 		},
 		watch: {
 		}