Merge branch 'master' of http://192.168.4.105:8080/gitbucket/git/08335/hivui-platform-template

08335 / hivui-platform-template

hivui平台项目模板

Browse code Merge branch 'master' of http://192.168.4.105:8080/gitbucket/git/08335/hivui-platform-template master
commit 2ad526d57bae34ebfc0076ae20623d89f3b060c2 2 parents 67bbb0e + 4ebb0db 12112 authored on 20 Dec 2022

Showing 9 changed files

Ignore Space Show notes View package.json
{ "name": "hi-vui-template", "version": "1.1.19", "description": "A hi-vui-template project", "author": "zhcTeam", "scripts": { "rm:vite": "rimraf node_modules/.vite && rimraf node_modules/.cache", "pm2:start": "pm2 -s start processes.json", "dev": "vite --host", "def": "vite --host", "build": "node build/copyBaseAssets.js && cross-env NODE_ENV=production node build/webpack.prod.conf.js", "build:modules": "cross-env NODE_ENV=production node build/webpack.prod.conf.js", "build1": "webpack --mode production --config build/webpack.prod.conf.js", "dll": "webpack --config build/webpack.dll.conf.js", "start": "webpack-dev-server --config build/webpack.dev.conf.js", "copyassets": "node build/copyBaseAssets.js" }, "devDependencies": { "@babel/core": "^7.1.2", "@babel/plugin-proposal-nullish-coalescing-operator": "^7.16.7", "@babel/plugin-proposal-optional-chaining": "^7.16.7", "@babel/plugin-syntax-dynamic-import": "^7.0.0", "@babel/preset-env": "^7.1.0", "@vitejs/plugin-vue-jsx": "^1.3.3", "@vue/babel-helper-vue-jsx-merge-props": "^1.2.1", "@vue/babel-preset-jsx": "^1.2.4", "add-asset-html-webpack-plugin": "^3.2.0", "autoprefixer": "^9.1.5", "babel-loader": "^8.0.4", "babel-plugin-component": "^1.1.1", "babel-plugin-transform-vite-meta-env": "^1.0.3", "caniuse-lite": "^1.0.30001436", "chalk": "^3.0.0", "clean-webpack-plugin": "^0.1.19", "copy-webpack-plugin": "^4.5.3", "cross-env": "^7.0.3", "css-loader": "^1.0.0", "dotenv": "^10.0.0", "file-loader": "^2.0.0", "happypack": "^5.0.1", "html-webpack-plugin": "^4.5.2", "less": "^3.13.1", "less-loader": "^5.0.0", "mini-css-extract-plugin": "^1.6.2", "node-sass": "^4.9.3", "optimize-css-assets-webpack-plugin": "^5.0.1", "parallel-webpack": "^2.6.0", "postcss-import": "^11.1.0", "postcss-loader": "^2.1.6", "postcss-url": "^7.3.2", "progress-bar-webpack-plugin": "^2.1.0", "sass": "^1.49.0", "sass-loader": "^7.1.0", "style-loader": "^0.23.0", "terser-webpack-plugin": "^4.2.3", "thread-loader": "^3.0.4", "uglifyjs-webpack-plugin": "^2.0.1", "url-loader": "^1.1.1", "vite": "2.3.7", "vite-plugin-html": "^2.1.1", "vite-plugin-imp": "^2.0.11", "vite-plugin-pagedata": "^1.0.4", "vite-plugin-vue2": "^1.9.0", "vue-loader": "^15.4.2", "vue-template-compiler": "^2.6.14", "webpack": "^4.46.0", "webpack-cli": "^4.9.2", "webpack-dev-server": "^3.11.3", "webpack-merge": "^4.1.4" }, "dependencies": { "axios": "^0.24.0", "babel-polyfill": "^6.26.0", "canvas": "^2.9.0", "classnames": "^2.3.1", "deep-lu-trans": "^1.0.5", "echarts": "^5.2.2", "echarts-liquidfill": "^3.1.0", "element-ui": "^2.15.7", "enquire.js": "^2.1.6", "font-awesome": "^4.7.0", "hi-taskcenter": "^1.0.9", "hi-ui": "^1.1.1006", "html2canvas": "^1.4.1", "jquery": "^3.6.0", "js-cookie": "^3.0.1", "js-md5": "^0.7.3", "js-pinyin": "^0.1.9", "jspdf": "^2.5.1", "lodash": "^4.17.11", "qrcodejs2": "0.0.2", "screenfull": "^6.0.0", "sortablejs": "^1.14.0", "v-clipboard": "^2.2.3", "vue": "^2.6.14", "vue-draggable-resizable": "^2.3.0", "vue-gemini-scrollbar": "^2.0.1", "vue-i18n": "^8.27.0", "vue-jstree": "^2.1.6", "vue-qr": "^3.2.4", "vue-router": "^3.0.1", "vuex": "^3.6.2", "xlsx": "^0.18.5", "zhc-birt-cmps": "2.8.63", "zhc-birt-core": "^1.9.0", "zhc-flowchart": "^1.0.20" } } { "name": "hi-vui-template", "version": "1.1.19", "description": "A hi-vui-template project", "author": "zhcTeam", "scripts": { "rm:vite": "rimraf node_modules/.vite && rimraf node_modules/.cache", "pm2:start": "pm2 -s start processes.json", "dev": "vite --host", "def": "vite --host", "build": "node build/copyBaseAssets.js && cross-env NODE_ENV=production node build/webpack.prod.conf.js", "build:modules": "cross-env NODE_ENV=production node build/webpack.prod.conf.js", "build1": "webpack --mode production --config build/webpack.prod.conf.js", "dll": "webpack --config build/webpack.dll.conf.js", "start": "webpack-dev-server --config build/webpack.dev.conf.js", "copyassets": "node build/copyBaseAssets.js" }, "devDependencies": { "@babel/core": "^7.1.2", "@babel/plugin-proposal-nullish-coalescing-operator": "^7.16.7", "@babel/plugin-proposal-optional-chaining": "^7.16.7", "@babel/plugin-syntax-dynamic-import": "^7.0.0", "@babel/preset-env": "^7.1.0", "@vitejs/plugin-vue-jsx": "^1.3.3", "@vue/babel-helper-vue-jsx-merge-props": "^1.2.1", "@vue/babel-preset-jsx": "^1.2.4", "add-asset-html-webpack-plugin": "^3.2.0", "autoprefixer": "^9.1.5", "babel-loader": "^8.0.4", "babel-plugin-component": "^1.1.1", "babel-plugin-transform-vite-meta-env": "^1.0.3", "chalk": "^3.0.0", "clean-webpack-plugin": "^0.1.19", "copy-webpack-plugin": "^4.5.3", "cross-env": "^7.0.3", "css-loader": "^1.0.0", "dotenv": "^10.0.0", "file-loader": "^2.0.0", "happypack": "^5.0.1", "html-webpack-plugin": "^4.5.2", "less": "^3.13.1", "less-loader": "^5.0.0", "mini-css-extract-plugin": "^1.6.2", "node-sass": "^4.9.3", "optimize-css-assets-webpack-plugin": "^5.0.1", "parallel-webpack": "^2.6.0", "postcss-import": "^11.1.0", "postcss-loader": "^2.1.6", "postcss-url": "^7.3.2", "progress-bar-webpack-plugin": "^2.1.0", "sass": "^1.49.0", "sass-loader": "^7.1.0", "style-loader": "^0.23.0", "terser-webpack-plugin": "^4.2.3", "thread-loader": "^3.0.4", "uglifyjs-webpack-plugin": "^2.0.1", "url-loader": "^1.1.1", "vite": "2.3.7", "vite-plugin-html": "^2.1.1", "vite-plugin-imp": "^2.0.11", "vite-plugin-pagedata": "^1.0.4", "vite-plugin-vue2": "^1.9.0", "vue-loader": "^15.4.2", "vue-template-compiler": "^2.6.14", "webpack": "^4.46.0", "webpack-cli": "^4.9.2", "webpack-dev-server": "^3.11.3", "webpack-merge": "^4.1.4" }, "dependencies": { "axios": "^0.24.0", "babel-polyfill": "^6.26.0", "canvas": "^2.9.0", "classnames": "^2.3.1", "deep-lu-trans": "^1.0.5", "echarts": "^5.2.2", "echarts-liquidfill": "^3.1.0", "element-ui": "^2.15.7", "enquire.js": "^2.1.6", "font-awesome": "^4.7.0", "hi-taskcenter": "^1.0.9", "hi-ui": "^1.1.1006", "html2canvas": "^1.4.1", "jquery": "^3.6.0", "js-cookie": "^3.0.1", "js-md5": "^0.7.3", "js-pinyin": "^0.1.9", "jspdf": "^2.5.1", "lodash": "^4.17.11", "qrcodejs2": "0.0.2", "screenfull": "^6.0.0", "sortablejs": "^1.14.0", "v-clipboard": "^2.2.3", "vue": "^2.6.14", "vue-draggable-resizable": "^2.3.0", "vue-gemini-scrollbar": "^2.0.1", "vue-i18n": "^8.27.0", "vue-jstree": "^2.1.6", "vue-qr": "^3.2.4", "vue-router": "^3.0.1", "vuex": "^3.6.2", "xlsx": "^0.18.5", "zhc-birt-cmps": "^2.8.53", "zhc-birt-core": "^1.9.0", "zhc-flowchart": "^1.0.20" } }

Ignore Space Show notes View

package.json

{
  "name": "hi-vui-template",
  "version": "1.1.19",
  "description": "A hi-vui-template project",
  "author": "zhcTeam",
  "scripts": {
    "rm:vite": "rimraf node_modules/.vite && rimraf node_modules/.cache",
    "pm2:start": "pm2 -s start processes.json",
    "dev": "vite --host",
    "def": "vite --host",
    "build": "node build/copyBaseAssets.js && cross-env NODE_ENV=production node build/webpack.prod.conf.js",
    "build:modules": "cross-env NODE_ENV=production node build/webpack.prod.conf.js",
    "build1": "webpack --mode production --config build/webpack.prod.conf.js",
    "dll": "webpack --config build/webpack.dll.conf.js",
    "start": "webpack-dev-server --config build/webpack.dev.conf.js",
    "copyassets": "node build/copyBaseAssets.js"
  },
  "devDependencies": {
    "@babel/core": "^7.1.2",
    "@babel/plugin-proposal-nullish-coalescing-operator": "^7.16.7",
    "@babel/plugin-proposal-optional-chaining": "^7.16.7",
    "@babel/plugin-syntax-dynamic-import": "^7.0.0",
    "@babel/preset-env": "^7.1.0",
    "@vitejs/plugin-vue-jsx": "^1.3.3",
    "@vue/babel-helper-vue-jsx-merge-props": "^1.2.1",
    "@vue/babel-preset-jsx": "^1.2.4",
    "add-asset-html-webpack-plugin": "^3.2.0",
    "autoprefixer": "^9.1.5",
    "babel-loader": "^8.0.4",
    "babel-plugin-component": "^1.1.1",
    "babel-plugin-transform-vite-meta-env": "^1.0.3",
    "caniuse-lite": "^1.0.30001436",
    "chalk": "^3.0.0",
    "clean-webpack-plugin": "^0.1.19",
    "copy-webpack-plugin": "^4.5.3",
    "cross-env": "^7.0.3",
    "css-loader": "^1.0.0",
    "dotenv": "^10.0.0",
    "file-loader": "^2.0.0",
    "happypack": "^5.0.1",
    "html-webpack-plugin": "^4.5.2",
    "less": "^3.13.1",
    "less-loader": "^5.0.0",
    "mini-css-extract-plugin": "^1.6.2",
    "node-sass": "^4.9.3",
    "optimize-css-assets-webpack-plugin": "^5.0.1",
    "parallel-webpack": "^2.6.0",
    "postcss-import": "^11.1.0",
    "postcss-loader": "^2.1.6",
    "postcss-url": "^7.3.2",
    "progress-bar-webpack-plugin": "^2.1.0",
    "sass": "^1.49.0",
    "sass-loader": "^7.1.0",
    "style-loader": "^0.23.0",
    "terser-webpack-plugin": "^4.2.3",
    "thread-loader": "^3.0.4",
    "uglifyjs-webpack-plugin": "^2.0.1",
    "url-loader": "^1.1.1",
    "vite": "2.3.7",
    "vite-plugin-html": "^2.1.1",
    "vite-plugin-imp": "^2.0.11",
    "vite-plugin-pagedata": "^1.0.4",
    "vite-plugin-vue2": "^1.9.0",
    "vue-loader": "^15.4.2",
    "vue-template-compiler": "^2.6.14",
    "webpack": "^4.46.0",
    "webpack-cli": "^4.9.2",
    "webpack-dev-server": "^3.11.3",
    "webpack-merge": "^4.1.4"
  },
  "dependencies": {
    "axios": "^0.24.0",
    "babel-polyfill": "^6.26.0",
    "canvas": "^2.9.0",
    "classnames": "^2.3.1",
    "deep-lu-trans": "^1.0.5",
    "echarts": "^5.2.2",
    "echarts-liquidfill": "^3.1.0",
    "element-ui": "^2.15.7",
    "enquire.js": "^2.1.6",
    "font-awesome": "^4.7.0",
    "hi-taskcenter": "^1.0.9",
    "hi-ui": "^1.1.1006",
    "html2canvas": "^1.4.1",
    "jquery": "^3.6.0",
    "js-cookie": "^3.0.1",
    "js-md5": "^0.7.3",
    "js-pinyin": "^0.1.9",
    "jspdf": "^2.5.1",
    "lodash": "^4.17.11",
    "qrcodejs2": "0.0.2",
    "screenfull": "^6.0.0",
    "sortablejs": "^1.14.0",
    "v-clipboard": "^2.2.3",
    "vue": "^2.6.14",
    "vue-draggable-resizable": "^2.3.0",
    "vue-gemini-scrollbar": "^2.0.1",
    "vue-i18n": "^8.27.0",
    "vue-jstree": "^2.1.6",
    "vue-qr": "^3.2.4",
    "vue-router": "^3.0.1",
    "vuex": "^3.6.2",
    "xlsx": "^0.18.5",
    "zhc-birt-cmps": "2.8.63",
    "zhc-birt-core": "^1.9.0",
    "zhc-flowchart": "^1.0.20"
  }
}

{
  "name": "hi-vui-template",
  "version": "1.1.19",
  "description": "A hi-vui-template project",
  "author": "zhcTeam",
  "scripts": {
    "rm:vite": "rimraf node_modules/.vite && rimraf node_modules/.cache",
    "pm2:start": "pm2 -s start processes.json",
    "dev": "vite --host",
    "def": "vite --host",
    "build": "node build/copyBaseAssets.js && cross-env NODE_ENV=production node build/webpack.prod.conf.js",
    "build:modules": "cross-env NODE_ENV=production node build/webpack.prod.conf.js",
    "build1": "webpack --mode production --config build/webpack.prod.conf.js",
    "dll": "webpack --config build/webpack.dll.conf.js",
    "start": "webpack-dev-server --config build/webpack.dev.conf.js",
    "copyassets": "node build/copyBaseAssets.js"
  },
  "devDependencies": {
    "@babel/core": "^7.1.2",
    "@babel/plugin-proposal-nullish-coalescing-operator": "^7.16.7",
    "@babel/plugin-proposal-optional-chaining": "^7.16.7",
    "@babel/plugin-syntax-dynamic-import": "^7.0.0",
    "@babel/preset-env": "^7.1.0",
    "@vitejs/plugin-vue-jsx": "^1.3.3",
    "@vue/babel-helper-vue-jsx-merge-props": "^1.2.1",
    "@vue/babel-preset-jsx": "^1.2.4",
    "add-asset-html-webpack-plugin": "^3.2.0",
    "autoprefixer": "^9.1.5",
    "babel-loader": "^8.0.4",
    "babel-plugin-component": "^1.1.1",
    "babel-plugin-transform-vite-meta-env": "^1.0.3",
    "chalk": "^3.0.0",
    "clean-webpack-plugin": "^0.1.19",
    "copy-webpack-plugin": "^4.5.3",
    "cross-env": "^7.0.3",
    "css-loader": "^1.0.0",
    "dotenv": "^10.0.0",
    "file-loader": "^2.0.0",
    "happypack": "^5.0.1",
    "html-webpack-plugin": "^4.5.2",
    "less": "^3.13.1",
    "less-loader": "^5.0.0",
    "mini-css-extract-plugin": "^1.6.2",
    "node-sass": "^4.9.3",
    "optimize-css-assets-webpack-plugin": "^5.0.1",
    "parallel-webpack": "^2.6.0",
    "postcss-import": "^11.1.0",
    "postcss-loader": "^2.1.6",
    "postcss-url": "^7.3.2",
    "progress-bar-webpack-plugin": "^2.1.0",
    "sass": "^1.49.0",
    "sass-loader": "^7.1.0",
    "style-loader": "^0.23.0",
    "terser-webpack-plugin": "^4.2.3",
    "thread-loader": "^3.0.4",
    "uglifyjs-webpack-plugin": "^2.0.1",
    "url-loader": "^1.1.1",
    "vite": "2.3.7",
    "vite-plugin-html": "^2.1.1",
    "vite-plugin-imp": "^2.0.11",
    "vite-plugin-pagedata": "^1.0.4",
    "vite-plugin-vue2": "^1.9.0",
    "vue-loader": "^15.4.2",
    "vue-template-compiler": "^2.6.14",
    "webpack": "^4.46.0",
    "webpack-cli": "^4.9.2",
    "webpack-dev-server": "^3.11.3",
    "webpack-merge": "^4.1.4"
  },
  "dependencies": {
    "axios": "^0.24.0",
    "babel-polyfill": "^6.26.0",
    "canvas": "^2.9.0",
    "classnames": "^2.3.1",
    "deep-lu-trans": "^1.0.5",
    "echarts": "^5.2.2",
    "echarts-liquidfill": "^3.1.0",
    "element-ui": "^2.15.7",
    "enquire.js": "^2.1.6",
    "font-awesome": "^4.7.0",
    "hi-taskcenter": "^1.0.9",
    "hi-ui": "^1.1.1006",
    "html2canvas": "^1.4.1",
    "jquery": "^3.6.0",
    "js-cookie": "^3.0.1",
    "js-md5": "^0.7.3",
    "js-pinyin": "^0.1.9",
    "jspdf": "^2.5.1",
    "lodash": "^4.17.11",
    "qrcodejs2": "0.0.2",
    "screenfull": "^6.0.0",
    "sortablejs": "^1.14.0",
    "v-clipboard": "^2.2.3",
    "vue": "^2.6.14",
    "vue-draggable-resizable": "^2.3.0",
    "vue-gemini-scrollbar": "^2.0.1",
    "vue-i18n": "^8.27.0",
    "vue-jstree": "^2.1.6",
    "vue-qr": "^3.2.4",
    "vue-router": "^3.0.1",
    "vuex": "^3.6.2",
    "xlsx": "^0.18.5",
    "zhc-birt-cmps": "^2.8.53",
    "zhc-birt-core": "^1.9.0",
    "zhc-flowchart": "^1.0.20"
  }
}

Ignore Space Show notes View project/hivuiBirt/index.html
<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <meta name="viewport" content="width=device-width,initial-scale=1.0"> <title>EAP5-Admin-Main</title> <% if(htmlWebpackPlugin.vite){%> <!--预览时公共库--> <link rel="stylesheet" href="/assets_platform/element-ui/index.css"> <script src="/assets_platform/vue/vue.min.js"></script> <script src="/assets_platform/vuex/vuex.min.js"></script> <script src="/assets_platform/vue-router/vue-router.min.js"></script> <script src="/assets_platform/element-ui/index.js"></script> <script src="/assets_platform/eap/eap.umd.min.js"></script> <%}%> <% if(!htmlWebpackPlugin.vite){%> <link rel="stylesheet" href="${serverPath}/render/assets_platform/element-ui/index.css"> <script src="${serverPath}/render/assets_platform/vue/vue.min.js"></script> <script src="${serverPath}/render/assets_platform/vuex/vuex.min.js"></script> <script src="${serverPath}/render/assets_platform/vue-router/vue-router.min.js"></script> <script src="${serverPath}/render/assets_platform/element-ui/index.js"></script> <!--发布时公共库--> <!-- <script src="${serverPath}/render/assets_platform/vendor_dll/vuelibs.dll.js"></script> --> <script src="${serverPath}/render/assets_platform/vendor_dll/vendor.dll.js"></script> <script src="${serverPath}/render/assets_platform/eap/eap.umd.min.js"></script> <%}%> <script > window.isGuest=${isGuest?c}; window.scpRequestData= ${requestParams}; debugger console.log(JSON.stringify(window.scpRequestData)) </script> </head> <body> <div id="app"> <!-- <div style="padding:50px 0;text-align:center;"> <div> <img id="main_loading_logo" src="" /> </div> <div>系统初始化中...<a href="javascript:location.reload();">【点我刷新】</a></div> </div> --> </div> <script> window.onload=()=>{ // let _img=window.customSysCofig&&window.customSysCofig.sysLoadLogo&&window.customSysCofig.sysLoadLogo.src; // document.getElementById("main_loading_logo").src=(_img\|\|(window._global?"./assets/logo_max.png":"./static/img/logo_max.png")); // if(window.customSysCofig?.syTitle){ // document.title=window.customSysCofig.syTitle; // } } </script> <% if(htmlWebpackPlugin.vite==true){%> <script type="module" src="/<%=htmlWebpackPlugin.project%>/hivuiBirt/index.js"></script> <%}%> <!-- built files will be auto injected --> </body> </html> <!DOCTYPE html> <html> <head> <meta charset="utf-8"> <meta name="viewport" content="width=device-width,initial-scale=1.0"> <title>EAP5-Admin-Main</title> <% if(htmlWebpackPlugin.vite){%> <!--预览时公共库--> <link rel="stylesheet" href="/assets_platform/element-ui/index.css"> <script src="/assets_platform/vue/vue.min.js"></script> <script src="/assets_platform/vuex/vuex.min.js"></script> <script src="/assets_platform/vue-router/vue-router.min.js"></script> <script src="/assets_platform/element-ui/index.js"></script> <script src="/assets_platform/eap/eap.umd.min.js"></script> <%}%> <% if(!htmlWebpackPlugin.vite){%> <link rel="stylesheet" href="${serverPath}/render/assets_platform/element-ui/index.css"> <script src="${serverPath}/render/assets_platform/vue/vue.min.js"></script> <script src="${serverPath}/render/assets_platform/vuex/vuex.min.js"></script> <script src="${serverPath}/render/assets_platform/vue-router/vue-router.min.js"></script> <script src="${serverPath}/render/assets_platform/element-ui/index.js"></script> <!--发布时公共库--> <!-- <script src="${serverPath}/render/assets_platform/vendor_dll/vuelibs.dll.js"></script> --> <script src="${serverPath}/render/assets_platform/vendor_dll/vendor.dll.js"></script> <script src="${serverPath}/render/assets_platform/eap/eap.umd.min.js"></script> <%}%> <!-- <script src="/eaptpl/setting/desktop/appsetting/js/1.0.0/appsetting.js" type="text/javascript"></script> --> </head> <body> <div id="app"> <!-- <div style="padding:50px 0;text-align:center;"> <div> <img id="main_loading_logo" src="" /> </div> <div>系统初始化中...<a href="javascript:location.reload();">【点我刷新】</a></div> </div> --> </div> <script> //window.onload=()=>{ // let _img=window.customSysCofig&&window.customSysCofig.sysLoadLogo&&window.customSysCofig.sysLoadLogo.src; // document.getElementById("main_loading_logo").src=(_img\|\|(window._global?"./assets/logo_max.png":"./static/img/logo_max.png")); // if(window.customSysCofig?.syTitle){ // document.title=window.customSysCofig.syTitle; // } //} </script> <% if(htmlWebpackPlugin.vite==true){%> <script type="module" src="/<%=htmlWebpackPlugin.project%>/hivuiBirt/index.js"></script> <%}%> <!-- built files will be auto injected --> </body> </html>

Ignore Space Show notes View

project/hivuiBirt/index.html

<!DOCTYPE html>
<html>

<head>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width,initial-scale=1.0">
  <title>EAP5-Admin-Main</title>
  
  <% if(htmlWebpackPlugin.vite){%>
    
    <link rel="stylesheet" href="/assets_platform/element-ui/index.css">
    <script src="/assets_platform/vue/vue.min.js"></script>
    <script src="/assets_platform/vuex/vuex.min.js"></script>
    <script src="/assets_platform/vue-router/vue-router.min.js"></script>
    <script src="/assets_platform/element-ui/index.js"></script>
    <script src="/assets_platform/eap/eap.umd.min.js"></script>
    
    <%}%>
    <% if(!htmlWebpackPlugin.vite){%>
      <link rel="stylesheet" href="${serverPath}/render/assets_platform/element-ui/index.css">
      <script src="${serverPath}/render/assets_platform/vue/vue.min.js"></script>
      <script src="${serverPath}/render/assets_platform/vuex/vuex.min.js"></script>
      <script src="${serverPath}/render/assets_platform/vue-router/vue-router.min.js"></script>
      <script src="${serverPath}/render/assets_platform/element-ui/index.js"></script>
      
      
      <script src="${serverPath}/render/assets_platform/vendor_dll/vendor.dll.js"></script>
      <script src="${serverPath}/render/assets_platform/eap/eap.umd.min.js"></script>
      <%}%>
      <script >
          window.isGuest=${isGuest?c};
          window.scpRequestData= ${requestParams};
          debugger
          console.log(JSON.stringify(window.scpRequestData))
        </script>
</head>

<body>
  <div id="app">  	
    
  </div>
 
  <script>
    window.onload=()=>{
      // let _img=window.customSysCofig&&window.customSysCofig.sysLoadLogo&&window.customSysCofig.sysLoadLogo.src;
      // document.getElementById("main_loading_logo").src=(_img||(window._global?"./assets/logo_max.png":"./static/img/logo_max.png"));
      // if(window.customSysCofig?.syTitle){
      //   document.title=window.customSysCofig.syTitle;
      // }
    }
  </script>
  
  <% if(htmlWebpackPlugin.vite==true){%>
    <script type="module" src="/<%=htmlWebpackPlugin.project%>/hivuiBirt/index.js"></script>
  <%}%>
  
</body>

</html>

<!DOCTYPE html>
<html>

<head>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width,initial-scale=1.0">
  <title>EAP5-Admin-Main</title>
  
  <% if(htmlWebpackPlugin.vite){%>
    
    <link rel="stylesheet" href="/assets_platform/element-ui/index.css">
    <script src="/assets_platform/vue/vue.min.js"></script>
    <script src="/assets_platform/vuex/vuex.min.js"></script>
    <script src="/assets_platform/vue-router/vue-router.min.js"></script>
    <script src="/assets_platform/element-ui/index.js"></script>
    <script src="/assets_platform/eap/eap.umd.min.js"></script>
    
    <%}%>
    <% if(!htmlWebpackPlugin.vite){%>
      <link rel="stylesheet" href="${serverPath}/render/assets_platform/element-ui/index.css">
      <script src="${serverPath}/render/assets_platform/vue/vue.min.js"></script>
      <script src="${serverPath}/render/assets_platform/vuex/vuex.min.js"></script>
      <script src="${serverPath}/render/assets_platform/vue-router/vue-router.min.js"></script>
      <script src="${serverPath}/render/assets_platform/element-ui/index.js"></script>
      
      
      <script src="${serverPath}/render/assets_platform/vendor_dll/vendor.dll.js"></script>
      <script src="${serverPath}/render/assets_platform/eap/eap.umd.min.js"></script>
      <%}%>
      
</head>

<body>
  <div id="app">  	
    
  </div>
  <script>
    //window.onload=()=>{
      // let _img=window.customSysCofig&&window.customSysCofig.sysLoadLogo&&window.customSysCofig.sysLoadLogo.src;
      // document.getElementById("main_loading_logo").src=(_img||(window._global?"./assets/logo_max.png":"./static/img/logo_max.png"));
      // if(window.customSysCofig?.syTitle){
      //   document.title=window.customSysCofig.syTitle;
      // }
    //}
  </script>
  <% if(htmlWebpackPlugin.vite==true){%>
    <script type="module" src="/<%=htmlWebpackPlugin.project%>/hivuiBirt/index.js"></script>
  <%}%>
  
</body>

</html>

Ignore Space Show notes View project/hivuiMain/utils/index.js
import getScroll from './getScroll' /** * 正则表达式判定Url * @param url * @returns {Boolean} / export function checkUrl(url){ //url= 协议://(ftp的登录信息)[IP\|域名](:端口号)(/或?请求参数) var strRegex = '^((https\|http\|ftp)://)?'//(https或http或ftp):// 可有可无 + '(([\\w_!~\'()\\.&=+$%-]+: )?[\\w_!~\'()\\.&=+$%-]+@)?' //ftp的user@ 可有可无 + '(([0-9]{1,3}\\.){3}[0-9]{1,3}' // IP形式的URL- 3位数字.3位数字.3位数字.3位数字 + '\|' // 允许IP和DOMAIN（域名） + '(localhost)\|' //匹配localhost + '([\\w_!~\'()-]+\\.)' // 域名- 至少一个[英文或数字_!~\'()-]加上. + '\\w+\\.' // 一级域名 -英文或数字加上. + '[a-zA-Z]{1,6})' // 顶级域名- 1-6位英文 + '(:[0-9]{1,5})?' // 端口- :80 ,1-5位数字 + '((/?)\|' // url无参数结尾 - 斜杆或这没有 + '(/[\\w_!~\'()\\.;?:@&=+$,%#-]+)+/?)$';//请求参数结尾- 英文或数字和[]内的各种字符 var strRegex1 = '^(?=^.{3,255}$)((http\|https\|ftp)?:\/\/)?(www\.)?[a-zA-Z0-9][-a-zA-Z0-9]{0,62}(\.[a-zA-Z0-9][-a-zA-Z0-9]{0,62})+(:\d+)(\/)?(?:\/(.+)\/?$)?(\/\w+\.\w+)([\?&]\w+=\w\|[\u4e00-\u9fa5]+)$'; var re=new RegExp(strRegex,'i');//i不区分大小写 //将url做uri转码后再匹配，解除请求参数中的中文和空字符影响 if (re.test(encodeURI(url))) { return (true); } else { return (false); } } export function getTargetRect(target) { return target !== window ? target.getBoundingClientRect() : { top: 0, left: 0, bottom: 0 }; } export function getOffset(element, target) { const elemRect = element.getBoundingClientRect(); const targetRect = getTargetRect(target); const scrollTop = getScroll(target, true); const scrollLeft = getScroll(target, false); const docElem = window.document.body; const clientTop = docElem.clientTop \|\| 0; const clientLeft = docElem.clientLeft \|\| 0; return { top: elemRect.top - targetRect.top + scrollTop - clientTop, left: elemRect.left - targetRect.left + scrollLeft - clientLeft, width: elemRect.width, height: elemRect.height, }; } export function getDefaultTarget() { return typeof window !== 'undefined' ? window : null; } /* * @method setUrlValue * @description 设置地址栏参数值 * @param url * @param pName * @param pValue * * @example: urlAppend("http://www.fdauto.com","userid=03870");��http://www.fdauto.com?userid=03870;1` * urlAppend("http://www.fdauto.com?userid=03870","bumen=aj")��http://www.fdauto.com?userid=03870&bumen=aj; / export function setUrlValue(url, key, value) { var returnUrl = '' if (url.indexOf('?') == -1) { returnUrl += url + '?' + key + '=' + value } else { if (url.indexOf('?' + key + '=') == -1 && url.indexOf('&' + key + '=') == -1) { returnUrl += url + '&' + key + '=' + value } else { var isDone = false var startIndex = 0 var endIndex = url.length - 1 var parm = '?' + key + '=' for (var i = 0; i < url.length; i++) { if (url.substr(i, parm.length) == parm) { startIndex = i + parm.length for (var j = startIndex; j < url.length; j++) { if (url[j] == '&') { endIndex = j break } else if (j == url.length - 1) { endIndex = url.length } } isDone = true break } } if (!isDone) { parm = '&' + key + '=' for (var i = 0; i < url.length; i++) { if (url.substr(i, parm.length) == parm) { startIndex = i + parm.length for (var j = startIndex; j < url.length; j++) { if (url[j] == '&') { endIndex = j break } else if (j == url.length - 1) { endIndex = url.length } } break } } } var parmKeyValue = parm + url.substring(startIndex, endIndex) returnUrl = url.replace(parmKeyValue, parm + value) } } return returnUrl } /* * @method getUrlValue * @description 获取地址栏参数值 * @param name * string * @param url * string * @example: getUrlValue("p","http://www.baidu.com?p=5"); / export function getUrlValue(url, name) { var str = url \|\| window.location.search; if (str.indexOf("&" + name) != -1 \|\| str.indexOf("?" + name) != -1) { var pos_start = "" if (str.indexOf("?" + name) > -1) pos_start = str.indexOf("?" + name) + name.length + 2; else pos_start = str.indexOf("&" + name) + name.length + 2; var pos_end = str.indexOf("&", pos_start); if (pos_end == -1) { return str.substring(pos_start); } else { return str.substring(pos_start, pos_end) } } else { return ""; } } export function getUrlSearch(url) { var name, value; var str = url; //取得整个地址栏 var num = str.indexOf("?") str = str.substr(num + 1); //取得所有参数 stringvar.substr(start [, length ] var arr = str.split("&"); //各个参数放到数组里 var search ={}; for (var i = 0; i < arr.length; i++) { num = arr[i].indexOf("="); if (num > 0) { name = arr[i].substring(0, num); value = arr[i].substr(num + 1); search[name] = value; } } return search; } /* * var str='这是一个测试的字符串：{0} {1}'.format('Hello','world'); * var str='这是一个测试的字符串：{str0} {str1}'.format({str0:'Hello',str1:'world'}); / export function strFormat(str, args) { var result = str; if (arguments.length > 0) { if (arguments.length == 2 && typeof (args) == "object") { for (var key in args) { if (args[key] != undefined) { var reg = new RegExp("({" + key + "})", "g"); result = result.replace(reg, args[key]); } } } else { for (var i = 1; i < arguments.length; i++) { if (arguments[i] != undefined) { var reg = new RegExp("({)" + (i - 1) + "(})", "g"); result = result.replace(reg, arguments[i]); } } } } return result; } export function closeWindow(errorUrl){ if (document.all) { if (window.location.pathname == window.parent.location.pathname) { window.opener = null; window.open('', '_top'); window.top.close(); } } else { window.close(); } window.location.href = errorUrl \|\| "about:blank"; } /5.0替换3.0菜单字段/ export function field5Change3(_arr){ /5.0字段替换3.0/ let fieldConversion={ isActive:"fisactive", isOffline:"fisoffline", isShow:"fshow", name:"fresname", orderIndex:"forder", parentId:"frespguid", resId:"fresguid", resUrl:"fresurl", type:"frestype", iconClass:"ficonclass", }; _arr.map(item=>{ if(item.children&&item.children.length>0){ field5Change3(item.children); } if(item.customList&&item.customList.length>0){ field5Change3(item.customList); } for(let i in fieldConversion){ if(typeof(item[fieldConversion[i]])!="undefined"){ item[i]=item[fieldConversion[i]]; delete item[fieldConversion[i]]; } } //判断是不是url 地址 //serverName 是有加e5 ,但现在做兼容了，可以不用 // if(!window._global){//正式环境 // item.resUrl=window.HIVUI_SETTING.serverName+item.resUrl; // } return item; }); return _arr; } export function turnMenuTree(data,isNotTop) {//data:平级数据;isNotTop:输出数据是否不包含根节点 let map = {}; let val = []; //生成数据对象集合 data.forEach(it=>{ map[it.resId] = it; //resId为每个节点的id if(it.parentId==-1&&it.type=="root"){ isNotTop=true; } }); //生成结果集 data.forEach(it=>{ let parent = map[it.parentId]; //parentId为父节点的id if(it.customList&&it.customList.length>0){ it.children=it.customList.filter((item)=>{ if(item.name && item.resUrl){ item.isShow=1; return item; } }); if(it.children.length==0){ delete it.children; } } if(parent){ if(!Array.isArray(parent.children)) parent.children = []; parent.children.push(it); }else{ val.push(it); } }); val=__sort(val); //排序 function __sort(__data,orderField="orderIndex"){ let zeroArr=__data.filter(item=>{ return item[orderField]==0; }); let normalArr=__data.filter(item=>{ return item[orderField]!=0; }); normalArr.sort((a,b)=>{ var value1 = a[orderField]; var value2 = b[orderField]; return value1 - value2; }); __data=normalArr.concat(zeroArr); for(let i of __data){ if(i.children&&i.children.length>0){ i.children=__sort(i.children); } } return __data; } //排查子节点是否全部不显示 function __filterHide(__data,total){ let count=0; for(let i=0;i<__data.length;i++){ if(__data[i].children&&__data[i].children.length>0){ if(!__filterHide(__data[i].children,__data[i].children.length)){ __data[i].isShow=0; count++; } }else{ if(!__data[i].isShow){ count++; } } } return count!=total; } let __result=isNotTop?(val[0]&&val[0].children):val; __filterHide(__result,__result.length); return __result; } / notificationFunc--弹起浏览器消息通知方法 title:消息弹窗标题 ctn:消息弹窗内容 cb:回调 / export function notificationFunc(title,ctn,cb){ //发起消息通知 function popNotice() { if (Notification.permission == "granted") { var notification = new Notification(title, { body: ctn,//消息内容 }); notification.onclick = function() {//消息通知点击事件 cb&&cb(); window.focus(); notification.close(); }; } }; if (Notification.permission == "granted") { popNotice(); } else if (Notification.permission != "denied") { Notification.requestPermission((permission)=>{//发起询问授权 popNotice(); }); }else{ Vue.prototype.$notify.info({ title: title, message: ctn, position: 'bottom-right', onClick:(evt)=>{ cb&&cb(); } }); } } import getScroll from './getScroll' /* * 正则表达式判定Url * @param url * @returns {Boolean} / export function checkUrl(url){ //url= 协议://(ftp的登录信息)[IP\|域名](:端口号)(/或?请求参数) var strRegex = '^((https\|http\|ftp)://)?'//(https或http或ftp):// 可有可无 + '(([\\w_!~\'()\\.&=+$%-]+: )?[\\w_!~\'()\\.&=+$%-]+@)?' //ftp的user@ 可有可无 + '(([0-9]{1,3}\\.){3}[0-9]{1,3}' // IP形式的URL- 3位数字.3位数字.3位数字.3位数字 + '\|' // 允许IP和DOMAIN（域名） + '(localhost)\|' //匹配localhost + '([\\w_!~\'()-]+\\.)' // 域名- 至少一个[英文或数字_!~\'()-]加上. + '\\w+\\.' // 一级域名 -英文或数字加上. + '[a-zA-Z]{1,6})' // 顶级域名- 1-6位英文 + '(:[0-9]{1,5})?' // 端口- :80 ,1-5位数字 + '((/?)\|' // url无参数结尾 - 斜杆或这没有 + '(/[\\w_!~\'()\\.;?:@&=+$,%#-]+)+/?)$';//请求参数结尾- 英文或数字和[]内的各种字符 var strRegex1 = '^(?=^.{3,255}$)((http\|https\|ftp)?:\/\/)?(www\.)?[a-zA-Z0-9][-a-zA-Z0-9]{0,62}(\.[a-zA-Z0-9][-a-zA-Z0-9]{0,62})+(:\d+)(\/)?(?:\/(.+)\/?$)?(\/\w+\.\w+)([\?&]\w+=\w\|[\u4e00-\u9fa5]+)$'; var re=new RegExp(strRegex,'i');//i不区分大小写 //将url做uri转码后再匹配，解除请求参数中的中文和空字符影响 if (re.test(encodeURI(url))) { return (true); } else { return (false); } } export function getTargetRect(target) { return target !== window ? target.getBoundingClientRect() : { top: 0, left: 0, bottom: 0 }; } export function getOffset(element, target) { const elemRect = element.getBoundingClientRect(); const targetRect = getTargetRect(target); const scrollTop = getScroll(target, true); const scrollLeft = getScroll(target, false); const docElem = window.document.body; const clientTop = docElem.clientTop \|\| 0; const clientLeft = docElem.clientLeft \|\| 0; return { top: elemRect.top - targetRect.top + scrollTop - clientTop, left: elemRect.left - targetRect.left + scrollLeft - clientLeft, width: elemRect.width, height: elemRect.height, }; } export function getDefaultTarget() { return typeof window !== 'undefined' ? window : null; } /* * @method setUrlValue * @description 设置地址栏参数值 * @param url * @param pName * @param pValue * * @example: urlAppend("http://www.fdauto.com","userid=03870");��http://www.fdauto.com?userid=03870;1` * urlAppend("http://www.fdauto.com?userid=03870","bumen=aj")��http://www.fdauto.com?userid=03870&bumen=aj; / export function setUrlValue(url, key, value) { var returnUrl = '' if (url.indexOf('?') == -1) { returnUrl += url + '?' + key + '=' + value } else { if (url.indexOf('?' + key + '=') == -1 && url.indexOf('&' + key + '=') == -1) { returnUrl += url + '&' + key + '=' + value } else { var isDone = false var startIndex = 0 var endIndex = url.length - 1 var parm = '?' + key + '=' for (var i = 0; i < url.length; i++) { if (url.substr(i, parm.length) == parm) { startIndex = i + parm.length for (var j = startIndex; j < url.length; j++) { if (url[j] == '&') { endIndex = j break } else if (j == url.length - 1) { endIndex = url.length } } isDone = true break } } if (!isDone) { parm = '&' + key + '=' for (var i = 0; i < url.length; i++) { if (url.substr(i, parm.length) == parm) { startIndex = i + parm.length for (var j = startIndex; j < url.length; j++) { if (url[j] == '&') { endIndex = j break } else if (j == url.length - 1) { endIndex = url.length } } break } } } var parmKeyValue = parm + url.substring(startIndex, endIndex) returnUrl = url.replace(parmKeyValue, parm + value) } } return returnUrl } /* * @method getUrlValue * @description 获取地址栏参数值 * @param name * string * @param url * string * @example: getUrlValue("p","http://www.baidu.com?p=5"); / export function getUrlValue(url, name) { var str = url \|\| window.location.search; if (str.indexOf("&" + name) != -1 \|\| str.indexOf("?" + name) != -1) { var pos_start = "" if (str.indexOf("?" + name) > -1) pos_start = str.indexOf("?" + name) + name.length + 2; else pos_start = str.indexOf("&" + name) + name.length + 2; var pos_end = str.indexOf("&", pos_start); if (pos_end == -1) { return str.substring(pos_start); } else { return str.substring(pos_start, pos_end) } } else { return ""; } } export function getUrlSearch(url) { var name, value; var str = url; //取得整个地址栏 var num = str.indexOf("?") str = str.substr(num + 1); //取得所有参数 stringvar.substr(start [, length ] var arr = str.split("&"); //各个参数放到数组里 var search ={}; for (var i = 0; i < arr.length; i++) { num = arr[i].indexOf("="); if (num > 0) { name = arr[i].substring(0, num); value = arr[i].substr(num + 1); search[name] = value; } } return search; } /* * var str='这是一个测试的字符串：{0} {1}'.format('Hello','world'); * var str='这是一个测试的字符串：{str0} {str1}'.format({str0:'Hello',str1:'world'}); / export function strFormat(str, args) { var result = str; if (arguments.length > 0) { if (arguments.length == 2 && typeof (args) == "object") { for (var key in args) { if (args[key] != undefined) { var reg = new RegExp("({" + key + "})", "g"); result = result.replace(reg, args[key]); } } } else { for (var i = 1; i < arguments.length; i++) { if (arguments[i] != undefined) { var reg = new RegExp("({)" + (i - 1) + "(})", "g"); result = result.replace(reg, arguments[i]); } } } } return result; } export function closeWindow(errorUrl){ if (document.all) { if (window.location.pathname == window.parent.location.pathname) { window.opener = null; window.open('', '_top'); window.top.close(); } } else { window.close(); } window.location.href = errorUrl \|\| "about:blank"; } /5.0替换3.0菜单字段/ export function field5Change3(_arr){ /5.0字段替换3.0*/ let fieldConversion={ isActive:"fisactive", isOffline:"fisoffline", isShow:"fshow", name:"fresname", orderIndex:"forder", parentId:"frespguid", resId:"fresguid", resUrl:"fresurl", type:"frestype", iconClass:"ficonclass", }; _arr.map(item=>{ if(item.children&&item.children.length>0){ field5Change3(item.children); } if(item.customList&&item.customList.length>0){ field5Change3(item.customList); } for(let i in fieldConversion){ if(typeof(item[fieldConversion[i]])!="undefined"){ item[i]=item[fieldConversion[i]]; delete item[fieldConversion[i]]; } } //判断是不是url 地址 //serverName 是有加e5 ,但现在做兼容了，可以不用 // if(!window._global){//正式环境 // item.resUrl=window.HIVUI_SETTING.serverName+item.resUrl; // } return item; }); return _arr; } export function turnMenuTree(data,isNotTop) {//data:平级数据;isNotTop:输出数据是否不包含根节点 let map = {}; let val = []; //生成数据对象集合 data.forEach(it=>{ map[it.resId] = it; //resId为每个节点的id if(it.parentId==-1&&it.type=="root"){ isNotTop=true; } }); //生成结果集 data.forEach(it=>{ let parent = map[it.parentId]; //parentId为父节点的id if(it.customList&&it.customList.length>0){ it.children=it.customList.filter((item)=>{ if(item.name && item.resUrl){ item.isShow=1; return item; } }); } if(parent){ if(!Array.isArray(parent.children)) parent.children = []; parent.children.push(it); }else{ val.push(it); } }); val=__sort(val); //排序 function __sort(__data,orderField="orderIndex"){ let zeroArr=__data.filter(item=>{ return item[orderField]==0; }); let normalArr=__data.filter(item=>{ return item[orderField]!=0; }); normalArr.sort((a,b)=>{ var value1 = a[orderField]; var value2 = b[orderField]; return value1 - value2; }); __data=normalArr.concat(zeroArr); for(let i of __data){ if(i.children&&i.children.length>0){ i.children=__sort(i.children); } } return __data; } //排查子节点是否全部不显示 function __filterHide(__data,total){ let count=0; for(let i=0;i<__data.length;i++){ if(__data[i].children&&__data[i].children.length>0){ if(!__filterHide(__data[i].children,__data[i].children.length)){ __data[i].isShow=0; count++; } }else{ if(!__data[i].isShow){ count++; } } } return count!=total; } let __result=isNotTop?(val[0]&&val[0].children):val; __filterHide(__result,__result.length); return __result; }

Ignore Space Show notes View

project/hivuiMain/utils/index.js

import getScroll from './getScroll'
 /**
 * 正则表达式判定Url
 * @param url
 * @returns {Boolean}
 */
export function checkUrl(url){
    //url= 协议://(ftp的登录信息)[IP|域名](:端口号)(/或?请求参数)
    var strRegex = '^((https|http|ftp)://)?'//(https或http或ftp):// 可有可无
        + '(([\\w_!~*\'()\\.&=+$%-]+: )?[\\w_!~*\'()\\.&=+$%-]+@)?' //ftp的user@  可有可无
        + '(([0-9]{1,3}\\.){3}[0-9]{1,3}' // IP形式的URL- 3位数字.3位数字.3位数字.3位数字
        + '|' // 允许IP和DOMAIN（域名） 
        + '(localhost)|'	//匹配localhost
        + '([\\w_!~*\'()-]+\\.)*' // 域名- 至少一个[英文或数字_!~*\'()-]加上.
        + '\\w+\\.' // 一级域名 -英文或数字  加上.
        + '[a-zA-Z]{1,6})' // 顶级域名- 1-6位英文 
        + '(:[0-9]{1,5})?' // 端口- :80 ,1-5位数字
        + '((/?)|' // url无参数结尾 - 斜杆或这没有
        + '(/[\\w_!~*\'()\\.;?:@&=+$,%#-]+)+/?)$';//请求参数结尾- 英文或数字和[]内的各种字符
    
    var strRegex1 = '^(?=^.{3,255}$)((http|https|ftp)?:\/\/)?(www\.)?[a-zA-Z0-9][-a-zA-Z0-9]{0,62}(\.[a-zA-Z0-9][-a-zA-Z0-9]{0,62})+(:\d+)*(\/)?(?:\/(.+)\/?$)?(\/\w+\.\w+)*([\?&]\w+=\w*|[\u4e00-\u9fa5]+)*$';
    var re=new RegExp(strRegex,'i');//i不区分大小写 
    //将url做uri转码后再匹配，解除请求参数中的中文和空字符影响
    if (re.test(encodeURI(url))) {
        return (true);
    } else {
        return (false);
    }
}
export function getTargetRect(target) {
    return target !== window ? target.getBoundingClientRect() : { top: 0, left: 0, bottom: 0 };
}
export function getOffset(element, target) {
    const elemRect = element.getBoundingClientRect();
    const targetRect = getTargetRect(target);

const scrollTop = getScroll(target, true);
    const scrollLeft = getScroll(target, false);

const docElem = window.document.body;
    const clientTop = docElem.clientTop || 0;
    const clientLeft = docElem.clientLeft || 0;

return {
        top: elemRect.top - targetRect.top + scrollTop - clientTop,
        left: elemRect.left - targetRect.left + scrollLeft - clientLeft,
        width: elemRect.width,
        height: elemRect.height,
    };
}

export function getDefaultTarget() {
    return typeof window !== 'undefined' ? window : null;
}

/**
 * @method setUrlValue
 * @description 设置地址栏参数值
 * @param url
 * @param pName
 * @param pValue
 * 
 * @example: urlAppend("http://www.fdauto.com","userid=03870");�����http://www.fdauto.com?userid=03870;1`
 *           urlAppend("http://www.fdauto.com?userid=03870","bumen=aj")�����http://www.fdauto.com?userid=03870&bumen=aj;
 */

export function setUrlValue(url, key, value) {
    var returnUrl = ''
    if (url.indexOf('?') == -1) {
        returnUrl += url + '?' + key + '=' + value
    } else {
        if (url.indexOf('?' + key + '=') == -1 && url.indexOf('&' + key + '=') == -1) {
            returnUrl += url + '&' + key + '=' + value
        } else {
            var isDone = false
            var startIndex = 0
            var endIndex = url.length - 1
            var parm = '?' + key + '='
            for (var i = 0; i < url.length; i++) {
                if (url.substr(i, parm.length) == parm) {
                    startIndex = i + parm.length
                    for (var j = startIndex; j < url.length; j++) {
                        if (url[j] == '&') {
                            endIndex = j
                            break
                        } else if (j == url.length - 1) {
                            endIndex = url.length
                        }
                    }
                    isDone = true
                    break
                }
            }
            if (!isDone) {
                parm = '&' + key + '='
                for (var i = 0; i < url.length; i++) {
                    if (url.substr(i, parm.length) == parm) {
                        startIndex = i + parm.length
                        for (var j = startIndex; j < url.length; j++) {
                            if (url[j] == '&') {
                                endIndex = j
                                break
                            } else if (j == url.length - 1) {
                                endIndex = url.length
                            }
                        }
                        break
                    }
                }
            }
            var parmKeyValue = parm + url.substring(startIndex, endIndex)
            returnUrl = url.replace(parmKeyValue, parm + value)
        }
    }
    return returnUrl
}
/**
 * @method getUrlValue
 * @description 获取地址栏参数值
 * @param name
 *            string
 * @param url
 *            string
 * @example: getUrlValue("p","http://www.baidu.com?p=5"); 
 */
export function getUrlValue(url, name) {

export function closeWindow(errorUrl){
    if (document.all) {
        if (window.location.pathname == window.parent.location.pathname) {
            window.opener = null;
            window.open('', '_top');
            window.top.close();
        }
    } else {
        window.close();
    }

const scrollTop = getScroll(target, true);
    const scrollLeft = getScroll(target, false);

const docElem = window.document.body;
    const clientTop = docElem.clientTop || 0;
    const clientLeft = docElem.clientLeft || 0;

export function getDefaultTarget() {
    return typeof window !== 'undefined' ? window : null;
}

Ignore Space Show notes View project/hivuiMain/views/layout/components/Header.vue
<template> <div class="pl-header " :data-layout="layout"> <ul class="ltArea"> <li v-if="layout=='level'" class="logoStyle"> <div class="pl-logo"> <div v-if="hasTitle" @click="hideTitle(false)"> <img :src="def_sy_logo_horizon" :width="logoWidth" v-if="!logoOpt.src"> <img :src="logoOpt.src" :width="logoOpt.width?(logoOpt.width+'px'):(!logoOpt.height?logoWidth:null)" :height="logoOpt.height&&(logoOpt.height+'px')" :title="logoOpt.title" v-if="logoOpt.src"> </div> <div v-else @click="hideTitle(true)"> <img :src="def_sy_minLogo" v-if="!MlogoOpt.src"> <img :src="MlogoOpt.src" :width="MlogoOpt.width?(MlogoOpt.width+'px'):(!MlogoOpt.height?logoWidth:null)" :height="MlogoOpt.height&&(MlogoOpt.height+'px')" :title="MlogoOpt.title" v-if="MlogoOpt.src"> </div> </div> </li> <li v-else class="logoStyle"> <div class="pl-logo"> <img :src="def_sy_logo" :width="logoWidth" v-if="!logoOpt.src"> <img :src="logoOpt.src" :width="logoOpt.width?(logoOpt.width+'px'):(!logoOpt.height?logoWidth:null)" :height="logoOpt.height&&(logoOpt.height+'px')" :title="logoOpt.title" v-if="logoOpt.src"> </div> </li> <li v-if="sysList.length"> <div class="sysTrigger" ref='dom-sysList' @mouseover="handleShowSysList" @mouseout="handleHideSysList"> <span>{{$lang("projectManage")\|\|"项目管理"}}</span> <i class="iconfont icon-change"></i> </div> <ul class="pl-menus pl-menus-sub pl-menus-pop" @mouseenter="handleShowSysList" @mouseleave="handleHideSysList" :style="sysListStyle" v-add2Body> <li class="pl-menus-item" v-for="item,index in sysList" @click="handleChangeSys(item)"> <a class="title"><span class="txt">{{item.title}}111</span></a> </li> </ul> </li> <li v-if="layout == 'level'" > <div class="sysTrigger" ref="dom-latelyUse" :title='$lang("recentlyUsed")\|\|"最近使用"' @mouseenter="handleShowLatelyUse" @mouseleave="handleHideLatelyUse"> <i class="icon iconfont icon-time"></i> <span class="title">{{$lang("recentlyUsed")\|\|"最近使用"}}</span> <i class="icon iconfont icon-arrow-down"></i> </div> <ul class="pl-menus pl-menus-sub pl-menus-pop" @mouseenter="handleShowLatelyUse" @mouseleave="handleHideLatelyUse" :style="latelyUseStyle" v-add2Body> <li class="pl-menus-item" v-for="item,index in navsLatelyUse" @click="handleOpenLatelyFunc(item)"> <a class="title"><span class="txt">{{item.name}}</span></a> </li> <li v-show="navsLatelyUse.length==0" class="pl-menus-tips"> {{$lang("noData")\|\|"暂无数据"}} </li> </ul> </li> <li v-if="layout == 'level'&&showAllFuncBtn" > <div class="sysTrigger"> <span ref="allFuncBtn" class="title" @mouseenter="allFuncTriggerOpen" @mouseleave="allFuncTriggerClose">{{$lang('allFunction')\|\|'全部功能'}}</span> <i class="icon iconfont icon-arrow-down"></i> <allFuncMenu ref="allFuncMenu" :triggerObj="allFuncBtnObj" v-add2Body></allFuncMenu> </div> </li> </ul> <ul class="rtArea"> <li> <div class="pl-search" ref="dom-searchBox" > <input ref="dom-seachTxt" class="pl-search-text" type="text" :placeholder="$lang('searchKey')\|\|'搜索关键字'" v-model.trim="searchWord" @keyup="handleSeachKeyUp" /> <i class="iconfont icon-search"></i> </div> <ul class="pl-menus pl-menus-sub pl-menus-pop" :style="searchMenusStyle" v-add2Body> <li :class="['pl-menus-item',seldIndex==index?'pl-menus-itemSeld':'']" v-for="item,index in searchList" style="width:100%" @click="openFunc(item)"> <a class="title"><span class="txt" v-html="item.html\|\|item.name"></span></a> </li> <li v-show="searchList.length==0&&searchWord.length>0" class="pl-menus-tips"> {{$lang("noData")\|\|"暂无数据"}} </li> </ul> </li> <li v-if="sysProjectManage"> <a :href="sysProjectManage.url" target='_blank' class="item" :title="sysProjectManage.name"> <i class="iconfont" :class="sysProjectManage.iconClass"></i> <span class="title">{{sysProjectManage.name}}</span> </a> </li> <template v-for="item in sysFuncMenus"> <li v-if="item.type!='split'"> <template v-if="item.type=='withNumTips'"> <div class="item" @click.prevent="handleFuncMenus(item,$event)"> <div class="tip"> <i class="iconfont" :class="item.iconClass"></i> </div> <span class="title" v-html="item.html\|\|item.name"></span> <span class="pl-head-tipsNum" :hidden="!(item.tipNum&&item.tipNum!=0)">{{item.tipNum}}</span> </div> </template> <template v-else> <template v-if="item.children&&item.children.length"> <div class="item" @mouseenter="handleFuncMenus(item,$event)"> <div class="tip"> <i class="iconfont" :class="item.iconClass"></i> </div> <span class="title" v-html="item.html\|\|item.name"></span> <i class="iconfont icon-arrow-down" v-if="item.children"></i> </div> </template> <template v-if="!item.children\|\|item.children&&item.children.length==0"> <div class="item" @click.prevent="handleFuncMenus(item,$event)"> <div class="tip"> <i class="iconfont" :class="item.iconClass"></i> </div> <span class="title" v-html="item.html\|\|item.name"></span> <i class="iconfont icon-arrow-down" v-if="item.children"></i> </div> </template> </template> </li> <li v-if="item.type=='split'"><div class="line"></div></li> </template> <!-- <li> <div class="item"> <div class="tip"> <i class="iconfont icon-user"></i> </div> <span class="title">{{this.$store.getters.userId}}/{{this.$store.getters.userName}}</span> <i class="iconfont icon-arrow-down"></i> </div> </li> <li><div class="line"></div></li> --> <!-- 用户信息 --> <li> <template v-if="sysUserInfo.children&&sysUserInfo.children.length"> <div class="item" @mouseenter="handleFuncMenus(sysUserInfo,$event)"> <div class="tip"> <i class="iconfont" :class="sysUserInfo.iconClass"></i> </div> <span class="title" v-html="sysUserInfo.html\|\|sysUserInfo.name"></span> <i class="iconfont icon-arrow-down" v-if="sysUserInfo.children"></i> </div> </template> </li> <li><div class="line"></div></li> <li v-if="hasSetting"> <div class="item" :title="$lang('customWorkbench')\|\|'自定义工作台'"> <a href="#design" target='_blank'><i class="iconfont icon-set-fill"></i></a> </div> </li> <li> <div class="item" :title="$lang('logout')\|\|'退出系统'"> <a @click="handleLogout"><i class="iconfont icon-tuichu"></i></a> </div> </li> </ul> <vueContextMenu ref="cmp-funcMenu" :menu-items="menuItems" field="name"></vueContextMenu> <modifyPw></modifyPw> </div> </template> <script> import pinyin from 'js-pinyin';//ie 下有问题编译不过 import vueContextMenu from "@main/components/contextMenu"; import modifyPw from "@main/views/layout/components/modifyPw"; import allFuncMenu from './allFuncMenu' import {changeBz} from "@main/api/user"; import { removeToken } from '@main/utils/auth' import def_sy_loading from "@main/assets/logo_max.png" import def_sy_minLogo from "@main/assets/logo_min.png" import def_sy_logo from "@main/assets/logo.png" import def_sy_logo_horizon from "@main/assets/logo_horizon.png" export default { components:{ vueContextMenu, modifyPw, allFuncMenu, }, inject:['addTab','showTab','hideTab'], props:{ hasTitle:{ type: Boolean, }, logoWidth:{ type: String, } }, data(){ return { menuItems:[], searchWord:"", searchList:[], seldIndex:0, menuShow:false, searchMenusStyle:{ display:'none', left:0, top:0, width:0, // maxHeight:'50%', // overflow:'auto' }, sysListStyle:{ display:'none', left:0, top:0, }, latelyUseStyle:{ display:'none', left:0, top:0, maxHeight:'50%', overflow:'auto' }, def_sy_minLogo:def_sy_minLogo, def_sy_logo:def_sy_logo, def_sy_logo_horizon:def_sy_logo_horizon, numTipTimer:null, showAllFuncBtn:window.customSysCofig.isShowAllFunc===false?false:true, isShowAllFuncMenu:false, allFuncBtnObj:{}, } }, computed:{ hasSetting(){ let cfg = this.$store.state.app.config\|\|{}; return cfg.sysSetTabs&&cfg.sysSetTabs.length; }, sysList(){ let cfg = this.$store.state.app.config\|\|{}; return cfg.sysList\|\|[]; }, sysUserInfo(){ let me=this; let cfg = this.$store.state.app.config\|\|{}; function replaceData(str){ if(!str)return ['',false]; var _arr=str.match(/\${(\S?)}/g); var nullNum=0; if(_arr&&_arr.length>0){ for(let i of _arr){ var _data=me.userInfo[i.match(/\${(\S)}/)[1]]; if(typeof(_data)!="undefined"){ str=str.replace(i,_data); }else{ str=str.replace(i,"空"); nullNum++; } } return [str,nullNum==_arr.length?false:true]; } return [str,true]; } let _userInfo=cfg.userInfo; if(_userInfo){ _userInfo.name=replaceData(_userInfo.name)[0]; if(_userInfo.children&&_userInfo.children.length>0){ _userInfo.children=_userInfo.children.filter((item)=>{ let _rData=replaceData(item.name); item.name=_rData[0]; switch(item.type){ case "modifyUserInfo": item.handler=me.modifyUserInfo; break; case "modifyPw": item.handler=me.modifyPw; break; case "orgBz": if(Array.isArray(me.bzList)&&me.bzList.length>1){ item.children=[]; for(let i of me.bzList){ item.children.push({ iconClass:'icon-user', name:`${i.fbzname}/${i.fbzid}`, handler:function(){ me.__changeOrgBz(`${i.fbzid}`); } }); } } break; } if(_rData[1]){ return item; } }); } } return _userInfo\|\|[]; }, sysProjectManage(){ let cfg = this.$store.state.app.config\|\|{}; let item = cfg.sysProjectMange\|\|{},flag=false; this.$store.state.app.powerList.forEach(p=>{ if(p.resUrl.indexOf(item.uri)>-1){ flag = true; return true; } }); if(flag){ return cfg.sysProjectMange; }else{ return null; } }, sysFuncMenus(){ let cfg = this.$store.state.app.config\|\|{}; let menus = cfg.sysFuncMenus\|\|[]; return menus; }, logoOpt(){ let cfg = this.$store.state.app.config\|\|{}; return (this.layout=="level"&&cfg.sysLogoHorizon?cfg.sysLogoHorizon:cfg.sysLogo)\|\|{}; }, MlogoOpt(){ let cfg = this.$store.state.app.config\|\|{}; return cfg.MsysLogo\|\|{}; }, layout(){ return window.localStorage.getItem('layout'); }, navsLatelyUse(){ return this.$store.getters.navsLatelyUse; }, token(){ return this.$store.getters.token; }, userInfo(){ return this.$store.state.user.userInfo; }, bzList(){ return this.$store.state.user.bzList; }, }, watch:{ searchWord(newVal,oldVal){ this.seldIndex=0; this.doSearch(newVal); } }, mounted(){ let me=this; document.addEventListener('click',me.hideSeachResult); me.$store.dispatch("app/getSysConfig"); me.sysFuncMenus.filter(item=>{ if(item.type=="withNumTips"&&item.numFunc){ function __intervalFunc(){ item.numFunc().then(res=>{ me.$set(item,"tipNum",res.num); if(res.num){ window.SysPage.notificationFunc("消息提示",item.messageText(res),()=>{ me.handleFuncMenus(item); }); } }).catch(err=>{ clearInterval(me.numTipTimer); }); } clearInterval(me.numTipTimer); me.numTipTimer=setInterval(__intervalFunc,item.numIntervalTime\|\|100030); __intervalFunc(); } }); me.allFuncBtnObj=(me.layout == 'level')&&me.showAllFuncBtn&&me.$refs.allFuncBtn.getBoundingClientRect(); }, beforeDestroy(){ document.removeEventListener('click',this.hideSeachResult) }, methods:{ openDesign(){ this.$refs['cmp-dd'].show(); }, doSearch(cnKey){ if(cnKey==""){ this.hideSeachResult(); return; } this.showSeachResult(); let list = [], records = this.$store.getters.menusList; let py = pinyin.getCamelChars(cnKey).toLocaleLowerCase(); console.log('records', records) //let py = Scp.String.getPinyin(cnKey).toLocaleLowerCase(); let re = new RegExp("^[a-zA-Z]+$"); for(let i=0,l=records.length;i<l;i++){ let item = records[i]; if(list.length>10){ break; } if(item.name){ if(re.test(cnKey)){ let y = pinyin.getCamelChars(item.name).toLocaleLowerCase(); //let y = Scp.String.getPinyin(item.name).toLocaleLowerCase(); if(y.indexOf(py)>-1 && item.type!='dir'){ list.push(item); } }else{ if(item.name.indexOf(cnKey)>-1 && item.type!='dir' ){ list.push(item); continue; } } } } this.$set(this,'searchList',list); }, openFunc(item){ if(item.type== "link"){ window.open(item.resUrl,item.name); return; } // this.addTab(item.resUrl,item.name,item.resId) this.addTab(item);//inject 提供的方法只能传一个参数 }, handleSearchBoxClick(){ this.doSearch(this.searchWord); this.$refs['dom-seachTxt'].focus(); }, handleSeachKeyUp(evt){ if(evt.keyCode==40){//ArrowDown if(this.seldIndex<this.searchList.length-1){ this.seldIndex++; }else{ this.seldIndex=0; } } if(evt.keyCode==38){//ArrowUp if(this.seldIndex==0){ this.seldIndex=this.searchList.length-1; }else{ this.seldIndex--; } } if(evt.keyCode==13){//enter let item = this.searchList[this.seldIndex]; if(item.type== "link"){ window.open(item.resUrl,item.name); return; } // this.addTab(item.resUrl,item.name,item.resId); this.addTab(item);//inject 提供的方法只能传一个参数 this.searchWord = ""; this.seldIndex = 0; this.hideSeachResult(); } }, showSeachResult(){ this.searchMenusStyle.display ='block'; let s = this.$refs["dom-searchBox"]; let rect = s.getBoundingClientRect(); this.searchMenusStyle.left = rect.left+'px'; this.searchMenusStyle.top = rect.top + rect.height + 5 +'px'; this.searchMenusStyle.width = rect.width+'px'; this.searchMenusStyle.opacity = '1'; }, hideSeachResult(){ this.searchMenusStyle.display ='none'; }, handleChangeSys(item){ if(!item.url)return; if(item.target=="_blank"){ window.open(item.url) }else{ window.location.href=item.url; } }, handleShowSysList(){ this.sysListStyle.display ='block'; let s = this.$refs["dom-sysList"]; let rect = s.getBoundingClientRect(); this.sysListStyle.left = rect.left+'px'; this.sysListStyle.top = rect.top + rect.height +'px'; }, handleHideSysList(){ this.sysListStyle.display ='none'; }, handleFuncMenus(item,$event){ $event&&$event.stopPropagation(); if(item.type== "link"){ window.open(item.resUrl,item.name); return; } var _url=item.url; if(item.type== "widthToken"\|\|item.type== "withToken"){ _url=item.url+"&access_token="+this.token; } if(item.url){ item.target=='tab'? this.addTab({ resUrl:_url, name:item.name, resId:item.id, }) : window.open(_url); return }else{ item.handler&&item.handler(); } if(item.children&&item.children.length){ this.menuItems = item.children; this.$refs['cmp-funcMenu'].open($event) } }, async handleLogout(){ await this.$store.dispatch("user/logout").then(()=>{ //removeToken(); if(window.HIVUI_SETTING.isSingleLogin&&window.HIVUI_SETTING.singleLogoutUrl){ location=window.HIVUI_SETTING.singleLogoutUrl; }else{ location=window.HIVUI_SETTING.loginUrl; } }); }, handleShowLatelyUse(){ this.$store.dispatch('app/getLatelyUse')//最近使用 let s = this.$refs["dom-latelyUse"]; let rect = s.getBoundingClientRect(); this.latelyUseStyle.display ='block'; this.latelyUseStyle.left = rect.left+'px'; this.latelyUseStyle.top = rect.top + rect.height +'px'; this.latelyUseStyle.opacity = '1'; }, handleHideLatelyUse(){ this.latelyUseStyle.display ='none'; }, handleOpenLatelyFunc(item){ if(item.type== "link"){ window.open(item.resUrl,item.name); return; } this.addTab({ resUrl:item.resUrl, name:item.name });//inject 提供的方法只能传一个参数 }, hideTitle(name){ this.$emit('hideTitle', name); }, //切岗 __changeOrgBz(bzid){ changeBz({ bzid:bzid }).then(res=>{ window.location.reload(); }); }, modifyPw(){ this.$store.dispatch("user/showPwDialog",true); }, modifyUserInfo(){ }, //全部功能弹窗 allFuncTrigger(){ let me=this; me.isShowAllFuncMenu=me.isShowAllFuncMenu?false:true; if(me.isShowAllFuncMenu){ me.$refs.allFuncMenu.showBox(); }else{ me.$refs.allFuncMenu.hideBox(); } }, allFuncTriggerOpen(){ let me=this; me.$refs.allFuncMenu.showBox(); }, allFuncTriggerClose(){ let me=this; me.$refs.allFuncMenu.hideBox(); }, } } </script> <style lang="less" scoped> .pl-header{ z-index: 99; } </style> <template> <div class="pl-header " :data-layout="layout"> <ul class="ltArea"> <li v-if="layout=='level'" class="logoStyle"> <div class="pl-logo"> <div v-if="hasTitle" @click="hideTitle(false)"> <img :src="def_sy_logo_horizon" :width="logoWidth" v-if="!logoOpt.src"> <img :src="logoOpt.src" :width="logoOpt.width?(logoOpt.width+'px'):(!logoOpt.height?logoWidth:null)" :height="logoOpt.height&&(logoOpt.height+'px')" :title="logoOpt.title" v-if="logoOpt.src"> </div> <div v-else @click="hideTitle(true)"> <img :src="def_sy_minLogo" v-if="!MlogoOpt.src"> <img :src="MlogoOpt.src" :width="MlogoOpt.width?(MlogoOpt.width+'px'):(!MlogoOpt.height?logoWidth:null)" :height="MlogoOpt.height&&(MlogoOpt.height+'px')" :title="MlogoOpt.title" v-if="MlogoOpt.src"> </div> </div> </li> <li v-else class="logoStyle"> <div class="pl-logo"> <img :src="def_sy_logo" :width="logoWidth" v-if="!logoOpt.src"> <img :src="logoOpt.src" :width="logoOpt.width?(logoOpt.width+'px'):(!logoOpt.height?logoWidth:null)" :height="logoOpt.height&&(logoOpt.height+'px')" :title="logoOpt.title" v-if="logoOpt.src"> </div> </li> <li v-if="sysList.length"> <div class="sysTrigger" ref='dom-sysList' @mouseover="handleShowSysList" @mouseout="handleHideSysList"> <span>{{$lang("projectManage")\|\|"项目管理"}}</span> <i class="iconfont icon-change"></i> </div> <ul class="pl-menus pl-menus-sub pl-menus-pop" @mouseenter="handleShowSysList" @mouseleave="handleHideSysList" :style="sysListStyle" v-add2Body> <li class="pl-menus-item" v-for="item,index in sysList" @click="handleChangeSys(item)"> <a class="title"><span class="txt">{{item.title}}111</span></a> </li> </ul> </li> <li v-if="layout == 'level'" > <div class="sysTrigger" ref="dom-latelyUse" :title='$lang("recentlyUsed")\|\|"最近使用"' @mouseenter="handleShowLatelyUse" @mouseleave="handleHideLatelyUse"> <i class="icon iconfont icon-time"></i> <span class="title">{{$lang("recentlyUsed")\|\|"最近使用"}}</span> <i class="icon iconfont icon-arrow-down"></i> </div> <ul class="pl-menus pl-menus-sub pl-menus-pop" @mouseenter="handleShowLatelyUse" @mouseleave="handleHideLatelyUse" :style="latelyUseStyle" v-add2Body> <li class="pl-menus-item" v-for="item,index in navsLatelyUse" @click="handleOpenLatelyFunc(item)"> <a class="title"><span class="txt">{{item.name}}</span></a> </li> <li v-show="navsLatelyUse.length==0" class="pl-menus-tips"> {{$lang("noData")\|\|"暂无数据"}} </li> </ul> </li> <li v-if="layout == 'level'&&showAllFuncBtn" > <div class="sysTrigger"> <span ref="allFuncBtn" class="title" @mouseenter="allFuncTriggerOpen" @mouseleave="allFuncTriggerClose">{{$lang('allFunction')\|\|'全部功能'}}</span> <i class="icon iconfont icon-arrow-down"></i> <allFuncMenu ref="allFuncMenu" :triggerObj="allFuncBtnObj" v-add2Body></allFuncMenu> </div> </li> </ul> <ul class="rtArea"> <li> <div class="pl-search" ref="dom-searchBox" > <input ref="dom-seachTxt" class="pl-search-text" type="text" :placeholder="$lang('searchKey')\|\|'搜索关键字'" v-model.trim="searchWord" @keyup="handleSeachKeyUp" /> <i class="iconfont icon-search"></i> </div> <ul class="pl-menus pl-menus-sub pl-menus-pop" :style="searchMenusStyle" v-add2Body> <li :class="['pl-menus-item',seldIndex==index?'pl-menus-itemSeld':'']" v-for="item,index in searchList" style="width:100%" @click="openFunc(item)"> <a class="title"><span class="txt" v-html="item.html\|\|item.name"></span></a> </li> <li v-show="searchList.length==0&&searchWord.length>0" class="pl-menus-tips"> {{$lang("noData")\|\|"暂无数据"}} </li> </ul> </li> <li v-if="sysProjectManage"> <a :href="sysProjectManage.url" target='_blank' class="item" :title="sysProjectManage.name"> <i class="iconfont" :class="sysProjectManage.iconClass"></i> <span class="title">{{sysProjectManage.name}}</span> </a> </li> <template v-for="item in sysFuncMenus"> <li v-if="item.type!='split'"> <template v-if="item.type=='withNumTips'"> <div class="item" @click.prevent="handleFuncMenus(item,$event)"> <div class="tip"> <i class="iconfont" :class="item.iconClass"></i> </div> <span class="title" v-html="item.html\|\|item.name"></span> <span class="pl-head-tipsNum" :hidden="!(item.tipNum&&item.tipNum!=0)">{{item.tipNum}}</span> </div> </template> <template v-else> <template v-if="item.children&&item.children.length"> <div class="item" @mouseenter="handleFuncMenus(item,$event)"> <div class="tip"> <i class="iconfont" :class="item.iconClass"></i> </div> <span class="title" v-html="item.html\|\|item.name"></span> <i class="iconfont icon-arrow-down" v-if="item.children"></i> </div> </template> <template v-if="!item.children\|\|item.children&&item.children.length==0"> <div class="item" @click.prevent="handleFuncMenus(item,$event)"> <div class="tip"> <i class="iconfont" :class="item.iconClass"></i> </div> <span class="title" v-html="item.html\|\|item.name"></span> <i class="iconfont icon-arrow-down" v-if="item.children"></i> </div> </template> </template> </li> <li v-if="item.type=='split'"><div class="line"></div></li> </template> <!-- <li> <div class="item"> <div class="tip"> <i class="iconfont icon-user"></i> </div> <span class="title">{{this.$store.getters.userId}}/{{this.$store.getters.userName}}</span> <i class="iconfont icon-arrow-down"></i> </div> </li> <li><div class="line"></div></li> --> <!-- 用户信息 --> <li> <template v-if="sysUserInfo.children&&sysUserInfo.children.length"> <div class="item" @mouseenter="handleFuncMenus(sysUserInfo,$event)"> <div class="tip"> <i class="iconfont" :class="sysUserInfo.iconClass"></i> </div> <span class="title" v-html="sysUserInfo.html\|\|sysUserInfo.name"></span> <i class="iconfont icon-arrow-down" v-if="sysUserInfo.children"></i> </div> </template> </li> <li><div class="line"></div></li> <li v-if="hasSetting"> <div class="item" :title="$lang('customWorkbench')\|\|'自定义工作台'"> <a href="#design" target='_blank'><i class="iconfont icon-set-fill"></i></a> </div> </li> <li> <div class="item" :title="$lang('logout')\|\|'退出系统'"> <a @click="handleLogout"><i class="iconfont icon-tuichu"></i></a> </div> </li> </ul> <vueContextMenu ref="cmp-funcMenu" :menu-items="menuItems" field="name"></vueContextMenu> <modifyPw></modifyPw> </div> </template> <script> import pinyin from 'js-pinyin';//ie 下有问题编译不过 import vueContextMenu from "@main/components/contextMenu"; import modifyPw from "@main/views/layout/components/modifyPw"; import allFuncMenu from './allFuncMenu' import {changeBz} from "@main/api/user"; import { removeToken } from '@main/utils/auth' import def_sy_loading from "@main/assets/logo_max.png" import def_sy_minLogo from "@main/assets/logo_min.png" import def_sy_logo from "@main/assets/logo.png" import def_sy_logo_horizon from "@main/assets/logo_horizon.png" export default { components:{ vueContextMenu, modifyPw, allFuncMenu, }, inject:['addTab','showTab','hideTab'], props:{ hasTitle:{ type: Boolean, }, logoWidth:{ type: String, } }, data(){ return { menuItems:[], searchWord:"", searchList:[], seldIndex:0, menuShow:false, searchMenusStyle:{ display:'none', left:0, top:0, width:0, // maxHeight:'50%', // overflow:'auto' }, sysListStyle:{ display:'none', left:0, top:0, }, latelyUseStyle:{ display:'none', left:0, top:0, maxHeight:'50%', overflow:'auto' }, def_sy_minLogo:def_sy_minLogo, def_sy_logo:def_sy_logo, def_sy_logo_horizon:def_sy_logo_horizon, numTipTimer:null, showAllFuncBtn:window.customSysCofig.isShowAllFunc===false?false:true, isShowAllFuncMenu:false, allFuncBtnObj:{}, } }, computed:{ hasSetting(){ let cfg = this.$store.state.app.config\|\|{}; return cfg.sysSetTabs&&cfg.sysSetTabs.length; }, sysList(){ let cfg = this.$store.state.app.config\|\|{}; return cfg.sysList\|\|[]; }, sysUserInfo(){ let me=this; let cfg = this.$store.state.app.config\|\|{}; function replaceData(str){ if(!str)return ['',false]; var _arr=str.match(/\${(\S?)}/g); var nullNum=0; if(_arr&&_arr.length>0){ for(let i of _arr){ var _data=me.userInfo[i.match(/\${(\S)}/)[1]]; if(typeof(_data)!="undefined"){ str=str.replace(i,_data); }else{ str=str.replace(i,"空"); nullNum++; } } return [str,nullNum==_arr.length?false:true]; } return [str,true]; } let _userInfo=cfg.userInfo; if(_userInfo){ _userInfo.name=replaceData(_userInfo.name)[0]; if(_userInfo.children&&_userInfo.children.length>0){ _userInfo.children=_userInfo.children.filter((item)=>{ let _rData=replaceData(item.name); item.name=_rData[0]; switch(item.type){ case "modifyUserInfo": item.handler=me.modifyUserInfo; break; case "modifyPw": item.handler=me.modifyPw; break; case "orgBz": if(Array.isArray(me.bzList)&&me.bzList.length>1){ item.children=[]; for(let i of me.bzList){ item.children.push({ iconClass:'icon-user', name:`${i.fbzname}/${i.fbzid}`, handler:function(){ me.__changeOrgBz(`${i.fbzid}`); } }); } } break; } if(_rData[1]){ return item; } }); } } return _userInfo\|\|[]; }, sysProjectManage(){ let cfg = this.$store.state.app.config\|\|{}; let item = cfg.sysProjectMange\|\|{},flag=false; this.$store.state.app.powerList.forEach(p=>{ if(p.resUrl.indexOf(item.uri)>-1){ flag = true; return true; } }); if(flag){ return cfg.sysProjectMange; }else{ return null; } }, sysFuncMenus(){ let cfg = this.$store.state.app.config\|\|{}; let menus = cfg.sysFuncMenus\|\|[]; return menus; }, logoOpt(){ let cfg = this.$store.state.app.config\|\|{}; return (this.layout=="level"&&cfg.sysLogoHorizon?cfg.sysLogoHorizon:cfg.sysLogo)\|\|{}; }, MlogoOpt(){ let cfg = this.$store.state.app.config\|\|{}; return cfg.MsysLogo\|\|{}; }, layout(){ return window.localStorage.getItem('layout'); }, navsLatelyUse(){ return this.$store.getters.navsLatelyUse; }, token(){ return this.$store.getters.token; }, userInfo(){ return this.$store.state.user.userInfo; }, bzList(){ return this.$store.state.user.bzList; }, }, watch:{ searchWord(newVal,oldVal){ this.seldIndex=0; this.doSearch(newVal); } }, mounted(){ let me=this; document.addEventListener('click',me.hideSeachResult); me.$store.dispatch("app/getSysConfig"); me.sysFuncMenus.filter(item=>{ if(item.type=="withNumTips"&&item.numFunc){ function __intervalFunc(){ item.numFunc().then(res=>{ me.$set(item,"tipNum",res.num); if(res.num){ me.$notify.info({ title: '消息提示', //message: '您有'+res.num+'条未读消息', message: item.messageText(res), position: 'bottom-right', onClick:(evt)=>{ me.handleFuncMenus(item); } }); } }).catch(err=>{ clearInterval(me.numTipTimer); }); } clearInterval(me.numTipTimer); me.numTipTimer=setInterval(__intervalFunc,item.numIntervalTime\|\|100030); __intervalFunc(); } }); me.allFuncBtnObj=(me.layout == 'level')&&me.showAllFuncBtn&&me.$refs.allFuncBtn.getBoundingClientRect(); }, beforeDestroy(){ document.removeEventListener('click',this.hideSeachResult) }, methods:{ openDesign(){ this.$refs['cmp-dd'].show(); }, doSearch(cnKey){ if(cnKey==""){ this.hideSeachResult(); return; } this.showSeachResult(); let list = [], records = this.$store.getters.menusList; let py = pinyin.getCamelChars(cnKey).toLocaleLowerCase(); console.log('records', records) //let py = Scp.String.getPinyin(cnKey).toLocaleLowerCase(); let re = new RegExp("^[a-zA-Z]+$"); for(let i=0,l=records.length;i<l;i++){ let item = records[i]; if(list.length>10){ break; } if(item.name){ if(re.test(cnKey)){ let y = pinyin.getCamelChars(item.name).toLocaleLowerCase(); //let y = Scp.String.getPinyin(item.name).toLocaleLowerCase(); if(y.indexOf(py)>-1 && item.type!='dir'){ list.push(item); } }else{ if(item.name.indexOf(cnKey)>-1 && item.type!='dir' ){ list.push(item); continue; } } } } this.$set(this,'searchList',list); }, openFunc(item){ if(item.type== "link"){ window.open(item.resUrl,item.name); return; } // this.addTab(item.resUrl,item.name,item.resId) this.addTab(item);//inject 提供的方法只能传一个参数 }, handleSearchBoxClick(){ this.doSearch(this.searchWord); this.$refs['dom-seachTxt'].focus(); }, handleSeachKeyUp(evt){ if(evt.keyCode==40){//ArrowDown if(this.seldIndex<this.searchList.length-1){ this.seldIndex++; }else{ this.seldIndex=0; } } if(evt.keyCode==38){//ArrowUp if(this.seldIndex==0){ this.seldIndex=this.searchList.length-1; }else{ this.seldIndex--; } } if(evt.keyCode==13){//enter let item = this.searchList[this.seldIndex]; if(item.type== "link"){ window.open(item.resUrl,item.name); return; } // this.addTab(item.resUrl,item.name,item.resId); this.addTab(item);//inject 提供的方法只能传一个参数 this.searchWord = ""; this.seldIndex = 0; this.hideSeachResult(); } }, showSeachResult(){ this.searchMenusStyle.display ='block'; let s = this.$refs["dom-searchBox"]; let rect = s.getBoundingClientRect(); this.searchMenusStyle.left = rect.left+'px'; this.searchMenusStyle.top = rect.top + rect.height + 5 +'px'; this.searchMenusStyle.width = rect.width+'px'; this.searchMenusStyle.opacity = '1'; }, hideSeachResult(){ this.searchMenusStyle.display ='none'; }, handleChangeSys(item){ if(!item.url)return; if(item.target=="_blank"){ window.open(item.url) }else{ window.location.href=item.url; } }, handleShowSysList(){ this.sysListStyle.display ='block'; let s = this.$refs["dom-sysList"]; let rect = s.getBoundingClientRect(); this.sysListStyle.left = rect.left+'px'; this.sysListStyle.top = rect.top + rect.height +'px'; }, handleHideSysList(){ this.sysListStyle.display ='none'; }, handleFuncMenus(item,$event){ $event&&$event.stopPropagation(); if(item.type== "link"){ window.open(item.resUrl,item.name); return; } var _url=item.url; if(item.type== "widthToken"\|\|item.type== "withToken"){ _url=item.url+"&access_token="+this.token; } if(item.url){ item.target=='tab'? this.addTab({ resUrl:_url, name:item.name, resId:item.id, }) : window.open(_url); return }else{ item.handler&&item.handler(); } if(item.children&&item.children.length){ this.menuItems = item.children; this.$refs['cmp-funcMenu'].open($event) } }, async handleLogout(){ await this.$store.dispatch("user/logout").then(()=>{ //removeToken(); if(window.HIVUI_SETTING.isSingleLogin&&window.HIVUI_SETTING.singleLogoutUrl){ location=window.HIVUI_SETTING.singleLogoutUrl; }else{ location=window.HIVUI_SETTING.loginUrl; } }); }, handleShowLatelyUse(){ this.$store.dispatch('app/getLatelyUse')//最近使用 let s = this.$refs["dom-latelyUse"]; let rect = s.getBoundingClientRect(); this.latelyUseStyle.display ='block'; this.latelyUseStyle.left = rect.left+'px'; this.latelyUseStyle.top = rect.top + rect.height +'px'; this.latelyUseStyle.opacity = '1'; }, handleHideLatelyUse(){ this.latelyUseStyle.display ='none'; }, handleOpenLatelyFunc(item){ if(item.type== "link"){ window.open(item.resUrl,item.name); return; } this.addTab({ resUrl:item.resUrl, name:item.name });//inject 提供的方法只能传一个参数 }, hideTitle(name){ this.$emit('hideTitle', name); }, //切岗 __changeOrgBz(bzid){ changeBz({ bzid:bzid }).then(res=>{ window.location.reload(); }); }, modifyPw(){ this.$store.dispatch("user/showPwDialog",true); }, modifyUserInfo(){ }, //全部功能弹窗 allFuncTrigger(){ let me=this; me.isShowAllFuncMenu=me.isShowAllFuncMenu?false:true; if(me.isShowAllFuncMenu){ me.$refs.allFuncMenu.showBox(); }else{ me.$refs.allFuncMenu.hideBox(); } }, allFuncTriggerOpen(){ let me=this; me.$refs.allFuncMenu.showBox(); }, allFuncTriggerClose(){ let me=this; me.$refs.allFuncMenu.hideBox(); }, } } </script> <style lang="less" scoped> .pl-header{ z-index: 99; } </style>

Ignore Space Show notes View

project/hivuiMain/views/layout/components/Header.vue

<template>
    <div class="pl-header " :data-layout="layout">  
        <ul class="ltArea">
            <li v-if="layout=='level'" class="logoStyle">
                <div class="pl-logo">
                    <div v-if="hasTitle" @click="hideTitle(false)">
                        <img :src="def_sy_logo_horizon" :width="logoWidth" v-if="!logoOpt.src">
                        <img :src="logoOpt.src" :width="logoOpt.width?(logoOpt.width+'px'):(!logoOpt.height?logoWidth:null)" :height="logoOpt.height&&(logoOpt.height+'px')" :title="logoOpt.title" v-if="logoOpt.src">
                    </div>
                    <div v-else @click="hideTitle(true)">
                        <img :src="def_sy_minLogo" v-if="!MlogoOpt.src">
                        <img :src="MlogoOpt.src" :width="MlogoOpt.width?(MlogoOpt.width+'px'):(!MlogoOpt.height?logoWidth:null)" :height="MlogoOpt.height&&(MlogoOpt.height+'px')" :title="MlogoOpt.title" v-if="MlogoOpt.src">
                    </div>
                </div>
            </li>
            <li v-else class="logoStyle">
                <div class="pl-logo">
                    <img :src="def_sy_logo"  :width="logoWidth" v-if="!logoOpt.src">
                    <img :src="logoOpt.src" :width="logoOpt.width?(logoOpt.width+'px'):(!logoOpt.height?logoWidth:null)" :height="logoOpt.height&&(logoOpt.height+'px')" :title="logoOpt.title" v-if="logoOpt.src">
                </div>
            </li>
            <li v-if="sysList.length">                
                <div class="sysTrigger" ref='dom-sysList'  
                    @mouseover="handleShowSysList"  @mouseout="handleHideSysList">
                    <span>{{$lang("projectManage")||"项目管理"}}</span>
                    <i class="iconfont icon-change"></i>
                </div> 
                <ul class="pl-menus pl-menus-sub pl-menus-pop"
                @mouseenter="handleShowSysList"  @mouseleave="handleHideSysList"
                :style="sysListStyle" v-add2Body>
                    <li class="pl-menus-item" v-for="item,index in sysList" @click="handleChangeSys(item)">
                        <a class="title"><span class="txt">{{item.title}}111</span></a>
                    </li>
                </ul>   
            </li>
            <li v-if="layout == 'level'" >
                <div class="sysTrigger" ref="dom-latelyUse" 
                :title='$lang("recentlyUsed")||"最近使用"'
                @mouseenter="handleShowLatelyUse"  @mouseleave="handleHideLatelyUse">
                    <i class="icon iconfont icon-time"></i>
                    <span class="title">{{$lang("recentlyUsed")||"最近使用"}}</span>
                    <i class="icon iconfont icon-arrow-down"></i>
                </div>
                <ul class="pl-menus pl-menus-sub pl-menus-pop"
                @mouseenter="handleShowLatelyUse"  @mouseleave="handleHideLatelyUse"
                :style="latelyUseStyle" v-add2Body>
                    <li class="pl-menus-item" v-for="item,index in navsLatelyUse" @click="handleOpenLatelyFunc(item)">
                        <a class="title"><span class="txt">{{item.name}}</span></a>
                    </li>
                    <li v-show="navsLatelyUse.length==0" class="pl-menus-tips">
                        {{$lang("noData")||"暂无数据"}}
                    </li>
                </ul> 
            </li>
            <li v-if="layout == 'level'&&showAllFuncBtn" >
                <div class="sysTrigger">
                    <span ref="allFuncBtn" class="title" @mouseenter="allFuncTriggerOpen" @mouseleave="allFuncTriggerClose">{{$lang('allFunction')||'全部功能'}}</span>
                    <i class="icon iconfont icon-arrow-down"></i>
                    <allFuncMenu ref="allFuncMenu" :triggerObj="allFuncBtnObj" v-add2Body></allFuncMenu>
                </div>
            </li>
        </ul>
        <ul class="rtArea">
            <li>
                <div class="pl-search" ref="dom-searchBox" >
                    <input ref="dom-seachTxt" class="pl-search-text" type="text" :placeholder="$lang('searchKey')||'搜索关键字'" 
                    v-model.trim="searchWord" 
                    @keyup="handleSeachKeyUp"
                    />
                    <i class="iconfont icon-search"></i>                   
                </div>  
                <ul class="pl-menus pl-menus-sub pl-menus-pop" :style="searchMenusStyle" v-add2Body>
                    <li :class="['pl-menus-item',seldIndex==index?'pl-menus-itemSeld':'']" v-for="item,index in searchList" 
                    style="width:100%"
                    @click="openFunc(item)">
                        <a class="title"><span class="txt" v-html="item.html||item.name"></span></a>
                    </li>
                    <li v-show="searchList.length==0&&searchWord.length>0" class="pl-menus-tips">
                        {{$lang("noData")||"暂无数据"}}
                    </li>
                </ul> 
            </li>
            <li v-if="sysProjectManage">
                <a :href="sysProjectManage.url" target='_blank' class="item" :title="sysProjectManage.name">
                    <i class="iconfont" :class="sysProjectManage.iconClass"></i>
                    <span class="title">{{sysProjectManage.name}}</span>
                </a>  
            </li>
            <template v-for="item in sysFuncMenus">
                <li v-if="item.type!='split'">
                    <template v-if="item.type=='withNumTips'">
                        <div class="item" @click.prevent="handleFuncMenus(item,$event)">
                            <div class="tip">
                                <i class="iconfont" :class="item.iconClass"></i>
                            </div>
                            <span class="title" v-html="item.html||item.name"></span>
                            <span class="pl-head-tipsNum" :hidden="!(item.tipNum&&item.tipNum!=0)">{{item.tipNum}}</span>
                        </div>
                    </template>
                    <template v-else>
                        <template v-if="item.children&&item.children.length">
                            <div class="item" @mouseenter="handleFuncMenus(item,$event)">
                                <div class="tip">
                                    <i class="iconfont" :class="item.iconClass"></i>
                                </div>
                                <span class="title" v-html="item.html||item.name"></span>
                                <i class="iconfont icon-arrow-down" v-if="item.children"></i>
                            </div>
                        </template>
                        <template v-if="!item.children||item.children&&item.children.length==0">
                            <div class="item" @click.prevent="handleFuncMenus(item,$event)">
                                <div class="tip">
                                    <i class="iconfont" :class="item.iconClass"></i>
                                </div>
                                <span class="title" v-html="item.html||item.name"></span>
                                <i class="iconfont icon-arrow-down" v-if="item.children"></i>
                            </div>
                        </template>
                    </template>
                </li>
                <li v-if="item.type=='split'"><div class="line"></div></li>                
            </template>
            
            
            <li>
                <template v-if="sysUserInfo.children&&sysUserInfo.children.length">
                    <div class="item" @mouseenter="handleFuncMenus(sysUserInfo,$event)">
                        <div class="tip">
                            <i class="iconfont" :class="sysUserInfo.iconClass"></i>
                        </div>
                        <span class="title" v-html="sysUserInfo.html||sysUserInfo.name"></span>
                        <i class="iconfont icon-arrow-down" v-if="sysUserInfo.children"></i>
                    </div>
                </template>
            </li>
            <li><div class="line"></div></li>
            <li v-if="hasSetting">
                <div class="item" :title="$lang('customWorkbench')||'自定义工作台'">
                    <a href="#design" target='_blank'><i class="iconfont icon-set-fill"></i></a>   
                </div>
            </li>
            <li>
                <div class="item" :title="$lang('logout')||'退出系统'">
                    <a @click="handleLogout"><i class="iconfont icon-tuichu"></i></a>    
                </div>
            </li>
        </ul>
        <vueContextMenu ref="cmp-funcMenu" :menu-items="menuItems" field="name"></vueContextMenu>
        <modifyPw></modifyPw>
    </div>
</template>
<script>
import pinyin from 'js-pinyin';//ie 下有问题 编译不过
 
import vueContextMenu from "@main/components/contextMenu";
import modifyPw from "@main/views/layout/components/modifyPw";
import allFuncMenu from './allFuncMenu'
import {changeBz} from "@main/api/user";

import { removeToken } from '@main/utils/auth'
import def_sy_loading from "@main/assets/logo_max.png"
import def_sy_minLogo from "@main/assets/logo_min.png"
import def_sy_logo from "@main/assets/logo.png"
import def_sy_logo_horizon from "@main/assets/logo_horizon.png"

export default {
    components:{
        vueContextMenu,
        modifyPw,
        allFuncMenu,
    },
    inject:['addTab','showTab','hideTab'],
    props:{
        hasTitle:{
            type: Boolean,
        },
        logoWidth:{
            type: String,
        }
    },
    data(){
        return {
            menuItems:[],
            searchWord:"",
            searchList:[],
            seldIndex:0,
            menuShow:false,
            searchMenusStyle:{
                display:'none',
                left:0,
                top:0,
                width:0,
                // maxHeight:'50%',
                // overflow:'auto'
            },
            sysListStyle:{
                display:'none',
                left:0,
                top:0,
            },
            latelyUseStyle:{
                display:'none',
                left:0,
                top:0,
                maxHeight:'50%',
                overflow:'auto'
            },
            def_sy_minLogo:def_sy_minLogo,
            def_sy_logo:def_sy_logo,
            def_sy_logo_horizon:def_sy_logo_horizon,
            numTipTimer:null,
            showAllFuncBtn:window.customSysCofig.isShowAllFunc===false?false:true,
            isShowAllFuncMenu:false,
            allFuncBtnObj:{},
        }
    },  
    computed:{
        hasSetting(){
            let cfg = this.$store.state.app.config||{};
            return cfg.sysSetTabs&&cfg.sysSetTabs.length;
        },
        sysList(){
            let cfg = this.$store.state.app.config||{};
            return cfg.sysList||[];
        },
        sysUserInfo(){
            let me=this;
            let cfg = this.$store.state.app.config||{};
            function replaceData(str){
                if(!str)return ['',false];
                var _arr=str.match(/\${(\S*?)}/g);
                var nullNum=0;

if(_arr&&_arr.length>0){
                    for(let i of _arr){
                        var _data=me.userInfo[i.match(/\${(\S*)}/)[1]];
                        if(typeof(_data)!="undefined"){
                            str=str.replace(i,_data);
                        }else{
                            str=str.replace(i,"空");
                            nullNum++;
                        }
                    }
                    return [str,nullNum==_arr.length?false:true];
                }
                return [str,true];
            }
            let _userInfo=cfg.userInfo;
            if(_userInfo){
                _userInfo.name=replaceData(_userInfo.name)[0];
                if(_userInfo.children&&_userInfo.children.length>0){
                    _userInfo.children=_userInfo.children.filter((item)=>{
                        let _rData=replaceData(item.name);
                        item.name=_rData[0];
                        switch(item.type){
                            case "modifyUserInfo":
                                item.handler=me.modifyUserInfo;
                                break;
                            case "modifyPw":
                                item.handler=me.modifyPw;
                                break;
                            case "orgBz":
                                if(Array.isArray(me.bzList)&&me.bzList.length>1){
                                    item.children=[];
                                    for(let i of me.bzList){
                                        item.children.push({
                                            iconClass:'icon-user',
                                            name:`${i.fbzname}/${i.fbzid}`,
                                            handler:function(){
                                                me.__changeOrgBz(`${i.fbzid}`);
                                            }
                                        });
                                    }
                                }
                                break;
                        }
                        if(_rData[1]){
                            return item;
                        }
                    });
                }
            }
            return _userInfo||[];
        },
        sysProjectManage(){
            let cfg = this.$store.state.app.config||{};
            let  item = cfg.sysProjectMange||{},flag=false;
            this.$store.state.app.powerList.forEach(p=>{
                if(p.resUrl.indexOf(item.uri)>-1){
                    flag = true;
                    return true;
                }                        
            });
            if(flag){
                return cfg.sysProjectMange;
            }else{
                return null;
            }
        },
        sysFuncMenus(){            
            let cfg = this.$store.state.app.config||{};
            let menus = cfg.sysFuncMenus||[];
            return menus;
        },
        logoOpt(){
            let cfg = this.$store.state.app.config||{};
            return (this.layout=="level"&&cfg.sysLogoHorizon?cfg.sysLogoHorizon:cfg.sysLogo)||{};
        },
        MlogoOpt(){
            let cfg = this.$store.state.app.config||{};
            return cfg.MsysLogo||{};
        },
        layout(){
            return window.localStorage.getItem('layout');
        },
        navsLatelyUse(){
            return this.$store.getters.navsLatelyUse;
        },
        token(){
            return this.$store.getters.token;
        },
        userInfo(){
            return this.$store.state.user.userInfo;
        },
        bzList(){
            return this.$store.state.user.bzList;
        },

},
    watch:{ 
        searchWord(newVal,oldVal){
            this.seldIndex=0;
            this.doSearch(newVal);
        }
    },
    mounted(){ 
        let me=this;
        document.addEventListener('click',me.hideSeachResult);
        me.$store.dispatch("app/getSysConfig");
        me.sysFuncMenus.filter(item=>{
            if(item.type=="withNumTips"&&item.numFunc){
                function __intervalFunc(){
                    item.numFunc().then(res=>{
                        me.$set(item,"tipNum",res.num);
                        if(res.num){
                            window.SysPage.notificationFunc("消息提示",item.messageText(res),()=>{
                                me.handleFuncMenus(item);
                            });
                        }
                    }).catch(err=>{
                        clearInterval(me.numTipTimer);
                    });
                }
                clearInterval(me.numTipTimer);
                me.numTipTimer=setInterval(__intervalFunc,item.numIntervalTime||1000*30);
                __intervalFunc();
            }
        });
        me.allFuncBtnObj=(me.layout == 'level')&&me.showAllFuncBtn&&me.$refs.allFuncBtn.getBoundingClientRect();
        
    },
    beforeDestroy(){
        document.removeEventListener('click',this.hideSeachResult)
    },
    methods:{
        openDesign(){
            this.$refs['cmp-dd'].show();
        },
        doSearch(cnKey){
            if(cnKey==""){                
                this.hideSeachResult();
                return;
            }
            this.showSeachResult();
            let list = [],
                records = this.$store.getters.menusList;
             let py = pinyin.getCamelChars(cnKey).toLocaleLowerCase();
            console.log('records', records)
            //let py = Scp.String.getPinyin(cnKey).toLocaleLowerCase();

// this.addTab(item.resUrl,item.name,item.resId);
                this.addTab(item);//inject 提供的方法只能 传一个参数
                this.searchWord = "";
                this.seldIndex = 0;
                this.hideSeachResult();
            }
        },
        showSeachResult(){
            this.searchMenusStyle.display ='block';
            let s = this.$refs["dom-searchBox"];
            let rect = s.getBoundingClientRect();
            this.searchMenusStyle.left = rect.left+'px';
            this.searchMenusStyle.top = rect.top + rect.height + 5 +'px';
            this.searchMenusStyle.width = rect.width+'px';
            this.searchMenusStyle.opacity = '1';
        },
        hideSeachResult(){
            this.searchMenusStyle.display ='none';
        },
        handleChangeSys(item){
            if(!item.url)return;
            if(item.target=="_blank"){
                window.open(item.url)
            }else{
                window.location.href=item.url;
            }
        },
        handleShowSysList(){
            this.sysListStyle.display ='block';
            let s = this.$refs["dom-sysList"];
            let rect = s.getBoundingClientRect();
            this.sysListStyle.left = rect.left+'px';
            this.sysListStyle.top = rect.top + rect.height  +'px';
        },
        handleHideSysList(){
            this.sysListStyle.display ='none';
        },
        handleFuncMenus(item,$event){
            $event&&$event.stopPropagation();
            if(item.type== "link"){
                window.open(item.resUrl,item.name);
                return;
            }
            var _url=item.url;
            if(item.type== "widthToken"||item.type== "withToken"){
                _url=item.url+"&access_token="+this.token;
            }
            if(item.url){
                item.target=='tab'? this.addTab({
                    resUrl:_url,
                    name:item.name,
                    resId:item.id,
                }) : window.open(_url);
                return
            }else{
                item.handler&&item.handler();
            }
            if(item.children&&item.children.length){
                this.menuItems = item.children;
                this.$refs['cmp-funcMenu'].open($event)
            }
        },
        async handleLogout(){
                await this.$store.dispatch("user/logout").then(()=>{
                    //removeToken();
                    if(window.HIVUI_SETTING.isSingleLogin&&window.HIVUI_SETTING.singleLogoutUrl){
                        location=window.HIVUI_SETTING.singleLogoutUrl;
                    }else{
                        location=window.HIVUI_SETTING.loginUrl;
                    }
                });
        },
        handleShowLatelyUse(){
            this.$store.dispatch('app/getLatelyUse')//最近使用 
            let s = this.$refs["dom-latelyUse"];
            let rect = s.getBoundingClientRect();
            this.latelyUseStyle.display ='block';
            this.latelyUseStyle.left = rect.left+'px';
            this.latelyUseStyle.top = rect.top + rect.height  +'px';
            this.latelyUseStyle.opacity = '1';
        },
        handleHideLatelyUse(){
            this.latelyUseStyle.display ='none';
        },
        handleOpenLatelyFunc(item){      
            if(item.type== "link"){
                window.open(item.resUrl,item.name);
                return;
            }
            this.addTab({
                resUrl:item.resUrl,
                name:item.name
            });//inject 提供的方法只能 传一个参数
        },   
        hideTitle(name){
            this.$emit('hideTitle', name);
        },
        //切岗
        __changeOrgBz(bzid){
            changeBz({
                bzid:bzid
            }).then(res=>{
                window.location.reload();
            });
        },
        modifyPw(){
            this.$store.dispatch("user/showPwDialog",true);
        },
        modifyUserInfo(){
            
        },
        //全部功能弹窗
        allFuncTrigger(){
            let me=this;
            me.isShowAllFuncMenu=me.isShowAllFuncMenu?false:true;
            if(me.isShowAllFuncMenu){
                me.$refs.allFuncMenu.showBox();
            }else{
                me.$refs.allFuncMenu.hideBox();
            }
        },
        allFuncTriggerOpen(){
            let me=this;
            me.$refs.allFuncMenu.showBox();
        },
        allFuncTriggerClose(){
            let me=this;
            me.$refs.allFuncMenu.hideBox();
        },
    }
}
</script>
<style lang="less" scoped>
    .pl-header{
        z-index: 99;
    }
</style>

},
    watch:{ 
        searchWord(newVal,oldVal){
            this.seldIndex=0;
            this.doSearch(newVal);
        }
    },
    mounted(){ 
        let me=this;
        document.addEventListener('click',me.hideSeachResult);
        me.$store.dispatch("app/getSysConfig");
        me.sysFuncMenus.filter(item=>{
            if(item.type=="withNumTips"&&item.numFunc){
                function __intervalFunc(){
                    item.numFunc().then(res=>{
                        me.$set(item,"tipNum",res.num);
                        if(res.num){
                            me.$notify.info({
                                title: '消息提示',
                                //message: '您有'+res.num+'条未读消息',
                                message: item.messageText(res),
                                position: 'bottom-right',
                                onClick:(evt)=>{
                                    me.handleFuncMenus(item);
                                }
                            });
                        }
                    }).catch(err=>{
                        clearInterval(me.numTipTimer);
                    });
                }
                clearInterval(me.numTipTimer);
                me.numTipTimer=setInterval(__intervalFunc,item.numIntervalTime||1000*30);
                __intervalFunc();
            }
        });
        me.allFuncBtnObj=(me.layout == 'level')&&me.showAllFuncBtn&&me.$refs.allFuncBtn.getBoundingClientRect();
        
    },
    beforeDestroy(){
        document.removeEventListener('click',this.hideSeachResult)
    },
    methods:{
        openDesign(){
            this.$refs['cmp-dd'].show();
        },
        doSearch(cnKey){
            if(cnKey==""){                
                this.hideSeachResult();
                return;
            }
            this.showSeachResult();
            let list = [],
                records = this.$store.getters.menusList;
             let py = pinyin.getCamelChars(cnKey).toLocaleLowerCase();
            console.log('records', records)
            //let py = Scp.String.getPinyin(cnKey).toLocaleLowerCase();

Ignore Space Show notes View project/hivuiMain/views/layout/components/Main.vue
<template> <div class="pl-main"> <p-tabs ref="cmp-tabs" v-model="defTabKey" @onActiveTab="handleActiveTab" @onRemoveTab="handleRemoveTab" @onRemoveAllTab="handleRemoveAllTab" @onRemoveLeft="handleRemoveLeftTab" @onRemoveRight="handleRemoveRightTab" @onRemoveOther="handleRemoveOtherTab" @onFullScreen="handleFullScreen" :isSinglePage="sysConfig.isSinglePage" > <p-tabpanel v-for="(item,index) in tabList" :key="item.id" :close="item.close" :title.sync="item.title" :name="item.id" :url="item.url" :itemData="item" @onIframeLoad="handleIframeLoad" @onBeforeClose="handleBeforeClose" @onSelected="handleSelected" @onBeforeRefresh="handleBeforeRefresh" > <template v-if="item.type&&item.type=='home'"> <PortalSys :itemData="item" ref="protalSysHome" ></PortalSys> </template> <template v-if="item.type&&item.type=='work'"> <PortalUser :itemData="item" ref="portalUserWork" ></PortalUser> </template> </p-tabpanel> </p-tabs> <el-dialog class="miniLoginBox" width="410px" :visible.sync="isMiniLogin" :close-on-click-modal="false"> <iframe v-if="isMiniLogin" width="100%" height="380px" :src="miniLoginUrl" style="border:none;"></iframe> </el-dialog> </div> </template> <script> import {changeBz} from "@main/api/user"; import { baseURL, codeProjectName,requestUrl } from "@main/config"; import { PTabs, PTabpanel } from "@main/components/tabpanel"; import PortalUser from "@main/views/Portal/user"; import PortalSys from "@main/views/Portal/sys"; import { getUrlValue, setUrlValue,getUrlSearch,closeWindow,notificationFunc } from "@main/utils"; import { getToken } from '@main/utils/auth' // import { type } from "os"; import md5 from "js-md5"; import { utils } from "hi-ui"; export default { inject: ["addTab", "showTab", "hideTab"], components: { PTabs, PTabpanel, PortalUser, PortalSys, }, data() { let cfg = this.$store.state.app.config \|\| {}; let defTabs = cfg.sysDefTabs \|\| []; let setTabs = cfg.sysSetTabs \|\| []; let list = [], defTabKey = ""; defTabs = setTabs.concat(defTabs); defTabs.map((item, i) => { if(!window._global){//正式环境 item.url=utils.string.setUrlValue(item.url,"pn",window.HIVUI_SETTING.projectName); item.url=utils.string.setUrlValue(item.url,"access_token",getToken()); } let id = item.url ? md5(item.url) : item.id; //强转成 url md5 id // if(cfg.isSinglePage){//单页面模式 // id="123456789"; // } item.actived && (defTabKey = id); if (item.url && getUrlValue(item.url, "__tabId") == "") { //关系到用户调用，防止Scp.context.closeCurPage取不到__tabId出错 item.url = utils.string.setUrlValue(item.url, "__tabId", id); } /if(cfg.isSinglePage){ list[0]={ title: item.title, url: item.url, close: item.close, id: id, type: item.type, }; }else/{ list.push({ title: item.title, url: item.url, close: item.close, id: id, type: item.type, }); } }); console.log('page default open tabs :',defTabs); //系统菜单后台默认配激活 let menusDef2Tabs = this.$store.getters.defTabs, uriStr = ""; console.log('menus default open tabs :',defTabs); menusDef2Tabs.map((item, i) => { //uriStr = baseURL + codeProjectName + item.resUrl; uriStr = item.resUrl; if(!window._global){//正式环境 uriStr=utils.string.setUrlValue(uriStr,"pn",window.HIVUI_SETTING.projectName); uriStr=utils.string.setUrlValue(uriStr,"access_token",getToken()); } if(uriStr.indexOf("http")==-1){ uriStr=location.origin+uriStr; } let id = md5(uriStr); uriStr = utils.string.setUrlValue(uriStr, "__tabId", id); list.push({ title: item.name, url: uriStr, close: true, id: id, type: item.type, }); }); // console.log('系统菜单',list); //第三方跳转过来地址自动打开功能tab let menusList = this.$store.getters.menusList; let searchObj = getUrlSearch(decodeURIComponent(this.$router.currentRoute.fullPath)); for (let i = menusList.length - 1; i >= 0; i--) { if ((menusList[i].type=="func"\|\|menusList[i].type=="flow" )&& (searchObj.portal_func&&menusList[i].resUrl)&&searchObj.portal_func == menusList[i].resUrl) { console.log('跳转进来的功能：',searchObj.portal_func); //?portal_func=/project/rjwhzx/rjzcgl/funcdir/zcmcx.func&id=11111 delete searchObj.portal_func; // let uriStr = baseURL + codeProjectName + menusList[i].resUrl; let uriStr = menusList[i].resUrl; if(!window._global){//正式环境 uriStr=utils.string.setUrlValue(uriStr,"pn",window.HIVUI_SETTING.projectName); uriStr=utils.string.setUrlValue(uriStr,"access_token",getToken()); } if(uriStr.indexOf("http")==-1){ uriStr=location.origin+uriStr; } let id = md5(uriStr); uriStr = utils.string.setUrlValue(uriStr, "__tabId", md5(uriStr)); for(let key in searchObj){ uriStr = utils.string.setUrlValue(uriStr,key,searchObj[key]); } let inMenu = false; for (let j = list.length - 1; j >= 0; j--) { if (list[j].id == id) { inMenu = true; break; } } if (inMenu) break; defTabKey = id; list.push({ id: id, title: menusList[i].name, url: uriStr, close: true, actived:true //默认选中 }); break; } } if(cfg.isPageCache&&window.localStorage.getItem('pageCacheArr')){ JSON.parse(window.localStorage.getItem('pageCacheArr')).map((item,index)=>{ uriStr = item.url; if(!window._global){//正式环境 uriStr=utils.string.setUrlValue(uriStr,"pn",window.HIVUI_SETTING.projectName); uriStr=utils.string.setUrlValue(uriStr,"access_token",getToken()); } if(uriStr.indexOf("http")==-1){ uriStr=location.origin+uriStr; } let id = md5(uriStr); uriStr = utils.string.setUrlValue(uriStr, "__tabId", id); defTabKey = id; list.push({ title: item.title, url: uriStr, close: true, id: id, //type: item.type, }); }); } //地址栏打开标签 if(top.location.hash){ let hashTabParam={}; top.location.hash.replace("#/","").split("&zhc&").forEach((item=>{ if(item.indexOf("tabUrl=")==0){ hashTabParam.resUrl=item.replace("tabUrl=",""); }else if(item.indexOf("tabTitle=")==0){ hashTabParam.name=decodeURIComponent(item.replace("tabTitle=","")); } })); if(hashTabParam.resUrl){ if(hashTabParam.resUrl.indexOf("about:blank")==-1){//下推页面无法重新载入 //消除tabId干扰 let tabIdStr=hashTabParam.resUrl.match(/\__tabId=.?&/)\|\|hashTabParam.resUrl.match(/\?__tabId=./); if(tabIdStr&&tabIdStr[0]){ hashTabParam.resUrl=hashTabParam.resUrl.replace(tabIdStr[0],"").replace("?&","?"); } let id = md5(hashTabParam.resUrl); let existsItem=list.filter(item=>{//标签已存在 if(item.url&&hashTabParam.resUrl){ let itemMainUrl=item.url.split("?")[0]; let hashTabMainUrl=hashTabParam.resUrl.split("?")[0]; if(hashTabParam.resUrl.indexOf(itemMainUrl)!=-1){ return item; } } }); if(!existsItem[0]){ defTabKey = id; hashTabParam.resUrl = utils.string.setUrlValue(hashTabParam.resUrl, "__tabId", id); list.push({ title: hashTabParam.name, url: hashTabParam.resUrl, close: true, id: id, actived:true //默认选中 }); }else{ defTabKey=existsItem[0].id; } } } } console.log('sys default tabs :', list); return { defTabKey: defTabKey \|\| "", tabList: list, sysConfig: this.$store.state.app.config, isFullScreen: false, isMiniLogin:false, miniLoginUrl:"", }; }, mounted() { // console.log('主界面初始化~！'); let me = this, cTabs = this.$refs["cmp-tabs"]; window.Sys = { isVue: true, addEvent(evtName, fn) { //onLoad Bus.$on(evtName, fn); }, tabPanel: { autoResize() { cTabs.resize(); }, }, getSideNavs() { return [...me.$store.getters.navs]; }, setSideNavs(data) { if (data == null && !(data instanceof Array)) return; //me.$store.dispatch("app/setQuickNav", data); }, /** * @param {} url * @param {} title * @param {} uid * @param {} onLoad //iframe 加载后 * @param {} nearest //标签页是否紧接在其右侧打开 * @param {} renderedFn //渲染回调 / addTab(url, title, uid, onLoad, nearest, renderedFn) { // if(me.sysConfig.isSinglePage){//单页面模式 // uid="123456789"; // }else if(me.sysConfig.isPageCache){//页面标签缓存模式 let _pcarr=window.localStorage.getItem('pageCacheArr'); let cacheArr=_pcarr?JSON.parse(_pcarr):[]; cacheArr=cacheArr.filter((item)=>{ if(url!=item.url){ return item } }); cacheArr.push({ "url":url, "title":title, }); if(cacheArr.length>20){ cacheArr.shift(); } window.localStorage.setItem('pageCacheArr',JSON.stringify(cacheArr)); } if (!(url == "" \|\| url == "about:blank")) { uid = md5(url); } if(!window._global){//正式环境 url=utils.string.setUrlValue(url,"pn",window.HIVUI_SETTING.projectName); url=utils.string.setUrlValue(url,"access_token",getToken()); } let tabs = me.tabList.filter((item, index) => { if(item.id == uid){ item.title=title; return item; } }); if (tabs.length/&&!me.sysConfig.isSinglePage/) { me.defTabKey = uid; me.$nextTick( (function (fn) { return function () { let tab = cTabs.getItemObj(uid); fn && fn(tab); }; })(renderedFn) ); return; } if (getUrlValue(url, "__tabId") == "") { //关系到用户调用，防止Scp.context.closeCurPage取不到__tabId出错 url = utils.string.setUrlValue(url, "__tabId", uid); } /if(me.sysConfig.isSinglePage){ me.tabList.pop(); me.$nextTick(()=>{ me.tabList.push({ title: title, url: url, close: true, id: uid, listeners: { load: onLoad, }, }) }) }else{/ me.tabList.push({ title: title, url: url, close: true, id: uid, listeners: { load: onLoad, }, }); //} me.defTabKey = uid; // window.____renderFunc = renderedFn; me.$nextTick( (function (fn, _uid) { return function () { let tab = cTabs.getItemObj(_uid); fn && fn(tab); }; })(renderedFn, uid) ); console.log(' addTab ',me.tabList); }, getTab(uid) { return cTabs.getItemObj(uid); }, seldTab(uid) { cTabs.defTabKey = uid; }, getSeldTab() { return cTabs.getSeldItemObj(); }, refreshTab(uid) { let tab = cTabs.getItemObj(uid); tab && tab.tabPanelIframeEl.contentWindow.window.location.reload(); }, //closeTab colseTab(uid) { cTabs.closeItem(uid); }, colseSeldTab() { cTabs.closeCurItem(); }, }; window.SysPage={ newPage : function(title, url, params, method, target) { var uid , tab; if(params&&params._ftaskguid){ uid=md5(url+"?tguid="+params._ftaskguid); }else if(params&&params.__viewItemId&&!target){ uid=md5(url+"?vItemId="+params.__viewItemId); }else{ uid=md5(url); } function formSubmit(cfg){ cfg.autoDestroy = true; var form = me.creatForm(cfg); form.submit(); } if(method=="get"){ //get 不刷新 var tab = top.Sys.getTab(uid); if(tab){ top.Sys.seldTab(uid); return; } } if(target=="opening"){ var cfg = { url : utils.string.setUrlValue(url,"__tabId",uid), data : params, target : '_blank', method : method \|\| "get" }; formSubmit(cfg); //打开新标签 return; }else if(target=="me"){ //本页：框架页的本页面 var cfg = { url : url, data : params, target : '_self', method : method \|\| "get" }; formSubmit(cfg); }else{ if (target == "_self"){ tab = top.Sys.getSeldTab(); if(top.Sys.isVue){ var titleEl = tab.tabEl.querySelector('.pl-tabs-itemTxt'); titleEl.innerText = ""; }else{ tab.tabEl.find('.sys-tab-item-text').html(""); } }else{ /** * uid 让框架页可以关闭自己 closeCurPage / if(top.Sys.isVue){ //6个参数，第7个是vue渲染后回调 if(target == "_blank"){ uid+=utils.string.id(4); } top.Sys.addTab("about:blank",title,uid,null,true,function(tab){ if(!window._global){//正式环境 url=utils.string.setUrlValue(url,"pn",window.HIVUI_SETTING.projectName); url=utils.string.setUrlValue(url,"access_token",getToken()); } var cfg = { url : utils.string.setUrlValue(url,"__tabId",uid), data : params, target : null, method : method \|\| "get" }; //var titleEl = tab.tabEl.querySelector('.pl-tabs-itemTxt'); //titleEl.innerText = ""; cfg.target = tab.tabPanelIframeEl.getAttribute('name'); formSubmit(cfg); }); }else{ var cfg = { url : utils.string.setUrlValue(url,"__tabId",uid), data : params, target : null, method : method \|\| "get" }; //Sys.addTab(url, title, uid, callback) tab = top.Sys.addTab("about:blank",title,uid); tab.tabEl.find('.sys-tab-item-text').html(""); cfg.target = tab.tabPanelIframeEl.getAttribute('name'); formSubmit(cfg); } } } }, /* * 通过url 进行对应的目标功能调用目标页的callback方法 * @param id * @param url / closePage : function(id,url) { if (!top.Sys) { closeWindow() return; } var uid = md5(url\|\|""), tab; if(!window.parent.Sys){ return; } var tab = window.parent.Sys.getTab(uid); if(tab){ window.parent.Sys.seldTab(uid); //var _scp = tab.tabPanelIframeEl.contentWindow.window.Scp; //if(_scp){ // _scp.context&&_scp.context.callback&&_scp.context.callback.call(_scp.context); //} }else{ if(url&&url.trim()!=""){ var tab = window.parent.Sys.addTab(url,"",null,null,true); } } if (id) { window.parent.Sys.colseTab(id); }else{ window.parent.Sys.colseSeldTab(); } }, closeCurPage:function(){ if(!window.parent.Sys){ return; } var id = getUrlValue(window.location.search,'__tabId'); window.parent.Sys.colseTab(id); }, setPageTitle:function(title){ if(!window.parent.Sys){ return; } var openway = getUrlValue('','openway'); if(openway=="openwin")return; var tab = window.parent.Sys.getSeldTab(); if(title!=""){ tab.tabEl.find('.sys-tab-item-text').html(title); window.parent.Sys.tabPanel.autoResize(); } }, //小登录弹窗打开 openMiniLogin:function(isRefresh){ if(window.HIVUI_SETTING.isSingleLogin\|\|me.isMiniLogin){ return; } me.isMiniLogin=true; let params="questType=ajax"+(isRefresh?"&isRefresh=true":"")+"#"; let __login=window.HIVUI_SETTING.loginUrl.split("#"); me.miniLoginUrl=__login[0]+(__login[0].indexOf("?")==-1?"?":"&")+params+(__login[1]\|\|"")+"miniLogin"; }, //小登录弹窗关闭 closeMiniLogin:function(isRefresh){ me.isMiniLogin=false; changeBz({ bzid:me.$store.state.user.userInfo.fbzid }); let tabId=location.href.match(/\?__tabId=.?&/)[0].replace("?__tabId=","").replace("&",""); if(isRefresh&&tabId){ document.querySelector("iframe[name='iframe"+tabId+"']").contentWindow.location.reload(); } }, //消息通知 notificationFunc:notificationFunc, }; if (this.defTabKey == "" && this.tabList.length) this.defTabKey = this.tabList[0].id; //默认如果指向下面两个的话，标识一下已经加载过 if (this.$refs["protalSysHome"]) { //this.$store.dispatch("portal/loadSysList"); //重新加载系统门户列表 // console.log('加载系统门户列表~！'); let itemData = this.$refs["protalSysHome"][0].itemData; if (itemData.id == this.defTabKey) { this.$refs["protalSysHome"][0].actived = true; } } if (this.$refs["portalUserWork"]) { //this.$store.dispatch("portal/loadList"); //重新加载工作台门户列表 // console.log('加载工作台门户列表~！'); let itemData = this.$refs["portalUserWork"][0].itemData; if (itemData.id == this.defTabKey) { this.$refs["portalUserWork"][0].actived = true; } } let events = this.sysConfig.events; if (events) { this.$nextTick((r) => { events.onLoad && events.onLoad(); }); } }, methods: { //将框架页里头的a 标签进行转换 initATagUrl(el) { let aList = el.querySelectorAll("a"); aList.forEach(function (aTag, i) { if (aTag.href) { var httpUrl = new RegExp( "^((https\|http\|ftp\|rtsp\|mms)?://)" ); if ( httpUrl.test( aTag.href.replace(window.location.origin, "") ) ) { return false; } if (!aTag.onclick) { if (aTag.target == "_blank") { aTag.addEventListener("click", function (evt) { evt.preventDefault(); evt.stopPropagation(); var tabTitle = ""; if (aTag.title) { tabTitle = aTag.title; } var url = this.getAttribute("href"); var reg = /^\//gi; Sys.addTab(url, tabTitle, "", "", true); return false; }); } } } }); window.Sys.tabPanel.autoResize(); }, handleBeforeRefresh(panel, evt) { //if (panel.itemData.type == "home") { // this.$store.state.app.sysList=[]; //this.$store.dispatch("portal/loadSysList"); //重新加载系统门户列表 //return false; //} if (panel.itemData.type == "work") { // this.$store.state.app.list=[]; //this.$store.dispatch("portal/loadList"); //重新加载工作台门户列表 return false; } }, handleIframeLoad(panelCmp, evt) { let me = this, key = panelCmp.name; let ifm = panelCmp.$refs["iframe"]; let tabData = panelCmp.itemData; if (tabData.listeners) { tabData.listeners.load && tabData.listeners.load(); } //转换A标签 me.initATagUrl(ifm.contentWindow.document.body); window.__UserInfo = { orgId: "", operator: "", }; if (panelCmp.title == null \|\| panelCmp.title == "") { let cTabs = me.$refs["cmp-tabs"]; cTabs.resize(); } }, handleBeforeClose(panel, evt) { let ifm = panel.$refs["iframe"]; try { let flag = ifm.contentWindow.Scp.context.beforeunloadFn(evt, 1); return flag; } catch (e) { !document.all && window.console.log( "iframe : Scp.context.beforeunloadFn();" ); } }, handleActiveTab(panel) { if (!panel) return; top.location.hash="#/tabUrl="+panel.url+"&zhc&tabTitle="+panel.title; if (panel.itemData.type == "home") { this.$refs["protalSysHome"][0].doRender(); } if (panel.itemData.type == "work") { this.$refs["portalUserWork"][0].doRender(); } try { let tab = this.$refs["cmp-tabs"].getItemObj(panel.name); //tab.tabPanelIframeEl.contentDocument.trigger("iframeActiving", [panel.name]); tab.tabPanelIframeEl.contentDocument.dispatchEvent( new CustomEvent('iframeActiving', { detail:[panel.name] } ) ); } catch (e) { console.log("iframeActiving error!"); } }, //面板上面的事件特别处理，现在暂时没用 handleSelected(item) { return; let key = item.id; let ifm = this.$refs["dom-iframe" + key][0]; try { let __orgId = ifm.contentWindow.Scp.User.getId(); let __operator = ifm.contentWindow.Scp.User.getOperator(); window.__UserInfo = { orgId: __orgId, operator: __operator, }; } catch (e) {} }, handleRemoveTab(targetName) { let tabs = this.tabList; let activeName = this.defTabKey; if (activeName === targetName) { tabs.forEach((tab, index) => { if (tab.close && tab.id === targetName) { let nextTab = tabs[index + 1] \|\| tabs[index - 1]; if (nextTab) { activeName = nextTab.id; } } }); } this.defTabKey = activeName; tabs = tabs.filter((tab) => { return tab.close == false \|\| tab.id !== targetName; }); console.log('handleRemoveTab') this.$set(this, "tabList", tabs); if (this.tabList.length == 0) { this.defTabKey = "tabPanel_home"; } }, handleRemoveAllTab() { let tabs = this.tabList; this.tabList = tabs.filter((tab) => { return !tab.close; }); let l = this.tabList.length; this.defTabKey = l ? this.tabList[l - 1].id : ""; }, handleRemoveLeftTab(name, index) { let tabs = this.tabList; let defTabKey = this.defTabKey; this.tabList = tabs.filter((tab, i) => { if (tab.id == defTabKey && i < index) { //当前的选中，是在关闭区内 defTabKey = name; } return tab.close == false \|\| i >= index; }); this.defTabKey = defTabKey; }, handleRemoveRightTab(name, index) { let tabs = this.tabList; let defTabKey = this.defTabKey; this.tabList = tabs.filter((tab, i) => { if (tab.id == defTabKey && i > index) { //当前的选中，是在关闭区内 defTabKey = name; } return tab.close == false \|\| i <= index; }); this.defTabKey = defTabKey; }, handleRemoveOtherTab(name, index) { let tabs = this.tabList; tabs = tabs.filter((tab, i) => { return tab.close == false \|\| i == index; }); this.$set(this, "tabList", tabs); this.defTabKey = name; }, handleFullScreen() { this.$emit("onFullScreen"); // screenfull.toggle() }, creatForm(opt){ let that=this; var _opt={ autoShow:false, cancelAction:false, url:null, target:null, action:null, method:null, params:null, data:null, autoDestroy:false, _id:utils.string.id(8), }; Object.assign(_opt,opt); var _formTpl=`<form style="display:none;" id="${_opt._id}"><input type="submit" value="submit" id="submit_${_opt._id}"/></form>`; var _el=document.createElement("div"); _el.innerHTML=_formTpl; document.getElementsByTagName("body")[0].appendChild(_el); var _form=_el.getElementsByTagName("form")[0]; this.setTarget=(str)=>{ _opt.target = str; _form.setAttribute('target',str); } this.setUrl=(str)=>{ this.formateUrl(str); var url = utils.string.setUrlValue(_opt.url,"_____r",new Date().getTime()); _form.setAttribute('action',url); } this.setMethod=(str)=>{ _opt.method = str\|\|'get'; _form.setAttribute('method',str); } this.setParams=(params)=>{ _opt.params = params; } this.setData=(obj)=>{ _opt.data = obj\|\|{}; if(_opt.method=="get"&&_opt.url!=null){ var parms =_opt.url.split("?")[1], item,i=0,len; if(parms!=null){ parms = parms.split("&"); for(i=0,len=parms.length;i<len;i++){ item = parms[i].split("="); _opt.data[item[0]]=item[1]; } } } _.each(_opt.data,function(value,key){ if(_.isObject(value)){ value = JSON.stringify(value); } var _hiddenInput=document.createElement("input"); _hiddenInput.setAttribute("type","hidden"); _form.appendChild(_hiddenInput); _hiddenInput.setAttribute('name',key); _hiddenInput.setAttribute('value',value); }); } this.removeData=()=>{ _opt.data = null; _form.children().remove(); } this.addData=(data)=>{ _opt.data = _.extend({},_opt.data\|\|{},data\|\|{}); _form.children().remove(); this.setData(_opt.data); } this.delData=(keys)=>{ _.each(keys\|\|[],function(val,i){ if((val in _opt.data)){ delete _opt.data[val]; } }); _form.children().remove(); this.setData(_opt.data); } this.formateUrl=(url)=>{ var params= this.formateParams(_opt.params); if(!url)return; _opt.url = url; if(params){ if(_opt.url.indexOf('?')>0){ _opt.url+='&'+params; }else{ _opt.url+='?'+params; } } } this.formateParams=(obj)=>{ if(obj==null) return null; return $.param(obj\|\|{}); } this.submit=()=>{ if(_opt.cancelAction) return; _opt.cancelAction = false; if(_opt.autoDestroy){ setTimeout(function(){ _form.submit() //_form.find('#submit'+me.id).click();//谷歌下面要用按钮才有效果 },0); setTimeout(function(){that.destroy();},1000); }else{ _form.submit(); } } this.destroy=()=>{ _el.remove(); } this.setTarget(_opt.target); this.setMethod(_opt.method); this.setUrl(_opt.url); this.setData(_opt.data); return that; }, }, }; </script> <style lang="less" scoped> .miniLoginBox{ ::v-deep .el-dialog__body{ padding-top:0; } } </style> <template> <div class="pl-main"> <p-tabs ref="cmp-tabs" v-model="defTabKey" @onActiveTab="handleActiveTab" @onRemoveTab="handleRemoveTab" @onRemoveAllTab="handleRemoveAllTab" @onRemoveLeft="handleRemoveLeftTab" @onRemoveRight="handleRemoveRightTab" @onRemoveOther="handleRemoveOtherTab" @onFullScreen="handleFullScreen" :isSinglePage="sysConfig.isSinglePage" > <p-tabpanel v-for="(item,index) in tabList" :key="item.id" :close="item.close" :title.sync="item.title" :name="item.id" :url="item.url" :itemData="item" @onIframeLoad="handleIframeLoad" @onBeforeClose="handleBeforeClose" @onSelected="handleSelected" @onBeforeRefresh="handleBeforeRefresh" > <template v-if="item.type&&item.type=='home'"> <PortalSys :itemData="item" ref="protalSysHome" ></PortalSys> </template> <template v-if="item.type&&item.type=='work'"> <PortalUser :itemData="item" ref="portalUserWork" ></PortalUser> </template> </p-tabpanel> </p-tabs> <el-dialog class="miniLoginBox" width="410px" :visible.sync="isMiniLogin" :close-on-click-modal="false"> <iframe v-if="isMiniLogin" width="100%" height="380px" :src="miniLoginUrl" style="border:none;"></iframe> </el-dialog> </div> </template> <script> import {changeBz} from "@main/api/user"; import { baseURL, codeProjectName,requestUrl } from "@main/config"; import { PTabs, PTabpanel } from "@main/components/tabpanel"; import PortalUser from "@main/views/Portal/user"; import PortalSys from "@main/views/Portal/sys"; import { getUrlValue, setUrlValue,getUrlSearch,closeWindow } from "@main/utils"; import { getToken } from '@main/utils/auth' // import { type } from "os"; import md5 from "js-md5"; import { utils } from "hi-ui"; export default { inject: ["addTab", "showTab", "hideTab"], components: { PTabs, PTabpanel, PortalUser, PortalSys, }, data() { let cfg = this.$store.state.app.config \|\| {}; let defTabs = cfg.sysDefTabs \|\| []; let setTabs = cfg.sysSetTabs \|\| []; let list = [], defTabKey = ""; defTabs = setTabs.concat(defTabs); defTabs.map((item, i) => { if(!window._global){//正式环境 item.url=utils.string.setUrlValue(item.url,"pn",window.HIVUI_SETTING.projectName); item.url=utils.string.setUrlValue(item.url,"access_token",getToken()); } let id = item.url ? md5(item.url) : item.id; //强转成 url md5 id // if(cfg.isSinglePage){//单页面模式 // id="123456789"; // } item.actived && (defTabKey = id); if (item.url && getUrlValue(item.url, "__tabId") == "") { //关系到用户调用，防止Scp.context.closeCurPage取不到__tabId出错 item.url = utils.string.setUrlValue(item.url, "__tabId", id); } /if(cfg.isSinglePage){ list[0]={ title: item.title, url: item.url, close: item.close, id: id, type: item.type, }; }else/{ list.push({ title: item.title, url: item.url, close: item.close, id: id, type: item.type, }); } }); console.log('page default open tabs :',defTabs); //系统菜单后台默认配激活 let menusDef2Tabs = this.$store.getters.defTabs, uriStr = ""; console.log('menus default open tabs :',defTabs); menusDef2Tabs.map((item, i) => { //uriStr = baseURL + codeProjectName + item.resUrl; uriStr = item.resUrl; if(!window._global){//正式环境 uriStr=utils.string.setUrlValue(uriStr,"pn",window.HIVUI_SETTING.projectName); uriStr=utils.string.setUrlValue(uriStr,"access_token",getToken()); } if(uriStr.indexOf("http")==-1){ uriStr=location.origin+uriStr; } let id = md5(uriStr); uriStr = utils.string.setUrlValue(uriStr, "__tabId", id); list.push({ title: item.name, url: uriStr, close: true, id: id, type: item.type, }); }); // console.log('系统菜单',list); //第三方跳转过来地址自动打开功能tab let menusList = this.$store.getters.menusList; let searchObj = getUrlSearch(decodeURIComponent(this.$router.currentRoute.fullPath)); for (let i = menusList.length - 1; i >= 0; i--) { if ((menusList[i].type=="func"\|\|menusList[i].type=="flow" )&& (searchObj.portal_func&&menusList[i].resUrl)&&searchObj.portal_func == menusList[i].resUrl) { console.log('跳转进来的功能：',searchObj.portal_func); //?portal_func=/project/rjwhzx/rjzcgl/funcdir/zcmcx.func&id=11111 delete searchObj.portal_func; // let uriStr = baseURL + codeProjectName + menusList[i].resUrl; let uriStr = menusList[i].resUrl; if(!window._global){//正式环境 uriStr=utils.string.setUrlValue(uriStr,"pn",window.HIVUI_SETTING.projectName); uriStr=utils.string.setUrlValue(uriStr,"access_token",getToken()); } if(uriStr.indexOf("http")==-1){ uriStr=location.origin+uriStr; } let id = md5(uriStr); uriStr = utils.string.setUrlValue(uriStr, "__tabId", md5(uriStr)); for(let key in searchObj){ uriStr = utils.string.setUrlValue(uriStr,key,searchObj[key]); } let inMenu = false; for (let j = list.length - 1; j >= 0; j--) { if (list[j].id == id) { inMenu = true; break; } } if (inMenu) break; defTabKey = id; list.push({ id: id, title: menusList[i].name, url: uriStr, close: true, actived:true //默认选中 }); break; } } if(cfg.isPageCache&&window.localStorage.getItem('pageCacheArr')){ JSON.parse(window.localStorage.getItem('pageCacheArr')).map((item,index)=>{ uriStr = item.url; if(!window._global){//正式环境 uriStr=utils.string.setUrlValue(uriStr,"pn",window.HIVUI_SETTING.projectName); uriStr=utils.string.setUrlValue(uriStr,"access_token",getToken()); } if(uriStr.indexOf("http")==-1){ uriStr=location.origin+uriStr; } let id = md5(uriStr); uriStr = utils.string.setUrlValue(uriStr, "__tabId", id); defTabKey = id; list.push({ title: item.title, url: uriStr, close: true, id: id, //type: item.type, }); }); } //地址栏打开标签 if(top.location.hash){ let hashTabParam={}; top.location.hash.replace("#/","").split("&zhc&").forEach((item=>{ if(item.indexOf("tabUrl=")==0){ hashTabParam.resUrl=item.replace("tabUrl=",""); }else if(item.indexOf("tabTitle=")==0){ hashTabParam.name=decodeURIComponent(item.replace("tabTitle=","")); } })); if(hashTabParam.resUrl){ if(hashTabParam.resUrl.indexOf("about:blank")==-1){//下推页面无法重新载入 //消除tabId干扰 let tabIdStr=hashTabParam.resUrl.match(/\__tabId=.?&/)\|\|hashTabParam.resUrl.match(/\?__tabId=./); if(tabIdStr&&tabIdStr[0]){ hashTabParam.resUrl=hashTabParam.resUrl.replace(tabIdStr[0],"").replace("?&","?"); } let id = md5(hashTabParam.resUrl); let existsItem=list.filter(item=>{//标签已存在 if(item.url&&hashTabParam.resUrl){ let itemMainUrl=item.url.split("?")[0]; let hashTabMainUrl=hashTabParam.resUrl.split("?")[0]; if(hashTabParam.resUrl.indexOf(itemMainUrl)!=-1){ return item; } } }); if(!existsItem[0]){ defTabKey = id; hashTabParam.resUrl = utils.string.setUrlValue(hashTabParam.resUrl, "__tabId", id); list.push({ title: hashTabParam.name, url: hashTabParam.resUrl, close: true, id: id, actived:true //默认选中 }); }else{ defTabKey=existsItem[0].id; } } } } console.log('sys default tabs :', list); return { defTabKey: defTabKey \|\| "", tabList: list, sysConfig: this.$store.state.app.config, isFullScreen: false, isMiniLogin:false, miniLoginUrl:"", }; }, mounted() { // console.log('主界面初始化~！'); let me = this, cTabs = this.$refs["cmp-tabs"]; window.Sys = { isVue: true, addEvent(evtName, fn) { //onLoad Bus.$on(evtName, fn); }, tabPanel: { autoResize() { cTabs.resize(); }, }, getSideNavs() { return [...me.$store.getters.navs]; }, setSideNavs(data) { if (data == null && !(data instanceof Array)) return; //me.$store.dispatch("app/setQuickNav", data); }, /** * @param {} url * @param {} title * @param {} uid * @param {} onLoad //iframe 加载后 * @param {} nearest //标签页是否紧接在其右侧打开 * @param {} renderedFn //渲染回调 / addTab(url, title, uid, onLoad, nearest, renderedFn) { // if(me.sysConfig.isSinglePage){//单页面模式 // uid="123456789"; // }else if(me.sysConfig.isPageCache){//页面标签缓存模式 let _pcarr=window.localStorage.getItem('pageCacheArr'); let cacheArr=_pcarr?JSON.parse(_pcarr):[]; cacheArr=cacheArr.filter((item)=>{ if(url!=item.url){ return item } }); cacheArr.push({ "url":url, "title":title, }); if(cacheArr.length>20){ cacheArr.shift(); } window.localStorage.setItem('pageCacheArr',JSON.stringify(cacheArr)); } if (!(url == "" \|\| url == "about:blank")) { uid = md5(url); } if(!window._global){//正式环境 url=utils.string.setUrlValue(url,"pn",window.HIVUI_SETTING.projectName); url=utils.string.setUrlValue(url,"access_token",getToken()); } let tabs = me.tabList.filter((item, index) => { if(item.id == uid){ item.title=title; return item; } }); if (tabs.length/&&!me.sysConfig.isSinglePage/) { me.defTabKey = uid; me.$nextTick( (function (fn) { return function () { let tab = cTabs.getItemObj(uid); fn && fn(tab); }; })(renderedFn) ); return; } if (getUrlValue(url, "__tabId") == "") { //关系到用户调用，防止Scp.context.closeCurPage取不到__tabId出错 url = utils.string.setUrlValue(url, "__tabId", uid); } /if(me.sysConfig.isSinglePage){ me.tabList.pop(); me.$nextTick(()=>{ me.tabList.push({ title: title, url: url, close: true, id: uid, listeners: { load: onLoad, }, }) }) }else{/ me.tabList.push({ title: title, url: url, close: true, id: uid, listeners: { load: onLoad, }, }); //} me.defTabKey = uid; // window.____renderFunc = renderedFn; me.$nextTick( (function (fn, _uid) { return function () { let tab = cTabs.getItemObj(_uid); fn && fn(tab); }; })(renderedFn, uid) ); console.log(' addTab ',me.tabList); }, getTab(uid) { return cTabs.getItemObj(uid); }, seldTab(uid) { cTabs.defTabKey = uid; }, getSeldTab() { return cTabs.getSeldItemObj(); }, refreshTab(uid) { let tab = cTabs.getItemObj(uid); tab && tab.tabPanelIframeEl.contentWindow.window.location.reload(); }, //closeTab colseTab(uid) { cTabs.closeItem(uid); }, colseSeldTab() { cTabs.closeCurItem(); }, }; window.SysPage={ newPage : function(title, url, params, method, target) { var uid = md5((params&&params._ftaskguid)?(url+"?tguid="+params._ftaskguid):url), tab; function formSubmit(cfg){ cfg.autoDestroy = true; var form = me.creatForm(cfg); form.submit(); } if(method=="get"){ //get 不刷新 var tab = top.Sys.getTab(uid); if(tab){ top.Sys.seldTab(uid); return; } } if(target=="opening"){ var cfg = { url : utils.string.setUrlValue(url,"__tabId",uid), data : params, target : '_blank', method : method \|\| "get" }; formSubmit(cfg); //打开新标签 return; }else if(target=="me"){ //本页：框架页的本页面 var cfg = { url : url, data : params, target : '_self', method : method \|\| "get" }; formSubmit(cfg); }else{ if (target == "_self"){ tab = top.Sys.getSeldTab(); if(top.Sys.isVue){ var titleEl = tab.tabEl.querySelector('.pl-tabs-itemTxt'); titleEl.innerText = ""; }else{ tab.tabEl.find('.sys-tab-item-text').html(""); } }else{ /** * uid 让框架页可以关闭自己 closeCurPage / if(top.Sys.isVue){ //6个参数，第7个是vue渲染后回调 if(target == "_blank"){ uid+=utils.string.id(4); } top.Sys.addTab("about:blank",title,uid,null,true,function(tab){ if(!window._global){//正式环境 url=utils.string.setUrlValue(url,"pn",window.HIVUI_SETTING.projectName); url=utils.string.setUrlValue(url,"access_token",getToken()); } var cfg = { url : utils.string.setUrlValue(url,"__tabId",uid), data : params, target : null, method : method \|\| "get" }; //var titleEl = tab.tabEl.querySelector('.pl-tabs-itemTxt'); //titleEl.innerText = ""; cfg.target = tab.tabPanelIframeEl.getAttribute('name'); formSubmit(cfg); }); }else{ var cfg = { url : utils.string.setUrlValue(url,"__tabId",uid), data : params, target : null, method : method \|\| "get" }; //Sys.addTab(url, title, uid, callback) tab = top.Sys.addTab("about:blank",title,uid); tab.tabEl.find('.sys-tab-item-text').html(""); cfg.target = tab.tabPanelIframeEl.getAttribute('name'); formSubmit(cfg); } } } }, /* * 通过url 进行对应的目标功能调用目标页的callback方法 * @param id * @param url / closePage : function(id,url) { if (!top.Sys) { closeWindow() return; } var uid = md5(url\|\|""), tab; if(!window.parent.Sys){ return; } var tab = window.parent.Sys.getTab(uid); if(tab){ window.parent.Sys.seldTab(uid); //var _scp = tab.tabPanelIframeEl.contentWindow.window.Scp; //if(_scp){ // _scp.context&&_scp.context.callback&&_scp.context.callback.call(_scp.context); //} }else{ if(url&&url.trim()!=""){ var tab = window.parent.Sys.addTab(url,"",null,null,true); } } if (id) { window.parent.Sys.colseTab(id); }else{ window.parent.Sys.colseSeldTab(); } }, closeCurPage:function(){ if(!window.parent.Sys){ return; } var id = getUrlValue(window.location.search,'__tabId'); window.parent.Sys.colseTab(id); }, setPageTitle:function(title){ if(!window.parent.Sys){ return; } var openway = getUrlValue('','openway'); if(openway=="openwin")return; var tab = window.parent.Sys.getSeldTab(); if(title!=""){ tab.tabEl.find('.sys-tab-item-text').html(title); window.parent.Sys.tabPanel.autoResize(); } }, //小登录弹窗打开 openMiniLogin:function(isRefresh){ if(window.HIVUI_SETTING.isSingleLogin\|\|me.isMiniLogin){ return; } me.isMiniLogin=true; let params="questType=ajax"+(isRefresh?"&isRefresh=true":"")+"#"; let __login=window.HIVUI_SETTING.loginUrl.split("#"); me.miniLoginUrl=__login[0]+(__login[0].indexOf("?")==-1?"?":"&")+params+(__login[1]\|\|"")+"miniLogin"; }, //小登录弹窗关闭 closeMiniLogin:function(isRefresh){ me.isMiniLogin=false; changeBz({ bzid:me.$store.state.user.userInfo.fbzid }); let tabId=location.href.match(/\?__tabId=.?&/)[0].replace("?__tabId=","").replace("&",""); if(isRefresh&&tabId){ document.querySelector("iframe[name='iframe"+tabId+"']").contentWindow.location.reload(); } }, }; if (this.defTabKey == "" && this.tabList.length) this.defTabKey = this.tabList[0].id; //默认如果指向下面两个的话，标识一下已经加载过 if (this.$refs["protalSysHome"]) { //this.$store.dispatch("portal/loadSysList"); //重新加载系统门户列表 // console.log('加载系统门户列表~！'); let itemData = this.$refs["protalSysHome"][0].itemData; if (itemData.id == this.defTabKey) { this.$refs["protalSysHome"][0].actived = true; } } if (this.$refs["portalUserWork"]) { //this.$store.dispatch("portal/loadList"); //重新加载工作台门户列表 // console.log('加载工作台门户列表~！'); let itemData = this.$refs["portalUserWork"][0].itemData; if (itemData.id == this.defTabKey) { this.$refs["portalUserWork"][0].actived = true; } } let events = this.sysConfig.events; if (events) { this.$nextTick((r) => { events.onLoad && events.onLoad(); }); } }, methods: { //将框架页里头的a 标签进行转换 initATagUrl(el) { let aList = el.querySelectorAll("a"); aList.forEach(function (aTag, i) { if (aTag.href) { var httpUrl = new RegExp( "^((https\|http\|ftp\|rtsp\|mms)?://)" ); if ( httpUrl.test( aTag.href.replace(window.location.origin, "") ) ) { return false; } if (!aTag.onclick) { if (aTag.target == "_blank") { aTag.addEventListener("click", function (evt) { evt.preventDefault(); evt.stopPropagation(); var tabTitle = ""; if (aTag.title) { tabTitle = aTag.title; } var url = this.getAttribute("href"); var reg = /^\//gi; Sys.addTab(url, tabTitle, "", "", true); return false; }); } } } }); window.Sys.tabPanel.autoResize(); }, handleBeforeRefresh(panel, evt) { //if (panel.itemData.type == "home") { // this.$store.state.app.sysList=[]; //this.$store.dispatch("portal/loadSysList"); //重新加载系统门户列表 //return false; //} if (panel.itemData.type == "work") { // this.$store.state.app.list=[]; //this.$store.dispatch("portal/loadList"); //重新加载工作台门户列表 return false; } }, handleIframeLoad(panelCmp, evt) { let me = this, key = panelCmp.name; let ifm = panelCmp.$refs["iframe"]; let tabData = panelCmp.itemData; if (tabData.listeners) { tabData.listeners.load && tabData.listeners.load(); } //转换A标签 me.initATagUrl(ifm.contentWindow.document.body); window.__UserInfo = { orgId: "", operator: "", }; if (panelCmp.title == null \|\| panelCmp.title == "") { let cTabs = me.$refs["cmp-tabs"]; cTabs.resize(); } }, handleBeforeClose(panel, evt) { let ifm = panel.$refs["iframe"]; try { let flag = ifm.contentWindow.Scp.context.beforeunloadFn(evt, 1); return flag; } catch (e) { !document.all && window.console.log( "iframe : Scp.context.beforeunloadFn();" ); } }, handleActiveTab(panel) { if (!panel) return; top.location.hash="#/tabUrl="+panel.url+"&zhc&tabTitle="+panel.title; if (panel.itemData.type == "home") { this.$refs["protalSysHome"][0].doRender(); } if (panel.itemData.type == "work") { this.$refs["portalUserWork"][0].doRender(); } try { let tab = this.$refs["cmp-tabs"].getItemObj(panel.name); //tab.tabPanelIframeEl.contentDocument.trigger("iframeActiving", [panel.name]); tab.tabPanelIframeEl.contentDocument.dispatchEvent( new CustomEvent('iframeActiving', { detail:[panel.name] } ) ); } catch (e) { console.log("iframeActiving error!"); } }, //面板上面的事件特别处理，现在暂时没用 handleSelected(item) { return; let key = item.id; let ifm = this.$refs["dom-iframe" + key][0]; try { let __orgId = ifm.contentWindow.Scp.User.getId(); let __operator = ifm.contentWindow.Scp.User.getOperator(); window.__UserInfo = { orgId: __orgId, operator: __operator, }; } catch (e) {} }, handleRemoveTab(targetName) { let tabs = this.tabList; let activeName = this.defTabKey; if (activeName === targetName) { tabs.forEach((tab, index) => { if (tab.close && tab.id === targetName) { let nextTab = tabs[index + 1] \|\| tabs[index - 1]; if (nextTab) { activeName = nextTab.id; } } }); } this.defTabKey = activeName; tabs = tabs.filter((tab) => { return tab.close == false \|\| tab.id !== targetName; }); console.log('handleRemoveTab') this.$set(this, "tabList", tabs); if (this.tabList.length == 0) { this.defTabKey = "tabPanel_home"; } }, handleRemoveAllTab() { let tabs = this.tabList; this.tabList = tabs.filter((tab) => { return !tab.close; }); let l = this.tabList.length; this.defTabKey = l ? this.tabList[l - 1].id : ""; }, handleRemoveLeftTab(name, index) { let tabs = this.tabList; let defTabKey = this.defTabKey; this.tabList = tabs.filter((tab, i) => { if (tab.id == defTabKey && i < index) { //当前的选中，是在关闭区内 defTabKey = name; } return tab.close == false \|\| i >= index; }); this.defTabKey = defTabKey; }, handleRemoveRightTab(name, index) { let tabs = this.tabList; let defTabKey = this.defTabKey; this.tabList = tabs.filter((tab, i) => { if (tab.id == defTabKey && i > index) { //当前的选中，是在关闭区内 defTabKey = name; } return tab.close == false \|\| i <= index; }); this.defTabKey = defTabKey; }, handleRemoveOtherTab(name, index) { let tabs = this.tabList; tabs = tabs.filter((tab, i) => { return tab.close == false \|\| i == index; }); this.$set(this, "tabList", tabs); this.defTabKey = name; }, handleFullScreen() { this.$emit("onFullScreen"); // screenfull.toggle() }, creatForm(opt){ let that=this; var _opt={ autoShow:false, cancelAction:false, url:null, target:null, action:null, method:null, params:null, data:null, autoDestroy:false, _id:utils.string.id(8), }; Object.assign(_opt,opt); var _formTpl=`<form style="display:none;" id="${_opt._id}"><input type="submit" value="submit" id="submit_${_opt._id}"/></form>`; var _el=document.createElement("div"); _el.innerHTML=_formTpl; document.getElementsByTagName("body")[0].appendChild(_el); var _form=_el.getElementsByTagName("form")[0]; this.setTarget=(str)=>{ _opt.target = str; _form.setAttribute('target',str); } this.setUrl=(str)=>{ this.formateUrl(str); var url = utils.string.setUrlValue(_opt.url,"_____r",new Date().getTime()); _form.setAttribute('action',url); } this.setMethod=(str)=>{ _opt.method = str\|\|'get'; _form.setAttribute('method',str); } this.setParams=(params)=>{ _opt.params = params; } this.setData=(obj)=>{ _opt.data = obj\|\|{}; if(_opt.method=="get"&&_opt.url!=null){ var parms =_opt.url.split("?")[1], item,i=0,len; if(parms!=null){ parms = parms.split("&"); for(i=0,len=parms.length;i<len;i++){ item = parms[i].split("="); _opt.data[item[0]]=item[1]; } } } _.each(_opt.data,function(value,key){ if(_.isObject(value)){ value = JSON.stringify(value); } var _hiddenInput=document.createElement("input"); _hiddenInput.setAttribute("type","hidden"); _form.appendChild(_hiddenInput); _hiddenInput.setAttribute('name',key); _hiddenInput.setAttribute('value',value); }); } this.removeData=()=>{ _opt.data = null; _form.children().remove(); } this.addData=(data)=>{ _opt.data = _.extend({},_opt.data\|\|{},data\|\|{}); _form.children().remove(); this.setData(_opt.data); } this.delData=(keys)=>{ _.each(keys\|\|[],function(val,i){ if((val in _opt.data)){ delete _opt.data[val]; } }); _form.children().remove(); this.setData(_opt.data); } this.formateUrl=(url)=>{ var params= this.formateParams(_opt.params); if(!url)return; _opt.url = url; if(params){ if(_opt.url.indexOf('?')>0){ _opt.url+='&'+params; }else{ _opt.url+='?'+params; } } } this.formateParams=(obj)=>{ if(obj==null) return null; return $.param(obj\|\|{}); } this.submit=()=>{ if(_opt.cancelAction) return; _opt.cancelAction = false; if(_opt.autoDestroy){ setTimeout(function(){ _form.submit() //_form.find('#submit'+me.id).click();//谷歌下面要用按钮才有效果 },0); setTimeout(function(){that.destroy();},1000); }else{ _form.submit(); } } this.destroy=()=>{ _el.remove(); } this.setTarget(_opt.target); this.setMethod(_opt.method); this.setUrl(_opt.url); this.setData(_opt.data); return that; }, }, }; </script> <style lang="less" scoped> .miniLoginBox{ ::v-deep .el-dialog__body{ padding-top:0; } } </style>

Ignore Space Show notes View

project/hivuiMain/views/layout/components/Main.vue

<template>
    <div class="pl-main">
        <p-tabs
            ref="cmp-tabs"
            v-model="defTabKey"
            @onActiveTab="handleActiveTab"
            @onRemoveTab="handleRemoveTab"
            @onRemoveAllTab="handleRemoveAllTab"
            @onRemoveLeft="handleRemoveLeftTab"
            @onRemoveRight="handleRemoveRightTab"
            @onRemoveOther="handleRemoveOtherTab"
            @onFullScreen="handleFullScreen"
            :isSinglePage="sysConfig.isSinglePage"
        >
            <p-tabpanel
                v-for="(item,index) in tabList"
                :key="item.id"
                :close="item.close"
                :title.sync="item.title"
                :name="item.id"
                :url="item.url"
                :itemData="item"
                @onIframeLoad="handleIframeLoad"
                @onBeforeClose="handleBeforeClose"
                @onSelected="handleSelected"
                @onBeforeRefresh="handleBeforeRefresh"
            >
                <template v-if="item.type&&item.type=='home'">
                    <PortalSys
                        :itemData="item"
                        ref="protalSysHome"
                    ></PortalSys>
                </template>
                <template v-if="item.type&&item.type=='work'">
                    <PortalUser
                        :itemData="item"
                        ref="portalUserWork"
                    ></PortalUser>
                </template>
            </p-tabpanel>
        </p-tabs>
        <el-dialog class="miniLoginBox" width="410px" :visible.sync="isMiniLogin" :close-on-click-modal="false">
            <iframe v-if="isMiniLogin" width="100%" height="380px" :src="miniLoginUrl" style="border:none;"></iframe>
        </el-dialog>
    </div>
</template>
<script>
import {changeBz} from "@main/api/user";
import { baseURL, codeProjectName,requestUrl } from "@main/config";
import { PTabs, PTabpanel } from "@main/components/tabpanel";
import PortalUser from "@main/views/Portal/user";
import PortalSys from "@main/views/Portal/sys";
import { getUrlValue, setUrlValue,getUrlSearch,closeWindow,notificationFunc } from "@main/utils";
import { getToken } from '@main/utils/auth'
// import { type } from "os";
import md5 from "js-md5";
import { utils } from "hi-ui";
export default {
    inject: ["addTab", "showTab", "hideTab"],
    components: {
        PTabs,
        PTabpanel,
        PortalUser,
        PortalSys,
    },
    data() {
        let cfg = this.$store.state.app.config || {};
        let defTabs = cfg.sysDefTabs || [];
        let setTabs = cfg.sysSetTabs || [];
        let list = [],
            defTabKey = "";
        defTabs = setTabs.concat(defTabs);
        defTabs.map((item, i) => {
            if(!window._global){//正式环境
                item.url=utils.string.setUrlValue(item.url,"pn",window.HIVUI_SETTING.projectName);
                item.url=utils.string.setUrlValue(item.url,"access_token",getToken());
            }
            let id = item.url ? md5(item.url) : item.id; //强转成 url md5 id
            // if(cfg.isSinglePage){//单页面模式
            //     id="123456789";
            // }
            item.actived && (defTabKey = id);
            if (item.url && getUrlValue(item.url, "__tabId") == "") {
                //关系到用户调用，防止Scp.context.closeCurPage取不到__tabId出错
                item.url = utils.string.setUrlValue(item.url, "__tabId", id);
            }
            /*if(cfg.isSinglePage){
                list[0]={
                    title: item.title,
                    url: item.url,
                    close: item.close,
                    id: id,
                    type: item.type,
                };
            }else*/{
                list.push({
                    title: item.title,
                    url: item.url,
                    close: item.close,
                    id: id,
                    type: item.type,
                });
            }
        });
        console.log('page default open tabs :',defTabs);
        //系统菜单 后台默认配激活
        let menusDef2Tabs = this.$store.getters.defTabs,
            uriStr = "";
        console.log('menus default open tabs :',defTabs);
        menusDef2Tabs.map((item, i) => {
            //uriStr = baseURL + codeProjectName + item.resUrl;
            uriStr = item.resUrl;
            if(!window._global){//正式环境
                uriStr=utils.string.setUrlValue(uriStr,"pn",window.HIVUI_SETTING.projectName);
                uriStr=utils.string.setUrlValue(uriStr,"access_token",getToken());
            }
            if(uriStr.indexOf("http")==-1){
                uriStr=location.origin+uriStr;
            }
            let id = md5(uriStr);
            uriStr = utils.string.setUrlValue(uriStr, "__tabId", id);
            list.push({
                title: item.name,
                url: uriStr,
                close: true,
                id: id,
                type: item.type,
            });
        });
        // console.log('系统菜单',list);

//第三方跳转过来地址自动打开功能tab
        let menusList = this.$store.getters.menusList;
        let searchObj = getUrlSearch(decodeURIComponent(this.$router.currentRoute.fullPath));
        for (let i = menusList.length - 1; i >= 0; i--) {
            if ((menusList[i].type=="func"||menusList[i].type=="flow" )&& (searchObj.portal_func&&menusList[i].resUrl)&&searchObj.portal_func == menusList[i].resUrl) {
                console.log('跳转进来的功能：',searchObj.portal_func);
                //?portal_func=/project/rjwhzx/rjzcgl/funcdir/zcmcx.func&id=11111
                delete searchObj.portal_func;
                // let uriStr = baseURL + codeProjectName + menusList[i].resUrl;
                let uriStr = menusList[i].resUrl;
                if(!window._global){//正式环境
                    uriStr=utils.string.setUrlValue(uriStr,"pn",window.HIVUI_SETTING.projectName);
                    uriStr=utils.string.setUrlValue(uriStr,"access_token",getToken());
                }
                if(uriStr.indexOf("http")==-1){
                    uriStr=location.origin+uriStr;
                }
                let id = md5(uriStr);
                uriStr = utils.string.setUrlValue(uriStr, "__tabId", md5(uriStr));
                for(let key in searchObj){
                    uriStr = utils.string.setUrlValue(uriStr,key,searchObj[key]);
                }
                let inMenu = false;
                for (let j = list.length - 1; j >= 0; j--) {
                    if (list[j].id == id) {
                        inMenu = true;
                        break;
                    }
                }
                if (inMenu) break;
                defTabKey = id;
                list.push({
                    id: id,
                    title: menusList[i].name,
                    url: uriStr,
                    close: true,
                    actived:true //默认选中
                });
                break;
            }
        }
        if(cfg.isPageCache&&window.localStorage.getItem('pageCacheArr')){
            JSON.parse(window.localStorage.getItem('pageCacheArr')).map((item,index)=>{
                uriStr = item.url;
                if(!window._global){//正式环境
                    uriStr=utils.string.setUrlValue(uriStr,"pn",window.HIVUI_SETTING.projectName);
                    uriStr=utils.string.setUrlValue(uriStr,"access_token",getToken());
                }
                if(uriStr.indexOf("http")==-1){
                    uriStr=location.origin+uriStr;
                }
                let id = md5(uriStr);
                uriStr = utils.string.setUrlValue(uriStr, "__tabId", id);
                defTabKey = id;
                list.push({
                    title: item.title,
                    url: uriStr,
                    close: true,
                    id: id,
                    //type: item.type,
                });
            });
        }
        //地址栏打开标签
        if(top.location.hash){
            let hashTabParam={};
            top.location.hash.replace("#/","").split("&zhc&").forEach((item=>{
                if(item.indexOf("tabUrl=")==0){
                    hashTabParam.resUrl=item.replace("tabUrl=","");
                }else if(item.indexOf("tabTitle=")==0){
                    hashTabParam.name=decodeURIComponent(item.replace("tabTitle=",""));
                }
            }));
            if(hashTabParam.resUrl){
                if(hashTabParam.resUrl.indexOf("about:blank")==-1){//下推页面无法重新载入
                    //消除tabId干扰
                    let tabIdStr=hashTabParam.resUrl.match(/\__tabId=.*?&/)||hashTabParam.resUrl.match(/\?__tabId=.*/);
                    if(tabIdStr&&tabIdStr[0]){
                        hashTabParam.resUrl=hashTabParam.resUrl.replace(tabIdStr[0],"").replace("?&","?");
                    }
                    let id = md5(hashTabParam.resUrl);
                    let existsItem=list.filter(item=>{//标签已存在
                        if(item.url&&hashTabParam.resUrl){
                            let itemMainUrl=item.url.split("?")[0];
                            let hashTabMainUrl=hashTabParam.resUrl.split("?")[0];
                            if(hashTabParam.resUrl.indexOf(itemMainUrl)!=-1){
                                return item;
                            }
                        }
                    });
                    if(!existsItem[0]){
                        defTabKey = id;
                        hashTabParam.resUrl = utils.string.setUrlValue(hashTabParam.resUrl, "__tabId", id);
                        list.push({
                            title: hashTabParam.name,
                            url: hashTabParam.resUrl,
                            close: true,
                            id: id,
                            actived:true //默认选中
                        });
                    }else{
                        defTabKey=existsItem[0].id;
                    }
                }
            }
        }
        console.log('sys default tabs :', list);
        return {
            defTabKey: defTabKey || "",
            tabList: list,
            sysConfig: this.$store.state.app.config,
            isFullScreen: false,
            isMiniLogin:false,
            miniLoginUrl:"",
        };
    },
    mounted() {
        // console.log('主界面初始化~！');
        let me = this,
            cTabs = this.$refs["cmp-tabs"];
        window.Sys = {
            isVue: true,
            addEvent(evtName, fn) {
                //onLoad
                Bus.$on(evtName, fn);
            },
            tabPanel: {
                autoResize() {
                    cTabs.resize();
                },
            },
            getSideNavs() {
                return [...me.$store.getters.navs];
            },
            setSideNavs(data) {
                if (data == null && !(data instanceof Array)) return;
                //me.$store.dispatch("app/setQuickNav", data);
            },
            /**
             * @param {} url
             * @param {} title
             * @param {} uid
             * @param {} onLoad    //iframe 加载后
             * @param {} nearest  //标签页是否紧接在其右侧打开
             * @param {} renderedFn //渲染回调
             */
            addTab(url, title, uid, onLoad, nearest, renderedFn) { 
                // if(me.sysConfig.isSinglePage){//单页面模式
                //     uid="123456789";
                // }else 
                if(me.sysConfig.isPageCache){//页面标签缓存模式
                    let _pcarr=window.localStorage.getItem('pageCacheArr');
                    let cacheArr=_pcarr?JSON.parse(_pcarr):[];
                    cacheArr=cacheArr.filter((item)=>{
                        if(url!=item.url){
                            return item
                        }
                    });
                    cacheArr.push({
                        "url":url,
                        "title":title,
                    });
                    if(cacheArr.length>20){
                        cacheArr.shift();
                    }
                    window.localStorage.setItem('pageCacheArr',JSON.stringify(cacheArr));
                }
                if (!(url == "" || url == "about:blank")) {
                    uid = md5(url);
                }
                if(!window._global){//正式环境
                    url=utils.string.setUrlValue(url,"pn",window.HIVUI_SETTING.projectName);
                    url=utils.string.setUrlValue(url,"access_token",getToken());
                }
                let tabs = me.tabList.filter((item, index) => {
                    if(item.id == uid){
                        item.title=title;
                        return item;
                    }
                });
                if (tabs.length/*&&!me.sysConfig.isSinglePage*/) {
                    me.defTabKey = uid;
                    me.$nextTick(
                        (function (fn) {
                            return function () {
                                let tab = cTabs.getItemObj(uid);
                                fn && fn(tab);
                            };
                        })(renderedFn)
                    );
                    return;
                }

if (getUrlValue(url, "__tabId") == "") {
                    //关系到用户调用，防止Scp.context.closeCurPage取不到__tabId出错
                    url = utils.string.setUrlValue(url, "__tabId", uid);
                }
                /*if(me.sysConfig.isSinglePage){
                    me.tabList.pop();
                    me.$nextTick(()=>{
                        me.tabList.push({
                            title: title,
                            url: url,
                            close: true,
                            id: uid,
                            listeners: {
                                load: onLoad,
                            },
                        })
                    })
                }else{*/
                    me.tabList.push({
                        title: title,
                        url: url,
                        close: true,
                        id: uid,
                        listeners: {
                            load: onLoad,
                        },
                    });
                //}
                
                me.defTabKey = uid;
                // window.____renderFunc = renderedFn;
                me.$nextTick(
                    (function (fn, _uid) {
                        return function () {
                            let tab = cTabs.getItemObj(_uid);
                            fn && fn(tab);
                        };
                    })(renderedFn, uid)
                );
                console.log('  addTab  ',me.tabList);
            },
            getTab(uid) {
                return cTabs.getItemObj(uid);
            },
            seldTab(uid) {
                cTabs.defTabKey = uid;
            },
            getSeldTab() {
                return cTabs.getSeldItemObj();
            },
            refreshTab(uid) {
                let tab = cTabs.getItemObj(uid);
                tab &&
                    tab.tabPanelIframeEl.contentWindow.window.location.reload();
            },
            //closeTab
            colseTab(uid) {
                cTabs.closeItem(uid);
            },
            colseSeldTab() {
                cTabs.closeCurItem();
            },
        };

if (id) {
					window.parent.Sys.colseTab(id);
				}else{
					window.parent.Sys.colseSeldTab();
				}
				
			},
			closeCurPage:function(){
				if(!window.parent.Sys){					
					return;
				}
				var id = getUrlValue(window.location.search,'__tabId');
				window.parent.Sys.colseTab(id);
			},
			setPageTitle:function(title){
				if(!window.parent.Sys){					
					return;
				}
				var openway = getUrlValue('','openway');
				if(openway=="openwin")return;
				var tab = window.parent.Sys.getSeldTab();
				if(title!=""){
					tab.tabEl.find('.sys-tab-item-text').html(title);
					window.parent.Sys.tabPanel.autoResize();
				}
            },
            //小登录弹窗打开
            openMiniLogin:function(isRefresh){
                if(window.HIVUI_SETTING.isSingleLogin||me.isMiniLogin){
                    return;
                }
                me.isMiniLogin=true;
                let params="questType=ajax"+(isRefresh?"&isRefresh=true":"")+"#";
                let __login=window.HIVUI_SETTING.loginUrl.split("#");
                me.miniLoginUrl=__login[0]+(__login[0].indexOf("?")==-1?"?":"&")+params+(__login[1]||"")+"miniLogin";
            },
            //小登录弹窗关闭
            closeMiniLogin:function(isRefresh){
                me.isMiniLogin=false;
                changeBz({
                    bzid:me.$store.state.user.userInfo.fbzid
                });
                let tabId=location.href.match(/\?__tabId=.*?&/)[0].replace("?__tabId=","").replace("&","");
                if(isRefresh&&tabId){
                    document.querySelector("iframe[name='iframe"+tabId+"']").contentWindow.location.reload(); 
                }
            },
            //消息通知
            notificationFunc:notificationFunc,
        };

if (this.defTabKey == "" && this.tabList.length)
            this.defTabKey = this.tabList[0].id;
        //默认如果指向下面两个的话，标识一下已经加载过
        if (this.$refs["protalSysHome"]) {
            //this.$store.dispatch("portal/loadSysList"); //重新加载系统门户列表
            // console.log('加载系统门户列表~！');
            let itemData = this.$refs["protalSysHome"][0].itemData;
            if (itemData.id == this.defTabKey) {
                this.$refs["protalSysHome"][0].actived = true;
            }
        }
        if (this.$refs["portalUserWork"]) {
            //this.$store.dispatch("portal/loadList"); //重新加载工作台门户列表
            // console.log('加载工作台门户列表~！');
            let itemData = this.$refs["portalUserWork"][0].itemData;
            if (itemData.id == this.defTabKey) {
                this.$refs["portalUserWork"][0].actived = true;
            }
        }
        let events = this.sysConfig.events;
        if (events) {
            this.$nextTick((r) => {
                events.onLoad && events.onLoad();
            });
        }
    },
    methods: {
        //将框架页里头的a 标签进行转换
        initATagUrl(el) {
            let aList = el.querySelectorAll("a");
            aList.forEach(function (aTag, i) {
                if (aTag.href) {
                    var httpUrl = new RegExp(
                        "^((https|http|ftp|rtsp|mms)?://)"
                    );
                    if (
                        httpUrl.test(
                            aTag.href.replace(window.location.origin, "")
                        )
                    ) {
                        return false;
                    }
                    if (!aTag.onclick) {
                        if (aTag.target == "_blank") {
                            aTag.addEventListener("click", function (evt) {
                                evt.preventDefault();
                                evt.stopPropagation();
                                var tabTitle = "";
                                if (aTag.title) {
                                    tabTitle = aTag.title;
                                }
                                var url = this.getAttribute("href");
                                var reg = /^\//gi;
                                Sys.addTab(url, tabTitle, "", "", true);
                                return false;
                            });
                        }
                    }
                }
            });
            window.Sys.tabPanel.autoResize();
        },
        handleBeforeRefresh(panel, evt) {
            //if (panel.itemData.type == "home") {
                // this.$store.state.app.sysList=[];
                //this.$store.dispatch("portal/loadSysList"); //重新加载系统门户列表
                //return false;
            //}
            if (panel.itemData.type == "work") {
                // this.$store.state.app.list=[];
                //this.$store.dispatch("portal/loadList"); //重新加载工作台门户列表
                return false;
            }
        },
        handleIframeLoad(panelCmp, evt) {
            let me = this,
                key = panelCmp.name;
            let ifm = panelCmp.$refs["iframe"];
            let tabData = panelCmp.itemData;
            if (tabData.listeners) {
                tabData.listeners.load && tabData.listeners.load();
            }
            //转换A标签
            me.initATagUrl(ifm.contentWindow.document.body);
            window.__UserInfo = {
                orgId: "",
                operator: "",
            };
            if (panelCmp.title == null || panelCmp.title == "") {
                let cTabs = me.$refs["cmp-tabs"];
                cTabs.resize();
            }
        },
        handleBeforeClose(panel, evt) {
            let ifm = panel.$refs["iframe"];
            try {
                let flag = ifm.contentWindow.Scp.context.beforeunloadFn(evt, 1);
                return flag;
            } catch (e) {
                !document.all &&
                    window.console.log(
                        "iframe : Scp.context.beforeunloadFn();"
                    );
            }
        },
        handleActiveTab(panel) {
            if (!panel) return;
            top.location.hash="#/tabUrl="+panel.url+"&zhc&tabTitle="+panel.title;
            if (panel.itemData.type == "home") {
                this.$refs["protalSysHome"][0].doRender();
            }
            if (panel.itemData.type == "work") {
                this.$refs["portalUserWork"][0].doRender();
            }
            try {
                let tab = this.$refs["cmp-tabs"].getItemObj(panel.name);
                //tab.tabPanelIframeEl.contentDocument.trigger("iframeActiving", [panel.name]);
                tab.tabPanelIframeEl.contentDocument.dispatchEvent(
                    new CustomEvent('iframeActiving',
                        {
                            detail:[panel.name]
                        }
                    )
                );
            } catch (e) {
                console.log("iframeActiving error!");
            }
        },
        //面板上面的事件特别处理，现在暂时没用
        handleSelected(item) {
            return;
            let key = item.id;
            let ifm = this.$refs["dom-iframe" + key][0];
            try {
                let __orgId = ifm.contentWindow.Scp.User.getId();
                let __operator = ifm.contentWindow.Scp.User.getOperator();
                window.__UserInfo = {
                    orgId: __orgId,
                    operator: __operator,
                };
            } catch (e) {}
        },
        handleRemoveTab(targetName) {
            let tabs = this.tabList;
            let activeName = this.defTabKey;
            if (activeName === targetName) {
                tabs.forEach((tab, index) => {
                    if (tab.close && tab.id === targetName) {
                        let nextTab = tabs[index + 1] || tabs[index - 1];
                        if (nextTab) {
                            activeName = nextTab.id;
                        }
                    }
                });
            }
            this.defTabKey = activeName;
            tabs = tabs.filter((tab) => {
                return tab.close == false || tab.id !== targetName;
            });
            console.log('handleRemoveTab')
            this.$set(this, "tabList", tabs);
            if (this.tabList.length == 0) {
                this.defTabKey = "tabPanel_home";
            }
        },
        handleRemoveAllTab() {
            let tabs = this.tabList;
            this.tabList = tabs.filter((tab) => {
                return !tab.close;
            });
            let l = this.tabList.length;
            this.defTabKey = l ? this.tabList[l - 1].id : "";
        },
        handleRemoveLeftTab(name, index) {
            let tabs = this.tabList;
            let defTabKey = this.defTabKey;
            this.tabList = tabs.filter((tab, i) => {
                if (tab.id == defTabKey && i < index) {
                    //当前的选中，是在关闭区内
                    defTabKey = name;
                }
                return tab.close == false || i >= index;
            });

this.defTabKey = defTabKey;
        },
        handleRemoveRightTab(name, index) {
            let tabs = this.tabList;
            let defTabKey = this.defTabKey;
            this.tabList = tabs.filter((tab, i) => {
                if (tab.id == defTabKey && i > index) {
                    //当前的选中，是在关闭区内
                    defTabKey = name;
                }
                return tab.close == false || i <= index;
            });
            this.defTabKey = defTabKey;
        },
        handleRemoveOtherTab(name, index) {
            let tabs = this.tabList;
            tabs = tabs.filter((tab, i) => {
                return tab.close == false || i == index;
            });
            this.$set(this, "tabList", tabs);
            this.defTabKey = name;
        },
        handleFullScreen() {
            this.$emit("onFullScreen");
            // screenfull.toggle()
        },
        creatForm(opt){
            let that=this;
            var _opt={
                autoShow:false,
                cancelAction:false,
                url:null,
                target:null,
                action:null,
                method:null,
                params:null,
                data:null,
                autoDestroy:false,
                _id:utils.string.id(8),
            };
            Object.assign(_opt,opt);
            var _formTpl=`<form style="display:none;" id="${_opt._id}"><input type="submit" value="submit" id="submit_${_opt._id}"/></form>`;
            var _el=document.createElement("div");
            _el.innerHTML=_formTpl;
            document.getElementsByTagName("body")[0].appendChild(_el);
            var _form=_el.getElementsByTagName("form")[0];
            this.setTarget=(str)=>{
                _opt.target = str;
                _form.setAttribute('target',str);
            }
            this.setUrl=(str)=>{
                this.formateUrl(str);
                var url =  utils.string.setUrlValue(_opt.url,"_____r",new Date().getTime());
                _form.setAttribute('action',url);
            }
            this.setMethod=(str)=>{
                _opt.method = str||'get';
                _form.setAttribute('method',str);
            }
            this.setParams=(params)=>{
                _opt.params = params;
            }
            this.setData=(obj)=>{
                _opt.data = obj||{};
                if(_opt.method=="get"&&_opt.url!=null){
                    var parms =_opt.url.split("?")[1],
                        item,i=0,len;
                    if(parms!=null){
                        parms = parms.split("&");
                        for(i=0,len=parms.length;i<len;i++){
                            item = parms[i].split("=");
                            _opt.data[item[0]]=item[1];
                        }
                    }
                }
                _.each(_opt.data,function(value,key){
                    if(_.isObject(value)){
                        value = JSON.stringify(value);
                    }
                    var _hiddenInput=document.createElement("input");
                    _hiddenInput.setAttribute("type","hidden");
                    _form.appendChild(_hiddenInput);
                    _hiddenInput.setAttribute('name',key);
                    _hiddenInput.setAttribute('value',value);
                });
            }
            this.removeData=()=>{
                _opt.data = null;
                _form.children().remove();
            }
            this.addData=(data)=>{
                _opt.data = _.extend({},_opt.data||{},data||{});
                _form.children().remove();
                this.setData(_opt.data);
            }
            this.delData=(keys)=>{		
                _.each(keys||[],function(val,i){
                    if((val in _opt.data)){
                        delete _opt.data[val];
                    }
                });		
                _form.children().remove();
                this.setData(_opt.data);
            }
            this.formateUrl=(url)=>{
                var params= this.formateParams(_opt.params);
                if(!url)return;
                _opt.url = url;
                if(params){			
                    if(_opt.url.indexOf('?')>0){
                        _opt.url+='&'+params;
                    }else{
                        _opt.url+='?'+params;
                    }
                }
            }
            this.formateParams=(obj)=>{
                if(obj==null) return null;
                return $.param(obj||{});
            }
            this.submit=()=>{
                if(_opt.cancelAction) return;
                _opt.cancelAction = false;
                
                if(_opt.autoDestroy){
                    setTimeout(function(){
                        _form.submit()
                        //_form.find('#submit'+me.id).click();//谷歌下面要用  按钮才有效果
                    },0);
                    setTimeout(function(){that.destroy();},1000);			
                }else{
                    _form.submit();
                }
            }
            this.destroy=()=>{
                _el.remove();
            }
            
            this.setTarget(_opt.target);
            this.setMethod(_opt.method);
            this.setUrl(_opt.url);
            this.setData(_opt.data);
            return that;
        },
    },
};
</script>
<style lang="less" scoped>
    .miniLoginBox{
        ::v-deep .el-dialog__body{
            padding-top:0;
        }
    }
</style>

<template>
    <div class="pl-main">
        <p-tabs
            ref="cmp-tabs"
            v-model="defTabKey"
            @onActiveTab="handleActiveTab"
            @onRemoveTab="handleRemoveTab"
            @onRemoveAllTab="handleRemoveAllTab"
            @onRemoveLeft="handleRemoveLeftTab"
            @onRemoveRight="handleRemoveRightTab"
            @onRemoveOther="handleRemoveOtherTab"
            @onFullScreen="handleFullScreen"
            :isSinglePage="sysConfig.isSinglePage"
        >
            <p-tabpanel
                v-for="(item,index) in tabList"
                :key="item.id"
                :close="item.close"
                :title.sync="item.title"
                :name="item.id"
                :url="item.url"
                :itemData="item"
                @onIframeLoad="handleIframeLoad"
                @onBeforeClose="handleBeforeClose"
                @onSelected="handleSelected"
                @onBeforeRefresh="handleBeforeRefresh"
            >
                <template v-if="item.type&&item.type=='home'">
                    <PortalSys
                        :itemData="item"
                        ref="protalSysHome"
                    ></PortalSys>
                </template>
                <template v-if="item.type&&item.type=='work'">
                    <PortalUser
                        :itemData="item"
                        ref="portalUserWork"
                    ></PortalUser>
                </template>
            </p-tabpanel>
        </p-tabs>
        <el-dialog class="miniLoginBox" width="410px" :visible.sync="isMiniLogin" :close-on-click-modal="false">
            <iframe v-if="isMiniLogin" width="100%" height="380px" :src="miniLoginUrl" style="border:none;"></iframe>
        </el-dialog>
    </div>
</template>
<script>
import {changeBz} from "@main/api/user";
import { baseURL, codeProjectName,requestUrl } from "@main/config";
import { PTabs, PTabpanel } from "@main/components/tabpanel";
import PortalUser from "@main/views/Portal/user";
import PortalSys from "@main/views/Portal/sys";
import { getUrlValue, setUrlValue,getUrlSearch,closeWindow } from "@main/utils";
import { getToken } from '@main/utils/auth'
// import { type } from "os";
import md5 from "js-md5";
import { utils } from "hi-ui";
export default {
    inject: ["addTab", "showTab", "hideTab"],
    components: {
        PTabs,
        PTabpanel,
        PortalUser,
        PortalSys,
    },
    data() {
        let cfg = this.$store.state.app.config || {};
        let defTabs = cfg.sysDefTabs || [];
        let setTabs = cfg.sysSetTabs || [];
        let list = [],
            defTabKey = "";
        defTabs = setTabs.concat(defTabs);
        defTabs.map((item, i) => {
            if(!window._global){//正式环境
                item.url=utils.string.setUrlValue(item.url,"pn",window.HIVUI_SETTING.projectName);
                item.url=utils.string.setUrlValue(item.url,"access_token",getToken());
            }
            let id = item.url ? md5(item.url) : item.id; //强转成 url md5 id
            // if(cfg.isSinglePage){//单页面模式
            //     id="123456789";
            // }
            item.actived && (defTabKey = id);
            if (item.url && getUrlValue(item.url, "__tabId") == "") {
                //关系到用户调用，防止Scp.context.closeCurPage取不到__tabId出错
                item.url = utils.string.setUrlValue(item.url, "__tabId", id);
            }
            /*if(cfg.isSinglePage){
                list[0]={
                    title: item.title,
                    url: item.url,
                    close: item.close,
                    id: id,
                    type: item.type,
                };
            }else*/{
                list.push({
                    title: item.title,
                    url: item.url,
                    close: item.close,
                    id: id,
                    type: item.type,
                });
            }
        });
        console.log('page default open tabs :',defTabs);
        //系统菜单 后台默认配激活
        let menusDef2Tabs = this.$store.getters.defTabs,
            uriStr = "";
        console.log('menus default open tabs :',defTabs);
        menusDef2Tabs.map((item, i) => {
            //uriStr = baseURL + codeProjectName + item.resUrl;
            uriStr = item.resUrl;
            if(!window._global){//正式环境
                uriStr=utils.string.setUrlValue(uriStr,"pn",window.HIVUI_SETTING.projectName);
                uriStr=utils.string.setUrlValue(uriStr,"access_token",getToken());
            }
            if(uriStr.indexOf("http")==-1){
                uriStr=location.origin+uriStr;
            }
            let id = md5(uriStr);
            uriStr = utils.string.setUrlValue(uriStr, "__tabId", id);
            list.push({
                title: item.name,
                url: uriStr,
                close: true,
                id: id,
                type: item.type,
            });
        });
        // console.log('系统菜单',list);

Ignore Space Show notes View project/hivuiMain/views/layout/components/allFuncMenu/index.vue
<template> <div class="boxMain" ref="allFuncMenu" @mouseenter="showBox" @mouseleave="hideBox" :style="allFuncMenuStyle"> <div class="searchBox"> <input type="text" placeholder="请输入关键词" v-model.trim="searchWord" @keyup="handleSeachKeyUp" /> <i class="iconfont icon-search"></i> </div> <div ref="listBox" class="listBox" :style="listBoxStyle"> <ul class="level1List" v-if="searchWord==''"> <li v-for=" (item1,index) in menus" :key="'level1-'+index" :class="item1.type!='dir'&&!item1.children&&'funcBtn'" :title="item1.type!='dir'?item1.name:''" @click="funcClick(item1)"> <itemIcon :item="item1"></itemIcon> <span>{{item1.name}}</span> <ul class="level2List" v-if="item1.children"> <li v-for=" (item2,index) in item1.children" :key="'level2-'+index" :class="item2.type!='dir'&&!item2.children&&'funcBtn'" :title="item2.type!='dir'?item2.name:''" @click="funcClick(item2)"> <itemIcon :item="item2"></itemIcon> <span>{{item2.name}}</span> <!-- <i v-if="item2.type=='dir'" class="el-icon-caret-bottom"></i> --> <ul class="level3List" v-if="item2.children"> <template v-for=" (item3,index) in item2.children"> <menus :class="'funcBtn level3Dir'" :key="'level3-'+index" :level="0" :parent="allFuncMenu" :menuitem="item3" v-if="item3.isShow&&item3.children&&item3.children.length"></menus> <li v-else :class="'funcBtn'" :key="'level3-'+index" :title="item3.type!='dir'?item3.name:''" @click="funcClick(item3)" > <itemIcon :item="item3"></itemIcon> <span>{{item3.name}}</span> </li> </template> </ul> </li> </ul> </li> <li v-show="menus.length==0"> {{$lang('noData')\|\|'暂无数据'}} </li> </ul> <!-- 搜索结果列表 --> <ul class="searchResultList" v-else> <li v-for=" (searchItem,index) in searchList" :key="'search-'+index" :data-index="index" :class="seldIndex==index&&'itemSeld'" :title="searchItem.name" @click="funcClick(searchItem)"> <itemIcon :item="searchItem"></itemIcon> <span>{{searchItem.name}}</span> </li> <li v-show="searchList.length==0"> {{$lang('noData')\|\|'暂无数据'}} </li> </ul> </div> </div> </template> <script> import pinyin from 'js-pinyin'; import itemIcon from './itemIcon'; import menus from './menus'; export default { inject:['addTab'], provide(){ let me=this; return { showAllFuncBox(){ me.showBox(); }, hideAllFuncBox(){ me.hideBox(); }, } }, props:{ triggerObj:{ type:Object, } }, components:{ itemIcon,menus }, data(){ return { searchWord:"", searchList:[], seldIndex:0, allFuncMenuStyle:"", listBoxStyle:"", loading:false, loadingTime:200, triggerTimer:null, }; }, computed:{ menus(){ //调整排序，功能页面排前面 function sort(list){ let dirList=list.filter(item=>{ return item.type=="dir"; }); let funcList=list.filter(item=>{ return item.type!="dir"; }); list=funcList.concat(dirList); for(let item of list){ if(item.type=='dir'){ if(item.children&&item.children.length>0){ item.children=sort(item.children); } } } return list; } return sort(this.$store.getters.menus); }, }, watch:{ searchWord(newVal,oldVal){ this.seldIndex=0; this.doSearch(newVal); } }, mounted(){ let me=this; }, methods:{ //获取搜索列表数据 doSearch(cnKey){ let me=this; let list = [], records = me.$store.getters.menusList; let py = pinyin.getCamelChars(cnKey).toLocaleLowerCase(); let re = new RegExp("^[a-zA-Z]+$"); for(let i=0,l=records.length;i<l;i++){ let item = records[i]; if(re.test(cnKey)){ let y = pinyin.getCamelChars(item.name).toLocaleLowerCase(); if(y.indexOf(py)>-1 && item.type!='dir'){ list.push(item); } }else{ if(item.name.indexOf(cnKey)>-1 && item.type!='dir'){ list.push(item); continue; } } } me.$set(me,'searchList',list); me.$nextTick(()=>{ me.countHeight(); me.$refs.listBox.scrollTo({ top:0, }); }); }, //搜索时方向键及回车事件 handleSeachKeyUp(evt){ let colNum=4; let me=this; if(evt.keyCode==37){//左方向 if(me.seldIndex==0){ me.seldIndex=me.searchList.length-1; }else{ me.seldIndex--; } me.scrollSearchList("up"); } if(evt.keyCode==38){//上方向 if(me.seldIndex-colNum<0){ let re1=me.searchList.length%colNum; let re2=(me.seldIndex+1)%colNum; let count=re2>re1 ? (colNum-re2+re1) : (re1-re2); me.seldIndex=((me.searchList.length-count>0) ? me.searchList.length-count : me.searchList.length) - 1; }else{ me.seldIndex-=colNum; } me.scrollSearchList("up"); } if(evt.keyCode==39){//右方向 if(me.seldIndex<me.searchList.length-1){ me.seldIndex++; }else{ me.seldIndex=0; } me.scrollSearchList("down"); } if(evt.keyCode==40){//下方向 if(me.seldIndex+colNum>me.searchList.length-1){ me.seldIndex=(me.seldIndex+colNum)%colNum; }else{ me.seldIndex+=colNum; } me.scrollSearchList("down"); } if(evt.keyCode==13){//回车 let item = me.searchList[me.seldIndex]; if(item.type== "link"){ window.open(item.resUrl,item.name); return; } me.addTab(item);//inject 提供的方法只能传一个参数 me.searchWord = ""; me.seldIndex = 0; me.$refs.listBox.scrollTo({ top:0, }); me.hideBox(); } }, //滚动搜索菜单列表 scrollSearchList(type){ let me=this; let _scrollTop=0; let listDom=me.$refs.listBox; let listDomObj=listDom.getBoundingClientRect(); let currItemDom=listDom.querySelector("[data-index='"+me.seldIndex+"']"); let currItemDomObj=currItemDom.getBoundingClientRect(); //在可视范围内不滚动 if(currItemDomObj.top+currItemDomObj.height<(listDomObj.height+listDomObj.top) && currItemDomObj.top>listDomObj.top){ return; } if(type=="up"){ _scrollTop=currItemDomObj.top-listDomObj.top+listDom.scrollTop; }else if(type=="down"){ _scrollTop=currItemDomObj.top+currItemDomObj.height-listDomObj.top-listDomObj.height+listDom.scrollTop; } me.$refs.listBox.scrollTo({ top:_scrollTop, behavior:"smooth", }); }, //菜单功能项点击事件 funcClick(item){ if(item.type!="dir"&&item.resUrl){ if(item.type== "link"){ window.open(item.resUrl,item.name); return; } this.addTab(item);//inject 提供的方法只能传一个参数 this.hideBox(); } }, //显隐共用样式（设置定位） commonFunc(){ let me=this; let btnOffset=me.triggerObj; let ww=window.outerWidth; let boxleft=btnOffset.left+me.$refs.allFuncMenu.offsetWidth; me.isShowAllFuncMenu=me.isShowAllFuncMenu?false:true; me.allFuncMenuStyle=`top:${btnOffset.top+btnOffset.height}px;`; if(boxleft>ww){ me.allFuncMenuStyle+=`right:10px;`; }else{ me.allFuncMenuStyle+=`left:${btnOffset.left}px;`; } }, //计算高度 countHeight(){ let me=this; let wh=window.outerHeight; let listContentH=me.$refs.listBox.children[0].scrollHeight+50; let boxheight=listContentH > (wh/2) ? wh/2 : listContentH; me.allFuncMenuStyle+=`opacity:1;z-index:99;height:${boxheight+2}px;`;//2:弹窗边框 me.listBoxStyle=`height:${boxheight-50}px;`;//50:搜索框高度 }, //显示弹窗 showBox(){ let me=this; me.commonFunc(); me.countHeight(); me.loading=true; clearTimeout(me.triggerTimer); me.triggerTimer=setTimeout(()=>{ me.loading=false; },me.loadingTime); }, //隐藏弹窗 hideBox(){ let me=this; me.commonFunc(); //me.loading=true; me.allFuncMenuStyle+=`z-index:99;`; setTimeout(()=>{ if(!me.loading){ me.allFuncMenuStyle=''; me.loading=false; } },me.loadingTime); }, } } </script> <style lang="less" scoped> .boxMain{ position:absolute; top:-9999px; z-index:-1; opacity: 0; transition-duration: 0.2s; transition-property: opacity,height; width: 800px; height:0; background-color: #fff; border:1px solid #ddd; box-shadow: 0 2px 10px 0 #ddd; padding:50px 0px 0; box-sizing: border-box; overflow: auto; { box-sizing: border-box; } ul,li{ padding: 0; margin:0; list-style: none; } ul{ display: flex; flex-wrap: wrap; width:100%; } li{ flex:0 0 100%; color:#333; span{ overflow: hidden; text-overflow: ellipsis; } } &.show{ z-index:99; opacity: 1; } li.funcBtn{ display: flex; align-items: center; flex:0 0 25%; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; padding-right:20px; color:#888; &:hover>span{ color:#06c; cursor: pointer; } } .searchBox{ position: absolute; top:0; left:0; right:0; margin:auto; width: calc(100% - 60px); background-color: #fff; input{ border:none; border-bottom:1px solid #ddd; padding:0 10px 0 40px; line-height: 48px; width: 100%; outline: none; &::placeholder{ color:#ccc; } } i{ position: absolute; top:0; bottom:0; left:10px; margin:auto; width:20px; height:20px; line-height:20px; text-align: center; font-size: 20px; font-weight: bold; color:#ccc; } } .listBox{ overflow: auto; padding:0 30px; } .level1List{ margin-bottom:30px; padding: 10px; &>li{ line-height: 36px; font-size: 18px; font-weight: bold; } } .level2List{ padding: 10px; &>li{ line-height: 32px; font-size: 14px; font-weight: bold; &.funcBtn{ font-size: 13px; font-weight: normal; } } } .level3List{ padding:0px 0 10px; display:flex; flex-wrap: wrap; &>li{ white-space: nowrap; overflow: hidden; text-overflow: ellipsis; line-height: 32px; font-size: 13px; &.funcBtn{ font-weight: normal; } } .level3Dir{ color:#333; } } .searchResultList{ width: 100%; display:flex; flex-wrap: wrap; padding-bottom:30px; li{ flex:0 0 25%; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; line-height: 32px; font-size: 14px; display: flex; align-items: center; cursor: pointer; &:hover{ color:#06c; } } .itemSeld{ color:#f00; } } } </style> <template> <div class="boxMain" ref="allFuncMenu" @mouseenter="showBox" @mouseleave="hideBox" :style="allFuncMenuStyle"> <div class="searchBox"> <input type="text" placeholder="请输入关键词" v-model.trim="searchWord" @keyup="handleSeachKeyUp" /> <i class="iconfont icon-search"></i> </div> <div ref="listBox" class="listBox" :style="listBoxStyle"> <ul class="level1List" v-if="searchWord==''"> <li v-for=" (item1,index) in menus" :key="'level1-'+index" :class="item1.type!='dir'&&'funcBtn'" :title="item1.type!='dir'?item1.name:''" @click="funcClick(item1)"> <itemIcon :item="item1"></itemIcon> <span>{{item1.name}}</span> <ul class="level2List" v-if="item1.children"> <li v-for=" (item2,index) in item1.children" :key="'level2-'+index" :class="item2.type!='dir'&&'funcBtn'" :title="item2.type!='dir'?item2.name:''" @click="funcClick(item2)"> <itemIcon :item="item2"></itemIcon> <span>{{item2.name}}</span> <!-- <i v-if="item2.type=='dir'" class="el-icon-caret-bottom"></i> --> <ul class="level3List" v-if="item2.children"> <template v-for=" (item3,index) in item2.children"> <menus :class="'funcBtn level3Dir'" :key="'level3-'+index" :level="0" :parent="allFuncMenu" :menuitem="item3" v-if="item3.isShow&&item3.children&&item3.children.length"></menus> <li v-else :class="'funcBtn'" :key="'level3-'+index" :title="item3.type!='dir'?item3.name:''" @click="funcClick(item3)" > <itemIcon :item="item3"></itemIcon> <span>{{item3.name}}</span> </li> </template> </ul> </li> </ul> </li> <li v-show="menus.length==0"> {{$lang('noData')\|\|'暂无数据'}} </li> </ul> <!-- 搜索结果列表 --> <ul class="searchResultList" v-else> <li v-for=" (searchItem,index) in searchList" :key="'search-'+index" :data-index="index" :class="seldIndex==index&&'itemSeld'" :title="searchItem.name" @click="funcClick(searchItem)"> <itemIcon :item="searchItem"></itemIcon> <span>{{searchItem.name}}</span> </li> <li v-show="searchList.length==0"> {{$lang('noData')\|\|'暂无数据'}} </li> </ul> </div> </div> </template> <script> import pinyin from 'js-pinyin'; import itemIcon from './itemIcon'; import menus from './menus'; export default { inject:['addTab'], provide(){ let me=this; return { showAllFuncBox(){ me.showBox(); }, hideAllFuncBox(){ me.hideBox(); }, } }, props:{ triggerObj:{ type:Object, } }, components:{ itemIcon,menus }, data(){ return { searchWord:"", searchList:[], seldIndex:0, allFuncMenuStyle:"", listBoxStyle:"", loading:false, loadingTime:200, triggerTimer:null, }; }, computed:{ menus(){ //调整排序，功能页面排前面 function sort(list){ let dirList=list.filter(item=>{ return item.type=="dir"; }); let funcList=list.filter(item=>{ return item.type!="dir"; }); list=funcList.concat(dirList); for(let item of list){ if(item.type=='dir'){ if(item.children&&item.children.length>0){ item.children=sort(item.children); } } } return list; } return sort(this.$store.getters.menus); }, }, watch:{ searchWord(newVal,oldVal){ this.seldIndex=0; this.doSearch(newVal); } }, mounted(){ let me=this; }, methods:{ //获取搜索列表数据 doSearch(cnKey){ let me=this; let list = [], records = me.$store.getters.menusList; let py = pinyin.getCamelChars(cnKey).toLocaleLowerCase(); let re = new RegExp("^[a-zA-Z]+$"); for(let i=0,l=records.length;i<l;i++){ let item = records[i]; if(re.test(cnKey)){ let y = pinyin.getCamelChars(item.name).toLocaleLowerCase(); if(y.indexOf(py)>-1 && item.type!='dir'){ list.push(item); } }else{ if(item.name.indexOf(cnKey)>-1 && item.type!='dir'){ list.push(item); continue; } } } me.$set(me,'searchList',list); me.$nextTick(()=>{ me.countHeight(); me.$refs.listBox.scrollTo({ top:0, }); }); }, //搜索时方向键及回车事件 handleSeachKeyUp(evt){ let colNum=4; let me=this; if(evt.keyCode==37){//左方向 if(me.seldIndex==0){ me.seldIndex=me.searchList.length-1; }else{ me.seldIndex--; } me.scrollSearchList("up"); } if(evt.keyCode==38){//上方向 if(me.seldIndex-colNum<0){ let re1=me.searchList.length%colNum; let re2=(me.seldIndex+1)%colNum; let count=re2>re1 ? (colNum-re2+re1) : (re1-re2); me.seldIndex=((me.searchList.length-count>0) ? me.searchList.length-count : me.searchList.length) - 1; }else{ me.seldIndex-=colNum; } me.scrollSearchList("up"); } if(evt.keyCode==39){//右方向 if(me.seldIndex<me.searchList.length-1){ me.seldIndex++; }else{ me.seldIndex=0; } me.scrollSearchList("down"); } if(evt.keyCode==40){//下方向 if(me.seldIndex+colNum>me.searchList.length-1){ me.seldIndex=(me.seldIndex+colNum)%colNum; }else{ me.seldIndex+=colNum; } me.scrollSearchList("down"); } if(evt.keyCode==13){//回车 let item = me.searchList[me.seldIndex]; if(item.type== "link"){ window.open(item.resUrl,item.name); return; } me.addTab(item);//inject 提供的方法只能传一个参数 me.searchWord = ""; me.seldIndex = 0; me.$refs.listBox.scrollTo({ top:0, }); me.hideBox(); } }, //滚动搜索菜单列表 scrollSearchList(type){ let me=this; let _scrollTop=0; let listDom=me.$refs.listBox; let listDomObj=listDom.getBoundingClientRect(); let currItemDom=listDom.querySelector("[data-index='"+me.seldIndex+"']"); let currItemDomObj=currItemDom.getBoundingClientRect(); //在可视范围内不滚动 if(currItemDomObj.top+currItemDomObj.height<(listDomObj.height+listDomObj.top) && currItemDomObj.top>listDomObj.top){ return; } if(type=="up"){ _scrollTop=currItemDomObj.top-listDomObj.top+listDom.scrollTop; }else if(type=="down"){ _scrollTop=currItemDomObj.top+currItemDomObj.height-listDomObj.top-listDomObj.height+listDom.scrollTop; } me.$refs.listBox.scrollTo({ top:_scrollTop, behavior:"smooth", }); }, //菜单功能项点击事件 funcClick(item){ if(item.type!="dir"&&item.resUrl){ if(item.type== "link"){ window.open(item.resUrl,item.name); return; } this.addTab(item);//inject 提供的方法只能传一个参数 this.hideBox(); } }, //显隐共用样式（设置定位） commonFunc(){ let me=this; let btnOffset=me.triggerObj; let ww=window.outerWidth; let boxleft=btnOffset.left+me.$refs.allFuncMenu.offsetWidth; me.isShowAllFuncMenu=me.isShowAllFuncMenu?false:true; me.allFuncMenuStyle=`top:${btnOffset.top+btnOffset.height}px;`; if(boxleft>ww){ me.allFuncMenuStyle+=`right:10px;`; }else{ me.allFuncMenuStyle+=`left:${btnOffset.left}px;`; } }, //计算高度 countHeight(){ let me=this; let wh=window.outerHeight; let listContentH=me.$refs.listBox.children[0].scrollHeight+50; let boxheight=listContentH > (wh/2) ? wh/2 : listContentH; me.allFuncMenuStyle+=`opacity:1;z-index:99;height:${boxheight+2}px;`;//2:弹窗边框 me.listBoxStyle=`height:${boxheight-50}px;`;//50:搜索框高度 }, //显示弹窗 showBox(){ let me=this; me.commonFunc(); me.countHeight(); me.loading=true; clearTimeout(me.triggerTimer); me.triggerTimer=setTimeout(()=>{ me.loading=false; },me.loadingTime); }, //隐藏弹窗 hideBox(){ let me=this; me.commonFunc(); //me.loading=true; me.allFuncMenuStyle+=`z-index:99;`; setTimeout(()=>{ if(!me.loading){ me.allFuncMenuStyle=''; me.loading=false; } },me.loadingTime); }, } } </script> <style lang="less" scoped> .boxMain{ position:absolute; top:-9999px; z-index:-1; opacity: 0; transition-duration: 0.2s; transition-property: opacity,height; width: 800px; height:0; background-color: #fff; border:1px solid #ddd; box-shadow: 0 2px 10px 0 #ddd; padding:50px 0px 0; box-sizing: border-box; overflow: auto; { box-sizing: border-box; } ul,li{ padding: 0; margin:0; list-style: none; } ul{ display: flex; flex-wrap: wrap; width:100%; } li{ flex:0 0 100%; color:#333; span{ overflow: hidden; text-overflow: ellipsis; } } &.show{ z-index:99; opacity: 1; } li.funcBtn{ display: flex; align-items: center; flex:0 0 25%; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; padding-right:20px; color:#888; &:hover>span{ color:#06c; cursor: pointer; } } .searchBox{ position: absolute; top:0; left:0; right:0; margin:auto; width: calc(100% - 60px); background-color: #fff; input{ border:none; border-bottom:1px solid #ddd; padding:0 10px 0 40px; line-height: 48px; width: 100%; outline: none; &::placeholder{ color:#ccc; } } i{ position: absolute; top:0; bottom:0; left:10px; margin:auto; width:20px; height:20px; line-height:20px; text-align: center; font-size: 20px; font-weight: bold; color:#ccc; } } .listBox{ overflow: auto; padding:0 30px; } .level1List{ margin-bottom:30px; padding: 10px; &>li{ line-height: 36px; font-size: 18px; font-weight: bold; } } .level2List{ padding: 10px; &>li{ line-height: 32px; font-size: 14px; font-weight: bold; &.funcBtn{ font-size: 13px; font-weight: normal; } } } .level3List{ padding:0px 0 10px; display:flex; flex-wrap: wrap; &>li{ white-space: nowrap; overflow: hidden; text-overflow: ellipsis; line-height: 32px; font-size: 13px; &.funcBtn{ font-weight: normal; } } .level3Dir{ color:#333; } } .searchResultList{ width: 100%; display:flex; flex-wrap: wrap; padding-bottom:30px; li{ flex:0 0 25%; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; line-height: 32px; font-size: 14px; display: flex; align-items: center; cursor: pointer; &:hover{ color:#06c; } } .itemSeld{ color:#f00; } } } </style>

Ignore Space Show notes View

project/hivuiMain/views/layout/components/allFuncMenu/index.vue

<template>
    <div class="boxMain" ref="allFuncMenu" @mouseenter="showBox" @mouseleave="hideBox" :style="allFuncMenuStyle">
        <div class="searchBox">
            <input type="text" placeholder="请输入关键词" 
            v-model.trim="searchWord" 
            @keyup="handleSeachKeyUp"
            />
            <i class="iconfont icon-search"></i>                   
        </div>
        <div ref="listBox" class="listBox" :style="listBoxStyle">
            <ul class="level1List" v-if="searchWord==''">
                <li v-for=" (item1,index) in menus" :key="'level1-'+index" :class="item1.type!='dir'&&!item1.children&&'funcBtn'" :title="item1.type!='dir'?item1.name:''" @click="funcClick(item1)">
                    <itemIcon :item="item1"></itemIcon>
                    <span>{{item1.name}}</span>
                    <ul class="level2List" v-if="item1.children">
                        <li v-for=" (item2,index) in item1.children" :key="'level2-'+index" :class="item2.type!='dir'&&!item2.children&&'funcBtn'" :title="item2.type!='dir'?item2.name:''" @click="funcClick(item2)">
                            <itemIcon :item="item2"></itemIcon>
                            <span>{{item2.name}}</span>
                            
                            <ul class="level3List" v-if="item2.children">
                                <template v-for=" (item3,index) in item2.children">
                                    <menus :class="'funcBtn level3Dir'" :key="'level3-'+index" :level="0" :parent="allFuncMenu" :menuitem="item3" v-if="item3.isShow&&item3.children&&item3.children.length"></menus>
                                    <li v-else :class="'funcBtn'" :key="'level3-'+index" :title="item3.type!='dir'?item3.name:''" @click="funcClick(item3)" >
                                        <itemIcon :item="item3"></itemIcon>
                                        <span>{{item3.name}}</span>
                                    </li>
                                </template>
                                    
                            </ul>
                        </li>
                    </ul>
                </li>
                <li v-show="menus.length==0">
                    {{$lang('noData')||'暂无数据'}}
                </li>
            </ul>
            
            <ul class="searchResultList" v-else>
                <li v-for=" (searchItem,index) in searchList" :key="'search-'+index" :data-index="index" :class="seldIndex==index&&'itemSeld'" :title="searchItem.name" @click="funcClick(searchItem)">
                    <itemIcon :item="searchItem"></itemIcon>
                    <span>{{searchItem.name}}</span>
                </li>
                <li v-show="searchList.length==0">
                    {{$lang('noData')||'暂无数据'}}
                </li>
            </ul>
        </div>
        
    </div>
</template>
<script>
import pinyin from 'js-pinyin';
import itemIcon from './itemIcon';
import menus from './menus';
export default {
    inject:['addTab'],
    provide(){
        let me=this;
        return {
            showAllFuncBox(){
                me.showBox();
            },
            hideAllFuncBox(){
                me.hideBox();
            },
        }
    },
    props:{
        triggerObj:{
            type:Object,
        }
    },
    components:{
        itemIcon,menus
    },
    data(){
        return {
            searchWord:"",
            searchList:[],
            seldIndex:0,
            allFuncMenuStyle:"",
            listBoxStyle:"",
            loading:false,
            loadingTime:200,
            triggerTimer:null,
        };
    },
    computed:{
        menus(){
            //调整排序，功能页面排前面
            function sort(list){
                let dirList=list.filter(item=>{
                    return item.type=="dir";
                });
                let funcList=list.filter(item=>{
                    return item.type!="dir";
                });
                list=funcList.concat(dirList);
                for(let item of list){
                    if(item.type=='dir'){
                        if(item.children&&item.children.length>0){
                            item.children=sort(item.children);
                        }
                    }
                }
                return list;
            }
            return sort(this.$store.getters.menus);
        },
    },
    watch:{ 
        searchWord(newVal,oldVal){
            this.seldIndex=0;
            this.doSearch(newVal);
        }
    },
    mounted(){
        let me=this;
        
    },
    methods:{ 
        //获取搜索列表数据
        doSearch(cnKey){
            let me=this;
            let list = [],
                records = me.$store.getters.menusList;
            let py = pinyin.getCamelChars(cnKey).toLocaleLowerCase();
            let  re = new RegExp("^[a-zA-Z]+$");
            for(let i=0,l=records.length;i<l;i++){
                let item = records[i];
                if(re.test(cnKey)){
                     let y = pinyin.getCamelChars(item.name).toLocaleLowerCase();
                    if(y.indexOf(py)>-1 && item.type!='dir'){
                        list.push(item);
                    }  
                }else{
                     if(item.name.indexOf(cnKey)>-1 && item.type!='dir'){
                        list.push(item);
                        continue;
                    }  
                }   
            }
            me.$set(me,'searchList',list);
            me.$nextTick(()=>{
                me.countHeight();
                me.$refs.listBox.scrollTo({
                    top:0,
                });
            });
        },
        //搜索时方向键及回车事件
        handleSeachKeyUp(evt){
            let colNum=4;
            let me=this;
            if(evt.keyCode==37){//左方向
                if(me.seldIndex==0){
                    me.seldIndex=me.searchList.length-1;
                }else{
                    me.seldIndex--;
                }
                me.scrollSearchList("up");
            }
            if(evt.keyCode==38){//上方向
                if(me.seldIndex-colNum<0){
                    let re1=me.searchList.length%colNum;
                    let re2=(me.seldIndex+1)%colNum;
                    let count=re2>re1 ? (colNum-re2+re1) : (re1-re2);
                    me.seldIndex=((me.searchList.length-count>0) ? me.searchList.length-count : me.searchList.length) - 1;
                }else{
                    me.seldIndex-=colNum;
                }
                me.scrollSearchList("up");
            }
            if(evt.keyCode==39){//右方向
                if(me.seldIndex<me.searchList.length-1){
                    me.seldIndex++;
                }else{
                    me.seldIndex=0;
                }
                me.scrollSearchList("down");
            }
            if(evt.keyCode==40){//下方向
                if(me.seldIndex+colNum>me.searchList.length-1){
                    me.seldIndex=(me.seldIndex+colNum)%colNum;
                }else{
                    me.seldIndex+=colNum;
                }
                me.scrollSearchList("down");
            }
            if(evt.keyCode==13){//回车
                let item = me.searchList[me.seldIndex];
                if(item.type== "link"){
                    window.open(item.resUrl,item.name);
                    return;
                }
                me.addTab(item);//inject 提供的方法只能 传一个参数
                me.searchWord = "";
                me.seldIndex = 0;
                me.$refs.listBox.scrollTo({
                    top:0,
                });
                me.hideBox();
            }
        },
        //滚动搜索菜单列表
        scrollSearchList(type){
            let me=this;
            let _scrollTop=0;
            let listDom=me.$refs.listBox;
            let listDomObj=listDom.getBoundingClientRect();
            let currItemDom=listDom.querySelector("[data-index='"+me.seldIndex+"']");
            let currItemDomObj=currItemDom.getBoundingClientRect();
            //在可视范围内不滚动
            if(currItemDomObj.top+currItemDomObj.height<(listDomObj.height+listDomObj.top) && currItemDomObj.top>listDomObj.top){
                return;
            }
            if(type=="up"){
                _scrollTop=currItemDomObj.top-listDomObj.top+listDom.scrollTop;
            }else if(type=="down"){
                _scrollTop=currItemDomObj.top+currItemDomObj.height-listDomObj.top-listDomObj.height+listDom.scrollTop;
            }
            me.$refs.listBox.scrollTo({
                top:_scrollTop,
                behavior:"smooth",
            });
        },
        //菜单功能项点击事件
        funcClick(item){
            if(item.type!="dir"&&item.resUrl){
                if(item.type== "link"){
                    window.open(item.resUrl,item.name);
                    return;
                }
                this.addTab(item);//inject 提供的方法只能 传一个参数
                this.hideBox();
            }
        },
        //显隐共用样式（设置定位）
        commonFunc(){
            let me=this;
            let btnOffset=me.triggerObj;
            let ww=window.outerWidth;
            let boxleft=btnOffset.left+me.$refs.allFuncMenu.offsetWidth;
            me.isShowAllFuncMenu=me.isShowAllFuncMenu?false:true;
            me.allFuncMenuStyle=`top:${btnOffset.top+btnOffset.height}px;`;
            if(boxleft>ww){
                me.allFuncMenuStyle+=`right:10px;`;
            }else{
                me.allFuncMenuStyle+=`left:${btnOffset.left}px;`;
            }
        },
        //计算高度
        countHeight(){
            let me=this;
            let wh=window.outerHeight;
            let listContentH=me.$refs.listBox.children[0].scrollHeight+50;
            let boxheight=listContentH > (wh/2) ? wh/2 : listContentH;
            me.allFuncMenuStyle+=`opacity:1;z-index:99;height:${boxheight+2}px;`;//2:弹窗边框
            me.listBoxStyle=`height:${boxheight-50}px;`;//50:搜索框高度
        },
        //显示弹窗
        showBox(){
            let me=this;
            me.commonFunc();
            me.countHeight();
            me.loading=true;
            clearTimeout(me.triggerTimer);
            me.triggerTimer=setTimeout(()=>{
                me.loading=false;
            },me.loadingTime);
        },
        //隐藏弹窗
        hideBox(){
            let me=this;
            me.commonFunc();
            //me.loading=true;
            me.allFuncMenuStyle+=`z-index:99;`;
            setTimeout(()=>{
                if(!me.loading){
                    me.allFuncMenuStyle='';
                    me.loading=false;
                }
            },me.loadingTime);
        },
    }
}
</script>
<style lang="less" scoped>
    .boxMain{
        position:absolute;
        top:-9999px;
        z-index:-1;
        opacity: 0;
        transition-duration: 0.2s;
        transition-property: opacity,height;
        width: 800px;
        height:0;
        background-color: #fff;
        border:1px solid #ddd;
        box-shadow: 0 2px 10px 0 #ddd;
        padding:50px 0px 0;
        box-sizing: border-box;
        overflow: auto;
        *{
            box-sizing: border-box;
        }
        ul,li{
            padding: 0;
            margin:0;
            list-style: none;
        }
        ul{
            display: flex;
            flex-wrap: wrap;
            width:100%;
        }
        li{
            flex:0 0 100%;
            color:#333;
            span{
                overflow: hidden;
                text-overflow: ellipsis;
            }
        }
        &.show{
            z-index:99;
            opacity: 1;
        }
        li.funcBtn{
            display: flex;
            align-items: center;
            flex:0 0 25%;
            white-space: nowrap;
            overflow: hidden;
            text-overflow: ellipsis;
            padding-right:20px;
            color:#888;
            &:hover>span{
                color:#06c;
                cursor: pointer;
            }
        }
        .searchBox{
            position: absolute;
            top:0;
            left:0;
            right:0;
            margin:auto;
            width: calc(100% - 60px);
            background-color: #fff;
            input{
                border:none;
                border-bottom:1px solid #ddd;
                padding:0 10px 0 40px;
                line-height: 48px;
                width: 100%;
                outline: none;
                &::placeholder{
                    color:#ccc;
                }
            }
            i{
                position: absolute;
                top:0;
                bottom:0;
                left:10px;
                margin:auto;
                width:20px;
                height:20px;
                line-height:20px;
                text-align: center;
                font-size: 20px;
                font-weight: bold;
                color:#ccc;
            }
        }
        .listBox{
            overflow: auto;
            padding:0 30px;
        }
        .level1List{
            margin-bottom:30px;
            padding: 10px;
            &>li{
                line-height: 36px;
                font-size: 18px;
                font-weight: bold;
            }
        }
        .level2List{
            padding: 10px;
            &>li{
                line-height: 32px;
                font-size: 14px;
                font-weight: bold;
                &.funcBtn{
                    font-size: 13px;
                    font-weight: normal;
                }
            }
        }
        .level3List{
            padding:0px 0 10px;
            display:flex;
            flex-wrap: wrap;
            &>li{
                white-space: nowrap;
                overflow: hidden;
                text-overflow: ellipsis;
                line-height: 32px;
                font-size: 13px;
                &.funcBtn{
                    font-weight: normal;
                }
            }
            .level3Dir{
                color:#333;
            }
        }
        .searchResultList{
            width: 100%;
            display:flex;
            flex-wrap: wrap;
            padding-bottom:30px;
            li{
                flex:0 0 25%;
                white-space: nowrap;
                overflow: hidden;
                text-overflow: ellipsis;
                line-height: 32px;
                font-size: 14px;
                display: flex;
                align-items: center;
                cursor: pointer;
                &:hover{
                    color:#06c;
                }
            }
            .itemSeld{
                color:#f00;
            }
        }
    }
</style>

<template>
    <div class="boxMain" ref="allFuncMenu" @mouseenter="showBox" @mouseleave="hideBox" :style="allFuncMenuStyle">
        <div class="searchBox">
            <input type="text" placeholder="请输入关键词" 
            v-model.trim="searchWord" 
            @keyup="handleSeachKeyUp"
            />
            <i class="iconfont icon-search"></i>                   
        </div>
        <div ref="listBox" class="listBox" :style="listBoxStyle">
            <ul class="level1List" v-if="searchWord==''">
                <li v-for=" (item1,index) in menus" :key="'level1-'+index" :class="item1.type!='dir'&&'funcBtn'" :title="item1.type!='dir'?item1.name:''" @click="funcClick(item1)">
                    <itemIcon :item="item1"></itemIcon>
                    <span>{{item1.name}}</span>
                    <ul class="level2List" v-if="item1.children">
                        <li v-for=" (item2,index) in item1.children" :key="'level2-'+index" :class="item2.type!='dir'&&'funcBtn'" :title="item2.type!='dir'?item2.name:''" @click="funcClick(item2)">
                            <itemIcon :item="item2"></itemIcon>
                            <span>{{item2.name}}</span>
                            
                            <ul class="level3List" v-if="item2.children">
                                <template v-for=" (item3,index) in item2.children">
                                    <menus :class="'funcBtn level3Dir'" :key="'level3-'+index" :level="0" :parent="allFuncMenu" :menuitem="item3" v-if="item3.isShow&&item3.children&&item3.children.length"></menus>
                                    <li v-else :class="'funcBtn'" :key="'level3-'+index" :title="item3.type!='dir'?item3.name:''" @click="funcClick(item3)" >
                                        <itemIcon :item="item3"></itemIcon>
                                        <span>{{item3.name}}</span>
                                    </li>
                                </template>
                                    
                            </ul>
                        </li>
                    </ul>
                </li>
                <li v-show="menus.length==0">
                    {{$lang('noData')||'暂无数据'}}
                </li>
            </ul>
            
            <ul class="searchResultList" v-else>
                <li v-for=" (searchItem,index) in searchList" :key="'search-'+index" :data-index="index" :class="seldIndex==index&&'itemSeld'" :title="searchItem.name" @click="funcClick(searchItem)">
                    <itemIcon :item="searchItem"></itemIcon>
                    <span>{{searchItem.name}}</span>
                </li>
                <li v-show="searchList.length==0">
                    {{$lang('noData')||'暂无数据'}}
                </li>
            </ul>
        </div>
        
    </div>
</template>
<script>
import pinyin from 'js-pinyin';
import itemIcon from './itemIcon';
import menus from './menus';
export default {
    inject:['addTab'],
    provide(){
        let me=this;
        return {
            showAllFuncBox(){
                me.showBox();
            },
            hideAllFuncBox(){
                me.hideBox();
            },
        }
    },
    props:{
        triggerObj:{
            type:Object,
        }
    },
    components:{
        itemIcon,menus
    },
    data(){
        return {
            searchWord:"",
            searchList:[],
            seldIndex:0,
            allFuncMenuStyle:"",
            listBoxStyle:"",
            loading:false,
            loadingTime:200,
            triggerTimer:null,
        };
    },
    computed:{
        menus(){
            //调整排序，功能页面排前面
            function sort(list){
                let dirList=list.filter(item=>{
                    return item.type=="dir";
                });
                let funcList=list.filter(item=>{
                    return item.type!="dir";
                });
                list=funcList.concat(dirList);
                for(let item of list){
                    if(item.type=='dir'){
                        if(item.children&&item.children.length>0){
                            item.children=sort(item.children);
                        }
                    }
                }
                return list;
            }
            return sort(this.$store.getters.menus);
        },
    },
    watch:{ 
        searchWord(newVal,oldVal){
            this.seldIndex=0;
            this.doSearch(newVal);
        }
    },
    mounted(){
        let me=this;
        
    },
    methods:{ 
        //获取搜索列表数据
        doSearch(cnKey){
            let me=this;
            let list = [],
                records = me.$store.getters.menusList;
            let py = pinyin.getCamelChars(cnKey).toLocaleLowerCase();
            let  re = new RegExp("^[a-zA-Z]+$");
            for(let i=0,l=records.length;i<l;i++){
                let item = records[i];
                if(re.test(cnKey)){
                     let y = pinyin.getCamelChars(item.name).toLocaleLowerCase();
                    if(y.indexOf(py)>-1 && item.type!='dir'){
                        list.push(item);
                    }  
                }else{
                     if(item.name.indexOf(cnKey)>-1 && item.type!='dir'){
                        list.push(item);
                        continue;
                    }  
                }   
            }
            me.$set(me,'searchList',list);
            me.$nextTick(()=>{
                me.countHeight();
                me.$refs.listBox.scrollTo({
                    top:0,
                });
            });
        },
        //搜索时方向键及回车事件
        handleSeachKeyUp(evt){
            let colNum=4;
            let me=this;
            if(evt.keyCode==37){//左方向
                if(me.seldIndex==0){
                    me.seldIndex=me.searchList.length-1;
                }else{
                    me.seldIndex--;
                }
                me.scrollSearchList("up");
            }
            if(evt.keyCode==38){//上方向
                if(me.seldIndex-colNum<0){
                    let re1=me.searchList.length%colNum;
                    let re2=(me.seldIndex+1)%colNum;
                    let count=re2>re1 ? (colNum-re2+re1) : (re1-re2);
                    me.seldIndex=((me.searchList.length-count>0) ? me.searchList.length-count : me.searchList.length) - 1;
                }else{
                    me.seldIndex-=colNum;
                }
                me.scrollSearchList("up");
            }
            if(evt.keyCode==39){//右方向
                if(me.seldIndex<me.searchList.length-1){
                    me.seldIndex++;
                }else{
                    me.seldIndex=0;
                }
                me.scrollSearchList("down");
            }
            if(evt.keyCode==40){//下方向
                if(me.seldIndex+colNum>me.searchList.length-1){
                    me.seldIndex=(me.seldIndex+colNum)%colNum;
                }else{
                    me.seldIndex+=colNum;
                }
                me.scrollSearchList("down");
            }
            if(evt.keyCode==13){//回车
                let item = me.searchList[me.seldIndex];
                if(item.type== "link"){
                    window.open(item.resUrl,item.name);
                    return;
                }
                me.addTab(item);//inject 提供的方法只能 传一个参数
                me.searchWord = "";
                me.seldIndex = 0;
                me.$refs.listBox.scrollTo({
                    top:0,
                });
                me.hideBox();
            }
        },
        //滚动搜索菜单列表
        scrollSearchList(type){
            let me=this;
            let _scrollTop=0;
            let listDom=me.$refs.listBox;
            let listDomObj=listDom.getBoundingClientRect();
            let currItemDom=listDom.querySelector("[data-index='"+me.seldIndex+"']");
            let currItemDomObj=currItemDom.getBoundingClientRect();
            //在可视范围内不滚动
            if(currItemDomObj.top+currItemDomObj.height<(listDomObj.height+listDomObj.top) && currItemDomObj.top>listDomObj.top){
                return;
            }
            if(type=="up"){
                _scrollTop=currItemDomObj.top-listDomObj.top+listDom.scrollTop;
            }else if(type=="down"){
                _scrollTop=currItemDomObj.top+currItemDomObj.height-listDomObj.top-listDomObj.height+listDom.scrollTop;
            }
            me.$refs.listBox.scrollTo({
                top:_scrollTop,
                behavior:"smooth",
            });
        },
        //菜单功能项点击事件
        funcClick(item){
            if(item.type!="dir"&&item.resUrl){
                if(item.type== "link"){
                    window.open(item.resUrl,item.name);
                    return;
                }
                this.addTab(item);//inject 提供的方法只能 传一个参数
                this.hideBox();
            }
        },
        //显隐共用样式（设置定位）
        commonFunc(){
            let me=this;
            let btnOffset=me.triggerObj;
            let ww=window.outerWidth;
            let boxleft=btnOffset.left+me.$refs.allFuncMenu.offsetWidth;
            me.isShowAllFuncMenu=me.isShowAllFuncMenu?false:true;
            me.allFuncMenuStyle=`top:${btnOffset.top+btnOffset.height}px;`;
            if(boxleft>ww){
                me.allFuncMenuStyle+=`right:10px;`;
            }else{
                me.allFuncMenuStyle+=`left:${btnOffset.left}px;`;
            }
        },
        //计算高度
        countHeight(){
            let me=this;
            let wh=window.outerHeight;
            let listContentH=me.$refs.listBox.children[0].scrollHeight+50;
            let boxheight=listContentH > (wh/2) ? wh/2 : listContentH;
            me.allFuncMenuStyle+=`opacity:1;z-index:99;height:${boxheight+2}px;`;//2:弹窗边框
            me.listBoxStyle=`height:${boxheight-50}px;`;//50:搜索框高度
        },
        //显示弹窗
        showBox(){
            let me=this;
            me.commonFunc();
            me.countHeight();
            me.loading=true;
            clearTimeout(me.triggerTimer);
            me.triggerTimer=setTimeout(()=>{
                me.loading=false;
            },me.loadingTime);
        },
        //隐藏弹窗
        hideBox(){
            let me=this;
            me.commonFunc();
            //me.loading=true;
            me.allFuncMenuStyle+=`z-index:99;`;
            setTimeout(()=>{
                if(!me.loading){
                    me.allFuncMenuStyle='';
                    me.loading=false;
                }
            },me.loadingTime);
        },
    }
}
</script>
<style lang="less" scoped>
    .boxMain{
        position:absolute;
        top:-9999px;
        z-index:-1;
        opacity: 0;
        transition-duration: 0.2s;
        transition-property: opacity,height;
        width: 800px;
        height:0;
        background-color: #fff;
        border:1px solid #ddd;
        box-shadow: 0 2px 10px 0 #ddd;
        padding:50px 0px 0;
        box-sizing: border-box;
        overflow: auto;
        *{
            box-sizing: border-box;
        }
        ul,li{
            padding: 0;
            margin:0;
            list-style: none;
        }
        ul{
            display: flex;
            flex-wrap: wrap;
            width:100%;
        }
        li{
            flex:0 0 100%;
            color:#333;
            span{
                overflow: hidden;
                text-overflow: ellipsis;
            }
        }
        &.show{
            z-index:99;
            opacity: 1;
        }
        li.funcBtn{
            display: flex;
            align-items: center;
            flex:0 0 25%;
            white-space: nowrap;
            overflow: hidden;
            text-overflow: ellipsis;
            padding-right:20px;
            color:#888;
            &:hover>span{
                color:#06c;
                cursor: pointer;
            }
        }
        .searchBox{
            position: absolute;
            top:0;
            left:0;
            right:0;
            margin:auto;
            width: calc(100% - 60px);
            background-color: #fff;
            input{
                border:none;
                border-bottom:1px solid #ddd;
                padding:0 10px 0 40px;
                line-height: 48px;
                width: 100%;
                outline: none;
                &::placeholder{
                    color:#ccc;
                }
            }
            i{
                position: absolute;
                top:0;
                bottom:0;
                left:10px;
                margin:auto;
                width:20px;
                height:20px;
                line-height:20px;
                text-align: center;
                font-size: 20px;
                font-weight: bold;
                color:#ccc;
            }
        }
        .listBox{
            overflow: auto;
            padding:0 30px;
        }
        .level1List{
            margin-bottom:30px;
            padding: 10px;
            &>li{
                line-height: 36px;
                font-size: 18px;
                font-weight: bold;
            }
        }
        .level2List{
            padding: 10px;
            &>li{
                line-height: 32px;
                font-size: 14px;
                font-weight: bold;
                &.funcBtn{
                    font-size: 13px;
                    font-weight: normal;
                }
            }
        }
        .level3List{
            padding:0px 0 10px;
            display:flex;
            flex-wrap: wrap;
            &>li{
                white-space: nowrap;
                overflow: hidden;
                text-overflow: ellipsis;
                line-height: 32px;
                font-size: 13px;
                &.funcBtn{
                    font-weight: normal;
                }
            }
            .level3Dir{
                color:#333;
            }
        }
        .searchResultList{
            width: 100%;
            display:flex;
            flex-wrap: wrap;
            padding-bottom:30px;
            li{
                flex:0 0 25%;
                white-space: nowrap;
                overflow: hidden;
                text-overflow: ellipsis;
                line-height: 32px;
                font-size: 14px;
                display: flex;
                align-items: center;
                cursor: pointer;
                &:hover{
                    color:#06c;
                }
            }
            .itemSeld{
                color:#f00;
            }
        }
    }
</style>

Ignore Space Show notes View project/hivuiMain/views/layout/components/allFuncMenu/itemIcon.vue
<template> <div class="iconBox" v-if="iconType"> <i v-if="iconType=='iconfont'" :class="'icon iconfont '+(item.iconClass\|\|'icon-dealt')"></i> <img v-else-if="iconType=='img'" :src="review+'?relativePath='+item.iconClass" width="20" height="20"/> </div> </template> <script> export default { props:{ item:{ type:Object } }, components:{ }, data(){ return { review:window.HIVUI_SETTING.review, iconType:"", }; }, computed:{ }, watch:{ }, mounted(){ let me=this; if(me.item.type!='dir'&&!me.item.children){ if(me.item.iconClass){ if(me.item.iconClass.indexOf('.png')==-1 && me.item.iconClass.indexOf('.jpg')==-1){ me.iconType="iconfont"; }else{ me.iconType="img"; } }else{ me.iconType="iconfont"; } } }, methods:{ } } </script> <style lang="less" scoped> .iconBox{ display:flex; align-items: center; margin-right:5px; } </style> <template> <div class="iconBox" v-if="iconType"> <i v-if="iconType=='iconfont'" :class="'icon iconfont '+(item.iconClass\|\|'icon-dealt')"></i> <img v-else-if="iconType=='img'" :src="review+'?relativePath='+item.iconClass" width="20" height="20"/> </div> </template> <script> export default { props:{ item:{ type:Object } }, components:{ }, data(){ return { review:window.HIVUI_SETTING.review, iconType:"", }; }, computed:{ }, watch:{ }, mounted(){ let me=this; if(me.item.type!='dir'){ if(me.item.iconClass){ if(me.item.iconClass.indexOf('.png')==-1 && me.item.iconClass.indexOf('.jpg')==-1){ me.iconType="iconfont"; }else{ me.iconType="img"; } }else{ me.iconType="iconfont"; } } }, methods:{ } } </script> <style lang="less" scoped> .iconBox{ display:flex; align-items: center; margin-right:5px; } </style>

Ignore Space Show notes View

project/hivuiMain/views/layout/components/allFuncMenu/itemIcon.vue

<template>
    <div class="iconBox" v-if="iconType">
        <i v-if="iconType=='iconfont'" :class="'icon iconfont '+(item.iconClass||'icon-dealt')"></i>
        <img v-else-if="iconType=='img'" :src="review+'?relativePath='+item.iconClass"  width="20" height="20"/>
    </div>
</template>
<script>
export default {
    props:{
        item:{
            type:Object
        }
    },
    components:{
        
    },
    data(){
        return {
            review:window.HIVUI_SETTING.review,
            iconType:"",
        };
    },
    computed:{
        
    },
    watch:{ 
        
    },
    mounted(){
        let me=this;
        if(me.item.type!='dir'&&!me.item.children){
            if(me.item.iconClass){
                if(me.item.iconClass.indexOf('.png')==-1 && me.item.iconClass.indexOf('.jpg')==-1){
                    me.iconType="iconfont";
                }else{
                    me.iconType="img";
                }
            }else{
                me.iconType="iconfont";
            }
        }
    },
    methods:{ 
        
    }
}
</script>
<style lang="less" scoped>
    .iconBox{
        display:flex;
        align-items: center;
        margin-right:5px;
    }
</style>

<template>
    <div class="iconBox" v-if="iconType">
        <i v-if="iconType=='iconfont'" :class="'icon iconfont '+(item.iconClass||'icon-dealt')"></i>
        <img v-else-if="iconType=='img'" :src="review+'?relativePath='+item.iconClass"  width="20" height="20"/>
    </div>
</template>
<script>
export default {
    props:{
        item:{
            type:Object
        }
    },
    components:{
        
    },
    data(){
        return {
            review:window.HIVUI_SETTING.review,
            iconType:"",
        };
    },
    computed:{
        
    },
    watch:{ 
        
    },
    mounted(){
        let me=this;
        if(me.item.type!='dir'){
            if(me.item.iconClass){
                if(me.item.iconClass.indexOf('.png')==-1 && me.item.iconClass.indexOf('.jpg')==-1){
                    me.iconType="iconfont";
                }else{
                    me.iconType="img";
                }
            }else{
                me.iconType="iconfont";
            }
        }
    },
    methods:{ 
        
    }
}
</script>
<style lang="less" scoped>
    .iconBox{
        display:flex;
        align-items: center;
        margin-right:5px;
    }
</style>

Ignore Space Show notes View project/hivuiSam/App.vue
<template> <analysis-sam ref="sam" style="height: 100%;" :conf="conf"></analysis-sam> </template> <script> import { LoadUtil } from "./funclib/LoadUtil"; import { getToken } from "./utils/auth"; import { projectName, requestUrl } from "@birt/config"; import cmps from 'zhc-birt-cmps' import AnalysisSam from './components/analysisSam/Index.vue' export default { data() { return { birtModel: {}, VUE_APP_BASE_API: requestUrl, pn: projectName \|\| "birt", conf:{} }; }, components:{AnalysisSam}, methods: { // 动态加载报表模型方法 birtModelMethod(routePath, birtModelMethod, scope) { return new Promise((resolve, reject) => { let me = this; let token = getToken(); let vId = window.scpRequestData && window.scpRequestData.__viewItemId LoadUtil.loadJsBirtModel({ loadModelUrl: this.$HI.birtModel, routePath: routePath, token: token, pn: this.pn, vId: vId, }) .then((res) => { debugger try { let birtModel = getBirtModel(scope \|\| me, cmps.Tool) resolve(birtModel); } catch (e) { console.error(e); } }) .catch((e) => { reject(e); }); }); }, // 获取地址栏参数 getQueryVariable(variable) { var query = window.location.search.substring(1); var vars = query.split("&"); for (var i = 0; i < vars.length; i++) { var pair = vars[i].split("="); if (pair[0] == variable) { return pair[1]; } } return false; }, }, created() { var path = window.location.pathname; // 编译后多e5 if (window.HIVUI_SETTING) { var serverName = window.HIVUI_SETTING.serverName; if (serverName && path.startsWith(serverName)) { path = path.substring(serverName.length); } } let me = this; let token = getToken(); let vId = window.scpRequestData && window.scpRequestData.__viewItemId LoadUtil.loadJsBirtModel({ loadModelUrl: this.$HI.birtModel, routePath: path, token: token, pn: this.pn, vId: vId, }) .then((res) => { try { let birtModel = getBirtModel(me, cmps.Tool) me.conf = birtModel; if(me.conf.analyseFields && me.conf.analyseFields.length){ let havingForm = {} me.conf.analyseFields.forEach(item => { havingForm[item.prop] = { value: undefined, value2: undefined, label: item.label, sign: 'inRange' } }); me.conf.havingForm = JSON.parse(JSON.stringify(havingForm)) this.$refs['sam'].havingForm = havingForm this.$refs['sam'].pageSizes = me.conf.pageSizes \|\| [10,20,50,100] this.$refs['sam'].pageSize = me.conf.pageSize \|\| 100 } } catch (e) { console.error(e); } }) .catch((e) => { console.error(e); }); }, }; </script> <style> html,body{ height: 100%; } </style> <template> <analysis-sam style="height: 100%;" :conf="conf"></analysis-sam> </template> <script> import { LoadUtil } from "./funclib/LoadUtil"; import { getToken } from "./utils/auth"; import { projectName, requestUrl } from "@birt/config"; import cmps from 'zhc-birt-cmps' import AnalysisSam from './components/analysisSam/Index.vue' export default { data() { return { birtModel: {}, VUE_APP_BASE_API: requestUrl, pn: projectName \|\| "birt", conf:{} }; }, components:{AnalysisSam}, methods: { // 动态加载报表模型方法 birtModelMethod(routePath, birtModelMethod, scope) { return new Promise((resolve, reject) => { let me = this; let token = getToken(); let vId = window.scpRequestData && window.scpRequestData.__viewItemId LoadUtil.loadJsBirtModel({ loadModelUrl: this.$HI.birtModel, routePath: routePath, token: token, pn: this.pn, vId: vId, }) .then((res) => { debugger try { let birtModel = getBirtModel(scope \|\| me, cmps.Tool) resolve(birtModel); } catch (e) { console.error(e); } }) .catch((e) => { reject(e); }); }); }, // 获取地址栏参数 getQueryVariable(variable) { var query = window.location.search.substring(1); var vars = query.split("&"); for (var i = 0; i < vars.length; i++) { var pair = vars[i].split("="); if (pair[0] == variable) { return pair[1]; } } return false; }, }, created() { var path = window.location.pathname; // 编译后多e5 if (window.HIVUI_SETTING) { var serverName = window.HIVUI_SETTING.serverName; if (serverName && path.startsWith(serverName)) { path = path.substring(serverName.length); } } let me = this; let token = getToken(); let vId = window.scpRequestData && window.scpRequestData.__viewItemId LoadUtil.loadJsBirtModel({ loadModelUrl: this.$HI.birtModel, routePath: path, token: token, pn: this.pn, vId: vId, }) .then((res) => { try { let birtModel = getBirtModel(me, cmps.Tool) me.conf = birtModel; console.log("conf", me.conf); } catch (e) { console.error(e); } }) .catch((e) => { console.error(e); }); }, }; </script> <style> html,body{ height: 100%; } </style>

Ignore Space Show notes View

project/hivuiSam/App.vue

<template>
    <analysis-sam ref="sam" style="height: 100%;" :conf="conf"></analysis-sam>
</template>
<script>
import { LoadUtil } from "./funclib/LoadUtil";
import { getToken } from "./utils/auth";
import { projectName, requestUrl } from "@birt/config";
import cmps from 'zhc-birt-cmps'
import AnalysisSam from './components/analysisSam/Index.vue'
export default {
  data() {
    return {
      birtModel: {},
      VUE_APP_BASE_API: requestUrl,
      pn: projectName || "birt",
      conf:{}
    };
  },
  components:{AnalysisSam},
  methods: {
    // 动态加载报表模型方法
    birtModelMethod(routePath, birtModelMethod, scope) {
      return new Promise((resolve, reject) => {
        let me = this;
        let token = getToken();
        let vId = window.scpRequestData && window.scpRequestData.__viewItemId
        LoadUtil.loadJsBirtModel({
          loadModelUrl: this.$HI.birtModel,
          routePath: routePath,
          token: token,
          pn: this.pn,
          vId: vId,
        })
          .then((res) => {
            debugger
            try {
              let birtModel = getBirtModel(scope || me, cmps.Tool)
              resolve(birtModel);
            } catch (e) {
              console.error(e);
            }
          })
          .catch((e) => {
            reject(e);
          });
      });
    },
    // 获取地址栏参数
    getQueryVariable(variable) {
      var query = window.location.search.substring(1);
      var vars = query.split("&");
      for (var i = 0; i < vars.length; i++) {
        var pair = vars[i].split("=");
        if (pair[0] == variable) {
          return pair[1];
        }
      }
      return false;
    },
  },
  created() {
    var path = window.location.pathname;
    // 编译后多e5
    if (window.HIVUI_SETTING) {
      var serverName = window.HIVUI_SETTING.serverName;
      if (serverName && path.startsWith(serverName)) {
        path = path.substring(serverName.length);
      }
    }
    let me = this;
    let token = getToken();
    let vId = window.scpRequestData && window.scpRequestData.__viewItemId
    LoadUtil.loadJsBirtModel({
      loadModelUrl: this.$HI.birtModel,
      routePath: path,
      token: token,
      pn: this.pn,
      vId: vId,
    })
      .then((res) => {
        try {
          let birtModel = getBirtModel(me, cmps.Tool)
          me.conf = birtModel;
          if(me.conf.analyseFields && me.conf.analyseFields.length){
            let havingForm = {}
            me.conf.analyseFields.forEach(item => {
                havingForm[item.prop] = {
                value: undefined,
                value2: undefined,
                label: item.label,
                sign: 'inRange'
              }
            });
            me.conf.havingForm = JSON.parse(JSON.stringify(havingForm)) 
            this.$refs['sam'].havingForm = havingForm
            this.$refs['sam'].pageSizes = me.conf.pageSizes || [10,20,50,100]
            this.$refs['sam'].pageSize = me.conf.pageSize || 100
          }
        } catch (e) {
          console.error(e);
        }
      })
      .catch((e) => {
        console.error(e);
      });
  },
};
</script>
<style>
html,body{
  height: 100%;
}
</style>

<template>
    <analysis-sam style="height: 100%;" :conf="conf"></analysis-sam>
</template>
<script>
import { LoadUtil } from "./funclib/LoadUtil";
import { getToken } from "./utils/auth";
import { projectName, requestUrl } from "@birt/config";
import cmps from 'zhc-birt-cmps'
import AnalysisSam from './components/analysisSam/Index.vue'
export default {
  data() {
    return {
      birtModel: {},
      VUE_APP_BASE_API: requestUrl,
      pn: projectName || "birt",
      conf:{}
    };
  },
  components:{AnalysisSam},
  methods: {
    // 动态加载报表模型方法
    birtModelMethod(routePath, birtModelMethod, scope) {
      return new Promise((resolve, reject) => {
        let me = this;
        let token = getToken();
        let vId = window.scpRequestData && window.scpRequestData.__viewItemId
        LoadUtil.loadJsBirtModel({
          loadModelUrl: this.$HI.birtModel,
          routePath: routePath,
          token: token,
          pn: this.pn,
          vId: vId,
        })
          .then((res) => {
            debugger
            try {
              let birtModel = getBirtModel(scope || me, cmps.Tool)
              resolve(birtModel);
            } catch (e) {
              console.error(e);
            }
          })
          .catch((e) => {
            reject(e);
          });
      });
    },
    // 获取地址栏参数
    getQueryVariable(variable) {
      var query = window.location.search.substring(1);
      var vars = query.split("&");
      for (var i = 0; i < vars.length; i++) {
        var pair = vars[i].split("=");
        if (pair[0] == variable) {
          return pair[1];
        }
      }
      return false;
    },
  },
  created() {
    var path = window.location.pathname;
    // 编译后多e5
    if (window.HIVUI_SETTING) {
      var serverName = window.HIVUI_SETTING.serverName;
      if (serverName && path.startsWith(serverName)) {
        path = path.substring(serverName.length);
      }
    }
    let me = this;
    let token = getToken();
    let vId = window.scpRequestData && window.scpRequestData.__viewItemId
    LoadUtil.loadJsBirtModel({
      loadModelUrl: this.$HI.birtModel,
      routePath: path,
      token: token,
      pn: this.pn,
      vId: vId,
    })
      .then((res) => {
        try {
          let birtModel = getBirtModel(me, cmps.Tool)
          me.conf = birtModel;
          console.log("conf", me.conf);
        } catch (e) {
          console.error(e);
        }
      })
      .catch((e) => {
        console.error(e);
      });
  },
};
</script>
<style>
html,body{
  height: 100%;
}
</style>

Ignore Space Show notes View project/hivuiSam/components/analysisSam/Index.vue
<template> <div class="container"> <!-- 工具条 --> <div class="btn-toolbar"> <!-- 后退 --> <el-dropdown split-button :size="size" :class="{disabled: backDisabled}" :disabled="backDisabled" @command="backCommand" @click="backClick"> <i class="el-icon-back"></i>后退 <el-dropdown-menu slot="dropdown"> <el-dropdown-item v-for="(item,index) in deepArr" :key="item.prop" :command="index" v-if="index < curIndex">{{ item.label }}</el-dropdown-item> </el-dropdown-menu> </el-dropdown> <!-- 前进 --> <el-dropdown split-button :size="size" :class="{disabled: goDisabled}" :disabled="goDisabled" @command="goCommand" @click="goClick"> <i class="el-icon-right"></i>前进 <el-dropdown-menu slot="dropdown"> <el-dropdown-item v-for="(item,index) in deepArr" :key="item.prop" :command="index" v-if="index > curIndex">{{ item.label }}</el-dropdown-item> </el-dropdown-menu> </el-dropdown> <!-- 排序 --> <el-dropdown split-button :size="size" class="sort" @command="sortClick"> <i class="el-icon-sort"></i>排序 <el-dropdown-menu slot="dropdown"> <el-dropdown-item :command="-1">不排序</el-dropdown-item> <el-dropdown-item v-for="(item, index) in sortArr" :key="item.prop" :command="index">{{ item.label }} <i class="el-icon-sort-down" :class="{ sortActive: index == sortIndex && sortType =='desc' }" @click="sortDown"></i> <i class="el-icon-sort-up" :class="{ sortActive: index == sortIndex && sortType =='asc' }" @click="sortUp"></i> </el-dropdown-item> </el-dropdown-menu> </el-dropdown> <!-- 列设置 --> <el-button icon="el-icon-setting" :size="size" @click="analysisClick">列设置</el-button> <!-- 图表 --> <el-dropdown :size="size" @command="chartTypeChange"> <el-button :size="size"> <i class="el-icon-s-data"></i> 图表<i class="el-icon-arrow-down el-icon--right"></i> </el-button> <el-dropdown-menu slot="dropdown"> <el-dropdown-item command="table">表格</el-dropdown-item> <el-dropdown-item command="pie">饼图</el-dropdown-item> <el-dropdown-item command="bar">柱图</el-dropdown-item> <el-dropdown-item command="line">线图</el-dropdown-item> <el-dropdown-item command="area">区域图</el-dropdown-item> </el-dropdown-menu> </el-dropdown> <!-- 刷新 --> <el-button icon="el-icon-refresh" :size="size" @click="refresh">刷新</el-button> <!-- 分析记录 --> <el-popover placement="bottom" popper-class="recordPop" v-model="recordVisible"> <el-table :data="recordData" @row-dblclick="recordDblClick" @selection-change="handleSelectionChange"> <el-table-column type="selection" width="55"> </el-table-column> <el-table-column min-width="150" prop="name" label="方案名称"> <template slot-scope="scope"> <el-input v-if="scope.row.isEdit" v-model="scope.row.name"></el-input> <span v-else>{{ scope.row.name }}</span> </template> </el-table-column> <el-table-column width="100" prop="simple" label="缩写"> <template slot-scope="scope"> <el-input v-model="scope.row.simple"></el-input> </template> </el-table-column> <el-table-column label="操作" width="150"> <template slot-scope="scope"> <el-button size="mini" type="text" v-if="!scope.row.isEdit" @click="handleEdit(scope.$index, scope.row)">编辑</el-button> <el-button size="mini" type="text" v-else @click="handleConfirm(scope.$index, scope.row)">确定</el-button> <el-button size="mini" type="text" style="color:red;" @click.stop="handleDelete(scope.$index, scope.row)">删除</el-button> </template> </el-table-column> </el-table> <el-button type="primary" size="mini" icon="el-icon-check" style="margin: 10px 0 0;" @click.stop="doClick" :disabled="btnDisabled">执行叠加</el-button> <el-button slot="reference" icon="el-icon-edit-outline" :size="size">分析记录</el-button> </el-popover> <!-- 统计方案 --> <el-popover placement="bottom" v-model="schemeVisible"> <el-table size="mini" :data="schemeData" @row-click="schemeRowClick"> </el-table-column> <el-table-column width="150" prop="FSCHEMENAME" label="方案列表"></el-table-column> <el-table-column label="操作" width="150"> <template slot-scope="scope"> <el-button size="mini" type="text" style="color:red;" @click.stop="handleSchemeDelete(scope.$index, scope.row)">删除</el-button> </template> </el-table-column> </el-table> <el-button slot="reference" icon="el-icon-edit-outline" :size="size" @click="showSchemeData">方案列表</el-button> </el-popover> <!-- 叠加 --> <el-checkbox v-model="superposition" label="叠加" border :size="size" ></el-checkbox> <!-- 透视 --> <el-checkbox v-model="perspective" label="直接透视" border :size="size" ></el-checkbox> <el-button icon="el-icon-download" :size="size" :disabled="this.data && this.data.length == 0" :loading="exportLoading" @click="exportExcel">导出excel</el-button> <el-button icon="el-icon-save" :loading="schemeLoading" @click="saveScheme">保存方案</el-button> </div> <!-- 内容区 --> <hi-layout :is-fit="true" style="heiht: 100%;"> <!-- 右侧查询面板 --> <hi-layout-right size="300" title="过滤条件"> <div style="height: calc( 100% - 342px );overflow: auto;border:none;"> <birt-work-book style="min-height: calc( 100% - 342px );" :conf="birtModelRight" :ref="birtModelRight.controlId" class="birtModelRight" ></birt-work-book> </div> <el-divider>汇总条件</el-divider> <div style="height: 180px;overflow:auto;"> <el-form @submit.native.prevent ref="havingForm" style="padding: 10px 10px 0 0;" :model="havingForm" label-width="80px" > <el-form-item v-for="(val,name,index) in havingForm" :key="name"> <span slot="label" :title="val.label"> {{ val.label }} </span> <el-col :span="10"> <el-input type="number" v-model="havingForm[name].value" size="mini" controls-position="right" @change="handleChange" :min="0"></el-input> </el-col> <el-col class="line" :span="2">-</el-col> <el-col :span="10"> <el-input type="number" v-model="havingForm[name].value2" size="mini" controls-position="right" @change="handleChange" :min="0"></el-input> </el-col> <el-col class="line" :span="2" style="text-align:center;"> <el-button v-if="val.sign == 'inRange'" size="mini" type="text" @click="signChange(name,'outRange')">内</el-button> <el-button v-else size="mini" type="text" @click="signChange(name,'inRange')">外</el-button> </el-col> </el-form-item> </el-form> </div> <el-form @submit.native.prevent ref="groupForm" style="padding: 10px 10px 0 0;" :model="groupForm" label-width="80px" > <el-form-item label="分组条件" prop="prop"> <i class="el-icon-edit" @click="showtransfer"></i> <el-select v-model="groupForm.prop" style="width: 100%;" placeholder="请选择分组条件"> <el-option v-for="item in groupFields" :label="item.label" :value="item.prop" :key="item.prop" ></el-option> </el-select> </el-form-item> <el-form-item> <el-button type="primary" size="mini" :loading="loading" @click="doCount" >执行查询</el-button > <el-button size="mini" @click="reset">重置</el-button> </el-form-item> </el-form> </hi-layout-right> <!-- 图表展示区 --> <hi-layout-center style="heiht: 100%;"> <div class="depth-analysis"> <span>深度分析:</span> <el-breadcrumb separator-class="el-icon-arrow-right" style="padding: 0 0 0 10px;" > <el-breadcrumb-item v-for="(item,index) in deepArr" :key="item.prop"> <span v-if="item.label.includes(',') && item.selectVal" @click="breadcrumbClick(item.prop)" :class="{ deepActive: index == curIndex }" style="cursor: pointer;"> <span v-for="(it, i) in item.label.split(',')"> {{ it }} <span style="color: rgb(255, 102, 0);margin-left:2px;" v-if="index < curIndex">{{ item.selectVal.split(',')[i] }}<span v-if="i < item.label.split(',').length - 1">,</span></span> </span> </span> <span v-else @click="breadcrumbClick(item.prop)" :class="{ deepActive: index == curIndex }" style="cursor: pointer;"> {{ item.label }} <span style="color: rgb(255, 102, 0);margin-left:2px;" v-if="index < curIndex">{{ item.selectVal }}</span> </span> </el-breadcrumb-item> </el-breadcrumb> </div> <div v-if="showDetail" style="height: calc( 100% - 100px )"> <el-table :data="data" ref="table" height="100%" border stripe :show-summary="showSummary" :summary-method="getSummaries" header-row-class-name="tableHeader" style="width: 100%" > <el-table-column v-if="showIndex" type="index"> </el-table-column> <el-table-column v-for="item in tableColumns" :key="item.prop" :prop="item.prop" :label="item.label" > </el-table-column> </el-table> <el-pagination @size-change="handleSizeChange" @current-change="handleCurrentChange" :current-page="currentPage" :page-sizes="[10, 20, 50, 100]" :page-size="pageSize" layout="total, sizes, prev, pager, next, jumper" :total="total" > </el-pagination> </div> <div v-if="!showDetail && chartType == 'table'" style="height: calc( 100% - 100px )"> <el-table :data="data" ref="table" height="100%" border stripe @row-dblclick="rowDblclick" :show-summary="showSummary" :summary-method="getSummaries" header-row-class-name="tableHeader" style="width: 100%" > <el-table-column v-if="showIndex" type="index"> </el-table-column> <el-table-column v-for="item in tableColumns" :key="item.prop" :prop="item.prop" :label="item.label" > </el-table-column> </el-table> <el-pagination @size-change="handleSizeChange" @current-change="handleCurrentChange" :current-page="currentPage" :page-sizes="pageSizes" :page-size="pageSize" layout="total, sizes, prev, pager, next, jumper" :total="total" > </el-pagination> </div> <Pie-chart style="height: calc( 100% - 100px )" v-else-if="!showDetail && chartType == 'pie'" ref="chartConf" :conf="chartConf" ></Pie-chart> <Bar-chart style="height: calc( 100% - 100px )" v-else-if="!showDetail && chartType == 'bar'" ref="chartConf" :conf="chartConf" ></Bar-chart> <Line-chart style="height: calc( 100% - 100px )" v-else-if="!showDetail && chartType == 'line'" ref="chartConf" :conf="chartConf" ></Line-chart> <Line-chart style="height: calc( 100% - 100px )" v-else-if="!showDetail && chartType == 'area'" ref="chartConf" :conf="chartConf" ></Line-chart> </hi-layout-center> </hi-layout> <!-- 分析列 --> <el-dialog :visible.sync="analysisVisible" title="分析列设置" :height="500"> <el-table :data="analysisData" size="small" :height="400"> <el-table-column prop="countField" label="统计字段"> </el-table-column> <el-table-column prop="tableColumn" label="网格列" align="center"> <template slot="header" slot-scope="{row}"> <el-checkbox v-model="tableColumnCheck" @change="handelCheckAll('tableColumn')" label="网格列"></el-checkbox> </template> <template slot-scope="{row}"> <el-checkbox v-model="row.tableColumn"></el-checkbox> </template> </el-table-column> <el-table-column prop="tableColumn" label="网格合计列" align="center"> <template slot="header" slot-scope="{row}"> <el-checkbox v-model="tableColumnCountCheck" @change="handelCheckAll('tableColumnCount')" label="网格合计列"></el-checkbox> </template> <template slot-scope="{row}"> <el-checkbox v-model="row.tableColumnCount"></el-checkbox> </template> </el-table-column> <el-table-column prop="tableColumn" label="图表列" align="center"> <template slot="header" slot-scope="{row}"> <el-checkbox v-model="chartColumnCheck" @change="handelCheckAll('chartColumn')" label="图表列"></el-checkbox> </template> <template slot-scope="{row}"> <el-checkbox v-model="row.chartColumn"></el-checkbox> </template> </el-table-column> <el-table-column prop="chartColumnCount" label="图表列汇总" align="center"> <template slot="header" slot-scope="{row}"> <el-checkbox v-model="chartColumnCountCheck" @change="handelCheckAll('chartColumnCount')" label="图表列汇总"></el-checkbox> </template> <template slot-scope="{row}"> <el-checkbox v-model="row.chartColumnCount"></el-checkbox> </template> </el-table-column> </el-table> </el-dialog> <!-- 分析字段 --> <el-dialog :visible.sync="analysisFieldsVisible" title="选择分析字段" :height="500"> <Pie-chart style="height: 400px;" ref="analysisChart" :conf="analysisChartConf" ></Pie-chart> </el-dialog> <!-- 穿梭框(修改分组字段) --> <el-dialog :visible.sync="transferVisible" title="选择分组字段" :height="500" width="640px" center @close="transferClose"> <el-transfer class="sam" v-model="groupFieldsEdit" :data="conf.groupFields" :titles="['来源字段', '目标字段']" target-order="push" :props="{ key: 'prop', label: 'label' }" style="width: 100%;padding: 20px;"> <span slot-scope="{ option }">{{ option.label }} <el-button style="margin-left: 10px;" icon="el-icon-top" type="primary" size="mini" circle @click.stop="transferUp(option)"></el-button> <el-button icon="el-icon-bottom" type="primary" size="mini" circle @click.stop="transferDown(option)"></el-button> </span> </el-transfer> <span slot="footer" class="dialog-footer"> <el-button @click="transferClose" size="small">取消</el-button> <el-button type="primary" size="small" @click="transferConfirm">确定</el-button> </span> </el-dialog> </div> </template> <script> import { QueryStyleFactory } from "../templates/query-panel/QueryStyleFactory"; import { GridSingleSelect } from "../templates/GridSingleSelect"; import { getToken } from "../../utils/auth"; import _ from 'lodash' export default { name: "AnalysisSam", props:{ conf:{ type: Object, } }, computed: { // 后退 backDisabled(){ return this.curIndex === 0 }, // 前进 goDisabled(){ return this.curIndex == this.deepArr.length - 1 }, // 表格列 tableColumns() { if(this.showDetail){ return this.dataFields }else{ // 组合分组条件分成多个列 let list = this.curGroupField.split(',') // 获取当前分组列 let curGroupArr = this.groupFields.filter(item =>{ return list.includes(item.prop) }) let arr = [] // 执行叠加后，网格添加冗余字段 if(this.superposition){ let newFields = [] let dataList = [] for(let key in this.selectionData){ let selData = this.selectionData[key] let id = selData.id let simple = selData.simple for(let anaField of this.analyseFields){ let obj = {} obj.prop = anaField.prop + '-' + id; obj.label = anaField.label + '-' + simple; newFields.push(obj) } let keyAnalyse = this.analyseFields.map(item =>{ return item.prop }) let data = selData.data.map(sData =>{ for(let key of keyAnalyse){ sData[key+'-'+id] = sData[key] } return sData }) selData.data = data dataList = dataList.concat(data) } // 去重 let keyList = dataList.map(item =>{ return item[this.curGroupField] }) keyList = Array.from(new Set(keyList)) if(keyList && keyList.length){ let newData = [] for(let key in keyList){ let obj = { [this.curGroupField]:keyList[key] }; for(let field of newFields){ obj[field.prop] = 0 } for(let sData of this.selectionData){ // 组合分组 if(this.curGroupField.indexOf(',') > -1){ }else{ let keyArr = sData.data.map(item =>{ return item[this.curGroupField] }) let i = keyArr.indexOf(keyList[key]) if(i > -1){ obj = {...obj, ...sData.data[i]} }else{ for(let j in sData.data[0]){ obj[j+'-'+sData.id] = 0 } } } } newData[key] = obj } this.data = newData }else{ this.data = [] } arr = curGroupArr.concat(newFields) }else{ // 当前分组列+分析列 arr = curGroupArr.concat(this.analyseFields) if(arr && arr.length){ this.sortArr = arr } } arr = arr.filter(item =>{ var show = true this.analysisData.forEach(data =>{ if(data.prop == item.prop){ show = data.tableColumn } }) return show }) return arr } }, showIndex(){ return this.conf && this.conf.showIndex \|\| false }, // 网格是否显示合计行 showSummary(){ let flag = false this.analysisData.some(item =>{ flag = item.tableColumnCount return flag }) return flag }, // 数据列 dataFields(){ return this.conf && this.conf.dataFields \|\| [] }, // 图表配置 chartConf() { debugger let groupBy = this.curGroupField; let calcFields = [] // 系列 var series = []; const tooltipOption = { trigger: 'item', axisPointer: { type: 'shadow' }, } calcFields = this.analyseFields.map(item =>{ let obj = { name: item.prop, title: item.label } series.push({tooltip: tooltipOption}) return obj }) let controlName = '' let datas = this.data // 组合分组条件时，数据添加组合列 if(groupBy.includes(',')){ let keyArr = groupBy.split(','); datas = datas.map(item =>{ let label = [] for(let key of keyArr){ label.push(item[key]) } label=label.join(); item[groupBy] = label return item }) } controlName = this.chartType == "pie" ? "PieChart" : this.chartType == "bar" ? "BarChart" : this.chartType == "line" ? "LineChart" : this.chartType == "area" ? "LineChart" : 'PieChart' // 区域图 let areaSeries = calcFields.map(item =>{ return { smooth: true, areaStyle: { normal: { color: new this.$echarts.graphic.LinearGradient(0, 0, 0, 1, [{ offset: 0, color: "rgba(30, 231, 231, 0.3)" },{ offset: 1, color: "rgba(30, 231, 231, 0.1)" }]), }, }, label: { show: false, position: "outside", }, } }) // 饼图 var pieSeries = [] if(this.chartType == "pie"){ let len = calcFields.length switch(len){ case 1: pieSeries = []; break; case 2: pieSeries = [ { radius: ["50%"], center: ["25%", "50%"], }, { radius: ["50%"], center: ["75%", "50%"], }, ] break; case 3: pieSeries = [ { radius: ["50%"], center: ["25%", "50%"], }, { radius: ["35%"], center: ["75%", "30%"], }, { radius: ["35%"], center: ["75%", "70%"], }, ] break; case 4: pieSeries = [ { radius: ["35%"], center: ["25%", "30%"], }, { radius: ["35%"], center: ["25%", "70%"], }, { radius: ["35%"], center: ["75%", "30%"], }, { radius: ["35%"], center: ["75%", "70%"], }, ] break; } } const conf = { controlName: controlName, controlId: "chart_controlid", height: "100%", isGroupData: true, groupBy: groupBy, datas: datas, calcFields: calcFields, option: { legend: { show: true }, series: this.chartType == "area" ? areaSeries : this.chartType == "pie" ? pieSeries : series }, events:{ click(row){ let _this = this.$parent.$parent.$parent; _this.currentObj = row.data _this.currentObj.prop = _this.curGroupField; if(_this.perspective){ var index = -1 _this.deepArr.forEach((item,i)=>{ if(item.prop == _this.curGroupField){ index = i } }) if(index > -1 && index < _this.deepArr.length - 1){ _this.analysisFieldsVisible = false _this.curIndex = _this.curIndex + 1 _this.currentObj = _this.deepArr[_this.curIndex]; _this.data = _this.currentObj.data _this.curGroupField = _this.currentObj.prop; }else{ _this.analysisChartConf.datas = _this.deepAnalysisFields _this.analysisFieldsVisible = true } }else{ _this.analysisChartConf.datas = _this.deepAnalysisFields _this.analysisFieldsVisible = true } _this.superposition = false } } }; return conf }, // 深度分析字段列表 deepAnalysisFields(){ let fields = this.groupFields if(fields && fields.length == 0){ return [] } let analysisFields = fields.map((item) => { item.value = 1 return item }); // 排除已经统计的分析列 if(this.deepArr && this.deepArr.length > 0){ let arrnew = this.deepArr.slice(0, this.curIndex + 1).map((item) => { return item.prop }); // 多条件的分组拆开排除 arrnew.forEach(item =>{ if(item.includes(',')){ arrnew.concat(item.split(',')) } }) analysisFields = analysisFields.filter(item =>{ return arrnew.indexOf(item.prop) < 0 }) } // 添加详情 analysisFields.push( { prop: 'detail', label: "详情", value: 1 } ) return analysisFields }, // 查询字段 queryFields(){ let queryFields = [] let fields = this.conf && this.conf.queryFields if(!fields \|\| fields.length == 0){ queryFields = [] }else{ queryFields = fields.map(item =>{ let obj = {} obj.prop = item.prop; obj.label = item.label; if(item.props && item.props.lookup){ let model = item.props.lookup if(item.element === 'hi-select-grid'){ var columns = [] if(model && model.columns && model.columns.length){ columns = model.columns.map(item =>{ item.prop = item.name return item }) } let table = model.tableprops \|\| {} table['columns'] = columns obj.lookup = { type: "data", openstyle: 'selectgrid', bindField: item.prop, lookSelectGrid: { width: 1200, height: 600, table: table, bindField: item.prop, tableData: model && model.sourceDatas, }, } obj.dbtype = 'dbString' }else if(item.element === 'hi-data-select'){ var columns = [] if(model && model.columns && model.columns.length){ columns = model.columns.map(item =>{ item.prop = item.name return item }) } let queryOptionFields = model.queryOption.fields let store = model.storeCfg \|\| model.sourceDsCfg let modelFilePath =store.modelFile let fields = store.fields let rows = queryOptionFields.map(item =>{ return {children:[ { prop: item.name, label: item.label } ]} }); let cols = queryOptionFields.map(item =>{ return { colWidth: 100} }); let queryPanel = { rows: rows, cols: cols }; let tableColumn = model.columns.map(item =>{ return { prop: item.name, label: item.label } }) // var table = model.tableprops \|\| {} var table = { children:tableColumn, stripe: model.tableprops && model.tableprops.stripe \|\| false } let ds = { controlName: "HcDataset", controlId: modelFilePath, name: model.entityDs, modelFilePath: modelFilePath, _infcPagging: { pageSize: 10, pageNum: 1, returnCount: true }, _infcLoad: { autoActive: true, }, fields: fields, data: [], } obj.lookup = { type: "data", openstyle: 'dialog', birtModel: GridSingleSelect({ mainDataset: ds, hcQueryPanel: queryPanel, hcTable: table }), lookDataset: { modelFilePath: modelFilePath, // 数据模型路径 }, lookDialog: { title: "", width: 900, height: 600, }, bindField: item.prop, sourceDsId: model.sourceDsId } obj.dbtype = 'dbString' } } return obj }) } return queryFields }, // 数据集字段 fields(){ let fields = this.conf.dataset && this.conf.dataset.config.fields for(let key in this.queryFields){ let prop = this.queryFields[key].prop if(fields[prop] && fields[prop].lookup){ let lookup = Object.assign(fields[prop].lookup, this.queryFields[key].lookup) // 下拉枚举查找 if(lookup.label && lookup.returnFields){ for(let key in lookup.returnFields){ if(lookup.returnFields[key] == lookup.label){ lookup.bindShowField = key lookup.lookSelectGrid.bindShowField = key } if(lookup.lookSelectGrid && lookup.lookSelectGrid.tableData){ let data = lookup.lookSelectGrid.tableData for(let i in data){ if(data[i][lookup.returnFields[key]]){ data[i][key] = data[i][lookup.returnFields[key]] } } } } } // 数据模型查找 if(lookup.fieldPair && lookup.sourceDsId){ lookup.returnFields = lookup.fieldPair[lookup.sourceDsId].returnFields } lookup.returnType = "single", fields[prop]['lookup'] = lookup } } // 应用默认填充表达式 for(let key in fields){ if(fields[key].default && fields[key].default.exps){ fields[key].default['expr'] = fields[key].default.exps } } return fields }, // 数据集 dataset(){ var dataset = {} if(this.conf && this.conf.dataset){ let ds = this.conf.dataset dataset = { controlName: ds.controlName, controlId: ds.controlId, name: ds.name, modelFilePath: ds.modelFilePath, fields: this.fields, _infcLoad: { autoActive: false }, _infcPagging: { returnCount: true, pageSize: 100, pageNum: 1 }, data: [], } } return dataset }, // 查询面板 birtModelRight(){ let rows = this.queryFields.map(item =>{ return {children:[item],colspan: 12} }) let cols = this.queryFields.map(item =>{ return { colWidth: 60 } }) const queryPanel = { rows: rows, cols: cols }; let hcQueryPanel = { controlName: "HcQueryPanel", controlId: "HcQueryPanel_sam", inline: false, dataset: this.dataset && this.dataset.controlId \|\| "dsSam", size: "small", hideBtn: true, style: "width: 100%;", children: [], }; Object.assign(hcQueryPanel, QueryStyleFactory.buildForm(queryPanel) \|\| {}); let birtModelRight = { controlName: "BirtWorkBook", controlId: "BirtWorkBook_right", style: "border-bottom: 1px solid #eee;", showToolBar: false, children: [ { controlName: "BirtSheet", controlId: "BirtSheet_right", name: "sheet0", pageIndex: 0, dataSets: [{ controlName: "HcDataset", controlId: "dsScheme", name: "SysSchemeBizEntity", rowKey: "FGUID", modelFilePath: "/platf/scheme/entity/SysSchemeBizEntity.xml", _infcLoad: { autoActive: false, __zcQuery: true }, _infcPagging: { _isAddingPagging: false, pageSize: -1, }, fields: {}, data: [], }].concat(this.dataset ? this.dataset : []), children: [ { controlName: "BirtFormSheet", controlId: "BirtFormSheet_01", children: [hcQueryPanel] } ] } ], }; return birtModelRight }, // 分组条件(统计字段) groupFields(){ let groupFields = this.conf && _.cloneDeep(this.conf.groupFields) \|\| [] // 组合分组条件 if(this.curTransferVal && this.curTransferVal.length){ let obj = {} let curTransferLabel = this.curTransferVal.map(item =>{ for(var field of groupFields){ if(field.prop == item){ return field.label } } }) obj = { prop: this.curTransferVal.join(), label: curTransferLabel.join() } groupFields.push(obj) } return groupFields }, // 分析字段 analyseFields(){ return this.conf && this.conf.analyseFields \|\| [] }, // 显示详情 showDetail(){ return this.currentObj.prop == 'detail' }, // 执行叠加按钮 btnDisabled(){ return !this.selectionData \|\| this.selectionData.length < 2 } }, watch:{ conf:{ deep: true, handler: function(val){ if(val && val.groupFields && !this.groupForm.prop){ this.groupForm.prop = val.groupFields[0] && val.groupFields[0].prop this.curGroupField = this.groupForm.prop } if(val && val.analyseFields && val.analyseFields.length){ this.analysisData=val.analyseFields.map(item =>{ let obj = { prop: item.prop, countField: item.label, tableColumn: true, tableColumnCount: true, chartColumn: true, chartColumnCount: true, } return obj }) } } }, }, data() { return { size: 'small', superposition: false, perspective: false, chartType: "table", groupForm: { prop: "" }, loading: false, currentPage: 1, pageSize: 100, pageSizes: [10,20,50,100], total: 0, data: [], // 排序 sortArr:[], sortIndex:-1, sortType: '', // 分析列 analysisVisible: false, analysisData:[], tableColumnCheck: true, tableColumnCountCheck: true, chartColumnCheck: true, chartColumnCountCheck: true, // 分析字段 analysisFieldsVisible: false, analysisFieldsArr:[], analysisChartConf:{ controlName: "PieChart", controlId: "chart_analysis", height: "100%", isGroupData: true, groupBy: "label", datas: [], calcFields: [ { name: "value", title: "" } ], option: { legend: { show: true } }, events:{ click(row){ debugger; var _this = this.$parent.$parent; _this.analysisChartConf.datas = _this.deepAnalysisFields let data = JSON.parse(JSON.stringify(row.data)) delete data.emphasis // 删除当前分析以后的深度分析 _this.deepArr.splice(_this.curIndex+1, _this.deepArr.length - _this.curIndex - 1) let obj = _this.deepArr[_this.deepArr.length -1] if(_this.currentObj.name){ obj.selectVal = _this.currentObj.name }else{ if(_this.currentObj.prop.includes(',')){ let selectVal = [] let arr = _this.currentObj.prop.split(',') selectVal = arr.map(item =>{ return _this.currentObj[item] }) obj.selectVal = selectVal.join() }else{ obj.selectVal = _this.currentObj[_this.currentObj.prop] } } _this.$set(_this.deepArr,_this.curIndex,obj) _this.$set(_this.deepArr,_this.curIndex + 1, data) _this.curGroupField = data.prop; _this.currentObj = data; _this.curIndex = _this.curIndex + 1; _this.doQuery(); _this.analysisFieldsVisible = false; } } }, // 深度分析 deepArr:[], conf:{}, // 图表当前选中对象 currentObj:{}, // 当前分组字段 curGroupField: '', // 深度分析当前环节下标 curIndex: 0, exportLoading: false, // 穿梭框 transferVisible: false, curTransferVal: [], groupFieldsEdit: [], schemeLoading: false, havingForm:{}, // 分析记录 recordVisible: false, recordData:[], // 已勾选记录 selectionData: [], // 统计方案 schemeData:[], schemeVisible: false, // 是否监听 isMonitor: false, // 底部汇总数据 bottomSummary: {}, // 是否查询面板查询 isQueryModel: false } }, updated() { this.$nextTick(() => { this.$refs["table"] && this.$refs["table"].doLayout(); }); }, methods: { // 排序 sortClick(val) { this.sortIndex = val this.doQuery(); }, sortDown(){ this.sortType = 'desc' }, sortUp(){ this.sortType = 'asc' }, // 前进 goCommand(index){ this.curIndex = index; this.currentObj = this.deepArr[index]; this.curGroupField = this.currentObj.prop; this.data = this.currentObj.data }, goClick:_.debounce(function(){ if(this.curIndex < this.deepArr.length - 1){ this.curIndex = this.curIndex + 1; this.currentObj = this.deepArr[this.curIndex]; this.curGroupField = this.currentObj.prop; this.data = this.currentObj.data } },500), // 后退 backCommand(val){ this.curIndex = val this.currentObj = this.deepArr[val]; this.curGroupField = this.currentObj.prop; this.data = this.currentObj.data }, backClick:_.debounce(function(){ if(this.curIndex > 0){ this.curIndex = this.curIndex - 1 this.currentObj = this.deepArr[this.curIndex]; this.curGroupField = this.currentObj.prop; this.data = this.currentObj.data } },500), // 深度分析 breadcrumbClick(val) { this.curGroupField = val let arrnew = this.deepArr.map(item =>{ return item.prop }) this.curIndex = arrnew.indexOf(val) this.currentObj = this.deepArr[this.curIndex]; // 数据替换成缓存的数据 this.data = this.currentObj.data }, // 点击表格 rowDblclick(row){ this.currentObj = row this.currentObj.prop = this.curGroupField; this.superposition = false if(this.perspective){ var index = -1 this.deepArr.forEach((item,i)=>{ if(item.prop == this.curGroupField){ index = i } }) if(index > -1 && index < this.deepArr.length - 1){ this.analysisFieldsVisible = false this.curIndex = this.curIndex + 1 this.currentObj = this.deepArr[this.curIndex]; this.data = this.currentObj.data this.curGroupField = this.currentObj.prop; }else{ this.analysisChartConf.datas = this.deepAnalysisFields this.analysisFieldsVisible = true } }else{ this.analysisChartConf.datas = this.deepAnalysisFields this.analysisFieldsVisible = true } }, // 点击查询 doCount() { debugger; // 叠加状态下不执行查询操作 if(this.superposition){ return } // 监听数据集 if(this.dataset){ let ds = this.$refs.BirtWorkBook_right.dataset[this.dataset.controlId] if(!this.isMonitor){ ds && ds.on("afterLoadData", this.afterLoadData); this.isMonitor = true } this.loading = true; let prop = this.groupForm.prop; let fields = this.groupFields.map(item =>{ return item.prop }) this.curGroupField = prop; let index = fields.indexOf(prop) if(this.deepArr.length){ // 如果切换了分组条件，清空深度分析 if(this.deepArr[0] && this.deepArr[0].prop !== prop){ this.deepArr = [] this.currentObj = this.groupFields[index] this.recordData = [] }else{ this.currentObj = this.deepArr[0] } } this.currentPage = 1 let queryModel = ds.getQueryModel() this.doQuery(queryModel); // 添加分析记录 let obj = {} if(Object.keys(queryModel).length === 0){ obj = { id: 'empty', name: '空条件', prop: this.groupForm.prop, } }else{ let keyArr = []; let labelArr = []; for(let key in queryModel){ if(queryModel[key] \|\| queryModel[key] === 0){ keyArr.push(key); // let arr = this.queryFields.filter(item =>{ // return item.prop == key // }) labelArr.push(queryModel[key]); } }; if(keyArr.length && labelArr.length){ obj = { id: keyArr.join() + '_' + labelArr.join(), name: labelArr.join(), prop: this.groupForm.prop, } }else{ obj = { id: 'empty', name: '空条件', prop: this.groupForm.prop, } } } // 判断分析记录中是否含有此条件，有则跳过，无则添加 const ids = this.recordData.map(value=>value.id); if(!ids.includes(obj.id)){ this.isQueryModel = true let simple = this.recordData.length + 1; obj.simple = simple obj.isEdit = false this.recordData.push(obj); }else{ this.isQueryModel = false } // 当前分组加入深度分析 if(index < 0){ this.$message.error('当前分组条件不在分组字段中，请重新配置') }else{ this.$set(this.deepArr,0,this.groupFields[index]) this.curIndex = 0 }; } }, afterLoadData(datas){ let newData = datas let ds = this.$refs.BirtWorkBook_right.dataset[this.dataset.controlId] if(datas && datas.length){ newData = datas.map(item =>{ return ds && ds.getFormatRecd(item) }) } this.data = newData // 缓存数据 this.deepArr[this.curIndex].data = newData; // 总条数 this.total = ds._infcPagging.recordCount \|\| this.total; // 底部汇总数据 this.bottomSummary = ds.getBottomSummeryRecd(); // 添加分析记录 if(!this.isQueryModel) return this.recordData[this.recordData.length - 1].data = datas }, // 查询方法 doQuery(model){ let ds = this.$refs.BirtWorkBook_right.dataset[this.dataset.controlId] if(this.showDetail){ ds._infcPagging = { _isPagging: true, pageSize: this.pageSize, pageNum: this.currentPage, returnCount: true }; ds._infcStat = {} ds._infcSort = {} }else{ ds._infcPagging = { _isPagging: true, pageSize: this.pageSize, pageNum: this.currentPage, returnCount: true }; ds._infcStat = { isGroupData: true, groupBy: this.curGroupField, __bottomSummary: true } if(this.sortIndex > -1){ let obj = this.sortArr[this.sortIndex] ds._infcSort.orderBy =[{ name: obj.prop, desc: obj.label, type: this.sortType \|\| 'desc' }] }else{ ds._infcSort.orderBy = [] } if(this.havingForm){ let _infcHaving = {}; for(let item in this.havingForm){ let obj = JSON.parse(JSON.stringify(this.havingForm[item])) let val = obj.value let val2 = obj.value2 if(val === undefined && val === undefined){ }else if((val \|\| val === 0) && (val2 \|\| val2 === 0)){ _infcHaving[item] = obj }else{ if(obj.sign == 'inRange'){ obj.sign = 'lteq' }else{ obj.sign = 'gt' } _infcHaving[item] = obj } } ds._infcHaving = _infcHaving } } if(model){ ds.setQueryModel(model) }else if(this.deepArr && this.deepArr.length > 0){ let queryModel = {} this.deepArr.forEach(item =>{ if(item.prop && item.selectVal){ if(!item.prop.includes(",")){ queryModel[item.prop] = item.selectVal }else{ let arr = item.prop.split(',') arr.forEach((it,i) =>{ queryModel[it] = item.selectVal && item.selectVal.split(',')[i] }) } } }) ds.setQueryModel(queryModel) }else{ ds._infcLoad.queryModel = {} } ds.query(); this.loading = false; }, // 重置 reset() { this.$refs.groupForm.resetFields(); this.$refs.havingForm.resetFields(); this.havingForm = JSON.parse(JSON.stringify(this.conf.havingForm)); this.curTransferVal = [] this.groupForm.prop = this.groupFields[0] && this.groupFields[0].prop; var queryPanel = this.$refs.BirtWorkBook_right.$children[0].$children[0].$children[0].$children[0].$children[0].$children[0]; queryPanel.reset(); let ds = this.$refs.BirtWorkBook_right.dataset[this.dataset.controlId] ds._infcLoad.queryModel={} }, handleSizeChange(val) { this.pageSize = val this.doQuery() }, handleCurrentChange(val) { this.currentPage = val this.doQuery() }, // 切换图表 chartTypeChange(command) { this.chartType = command; }, // 打开分析列 analysisClick(){ this.analysisVisible = true }, // 分系列全选 handelCheckAll(val){ let _this = this this.analysisData = this.analysisData.map(item => { if(val == 'tableColumn') { item.tableColumn = _this.tableColumnCheck } if(val == 'tableColumnCount') { item.tableColumnCount = _this.tableColumnCountCheck } if(val == 'chartColumn') { item.chartColumn = _this.chartColumnCheck } if(val == 'chartColumnCount') { item.chartColumnCount = _this.chartColumnCountCheck } return item }) }, // 刷新 refresh(){ this.doQuery(); this.$refs.chartConf && this.$refs.chartConf.refreshChart(); }, // 导出 exportExcel() { let param = { pageNum: -1, pageSize: -1, __slaveExport: false, }; let __body = {}; let ds = this.$refs.BirtWorkBook_right.dataset[this.dataset.controlId] var cdion = ds.lastLoadCdion console.log('cdion', cdion) if (cdion) { __body['queryCdions'] = JSON.parse(cdion); } __body['groupBy'] = this.curGroupField param['modelFilePath'] = ds['modelFilePath']; param['__funcpath'] = ds['__funcpath']; param.__body = __body let sheetStyle = {} let cells = [] let columns = [] this.tableColumns.forEach(item => { cells.push({ title: item.label, colspan: 1, rowspan: 1 }) columns.push({ field: item.prop, width: 170 }) }); sheetStyle = { name: '统计分析', titleRows: [ { cells: cells } ], columns: columns } param.__sheetStyle = sheetStyle var time = new Date().getTime() var title = `统计分析${time}` var data = { title: title, __sheetDatas: JSON.stringify([param]) } var url = this.$HI.exportUrl this.exportLoading = true this.$HI.request.post(url,data).then((res) =>{ console.log('res', res) this.exportLoading = false if(res.status == 200){ let token = getToken(); var url = this.$HI.download + `?path=${res.dataPack.path}&access_token=${token}` url = url.replace(/\\/g,"/") const a = document.createElement('a') //创建a标签 a.style.display = 'none' a.href = url // 指定下载链接 a.download = title //指定下载文件名 a.click() //触发下载 } }).catch((e) =>{ this.exportLoading = false }) }, // 打开穿梭框 showtransfer(){ this.groupFieldsEdit = JSON.parse(JSON.stringify(this.curTransferVal)) this.transferVisible = true }, transferConfirm(){ if(this.groupFieldsEdit && this.groupFieldsEdit.length > 1){ this.curTransferVal = JSON.parse(JSON.stringify(this.groupFieldsEdit)) this.groupForm.prop = this.curTransferVal.join(); this.curGroupField = this.groupForm.prop; this.transferVisible = false }else{ this.$message.error("该分组选项已存在") } }, transferClose(){ this.transferVisible = false this.groupFieldsEdit = JSON.parse(JSON.stringify(this.curTransferVal)) }, transferUp(option){ let arr = this.groupFieldsEdit let index = this.groupFieldsEdit.indexOf(option.prop) if(index > 0){ arr.splice(index - 1, 1, ...arr.splice(index, 1, arr[index - 1])); } }, transferDown(option){ let arr = this.groupFieldsEdit let index = this.groupFieldsEdit.indexOf(option.prop) if(index < arr.length){ arr.splice(index, 1, ...arr.splice(index + 1, 1, arr[index])); }; }, // 合计列 getSummaries(parma){ const { columns, data } = parma; const sums = []; // let arr = this.analyseFields.map(item =>{ // return item.prop // }) columns.forEach((column, index) => { let show = true this.analysisData.forEach(item =>{ if(item.prop == column.property){ show = item.tableColumnCount } }) // if(arr.includes(column.property) && show){ // let values = data.map(item => Number(item[column.property])); // sums[index] = values.reduce((prev, curr) => { // const value = Number(curr); // if (!isNaN(value)) { // return prev + curr; // } else { // return prev; // } // }, 0); if(this.bottomSummary && this.bottomSummary[column.property] && show){ sums[index] = this.bottomSummary[column.property] }else{ sums[index] = ''; } }) sums[0] = '统计' return sums; }, // 分析列表 handleEdit(index, row){ row.isEdit = true this.recordData[index] = row }, handleConfirm(index, row){ row.isEdit = false this.recordData[index] = row }, handleDelete(index, row){ this.recordData.splice(index, 1) }, // 执行叠加 doClick(){ this.superposition = true this.recordVisible = false this.curGroupField = this.recordData[0].prop this.curIndex = 0 }, // 分析记录勾选 handleSelectionChange(row){ this.selectionData = row }, // 双击 recordDblClick(row){ this.curIndex = 0 this.data = row.data this.deepArr[0].data = row.data this.currentObj.data = row.data }, signChange(val,sign){ this.havingForm[val]['sign'] = sign }, // 统计方案 schemeRowClick(row){ if(row.FCONTENT){ this.reset(); let conf = JSON.parse(row.FCONTENT); if(conf.deepList){ this.deepArr = conf.deepList } if(conf.curGroupField){ this.curGroupField = conf.curGroupField } if(conf.queryModel){ let ds = this.$refs.BirtWorkBook_right.dataset[this.dataset.controlId] ds.setQueryModel(conf.queryModel) let queryPanel = this.$refs.BirtWorkBook_right.$children[0].$children[0].$children[0].$children[0].$children[0].$children[0]; queryPanel.bindModel = conf.queryModel } if(conf.groupForm){ this.groupForm = conf.groupForm } if(conf.havingForm){ this.havingForm = conf.havingForm } if(conf.sortIndex){ this.sortIndex = conf.sortIndex } if(conf.sortType){ this.sortType = conf.sortType } if(conf.data){ this.data = conf.data } if(conf.currentObj){ this.currentObj = conf.currentObj } if(conf.total){ this.total = conf.total } if(conf.curTransferVal){ this.curTransferVal = conf.curTransferVal } if(conf.perspective){ this.perspective = conf.perspective }else{ this.perspective = false } if(conf.superposition){ this.superposition = conf.superposition }else{ this.superposition = false } } this.schemeVisible = false }, showSchemeData(){ let url = '/data/query' var data = { modelFilePath: "/platf/scheme/entity/SysSchemeBizEntity.xml", pageSize:-1, __body:"{\"queryCdions\":{\"join\":\"and\",\"items\":[]}}", __bottomSummary: false, // __funcpath: "/eap5csxm/KongJianCeShi/TongJiFenXi/TongJiFenXiCeShi/func/TongJiFenXiRenYuan.func", __zcQuery: true } this.$HI.request.post(url, data).then((res) =>{ this.schemeData = res.dataPack && res.dataPack.rows }).catch(e=>{ console.error(e) }) }, // 保存方案 saveScheme(){ let ds = this.$refs.BirtWorkBook_right.dataset[this.dataset.controlId] let content = { deepList: this.deepArr, curGroupField: this.curGroupField, queryModel: ds.getQueryModel(), havingForm: this.havingForm, groupForm: this.groupForm, sortIndex: this.sortIndex, sortType: this.sortType, data: this.data, currentObj:this.currentObj, perspective: this.perspective, superposition: this.superposition, total:this.total, curTransferVal:this.curTransferVal } let data = { pushType: "add", dataset: "dsScheme", pushAddType: "map", data:[{ FFUNCURL: window.location.pathname \|\| window.location.href, FCONTENT: JSON.stringify(content), }] } this.openByPath('/platf/scheme/func/add.func', {__push: data,__funcpath:'/platf/scheme/func/add.func'},{title: '方案保存'}) }, handleSchemeDelete(index, data){ let url = '/data/save' let removeData = { ...data, $state:"rsDelete", $old:data } let body = [{ modelFilePath:"/platf/scheme/entity/SysSchemeBizEntity.xml", data:[removeData] }] let rData = { __body: JSON.stringify(body) } this.$HI.request.post(url, rData).then((res) =>{ this.$message.success('方案删除成功') this.schemeData.splice(index, 1) }).catch(e=>{ this.$message.error(e) }) }, // 保存方案下推 openByPath(path, query, { title, target } = {}) { query = query \|\| {}; let queryT = {} Object.assign(queryT, query \|\| {}); if (title) queryT.__title = title; if (target) { target = target === '_blank' ? (new Date()).valueOf() : target queryT.__target = target; } if(this.$router){ this.$router.push({ path, query: queryT }) }else{ if(top.window.SysPage && top.window.SysPage.newPage){ top.window.SysPage.newPage(title, path, queryT, "post") }else{ this.createForm(path, "_self", queryT.__push.data[0]) } } }, createForm(url, opentype, paramters) { //创建form表单 let me = this; let id = "samuuid" var formid = `${id}_form`; var temp_form = null; if (document.getElementById(formid)) { temp_form = document.getElementById(formid); temp_form.method = me.postType; temp_form.action = url; // for (var item in paramters) { // var inputObj = document.getElementById(`${id}_${item}`); // if (inputObj) { // inputObj.value = paramters[item]; // } // } } else { temp_form = document.createElement("form"); temp_form.id = `${id}_form`; temp_form.action = url; //如需打开新窗口，form的target属性要设置为'_blank' temp_form.target = opentype; //打开方式 temp_form.method = me.postType; temp_form.style.display = "none"; document.body.appendChild(temp_form); } //添加参数 for (var item in paramters) { var inputObj = document.getElementById(`${id}_${item}`); if (inputObj) { inputObj.value = paramters[item]; } else { var opt = document.createElement("input"); opt.type = "hidden"; opt.id = `${id}_${item}`; //opt.id= opt.name = item; opt.value = paramters[item]; temp_form.appendChild(opt); } } //提交数据 temp_form.submit(); } }, mounted() { } }; </script> <style> .birtModelRight .el-main{ padding: 5px !important; } .birtModelRight table.zhc-birt-data-list{ table-layout: auto !important; /* border-collapse: initial !important; / / border-spacing: revert !important; / } .el-transfer.sam .el-transfer-panel:nth-child(1) button{ display: none; } .el-dropdown.disabled .el-button, .el-dropdown.disabled .el-button:hover{ cursor: not-allowed; color: #C0C4CC; cursor: not-allowed; background-image: none; background-color: #FFF; border-color: #EBEEF5; } .tableHeader th, .tableHeader tr{ background: linear-gradient(0deg,rgba(224,240,255,1), rgba(240,247,255,1)); } .el-form-item__label{ overflow: hidden; white-space: nowrap; text-overflow: ellipsis; } .recordPop{ text-align: center; } </style> <style lang="scss" scoped> .container { position: relative; display: flex; flex-direction: column; height: 100%; padding: 20px; } .btn-toolbar { + * { margin-left: 10px; margin-right: 0; } } .el-dropdown-menu__item { min-width: 90px; } .center-content { height: 100%; width: 100%; padding: 10px; box-sizing: border-box; } .depth-analysis { display: flex; align-items: center; padding: 10px; } .el-breadcrumb__item a { cursor: pointer !important; } .deepActive{ color: #06c; font-weight: 600; } .sortActive{ color: rgb(33, 235, 141); font-weight: 600; } >>>.el-dropdown-menu__item:focus, .el-dropdown-menu__item:not(.is-disabled):hover{ background: initial; color: initial; } .el-dropdown-menu__item i{ font-weight: 600; margin: 0 0 0 5px; } .el-dropdown-menu__item i:hover { color: rgb(33, 235, 141); } .birtModelRight .el-main{ padding: 5px !important; } .el-icon-edit{ right: 30px; position: absolute; z-index: 1; line-height: 30px; cursor: pointer; } >>>.el-dropdown.disabled .el-button, >>>.el-dropdown.disabled .el-button:hover{ cursor: not-allowed; color: #C0C4CC; cursor: not-allowed; background-image: none; background-color: #FFF; border-color: #EBEEF5; } </style> <template> <div class="container"> <!-- 工具条 --> <div class="btn-toolbar"> <!-- 后退 --> <el-dropdown split-button :size="size" :class="{disabled: backDisabled}" :disabled="backDisabled" @command="backCommand" @click="backClick"> <i class="el-icon-back"></i>后退 <el-dropdown-menu slot="dropdown"> <el-dropdown-item v-for="(item,index) in deepArr" :key="item.prop" :command="index" v-if="index < curIndex">{{ item.label }}</el-dropdown-item> </el-dropdown-menu> </el-dropdown> <!-- 前进 --> <el-dropdown split-button :size="size" :class="{disabled: goDisabled}" :disabled="goDisabled" @command="goCommand" @click="goClick"> <i class="el-icon-right"></i>前进 <el-dropdown-menu slot="dropdown"> <el-dropdown-item v-for="(item,index) in deepArr" :key="item.prop" :command="index" v-if="index > curIndex">{{ item.label }}</el-dropdown-item> </el-dropdown-menu> </el-dropdown> <!-- 排序 --> <el-dropdown split-button :size="size" class="sort" @command="sortClick"> <i class="el-icon-sort"></i>排序 <el-dropdown-menu slot="dropdown"> <el-dropdown-item :command="-1">不排序</el-dropdown-item> <el-dropdown-item v-for="(item, index) in sortArr" :key="item.prop" :command="index">{{ item.label }} <i class="el-icon-sort-down" :class="{ sortActive: index == sortIndex && sortType =='desc' }" @click="sortDown"></i> <i class="el-icon-sort-up" :class="{ sortActive: index == sortIndex && sortType =='asc' }" @click="sortUp"></i> </el-dropdown-item> </el-dropdown-menu> </el-dropdown> <!-- 列设置 --> <el-button icon="el-icon-setting" :size="size" @click="analysisClick">列设置</el-button> <el-dropdown :size="size" @command="chartTypeChange"> <el-button :size="size"> <i class="el-icon-s-data"></i> 图表<i class="el-icon-arrow-down el-icon--right"></i> </el-button> <el-dropdown-menu slot="dropdown"> <el-dropdown-item command="table">表格</el-dropdown-item> <el-dropdown-item command="pie">饼图</el-dropdown-item> <el-dropdown-item command="bar">柱图</el-dropdown-item> <el-dropdown-item command="line">线图</el-dropdown-item> <el-dropdown-item command="area">区域图</el-dropdown-item> </el-dropdown-menu> </el-dropdown> <!-- 刷新 --> <el-button icon="el-icon-refresh" :size="size" @click="refresh">刷新</el-button> <!-- 分析记录 --> <el-button icon="el-icon-edit-outline" :size="size" >分析记录</el-button> <!-- 统计方案 --> <el-button icon="el-icon-edit-outline" :size="size" >统计方案</el-button> <!-- 叠加 --> <el-checkbox v-model="superposition" label="叠加" border :size="size" ></el-checkbox> <!-- 透视 --> <el-checkbox v-model="perspective" label="直接透视" border :size="size" ></el-checkbox> <el-button icon="el-icon-download" :size="size" :disabled="this.data && this.data.length == 0" :loading="exportLoading" @click="exportExcel">导出excel</el-button> </div> <!-- 内容区 --> <hi-layout :is-fit="true" style="heiht: 100%;"> <!-- 右侧查询面板 --> <hi-layout-right size="300" title="过滤条件"> <birt-work-book style="height: calc( 100% - 142px );border-bottom: 1px dashed #3179de;overflow: auto;" :conf="birtModelRight" :ref="birtModelRight.controlId" class="birtModelRight" ></birt-work-book> <el-form @submit.native.prevent ref="groupForm" style="padding: 10px 10px 0 0;" :model="groupForm" label-width="80px" > <el-form-item label="分组条件" prop="prop"> <i class="el-icon-edit" @click="showtransfer"></i> <el-select v-model="groupForm.prop" style="width: 100%;" placeholder="请选择分组条件"> <el-option v-for="item in groupFields" :label="item.label" :value="item.prop" :key="item.prop" ></el-option> </el-select> </el-form-item> <el-form-item> <el-button type="primary" size="mini" :loading="loading" @click="doCount" >执行查询</el-button > <el-button size="mini" @click="reset">重置</el-button> </el-form-item> </el-form> </hi-layout-right> <!-- 图表展示区 --> <hi-layout-center style="heiht: 100%;"> <div class="depth-analysis"> <span>深度分析:</span> <el-breadcrumb separator-class="el-icon-arrow-right" style="padding: 0 0 0 10px;" > <el-breadcrumb-item v-for="(item,index) in deepArr" :key="item.prop"> <span v-if="item.label.includes(',')" @click="breadcrumbClick(item.prop)" :class="{ deepActive: index == curIndex }" style="cursor: pointer;"> <span v-for="(it, i) in item.label.split(',')"> {{ it }} <span style="color: rgb(255, 102, 0);margin-left:2px;" v-if="index < curIndex">{{ item.selectVal.split(',')[i] }}</span> </span> </span> <span v-else @click="breadcrumbClick(item.prop)" :class="{ deepActive: index == curIndex }" style="cursor: pointer;"> {{ item.label }} <span style="color: rgb(255, 102, 0);margin-left:2px;" v-if="index < curIndex">{{ item.selectVal }}</span> </span> </el-breadcrumb-item> </el-breadcrumb> </div> <div v-if="showDetail" style="height: calc( 100% - 100px )"> <el-table :data="data" ref="table" height="100%" border stripe :show-summary="showSummary" :summary-method="getSummaries" header-row-class-name="tableHeader" style="width: 100%" > <el-table-column v-for="item in tableColumns" :key="item.prop" :prop="item.prop" :label="item.label" > </el-table-column> </el-table> <el-pagination @size-change="handleSizeChange" @current-change="handleCurrentChange" :current-page="currentPage" :page-sizes="[10, 20, 50, 100]" :page-size="pageSize" layout="total, sizes, prev, pager, next, jumper" :total="total" > </el-pagination> </div> <div v-if="!showDetail && chartType == 'table'" style="height: calc( 100% - 100px )"> <el-table :data="data" ref="table" height="100%" border stripe :show-summary="showSummary" :summary-method="getSummaries" header-row-class-name="tableHeader" style="width: 100%" > <el-table-column v-for="item in tableColumns" :key="item.prop" :prop="item.prop" :label="item.label" > </el-table-column> </el-table> <el-pagination @size-change="handleSizeChange" @current-change="handleCurrentChange" :current-page="currentPage" :page-sizes="[10, 20, 50, 100]" :page-size="pageSize" layout="total, sizes, prev, pager, next, jumper" :total="total" > </el-pagination> </div> <Pie-chart style="height: calc( 100% - 100px )" v-else-if="!showDetail && chartType == 'pie'" ref="chartConf" :conf="chartConf" ></Pie-chart> <Bar-chart style="height: calc( 100% - 100px )" v-else-if="!showDetail && chartType == 'bar'" ref="chartConf" :conf="chartConf" ></Bar-chart> <Line-chart style="height: calc( 100% - 100px )" v-else-if="!showDetail && chartType == 'line'" ref="chartConf" :conf="chartConf" ></Line-chart> <Line-chart style="height: calc( 100% - 100px )" v-else-if="!showDetail && chartType == 'area'" ref="chartConf" :conf="chartConf" ></Line-chart> </hi-layout-center> </hi-layout> <!-- 分析列 --> <el-dialog :visible.sync="analysisVisible" title="分析列设置" :height="500"> <el-table :data="analysisData" size="small" :height="400"> <el-table-column prop="countField" label="统计字段"> </el-table-column> <el-table-column prop="tableColumn" label="网格列" align="center"> <template slot="header" slot-scope="{row}"> <el-checkbox v-model="tableColumnCheck" @change="handelCheckAll('tableColumn')" label="网格列"></el-checkbox> </template> <template slot-scope="{row}"> <el-checkbox v-model="row.tableColumn"></el-checkbox> </template> </el-table-column> <el-table-column prop="tableColumn" label="网格合计列" align="center"> <template slot="header" slot-scope="{row}"> <el-checkbox v-model="tableColumnCountCheck" @change="handelCheckAll('tableColumnCount')" label="网格合计列"></el-checkbox> </template> <template slot-scope="{row}"> <el-checkbox v-model="row.tableColumnCount"></el-checkbox> </template> </el-table-column> <el-table-column prop="tableColumn" label="图表列" align="center"> <template slot="header" slot-scope="{row}"> <el-checkbox v-model="chartColumnCheck" @change="handelCheckAll('chartColumn')" label="图表列"></el-checkbox> </template> <template slot-scope="{row}"> <el-checkbox v-model="row.chartColumn"></el-checkbox> </template> </el-table-column> <el-table-column prop="chartColumnCount" label="图表列汇总" align="center"> <template slot="header" slot-scope="{row}"> <el-checkbox v-model="chartColumnCountCheck" @change="handelCheckAll('chartColumnCount')" label="图表列汇总"></el-checkbox> </template> <template slot-scope="{row}"> <el-checkbox v-model="row.chartColumnCount"></el-checkbox> </template> </el-table-column> </el-table> </el-dialog> <!-- 分析字段 --> <el-dialog :visible.sync="analysisFieldsVisible" title="选择分析字段" :height="500"> <Pie-chart style="height: 400px;" ref="analysisChart" :conf="analysisChartConf" ></Pie-chart> </el-dialog> <!-- 穿梭框(修改分组字段) --> <el-dialog :visible.sync="transferVisible" title="选择分组字段" :height="500" width="640px" center @close="transferClose"> <el-transfer class="sam" v-model="groupFieldsEdit" :data="conf.groupFields" :titles="['来源字段', '目标字段']" target-order="push" :props="{ key: 'prop', label: 'label' }" style="width: 100%;padding: 20px;"> <span slot-scope="{ option }">{{ option.label }} <el-button style="margin-left: 10px;" icon="el-icon-top" type="primary" size="mini" circle @click.stop="transferUp(option)"></el-button> <el-button icon="el-icon-bottom" type="primary" size="mini" circle @click.stop="transferDown(option)"></el-button> </span> </el-transfer> <span slot="footer" class="dialog-footer"> <el-button @click="transferClose" size="small">取消</el-button> <el-button type="primary" size="small" @click="transferConfirm">确定</el-button> </span> </el-dialog> </div> </template> <script> import { QueryStyleFactory } from "../templates/query-panel/QueryStyleFactory"; import { GridSingleSelect } from "../templates/GridSingleSelect"; import _ from 'lodash' export default { name: "AnalysisSam", props:{ conf:{ type: Object, } }, computed: { // 后退 backDisabled(){ return this.curIndex === 0 }, // 前进 goDisabled(){ return this.curIndex == this.deepArr.length - 1 }, // 表格列 tableColumns() { if(this.showDetail){ return this.dataFields }else{ // 组合分组条件分成多个列 let list = this.curGroupField.split(',') // 获取当前分组列 let curGroupArr = this.groupFields.filter(item =>{ return list.includes(item.prop) }) // 当前分组列+分析列 let arr = curGroupArr.concat(this.analyseFields) arr = arr.filter(item =>{ var show = true this.analysisData.forEach(data =>{ if(data.prop == item.prop){ show = data.tableColumn } }) return show }) if(arr && arr.length){ this.sortArr = arr } return arr } }, // 网格是否显示合计行 showSummary(){ let flag = false this.analysisData.some(item =>{ flag = item.tableColumnCount return flag }) return flag }, // 数据列 dataFields(){ return this.conf && this.conf.dataFields \|\| [] }, // 图表配置 chartConf() { debugger let groupBy = this.curGroupField; let calcFields = [] calcFields = this.analyseFields.map(item =>{ let obj = { name: item.prop, title: item.label } return obj }) let controlName = '' let datas = this.data // 组合分组条件时，数据添加组合列 if(groupBy.includes(',')){ let keyArr = groupBy.split(','); datas = datas.map(item =>{ let label = [] for(let key of keyArr){ label.push(item[key]) } label=label.join(); item[groupBy] = label return item }) } controlName = this.chartType == "pie" ? "PieChart" : this.chartType == "bar" ? "BarChart" : this.chartType == "line" ? "LineChart" : this.chartType == "area" ? "LineChart" : 'PieChart' // 区域图 let areaSeries = calcFields.map(item =>{ return { smooth: true, areaStyle: { normal: { color: new this.$echarts.graphic.LinearGradient(0, 0, 0, 1, [{ offset: 0, color: "rgba(30, 231, 231, 0.3)" },{ offset: 1, color: "rgba(30, 231, 231, 0.1)" }]), }, }, label: { show: false, position: "outside", }, } }) // 饼图 var pieSeries = [] if(this.chartType == "pie"){ let len = calcFields.length switch(len){ case 1: pieSeries = []; break; case 2: pieSeries = [ { radius: ["50%"], center: ["25%", "50%"], }, { radius: ["50%"], center: ["75%", "50%"], }, ] break; case 3: pieSeries = [ { radius: ["50%"], center: ["25%", "50%"], }, { radius: ["35%"], center: ["75%", "30%"], }, { radius: ["35%"], center: ["75%", "70%"], }, ] break; case 4: pieSeries = [ { radius: ["35%"], center: ["25%", "30%"], }, { radius: ["35%"], center: ["25%", "70%"], }, { radius: ["35%"], center: ["75%", "30%"], }, { radius: ["35%"], center: ["75%", "70%"], }, ] break; } } // 其他 var series = [] const conf = { controlName: controlName, controlId: "chart_controlid", height: "100%", isGroupData: true, groupBy: groupBy, datas: datas, calcFields: calcFields, option: { legend: { show: true }, series: this.chartType == "area" ? areaSeries : this.chartType == "pie" ? pieSeries : series }, events:{ click(row){ let _this = this.$parent.$parent.$parent; _this.currentObj = row.data _this.currentObj.prop = _this.curGroupField; if(_this.perspective){ var index = -1 _this.deepArr.forEach((item,i)=>{ if(item.prop == _this.curGroupField){ index = i } }) if(index > -1 && index < _this.deepArr.length - 1){ _this.analysisFieldsVisible = false _this.curIndex = _this.curIndex + 1 _this.currentObj = _this.deepArr[_this.curIndex]; _this.data = _this.currentObj.data _this.curGroupField = _this.currentObj.prop; }else{ _this.analysisChartConf.datas = _this.deepAnalysisFields _this.analysisFieldsVisible = true } }else{ _this.analysisChartConf.datas = _this.deepAnalysisFields _this.analysisFieldsVisible = true } } } }; return conf }, // 深度分析字段列表 deepAnalysisFields(){ let fields = this.groupFields if(fields && fields.length == 0){ return [] } let analysisFields = fields.map((item) => { item.value = 1 return item }); // 排除已经统计的分析列 if(this.deepArr && this.deepArr.length > 0){ let arrnew = this.deepArr.slice(0, this.curIndex + 1).map((item) => { return item.prop }); analysisFields = analysisFields.filter(item =>{ return arrnew.indexOf(item.prop) < 0 }) } // 添加详情 analysisFields.push( { prop: 'detail', label: "详情", value: 1 } ) return analysisFields }, // 查询字段 queryFields(){ let queryFields = [] let fields = this.conf && this.conf.queryFields if(!fields \|\| fields.length == 0){ queryFields = [] }else{ queryFields = fields.map(item =>{ let obj = {} obj.prop = item.prop if(item.props && item.props.lookup){ let model = item.props.lookup if(item.element === 'hi-select-grid'){ var columns = [] if(model && model.columns && model.columns.length){ columns = model.columns.map(item =>{ item.prop = item.name return item }) } let table = model.tableprops \|\| {} table['columns'] = columns obj.lookup = { type: "data", openstyle: 'selectgrid', bindField: item.prop, lookSelectGrid: { width: 1200, height: 600, table: table, bindField: item.prop, tableData: model && model.sourceDatas, }, } obj.dbtype = 'dbString' }else if(item.element === 'hi-data-select'){ var columns = [] if(model && model.columns && model.columns.length){ columns = model.columns.map(item =>{ item.prop = item.name return item }) } let queryOptionFields = model.queryOption.fields let store = model.storeCfg \|\| model.sourceDsCfg let modelFilePath =store.modelFile let fields = store.fields let rows = queryOptionFields.map(item =>{ return {children:[ { prop: item.name, label: item.label } ]} }); let cols = queryOptionFields.map(item =>{ return { colWidth: 100} }); let queryPanel = { rows: rows, cols: cols }; let tableColumn = model.columns.map(item =>{ return { prop: item.name, label: item.label } }) // var table = model.tableprops \|\| {} var table = { children:tableColumn, stripe: model.tableprops && model.tableprops.stripe \|\| false } let ds = { controlName: "HcDataset", controlId: modelFilePath, name: model.entityDs, modelFilePath: modelFilePath, _infcPagging: { pageSize: 10, pageNum: 1, returnCount: true }, _infcLoad: { autoActive: true, }, fields: fields, data: [], } obj.lookup = { type: "data", openstyle: 'dialog', birtModel: GridSingleSelect({ mainDataset: ds, hcQueryPanel: queryPanel, hcTable: table }), lookDataset: { modelFilePath: modelFilePath, // 数据模型路径 }, lookDialog: { title: "", width: 900, height: 600, }, bindField: item.prop, sourceDsId: model.sourceDsId } obj.dbtype = 'dbString' } } return obj }) } return queryFields }, // 数据集字段 fields(){ let fields = this.conf.dataset && this.conf.dataset.config.fields for(let key in this.queryFields){ let prop = this.queryFields[key].prop if(fields[prop] && fields[prop].lookup){ let lookup = Object.assign(fields[prop].lookup, this.queryFields[key].lookup) // 下拉枚举查找 if(lookup.label && lookup.returnFields){ for(let key in lookup.returnFields){ if(lookup.returnFields[key] == lookup.label){ lookup.bindShowField = key lookup.lookSelectGrid.bindShowField = key } if(lookup.lookSelectGrid && lookup.lookSelectGrid.tableData){ let data = lookup.lookSelectGrid.tableData for(let i in data){ if(data[i][lookup.returnFields[key]]){ data[i][key] = data[i][lookup.returnFields[key]] } } } } } // 数据模型查找 if(lookup.fieldPair && lookup.sourceDsId){ lookup.returnFields = lookup.fieldPair[lookup.sourceDsId].returnFields } lookup.returnType = "single", fields[prop]['lookup'] = lookup } } // 应用默认填充表达式 for(let key in fields){ if(fields[key].default && fields[key].default.exps){ fields[key].default['expr'] = fields[key].default.exps } } return fields }, // 数据集 dataset(){ var dataset = {} if(this.conf && this.conf.dataset){ let ds = this.conf.dataset dataset = { controlName: ds.controlName, controlId: ds.controlId, name: ds.name, modelFilePath: ds.modelFilePath, fields: this.fields, _infcLoad: { autoActive: false }, _infcPagging: { returnCount: true, pageSize: 100, pageNum: 1 }, data: [], } } return dataset }, // 查询面板 birtModelRight(){ let rows = this.queryFields.map(item =>{ return {children:[item],colspan: 6} }) let cols = this.queryFields.map(item =>{ return { colWidth: 60 } }) const queryPanel = { rows: rows, cols: cols }; let hcQueryPanel = { controlName: "HcQueryPanel", controlId: "HcQueryPanel_sam", inline: false, dataset: this.dataset && this.dataset.controlId \|\| "dsSam", size: "small", hideBtn: true, style: "width: 100%;", children: [], }; Object.assign(hcQueryPanel, QueryStyleFactory.buildForm(queryPanel) \|\| {}); let birtModelRight = { controlName: "BirtWorkBook", controlId: "BirtWorkBook_right", style: "border-bottom: 1px solid #eee;", showToolBar: false, children: [ { controlName: "BirtSheet", controlId: "BirtSheet_right", name: "sheet0", pageIndex: 0, dataSets: [].concat(this.dataset ? this.dataset : []), children: [ { controlName: "BirtFormSheet", controlId: "BirtFormSheet_01", children: [hcQueryPanel] } ] } ], }; return birtModelRight }, // 分组条件(统计字段) groupFields(){ let groupFields = this.conf && _.cloneDeep(this.conf.groupFields) \|\| [] // 组合分组条件 if(this.curTransferVal && this.curTransferVal.length){ let obj = {} let curTransferLabel = this.curTransferVal.map(item =>{ for(var field of groupFields){ if(field.prop == item){ return field.label } } }) obj = { prop: this.curTransferVal.join(), label: curTransferLabel.join() } groupFields.push(obj) } return groupFields }, // 分析字段 analyseFields(){ return this.conf && this.conf.analyseFields \|\| [] }, // 显示详情 showDetail(){ return this.currentObj.prop == 'detail' }, }, watch:{ conf:{ deep: true, handler: function(val){ if(val && val.groupFields && !this.groupForm.prop){ this.groupForm.prop = val.groupFields[0] && val.groupFields[0].prop this.curGroupField = this.groupForm.prop } if(val && val.analyseFields && val.analyseFields.length){ this.analysisData=val.analyseFields.map(item =>{ let obj = { prop: item.prop, countField: item.label, tableColumn: true, tableColumnCount: true, chartColumn: true, chartColumnCount: true, } return obj }) } } }, }, data() { return { size: 'small', superposition: false, perspective: false, chartType: "table", groupForm: { prop: "" }, loading: false, currentPage: 1, pageSize: 100, total: 0, data: [], // 排序 sortArr:[], sortIndex:-1, sortType: '', // 分析列 analysisVisible: false, analysisData:[], tableColumnCheck: true, tableColumnCountCheck: true, chartColumnCheck: true, chartColumnCountCheck: true, // 分析字段 analysisFieldsVisible: false, analysisFieldsArr:[], analysisChartConf:{ controlName: "PieChart", controlId: "chart_analysis", height: "100%", isGroupData: true, groupBy: "label", datas: [], calcFields: [ { name: "value", title: "" } ], option: { legend: { show: true } }, events:{ click(row){ debugger; var _this = this.$parent.$parent; _this.analysisChartConf.datas = _this.deepAnalysisFields let data = JSON.parse(JSON.stringify(row.data)) delete data.emphasis // 删除当前分析以后的深度分析 _this.deepArr.splice(_this.curIndex+1, _this.deepArr.length - _this.curIndex - 1) let obj = _this.deepArr[_this.deepArr.length -1] obj.selectVal = _this.currentObj.name _this.$set(_this.deepArr,_this.curIndex,obj) _this.$set(_this.deepArr,_this.curIndex + 1, data) _this.curGroupField = data.prop; _this.currentObj = data; _this.curIndex = _this.curIndex + 1; _this.doQuery(); _this.analysisFieldsVisible = false; } } }, // 深度分析 deepArr:[], conf:{}, // 图表当前选中对象 currentObj:{}, // 当前分组字段 curGroupField: '', // 深度分析当前环节下标 curIndex: 0, exportLoading: false, // 穿梭框 transferVisible: false, curTransferVal: [], groupFieldsEdit: [], } }, updated() { this.$nextTick(() => { this.$refs["table"] && this.$refs["table"].doLayout(); }); }, methods: { // 排序 sortClick(val) { this.sortIndex = val }, sortDown(){ this.sortType = 'desc' }, sortUp(){ this.sortType = 'asc' }, // 前进 goCommand(val){ let index = this.curIndex + val; this.curIndex = index; this.currentObj = this.deepArr[index]; this.curGroupField = this.currentObj.prop; this.data = this.currentObj.data }, goClick:_.debounce(function(){ if(this.curIndex < this.deepArr.length - 1){ this.curIndex = this.curIndex + 1; this.currentObj = this.deepArr[this.curIndex]; this.curGroupField = this.currentObj.prop; this.data = this.currentObj.data } },500), // 后退 backCommand(val){ this.curIndex = val this.currentObj = this.deepArr[val]; this.curGroupField = this.currentObj.prop; this.data = this.currentObj.data }, backClick:_.debounce(function(){ if(this.curIndex > 0){ this.curIndex = this.curIndex - 1 this.currentObj = this.deepArr[this.curIndex]; this.curGroupField = this.currentObj.prop; this.data = this.currentObj.data } },500), // 深度分析 breadcrumbClick(val) { this.curGroupField = val let arrnew = this.deepArr.map(item =>{ return item.prop }) this.curIndex = arrnew.indexOf(val) this.currentObj = this.deepArr[this.curIndex]; // 数据替换成缓存的数据 this.data = this.currentObj.data }, // 点击查询 doCount() { debugger; // 监听数据集 if(this.dataset && this.deepArr.length == 0){ let ds = this.$refs.BirtWorkBook_right.dataset[this.dataset.controlId] ds && ds.on("afterLoadData", this.afterLoadData); } this.loading = true; let prop = this.groupForm.prop; let fields = this.groupFields.map(item =>{ return item.prop }) this.curGroupField = prop; let index = fields.indexOf(prop) if(this.deepArr.length){ // 如果切换了分组条件，清空深度分析 if(this.deepArr[0] && this.deepArr[0].prop !== prop){ this.deepArr = [] this.currentObj = this.groupFields[index] }else{ this.currentObj = this.deepArr[0] } } this.currentPage = 1 this.doQuery(); // 当前分组加入深度分析 if(index < 0){ this.$message.error('当前分组条件不在分组字段中，请重新配置') }else{ this.$set(this.deepArr,0,this.groupFields[index]) this.curIndex = 0 } }, afterLoadData(datas){ this.data = datas // 缓存数据 this.deepArr[this.curIndex].data = datas; let ds = this.$refs.BirtWorkBook_right.dataset[this.dataset.controlId] // 总条数 this.total = ds._infcPagging.recordCount \|\| this.total }, // 查询方法 doQuery(){ let ds = this.$refs.BirtWorkBook_right.dataset[this.dataset.controlId] if(this.showDetail){ ds._infcPagging = { _isPagging: true, pageSize: this.pageSize, pageNum: this.currentPage, returnCount: true }; ds._infcStat = {} ds._infcSort = {} }else{ ds._infcPagging = { _isPagging: true, pageSize: this.pageSize, pageNum: this.currentPage, returnCount: true }; ds._infcStat = { isGroupData: true, groupBy: this.curGroupField, } if(this.sortIndex > -1){ let obj = this.sortArr[this.sortIndex] ds._infcSort.orderBy =[{ name: obj.prop, desc: obj.label, type: this.sortType \|\| 'desc' }] }else{ ds._infcSort.orderBy = [] } } ds.query(); this.loading = false; }, // 重置 reset() { this.$refs.groupForm.resetFields(); this.curTransferVal = [] this.groupForm.prop = this.groupFields[0] && this.groupFields[0].prop; var queryPanel = this.$refs.BirtWorkBook_right.$children[0].$children[0].$children[0].$children[0].$children[0].$children[0]; queryPanel.reset(); let ds = this.$refs.BirtWorkBook_right.dataset[this.dataset.controlId] ds._infcLoad.queryModel={} }, handleSizeChange(val) { this.pageSize = val this.doQuery() }, handleCurrentChange(val) { this.currentPage = val this.doQuery() }, // 切换图表 chartTypeChange(command) { this.chartType = command; }, // 打开分析列 analysisClick(){ this.analysisVisible = true }, // 分系列全选 handelCheckAll(val){ let _this = this this.analysisData = this.analysisData.map(item => { if(val == 'tableColumn') { item.tableColumn = _this.tableColumnCheck } if(val == 'tableColumnCount') { item.tableColumnCount = _this.tableColumnCountCheck } if(val == 'chartColumn') { item.chartColumn = _this.chartColumnCheck } if(val == 'chartColumnCount') { item.chartColumnCount = _this.chartColumnCountCheck } return item }) }, // 刷新 refresh(){ this.doQuery(); this.$refs.chartConf && this.$refs.chartConf.refreshChart(); }, // 导出 exportExcel() { let param = { pageNum: -1, pageSize: -1, __slaveExport: false, }; let __body = {}; let ds = this.$refs.BirtWorkBook_right.dataset[this.dataset.controlId] var cdion = ds.lastLoadCdion console.log('cdion', cdion) if (cdion) { __body['queryCdions'] = JSON.parse(cdion); } param['modelFilePath'] = ds['modelFilePath']; param['__funcpath'] = ds['__funcpath']; param.__body = __body let sheetStyle = {} let cells = [] let columns = [] this.tableColumns.forEach(item => { cells.push({ title: item.label, colspan: 1, rowspan: 1 }) columns.push({ fields: item.prop, width: 70 }) }); sheetStyle = { name: '统计分析', titleRows: [ { cells: cells } ], columns: columns } param.__sheetStyle = sheetStyle var data = { __sheetDatas: JSON.stringify([param]) } var url = this.$HI.exportUrl this.exportLoading = true this.$HI.request.post(url,data).then((res) =>{ console.log('res', res) this.exportLoading = false if(res.status == 200){ let token = getToken(); var url = this.$HI.download + `?path=${res.dataPack.path}&access_token=${token}` url = url.replace(/\\/g,"/") const a = document.createElement('a') //创建a标签 a.style.display = 'none' a.href = url // 指定下载链接 // a.download = '用户信息.xlsx' //指定下载文件名 a.click() //触发下载 } }).catch((e) =>{ this.exportLoading = false }) }, // 打开穿梭框 showtransfer(){ this.groupFieldsEdit = JSON.parse(JSON.stringify(this.curTransferVal)) this.transferVisible = true }, transferConfirm(){ if(this.groupFieldsEdit && this.groupFieldsEdit.length > 1){ this.curTransferVal = JSON.parse(JSON.stringify(this.groupFieldsEdit)) this.groupForm.prop = this.curTransferVal.join(); this.curGroupField = this.groupForm.prop; this.transferVisible = false }else{ this.$message.error("该分组选项已存在") } }, transferClose(){ this.transferVisible = false this.groupFieldsEdit = JSON.parse(JSON.stringify(this.curTransferVal)) }, transferUp(option){ let arr = this.groupFieldsEdit let index = this.groupFieldsEdit.indexOf(option.prop) if(index > 0){ arr.splice(index - 1, 1, ...arr.splice(index, 1, arr[index - 1])); } }, transferDown(option){ let arr = this.groupFieldsEdit let index = this.groupFieldsEdit.indexOf(option.prop) if(index < arr.length){ arr.splice(index, 1, ...arr.splice(index + 1, 1, arr[index])); }; }, // 合计列 getSummaries(parma){ const { columns, data } = parma; const sums = []; let arr = this.analyseFields.map(item =>{ return item.prop }) columns.forEach((column, index) => { let show = true this.analysisData.forEach(item =>{ if(item.prop == column.property){ show = item.tableColumnCount } }) if(arr.includes(column.property) && show){ let values = data.map(item => Number(item[column.property])); sums[index] = values.reduce((prev, curr) => { const value = Number(curr); if (!isNaN(value)) { return prev + curr; } else { return prev; } }, 0); }else{ sums[index] = ''; } }) sums[0] = '统计' return sums; } }, mounted() { } }; </script> <style> .birtModelRight .el-main{ padding: 5px !important; } .birtModelRight table.zhc-birt-data-list{ table-layout: auto !important; border-collapse: initial !important; border-spacing: revert !important; } .el-transfer.sam .el-transfer-panel:nth-child(1) button{ display: none; } .el-dropdown.disabled .el-button, .el-dropdown.disabled .el-button:hover{ cursor: not-allowed; color: #C0C4CC; cursor: not-allowed; background-image: none; background-color: #FFF; border-color: #EBEEF5; } .tableHeader th, .tableHeader tr{ background: linear-gradient(0deg,rgba(224,240,255,1), rgba(240,247,255,1)); } </style> <style lang="scss" scoped> .container { position: relative; display: flex; flex-direction: column; height: 100%; padding: 20px; } .btn-toolbar { * + * { margin-left: 10px; margin-right: 0; } } .el-dropdown-menu__item { min-width: 90px; } .center-content { height: 100%; width: 100%; padding: 10px; box-sizing: border-box; } .depth-analysis { display: flex; align-items: center; padding: 10px; } .el-breadcrumb__item a { cursor: pointer !important; } .deepActive{ color: #06c; font-weight: 600; } .sortActive{ color: rgb(33, 235, 141); font-weight: 600; } >>>.el-dropdown-menu__item:focus, .el-dropdown-menu__item:not(.is-disabled):hover{ background: initial; color: initial; } .el-dropdown-menu__item i{ font-weight: 600; margin: 0 0 0 5px; } .el-dropdown-menu__item i:hover { color: rgb(33, 235, 141); } .birtModelRight .el-main{ padding: 5px !important; } .el-icon-edit{ right: 30px; position: absolute; z-index: 1; line-height: 30px; cursor: pointer; } >>>.el-dropdown.disabled .el-button, >>>.el-dropdown.disabled .el-button:hover{ cursor: not-allowed; color: #C0C4CC; cursor: not-allowed; background-image: none; background-color: #FFF; border-color: #EBEEF5; } </style>

Ignore Space Show notes View

project/hivuiSam/components/analysisSam/Index.vue

<template>
  <div class="container">
    
    <div class="btn-toolbar">
      
      <el-dropdown split-button :size="size" :class="{disabled: backDisabled}" :disabled="backDisabled" @command="backCommand" @click="backClick">
        <i class="el-icon-back"></i>后退
        <el-dropdown-menu slot="dropdown">
          <el-dropdown-item v-for="(item,index) in deepArr" :key="item.prop" :command="index" v-if="index < curIndex">{{ item.label }}</el-dropdown-item>
        </el-dropdown-menu>
      </el-dropdown>
      
      <el-dropdown split-button :size="size" :class="{disabled: goDisabled}" :disabled="goDisabled" @command="goCommand" @click="goClick">
        <i class="el-icon-right"></i>前进
        <el-dropdown-menu slot="dropdown">
          <el-dropdown-item v-for="(item,index) in deepArr" :key="item.prop" :command="index" v-if="index > curIndex">{{ item.label }}</el-dropdown-item>
        </el-dropdown-menu>
      </el-dropdown>
      
      <el-dropdown split-button :size="size" class="sort" @command="sortClick">
        <i class="el-icon-sort"></i>排序
        <el-dropdown-menu slot="dropdown">
          <el-dropdown-item :command="-1">不排序</el-dropdown-item>
          <el-dropdown-item v-for="(item, index) in sortArr" :key="item.prop" :command="index">{{ item.label }}
            <i class="el-icon-sort-down" :class="{ sortActive: index == sortIndex && sortType =='desc' }"  @click="sortDown"></i> <i class="el-icon-sort-up" :class="{ sortActive: index == sortIndex && sortType =='asc' }"  @click="sortUp"></i>
          </el-dropdown-item>
        </el-dropdown-menu>
      </el-dropdown>
      
      <el-button icon="el-icon-setting" :size="size" @click="analysisClick">列设置</el-button>
      
      <el-dropdown :size="size" @command="chartTypeChange">
        <el-button :size="size">
          <i class="el-icon-s-data"></i>
          图表<i class="el-icon-arrow-down el-icon--right"></i>
        </el-button>
        <el-dropdown-menu slot="dropdown">
          <el-dropdown-item command="table">表格</el-dropdown-item>
          <el-dropdown-item command="pie">饼图</el-dropdown-item>
          <el-dropdown-item command="bar">柱图</el-dropdown-item>
          <el-dropdown-item command="line">线图</el-dropdown-item>
          <el-dropdown-item command="area">区域图</el-dropdown-item>
        </el-dropdown-menu>
      </el-dropdown>
      
      <el-button icon="el-icon-refresh" :size="size" @click="refresh">刷新</el-button>
      
      <el-popover
        placement="bottom"
        popper-class="recordPop"
        v-model="recordVisible">
        <el-table :data="recordData" @row-dblclick="recordDblClick" @selection-change="handleSelectionChange">
          <el-table-column type="selection" width="55">
          </el-table-column>
          <el-table-column min-width="150" prop="name" label="方案名称">
            <template slot-scope="scope">
                <el-input v-if="scope.row.isEdit" v-model="scope.row.name"></el-input>
                <span v-else>{{ scope.row.name }}</span>
            </template>
          </el-table-column>
          <el-table-column width="100" prop="simple" label="缩写">
            <template slot-scope="scope">
                <el-input v-model="scope.row.simple"></el-input>
            </template>
          </el-table-column>
          <el-table-column label="操作" width="150">
            <template slot-scope="scope">
              <el-button
                size="mini"
                type="text"
                v-if="!scope.row.isEdit"
                @click="handleEdit(scope.$index, scope.row)">编辑</el-button>
              <el-button
                size="mini"
                type="text"
                v-else
                @click="handleConfirm(scope.$index, scope.row)">确定</el-button>
              <el-button
                size="mini"
                type="text"
                style="color:red;"
                @click.stop="handleDelete(scope.$index, scope.row)">删除</el-button>
            </template>
          </el-table-column>
        </el-table>
        <el-button type="primary" size="mini" icon="el-icon-check" style="margin: 10px 0 0;" @click.stop="doClick" :disabled="btnDisabled">执行叠加</el-button>
        <el-button slot="reference" icon="el-icon-edit-outline" :size="size">分析记录</el-button>
      </el-popover>
      
      <el-popover
        placement="bottom"
        v-model="schemeVisible">
        <el-table size="mini" :data="schemeData" @row-click="schemeRowClick">
        </el-table-column>
          <el-table-column width="150" prop="FSCHEMENAME" label="方案列表"></el-table-column>
          <el-table-column label="操作" width="150">
            <template slot-scope="scope">
              <el-button
                size="mini"
                type="text"
                style="color:red;"
                @click.stop="handleSchemeDelete(scope.$index, scope.row)">删除</el-button>
            </template>
          </el-table-column>
        </el-table>
        <el-button slot="reference" icon="el-icon-edit-outline" :size="size" @click="showSchemeData">方案列表</el-button>
      </el-popover>
      
      <el-checkbox
        v-model="superposition"
        label="叠加"
        border
        :size="size" 
      ></el-checkbox>
      
      <el-checkbox
        v-model="perspective"
        label="直接透视"
        border
        :size="size" 
      ></el-checkbox>
      <el-button icon="el-icon-download" :size="size" :disabled="this.data && this.data.length == 0" :loading="exportLoading" @click="exportExcel">导出excel</el-button>
      <el-button icon="el-icon-save" :loading="schemeLoading" @click="saveScheme">保存方案</el-button>
    </div>
    
    <hi-layout :is-fit="true" style="heiht: 100%;">
      
      <hi-layout-right size="300" title="过滤条件">
        <div style="height: calc( 100% - 342px );overflow: auto;border:none;">
          <birt-work-book
          style="min-height: calc( 100% - 342px );"
          :conf="birtModelRight"
          :ref="birtModelRight.controlId"
          class="birtModelRight"
        ></birt-work-book>
        </div>
           <el-divider>汇总条件</el-divider>
        <div style="height: 180px;overflow:auto;">
        <el-form
          @submit.native.prevent
          ref="havingForm"
          style="padding: 10px 10px 0 0;"
          :model="havingForm"
          label-width="80px"
        >
          <el-form-item v-for="(val,name,index) in havingForm" :key="name">
             <span slot="label" :title="val.label">
              {{ val.label }}
            </span>
            <el-col :span="10">
              <el-input type="number" v-model="havingForm[name].value" size="mini" controls-position="right" @change="handleChange" :min="0"></el-input>
            </el-col>
            <el-col class="line" :span="2">-</el-col>
            <el-col :span="10">
            <el-input type="number" v-model="havingForm[name].value2" size="mini" controls-position="right" @change="handleChange" :min="0"></el-input>
            </el-col>
            <el-col class="line" :span="2" style="text-align:center;">
              <el-button v-if="val.sign == 'inRange'" size="mini" type="text" @click="signChange(name,'outRange')">内</el-button>
              <el-button v-else size="mini" type="text"  @click="signChange(name,'inRange')">外</el-button>
            </el-col>
          </el-form-item>
        </el-form>
        </div>
        <el-form
          @submit.native.prevent
          ref="groupForm"
          style="padding: 10px 10px 0 0;"
          :model="groupForm"
          label-width="80px"
        >
          <el-form-item label="分组条件" prop="prop">
            <i class="el-icon-edit" @click="showtransfer"></i>
            <el-select v-model="groupForm.prop" style="width: 100%;" placeholder="请选择分组条件">
              <el-option
                v-for="item in groupFields"
                :label="item.label"
                :value="item.prop"
                :key="item.prop"
              ></el-option>
            </el-select>
          </el-form-item>
          <el-form-item>
            <el-button
              type="primary"
              size="mini"
              :loading="loading"
              @click="doCount"
              >执行查询</el-button
            >
            <el-button size="mini" @click="reset">重置</el-button>
          </el-form-item>
        </el-form>
      </hi-layout-right>
      
      <hi-layout-center style="heiht: 100%;">
        <div class="depth-analysis">
          <span>深度分析:</span>
          <el-breadcrumb
            separator-class="el-icon-arrow-right"
            style="padding: 0 0 0 10px;"
          >
            <el-breadcrumb-item v-for="(item,index) in deepArr" :key="item.prop">
              <span v-if="item.label.includes(',') && item.selectVal" @click="breadcrumbClick(item.prop)" :class="{ deepActive: index == curIndex }" style="cursor: pointer;">
                <span v-for="(it, i) in item.label.split(',')">
                  {{ it }}
                  <span style="color: rgb(255, 102, 0);margin-left:2px;" v-if="index < curIndex">{{ item.selectVal.split(',')[i] }}<span v-if="i < item.label.split(',').length - 1">,</span></span>
                </span>
              </span>
              <span v-else @click="breadcrumbClick(item.prop)" :class="{ deepActive: index == curIndex }" style="cursor: pointer;">
                {{ item.label }}
                <span style="color: rgb(255, 102, 0);margin-left:2px;" v-if="index < curIndex">{{ item.selectVal }}</span>
              </span>
            </el-breadcrumb-item>
          </el-breadcrumb>
        </div>
        <div v-if="showDetail" style="height: calc( 100% - 100px )">
          <el-table
            :data="data"
            ref="table"
            height="100%"
            border
            stripe
            :show-summary="showSummary"
            :summary-method="getSummaries"
            header-row-class-name="tableHeader"
            style="width: 100%"
          >
            <el-table-column
              v-if="showIndex"
              type="index">
            </el-table-column>
            <el-table-column
              v-for="item in tableColumns"
              :key="item.prop"
              :prop="item.prop"
              :label="item.label"
            >
            </el-table-column>
          </el-table>
          <el-pagination
            @size-change="handleSizeChange"
            @current-change="handleCurrentChange"
            :current-page="currentPage"
            :page-sizes="[10, 20, 50, 100]"
            :page-size="pageSize"
            layout="total, sizes, prev, pager, next, jumper"
            :total="total"
          >
          </el-pagination>
        </div>
        <div v-if="!showDetail && chartType == 'table'" style="height: calc( 100% - 100px )">
          <el-table
            :data="data"
            ref="table"
            height="100%"
            border
            stripe
            @row-dblclick="rowDblclick"
            :show-summary="showSummary"
            :summary-method="getSummaries"
            header-row-class-name="tableHeader"
            style="width: 100%"
          >
            <el-table-column
              v-if="showIndex"
              type="index">
            </el-table-column>
            <el-table-column
              v-for="item in tableColumns"
              :key="item.prop"
              :prop="item.prop"
              :label="item.label"
            >
            </el-table-column>
          </el-table>
          <el-pagination
            @size-change="handleSizeChange"
            @current-change="handleCurrentChange"
            :current-page="currentPage"
            :page-sizes="pageSizes"
            :page-size="pageSize"
            layout="total, sizes, prev, pager, next, jumper"
            :total="total"
          >
          </el-pagination>
        </div>
        <Pie-chart
          style="height: calc( 100% - 100px )"
          v-else-if="!showDetail && chartType == 'pie'"
          ref="chartConf"
          :conf="chartConf"
        ></Pie-chart>
        <Bar-chart
          style="height: calc( 100% - 100px )"
          v-else-if="!showDetail && chartType == 'bar'"
          ref="chartConf"
          :conf="chartConf"
        ></Bar-chart>
        <Line-chart
          style="height: calc( 100% - 100px )"
          v-else-if="!showDetail && chartType == 'line'"
          ref="chartConf"
          :conf="chartConf"
        ></Line-chart>
        <Line-chart
          style="height: calc( 100% - 100px )"
          v-else-if="!showDetail && chartType == 'area'"
          ref="chartConf"
          :conf="chartConf"
        ></Line-chart>
      </hi-layout-center>
    </hi-layout>
    
    <el-dialog :visible.sync="analysisVisible" title="分析列设置" :height="500">
      <el-table :data="analysisData" size="small" :height="400">
        <el-table-column
          prop="countField"
          label="统计字段">
        </el-table-column>
        <el-table-column prop="tableColumn" label="网格列" align="center">
          <template slot="header" slot-scope="{row}">
            <el-checkbox v-model="tableColumnCheck" @change="handelCheckAll('tableColumn')" label="网格列"></el-checkbox>
          </template>
          <template slot-scope="{row}">
            <el-checkbox v-model="row.tableColumn"></el-checkbox>
          </template>
        </el-table-column>
        <el-table-column prop="tableColumn" label="网格合计列" align="center">
          <template slot="header" slot-scope="{row}">
            <el-checkbox v-model="tableColumnCountCheck" @change="handelCheckAll('tableColumnCount')" label="网格合计列"></el-checkbox>
          </template>
          <template slot-scope="{row}">
            <el-checkbox v-model="row.tableColumnCount"></el-checkbox>
          </template>
        </el-table-column>
        <el-table-column prop="tableColumn" label="图表列" align="center">
          <template slot="header" slot-scope="{row}">
            <el-checkbox v-model="chartColumnCheck" @change="handelCheckAll('chartColumn')" label="图表列"></el-checkbox>
          </template>
          <template slot-scope="{row}">
            <el-checkbox v-model="row.chartColumn"></el-checkbox>
          </template>
        </el-table-column>
        <el-table-column prop="chartColumnCount" label="图表列汇总" align="center">
          <template slot="header" slot-scope="{row}">
            <el-checkbox v-model="chartColumnCountCheck" @change="handelCheckAll('chartColumnCount')" label="图表列汇总"></el-checkbox>
          </template>
          <template slot-scope="{row}">
            <el-checkbox v-model="row.chartColumnCount"></el-checkbox>
          </template>
        </el-table-column>
      </el-table>
    </el-dialog>
    
    <el-dialog  :visible.sync="analysisFieldsVisible" title="选择分析字段" :height="500">
       <Pie-chart
          style="height: 400px;"
          ref="analysisChart"
          :conf="analysisChartConf"
        ></Pie-chart>
    </el-dialog>
    
    <el-dialog  :visible.sync="transferVisible" title="选择分组字段" :height="500" width="640px" center @close="transferClose">
       <el-transfer class="sam" v-model="groupFieldsEdit" :data="conf.groupFields" 
       :titles="['来源字段', '目标字段']"
       target-order="push"
       :props="{
          key: 'prop',
          label: 'label'
        }" style="width: 100%;padding: 20px;">
        <span slot-scope="{ option }">{{ option.label }}
          <el-button style="margin-left: 10px;" icon="el-icon-top" type="primary" size="mini" circle @click.stop="transferUp(option)"></el-button>
          <el-button icon="el-icon-bottom" type="primary" size="mini" circle @click.stop="transferDown(option)"></el-button>
        </span>
        </el-transfer>
        <span slot="footer" class="dialog-footer">
          <el-button @click="transferClose" size="small">取 消</el-button>
          <el-button type="primary" size="small" @click="transferConfirm">确 定</el-button>
        </span>
    </el-dialog>
  </div> 
</template>

}else{
                  let keyArr = sData.data.map(item =>{
                    return item[this.curGroupField]
                  })
                  let i = keyArr.indexOf(keyList[key])
                  if(i > -1){
                    obj = {...obj, ...sData.data[i]}
                  }else{
                    for(let j in sData.data[0]){
                      obj[j+'-'+sData.id] = 0
                    }
                  }
                }
              }
              newData[key] = obj
            }
            this.data = newData
          }else{
            this.data = []
          }
          arr = curGroupArr.concat(newFields)
        }else{
          // 当前分组列+分析列
          arr = curGroupArr.concat(this.analyseFields)
          if(arr && arr.length){
            this.sortArr = arr
          }
        }
        arr = arr.filter(item =>{
          var show = true
          this.analysisData.forEach(data =>{
            if(data.prop == item.prop){
              show = data.tableColumn
            }
          })
          return show
        })
        return arr
      }
    },
    showIndex(){
      return this.conf && this.conf.showIndex || false
    },
    // 网格是否显示合计行
    showSummary(){
      let flag = false
      this.analysisData.some(item =>{
        flag = item.tableColumnCount
        return flag
      })
      return flag
    },
    //  数据列
    dataFields(){
      return this.conf && this.conf.dataFields || []
    },
    // 图表配置
    chartConf() {
      debugger
      let groupBy = this.curGroupField;
      let calcFields = []
      // 系列
      var series = [];
      const tooltipOption = {
        trigger: 'item',
        axisPointer: {
          type: 'shadow'
        },
      }
      calcFields = this.analyseFields.map(item =>{
        let obj = {
          name: item.prop,
          title: item.label
        }
        series.push({tooltip: tooltipOption})
        return obj
      })
      let controlName = ''
      let datas = this.data
      // 组合分组条件时，数据添加组合列
      if(groupBy.includes(',')){
        let keyArr = groupBy.split(',');
        datas = datas.map(item =>{
          let label = []
          for(let key of keyArr){
            label.push(item[key])
          }
          label=label.join();
          item[groupBy] = label
          return item
        })
      }
      controlName = this.chartType == "pie" ? "PieChart"
                  : this.chartType == "bar" ? "BarChart"
                  : this.chartType == "line" ? "LineChart"
                  : this.chartType == "area" ? "LineChart" : 'PieChart'
      // 区域图
      let areaSeries = calcFields.map(item =>{
        return {
          smooth: true,
          areaStyle: {
            normal: {
                color: new this.$echarts.graphic.LinearGradient(0, 0, 0, 1, [{ offset: 0, color: "rgba(30, 231, 231, 0.3)" },{ offset: 1, color: "rgba(30, 231, 231, 0.1)" }]),
            },
          },
          label: {
            show: false,
            position: "outside",
          },
        }
      })
      // 饼图
      var pieSeries = []
      if(this.chartType == "pie"){
        let len = calcFields.length
        switch(len){
          case 1: 
            pieSeries = [];
            break;
          case 2: 
            pieSeries = [
              {
                radius: ["50%"],
                center: ["25%", "50%"],
              },
              {
                radius: ["50%"],
                center: ["75%", "50%"],
              },
            ]
            break;
          case 3:
            pieSeries = [
              {
                radius: ["50%"],
                center: ["25%", "50%"],
              },
              {
                radius: ["35%"],
                center: ["75%", "30%"],
              },
              {
                radius: ["35%"],
                center: ["75%", "70%"],
              },
            ]
            break;
          case 4: 
            pieSeries = [
              {
                radius: ["35%"],
                center: ["25%", "30%"],
              },
              {
                radius: ["35%"],
                center: ["25%", "70%"],
              },
              {
                radius: ["35%"],
                center: ["75%", "30%"],
              },
              {
                radius: ["35%"],
                center: ["75%", "70%"],
              },
            ]
            break;
        }
      }
      const conf = {
          controlName: controlName,
          controlId: "chart_controlid",
          height: "100%",
          isGroupData: true,
          groupBy: groupBy,
          datas: datas,
          calcFields: calcFields,
          option: {
            legend: {
              show: true
            },
            series: this.chartType == "area" ? areaSeries 
            : this.chartType == "pie" ? pieSeries : series
          },
          events:{
            click(row){
              let _this = this.$parent.$parent.$parent;
              _this.currentObj = row.data
              _this.currentObj.prop = _this.curGroupField;
              if(_this.perspective){
                var index = -1
                _this.deepArr.forEach((item,i)=>{
                  if(item.prop == _this.curGroupField){
                    index = i
                  }
                })
                if(index > -1 && index < _this.deepArr.length - 1){
                  _this.analysisFieldsVisible = false
                  _this.curIndex = _this.curIndex + 1
                  _this.currentObj = _this.deepArr[_this.curIndex];
                  _this.data = _this.currentObj.data
                  _this.curGroupField = _this.currentObj.prop;
                }else{
                  _this.analysisChartConf.datas = _this.deepAnalysisFields
                  _this.analysisFieldsVisible = true
                }
              }else{
                _this.analysisChartConf.datas = _this.deepAnalysisFields
                _this.analysisFieldsVisible = true
              }
              _this.superposition = false
            }
          }
      };
      return conf 
    },
    //  深度分析字段列表
    deepAnalysisFields(){
      let fields = this.groupFields
      if(fields && fields.length == 0){
        return []
      }
      let analysisFields = fields.map((item) => {
        item.value = 1
        return item
      });
      
      // 排除已经统计的分析列
      if(this.deepArr && this.deepArr.length > 0){
        let arrnew = this.deepArr.slice(0, this.curIndex + 1).map((item) => {
          return item.prop
        });
        // 多条件的分组 拆开排除
        arrnew.forEach(item =>{
          if(item.includes(',')){
            arrnew.concat(item.split(','))
          }
        })
        analysisFields = analysisFields.filter(item =>{
          return arrnew.indexOf(item.prop) < 0
        })
      }
      // 添加详情
      analysisFields.push(
        {
          prop: 'detail',
          label: "详情",
          value: 1
        }
      )
      return analysisFields
    },
    // 查询字段
    queryFields(){
      let queryFields = []
      let fields = this.conf && this.conf.queryFields
      if(!fields || fields.length == 0){
        queryFields = []
      }else{
        queryFields = fields.map(item =>{
          let obj = {}
          obj.prop = item.prop;
          obj.label = item.label;
          if(item.props && item.props.lookup){
            let model = item.props.lookup
            if(item.element === 'hi-select-grid'){
              var columns = []
              if(model && model.columns && model.columns.length){
                columns = model.columns.map(item =>{
                  item.prop = item.name
                  return item
                })
              }
              let table = model.tableprops || {}
              table['columns'] = columns
              obj.lookup = {
                type: "data",
                openstyle: 'selectgrid',
                bindField: item.prop,
                lookSelectGrid: {
                  width: 1200,
                  height: 600,
                  table: table,
                  bindField: item.prop,
                  tableData: model && model.sourceDatas,
                },
              }
              obj.dbtype = 'dbString'
            }else if(item.element === 'hi-data-select'){
              var columns = []
              if(model && model.columns && model.columns.length){
                columns = model.columns.map(item =>{
                  item.prop = item.name
                  return item
                })
              }
              let queryOptionFields = model.queryOption.fields
              let store = model.storeCfg || model.sourceDsCfg
              let modelFilePath =store.modelFile
              let fields = store.fields
              let rows = queryOptionFields.map(item =>{
                return {children:[
                  {
                    prop: item.name,
                    label: item.label
                  }
                ]}
              });
              let cols = queryOptionFields.map(item =>{
                return { colWidth: 100}
              });
              let queryPanel = {
                rows: rows,
                cols: cols
              };
              let tableColumn = model.columns.map(item =>{
                return {
                  prop: item.name,
                  label: item.label
                }
              })
              // var table = model.tableprops || {}
              var table = {
                children:tableColumn,
                stripe: model.tableprops && model.tableprops.stripe || false
              }
              let ds = {
                controlName: "HcDataset",
                controlId: modelFilePath,
                name:  model.entityDs,
                modelFilePath: modelFilePath,
                _infcPagging: {
                    pageSize: 10,
                    pageNum: 1,
                    returnCount: true
                },
                _infcLoad: {
                    autoActive: true,
                },
                fields: fields,
                data: [],
              }
              obj.lookup = {
                type: "data",
                openstyle: 'dialog',
                birtModel: GridSingleSelect({
                  mainDataset: ds,
                  hcQueryPanel: queryPanel,
                  hcTable: table
                }),
                lookDataset: {
                  modelFilePath: modelFilePath, // 数据模型路径
                },
                lookDialog: {
                  title: "",
                  width: 900,
                  height: 600,
                },
                bindField: item.prop,
                sourceDsId: model.sourceDsId
              }
              obj.dbtype = 'dbString'
            }
          } 
          return obj
        })
      }
      return queryFields
    },
    // 数据集字段
    fields(){
      let fields = this.conf.dataset && this.conf.dataset.config.fields
      for(let key in this.queryFields){
        let prop = this.queryFields[key].prop
        if(fields[prop] && fields[prop].lookup){
          let lookup = Object.assign(fields[prop].lookup, this.queryFields[key].lookup)
          // 下拉枚举查找
          if(lookup.label && lookup.returnFields){
            for(let key in lookup.returnFields){
              if(lookup.returnFields[key] == lookup.label){
                lookup.bindShowField = key
                lookup.lookSelectGrid.bindShowField = key
              }
              if(lookup.lookSelectGrid && lookup.lookSelectGrid.tableData){
                let data = lookup.lookSelectGrid.tableData
                for(let i in data){
                  if(data[i][lookup.returnFields[key]]){
                    data[i][key] = data[i][lookup.returnFields[key]]
                  }
                }
              }
            }
          }
          // 数据模型查找
          if(lookup.fieldPair && lookup.sourceDsId){
            lookup.returnFields = lookup.fieldPair[lookup.sourceDsId].returnFields
          }
          lookup.returnType = "single",
          fields[prop]['lookup'] = lookup 
        }
      }
      // 应用默认填充表达式
      for(let key in fields){
        if(fields[key].default && fields[key].default.exps){
          fields[key].default['expr'] = fields[key].default.exps
        }
      }
      return fields
    },
    // 数据集
    dataset(){
      var dataset = {}
      if(this.conf && this.conf.dataset){
        let ds = this.conf.dataset
        dataset = {
          controlName: ds.controlName,
          controlId: ds.controlId,
          name: ds.name,
          modelFilePath: ds.modelFilePath,
          fields: this.fields,
          _infcLoad: {
              autoActive: false
            },
          _infcPagging: {
              returnCount: true,
              pageSize: 100,
              pageNum: 1
            },
          data: [],
        }
      }
      return dataset
    },
    // 查询面板
    birtModelRight(){
      let rows = this.queryFields.map(item =>{
        return {children:[item],colspan: 12}
      })
      let cols = this.queryFields.map(item =>{
        return { colWidth: 60 }
      })
      const queryPanel = {
        rows: rows,
        cols: cols
      };
      let hcQueryPanel = {
        controlName: "HcQueryPanel",
        controlId: "HcQueryPanel_sam",
        inline: false,
        dataset: this.dataset && this.dataset.controlId || "dsSam",
        size: "small",
        hideBtn: true,
        style: "width: 100%;",
        children: [],
      };
      Object.assign(hcQueryPanel, QueryStyleFactory.buildForm(queryPanel) || {});
      let birtModelRight = {
        controlName: "BirtWorkBook",
        controlId: "BirtWorkBook_right",
        style: "border-bottom: 1px solid #eee;",
        showToolBar: false,
        children: [
          {
            controlName: "BirtSheet",
            controlId: "BirtSheet_right",
            name: "sheet0",
            pageIndex: 0,
            dataSets: [{
              controlName: "HcDataset",
              controlId: "dsScheme",
              name: "SysSchemeBizEntity",
              rowKey: "FGUID",
              modelFilePath: "/platf/scheme/entity/SysSchemeBizEntity.xml",
              _infcLoad: {
                  autoActive: false,
                  __zcQuery: true
              },
              _infcPagging: {
                  _isAddingPagging: false,
                  pageSize: -1,
              },
              fields: {},
              data: [],
            }].concat(this.dataset ? this.dataset : []),
            children: [
              {
                controlName: "BirtFormSheet",
                controlId: "BirtFormSheet_01",
                children: [hcQueryPanel]
              }
            ]
          }
        ],
      };
      return birtModelRight
    },
    // 分组条件(统计字段)
    groupFields(){
      let groupFields = this.conf && _.cloneDeep(this.conf.groupFields) || []
      // 组合分组条件
      if(this.curTransferVal && this.curTransferVal.length){
        let obj = {}
        let curTransferLabel = this.curTransferVal.map(item =>{
          for(var field of groupFields){
            if(field.prop == item){
              return field.label
            }
          }
        })
        obj = {
          prop: this.curTransferVal.join(),
          label: curTransferLabel.join()
        }
        groupFields.push(obj)
      }
      return groupFields
    },
    // 分析字段
    analyseFields(){
      return this.conf && this.conf.analyseFields || []
    },
    // 显示详情
    showDetail(){
      return this.currentObj.prop == 'detail'
    },
    // 执行叠加按钮
    btnDisabled(){
      return !this.selectionData || this.selectionData.length < 2
    }
  },
  watch:{
    conf:{
      deep: true,
      handler: function(val){
        if(val && val.groupFields && !this.groupForm.prop){
          this.groupForm.prop = val.groupFields[0] && val.groupFields[0].prop
          this.curGroupField = this.groupForm.prop
        }
        if(val && val.analyseFields && val.analyseFields.length){
          this.analysisData=val.analyseFields.map(item =>{
            let obj = {
              prop: item.prop,
              countField: item.label,
              tableColumn: true,
              tableColumnCount: true,
              chartColumn: true,
              chartColumnCount: true,
            }
            return obj
          })
        }
      }
    },
  },
  data() {
    return {
      size: 'small',
      superposition: false,
      perspective: false,
      chartType: "table",
      groupForm: {
        prop: ""
      },
      loading: false,
      currentPage: 1,
      pageSize: 100,
      pageSizes: [10,20,50,100],
      total: 0,
      data: [],
      // 排序
      sortArr:[],
      sortIndex:-1,
      sortType: '',
      // 分析列
      analysisVisible: false,
      analysisData:[],
      tableColumnCheck: true,
      tableColumnCountCheck: true,
      chartColumnCheck: true,
      chartColumnCountCheck: true,
      // 分析字段
      analysisFieldsVisible: false,
      analysisFieldsArr:[],
      analysisChartConf:{
        controlName: "PieChart",
        controlId: "chart_analysis",
        height: "100%",
        isGroupData: true,
        groupBy: "label",
        datas: [],
        calcFields: [
          {
            name: "value",
            title: ""
          }
        ],
        option: {
          legend: {
            show: true
          }
        },
        events:{
          click(row){
            debugger;
            var _this = this.$parent.$parent;
            _this.analysisChartConf.datas = _this.deepAnalysisFields
            let data = JSON.parse(JSON.stringify(row.data))
            delete data.emphasis
            // 删除当前分析以后的深度分析
            _this.deepArr.splice(_this.curIndex+1, _this.deepArr.length - _this.curIndex - 1)
            let obj = _this.deepArr[_this.deepArr.length -1]
            if(_this.currentObj.name){
              obj.selectVal = _this.currentObj.name 
            }else{
              if(_this.currentObj.prop.includes(',')){
                let selectVal = []
                let arr = _this.currentObj.prop.split(',')
                selectVal = arr.map(item =>{
                  return _this.currentObj[item]
                })
                obj.selectVal = selectVal.join()
              }else{
                obj.selectVal = _this.currentObj[_this.currentObj.prop]
              }
            }
            _this.$set(_this.deepArr,_this.curIndex,obj)
            _this.$set(_this.deepArr,_this.curIndex + 1, data)
            _this.curGroupField = data.prop;
            _this.currentObj = data;
            _this.curIndex = _this.curIndex + 1;
            _this.doQuery();
            _this.analysisFieldsVisible = false;
          }
        }
      },
      // 深度分析
      deepArr:[],
      conf:{},
      // 图表当前选中对象
      currentObj:{},
      // 当前分组字段
      curGroupField: '',
      // 深度分析当前环节下标
      curIndex: 0,
      exportLoading: false,
      // 穿梭框
      transferVisible: false,
      curTransferVal: [],
      groupFieldsEdit: [],
      schemeLoading: false,
      havingForm:{},
      // 分析记录
      recordVisible: false,
      recordData:[],
      // 已勾选记录
      selectionData: [],
      //  统计方案
      schemeData:[],
      schemeVisible: false,
      // 是否监听
      isMonitor: false,
      // 底部汇总数据
      bottomSummary: {},
      // 是否查询面板查询
      isQueryModel: false
    }
  },
  updated() {
    this.$nextTick(() => {
      this.$refs["table"] && this.$refs["table"].doLayout();
    });
  },
  methods: {
    //  排序
    sortClick(val) {
      this.sortIndex = val
      this.doQuery();
    },
    sortDown(){
      this.sortType = 'desc'
    },
    sortUp(){
      this.sortType = 'asc'
    },
    // 前进
    goCommand(index){
      this.curIndex = index;
      this.currentObj = this.deepArr[index];
      this.curGroupField = this.currentObj.prop;
      this.data = this.currentObj.data
    },
    goClick:_.debounce(function(){
      if(this.curIndex < this.deepArr.length - 1){
        this.curIndex = this.curIndex + 1;
        this.currentObj = this.deepArr[this.curIndex];
        this.curGroupField = this.currentObj.prop;
        this.data = this.currentObj.data
      }
    },500),
    // 后退
    backCommand(val){
      this.curIndex = val
      this.currentObj = this.deepArr[val];
      this.curGroupField = this.currentObj.prop;
      this.data = this.currentObj.data
    },
    backClick:_.debounce(function(){
      if(this.curIndex > 0){
        this.curIndex = this.curIndex - 1
        this.currentObj = this.deepArr[this.curIndex];
        this.curGroupField = this.currentObj.prop;
        this.data = this.currentObj.data
      }
    },500),
    // 深度分析
    breadcrumbClick(val) {
      this.curGroupField = val
      let arrnew = this.deepArr.map(item =>{
        return item.prop
      })
      this.curIndex = arrnew.indexOf(val)
      this.currentObj = this.deepArr[this.curIndex];
      // 数据替换成缓存的数据
      this.data = this.currentObj.data
    },
    // 点击表格
    rowDblclick(row){
      this.currentObj = row
      this.currentObj.prop = this.curGroupField;
      this.superposition = false
      if(this.perspective){
        var index = -1
        this.deepArr.forEach((item,i)=>{
          if(item.prop == this.curGroupField){
            index = i
          }
        })
        if(index > -1 && index < this.deepArr.length - 1){
          this.analysisFieldsVisible = false
          this.curIndex = this.curIndex + 1
          this.currentObj = this.deepArr[this.curIndex];
          this.data = this.currentObj.data
          this.curGroupField = this.currentObj.prop;
        }else{
          this.analysisChartConf.datas = this.deepAnalysisFields
          this.analysisFieldsVisible = true
        }
      }else{
        this.analysisChartConf.datas = this.deepAnalysisFields
        this.analysisFieldsVisible = true
      }
    },
    // 点击查询
    doCount() {
      debugger;
      // 叠加状态下不执行查询操作
      if(this.superposition){
        return
      }
      // 监听数据集
      if(this.dataset){
        let ds = this.$refs.BirtWorkBook_right.dataset[this.dataset.controlId]
        if(!this.isMonitor){
          ds && ds.on("afterLoadData", this.afterLoadData);
          this.isMonitor = true
        }
        this.loading = true;
        let prop = this.groupForm.prop;
        let fields = this.groupFields.map(item =>{
          return item.prop
        })
        this.curGroupField = prop;
        let index = fields.indexOf(prop)
        if(this.deepArr.length){
          // 如果切换了分组条件，清空深度分析
          if(this.deepArr[0] && this.deepArr[0].prop !== prop){
            this.deepArr = []
            this.currentObj = this.groupFields[index]
            this.recordData = []
          }else{
            this.currentObj = this.deepArr[0]
          }
        }
        this.currentPage = 1
        let queryModel = ds.getQueryModel()
        this.doQuery(queryModel);
         // 添加分析记录
        let obj = {}
        if(Object.keys(queryModel).length === 0){
          obj = {
            id: 'empty',
            name: '空条件',
            prop: this.groupForm.prop,
          }
        }else{
          let keyArr = [];
          let labelArr = [];
          for(let key in queryModel){
            if(queryModel[key] || queryModel[key] === 0){
              keyArr.push(key);
              // let arr = this.queryFields.filter(item =>{
              //   return item.prop == key
              // })
              labelArr.push(queryModel[key]);
            }
          };
          if(keyArr.length && labelArr.length){
            obj = {
              id: keyArr.join() + '_' + labelArr.join(),
              name: labelArr.join(),
              prop: this.groupForm.prop,
            }
          }else{
            obj = {
              id: 'empty',
              name: '空条件',
              prop: this.groupForm.prop,
            }
          }
        }
        // 判断分析记录中是否含有此条件，有则跳过，无则添加
        const ids = this.recordData.map(value=>value.id);
        if(!ids.includes(obj.id)){
          this.isQueryModel = true
          let simple = this.recordData.length + 1;
          obj.simple = simple
          obj.isEdit = false
          this.recordData.push(obj);
        }else{
          this.isQueryModel = false
        }
        // 当前分组加入深度分析
        if(index < 0){
          this.$message.error('当前分组条件不在分组字段中，请重新配置')
        }else{
          this.$set(this.deepArr,0,this.groupFields[index])
          this.curIndex = 0
        };
      }
    },
    afterLoadData(datas){
      let newData = datas
      let ds = this.$refs.BirtWorkBook_right.dataset[this.dataset.controlId]
      if(datas && datas.length){
        newData = datas.map(item =>{
          return ds && ds.getFormatRecd(item)
        })
      }
      this.data = newData
      // 缓存数据
      this.deepArr[this.curIndex].data = newData;
      // 总条数
      this.total = ds._infcPagging.recordCount || this.total;
      // 底部汇总数据
      this.bottomSummary = ds.getBottomSummeryRecd();
      // 添加分析记录
      if(!this.isQueryModel) return
      this.recordData[this.recordData.length - 1].data = datas
    },
    // 查询方法
    doQuery(model){
      let ds = this.$refs.BirtWorkBook_right.dataset[this.dataset.controlId]
      if(this.showDetail){
        ds._infcPagging = {
          _isPagging: true,
          pageSize: this.pageSize,
          pageNum: this.currentPage,
          returnCount: true
        };
        ds._infcStat = {}
        ds._infcSort = {}
      }else{
        ds._infcPagging = {
          _isPagging: true,
          pageSize: this.pageSize,
          pageNum: this.currentPage,
          returnCount: true
        };
        ds._infcStat = {
          isGroupData: true,
          groupBy: this.curGroupField,
          __bottomSummary: true
        }
        if(this.sortIndex > -1){
          let obj = this.sortArr[this.sortIndex]
          ds._infcSort.orderBy =[{
            name: obj.prop, 
            desc: obj.label, 
            type: this.sortType || 'desc'
          }]
        }else{
          ds._infcSort.orderBy = []
        }
        if(this.havingForm){
          let _infcHaving = {};
          for(let item in this.havingForm){
            let obj = JSON.parse(JSON.stringify(this.havingForm[item]))
            let val = obj.value
            let val2 = obj.value2
            if(val === undefined && val === undefined){

}else if((val || val === 0) && (val2 || val2 === 0)){
              _infcHaving[item] = obj
            }else{
              if(obj.sign == 'inRange'){
                obj.sign = 'lteq'
              }else{
                obj.sign = 'gt'
              }
              _infcHaving[item] = obj
            }
          }
          ds._infcHaving = _infcHaving
        }
      }
      if(model){
        ds.setQueryModel(model)
      }else if(this.deepArr && this.deepArr.length > 0){
        let queryModel = {}
        this.deepArr.forEach(item =>{
          if(item.prop && item.selectVal){
            if(!item.prop.includes(",")){
              queryModel[item.prop] = item.selectVal
            }else{
              let arr = item.prop.split(',')
              arr.forEach((it,i) =>{
                queryModel[it] = item.selectVal && item.selectVal.split(',')[i]
              })
            }
          }
        })
        ds.setQueryModel(queryModel)
      }else{
        ds._infcLoad.queryModel = {}
      }
      ds.query();
      this.loading = false;
    },
    //  重置
    reset() {
      this.$refs.groupForm.resetFields();
      this.$refs.havingForm.resetFields();
      this.havingForm = JSON.parse(JSON.stringify(this.conf.havingForm));
      this.curTransferVal = []
      this.groupForm.prop = this.groupFields[0] && this.groupFields[0].prop;
      var queryPanel = this.$refs.BirtWorkBook_right.$children[0].$children[0].$children[0].$children[0].$children[0].$children[0];
      queryPanel.reset();
      let ds = this.$refs.BirtWorkBook_right.dataset[this.dataset.controlId]
      ds._infcLoad.queryModel={}
    },
    handleSizeChange(val) {
      this.pageSize = val
      this.doQuery()
    },
    handleCurrentChange(val) {
      this.currentPage = val
      this.doQuery()
    },
    // 切换图表
    chartTypeChange(command) {
      this.chartType = command;
    },
    // 打开分析列
    analysisClick(){
      this.analysisVisible = true
    },
    // 分系列全选
    handelCheckAll(val){
      let _this = this
      this.analysisData = this.analysisData.map(item => {
        if(val == 'tableColumn') {
          item.tableColumn = _this.tableColumnCheck
        }
        if(val == 'tableColumnCount') {
          item.tableColumnCount = _this.tableColumnCountCheck
        }
        if(val == 'chartColumn') {
          item.chartColumn = _this.chartColumnCheck
        }
        if(val == 'chartColumnCount') {
          item.chartColumnCount = _this.chartColumnCountCheck
        }
        return item
      })
    },
    // 刷新
    refresh(){
      this.doQuery();
      this.$refs.chartConf && this.$refs.chartConf.refreshChart();
    },
    // 导出
    exportExcel() {
        let param = {
            pageNum: -1,
            pageSize: -1,
            __slaveExport: false,
        };
        let __body = {};
        let ds = this.$refs.BirtWorkBook_right.dataset[this.dataset.controlId]
        var cdion = ds.lastLoadCdion
        console.log('cdion', cdion)
        if (cdion) {
            __body['queryCdions'] = JSON.parse(cdion);
        }
        __body['groupBy'] = this.curGroupField
        param['modelFilePath'] = ds['modelFilePath'];
        param['__funcpath'] = ds['__funcpath'];
        param.__body = __body
        let sheetStyle = {}
        let cells = []
        let columns = []
        this.tableColumns.forEach(item => {
          cells.push({
            title: item.label,
            colspan: 1,
            rowspan: 1
          })
          columns.push({
            field: item.prop,
            width: 170
          })
        });
        sheetStyle = {
        name: '统计分析',
        titleRows: [
          {
            cells: cells
          }
        ],
        columns: columns
      }
        param.__sheetStyle = sheetStyle
        var time = new Date().getTime()
        var title = `统计分析${time}`
        var data = {
            title: title,
            __sheetDatas: JSON.stringify([param])
        }
        var url = this.$HI.exportUrl
        this.exportLoading = true
        this.$HI.request.post(url,data).then((res) =>{
            console.log('res', res)
            this.exportLoading = false
            if(res.status == 200){
                let token = getToken();
                var url = this.$HI.download + `?path=${res.dataPack.path}&access_token=${token}`
                url = url.replace(/\\/g,"/")
                const a = document.createElement('a') //创建a标签
                a.style.display = 'none'
                a.href = url // 指定下载链接
                a.download = title //指定下载文件名
                a.click() //触发下载
            }
        }).catch((e) =>{
            this.exportLoading = false
        })
    },
    // 打开穿梭框
    showtransfer(){
      this.groupFieldsEdit = JSON.parse(JSON.stringify(this.curTransferVal))
      this.transferVisible = true
    },
    transferConfirm(){
      if(this.groupFieldsEdit && this.groupFieldsEdit.length > 1){
        this.curTransferVal = JSON.parse(JSON.stringify(this.groupFieldsEdit))
        this.groupForm.prop = this.curTransferVal.join();
        this.curGroupField = this.groupForm.prop;
        this.transferVisible = false
      }else{
        this.$message.error("该分组选项已存在")
      }
    },
    transferClose(){
      this.transferVisible = false
      this.groupFieldsEdit = JSON.parse(JSON.stringify(this.curTransferVal))
    },
    transferUp(option){
      let arr = this.groupFieldsEdit
      let index = this.groupFieldsEdit.indexOf(option.prop)
      if(index > 0){
        arr.splice(index - 1, 1, ...arr.splice(index, 1, arr[index - 1]));
      }
    },
    transferDown(option){
      let arr = this.groupFieldsEdit
      let index = this.groupFieldsEdit.indexOf(option.prop)
      if(index < arr.length){
        arr.splice(index, 1, ...arr.splice(index + 1, 1, arr[index]));
      };
    },
    // 合计列
    getSummaries(parma){
      const { columns, data } = parma;
      const sums = [];
      // let arr = this.analyseFields.map(item =>{
      //   return item.prop
      // })
      columns.forEach((column, index) => {
        let show = true
        this.analysisData.forEach(item =>{
          if(item.prop == column.property){
            show = item.tableColumnCount
          }
        })
        // if(arr.includes(column.property) && show){
        //   let values = data.map(item => Number(item[column.property]));
        //   sums[index] = values.reduce((prev, curr) => {
        //     const value = Number(curr);
        //     if (!isNaN(value)) {
        //       return prev + curr;
        //     } else {
        //       return prev;
        //     }
        //   }, 0);
        if(this.bottomSummary && this.bottomSummary[column.property] && show){
          sums[index] = this.bottomSummary[column.property]
        }else{
          sums[index] = '';
        }
      })
      sums[0] = '统计'
      return sums;
    },
    // 分析列表
    handleEdit(index, row){
      row.isEdit = true
      this.recordData[index] = row
    },
    handleConfirm(index, row){
      row.isEdit = false
      this.recordData[index] = row
    },
    handleDelete(index, row){
      this.recordData.splice(index, 1)
    },
    // 执行叠加
    doClick(){
      this.superposition = true
      this.recordVisible = false
      this.curGroupField = this.recordData[0].prop
      this.curIndex = 0
    },
    // 分析记录勾选
    handleSelectionChange(row){
      this.selectionData = row
    },
    // 双击
    recordDblClick(row){
      this.curIndex = 0
      this.data = row.data
      this.deepArr[0].data = row.data
      this.currentObj.data = row.data
    },
    signChange(val,sign){
      this.havingForm[val]['sign'] = sign
    },
    // 统计方案
    schemeRowClick(row){
      if(row.FCONTENT){
        this.reset();
        let conf = JSON.parse(row.FCONTENT);
        if(conf.deepList){
          this.deepArr = conf.deepList
        }
        if(conf.curGroupField){
          this.curGroupField = conf.curGroupField
        }
        if(conf.queryModel){
          let ds = this.$refs.BirtWorkBook_right.dataset[this.dataset.controlId]
          ds.setQueryModel(conf.queryModel)
          let queryPanel = this.$refs.BirtWorkBook_right.$children[0].$children[0].$children[0].$children[0].$children[0].$children[0];
          queryPanel.bindModel = conf.queryModel
        }
        if(conf.groupForm){
          this.groupForm = conf.groupForm
        }
        if(conf.havingForm){
          this.havingForm = conf.havingForm
        }
        if(conf.sortIndex){
          this.sortIndex = conf.sortIndex
        }
        if(conf.sortType){
          this.sortType = conf.sortType
        }
        if(conf.data){
          this.data = conf.data
        }
        if(conf.currentObj){
          this.currentObj = conf.currentObj
        }
        if(conf.total){
          this.total = conf.total
        }
        if(conf.curTransferVal){
          this.curTransferVal = conf.curTransferVal
        }
        if(conf.perspective){
          this.perspective = conf.perspective
        }else{
          this.perspective = false
        }
        if(conf.superposition){
          this.superposition = conf.superposition
        }else{
          this.superposition = false
        }
      }
      this.schemeVisible = false
    },
    showSchemeData(){
      let url = '/data/query'
      var data = {
        modelFilePath: "/platf/scheme/entity/SysSchemeBizEntity.xml",
        pageSize:-1,
        __body:"{\"queryCdions\":{\"join\":\"and\",\"items\":[]}}",
        __bottomSummary: false,
        // __funcpath: "/eap5csxm/KongJianCeShi/TongJiFenXi/TongJiFenXiCeShi/func/TongJiFenXiRenYuan.func",
        __zcQuery: true
      }
      this.$HI.request.post(url, data).then((res) =>{
        this.schemeData = res.dataPack && res.dataPack.rows
      }).catch(e=>{
        console.error(e)
      })
    },
    // 保存方案
    saveScheme(){
      let ds = this.$refs.BirtWorkBook_right.dataset[this.dataset.controlId]
      let content = {
        deepList: this.deepArr,
        curGroupField: this.curGroupField,
        queryModel: ds.getQueryModel(),
        havingForm: this.havingForm,
        groupForm: this.groupForm,
        sortIndex: this.sortIndex,
        sortType: this.sortType,
        data: this.data,
        currentObj:this.currentObj,
        perspective: this.perspective,
        superposition: this.superposition,
        total:this.total,
        curTransferVal:this.curTransferVal
      }
      let data = {
        pushType: "add",
        dataset: "dsScheme",
        pushAddType: "map",
        data:[{
          FFUNCURL: window.location.pathname || window.location.href,
          FCONTENT: JSON.stringify(content),
        }]
      }
      this.openByPath('/platf/scheme/func/add.func', {__push: data,__funcpath:'/platf/scheme/func/add.func'},{title: '方案保存'})
    },
    handleSchemeDelete(index, data){
      let url = '/data/save'
      let removeData = {
        ...data,
        $state:"rsDelete",
        $old:data
      }
      let body = [{
        modelFilePath:"/platf/scheme/entity/SysSchemeBizEntity.xml",
        data:[removeData]
      }]
      let rData = {
        __body: JSON.stringify(body)
      }
      this.$HI.request.post(url, rData).then((res) =>{
        this.$message.success('方案删除成功')
        this.schemeData.splice(index, 1)
      }).catch(e=>{
        this.$message.error(e)
      })
    },
    // 保存方案下推
    openByPath(path, query, { title, target } = {}) {
        query = query || {};
        let queryT = {}
        Object.assign(queryT, query || {});
        if (title)
            queryT.__title = title;
        if (target) {
            target = target === '_blank' ? (new Date()).valueOf() : target
            queryT.__target = target;
        }
        if(this.$router){
            this.$router.push({
                path,
                query: queryT
            })
        }else{
          if(top.window.SysPage && top.window.SysPage.newPage){
            top.window.SysPage.newPage(title, path, queryT, "post")
          }else{
            this.createForm(path, "_self", queryT.__push.data[0])
          }
        }
    },
    createForm(url, opentype, paramters) {
      //创建form表单
      let me = this;
      let id = "samuuid"
      var formid = `${id}_form`;
      var temp_form = null;
      if (document.getElementById(formid)) {
        temp_form = document.getElementById(formid);
        temp_form.method = me.postType;
        temp_form.action = url;
        // for (var item in paramters) {
        //   var inputObj = document.getElementById(`${id}_${item}`);
        //   if (inputObj) {
        //     inputObj.value = paramters[item];
        //   }
        // }
      } else {
        temp_form = document.createElement("form");
        temp_form.id = `${id}_form`;
        temp_form.action = url;
        //如需打开新窗口，form的target属性要设置为'_blank'
        temp_form.target = opentype; //打开方式
        temp_form.method = me.postType;
        temp_form.style.display = "none";

.birtModelRight .el-main{
    padding: 5px !important;
}
.el-icon-edit{
  right: 30px;
  position: absolute;
  z-index: 1;
  line-height: 30px;
  cursor: pointer;
}
>>>.el-dropdown.disabled .el-button,
>>>.el-dropdown.disabled .el-button:hover{
  cursor: not-allowed;
  color: #C0C4CC;
  cursor: not-allowed;
  background-image: none;
  background-color: #FFF;
  border-color: #EBEEF5;
}
</style>

<template>
  <div class="container">
    
    <div class="btn-toolbar">
      
      <el-dropdown split-button :size="size" :class="{disabled: backDisabled}" :disabled="backDisabled" @command="backCommand" @click="backClick">
        <i class="el-icon-back"></i>后退
        <el-dropdown-menu slot="dropdown">
          <el-dropdown-item v-for="(item,index) in deepArr" :key="item.prop" :command="index" v-if="index < curIndex">{{ item.label }}</el-dropdown-item>
        </el-dropdown-menu>
      </el-dropdown>
      
      <el-dropdown split-button :size="size" :class="{disabled: goDisabled}" :disabled="goDisabled" @command="goCommand" @click="goClick">
        <i class="el-icon-right"></i>前进
        <el-dropdown-menu slot="dropdown">
          <el-dropdown-item v-for="(item,index) in deepArr" :key="item.prop" :command="index" v-if="index > curIndex">{{ item.label }}</el-dropdown-item>
        </el-dropdown-menu>
      </el-dropdown>
      
      <el-dropdown split-button :size="size" class="sort" @command="sortClick">
        <i class="el-icon-sort"></i>排序
        <el-dropdown-menu slot="dropdown">
          <el-dropdown-item :command="-1">不排序</el-dropdown-item>
          <el-dropdown-item v-for="(item, index) in sortArr" :key="item.prop" :command="index">{{ item.label }}
            <i class="el-icon-sort-down" :class="{ sortActive: index == sortIndex && sortType =='desc' }"  @click="sortDown"></i> <i class="el-icon-sort-up" :class="{ sortActive: index == sortIndex && sortType =='asc' }"  @click="sortUp"></i>
          </el-dropdown-item>
        </el-dropdown-menu>
      </el-dropdown>
      
      <el-button icon="el-icon-setting" :size="size" @click="analysisClick">列设置</el-button>
      <el-dropdown :size="size" @command="chartTypeChange">
        <el-button :size="size">
          <i class="el-icon-s-data"></i>
          图表<i class="el-icon-arrow-down el-icon--right"></i>
        </el-button>
        <el-dropdown-menu slot="dropdown">
          <el-dropdown-item command="table">表格</el-dropdown-item>
          <el-dropdown-item command="pie">饼图</el-dropdown-item>
          <el-dropdown-item command="bar">柱图</el-dropdown-item>
          <el-dropdown-item command="line">线图</el-dropdown-item>
          <el-dropdown-item command="area">区域图</el-dropdown-item>
        </el-dropdown-menu>
      </el-dropdown>
      
      <el-button icon="el-icon-refresh" :size="size" @click="refresh">刷新</el-button>
      
      <el-button icon="el-icon-edit-outline" :size="size" >分析记录</el-button>
      
      <el-button icon="el-icon-edit-outline" :size="size" >统计方案</el-button>
      
      <el-checkbox
        v-model="superposition"
        label="叠加"
        border
        :size="size" 
      ></el-checkbox>
      
      <el-checkbox
        v-model="perspective"
        label="直接透视"
        border
        :size="size" 
      ></el-checkbox>
      <el-button icon="el-icon-download" :size="size" :disabled="this.data && this.data.length == 0" :loading="exportLoading" @click="exportExcel">导出excel</el-button>
    </div>
    
    <hi-layout :is-fit="true" style="heiht: 100%;">
      
      <hi-layout-right size="300" title="过滤条件">
        <birt-work-book
          style="height: calc( 100% - 142px );border-bottom: 1px dashed #3179de;overflow: auto;"
          :conf="birtModelRight"
          :ref="birtModelRight.controlId"
          class="birtModelRight"
        ></birt-work-book>
        <el-form
          @submit.native.prevent
          ref="groupForm"
          style="padding: 10px 10px 0 0;"
          :model="groupForm"
          label-width="80px"
        >
          <el-form-item label="分组条件" prop="prop">
            <i class="el-icon-edit" @click="showtransfer"></i>
            <el-select v-model="groupForm.prop" style="width: 100%;" placeholder="请选择分组条件">
              <el-option
                v-for="item in groupFields"
                :label="item.label"
                :value="item.prop"
                :key="item.prop"
              ></el-option>
            </el-select>
          </el-form-item>
          <el-form-item>
            <el-button
              type="primary"
              size="mini"
              :loading="loading"
              @click="doCount"
              >执行查询</el-button
            >
            <el-button size="mini" @click="reset">重置</el-button>
          </el-form-item>
        </el-form>
      </hi-layout-right>
      
      <hi-layout-center style="heiht: 100%;">
        <div class="depth-analysis">
          <span>深度分析:</span>
          <el-breadcrumb
            separator-class="el-icon-arrow-right"
            style="padding: 0 0 0 10px;"
          >
            <el-breadcrumb-item v-for="(item,index) in deepArr" :key="item.prop">
              <span v-if="item.label.includes(',')" @click="breadcrumbClick(item.prop)" :class="{ deepActive: index == curIndex }" style="cursor: pointer;">
                <span v-for="(it, i) in item.label.split(',')">
                  {{ it }}
                  <span style="color: rgb(255, 102, 0);margin-left:2px;" v-if="index < curIndex">{{ item.selectVal.split(',')[i] }}</span>
                </span>
              </span>
              <span v-else @click="breadcrumbClick(item.prop)" :class="{ deepActive: index == curIndex }" style="cursor: pointer;">
                {{ item.label }}
                <span style="color: rgb(255, 102, 0);margin-left:2px;" v-if="index < curIndex">{{ item.selectVal }}</span>
              </span>
            </el-breadcrumb-item>
          </el-breadcrumb>
        </div>
        <div v-if="showDetail" style="height: calc( 100% - 100px )">
          <el-table
            :data="data"
            ref="table"
            height="100%"
            border
            stripe
            :show-summary="showSummary"
            :summary-method="getSummaries"
            header-row-class-name="tableHeader"
            style="width: 100%"
          >
            <el-table-column
              v-for="item in tableColumns"
              :key="item.prop"
              :prop="item.prop"
              :label="item.label"
            >
            </el-table-column>
          </el-table>
          <el-pagination
            @size-change="handleSizeChange"
            @current-change="handleCurrentChange"
            :current-page="currentPage"
            :page-sizes="[10, 20, 50, 100]"
            :page-size="pageSize"
            layout="total, sizes, prev, pager, next, jumper"
            :total="total"
          >
          </el-pagination>
        </div>
        <div v-if="!showDetail && chartType == 'table'" style="height: calc( 100% - 100px )">
          <el-table
            :data="data"
            ref="table"
            height="100%"
            border
            stripe
            :show-summary="showSummary"
            :summary-method="getSummaries"
            header-row-class-name="tableHeader"
            style="width: 100%"
          >
            <el-table-column
              v-for="item in tableColumns"
              :key="item.prop"
              :prop="item.prop"
              :label="item.label"
            >
            </el-table-column>
          </el-table>
          <el-pagination
            @size-change="handleSizeChange"
            @current-change="handleCurrentChange"
            :current-page="currentPage"
            :page-sizes="[10, 20, 50, 100]"
            :page-size="pageSize"
            layout="total, sizes, prev, pager, next, jumper"
            :total="total"
          >
          </el-pagination>
        </div>
        <Pie-chart
          style="height: calc( 100% - 100px )"
          v-else-if="!showDetail && chartType == 'pie'"
          ref="chartConf"
          :conf="chartConf"
        ></Pie-chart>
        <Bar-chart
          style="height: calc( 100% - 100px )"
          v-else-if="!showDetail && chartType == 'bar'"
          ref="chartConf"
          :conf="chartConf"
        ></Bar-chart>
        <Line-chart
          style="height: calc( 100% - 100px )"
          v-else-if="!showDetail && chartType == 'line'"
          ref="chartConf"
          :conf="chartConf"
        ></Line-chart>
        <Line-chart
          style="height: calc( 100% - 100px )"
          v-else-if="!showDetail && chartType == 'area'"
          ref="chartConf"
          :conf="chartConf"
        ></Line-chart>
      </hi-layout-center>
    </hi-layout>
    
    <el-dialog :visible.sync="analysisVisible" title="分析列设置" :height="500">
      <el-table :data="analysisData" size="small" :height="400">
        <el-table-column
          prop="countField"
          label="统计字段">
        </el-table-column>
        <el-table-column prop="tableColumn" label="网格列" align="center">
          <template slot="header" slot-scope="{row}">
            <el-checkbox v-model="tableColumnCheck" @change="handelCheckAll('tableColumn')" label="网格列"></el-checkbox>
          </template>
          <template slot-scope="{row}">
            <el-checkbox v-model="row.tableColumn"></el-checkbox>
          </template>
        </el-table-column>
        <el-table-column prop="tableColumn" label="网格合计列" align="center">
          <template slot="header" slot-scope="{row}">
            <el-checkbox v-model="tableColumnCountCheck" @change="handelCheckAll('tableColumnCount')" label="网格合计列"></el-checkbox>
          </template>
          <template slot-scope="{row}">
            <el-checkbox v-model="row.tableColumnCount"></el-checkbox>
          </template>
        </el-table-column>
        <el-table-column prop="tableColumn" label="图表列" align="center">
          <template slot="header" slot-scope="{row}">
            <el-checkbox v-model="chartColumnCheck" @change="handelCheckAll('chartColumn')" label="图表列"></el-checkbox>
          </template>
          <template slot-scope="{row}">
            <el-checkbox v-model="row.chartColumn"></el-checkbox>
          </template>
        </el-table-column>
        <el-table-column prop="chartColumnCount" label="图表列汇总" align="center">
          <template slot="header" slot-scope="{row}">
            <el-checkbox v-model="chartColumnCountCheck" @change="handelCheckAll('chartColumnCount')" label="图表列汇总"></el-checkbox>
          </template>
          <template slot-scope="{row}">
            <el-checkbox v-model="row.chartColumnCount"></el-checkbox>
          </template>
        </el-table-column>
      </el-table>
    </el-dialog>
    
    <el-dialog  :visible.sync="analysisFieldsVisible" title="选择分析字段" :height="500">
       <Pie-chart
          style="height: 400px;"
          ref="analysisChart"
          :conf="analysisChartConf"
        ></Pie-chart>
    </el-dialog>
    
    <el-dialog  :visible.sync="transferVisible" title="选择分组字段" :height="500" width="640px" center @close="transferClose">
       <el-transfer class="sam" v-model="groupFieldsEdit" :data="conf.groupFields" 
       :titles="['来源字段', '目标字段']"
       target-order="push"
       :props="{
          key: 'prop',
          label: 'label'
        }" style="width: 100%;padding: 20px;">
        <span slot-scope="{ option }">{{ option.label }}
          <el-button style="margin-left: 10px;" icon="el-icon-top" type="primary" size="mini" circle @click.stop="transferUp(option)"></el-button>
          <el-button icon="el-icon-bottom" type="primary" size="mini" circle @click.stop="transferDown(option)"></el-button>
        </span>
        </el-transfer>
        <span slot="footer" class="dialog-footer">
          <el-button @click="transferClose" size="small">取 消</el-button>
          <el-button type="primary" size="small" @click="transferConfirm">确 定</el-button>
        </span>
    </el-dialog>
  </div> 
</template>

Show line notes below