Merge remote-tracking branch 'origin/codeCheck' into codeCheck
# Conflicts: # nezha-fronted/src/components/charts/chart-alert-list.vue # nezha-fronted/src/components/charts/chart-single-stat.vue # nezha-fronted/src/components/charts/chart-table.vue # nezha-fronted/src/components/charts/chart-url.vue # nezha-fronted/src/components/charts/line-chart-block.vue # nezha-fronted/src/components/charts/text-chart.vue
This commit is contained in:
chenjinsong
109
nezha-fronted/package-lock.json
generated
109
nezha-fronted/package-lock.json
generated
@@ -4,11 +4,54 @@
|
||||
"lockfileVersion": 1,
|
||||
"requires": true,
|
||||
"dependencies": {
|
||||
"@babel/runtime": {
|
||||
"version": "7.12.5",
|
||||
"resolved": "https://registry.npmjs.org/@babel/runtime/-/runtime-7.12.5.tgz",
|
||||
"integrity": "sha512-plcc+hbExy3McchJCEQG3knOsuh3HH+Prx1P6cLIkET/0dLuQDEnrT+s27Axgc9bqfsmNUNHfscgMUdBpC9xfg==",
|
||||
"requires": {
|
||||
"regenerator-runtime": "^0.13.4"
|
||||
},
|
||||
"dependencies": {
|
||||
"regenerator-runtime": {
|
||||
"version": "0.13.7",
|
||||
"resolved": "https://registry.npmjs.org/regenerator-runtime/-/regenerator-runtime-0.13.7.tgz",
|
||||
"integrity": "sha512-a54FxoJDIr27pgf7IgeQGxmqUNYrcV338lf/6gH456HZ/PhX+5BcwHXG9ajESmwe6WRO0tAzRUrRmNONWgkrew=="
|
||||
}
|
||||
}
|
||||
},
|
||||
"@riophae/vue-treeselect": {
|
||||
"version": "0.4.0",
|
||||
"resolved": "https://registry.npmjs.org/@riophae/vue-treeselect/-/vue-treeselect-0.4.0.tgz",
|
||||
"integrity": "sha512-J4atYmBqXQmiPFK/0B5sXKjtnGc21mBJEiyKIDZwk0Q9XuynVFX6IJ4EpaLmUgL5Tve7HAS7wkiGGSti6Uaxcg==",
|
||||
"requires": {
|
||||
"@babel/runtime": "^7.3.1",
|
||||
"babel-helper-vue-jsx-merge-props": "^2.0.3",
|
||||
"easings-css": "^1.0.0",
|
||||
"fuzzysearch": "^1.0.3",
|
||||
"is-promise": "^2.1.0",
|
||||
"lodash": "^4.0.0",
|
||||
"material-colors": "^1.2.6",
|
||||
"watch-size": "^2.0.0"
|
||||
}
|
||||
},
|
||||
"@sindresorhus/is": {
|
||||
"version": "0.7.0",
|
||||
"resolved": "https://registry.npmjs.org/@sindresorhus/is/-/is-0.7.0.tgz",
|
||||
"integrity": "sha512-ONhaKPIufzzrlNbqtWFFd+jlnemX6lJAgq9ZeiZtS7I1PIf/la7CW4m83rTXRnVnsMbW2k56pGYu7AUFJD9Pow=="
|
||||
},
|
||||
"@svgdotjs/svg.js": {
|
||||
"version": "3.0.16",
|
||||
"resolved": "https://registry.npmjs.org/@svgdotjs/svg.js/-/svg.js-3.0.16.tgz",
|
||||
"integrity": "sha512-yZ4jfP/SeLHEnCi9PIrzienKCrA4vW9+jm5uUV3N5DG2e9zgXLY5FgywK2u8/gMFIeKO0HuqTLFFfWJj+MfMLA=="
|
||||
},
|
||||
"@svgdotjs/svg.panzoom.js": {
|
||||
"version": "2.1.1",
|
||||
"resolved": "https://registry.npmjs.org/@svgdotjs/svg.panzoom.js/-/svg.panzoom.js-2.1.1.tgz",
|
||||
"integrity": "sha512-fsGP+i64jcpaG1UXOmNDUWq2ZLpiMf+EwfHZn5NNnYp5K7J2gk96NcPhzMtgmCUZtu61Ro8Z5D2P3RdzBzpc3g==",
|
||||
"requires": {
|
||||
"@svgdotjs/svg.js": "^3.0.16"
|
||||
}
|
||||
},
|
||||
"@types/q": {
|
||||
"version": "1.5.2",
|
||||
"resolved": "https://registry.npmjs.org/@types/q/-/q-1.5.2.tgz",
|
||||
@@ -3576,6 +3619,11 @@
|
||||
"stream-shift": "^1.0.0"
|
||||
}
|
||||
},
|
||||
"easings-css": {
|
||||
"version": "1.0.0",
|
||||
"resolved": "https://registry.npmjs.org/easings-css/-/easings-css-1.0.0.tgz",
|
||||
"integrity": "sha512-7Uq7NdazNfVtr0RNmPAys8it0zKCuaqxJStYKEl72D3j4gbvXhhaM7iWNbqhA4C94ygCye6VuyhzBRQC4szeBg=="
|
||||
},
|
||||
"ecc-jsbn": {
|
||||
"version": "0.1.2",
|
||||
"resolved": "https://registry.npmjs.org/ecc-jsbn/-/ecc-jsbn-0.1.2.tgz",
|
||||
@@ -4461,8 +4509,7 @@
|
||||
"ansi-regex": {
|
||||
"version": "2.1.1",
|
||||
"bundled": true,
|
||||
"dev": true,
|
||||
"optional": true
|
||||
"dev": true
|
||||
},
|
||||
"aproba": {
|
||||
"version": "1.2.0",
|
||||
@@ -4483,14 +4530,12 @@
|
||||
"balanced-match": {
|
||||
"version": "1.0.0",
|
||||
"bundled": true,
|
||||
"dev": true,
|
||||
"optional": true
|
||||
"dev": true
|
||||
},
|
||||
"brace-expansion": {
|
||||
"version": "1.1.11",
|
||||
"bundled": true,
|
||||
"dev": true,
|
||||
"optional": true,
|
||||
"requires": {
|
||||
"balanced-match": "^1.0.0",
|
||||
"concat-map": "0.0.1"
|
||||
@@ -4505,20 +4550,17 @@
|
||||
"code-point-at": {
|
||||
"version": "1.1.0",
|
||||
"bundled": true,
|
||||
"dev": true,
|
||||
"optional": true
|
||||
"dev": true
|
||||
},
|
||||
"concat-map": {
|
||||
"version": "0.0.1",
|
||||
"bundled": true,
|
||||
"dev": true,
|
||||
"optional": true
|
||||
"dev": true
|
||||
},
|
||||
"console-control-strings": {
|
||||
"version": "1.1.0",
|
||||
"bundled": true,
|
||||
"dev": true,
|
||||
"optional": true
|
||||
"dev": true
|
||||
},
|
||||
"core-util-is": {
|
||||
"version": "1.0.2",
|
||||
@@ -4635,8 +4677,7 @@
|
||||
"inherits": {
|
||||
"version": "2.0.3",
|
||||
"bundled": true,
|
||||
"dev": true,
|
||||
"optional": true
|
||||
"dev": true
|
||||
},
|
||||
"ini": {
|
||||
"version": "1.3.5",
|
||||
@@ -4648,7 +4689,6 @@
|
||||
"version": "1.0.0",
|
||||
"bundled": true,
|
||||
"dev": true,
|
||||
"optional": true,
|
||||
"requires": {
|
||||
"number-is-nan": "^1.0.0"
|
||||
}
|
||||
@@ -4663,7 +4703,6 @@
|
||||
"version": "3.0.4",
|
||||
"bundled": true,
|
||||
"dev": true,
|
||||
"optional": true,
|
||||
"requires": {
|
||||
"brace-expansion": "^1.1.7"
|
||||
}
|
||||
@@ -4671,14 +4710,12 @@
|
||||
"minimist": {
|
||||
"version": "0.0.8",
|
||||
"bundled": true,
|
||||
"dev": true,
|
||||
"optional": true
|
||||
"dev": true
|
||||
},
|
||||
"minipass": {
|
||||
"version": "2.3.5",
|
||||
"bundled": true,
|
||||
"dev": true,
|
||||
"optional": true,
|
||||
"requires": {
|
||||
"safe-buffer": "^5.1.2",
|
||||
"yallist": "^3.0.0"
|
||||
@@ -4697,7 +4734,6 @@
|
||||
"version": "0.5.1",
|
||||
"bundled": true,
|
||||
"dev": true,
|
||||
"optional": true,
|
||||
"requires": {
|
||||
"minimist": "0.0.8"
|
||||
}
|
||||
@@ -4778,8 +4814,7 @@
|
||||
"number-is-nan": {
|
||||
"version": "1.0.1",
|
||||
"bundled": true,
|
||||
"dev": true,
|
||||
"optional": true
|
||||
"dev": true
|
||||
},
|
||||
"object-assign": {
|
||||
"version": "4.1.1",
|
||||
@@ -4791,7 +4826,6 @@
|
||||
"version": "1.4.0",
|
||||
"bundled": true,
|
||||
"dev": true,
|
||||
"optional": true,
|
||||
"requires": {
|
||||
"wrappy": "1"
|
||||
}
|
||||
@@ -4877,8 +4911,7 @@
|
||||
"safe-buffer": {
|
||||
"version": "5.1.2",
|
||||
"bundled": true,
|
||||
"dev": true,
|
||||
"optional": true
|
||||
"dev": true
|
||||
},
|
||||
"safer-buffer": {
|
||||
"version": "2.1.2",
|
||||
@@ -4914,7 +4947,6 @@
|
||||
"version": "1.0.2",
|
||||
"bundled": true,
|
||||
"dev": true,
|
||||
"optional": true,
|
||||
"requires": {
|
||||
"code-point-at": "^1.0.0",
|
||||
"is-fullwidth-code-point": "^1.0.0",
|
||||
@@ -4934,7 +4966,6 @@
|
||||
"version": "3.0.1",
|
||||
"bundled": true,
|
||||
"dev": true,
|
||||
"optional": true,
|
||||
"requires": {
|
||||
"ansi-regex": "^2.0.0"
|
||||
}
|
||||
@@ -4978,14 +5009,12 @@
|
||||
"wrappy": {
|
||||
"version": "1.0.2",
|
||||
"bundled": true,
|
||||
"dev": true,
|
||||
"optional": true
|
||||
"dev": true
|
||||
},
|
||||
"yallist": {
|
||||
"version": "3.0.3",
|
||||
"bundled": true,
|
||||
"dev": true,
|
||||
"optional": true
|
||||
"dev": true
|
||||
}
|
||||
}
|
||||
},
|
||||
@@ -5005,6 +5034,11 @@
|
||||
"resolved": "https://registry.npmjs.org/function-bind/-/function-bind-1.1.1.tgz",
|
||||
"integrity": "sha512-yIovAzMX49sF8Yl58fSCWJ5svSLuaibPxXQJFLmBObTuCr0Mf1KiPopGM9NiFjiYBCbfaa2Fh6breQ6ANVTI0A=="
|
||||
},
|
||||
"fuzzysearch": {
|
||||
"version": "1.0.3",
|
||||
"resolved": "https://registry.npmjs.org/fuzzysearch/-/fuzzysearch-1.0.3.tgz",
|
||||
"integrity": "sha1-3/yA9tawQiPyImqnndGUIxCW0Ag="
|
||||
},
|
||||
"gauge": {
|
||||
"version": "2.7.4",
|
||||
"resolved": "https://registry.npmjs.org/gauge/-/gauge-2.7.4.tgz",
|
||||
@@ -5942,6 +5976,11 @@
|
||||
"isobject": "^3.0.1"
|
||||
}
|
||||
},
|
||||
"is-promise": {
|
||||
"version": "2.2.2",
|
||||
"resolved": "https://registry.npmjs.org/is-promise/-/is-promise-2.2.2.tgz",
|
||||
"integrity": "sha512-+lP4/6lKUBfQjZ2pdxThZvLUAafmZb8OAxFb8XXtiQmS35INgr85hdOGoEs124ez1FCnZJt6jau/T+alh58QFQ=="
|
||||
},
|
||||
"is-regex": {
|
||||
"version": "1.0.4",
|
||||
"resolved": "https://registry.npmjs.org/is-regex/-/is-regex-1.0.4.tgz",
|
||||
@@ -6371,6 +6410,11 @@
|
||||
"object-visit": "^1.0.0"
|
||||
}
|
||||
},
|
||||
"material-colors": {
|
||||
"version": "1.2.6",
|
||||
"resolved": "https://registry.npmjs.org/material-colors/-/material-colors-1.2.6.tgz",
|
||||
"integrity": "sha512-6qE4B9deFBIa9YSpOc9O0Sgc43zTeVYbgDT5veRKSlB2+ZuHNoVVxA1L/ckMUayV9Ay9y7Z/SZCLcGteW9i7bg=="
|
||||
},
|
||||
"math-expression-evaluator": {
|
||||
"version": "1.2.17",
|
||||
"resolved": "https://registry.npmjs.org/math-expression-evaluator/-/math-expression-evaluator-1.2.17.tgz",
|
||||
@@ -12354,6 +12398,11 @@
|
||||
"resolved": "https://registry.npmjs.org/vuex/-/vuex-3.1.2.tgz",
|
||||
"integrity": "sha512-ha3jNLJqNhhrAemDXcmMJMKf1Zu4sybMPr9KxJIuOpVcsDQlTBYLLladav2U+g1AvdYDG5Gs0xBTb0M5pXXYFQ=="
|
||||
},
|
||||
"watch-size": {
|
||||
"version": "2.0.0",
|
||||
"resolved": "https://registry.npmjs.org/watch-size/-/watch-size-2.0.0.tgz",
|
||||
"integrity": "sha512-M92R89dNoTPWyCD+HuUEDdhaDnh9jxPGOwlDc0u51jAgmjUvzqaEMynXSr3BaWs+QdHYk4KzibPy1TFtjLmOZQ=="
|
||||
},
|
||||
"watchpack": {
|
||||
"version": "1.6.0",
|
||||
"resolved": "https://registry.npmjs.org/watchpack/-/watchpack-1.6.0.tgz",
|
||||
|
||||
@@ -10,6 +10,9 @@
|
||||
"build": "node build/build.js"
|
||||
},
|
||||
"dependencies": {
|
||||
"@riophae/vue-treeselect": "^0.4.0",
|
||||
"@svgdotjs/svg.js": "^3.0.16",
|
||||
"@svgdotjs/svg.panzoom.js": "^2.1.1",
|
||||
"axios": "^0.19.0",
|
||||
"cytoscape": "^3.15.2",
|
||||
"echarts": "^4.7.0",
|
||||
|
||||
Binary file not shown.
@@ -20,6 +20,12 @@ Created by iconfont
|
||||
/>
|
||||
<missing-glyph />
|
||||
|
||||
<glyph glyph-name="unlock" unicode="" d="M439.44650239 141.46849166000004a33.32868125 33.32868125 0 0 1 35.31474761 35.25268364V282.66541904999997a35.31474761 35.31474761 0 0 1-70.62949614 0v-105.94424375a33.32868125 33.32868125 0 0 1 35.31474853-35.25268364zM577.1678125 517.8281253H222.40665386A145.231125 145.231125 0 0 1 77.54791636 372.96938780000005V83.37604166000006a145.231125 145.231125 0 0 1 144.8587375-144.8587375h434.45208364A145.231125 145.231125 0 0 1 801.65541011 83.37604166000006V372.96938780000005A145.231125 145.231125 0 0 1 656.8587375 517.8281253H577.1678125z m152.05822886-144.8587375V83.37604166000006a72.6155625 72.6155625 0 0 0-72.36730386-72.36730386h-434.45208364A72.6155625 72.6155625 0 0 0 149.97728511 83.37604166000006V372.96938780000005a72.6155625 72.6155625 0 0 0 72.42936875 72.42936875h434.45208364A72.6155625 72.6155625 0 0 0 729.22604136 372.96938780000005zM884.3875 641.95729166a124.12916636 124.12916636 0 0 1-247.94801011 9.3096875L636.12916636 641.95729166v-124.12916636H574.06458364V641.95729166a186.19375 186.19375 0 1 0 372.3875 0v-31.03229136a31.03229136 31.03229136 0 1 0-62.06458364 0V641.95729166z" horiz-adv-x="1024" />
|
||||
|
||||
|
||||
<glyph glyph-name="lock" unicode="" d="M522.84441845 152.13515832999997a33.32868125 33.32868125 0 0 1 35.31474853 35.25268364V293.33208572a35.31474761 35.31474761 0 0 1-70.62949614 0v-105.94424375a33.32868125 33.32868125 0 0 1 35.31474761-35.25268364zM660.56572948 528.49479197H305.80457084A145.231125 145.231125 0 0 1 160.94583334 383.63605447V94.04270832999998a145.231125 145.231125 0 0 1 144.8587375-144.8587375h434.45208364A145.231125 145.231125 0 0 1 885.05332709 94.04270832999998V383.63605447A145.231125 145.231125 0 0 1 740.25665448 528.49479197H660.56572948z m152.05822886-144.8587375V94.04270832999998a72.6155625 72.6155625 0 0 0-72.36730386-72.36730386h-434.45208364A72.6155625 72.6155625 0 0 0 233.37520209 94.04270832999998V383.63605447a72.6155625 72.6155625 0 0 0 72.42936875 72.42936875h434.45208364A72.6155625 72.6155625 0 0 0 812.62395834 383.63605447zM533.33333334 838.81770833a186.19375 186.19375 0 0 0 186.19375-186.19375v-124.12916636H657.4624997V652.62395833a124.12916636 124.12916636 0 0 1-247.94801011 9.3096875L409.20416698 652.62395833v-124.12916636H347.13958334V652.62395833a186.19375 186.19375 0 0 0 186.19375 186.19375z" horiz-adv-x="1024" />
|
||||
|
||||
|
||||
<glyph glyph-name="batch-edit" unicode="" d="M744.7552 374.88127999999995l-58.71616-58.7264-174.92992-174.91968c-0.34816-0.28672-0.7424-0.4352-1.08544-0.73728-1.42848-1.28-3.01568-2.37056-4.736-3.20512-0.5888-0.25088-1.18784-0.64512-1.87904-0.8448-2.22208-0.83456-4.63872-1.3824-7.15264-1.3824H437.59104a21.06368 21.06368 0 0 0-21.07392 21.0688v58.72128c0.0512 2.46272 0.50176 4.87936 1.3824 7.15264 0.25088 0.58368 0.59392 1.22368 0.93696 1.8688 0.8448 1.72544 1.87392 3.30752 3.15904 4.736l-0.05632-0.0512c0.30208 0.35328 0.39936 0.78848 0.74752 1.13664l174.96576 174.9248 58.71616 58.72128a21.04832 21.04832 0 0 0 29.75744 0.0512l58.6752-58.7264a21.00224 21.00224 0 0 0-0.04608-29.78816z m-132.29056-14.90944l-145.17248-145.16224 28.96384-28.91776 145.27488 145.17248-28.96384 28.96384-0.1024-0.05632z m29.8496 29.80352l28.96384-28.90752 28.91776 28.90752-28.91776 28.91264-28.96384-28.91264zM862.44352 659.54304H304.91648c-41.18528 0-75.05408-33.86368-75.05408-75.04896v-557.65504c0-41.1904 33.86368-75.05408 75.05408-75.05408h557.65504c41.1904 0 75.05408 33.86368 75.05408 75.05408V584.4940799999999c-0.13312 41.3184-33.86368 75.04896-75.18208 75.04896z m-4.18304-584.84736c0-24.05888-19.74272-43.80672-43.80672-43.80672H352.768c-24.05888 0-43.8016 19.74272-43.8016 43.80672V536.50944c0 24.05888 19.74272 43.8016 43.8016 43.8016h461.81376c24.05888 0 43.8016-19.74272 43.8016-43.8016v-461.81376h-0.12288zM263.33696 156.93312000000003h-20.00384c-24.05888 0-43.8016 19.74272-43.8016 43.8016V662.42048c0 24.05888 19.7376 43.8016 43.8016 43.8016h461.81376c24.05888 0 43.8016-19.74272 43.8016-43.8016v-38.57408h79.24224V710.4102399999999c0 41.18528-33.86368 75.04896-75.05408 75.04896H195.34336c-41.18528 0-75.04896-33.86368-75.04896-75.04896v-557.66016c0-41.18528 33.86368-75.04896 75.04896-75.04896h67.9936v79.232z" horiz-adv-x="1024" />
|
||||
|
||||
|
||||
|
||||
|
Before Width: | Height: | Size: 127 KiB After Width: | Height: | Size: 129 KiB |
Binary file not shown.
Binary file not shown.
Binary file not shown.
File diff suppressed because one or more lines are too long
@@ -20,7 +20,7 @@
|
||||
<span class="panel-info-corner-inner"></span>
|
||||
</span>
|
||||
</el-popover>
|
||||
<el-dropdown trigger="click" v-show="!isPreview" class="nz-chart-top" :key="'chartDropdown'+chartIndex" v-clickoutside="clickos">
|
||||
<el-dropdown trigger="click" v-show="!isPreview" class="nz-chart-top" :key="'chartDropdown'+chartIndex" v-clickoutside="clickos" :class="{'move-able':!isLock}">
|
||||
<el-dropdown-menu style="display: none"></el-dropdown-menu>
|
||||
<span class="el-dropdown-link chart-title" @click.stop="dropdownMenuShow=!dropdownMenuShow">
|
||||
<span class="chart-title-text">{{chartInfo.title}}</span>
|
||||
@@ -61,8 +61,9 @@
|
||||
<div slot="title">
|
||||
<span class="nz-dialog-title">{{data.title}}</span>
|
||||
<div class="float-right panel-calendar dialog-tool">
|
||||
<pick-time :refresh-data-func="dateChange" v-model="searchTime" :show-time-picker="false" :use-chart-unit="false" ref="pickTime" style="height: 28px;"></pick-time>
|
||||
</div>
|
||||
<span class="float-right dialog-tool" @click="screenRefreshChart"><i class="global-active-color nz-icon nz-icon-refresh"/></span>
|
||||
<!-- <span class="float-right dialog-tool" @click="screenRefreshChart"><i class="global-active-color nz-icon nz-icon-refresh"/></span>-->
|
||||
</div>
|
||||
<alertMessageTable
|
||||
:tableData="storedScreanTableData"
|
||||
@@ -103,13 +104,13 @@
|
||||
<div slot="title">
|
||||
{{$t("project.endpoint.dialogTitle")}}
|
||||
<div class="float-right panel-calendar dialog-tool" style="display: flex">
|
||||
<pick-time :refresh-data-func="queryChartDate" :use-refresh="false" :use-chart-unit="false" v-model="searchTime" style="height: 28px;" @unitChange="chartUnitChange"></pick-time>
|
||||
<pick-time :refresh-data-func="queryChartDate" :use-refresh="true" :use-chart-unit="false" v-model="searchTime" style="height: 28px;" @unitChange="chartUnitChange"></pick-time>
|
||||
</div>
|
||||
</div>
|
||||
<chart ref="messageChart" name="alertMessageChart" :unit="chartUnit" ></chart>
|
||||
</el-dialog>
|
||||
</div>
|
||||
<span class="vue-resizable-handle" @mousedown="startResize" v-if="!isPreview && data.resizable"></span>
|
||||
<span class="vue-resizable-handle" @mousedown="startResize" v-if="!isPreview && data.resizable&&!isLock"></span>
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
@@ -151,7 +152,8 @@ export default {
|
||||
},
|
||||
chartInfo:{},
|
||||
id:'',
|
||||
from: {type: String}
|
||||
from: {type: String},
|
||||
isLock:{type:Boolean,default:false}
|
||||
},
|
||||
data() {
|
||||
return {
|
||||
@@ -549,7 +551,7 @@ export default {
|
||||
if(this.searchLabel.orderBy){
|
||||
queryParam.orderBy=this.searchLabel.orderBy;
|
||||
}
|
||||
this.startLoading(filterType);
|
||||
// this.startLoading(filterType);
|
||||
this.$get('/alert/message', queryParam).then(response => {
|
||||
if (response.code == 200) {
|
||||
this.storedTableData = response.data.list;
|
||||
@@ -783,10 +785,6 @@ export default {
|
||||
let container = document.querySelector('#chartTableDiv' + this.chartIndex + " .table-container");
|
||||
container.style.height = `calc(100% - ${deHeight}px)`;
|
||||
this.tableHeight = `calc(100% - 34px)`;
|
||||
this.$nextTick(() => {
|
||||
this.ps = container.querySelector(".el-table__body-wrapper")._ps_;
|
||||
this.ps.update();
|
||||
});
|
||||
},
|
||||
showLoad(chartItem) {
|
||||
//设置高度 chart-table
|
||||
@@ -818,7 +816,6 @@ export default {
|
||||
//this.filter.start_time = bus.timeFormate(this.searchTime[0], 'yyyy-MM-dd hh:mm:ss');
|
||||
//this.filter.end_time = bus.timeFormate(this.searchTime[1], 'yyyy-MM-dd hh:mm:ss');
|
||||
//this.showTable = false;
|
||||
this.searchTime = [...time];
|
||||
this.seriesItemScreen = [];
|
||||
for(let i=0;i<8;i++){
|
||||
this.seriesItemScreen.push({//表格数据
|
||||
@@ -829,7 +826,7 @@ export default {
|
||||
value: '',//数值
|
||||
});
|
||||
}
|
||||
this.startLoading('screen');
|
||||
// this.startLoading('screen');
|
||||
//this.tableLoading = true;
|
||||
//this.firstShow = false;
|
||||
this.$emit('on-search-data', this.data.id, this.searchTime);
|
||||
|
||||
@@ -7,7 +7,7 @@
|
||||
<div class="resize-box" ref="resizeBox">
|
||||
<div class="chart-container chart-detail" :id="'chartContainerDiv' + chartIndex" @mouseenter="caretShow = true" @mouseleave="caretShow = false">
|
||||
<loading :ref="'localLoading' + chartIndex"></loading>
|
||||
<div class="clearfix chart-title" :class="{'drag-disabled': !data.draggable}" :id="'chartTitle' + chartIndex">
|
||||
<div class="clearfix chartTitle" :class="{'drag-disabled': !data.draggable,}" :id="'chartTitle' + chartIndex">
|
||||
<el-popover
|
||||
v-if="isError"
|
||||
:close-delay="10"
|
||||
@@ -20,7 +20,8 @@
|
||||
<span class="panel-info-corner-inner"></span>
|
||||
</span>
|
||||
</el-popover>
|
||||
<span class="el-dropdown-link chart-title-text" @click="dropdownMenuShow = !dropdownMenuShow">{{data.title}}</span>
|
||||
<span :class="{'move-able':!isLock}"><span class="el-dropdown-link chart-title-text chart-title" @click="dropdownMenuShow = !dropdownMenuShow">{{data.title}}</span></span>
|
||||
|
||||
</div>
|
||||
<div ref="chartInfo" class="chart-info" :id="'chartInfoDiv' + chartIndex" v-cloak>
|
||||
<div ref="scrollbar" style="height: 100%;width:100%; overflow: auto;">
|
||||
@@ -250,7 +251,7 @@
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<span v-if="data.resizable" class="vue-resizable-handle" @mousedown="startResize"></span>
|
||||
<span v-if="data.resizable&&!isLock" class="vue-resizable-handle" @mousedown="startResize"></span>
|
||||
</div>
|
||||
<!--preview -->
|
||||
<chart-preview :panelId="panelId" ref="chartsPreview" ></chart-preview>
|
||||
@@ -286,7 +287,8 @@
|
||||
chartIndex:{
|
||||
type: Number,
|
||||
default: 0,
|
||||
}
|
||||
},
|
||||
isLock:{type:Boolean,default:false}
|
||||
},
|
||||
data() {
|
||||
return {
|
||||
|
||||
@@ -51,7 +51,7 @@
|
||||
|
||||
<span class="temp-dom"></span>
|
||||
|
||||
<draggable v-model="dataList" @start="start" @end="end" :move="move" :key
|
||||
<draggable v-model="dataList" @start="start" @end="end" :move="move" :key :disabled="panelLock"
|
||||
:scroll-sensitivity="150"
|
||||
:options="{
|
||||
group:{name:'chartGroup',pull:'false'},
|
||||
@@ -75,6 +75,7 @@
|
||||
@on-drag-chart="editChartForDrag"
|
||||
@on-edit-chart-block="editData"
|
||||
:panel-id="filter.panelId"
|
||||
:is-lock="panelLock"
|
||||
:chart-index="index"
|
||||
:chart-data="item"></line-chart-block>
|
||||
|
||||
@@ -86,6 +87,7 @@
|
||||
@on-drag-chart="editChartForDrag"
|
||||
@on-edit-chart-block="editData"
|
||||
:chart-data="item"
|
||||
:is-lock="panelLock"
|
||||
:panel-id="filter.panelId"
|
||||
:chart-index="index"></chart-single-stat>
|
||||
|
||||
@@ -96,6 +98,7 @@
|
||||
@on-duplicate-chart-block="duplicateChart"
|
||||
@on-drag-chart="editChartForDrag"
|
||||
@on-edit-chart-block="editData"
|
||||
:is-lock="panelLock"
|
||||
:panel-id="filter.panelId"
|
||||
:chart-data="item"
|
||||
:chart-index="index"></chart-table>
|
||||
@@ -106,6 +109,7 @@
|
||||
@on-remove-chart-block="removeChart"
|
||||
@on-duplicate-chart-block="duplicateChart"
|
||||
@on-drag-chart="editChartForDrag"
|
||||
:is-lock="panelLock"
|
||||
@on-edit-chart-block="editData"
|
||||
:panel-id="filter.panelId"
|
||||
:chart-data="item"
|
||||
@@ -115,6 +119,7 @@
|
||||
:from="from" :panel-id="filter.panelId"
|
||||
:chart-index="index"
|
||||
@on-refresh-data="refreshChart"
|
||||
:is-lock="panelLock"
|
||||
:chart-data="item"
|
||||
:editChartId="'editChartId' + item.id"
|
||||
></chart-detail>
|
||||
@@ -125,6 +130,7 @@
|
||||
@on-duplicate-chart-block="duplicateChart"
|
||||
@on-drag-chart="editChartForDrag"
|
||||
@on-edit-chart-block="editData"
|
||||
:is-lock="panelLock"
|
||||
:panel-id="filter.panelId"
|
||||
:chart-data="item"
|
||||
:chart-index="index"
|
||||
@@ -135,6 +141,7 @@
|
||||
:chart-index="index"
|
||||
v-if="item.type === 'alertList'"
|
||||
:editChartId="'editChartId' + item.id"
|
||||
:is-lock="panelLock"
|
||||
:chart-info="item"
|
||||
@on-refresh-data="refreshChart"
|
||||
@on-search-data="searchData"
|
||||
@@ -170,7 +177,8 @@
|
||||
additionalInfo:{},
|
||||
draggable: {type: Boolean, default: true},
|
||||
detail: Object,
|
||||
from: {type: String}
|
||||
from: {type: String},
|
||||
panelLock:{type:Boolean,default:false}
|
||||
},
|
||||
|
||||
components: {
|
||||
@@ -219,7 +227,7 @@
|
||||
this.tempDom.width = span.offsetWidth;
|
||||
},
|
||||
start (event) {
|
||||
//console.log('start', event, this.dataList);
|
||||
// console.log('start', event, this.dataList);
|
||||
event.item.querySelector('.chartTitle').style.background = '#d8dce1';
|
||||
let projectAndAssetFeatureInfos = event.item.querySelectorAll(".feature-content");
|
||||
if (projectAndAssetFeatureInfos && projectAndAssetFeatureInfos.length > 0) {
|
||||
|
||||
@@ -20,7 +20,7 @@
|
||||
<span class="panel-info-corner-inner"></span>
|
||||
</span>
|
||||
</el-popover>
|
||||
<el-dropdown trigger="click" class="nz-chart-top" :key="'chartDropdown'+chartIndex" v-clickoutside="clickos">
|
||||
<el-dropdown trigger="click" class="nz-chart-top" :key="'chartDropdown'+chartIndex" v-clickoutside="clickos" :class="{'move-able':!isLock}">
|
||||
<el-dropdown-menu style="display: none"></el-dropdown-menu>
|
||||
<span class="el-dropdown-link chart-title" @click.stop="dropdownMenuShow=!dropdownMenuShow">
|
||||
<span class="chart-title-text">{{chartData.title}}</span>
|
||||
@@ -53,9 +53,10 @@
|
||||
<div slot="title">
|
||||
<span class="nz-dialog-title">{{data.title}}</span>
|
||||
<div class="float-right panel-calendar dialog-tool">
|
||||
<time-picker ref="calendarPanel" class="nz-dashboard-picker" style="margin-top: -12px;" @change="dateChange"></time-picker>
|
||||
<!-- <time-picker ref="calendarPanel" class="nz-dashboard-picker" style="margin-top: -12px;" @change="dateChange"></time-picker>-->
|
||||
<pick-time :refresh-data-func="dateChange" v-model="searchTime" :use-chart-unit="false" ref="pickTime" style="height: 28px;"></pick-time>
|
||||
</div>
|
||||
<span class="float-right dialog-tool" @click="screenRefreshChart" style="margin-right: 15px"><i class="global-active-color nz-icon nz-icon-refresh"/></span>
|
||||
<!-- <span class="float-right dialog-tool" @click="screenRefreshChart" style="margin-right: 15px"><i class="global-active-color nz-icon nz-icon-refresh"/></span>-->
|
||||
</div>
|
||||
<div class="single-stat-screen-container" >
|
||||
<div :style="{color:mapping?mapping.color.text:'#000',background:mapping?mapping.color.bac:'#fff'}" class="single-stat-content" id="chartScreenContainer" ref="chartScreenContainer">
|
||||
@@ -66,7 +67,7 @@
|
||||
<loading :ref="'localLoadingScreen'+chartIndex"></loading>
|
||||
</el-dialog>
|
||||
</div>
|
||||
<span class="vue-resizable-handle" @mousedown="startResize"></span>
|
||||
<span class="vue-resizable-handle" @mousedown="startResize" v-if="!isLock"></span>
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
@@ -101,7 +102,8 @@ export default {
|
||||
type: Number,
|
||||
default: 0,
|
||||
},
|
||||
from: {type: String}
|
||||
from: {type: String},
|
||||
isLock:{type:Boolean,default:false}
|
||||
},
|
||||
data() {
|
||||
return {
|
||||
@@ -344,7 +346,6 @@ export default {
|
||||
},
|
||||
//全屏时间条件查询
|
||||
dateChange(time) {
|
||||
this.searchTime = [...time];
|
||||
this.seriesItemScreen = [];
|
||||
this.serieSingleStat = "";
|
||||
this.startLoading('screen');
|
||||
@@ -384,7 +385,7 @@ export default {
|
||||
this.searchTime = [];
|
||||
this.$set(this.searchTime, 0, this.oldSearchTime[0]);
|
||||
this.$set(this.searchTime, 1, this.oldSearchTime[1]);
|
||||
this.$refs.calendarPanel.setCustomTime(this.searchTime);
|
||||
// this.$refs.calendarPanel.setCustomTime(this.searchTime);
|
||||
|
||||
this.seriesItemScreen = this.seriesItem;
|
||||
this.screenModal = true;
|
||||
|
||||
@@ -21,7 +21,7 @@
|
||||
<span class="panel-info-corner-inner"></span>
|
||||
</span>
|
||||
</el-popover>
|
||||
<el-dropdown trigger="click" class="nz-chart-top" :key="'chartDropdown'+chartIndex" v-clickoutside="clickos">
|
||||
<el-dropdown trigger="click" class="nz-chart-top" :key="'chartDropdown'+chartIndex" v-clickoutside="clickos" :class="{'move-able':!isLock}">
|
||||
<el-dropdown-menu style="display: none"></el-dropdown-menu>
|
||||
<span class="el-dropdown-link chart-title" @click.stop="dropdownMenuShow=!dropdownMenuShow">
|
||||
<span class="chart-title-text">{{chartData.title}}</span>
|
||||
@@ -78,10 +78,11 @@
|
||||
<div slot="title">
|
||||
<span class="nz-dialog-title">{{data.title}}</span>
|
||||
<div class="float-right panel-calendar dialog-tool">
|
||||
<time-picker ref="calendarPanel" class="nz-dashboard-picker" style="margin-top: -12px;"
|
||||
@change="dateChange"></time-picker>
|
||||
<!-- <time-picker ref="calendarPanel" class="nz-dashboard-picker" style="margin-top: -12px;"-->
|
||||
<!-- @change="dateChange"></time-picker>-->
|
||||
<pick-time :refresh-data-func="dateChange" v-model="searchTime" :use-chart-unit="false" ref="pickTime" style="height: 28px;"></pick-time>
|
||||
</div>
|
||||
<span class="float-right dialog-tool" @click="screenRefreshChart" style="margin-right: 15px"><i class="global-active-color nz-icon nz-icon-refresh"/></span>
|
||||
<!-- <span class="float-right dialog-tool" @click="screenRefreshChart" style="margin-right: 15px"><i class="global-active-color nz-icon nz-icon-refresh"/></span>-->
|
||||
</div>
|
||||
<el-table style="margin-top: 10px;" class="nz-table" height="95%" :data="seriesItemScreen" border
|
||||
@sort-change="tableDataSortScreen" tooltip-effect="light">
|
||||
@@ -105,7 +106,7 @@
|
||||
@pageSize='screenPageSize' ref="Pagination" :popper-append-to-body="false"></Pagination>
|
||||
<loading :ref="'localLoadingScreen'+chartIndex"></loading>
|
||||
</el-dialog>
|
||||
<span class="vue-resizable-handle" @mousedown="startResize"></span>
|
||||
<span class="vue-resizable-handle" @mousedown="startResize" v-if="!isLock"></span>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
@@ -141,7 +142,8 @@
|
||||
type: Number,
|
||||
default: 0,
|
||||
},
|
||||
from: {type: String}
|
||||
from: {type: String},
|
||||
isLock:{type:Boolean,default:false}
|
||||
},
|
||||
data() {
|
||||
return {
|
||||
@@ -315,7 +317,6 @@
|
||||
},
|
||||
//全屏时间条件查询
|
||||
dateChange(time) {
|
||||
this.searchTime = [...time];
|
||||
this.seriesItemScreen = [];
|
||||
for (let i = 0; i < 8; i++) {
|
||||
this.seriesItemScreen.push({//表格数据
|
||||
@@ -362,7 +363,7 @@
|
||||
this.searchTime = [];
|
||||
this.$set(this.searchTime, 0, this.oldSearchTime[0]);
|
||||
this.$set(this.searchTime, 1, this.oldSearchTime[1]);
|
||||
this.$refs.calendarPanel.setCustomTime(this.searchTime);
|
||||
// this.$refs.calendarPanel.setCustomTime(this.searchTime);
|
||||
|
||||
this.seriesItemScreen = this.seriesItem;
|
||||
this.screenModal = true;
|
||||
|
||||
@@ -8,7 +8,7 @@
|
||||
<div class="chart-url" :id="'chartUrlDiv'+chartIndex" @mouseenter="caretShow=true" @mouseleave="caretShow=false" >
|
||||
<loading :ref="'localLoading'+chartIndex"></loading>
|
||||
<div class="clearfix chartTitle" :class="{'dragTitle':dragTitleShow}" :id="'chartTitle'+chartIndex">
|
||||
<el-dropdown trigger="click" class="nz-chart-top" :key="'chartDropdown'+chartIndex" v-clickoutside="clickos">
|
||||
<el-dropdown trigger="click" class="nz-chart-top" :key="'chartDropdown'+chartIndex" v-clickoutside="clickos" :class="{'move-able':!isLock}">
|
||||
<el-dropdown-menu style="display: none"></el-dropdown-menu>
|
||||
<span class="el-dropdown-link chart-title" @click.stop="dropdownMenuShow=!dropdownMenuShow">
|
||||
<span class="chart-title-text">{{chartData.title}}</span>
|
||||
@@ -51,7 +51,7 @@
|
||||
<loading :ref="'localLoadingScreen'+chartIndex"></loading>
|
||||
</el-dialog>
|
||||
</div>
|
||||
<span class="vue-resizable-handle" @mousedown="startResize"></span>
|
||||
<span class="vue-resizable-handle" @mousedown="startResize" v-if="!isLock"></span>
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
@@ -86,7 +86,8 @@ export default {
|
||||
type: Number,
|
||||
default: 0,
|
||||
},
|
||||
from: {type: String}
|
||||
from: {type: String},
|
||||
isLock:{type:Boolean,default:false}
|
||||
},
|
||||
data() {
|
||||
return {
|
||||
|
||||
@@ -277,13 +277,13 @@
|
||||
height: 100%;
|
||||
position: relative;
|
||||
background-color: white;
|
||||
.chart-title:hover {
|
||||
.chartTitle:hover {
|
||||
background-color:#d8dce1;
|
||||
}
|
||||
.chart-title:not(.drag-disabled) {
|
||||
cursor: move;
|
||||
}
|
||||
.chart-title {
|
||||
//.chartTitle:not(.drag-disabled) {
|
||||
// cursor: move;
|
||||
//}
|
||||
.chartTitle {
|
||||
text-align: center;
|
||||
width: 100%;
|
||||
line-height: 30px;
|
||||
@@ -292,7 +292,7 @@
|
||||
.nz-chart-top{
|
||||
width:100%;
|
||||
}
|
||||
.el-dropdown-link {
|
||||
.move-able .el-dropdown-link {
|
||||
cursor: move;
|
||||
}
|
||||
.nz-icon-arrow-down {
|
||||
@@ -506,7 +506,7 @@
|
||||
.nz-chart-top{
|
||||
width:100%;
|
||||
}
|
||||
.el-dropdown-link {
|
||||
.move-able .el-dropdown-link {
|
||||
cursor: move;
|
||||
}
|
||||
.nz-icon-arrow-down {
|
||||
|
||||
@@ -34,7 +34,7 @@
|
||||
</span>
|
||||
</el-popover>
|
||||
</span>
|
||||
<el-dropdown trigger="click" class="nz-chart-top" :key="'chartDropdown'+chartIndex" v-clickoutside="clickos">
|
||||
<el-dropdown trigger="click" class="nz-chart-top" :key="'chartDropdown'+chartIndex" v-clickoutside="clickos" :class="{'move-able':!isLock}">
|
||||
<el-dropdown-menu style="display: none"></el-dropdown-menu>
|
||||
<span class="el-dropdown-link chart-title" @click.stop="dropdownMenuShow=!dropdownMenuShow">
|
||||
<span class="chart-title-text">{{chartData.title}}</span>
|
||||
@@ -130,10 +130,10 @@
|
||||
<span class="nz-dialog-title" v-show="isExplore"> </span>
|
||||
<div class="float-right panel-calendar dialog-tool">
|
||||
|
||||
<time-picker ref="calendarPanel" class="nz-dashboard-picker" style="margin-top: -12px;" @change="dateChange"></time-picker>
|
||||
<!--<pick-time :refresh-data-func="dateChange" v-model="searchTime" :use-chart-unit="false" ref="pickTime"></pick-time>-->
|
||||
<!-- <time-picker ref="calendarPanel" class="nz-dashboard-picker" style="margin-top: -12px;" @change="dateChange"></time-picker>-->
|
||||
<pick-time :refresh-data-func="dateChange" v-model="searchTime" :use-chart-unit="false" ref="pickTime" style="height: 28px;"></pick-time>
|
||||
</div>
|
||||
<span class="float-right dialog-tool" @click="screenRefreshChart" style="margin-right: 15px"><i class="global-active-color nz-icon nz-icon-refresh"/></span>
|
||||
<!-- <span class="float-right dialog-tool" @click="screenRefreshChart" style="margin-right: 15px"><i class="global-active-color nz-icon nz-icon-refresh"/></span>-->
|
||||
</div>
|
||||
<div class="line-area" ref="screenShowArea" id="screenShowArea" style="margin-top:0px;" @mouseenter="mouseEnterFullChart" @mouseleave="mouseLeaveFullChart"></div>
|
||||
<div class="chart-no-data" v-show="noData">No Data</div>
|
||||
@@ -174,7 +174,7 @@
|
||||
<loading :ref="'localLoadingScreen'+chartIndex"></loading>
|
||||
</el-dialog>
|
||||
</div>
|
||||
<span @mousedown="startResize" class="vue-resizable-handle" v-if="filter.from != $CONSTANTS.fromRoute.rule"></span>
|
||||
<span class="vue-resizable-handle" @mousedown="startResize" v-if="filter.from != $CONSTANTS.fromRoute.rule && !isLock"></span>
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
@@ -218,7 +218,8 @@
|
||||
default:false,
|
||||
},
|
||||
tempDom: Object,
|
||||
from: {type: String}
|
||||
from: {type: String},
|
||||
isLock:{type:Boolean,default:false}
|
||||
},
|
||||
computed: {
|
||||
getButtonCode() {
|
||||
@@ -344,8 +345,25 @@
|
||||
})
|
||||
}
|
||||
},
|
||||
|
||||
clickLegend(legendName,index){
|
||||
let curIsGrey=this.isGrey[index];
|
||||
let echart=getChart(this.chartIndex)
|
||||
if(echart) {
|
||||
if(curIsGrey){
|
||||
echart.dispatchAction({
|
||||
type: 'legendSelect',
|
||||
name: legendName
|
||||
})
|
||||
}else{
|
||||
echart.dispatchAction({
|
||||
type: 'legendUnSelect',
|
||||
name: legendName
|
||||
})
|
||||
}
|
||||
this.$set(this.isGrey,index,!curIsGrey)
|
||||
}
|
||||
},
|
||||
clickLegend2(legendName,index){
|
||||
//点击图表某一个legend，图表只显示当前点击的曲线或柱状图，其它隐藏，再次点击已选中的legend ，显示全部
|
||||
let curIsGrey=this.isGrey[index];
|
||||
if(getChart(this.chartIndex)){
|
||||
@@ -393,6 +411,23 @@
|
||||
}
|
||||
},
|
||||
clickScreenLegend(legendName,index){
|
||||
let curIsGrey=this.isGreyScreen[index];
|
||||
if(this.echartModalStore) {
|
||||
if(curIsGrey){
|
||||
this.echartModalStore.dispatchAction({
|
||||
type: 'legendSelect',
|
||||
name: legendName
|
||||
})
|
||||
}else{
|
||||
this.echartModalStore.dispatchAction({
|
||||
type: 'legendUnSelect',
|
||||
name: legendName
|
||||
})
|
||||
}
|
||||
this.$set(this.isGreyScreen,index,!curIsGrey)
|
||||
}
|
||||
},
|
||||
clickScreenLegend2(legendName,index){
|
||||
//点击图表某一个legend，图表只显示当前点击的曲线或柱状图，其它隐藏，再次点击已选中的legend ，显示全部
|
||||
let curIsGrey=this.isGreyScreen[index];
|
||||
if(this.echartModalStore){
|
||||
@@ -645,8 +680,7 @@
|
||||
if(i===0){
|
||||
let value=item.data[0];
|
||||
let t_date = new Date(value);
|
||||
str += [t_date.getFullYear(), t_date.getMonth() + 1, t_date.getDate()].join('-') + " "
|
||||
+ [t_date.getHours(), t_date.getMinutes(),t_date.getSeconds()].join(':');
|
||||
str += bus.timeFormate(t_date)
|
||||
str +=`<br/>`;
|
||||
}
|
||||
let val =item.data[1]?parseFloat(Number(item.data[1]).toFixed(2)):'';
|
||||
@@ -879,8 +913,7 @@
|
||||
if(i===0){
|
||||
let value=item.data[0];
|
||||
let t_date = new Date(value);
|
||||
str += [t_date.getFullYear(), t_date.getMonth() + 1, t_date.getDate()].join('-') + " "
|
||||
+ [t_date.getHours(), t_date.getMinutes(),t_date.getSeconds()].join(':');
|
||||
str += bus.timeFormate(t_date)
|
||||
str +=`<br/>`;
|
||||
}
|
||||
let val = parseFloat(Number(item.data[1]).toFixed(2));
|
||||
@@ -1043,8 +1076,7 @@
|
||||
if(i===0){
|
||||
let value=item.data[0];
|
||||
let t_date = new Date(value);
|
||||
str += [t_date.getFullYear(), t_date.getMonth() + 1, t_date.getDate()].join('-') + " "
|
||||
+ [t_date.getHours(), t_date.getMinutes(),t_date.getSeconds()].join(':');
|
||||
str += bus.timeFormate(t_date)
|
||||
str +=`<br/>`;
|
||||
}
|
||||
let val = parseFloat(Number(item.data[1]).toFixed(2));
|
||||
@@ -1262,7 +1294,7 @@
|
||||
//this.searchTime = this.oldSearchTime;
|
||||
this.$set(this.searchTime, 0, this.oldSearchTime[0]);
|
||||
this.$set(this.searchTime, 1, this.oldSearchTime[1]);
|
||||
this.$refs.calendarPanel.setCustomTime(this.searchTime);
|
||||
// this.$refs.calendarPanel.setCustomTime(this.searchTime);
|
||||
this.screenModal = true;
|
||||
this.isGreyScreen=[];
|
||||
|
||||
@@ -1300,7 +1332,6 @@
|
||||
});
|
||||
},
|
||||
dateChange(time) {
|
||||
this.searchTime = [...time];
|
||||
this.filter.start_time = bus.timeFormate(this.searchTime[0], 'yyyy-MM-dd hh:mm:ss');
|
||||
this.filter.end_time = bus.timeFormate(this.searchTime[1], 'yyyy-MM-dd hh:mm:ss');
|
||||
this.echartModalStore.clear();
|
||||
|
||||
@@ -11,7 +11,7 @@
|
||||
export default {
|
||||
name: "richTextEditor",
|
||||
props:{
|
||||
editData:String
|
||||
editData:String,
|
||||
},
|
||||
data(){
|
||||
return {
|
||||
|
||||
@@ -8,7 +8,7 @@
|
||||
<div class="chart-text" :id="'chartSingleStatDiv'+chartIndex" @mouseenter="caretShow=true" @mouseleave="caretShow=false">
|
||||
<loading :ref="'localLoading'+chartIndex"></loading>
|
||||
<div class="clearfix chartTitle" :class="{'dragTitle':dragTitleShow}" :id="'chartTitle'+chartIndex">
|
||||
<el-dropdown trigger="click" class="nz-chart-top" :key="'chartDropdown'+chartIndex" v-clickoutside="clickos">
|
||||
<el-dropdown trigger="click" class="nz-chart-top" :key="'chartDropdown'+chartIndex" v-clickoutside="clickos" :class="{'move-able':!isLock}">
|
||||
<el-dropdown-menu style="display: none"></el-dropdown-menu>
|
||||
<span class="el-dropdown-link chart-title" @click.stop="dropdownMenuShow=!dropdownMenuShow">
|
||||
<span class="chart-title-text">{{chartData.title}}</span>
|
||||
@@ -52,7 +52,7 @@
|
||||
<loading :ref="'localLoadingScreen'+chartIndex"></loading>
|
||||
</el-dialog>
|
||||
</div>
|
||||
<span class="vue-resizable-handle" @mousedown="startResize"></span>
|
||||
<span class="vue-resizable-handle" @mousedown="startResize" v-if="!isLock"></span>
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
@@ -84,7 +84,8 @@
|
||||
type: Number,
|
||||
default: 0,
|
||||
},
|
||||
from: {type: String}
|
||||
from: {type: String},
|
||||
isLock:{type:Boolean,default:false}
|
||||
},
|
||||
data() {
|
||||
return {
|
||||
|
||||
@@ -874,9 +874,11 @@
|
||||
*/
|
||||
},
|
||||
beforeDestroy(){
|
||||
if(this.scrollbarWrap){
|
||||
this.scrollbarWrap.removeEventListener('scroll', bus.debounce);
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
</script>
|
||||
|
||||
|
||||
@@ -55,6 +55,9 @@
|
||||
<i class="nz-icon-create-square nz-icon"></i>
|
||||
</button>
|
||||
</template>
|
||||
|
||||
<button type="button" class="nz-btn nz-btn-size-normal nz-btn-style-light " style="margin-left: 20px;" v-if="from == $CONSTANTS.fromRoute.asset||from == $CONSTANTS.fromRoute.model" @click="panelLock=!panelLock"><i :class="{'nz-icon nz-icon-lock':panelLock,'nz-icon nz-icon-unlock':!panelLock}"></i></button>
|
||||
|
||||
<button :title="$t('overall.syncChart')" @click="syncChart" style="margin-left: 20px;" v-has="['model_chart_sync', 'asset_chart_sync']" v-if="from == $CONSTANTS.fromRoute.asset||from == $CONSTANTS.fromRoute.model"
|
||||
class="nz-btn nz-btn-size-normal nz-btn-style-light ">
|
||||
<i class="nz-icon-sync nz-icon"></i>
|
||||
@@ -84,7 +87,7 @@
|
||||
<div ref="dashboardScrollbar" style="height: 100%; overflow: auto;">
|
||||
<div class="box-content">
|
||||
<chart-list :additional-info="obj" :detail="detail" :draggable="draggable" :from="from" :is-model="from == $CONSTANTS.fromRoute.model" @on-edit-chart="editChart"
|
||||
@on-refresh-time="refreshTime" @on-remove-chart="delChart" ref="chartList"></chart-list>
|
||||
@on-refresh-time="refreshTime" @on-remove-chart="delChart" ref="chartList" :panel-lock="panelLock"></chart-list>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
@@ -112,6 +115,7 @@
|
||||
},
|
||||
data() {
|
||||
return {
|
||||
panelLock:true,
|
||||
showTopBtn: false, //top按钮
|
||||
visible: false,
|
||||
rightBox: { //面板弹出框相关
|
||||
|
||||
@@ -0,0 +1,773 @@
|
||||
<template>
|
||||
<div ref="box" class="box-hexagon" v-clickoutside="hexagonSvgClearScale" v-if="boxhexagonShow">
|
||||
<!--<div class="hexagon-text" :style="{top:hexagonTextPos.top,left:hexagonTextPos.left}" v-show="hexagonTextPos.show">-->
|
||||
<!--<span v-if="hexagonTextPos.data">-->
|
||||
<!--{{hexagonTextPos.data?hexagonTextPos.data.alertName:''}}-->
|
||||
<!--{{hexagonTextPos.data?hexagonTextPos.data.nums:''}}-->
|
||||
<!--</span>-->
|
||||
<!--</div>-->
|
||||
<div :id="hexagonSvgID">
|
||||
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import {SVG} from '@svgdotjs/svg.js'
|
||||
import '@svgdotjs/svg.panzoom.js'
|
||||
import {getHexagon,setHexagon,delHexagon} from "../js/common";
|
||||
|
||||
function PolylineOver(){
|
||||
this.stroke({color:'#909090'})
|
||||
}
|
||||
|
||||
function PolylineOut(){
|
||||
this.stroke({color:'#DADADA'})
|
||||
}
|
||||
|
||||
function hexagonPoint(x,y,edge){ // 根据左上角坐标点生成六边的六个点的坐标 通过 svg画出
|
||||
return new Promise(resolve=>{
|
||||
let arr;
|
||||
let x1,x2,x3,x4,x5,x6;
|
||||
let y1,y2,y3,y4,y5,y6;
|
||||
let MathSqrt3=Math.sqrt(3);
|
||||
x1=x;
|
||||
y1=y+edge/2;
|
||||
x2=x+MathSqrt3*edge/2;
|
||||
y2=y;
|
||||
x3=x+MathSqrt3*edge;
|
||||
y3=y+edge/2;
|
||||
x4=x+MathSqrt3*edge;
|
||||
y4=y+edge/2+edge;
|
||||
x5=x+MathSqrt3*edge/2;
|
||||
y5=y+edge*2;
|
||||
x6=x;
|
||||
y6=y+edge/2+edge;
|
||||
arr=[{x:x1,y:y1},{x:x2,y:y2},{x:x3,y:y3},{x:x4,y:y4},{x:x5,y:y5},{x:x6,y:y6}];
|
||||
let svgStrPoint='';
|
||||
arr.forEach((item)=>{
|
||||
svgStrPoint+=item['x']+','+item['y']+' '
|
||||
});
|
||||
let center=[x+MathSqrt3*edge/2,y+edge];
|
||||
resolve({
|
||||
point:arr,
|
||||
svgStrPoint,
|
||||
center
|
||||
})
|
||||
})
|
||||
}
|
||||
|
||||
function midpoint(point1,point2){//计算中点
|
||||
return {
|
||||
x:(point1.x+point2.x)/2,
|
||||
y:(point1.y+point2.y)/2,
|
||||
}
|
||||
}
|
||||
|
||||
function borderMove(left,top,borderSize,type,svgPolyline){//left,top, 坐标 borderSize 长度,type 外层边框线从哪走到那
|
||||
let point=[null,null];
|
||||
let MathSqrt3=Math.sqrt(3);
|
||||
let arr=svgPolyline.array();
|
||||
switch(type){
|
||||
case 1: //从左到右的斜上方运动
|
||||
point[0]=left+MathSqrt3*borderSize/2;
|
||||
point[1]=top-borderSize/2;
|
||||
break;
|
||||
case 2: //从左到右的斜下方运动
|
||||
point[0]=left+MathSqrt3*borderSize/2;
|
||||
point[1]=top+borderSize/2;
|
||||
break;
|
||||
case 3: //从上到下的正下方运动
|
||||
point[0]=left;
|
||||
point[1]=top+borderSize;
|
||||
break;
|
||||
case 4: //从右到左的斜下方运动
|
||||
point[0]=left-MathSqrt3*borderSize/2;
|
||||
point[1]=top+borderSize/2;
|
||||
break;
|
||||
case 5: //从右到左的斜上方运动
|
||||
point[0]=left-MathSqrt3*borderSize/2;
|
||||
point[1]=top-borderSize/2;
|
||||
break;
|
||||
case 6: //从右到左的斜上方运动
|
||||
point[0]=left;
|
||||
point[1]=top-borderSize;
|
||||
break;
|
||||
}
|
||||
arr.push(point);
|
||||
svgPolyline.plot(arr);
|
||||
return point
|
||||
}
|
||||
|
||||
export default {
|
||||
name:"hexagonFigureSvg",
|
||||
props:{
|
||||
hexData:{},//数据
|
||||
hexagonSvgID:{//在同一个页面创建多个实例时 需要通过id区分
|
||||
type:String,
|
||||
default:'hexagonSvg',
|
||||
},
|
||||
col:{},//列数
|
||||
colorFrom:{//通过什么决定颜色
|
||||
type:String,
|
||||
default:'',
|
||||
},
|
||||
infoSet:{// 设置六边形内部内容 参数 group 对应六边形所在的组。allHexagonRect吧所有文本框放入，方便控制显示隐藏。data 六边形的相关数 data.center 中心点。that 子组件实例
|
||||
type:Function,
|
||||
},
|
||||
colorSet:{ //设置方块对应颜色 参数 item 当前item的数据
|
||||
type:Function,
|
||||
default:()=>{
|
||||
return {color:'#99D7C2',hoverColor:'#B2ECD9'}
|
||||
}
|
||||
},
|
||||
infoShow:{// 设置六边形内部内容 放大显示时的样式 参数 allHexagonRect
|
||||
type:Function,
|
||||
},
|
||||
infoHide:{// 设置六边形内部内容 缩小显示时的样式 参数 allHexagonRect
|
||||
type:Function,
|
||||
},
|
||||
hexagonEdge:{ // 边框长度
|
||||
type:Number,
|
||||
default:90,
|
||||
},
|
||||
defaultRate:{//默认倍率
|
||||
type:Number,
|
||||
default:0.33,
|
||||
},
|
||||
magnifyRate:{//放大倍率
|
||||
type:Number,
|
||||
default:1,
|
||||
},
|
||||
isClickRate:{ // 是否支持点击放大
|
||||
type:Boolean,
|
||||
default:true,
|
||||
},
|
||||
isPanning:{ // 是否支持移动
|
||||
type:Boolean,
|
||||
default:true,
|
||||
},
|
||||
isPinchZoom:{ //是否支持手指缩放
|
||||
type:Boolean,
|
||||
default:false,
|
||||
},
|
||||
isWheelZoom:{ //是否支持手指缩放
|
||||
type:Boolean,
|
||||
default:false,
|
||||
},
|
||||
zoomFactor:{ //鼠标滚轮放大倍数
|
||||
type:Number,
|
||||
default:0.5,
|
||||
},
|
||||
zoomMin:{//最小倍数
|
||||
type:Number,
|
||||
default:0.2,
|
||||
},
|
||||
zoomMax:{//最小倍数
|
||||
type:Number,
|
||||
default:5,
|
||||
},
|
||||
from:{}
|
||||
},
|
||||
watch:{
|
||||
hexData:{
|
||||
immediate:false,
|
||||
deep:true,
|
||||
handler(n){
|
||||
console.log(n);
|
||||
this.init();
|
||||
}
|
||||
},
|
||||
col:{ // 列数
|
||||
immediate:false,
|
||||
deep:true,
|
||||
handler(){
|
||||
this.init();
|
||||
}
|
||||
},
|
||||
},
|
||||
data(){
|
||||
return {
|
||||
allHexagon:[],
|
||||
allGroup:[],
|
||||
// col:5,
|
||||
row:5,
|
||||
boxPadLeft:360,
|
||||
boxPadTop:180,
|
||||
hexagonData:[],
|
||||
textAll:[],
|
||||
hexSize:'',
|
||||
MathSqrt3:Math.sqrt(3),
|
||||
hexagonTextPos:{
|
||||
top:0,
|
||||
left:0,
|
||||
show:false,
|
||||
data:null
|
||||
},
|
||||
timer:null,
|
||||
boxhexagonShow:false,
|
||||
pan:false,//是否移动
|
||||
defaultColor:{color:'#99D7C2',hoverColor:'#B2ECD9'},
|
||||
viewBox:null,
|
||||
isShowHover:true,//是否显示hover块
|
||||
}
|
||||
},
|
||||
computed:{
|
||||
interspace(){
|
||||
return (this.hexagonEdge*this.MathSqrt3/5)*0.5;
|
||||
}
|
||||
},
|
||||
created(){
|
||||
},
|
||||
mounted(){
|
||||
// this.init()
|
||||
},
|
||||
methods:{
|
||||
init(){ //创建svg实例
|
||||
this.boxhexagonShow=false;
|
||||
this.clearData();
|
||||
setTimeout(()=>{
|
||||
this.boxhexagonShow=true;
|
||||
this.$nextTick(()=>{
|
||||
this.hexagonData=JSON.parse(JSON.stringify(this.hexData));
|
||||
let box=`#${this.hexagonSvgID}`;
|
||||
let hexagonSvg=SVG().addTo(box).size('100%','100%')
|
||||
.panZoom({
|
||||
zoomMin:this.zoomMin,
|
||||
zoomMax:this.zoomMax,
|
||||
zoomFactor:this.zoomFactor,
|
||||
pinchZoom:this.isPinchZoom,
|
||||
wheelZoom:this.isWheelZoom,
|
||||
panning:this.isPanning
|
||||
})
|
||||
.attr('id','SvgHex')
|
||||
.attr('class',this.hexagonSvgID)
|
||||
.attr('viewBox',`0 0 ${this.$refs.box.offsetWidth} ${this.$refs.box.offsetHeight}`); //svg实例
|
||||
hexagonSvg.on('click',this.hexagonSvgClearScale);
|
||||
hexagonSvg.on('panStart',this.hexagonSvgPanStart);
|
||||
hexagonSvg.on('panEnd',this.hexagonSvgPanEnd);
|
||||
setHexagon(this.hexagonSvgID,{
|
||||
hexagonSvg:hexagonSvg,
|
||||
svgPolyline:null,
|
||||
allHexagonRect:[],
|
||||
allHexagonText:[],
|
||||
hover:null
|
||||
})
|
||||
this.getPadding().then(()=>{
|
||||
getHexagon(this.hexagonSvgID).svgPolyline=getHexagon(this.hexagonSvgID).hexagonSvg.polyline().fill('none').stroke({
|
||||
color:'#DADADA',
|
||||
width:3,
|
||||
linecap:'round',
|
||||
linejoin:'round'
|
||||
});
|
||||
this.getDataPoint();
|
||||
});//获取到上方和左方的距离;
|
||||
})
|
||||
},100)
|
||||
},
|
||||
getPadding(){//确定到上方和下方的距离 保持居中
|
||||
return new Promise(resolve=>{
|
||||
let hexagonWidth=this.MathSqrt3*this.hexagonEdge+this.interspace;
|
||||
let hexagonHeight=this.hexagonEdge*2+this.interspace;
|
||||
let row=parseInt((this.hexagonData.length)/(this.col*2-1))*2;//行数是总数除2倍列数-1的整数部分 加上根据余数的判断
|
||||
let dolNum=(this.hexagonData.length)%(this.col*2-1)
|
||||
if(dolNum>0&&dolNum<=this.col){ //余数的判断
|
||||
row+=1
|
||||
}else if(dolNum>0&&dolNum>this.col){
|
||||
row+=2
|
||||
}
|
||||
this.row=row;
|
||||
if(this.hexagonData.length-1<=this.col){
|
||||
// boxPadLeft:200, boxPadTop:75,
|
||||
this.boxPadLeft=(this.$refs.box.offsetWidth-this.hexagonData.length*hexagonWidth)/2;
|
||||
this.boxPadTop=(this.$refs.box.offsetHeight-hexagonHeight)/2; //只有一行是 到上方距离应该是两倍边长
|
||||
}else{
|
||||
this.boxPadLeft=(this.$refs.box.offsetWidth-this.col*hexagonWidth)/2;
|
||||
this.boxPadTop=(this.$refs.box.offsetHeight-(hexagonHeight+(this.row-1)*hexagonHeight*3/4))/2; // 大于一行时 为一行的行高 + 3/2的行高
|
||||
}
|
||||
resolve();
|
||||
})
|
||||
},
|
||||
getDataPoint(){ // 确定所有坐标点的位置
|
||||
let col=this.col;//确定列数
|
||||
let row=this.row;//确定列数
|
||||
let paddingTop=this.boxPadTop; // 到上方的距离
|
||||
let paddingLeft=this.boxPadLeft; //整体到左侧的距离
|
||||
let arrIndex=0;
|
||||
this.hexSize=this.MathSqrt3*this.hexagonEdge/2;
|
||||
for(let i=0; i<row; i++){// 确定 所有 坐标点
|
||||
if(arrIndex>this.hexagonData.length-1){
|
||||
break
|
||||
}
|
||||
for(let j=0; j<col; j++){
|
||||
if(arrIndex>this.hexagonData.length-1){
|
||||
break
|
||||
}
|
||||
if(i===0){
|
||||
this.hexagonData[arrIndex].left=j*(this.hexSize*2+this.interspace)+paddingLeft;
|
||||
this.hexagonData[arrIndex].top=i*(this.hexSize*2)+paddingTop;
|
||||
this.hexagonData[arrIndex].sub=i+'-'+j
|
||||
}else if(i%2===0){
|
||||
// if(i===2&&( j===1 || j==2)){
|
||||
// this.hexagonData[arrIndex].left=j*(this.hexSize*2 + this.interspace)+ paddingLeft;
|
||||
// this.hexagonData[arrIndex].top=i*(this.hexSize*2 + this.interspace/2 - this.hexSize*2*1/8)+ paddingTop;
|
||||
// }else{
|
||||
// continue;
|
||||
// }
|
||||
this.hexagonData[arrIndex].left=j*(this.hexSize*2+this.interspace)+paddingLeft;
|
||||
this.hexagonData[arrIndex].top=i*(this.hexSize*2+this.interspace/2*this.MathSqrt3-this.hexSize*2/8)+paddingTop;
|
||||
this.hexagonData[arrIndex].sub=i+'-'+j
|
||||
}else{
|
||||
if(j===col-1){
|
||||
break
|
||||
}
|
||||
// if(i!==3){
|
||||
// this.hexagonData[arrIndex].left=j*(this.hexSize*2 + this.interspace ) + this.hexSize*2/2 + this.interspace/2+ paddingLeft;
|
||||
// this.hexagonData[arrIndex].top=i*(this.hexSize*2 + this.interspace/2 - this.hexSize*2*1/8) + paddingTop;
|
||||
// } else if(i==3&&(j===1)){
|
||||
// this.hexagonData[arrIndex].left=j*(this.hexSize*2 + this.interspace ) + this.hexSize*2/2 + this.interspace/2+ paddingLeft;
|
||||
// this.hexagonData[arrIndex].top=i*(this.hexSize*2 + this.interspace/2 - this.hexSize*2*1/8) + paddingTop;
|
||||
// }else{
|
||||
// continue;
|
||||
// }
|
||||
this.hexagonData[arrIndex].left=j*(this.hexSize*2+this.interspace)+this.hexSize*2/2+this.interspace/2+paddingLeft;
|
||||
this.hexagonData[arrIndex].top=i*(this.hexSize*2+this.interspace/2*this.MathSqrt3-this.hexSize*2/8)+paddingTop;
|
||||
this.hexagonData[arrIndex].sub=i+'-'+j
|
||||
}
|
||||
arrIndex++;
|
||||
}
|
||||
}
|
||||
this.renderSomeHexagonAll();
|
||||
},
|
||||
renderSomeHexagonAll(){// 遍历所有数据 绘画六边形 之后画边框
|
||||
this.hexagonData.forEach(item=>{
|
||||
this.renderHexagon(item)
|
||||
});
|
||||
setTimeout(()=>{
|
||||
this.borderHex();
|
||||
getHexagon(this.hexagonSvgID).hexagonSvg.animate(300).zoom(this.defaultRate);
|
||||
let hoverRect=getHexagon(this.hexagonSvgID).hexagonSvg.group().addClass('hoverRect');
|
||||
hoverRect.rect();
|
||||
hoverRect.text('a');
|
||||
hoverRect.hide();
|
||||
getHexagon(this.hexagonSvgID).hover=hoverRect
|
||||
})
|
||||
},
|
||||
renderHexagon(item){ // 绘画六边形
|
||||
hexagonPoint(item.left,item.top,this.hexagonEdge).then(data=>{
|
||||
let color=this.colorSet?this.colorSet(item):this.defaultColor;
|
||||
let group=getHexagon(this.hexagonSvgID).hexagonSvg.group();
|
||||
let polygon=group.polygon(data.svgStrPoint).fill(color.color);
|
||||
polygon.data({
|
||||
...data,
|
||||
...item,
|
||||
...color
|
||||
});
|
||||
group.on('mouseenter',this.hexagonOver.bind(this,group));
|
||||
group.on('mouseleave',this.hexagonOut.bind(this,group));
|
||||
group.on('click',this.hexagonSvgScale.bind(this,polygon.data('center'),item,data));
|
||||
group.on('dbclick',this.hexagonSvgClearScale.bind(this,polygon.data('center'),item,data));
|
||||
this.allHexagon.push(polygon);
|
||||
this.allGroup.push(group);
|
||||
// 向六边形内 添加文本 本质是根据六边形的中心点确定各个文本位置
|
||||
if(this.infoSet){
|
||||
this.infoSet(group,getHexagon(this.hexagonSvgID).allHexagonRect,getHexagon(this.hexagonSvgID).allHexagonText,data,item,this);
|
||||
}
|
||||
});
|
||||
},
|
||||
hexagonOver(that){// 移入六边形
|
||||
let color=that.first().data('hoverColor');
|
||||
that.first().animate(100).stroke({width:3,color:'#909090'}).fill(color);
|
||||
that.animate(100).transform({scale:1.1});
|
||||
that.parent().find('polyline').stroke({color:'#909090'});
|
||||
let hover=that.parent().find('.hoverRect');
|
||||
|
||||
if(this.isShowHover&&hover&&this.from){
|
||||
let center=that.first().data('center');
|
||||
let str=this.from==='asset'?that.first().data('host'):that.first().data('module');
|
||||
console.log(str);
|
||||
str+='';
|
||||
hover.show();
|
||||
hover.get(0).attr(
|
||||
{
|
||||
x:center[0]-this.hexagonEdge-(str.length*20+30),
|
||||
y:center[1]-36
|
||||
}
|
||||
).fill({ color: `rgba(0,0,0,0.3)`}).size((str.length*20+30),72);
|
||||
hover.get(1).attr(
|
||||
{
|
||||
x:center[0]-this.hexagonEdge-(str.length*20+15),
|
||||
y:center[1]-32
|
||||
}
|
||||
).fill({ color: '#fff',weight:400}).text(str).font({size:36});
|
||||
}
|
||||
},
|
||||
hexagonOut(that){// 移出六边形
|
||||
let color=that.first().data('color');
|
||||
that.first().animate(100).stroke({width:0,color:'#909090'}).fill(color);
|
||||
that.animate(100).transform({scale:1});
|
||||
that.parent().find('polyline').stroke({color:'#DADADA'});
|
||||
let hover=that.parent().find('.hoverRect');
|
||||
if(hover){
|
||||
hover.hide();
|
||||
}
|
||||
},
|
||||
hexagonSvgScale(center,item1,data,e){
|
||||
window.event?window.event.cancelBubble=true:e.stopPropagation();
|
||||
if(!this.pan&&this.isClickRate){
|
||||
getHexagon(this.hexagonSvgID).hexagonSvg.animate(300).zoom(this.magnifyRate,{x:center[0],y:center[1]});
|
||||
if(this.infoShow){
|
||||
this.infoShow(getHexagon(this.hexagonSvgID).allHexagonRect,getHexagon(this.hexagonSvgID).allHexagonText)
|
||||
}
|
||||
this.isShowHover=false;
|
||||
}
|
||||
},
|
||||
hexagonSvgClearScale(){
|
||||
if(!this.pan&&this.isClickRate){
|
||||
getHexagon(this.hexagonSvgID).hexagonSvg.animate(300).zoom(this.defaultRate);
|
||||
if(this.infoHide){
|
||||
this.infoHide(getHexagon(this.hexagonSvgID).allHexagonRect,getHexagon(this.hexagonSvgID).allHexagonText)
|
||||
}
|
||||
this.isShowHover=true;
|
||||
window.getSelection().empty();//取消选中文字
|
||||
}
|
||||
},
|
||||
hexColorToRgb(color){
|
||||
let reg=/^#([0-9a-fA-f]{3}|[0-9a-fA-f]{6})$/;
|
||||
// 把颜色值变成小写
|
||||
if(reg.test(color)){
|
||||
// 如果只有三位的值，需变成六位，如：#fff => #ffffff
|
||||
if(color.length===4){
|
||||
let colorNew="#";
|
||||
for(let i=1; i<4; i+=1){
|
||||
colorNew+=color.slice(i,i+1).concat(color.slice(i,i+1));
|
||||
}
|
||||
color=colorNew;
|
||||
}
|
||||
// 处理六位的颜色值，转为RGB
|
||||
let colorChange=[];
|
||||
for(let i=1; i<7; i+=2){
|
||||
colorChange.push(parseInt("0x"+color.slice(i,i+2)));
|
||||
}
|
||||
return colorChange.join(",");
|
||||
}else{
|
||||
return color;
|
||||
}
|
||||
},
|
||||
hexagonSvgPanStart(ev){ // 实例移动开始 解绑点击函数
|
||||
ev.preventDefault();
|
||||
setTimeout(()=>{ // 设置延时 解决移动后的缩放问题
|
||||
this.pan=true;
|
||||
},100)
|
||||
},
|
||||
hexagonSvgPanEnd(ev){ // 实例移动结束 重新绑定点击函数
|
||||
ev.preventDefault();
|
||||
setTimeout(()=>{ // 设置延时 解决移动后的缩放问题
|
||||
this.pan=false;
|
||||
},100)
|
||||
},
|
||||
borderHex(){//外层边框 数组点
|
||||
let length=this.allHexagon.length;
|
||||
if(length==0){//为0 调出
|
||||
return
|
||||
}
|
||||
let k={x:-this.interspace,y:-(this.interspace*2)*this.MathSqrt3/6};//边框对起点的偏移量
|
||||
let item=this.allHexagon[0].data('point')[0];
|
||||
let endItemSub=this.allHexagon[length-1].data('sub').split('-');
|
||||
let borderCol=endItemSub[1];
|
||||
let borderRow=endItemSub[0];
|
||||
let borderPoint=[item.x+k.x,item.y+k.y];
|
||||
let borderSize=this.hexagonEdge*1.2;
|
||||
getHexagon(this.hexagonSvgID).svgPolyline.plot([borderPoint]);
|
||||
//先从左到右划线 应该是 col的长度
|
||||
let borderColTop=0;
|
||||
if(borderRow==0){
|
||||
borderColTop=borderCol;
|
||||
}else{
|
||||
borderColTop=this.col-1;
|
||||
}
|
||||
for(let i=0; i<=borderColTop*2; i++){
|
||||
if(i===1){
|
||||
borderSize=this.hexagonEdge*1.1
|
||||
}
|
||||
if(i%2===0){
|
||||
borderPoint=borderMove(borderPoint[0],borderPoint[1],borderSize,1,getHexagon(this.hexagonSvgID).svgPolyline);
|
||||
}else{
|
||||
borderPoint=borderMove(borderPoint[0],borderPoint[1],borderSize,2,getHexagon(this.hexagonSvgID).svgPolyline);
|
||||
}
|
||||
}
|
||||
borderSize=this.hexagonEdge*1.2
|
||||
// 从上到下 应该是row的长度 分情况
|
||||
let borderRowRight=0;//右边循环次数
|
||||
// 情况1 borderCol<=this.col && row==0时
|
||||
if((borderCol<=this.col-1)&&borderRow==0){
|
||||
borderRowRight=3;
|
||||
for(let i=0; i<borderRowRight-1; i++){
|
||||
if(i===1){
|
||||
// borderPoint = borderMove(borderPoint[0],borderPoint[1],borderSize,2,,getHexagon(this.hexagonSvgID).svgPolylinetrue);
|
||||
borderSize=this.hexagonEdge*1.2
|
||||
}
|
||||
if(i===2){
|
||||
// borderPoint = borderMove(borderPoint[0],borderPoint[1],borderSize,2,,getHexagon(this.hexagonSvgID).svgPolylinetrue);
|
||||
borderSize=this.hexagonEdge*1.1
|
||||
}
|
||||
if(i%4===0){
|
||||
borderPoint=borderMove(borderPoint[0],borderPoint[1],borderSize,2,getHexagon(this.hexagonSvgID).svgPolyline);
|
||||
}else if(i%4===1){
|
||||
borderPoint=borderMove(borderPoint[0],borderPoint[1],borderSize,3,getHexagon(this.hexagonSvgID).svgPolyline);
|
||||
}else if(i%4===2){
|
||||
borderPoint=borderMove(borderPoint[0],borderPoint[1],borderSize,4,getHexagon(this.hexagonSvgID).svgPolyline);
|
||||
}else if(i%4===3){
|
||||
borderPoint=borderMove(borderPoint[0],borderPoint[1],borderSize,3,getHexagon(this.hexagonSvgID).svgPolyline);
|
||||
}
|
||||
}
|
||||
}
|
||||
// 情况2 border==this.col&& row>0时 且row 为奇数事
|
||||
if(borderCol==this.col-2&&borderRow>0&&borderRow%2==1){
|
||||
borderRowRight=2*(Number(borderRow)+1);
|
||||
for(let i=0; i<borderRowRight; i++){
|
||||
if(i%4===0){
|
||||
borderSize=this.hexagonEdge*1.1;
|
||||
if(i==0){
|
||||
borderSize=this.hexagonEdge*1.2;
|
||||
}
|
||||
borderPoint=borderMove(borderPoint[0],borderPoint[1],borderSize,2,getHexagon(this.hexagonSvgID).svgPolyline);
|
||||
}else if(i%4===1){
|
||||
borderSize=this.hexagonEdge*1.2;
|
||||
borderPoint=borderMove(borderPoint[0],borderPoint[1],borderSize,3,getHexagon(this.hexagonSvgID).svgPolyline);
|
||||
}else if(i%4===2){
|
||||
borderSize=this.hexagonEdge*1.1;
|
||||
borderPoint=borderMove(borderPoint[0],borderPoint[1],borderSize,4,getHexagon(this.hexagonSvgID).svgPolyline);
|
||||
}else if(i%4===3){
|
||||
borderSize=this.hexagonEdge*1.03;
|
||||
if(i===borderRowRight-1){
|
||||
borderSize=this.hexagonEdge*1.1;
|
||||
}
|
||||
borderPoint=borderMove(borderPoint[0],borderPoint[1],borderSize,3,getHexagon(this.hexagonSvgID).svgPolyline);
|
||||
}
|
||||
}
|
||||
}
|
||||
// 情况3 borderCol==this.col && row>0 且 row 为偶数事
|
||||
if(borderCol==this.col-1&&borderRow>0&&borderRow%2==0){
|
||||
borderRowRight=2*(Number(borderRow)+1)+1;
|
||||
for(let i=0; i<borderRowRight-1; i++){
|
||||
if(i%4===0){
|
||||
borderSize=this.hexagonEdge*1.1
|
||||
if(i==0){
|
||||
borderSize=this.hexagonEdge*1.2
|
||||
}
|
||||
borderPoint=borderMove(borderPoint[0],borderPoint[1],borderSize,2,getHexagon(this.hexagonSvgID).svgPolyline);
|
||||
}else if(i%4===1){
|
||||
borderSize=this.hexagonEdge*1.2;
|
||||
borderPoint=borderMove(borderPoint[0],borderPoint[1],borderSize,3,getHexagon(this.hexagonSvgID).svgPolyline);
|
||||
}else if(i%4===2){
|
||||
borderSize=this.hexagonEdge*1.1;
|
||||
borderPoint=borderMove(borderPoint[0],borderPoint[1],borderSize,4,getHexagon(this.hexagonSvgID).svgPolyline);
|
||||
}else if(i%4===3){
|
||||
borderSize=this.hexagonEdge*1.03;
|
||||
borderPoint=borderMove(borderPoint[0],borderPoint[1],borderSize,3,getHexagon(this.hexagonSvgID).svgPolyline);
|
||||
}
|
||||
}
|
||||
}
|
||||
// 情况4 border<this.col&& row>0时 且row 为奇数事
|
||||
if(borderCol<this.col-2&&borderRow>0&&borderRow%2==1){
|
||||
borderRowRight=2*(Number(borderRow-1)+1);
|
||||
for(let i=0; i<borderRowRight; i++){
|
||||
if(i%4===0){
|
||||
borderSize=this.hexagonEdge*1.1
|
||||
if(i==0){
|
||||
borderSize=this.hexagonEdge*1.2
|
||||
}
|
||||
borderPoint=borderMove(borderPoint[0],borderPoint[1],borderSize,2,getHexagon(this.hexagonSvgID).svgPolyline);
|
||||
}else if(i%4===1){
|
||||
borderSize=this.hexagonEdge*1.2;
|
||||
borderPoint=borderMove(borderPoint[0],borderPoint[1],borderSize,3,getHexagon(this.hexagonSvgID).svgPolyline);
|
||||
}else if(i%4===2){
|
||||
borderSize=this.hexagonEdge*1.1;
|
||||
borderPoint=borderMove(borderPoint[0],borderPoint[1],borderSize,4,getHexagon(this.hexagonSvgID).svgPolyline);
|
||||
}else if(i%4===3){
|
||||
borderSize=this.hexagonEdge*1.03;
|
||||
if(i===borderRowRight-1){
|
||||
borderSize=this.hexagonEdge*1.1;
|
||||
}
|
||||
borderPoint=borderMove(borderPoint[0],borderPoint[1],borderSize,3,getHexagon(this.hexagonSvgID).svgPolyline);
|
||||
}
|
||||
}//向下移动
|
||||
borderSize=this.hexagonEdge*1.2
|
||||
for(let i=0; i<(this.col-borderCol-1)*2-1; i++){//向左移动
|
||||
if(i===1){
|
||||
borderSize=this.hexagonEdge*1.1
|
||||
}
|
||||
if(i==(this.col-borderCol-1)*2-2){
|
||||
borderSize=this.hexagonEdge
|
||||
}
|
||||
if(i%2===0){
|
||||
borderPoint=borderMove(borderPoint[0],borderPoint[1],borderSize,4,getHexagon(this.hexagonSvgID).svgPolyline);
|
||||
}else{
|
||||
borderPoint=borderMove(borderPoint[0],borderPoint[1],borderSize,5,getHexagon(this.hexagonSvgID).svgPolyline);
|
||||
}
|
||||
}
|
||||
borderSize=this.hexagonEdge*1.1
|
||||
borderPoint=borderMove(borderPoint[0],borderPoint[1],borderSize,3,getHexagon(this.hexagonSvgID).svgPolyline);
|
||||
}
|
||||
// 情况5 borderCol<this.col && row>0 且 row 为偶数事
|
||||
if(borderCol<this.col-1&&borderRow>0&&borderRow%2==0){
|
||||
borderRowRight=2*(Number(borderRow-1)+1)+1;
|
||||
for(let i=0; i<borderRowRight-1; i++){
|
||||
if(i%4===0){
|
||||
borderSize=this.hexagonEdge*1.1
|
||||
if(i==0){
|
||||
borderSize=this.hexagonEdge*1.2
|
||||
}
|
||||
borderPoint=borderMove(borderPoint[0],borderPoint[1],borderSize,2,getHexagon(this.hexagonSvgID).svgPolyline);
|
||||
}else if(i%4===1){
|
||||
borderSize=this.hexagonEdge*1.2;
|
||||
borderPoint=borderMove(borderPoint[0],borderPoint[1],borderSize,3,getHexagon(this.hexagonSvgID).svgPolyline);
|
||||
}else if(i%4===2){
|
||||
borderSize=this.hexagonEdge*1.1;
|
||||
borderPoint=borderMove(borderPoint[0],borderPoint[1],borderSize,4,getHexagon(this.hexagonSvgID).svgPolyline);
|
||||
}else if(i%4===3){
|
||||
borderSize=this.hexagonEdge*1.03;
|
||||
if(i===borderRowRight-2){
|
||||
borderSize=this.hexagonEdge*1.15;
|
||||
}
|
||||
borderPoint=borderMove(borderPoint[0],borderPoint[1],borderSize,3,getHexagon(this.hexagonSvgID).svgPolyline);
|
||||
}
|
||||
}
|
||||
borderSize=this.hexagonEdge*1.2
|
||||
for(let i=0; i<(this.col-borderCol-1)*2-1; i++){//向左移动
|
||||
if(i==1){
|
||||
borderSize=this.hexagonEdge*1.1
|
||||
}
|
||||
if(i==(this.col-borderCol-1)*2-2){
|
||||
borderSize=this.hexagonEdge*1
|
||||
}
|
||||
if(((Number(borderCol)+2)==this.col)&&(i==0)){
|
||||
borderSize=this.hexagonEdge*1.1
|
||||
}
|
||||
if(i%2===0){
|
||||
borderPoint=borderMove(borderPoint[0],borderPoint[1],borderSize,4,getHexagon(this.hexagonSvgID).svgPolyline);
|
||||
}else{
|
||||
borderPoint=borderMove(borderPoint[0],borderPoint[1],borderSize,5,getHexagon(this.hexagonSvgID).svgPolyline);
|
||||
}
|
||||
}
|
||||
borderSize=this.hexagonEdge*1.1
|
||||
borderPoint=borderMove(borderPoint[0],borderPoint[1],borderSize,3,getHexagon(this.hexagonSvgID).svgPolyline);
|
||||
}
|
||||
// 从右到左 就是结束时的列数
|
||||
borderSize=this.hexagonEdge*1.2
|
||||
for(let i=0; i<=borderCol*2+1; i++){
|
||||
if(i===1){
|
||||
// borderPoint = borderMove(borderPoint[0],borderPoint[1],borderSize,2,,getHexagon(this.hexagonSvgID).svgPolylinetrue);
|
||||
borderSize=this.hexagonEdge*1.1
|
||||
}
|
||||
if(i==borderCol*2+1){
|
||||
borderSize=this.hexagonEdge*1.2
|
||||
}
|
||||
if(i%2===0){
|
||||
borderPoint=borderMove(borderPoint[0],borderPoint[1],borderSize,4,getHexagon(this.hexagonSvgID).svgPolyline);
|
||||
}else{
|
||||
borderPoint=borderMove(borderPoint[0],borderPoint[1],borderSize,5,getHexagon(this.hexagonSvgID).svgPolyline);
|
||||
}
|
||||
}
|
||||
// 从下向上的移动
|
||||
// 分兩種情況
|
||||
borderSize=this.hexagonEdge*1.2;
|
||||
if(borderRow%2==1){
|
||||
for(let i=0; i<=borderRow*2; i++){
|
||||
if(i%4===0){
|
||||
borderSize=this.hexagonEdge*1.1;
|
||||
if(i!==0){
|
||||
borderSize=this.hexagonEdge*1.03;
|
||||
}
|
||||
borderPoint=borderMove(borderPoint[0],borderPoint[1],borderSize,6,getHexagon(this.hexagonSvgID).svgPolyline);
|
||||
}else if(i%4===1){
|
||||
borderSize=this.hexagonEdge*1.1;
|
||||
borderPoint=borderMove(borderPoint[0],borderPoint[1],borderSize,5,getHexagon(this.hexagonSvgID).svgPolyline);
|
||||
}else if(i%4===2){
|
||||
borderSize=this.hexagonEdge*1.2;
|
||||
borderPoint=borderMove(borderPoint[0],borderPoint[1],borderSize,6,getHexagon(this.hexagonSvgID).svgPolyline);
|
||||
}else if(i%4===3){
|
||||
borderSize=this.hexagonEdge*1.1;
|
||||
borderPoint=borderMove(borderPoint[0],borderPoint[1],borderSize,1,getHexagon(this.hexagonSvgID).svgPolyline);
|
||||
}
|
||||
}
|
||||
}
|
||||
if(borderRow%2==0){
|
||||
for(let i=0; i<=borderRow*2; i++){
|
||||
if(i%4===0){
|
||||
borderSize=this.hexagonEdge*1.2
|
||||
borderPoint=borderMove(borderPoint[0],borderPoint[1],borderSize,6,getHexagon(this.hexagonSvgID).svgPolyline);
|
||||
}else if(i%4===1){
|
||||
borderSize=this.hexagonEdge*1.1;
|
||||
borderPoint=borderMove(borderPoint[0],borderPoint[1],borderSize,1,getHexagon(this.hexagonSvgID).svgPolyline);
|
||||
}else if(i%4===2){
|
||||
borderSize=this.hexagonEdge*1.03;
|
||||
borderPoint=borderMove(borderPoint[0],borderPoint[1],borderSize,6,getHexagon(this.hexagonSvgID).svgPolyline);
|
||||
}else if(i%4===3){
|
||||
borderSize=this.hexagonEdge*1.1;
|
||||
borderPoint=borderMove(borderPoint[0],borderPoint[1],borderSize,5,getHexagon(this.hexagonSvgID).svgPolyline);
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
getHexagon(this.hexagonSvgID).svgPolyline.on('mouseover',PolylineOver)
|
||||
getHexagon(this.hexagonSvgID).svgPolyline.on('mouseout',PolylineOut)
|
||||
},
|
||||
clearData(){// 清除数据 以及解绑事件 防止内存崩溃
|
||||
if(getHexagon(this.hexagonSvgID)&&getHexagon(this.hexagonSvgID).hexagonSvg){
|
||||
this.allHexagon.forEach((item)=>{
|
||||
item.off('mouseover',this.hexagonOver);
|
||||
item.off('mouseout',this.hexagonOut);
|
||||
item.off('click',this.hexagonSvgScale);
|
||||
item.off('dbclick',this.hexagonSvgClearScale);
|
||||
item.clear();
|
||||
})
|
||||
this.allHexagon=[];
|
||||
this.hexagonData=[];
|
||||
getHexagon(this.hexagonSvgID).hexagonSvg.off('click',this.hexagonSvgClearScale);
|
||||
getHexagon(this.hexagonSvgID).hexagonSvg.off('panStart',this.hexagonSvgPanStart);
|
||||
getHexagon(this.hexagonSvgID).hexagonSvg.off('panEnd',this.hexagonSvgPanEnd);
|
||||
getHexagon(this.hexagonSvgID).hexagonSvg=null; //Svg的实例
|
||||
getHexagon(this.hexagonSvgID).svgPolyline=null;// Svg hexagon的边框
|
||||
delHexagon(this.hexagonSvgID)
|
||||
}
|
||||
},
|
||||
|
||||
},
|
||||
beforeDestroy(){
|
||||
this.clearData();
|
||||
if(getHexagon(this.hexagonSvgID)){
|
||||
getHexagon(this.hexagonSvgID).allHexagonRect=null;//文本框
|
||||
getHexagon(this.hexagonSvgID).allHexagonText=null;// 文本内容
|
||||
}
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
||||
<style scoped>
|
||||
.box-hexagon, #hexagonSvg {
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
position: relative;
|
||||
min-width: 200px;
|
||||
min-height: 200px;
|
||||
}
|
||||
|
||||
.hexagon-text {
|
||||
position: absolute;
|
||||
z-index: 1;
|
||||
font-size: 10px;
|
||||
}
|
||||
</style>
|
||||
<style>
|
||||
#SvgHex {
|
||||
transition: transform .25s linear;
|
||||
transform-origin: 0 0;
|
||||
}
|
||||
|
||||
#SvgHex.hexagonSvgBox {
|
||||
transition: .25s linear;
|
||||
}
|
||||
</style>
|
||||
@@ -25,7 +25,17 @@ export function getChart(key) {
|
||||
export function setChart(key, value) {
|
||||
chartCache[`chart${key}`] = value;
|
||||
}
|
||||
const hexagonCache = {};
|
||||
export function getHexagon(key) {
|
||||
return hexagonCache[`hexagon${key}`];
|
||||
}
|
||||
|
||||
export function setHexagon(key, value) {
|
||||
hexagonCache[`hexagon${key}`] = value;
|
||||
}
|
||||
export function delHexagon(key) {
|
||||
delete hexagonCache[`hexagon${key}`];
|
||||
}
|
||||
const mousePoint={ //在echart tooltip中获取不到鼠标在窗口的位置，在火狐没有window。event 在此兼容火狐 获取鼠标在窗口位置
|
||||
x:'',
|
||||
y:''
|
||||
|
||||
@@ -14,7 +14,7 @@ export const clickoutside = {
|
||||
let path = e.path || (e.composedPath && e.composedPath());
|
||||
top: for (let i = 0; i < path.length; i++) {
|
||||
for (let j = 0; j < exceptClassName.length; j++) {
|
||||
if (path[i].className && path[i].className.indexOf(exceptClassName[j]) != -1) {
|
||||
if (path[i].className && path[i].className.indexOf && path[i].className.indexOf(exceptClassName[j]) != -1) {
|
||||
flag = false;
|
||||
break top;
|
||||
}
|
||||
@@ -614,3 +614,9 @@ export const tableSet = {
|
||||
export function blankPromise() {
|
||||
return new Promise(resolve => {resolve();});
|
||||
}
|
||||
|
||||
export function clickLegend(echart,legendName,index){
|
||||
if(echart){
|
||||
|
||||
}
|
||||
}
|
||||
|
||||
@@ -329,12 +329,12 @@ const cn = {
|
||||
ruleNum: "告警规则总数",
|
||||
alertNum: "告警数量",
|
||||
alertRuleTopN: "根据告警规则统计告警消息数量TOP10",
|
||||
assetTopN: "根据资产统计告警消息数量TOP10",
|
||||
assetTopN: "根据资产统计告警消息数量TOP",
|
||||
top: "Top",
|
||||
chart: {
|
||||
chartTitle: "告警趋势"
|
||||
},
|
||||
moduleTopN: "根据模块列出Top10告警信息"
|
||||
moduleTopN: "根据模块列出Top告警信息"
|
||||
},
|
||||
mapTooltip: {
|
||||
asset: "资产",
|
||||
|
||||
@@ -335,8 +335,8 @@ const en = {
|
||||
ruleNum:'Rule num',
|
||||
alertNum:'Alert num',
|
||||
alertRuleTopN: 'Top10 alert message',
|
||||
assetTopN: 'Top10 alert message by Asset',
|
||||
moduleTopN: 'Top10 alert message by Module',
|
||||
assetTopN: 'Top alert message by Asset',
|
||||
moduleTopN: 'Top alert message by Module',
|
||||
top:'Top',
|
||||
chart:{
|
||||
chartTitle:'Alert Trend'
|
||||
|
||||
@@ -25,6 +25,9 @@
|
||||
<i v-if="lang != 'cn'" @click="changeLang('cn')" class="nz-icon nz-icon-lang-zh"></i>
|
||||
</div>
|
||||
</div>
|
||||
<div class="login-foot-buildOn">
|
||||
<span><a target="_blank" rel="noopener norefferrer" href='https://prometheus.io'>@build on prometheus</a></span>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
@@ -225,6 +228,15 @@ export default {
|
||||
left: 50%;
|
||||
transform: translateX(-50%);
|
||||
}
|
||||
.login-foot-buildOn{
|
||||
width: 460px;
|
||||
text-align: center;
|
||||
padding-top: 45px;
|
||||
a{
|
||||
color: white;
|
||||
text-decoration: none;
|
||||
}
|
||||
}
|
||||
.nz-icon-arrow-down, .nz-icon-arrow-up {
|
||||
position: absolute;
|
||||
font-size: 18px;
|
||||
|
||||
189
nezha-fronted/src/components/common/overView/messageAsset.vue
Normal file
189
nezha-fronted/src/components/common/overView/messageAsset.vue
Normal file
@@ -0,0 +1,189 @@
|
||||
<template>
|
||||
<div style="width: 100%;height: 100%" v-loading="loading">
|
||||
<hexagonBox
|
||||
:hexData="data"
|
||||
:col="col"
|
||||
:length="length"
|
||||
:colorFrom="'level'"
|
||||
:colorSet="colorSet"
|
||||
:infoSet="infoSet"
|
||||
:infoShow="infoShow"
|
||||
:infoHide="infoHide"
|
||||
:hexagonEdge="hexagonEdge"
|
||||
:from="from"
|
||||
:hexagonSvgID="hexagonSvgID"
|
||||
/>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import hexagonBox from '../honeycomb/hexagonFigureSvg'
|
||||
function textMouseDown(e){
|
||||
window.event? window.event.cancelBubble = true : e.stopPropagation();
|
||||
}
|
||||
function textMouseEnter(e){
|
||||
window.event? window.event.cancelBubble = true : e.stopPropagation();
|
||||
}
|
||||
function textMouseLeave(e){
|
||||
window.event? window.event.cancelBubble = true : e.stopPropagation();
|
||||
}
|
||||
export default {
|
||||
name:"messageAsset",
|
||||
components:{
|
||||
hexagonBox
|
||||
},
|
||||
props:{
|
||||
data:{},
|
||||
col:{},
|
||||
length:{},
|
||||
from:{},
|
||||
hexagonSvgID:{
|
||||
type:String,
|
||||
default:'hexagonSvg'
|
||||
}
|
||||
},
|
||||
watch:{
|
||||
data:{
|
||||
immediate: false,
|
||||
deep: true,
|
||||
handler() {
|
||||
}
|
||||
},
|
||||
col:{
|
||||
immediate: false,
|
||||
deep: true,
|
||||
handler() {
|
||||
}
|
||||
},
|
||||
length:{
|
||||
immediate: false,
|
||||
deep: true,
|
||||
handler() {
|
||||
}
|
||||
},
|
||||
|
||||
},
|
||||
data(){
|
||||
return{
|
||||
hexagonEdge:90,
|
||||
loading:true,
|
||||
}
|
||||
},
|
||||
methods:{
|
||||
colorSet(item){//设置方块颜色
|
||||
// let color = item.level==='P1'?'#FAAFAF':(item.level==='P2'?'#FFCF92':'#99D7C2');
|
||||
// let color = level ==='P1'?'#FAAFAF':(level==='P2'?'#FFCF92':'#99D7C2');
|
||||
let alert=item.alert[0];
|
||||
if(alert.P1>0){
|
||||
return{
|
||||
color:'#FAAFAF',
|
||||
hoverColor:'#FFCDCD',
|
||||
};
|
||||
} else if(alert.P2>0){
|
||||
return{
|
||||
color:'#FFAB99',
|
||||
hoverColor:'#FABEB2',
|
||||
};
|
||||
} else if(alert.P3>0){
|
||||
return{
|
||||
color:'#FFCF92',
|
||||
hoverColor:'#FFE0B8',
|
||||
};
|
||||
}else{
|
||||
return{ color:'#99D7C2',hoverColor:'#B2ECD9'}
|
||||
}
|
||||
},
|
||||
infoSet(group,allHexagonRect,allHexagonText,data,item,that){
|
||||
// 设置内部文本
|
||||
// group 对应六边形所在的组。allHexagonRect吧所有文本框放入，方便控制显示隐藏。data 六边形的相关数 data.center 中心点。that 子组件实例
|
||||
let rgbColor='0,0,0';
|
||||
let str='';
|
||||
let rect0=group.rect(that.hexagonEdge+20, that.hexagonEdge/4)
|
||||
.attr({
|
||||
x: data.center[0]-that.hexagonEdge/2-10,
|
||||
y: data.center[1]-that.hexagonEdge
|
||||
}).fill({ color: `rgba(${rgbColor},0)`}).data({color:rgbColor});
|
||||
str=this.from==='asset'?item.host:item.module;
|
||||
str+='';
|
||||
let text0=group.text(str).attr({
|
||||
x: data.center[0]-(str.length*3.5),
|
||||
y: data.center[1]-that.hexagonEdge,
|
||||
})
|
||||
.font({size:14}).fill({opacity:0,color:'#fff',weight:600}).hide();
|
||||
allHexagonRect.push(rect0);
|
||||
allHexagonText.push(text0);
|
||||
text0.on('mousedown',textMouseDown);
|
||||
|
||||
|
||||
let rect1=group.rect(that.hexagonEdge+20, that.hexagonEdge/3)
|
||||
.attr({
|
||||
x: data.center[0]-that.hexagonEdge/2-10,
|
||||
y: data.center[1]-that.hexagonEdge/2-7.5
|
||||
}).fill({ color: `rgba(${rgbColor},0)`}).data({color:rgbColor});
|
||||
str="P1 : "+item.alert[0].P1
|
||||
let text1=group.text(str).attr({
|
||||
x: data.center[0]-(str.length*3.5),
|
||||
y: data.center[1]-that.hexagonEdge/2-7.5+3})
|
||||
.font({size:14}).fill({opacity:0,color:'#fff',weight:600}).hide();
|
||||
allHexagonRect.push(rect1);
|
||||
allHexagonText.push(text1);
|
||||
|
||||
|
||||
let rect2=group.rect(that.hexagonEdge+20, that.hexagonEdge/3).attr({
|
||||
x: data.center[0]-that.hexagonEdge/2-10,
|
||||
y: data.center[1]-that.hexagonEdge/2 + that.hexagonEdge/3 +5-7.5+3
|
||||
}).fill({ color: `rgba(${rgbColor},0)`}).data({color:rgbColor});
|
||||
str="P2 : "+item.alert[0].P2
|
||||
let text2=group.text(str).attr({
|
||||
x: data.center[0]-(str.length*3.5),
|
||||
y: data.center[1]-that.hexagonEdge/2 + that.hexagonEdge/3 +5-7.5+3})
|
||||
.font({size:14}).fill({opacity:0,color:'#fff',weight:600}).hide();
|
||||
allHexagonRect.push(rect2);
|
||||
allHexagonText.push(text2);
|
||||
|
||||
|
||||
let rect3=group.rect(that.hexagonEdge+20, that.hexagonEdge/3)
|
||||
.attr({
|
||||
x: data.center[0]-that.hexagonEdge/2-10,
|
||||
y: data.center[1]-that.hexagonEdge/2+ that.hexagonEdge/3*2 + 10-7.5+3
|
||||
}).fill({ color: `rgba(${rgbColor},0)`}).data({color:rgbColor});
|
||||
str="P3 : "+item.alert[0].P3;
|
||||
let text3=group.text(str).attr({
|
||||
x: data.center[0]-(str.length*3.5),
|
||||
y: data.center[1]-that.hexagonEdge/2+ that.hexagonEdge/3*2 + 10-7.5+3+3})
|
||||
.font({size:14}).fill({opacity:0,color:'#fff',weight:600}).hide();
|
||||
allHexagonRect.push(rect3);
|
||||
allHexagonText.push(text3);
|
||||
|
||||
},
|
||||
infoShow(allHexagonRect,allHexagonText){
|
||||
allHexagonRect.forEach(item=>{
|
||||
let rgbColor = item.data('color')
|
||||
item.fill({ color: `rgba(${rgbColor},0.2)`})
|
||||
})
|
||||
allHexagonText.forEach(item=>{
|
||||
item.fill({ opacity:1}).show()
|
||||
});
|
||||
},
|
||||
infoHide(allHexagonRect,allHexagonText){
|
||||
allHexagonRect.forEach(item=>{
|
||||
let rgbColor = item.data('color')
|
||||
item.fill({ color: `rgba(${rgbColor},0)`})
|
||||
});
|
||||
allHexagonText.forEach(item=>{
|
||||
item.fill({ opacity:0}).hide()
|
||||
});
|
||||
},
|
||||
endLoading(){
|
||||
this.loading=false;
|
||||
},
|
||||
startLoading(){
|
||||
this.loading=true;
|
||||
}
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
||||
<style scoped>
|
||||
|
||||
</style>
|
||||
@@ -279,6 +279,24 @@
|
||||
}
|
||||
},
|
||||
clickLegend(legendName,index){
|
||||
let curIsGrey=this.isGrey[index];
|
||||
let echart = getChart(this.chartIndex)
|
||||
if(echart){
|
||||
if(curIsGrey){
|
||||
echart.dispatchAction({
|
||||
type: 'legendSelect',
|
||||
name: legendName
|
||||
});
|
||||
}else{
|
||||
echart.dispatchAction({
|
||||
type: 'legendUnSelect',
|
||||
name: legendName
|
||||
});
|
||||
}
|
||||
this.$set(this.isGrey,index,!curIsGrey)
|
||||
}
|
||||
},
|
||||
clickLegend2(legendName,index){
|
||||
//点击图表某一个legend，图表只显示当前点击的曲线或柱状图，其它隐藏，再次点击已选中的legend ，显示全部
|
||||
let curIsGrey=this.isGrey[index];
|
||||
if(getChart(this.chartIndex)){
|
||||
@@ -326,6 +344,23 @@
|
||||
}
|
||||
},
|
||||
clickScreenLegend(legendName,index){
|
||||
let curIsGrey=this.isGreyScreen[index];
|
||||
if(this.echartModalStore) {
|
||||
if(curIsGrey){
|
||||
this.echartModalStore.dispatchAction({
|
||||
type: 'legendSelect',
|
||||
name: legendName
|
||||
})
|
||||
}else{
|
||||
this.echartModalStore.dispatchAction({
|
||||
type: 'legendUnSelect',
|
||||
name: legendName
|
||||
})
|
||||
}
|
||||
this.$set(this.isGreyScreen,index,!curIsGrey)
|
||||
}
|
||||
},
|
||||
clickScreenLegend2(legendName,index){
|
||||
//点击图表某一个legend，图表只显示当前点击的曲线或柱状图，其它隐藏，再次点击已选中的legend ，显示全部
|
||||
let curIsGrey=this.isGreyScreen[index];
|
||||
if(this.echartModalStore){
|
||||
|
||||
@@ -36,7 +36,7 @@
|
||||
<div v-for="item in popData">
|
||||
<transition name="scaleTool">
|
||||
<i v-if="networkPopShow"
|
||||
:class="{'nz-icon':true,'nz-icon-hexagonBorder':true,'selpop':selpopIs(item),'error-model-stat':modelPopError(item)}"
|
||||
:class="{'nz-icon':true,'nz-icon-hexagonBorder':true,'selpop':selpopIs(item),'no-selPop':!selpopIs(item),'error-model-stat':modelPopError(item)}"
|
||||
:style="{top:item.top,left:item.left}"
|
||||
@click="popClick(item.id)"
|
||||
:title="item.title"
|
||||
@@ -1144,6 +1144,15 @@
|
||||
transform: scale(1.1);
|
||||
color: #EC7F66;
|
||||
}
|
||||
.network-pop .no-selPop{
|
||||
color: #666;
|
||||
}
|
||||
.network-pop .no-selPop .nz-icon-liubianxing{
|
||||
color: rgba(102,102,102,0.5);
|
||||
}
|
||||
.network-pop .no-selPop .nz-icon-chart{
|
||||
color: #666;
|
||||
}
|
||||
/*.network-pop .nz-icon-hexagonBorder.error-model-stat:hover{*/
|
||||
/*color: #EC7F66;*/
|
||||
/*}*/
|
||||
|
||||
@@ -445,7 +445,7 @@
|
||||
margin-left: 30px;
|
||||
}
|
||||
.facade-top .facade-top-right{
|
||||
width: 5%;
|
||||
width: auto;
|
||||
min-width: 100px;
|
||||
}
|
||||
.facade-top-right-content{
|
||||
|
||||
@@ -153,13 +153,14 @@
|
||||
dropDownVisible:function(n,o){
|
||||
if (this.styleType == 1) {
|
||||
if (n) {
|
||||
this.metricOptions = this.$parent.$parent.getMetricOptions();
|
||||
this.metricOptions = this.$parent.getMetricOptions();
|
||||
} else {
|
||||
this.metricOptions = [];
|
||||
}
|
||||
} else if (this.styleType == 2) {
|
||||
if (n) {
|
||||
this.metricOptions = this.$parent.$parent.$parent.$parent.getMetricOptions();
|
||||
console.log(this.$parent.$parent)
|
||||
this.metricOptions = this.$parent.$parent.$parent.getMetricOptions();
|
||||
} else {
|
||||
this.metricOptions = [];
|
||||
}
|
||||
|
||||
@@ -247,6 +247,23 @@
|
||||
return color;
|
||||
},
|
||||
clickLegend(legendName,index){
|
||||
let curIsGrey=this.legend[index].isGray;
|
||||
if(this.chart){
|
||||
if(curIsGrey){
|
||||
this.chart.dispatchAction({
|
||||
type: 'legendSelect',
|
||||
name: legendName
|
||||
});
|
||||
}else{
|
||||
this.chart.dispatchAction({
|
||||
type: 'legendUnSelect',
|
||||
name: legendName
|
||||
});
|
||||
}
|
||||
this.$set(this.legend,index,!curIsGrey)
|
||||
}
|
||||
},
|
||||
clickLegend2(legendName,index){
|
||||
let curIsGrey=this.legend[index].isGray;
|
||||
if(this.chart){
|
||||
this.legend.forEach((item,i)=>{
|
||||
|
||||
@@ -30,8 +30,8 @@
|
||||
<div class="content-col-content-num">
|
||||
<vue-countup :decimals="(assetData ? assetData.totalStat.total : 0) < 1000 ? 0 : 1" :duration="1" :end-value="(assetData ? assetData.totalStat.total : '') | numberFormat"
|
||||
:start-value="0"></vue-countup>
|
||||
<span class="over-num" v-if="(assetData ? assetData.totalStat.total : 0) > 1000 ">+</span>
|
||||
<span class="overview-row-unit">{{(assetData ? assetData.totalStat.total : '') | unitFormat}}</span>
|
||||
<span class="over-num" v-if="(assetData ? assetData.totalStat.total : 0) > 1000 ">+</span>
|
||||
</div>
|
||||
</el-tooltip>
|
||||
<div class="content-col-content-title">{{$t("dashboard.overview.asset.title")}}</div>
|
||||
@@ -45,8 +45,8 @@
|
||||
<el-tooltip :content="projectData ? projectData.projectStat.length + '' : ''" class="item" effect="light" placement="top">
|
||||
<div class="content-col-content-num">
|
||||
<vue-countup :decimals="(projectData ? projectData.projectStat.length : 0) < 1000 ? 0 : 1" :duration="1" :end-value="(projectData ? projectData.projectStat.length : '') | numberFormat" :start-value="0"></vue-countup>
|
||||
<span class="over-num" v-if="(projectData ? projectData.projectStat.length : 0) > 1000 ">+</span>
|
||||
<span class="overview-row-unit">{{(projectData ? projectData.projectStat.length : '') | unitFormat}}</span>
|
||||
<span class="over-num" v-if="(projectData ? projectData.projectStat.length : 0) > 1000 ">+</span>
|
||||
</div>
|
||||
</el-tooltip>
|
||||
<div class="content-col-content-title">{{$t("dashboard.overview.project.project")}}</div>
|
||||
@@ -60,8 +60,8 @@
|
||||
<el-tooltip :content="moduleData ? moduleData.moduleStat.length + '' : ''" class="item" effect="light" placement="top">
|
||||
<div class="content-col-content-num">
|
||||
<vue-countup :decimals="(moduleData ? moduleData.moduleStat.length : 0) < 1000 ? 0 : 1" :duration="1" :end-value="(moduleData ? moduleData.moduleStat.length : '') | numberFormat" :start-value="0"></vue-countup>
|
||||
<span class="over-num" v-if="(moduleData ? moduleData.moduleStat.length : 0) > 1000 ">+</span>
|
||||
<span class="overview-row-unit">{{(moduleData ? moduleData.moduleStat.length : '') | unitFormat}}</span>
|
||||
<span class="over-num" v-if="(moduleData ? moduleData.moduleStat.length : 0) > 1000 ">+</span>
|
||||
</div>
|
||||
</el-tooltip>
|
||||
<div class="content-col-content-title">{{$t("dashboard.overview.module.module")}}</div>
|
||||
@@ -75,8 +75,8 @@
|
||||
<el-tooltip :content="endpointData ? endpointData.total + '' : ''" class="item" effect="light" placement="top">
|
||||
<div class="content-col-content-num">
|
||||
<vue-countup :decimals="(endpointData ? endpointData.total : 0) < 1000 ? 0 : 1" :duration="1" :end-value="(endpointData ? endpointData.total : '') | numberFormat" :start-value="0"></vue-countup>
|
||||
<span class="over-num" v-if="(endpointData ? endpointData.total : 0) > 1000 ">+</span>
|
||||
<span class="overview-row-unit">{{(endpointData ? endpointData.total : '') | unitFormat}}</span>
|
||||
<span class="over-num" v-if="(endpointData ? endpointData.total : 0) > 1000 ">+</span>
|
||||
</div>
|
||||
</el-tooltip>
|
||||
<div class="content-col-content-title">{{$t("dashboard.overview.endpoint.endpoint")}}</div>
|
||||
@@ -90,8 +90,8 @@
|
||||
<el-tooltip :content="alertMessageData ? alertMessageData.alertMessageTotal + '' : ''" class="item" effect="light" placement="top">
|
||||
<div class="content-col-content-num">
|
||||
<vue-countup :decimals="(alertMessageData ? alertMessageData.alertMessageTotal : 0) < 1000 ? 0 : 1" :duration="1" :end-value="(alertMessageData ? alertMessageData.alertMessageTotal : '') | numberFormat" :start-value="0"></vue-countup>
|
||||
<span class="over-num" v-if="(alertMessageData ? alertMessageData.alertMessageTotal : 0) > 1000 ">+</span>
|
||||
<span class="overview-row-unit">{{(alertMessageData ? alertMessageData.alertMessageTotal : '') | unitFormat}}</span>
|
||||
<span class="over-num" v-if="(alertMessageData ? alertMessageData.alertMessageTotal : 0) > 1000 ">+</span>
|
||||
</div>
|
||||
</el-tooltip>
|
||||
<div class="content-col-content-title">{{$t("overall.alert")}}</div>
|
||||
@@ -188,16 +188,19 @@
|
||||
</span>-->
|
||||
</span>
|
||||
</div>
|
||||
<div class="content-col-content">
|
||||
<chart-box axis-tooltip="y" v-show="alertMessageShow == 'asset'" :tooltip-formatter="simpleFormatter" chart-type="ruleBar" ref="assetMessage" name="assetMessage" :show-toolbox="false" @is-loading="(isLoading)=>{this.assetMessageLoading = isLoading}"></chart-box>
|
||||
<chart-box axis-tooltip="y" v-show="alertMessageShow == 'module'" :tooltip-formatter="simpleFormatter" chart-type="bar" ref="moduleMessage" name="moduleMessage" :show-toolbox="false" @is-loading="(isLoading)=>{this.moduleMessageLoading = isLoading}"></chart-box>
|
||||
<div class="chart-no-data" v-if="!alertMessageLoading && ((!messageByAssetSeries.data && !messageByAssetSeries.category) || (messageByAssetSeries.data.length == 0 && messageByAssetSeries.category.length == 0))">No Data</div>
|
||||
<div class="content-col-content" style="overflow: hidden">
|
||||
<!--<chart-box axis-tooltip="y" v-show="alertMessageShow == 'asset'" :tooltip-formatter="simpleFormatter" chart-type="ruleBar" ref="assetMessage" name="assetMessage" :show-toolbox="false" @is-loading="(isLoading)=>{this.assetMessageLoading = isLoading}"></chart-box>-->
|
||||
<!--<chart-box axis-tooltip="y" v-show="alertMessageShow == 'module'" :tooltip-formatter="simpleFormatter" chart-type="bar" ref="moduleMessage" name="moduleMessage" :show-toolbox="false" @is-loading="(isLoading)=>{this.moduleMessageLoading = isLoading}"></chart-box>-->
|
||||
<messageAsset v-show="messageAssetData.length>0" :data="messageAssetData" :col="col" :length="length" ref="assetHexagon" :from="'asset'"/>
|
||||
<div class="chart-no-data" v-if="messageAssetData.length===0">No Data</div>
|
||||
</div>
|
||||
</div>
|
||||
<!--第三个图-->
|
||||
<div class="content-col-box">
|
||||
<div class="content-col-title">
|
||||
<span>{{$t("dashboard.overview.alert.alertRuleTopN")}}</span>
|
||||
<span>{{$t("dashboard.overview.alert.moduleTopN")}}</span>
|
||||
<!--<span> <el-input v-model="col" size="small"/></span>-->
|
||||
<!--<span> <el-input v-model="length" size="small"/></span>-->
|
||||
<!--<el-dropdown trigger="hover" :show-timeout="0" size="small">
|
||||
<span>Top {{topFilter.rule}}<i class="nz-icon nz-icon-arrow-down el-icon--right"></i></span>
|
||||
<el-dropdown-menu slot="dropdown">
|
||||
@@ -205,10 +208,11 @@
|
||||
</el-dropdown-menu>
|
||||
</el-dropdown>-->
|
||||
</div>
|
||||
<div class="content-col-content">
|
||||
<chart-box axis-tooltip="y" chart-type="ruleBar" ref="ruleMessage" :tooltip-formatter="simpleFormatter" :show-toolbox="false" name="ruleMessage" @is-loading="(isLoading)=>{this.ruleMessageLoading = isLoading}"></chart-box>
|
||||
<div class="content-col-content" style="overflow: hidden">
|
||||
<!--<chart-box axis-tooltip="y" chart-type="ruleBar" ref="ruleMessage" :tooltip-formatter="simpleFormatter" :show-toolbox="false" name="ruleMessage" @is-loading="(isLoading)=>{this.ruleMessageLoading = isLoading}"></chart-box>-->
|
||||
<!-- <div class="no-data-tip" v-if="!ruleMessageLoading && ((!messageByRuleSeries.data && !messageByRuleSeries.category) || (messageByRuleSeries.data.length == 0 && messageByRuleSeries.category.length == 0))">N/A</div>-->
|
||||
<div class="chart-no-data" v-if="!ruleMessageLoading && ((!messageByRuleSeries.data && !messageByRuleSeries.category) || (messageByRuleSeries.data.length == 0 && messageByRuleSeries.category.length == 0))">No Data</div>
|
||||
<messageAsset v-show="messageModuleData.length>0" :data="messageModuleData" :col="col" :length="length" ref="moduleHexagon" :from="'module'" :hexagonSvgID="'hexagonSvg2'"/>
|
||||
<div class="chart-no-data" v-if="messageModuleData.length===0">No Data</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
@@ -235,7 +239,7 @@
|
||||
import echarts from "echarts";
|
||||
import chartConfig from './chartConfig'
|
||||
import overViewTopology from '../../../common/project/overViewTopology'
|
||||
|
||||
import messageAsset from '../../../common/overView/messageAsset'
|
||||
var timeout; //第三行第三个图的dropdown下拉菜单timeout
|
||||
|
||||
|
||||
@@ -249,7 +253,8 @@
|
||||
'chart-box': chart,
|
||||
'time-picker': timePicker,
|
||||
'vue-countup': VueCountUp,
|
||||
'topology':overViewTopology
|
||||
'topology':overViewTopology,
|
||||
messageAsset,
|
||||
},
|
||||
data() {
|
||||
return {
|
||||
@@ -298,8 +303,8 @@
|
||||
topFilter:{
|
||||
optionals: [10, 20, 50],
|
||||
rule: 10,
|
||||
asset: 10,
|
||||
module: 10
|
||||
asset: 48,
|
||||
module: 48
|
||||
},
|
||||
system_server_time:null,
|
||||
freshDateTimer:null,
|
||||
@@ -310,6 +315,10 @@
|
||||
y: 0
|
||||
},
|
||||
searchTime:bus.getTimezontDateRange(),
|
||||
messageAssetData:[],
|
||||
col:10,
|
||||
length:9,
|
||||
messageModuleData:[],
|
||||
}
|
||||
},
|
||||
filters: {
|
||||
@@ -378,8 +387,9 @@
|
||||
this.queryAlertRuleData(),
|
||||
// this.queryAlertTrendData(),
|
||||
this.initMap(),
|
||||
this.queryAlertStatByRule(),
|
||||
this.queryAlertStatByAsset(),
|
||||
this.queryAlertStatByRule(),//3-3
|
||||
this.queryAlertStatByAsset(),//3-2 新的也是这个 3-2
|
||||
this.queryAlertStatByModule(),// 新的3-3
|
||||
this.getDcTrafficData(),
|
||||
this.queryAllProjectData(),
|
||||
]
|
||||
@@ -1143,7 +1153,7 @@
|
||||
queryAlertStatByRule() {
|
||||
return new Promise(resolve=>{
|
||||
|
||||
this.$refs.ruleMessage.startLoading();
|
||||
// this.$refs.ruleMessage.startLoading();
|
||||
this.$get('overview/alertStatByRule', {top: this.topFilter.rule}).then(response => {
|
||||
if (response.code === 200) {
|
||||
let seriesData = [];
|
||||
@@ -1169,9 +1179,9 @@
|
||||
},
|
||||
category: categoryData, //自定义，用来判断N/A是否显示
|
||||
};
|
||||
this.$refs.ruleMessage.modifyOption('yAxis', 'data', categoryData);
|
||||
this.$refs.ruleMessage.setSeries(this.messageByRuleSeries);
|
||||
this.$refs.ruleMessage.endLoading();
|
||||
// this.$refs.ruleMessage.modifyOption('yAxis', 'data', categoryData);
|
||||
// this.$refs.ruleMessage.setSeries(this.messageByRuleSeries);
|
||||
// this.$refs.ruleMessage.endLoading();
|
||||
}
|
||||
resolve()
|
||||
});
|
||||
@@ -1180,35 +1190,11 @@
|
||||
queryAlertStatByAsset() {
|
||||
return new Promise(resolve => {
|
||||
|
||||
this.$refs.assetMessage.startLoading();
|
||||
this.$refs.assetHexagon.startLoading();
|
||||
this.$get('overview/alertStatByAsset', {top: this.topFilter.asset}).then(response => {
|
||||
if (response.code === 200) {
|
||||
let seriesData = [];
|
||||
let categoryData = [];
|
||||
response.data.list.forEach(item => {
|
||||
seriesData.splice(0, 0, item.nums);
|
||||
categoryData.splice(0, 0, item.host);
|
||||
});
|
||||
this.messageByAssetSeries = {
|
||||
name: 'alertStatByAsset',
|
||||
data: seriesData,
|
||||
type: 'bar',
|
||||
barMaxWidth: 15,
|
||||
category: categoryData,
|
||||
itemStyle: {
|
||||
color: function(params) {
|
||||
let colorList = ["#FAd4ab", "#d0e8d0"];;
|
||||
if(params.dataIndex % 2 == 0){
|
||||
return colorList[0]
|
||||
}else{
|
||||
return colorList[1]
|
||||
}
|
||||
},
|
||||
},
|
||||
};
|
||||
this.$refs.assetMessage.modifyOption('yAxis', 'data', categoryData);
|
||||
this.$refs.assetMessage.setSeries(this.messageByAssetSeries);
|
||||
this.$refs.assetMessage.endLoading();
|
||||
this.messageAssetData= response.data.list;
|
||||
this.$refs.assetHexagon.endLoading();
|
||||
}
|
||||
resolve();
|
||||
});
|
||||
@@ -1217,25 +1203,11 @@
|
||||
queryAlertStatByModule() {
|
||||
return new Promise(resolve => {
|
||||
|
||||
this.$refs.moduleMessage.startLoading();
|
||||
this.$refs.moduleHexagon.startLoading();
|
||||
this.$get('overview/alertStatByModule', {top: this.topFilter.module}).then(response => {
|
||||
if (response.code === 200) {
|
||||
let seriesData = [];
|
||||
let categoryData = [];
|
||||
response.data.list.forEach(item => {
|
||||
seriesData.splice(0, 0, item.nums);
|
||||
categoryData.splice(0, 0, item.module);
|
||||
});
|
||||
this.messageByModuleSeries = {
|
||||
name: 'alertStatByModule',
|
||||
data: seriesData,
|
||||
type: 'bar',
|
||||
barMaxWidth: 30,
|
||||
category: categoryData
|
||||
};
|
||||
this.$refs.moduleMessage.modifyOption('xAxis', 'data', categoryData);
|
||||
this.$refs.moduleMessage.setSeries(this.messageByModuleSeries);
|
||||
this.$refs.moduleMessage.endLoading();
|
||||
this.messageModuleData=response.data.list;
|
||||
this.$refs.moduleHexagon.endLoading();
|
||||
}
|
||||
resolve();
|
||||
});
|
||||
@@ -1617,7 +1589,7 @@
|
||||
watch: {
|
||||
"trendSearchParam.select": function(n, o) {
|
||||
this.queryAlertTrendData();
|
||||
}
|
||||
},
|
||||
},
|
||||
mounted() {
|
||||
this.initData();
|
||||
|
||||
@@ -67,6 +67,7 @@
|
||||
export: 'panel_chart_export'
|
||||
}"
|
||||
@afterImport="dateChange"
|
||||
class="margin-r-20"
|
||||
>
|
||||
<template slot="optionZone">
|
||||
<button :title="$t('overall.createChart')" @click="addChart" v-has="'panel_chart_toAdd'"
|
||||
@@ -75,13 +76,16 @@
|
||||
</button>
|
||||
</template>
|
||||
</export-excel>
|
||||
<div class="relative-position ">
|
||||
<button type="button" class="nz-btn nz-btn-size-normal nz-btn-style-light " @click="panelLock=!panelLock"><i :class="{'nz-icon nz-icon-lock':panelLock,'nz-icon nz-icon-unlock':!panelLock}"></i></button>
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
</div>
|
||||
<div class="table-list" id="tableList">
|
||||
<div ref="dashboardScrollbar" style="height: 100%; overflow: auto;">
|
||||
<div class="box-content">
|
||||
<chart-list :from="$CONSTANTS.fromRoute.panel" @on-edit-chart="editChart" @on-refresh-time="refreshTime" @on-remove-chart="delChart" ref="chartList"></chart-list>
|
||||
<chart-list :from="$CONSTANTS.fromRoute.panel" @on-edit-chart="editChart" @on-refresh-time="refreshTime" @on-remove-chart="delChart" ref="chartList" :panel-lock="panelLock"></chart-list>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
@@ -108,6 +112,7 @@
|
||||
name: "panel",
|
||||
data() {
|
||||
return {
|
||||
panelLock:true,
|
||||
showTopBtn: false, //top按钮
|
||||
visible: false,
|
||||
rightBox: { //面板弹出框相关
|
||||
|
||||
@@ -66,7 +66,7 @@ export default new Vue({
|
||||
}
|
||||
return `${yy}${mm}${dd}`;
|
||||
},
|
||||
timeFormate(date, fmt) {
|
||||
timeFormate(date, fmt='yyyy-MM-dd hh:mm:ss') {
|
||||
const time = new Date(date);
|
||||
let fm = fmt;
|
||||
// fmt 自定义格式,如：yy-MM-dd
|
||||
|
||||
Reference in New Issue
Block a user