diff --git a/vue/package.json b/vue/package.json index a5bf5612..8ddbbb4c 100644 --- a/vue/package.json +++ b/vue/package.json @@ -51,7 +51,6 @@ "jsencrypt": "3.2.1", "jshint": "^2.13.4", "jsonlint": "^1.6.3", - "less-loader": "^10.2.0", "mqtt": "^4.3.3", "nprogress": "0.2.0", "quill": "^1.3.7", @@ -69,7 +68,11 @@ "vue-qr": "^4.0.9", "vue-router": "3.4.9", "vuedraggable": "2.24.3", - "vuex": "3.6.0" + "vuex": "3.6.0", + + "@jiaminghi/data-view": "^2.10.0", + "vue-easytable": "^2.14.0", + "vue-seamless-scroll": "^1.1.23" }, "devDependencies": { "@vue/cli-plugin-babel": "4.4.6", @@ -86,7 +89,8 @@ "sass-loader": "10.1.1", "script-ext-html-webpack-plugin": "2.1.5", "svg-sprite-loader": "5.1.1", - "vue-template-compiler": "2.6.12" + "vue-template-compiler": "2.6.12", + "mockjs": "^1.1.0" }, "engines": { "node": ">=8.9", diff --git a/vue/public/index.html b/vue/public/index.html index 1815b4e3..fc5fe2b9 100644 --- a/vue/public/index.html +++ b/vue/public/index.html @@ -6,6 +6,7 @@ + <%= webpackConfig.name %> diff --git a/vue/src/views/bigScreen/components/echart/theme.json b/vue/src/views/bigScreen/components/echart/theme.json new file mode 100644 index 00000000..ce81abab --- /dev/null +++ b/vue/src/views/bigScreen/components/echart/theme.json @@ -0,0 +1,490 @@ +{ + "color": [ + "#2d8cf0", + "#19be6b", + "#ff9900", + "#E46CBB", + "#9A66E4", + "#ed3f14" + ], + "backgroundColor": "rgba(0,0,0,0)", + "textStyle": {}, + "title": { + "textStyle": { + "color": "#516b91" + }, + "subtextStyle": { + "color": "#93b7e3" + } + }, + "line": { + "itemStyle": { + "normal": { + "borderWidth": "2" + } + }, + "lineStyle": { + "normal": { + "width": "2" + } + }, + "symbolSize": "6", + "symbol": "emptyCircle", + "smooth": true + }, + "radar": { + "itemStyle": { + "normal": { + "borderWidth": "2" + } + }, + "lineStyle": { + "normal": { + "width": "2" + } + }, + "symbolSize": "6", + "symbol": "emptyCircle", + "smooth": true + }, + "bar": { + "itemStyle": { + "normal": { + "barBorderWidth": 0, + "barBorderColor": "#ccc" + }, + "emphasis": { + "barBorderWidth": 0, + "barBorderColor": "#ccc" + } + } + }, + "pie": { + "itemStyle": { + "normal": { + "borderWidth": 0, + "borderColor": "#ccc" + }, + "emphasis": { + "borderWidth": 0, + "borderColor": "#ccc" + } + } + }, + "scatter": { + "itemStyle": { + "normal": { + "borderWidth": 0, + "borderColor": "#ccc" + }, + "emphasis": { + "borderWidth": 0, + "borderColor": "#ccc" + } + } + }, + "boxplot": { + "itemStyle": { + "normal": { + "borderWidth": 0, + "borderColor": "#ccc" + }, + "emphasis": { + "borderWidth": 0, + "borderColor": "#ccc" + } + } + }, + "parallel": { + "itemStyle": { + "normal": { + "borderWidth": 0, + "borderColor": "#ccc" + }, + "emphasis": { + "borderWidth": 0, + "borderColor": "#ccc" + } + } + }, + "sankey": { + "itemStyle": { + "normal": { + "borderWidth": 0, + "borderColor": "#ccc" + }, + "emphasis": { + "borderWidth": 0, + "borderColor": "#ccc" + } + } + }, + "funnel": { + "itemStyle": { + "normal": { + "borderWidth": 0, + "borderColor": "#ccc" + }, + "emphasis": { + "borderWidth": 0, + "borderColor": "#ccc" + } + } + }, + "gauge": { + "itemStyle": { + "normal": { + "borderWidth": 0, + "borderColor": "#ccc" + }, + "emphasis": { + "borderWidth": 0, + "borderColor": "#ccc" + } + } + }, + "candlestick": { + "itemStyle": { + "normal": { + "color": "#edafda", + "color0": "transparent", + "borderColor": "#d680bc", + "borderColor0": "#8fd3e8", + "borderWidth": "2" + } + } + }, + "graph": { + "itemStyle": { + "normal": { + "borderWidth": 0, + "borderColor": "#ccc" + } + }, + "lineStyle": { + "normal": { + "width": 1, + "color": "#aaa" + } + }, + "symbolSize": "6", + "symbol": "emptyCircle", + "smooth": true, + "color": [ + "#2d8cf0", + "#19be6b", + "#f5ae4a", + "#9189d5", + "#56cae2", + "#cbb0e3" + ], + "label": { + "normal": { + "textStyle": { + "color": "#eee" + } + } + } + }, + "map": { + "itemStyle": { + "normal": { + "areaColor": "#f3f3f3", + "borderColor": "#516b91", + "borderWidth": 0.5 + }, + "emphasis": { + "areaColor": "rgba(165,231,240,1)", + "borderColor": "#516b91", + "borderWidth": 1 + } + }, + "label": { + "normal": { + "textStyle": { + "color": "#000" + } + }, + "emphasis": { + "textStyle": { + "color": "rgb(81,107,145)" + } + } + } + }, + "geo": { + "itemStyle": { + "normal": { + "areaColor": "#f3f3f3", + "borderColor": "#516b91", + "borderWidth": 0.5 + }, + "emphasis": { + "areaColor": "rgba(165,231,240,1)", + "borderColor": "#516b91", + "borderWidth": 1 + } + }, + "label": { + "normal": { + "textStyle": { + "color": "#000" + } + }, + "emphasis": { + "textStyle": { + "color": "rgb(81,107,145)" + } + } + } + }, + "categoryAxis": { + "axisLine": { + "show": true, + "lineStyle": { + "color": "#cccccc" + } + }, + "axisTick": { + "show": false, + "lineStyle": { + "color": "#333" + } + }, + "axisLabel": { + "show": true, + "textStyle": { + "color": "#fff" + } + }, + "splitLine": { + "show": false, + "lineStyle": { + "color": [ + "#eeeeee" + ] + } + }, + "splitArea": { + "show": false, + "areaStyle": { + "color": [ + "rgba(250,250,250,0.05)", + "rgba(200,200,200,0.02)" + ] + } + } + }, + "valueAxis": { + "axisLine": { + "show": true, + "lineStyle": { + "color": "#cccccc" + } + }, + "axisTick": { + "show": false, + "lineStyle": { + "color": "#333" + } + }, + "axisLabel": { + "show": true, + "textStyle": { + "color": "#fff" + } + }, + "splitLine": { + "show": false, + "lineStyle": { + "color": [ + "#eeeeee" + ] + } + }, + "splitArea": { + "show": false, + "areaStyle": { + "color": [ + "rgba(250,250,250,0.05)", + "rgba(200,200,200,0.02)" + ] + } + } + }, + "logAxis": { + "axisLine": { + "show": true, + "lineStyle": { + "color": "#cccccc" + } + }, + "axisTick": { + "show": false, + "lineStyle": { + "color": "#333" + } + }, + "axisLabel": { + "show": true, + "textStyle": { + "color": "#999999" + } + }, + "splitLine": { + "show": true, + "lineStyle": { + "color": [ + "#eeeeee" + ] + } + }, + "splitArea": { + "show": false, + "areaStyle": { + "color": [ + "rgba(250,250,250,0.05)", + "rgba(200,200,200,0.02)" + ] + } + } + }, + "timeAxis": { + "axisLine": { + "show": true, + "lineStyle": { + "color": "#cccccc" + } + }, + "axisTick": { + "show": false, + "lineStyle": { + "color": "#333" + } + }, + "axisLabel": { + "show": true, + "textStyle": { + "color": "#999999" + } + }, + "splitLine": { + "show": true, + "lineStyle": { + "color": [ + "#eeeeee" + ] + } + }, + "splitArea": { + "show": false, + "areaStyle": { + "color": [ + "rgba(250,250,250,0.05)", + "rgba(200,200,200,0.02)" + ] + } + } + }, + "toolbox": { + "iconStyle": { + "normal": { + "borderColor": "#999" + }, + "emphasis": { + "borderColor": "#666" + } + } + }, + "legend": { + "textStyle": { + "color": "#fff" + } + }, + "tooltip": { + "axisPointer": { + "lineStyle": { + "color": "#ccc", + "width": 1 + }, + "crossStyle": { + "color": "#ccc", + "width": 1 + } + } + }, + "timeline": { + "lineStyle": { + "color": "#8fd3e8", + "width": 1 + }, + "itemStyle": { + "normal": { + "color": "#8fd3e8", + "borderWidth": 1 + }, + "emphasis": { + "color": "#8fd3e8" + } + }, + "controlStyle": { + "normal": { + "color": "#8fd3e8", + "borderColor": "#8fd3e8", + "borderWidth": 0.5 + }, + "emphasis": { + "color": "#8fd3e8", + "borderColor": "#8fd3e8", + "borderWidth": 0.5 + } + }, + "checkpointStyle": { + "color": "#8fd3e8", + "borderColor": "rgba(138,124,168,0.37)" + }, + "label": { + "normal": { + "textStyle": { + "color": "#8fd3e8" + } + }, + "emphasis": { + "textStyle": { + "color": "#8fd3e8" + } + } + } + }, + "visualMap": { + "color": [ + "#516b91", + "#59c4e6", + "#a5e7f0" + ] + }, + "dataZoom": { + "backgroundColor": "rgba(0,0,0,0)", + "dataBackgroundColor": "rgba(255,255,255,0.3)", + "fillerColor": "rgba(167,183,204,0.4)", + "handleColor": "#a7b7cc", + "handleSize": "100%", + "textStyle": { + "color": "#333" + } + }, + "markPoint": { + "label": { + "normal": { + "textStyle": { + "color": "#eee" + } + }, + "emphasis": { + "textStyle": { + "color": "#eee" + } + } + } + } +} diff --git a/vue/src/views/bigScreen/components/item-wrap/item-wrap.vue b/vue/src/views/bigScreen/components/item-wrap/item-wrap.vue new file mode 100644 index 00000000..f8e18259 --- /dev/null +++ b/vue/src/views/bigScreen/components/item-wrap/item-wrap.vue @@ -0,0 +1,90 @@ + + + + \ No newline at end of file diff --git a/vue/src/views/bigScreen/components/kong.vue b/vue/src/views/bigScreen/components/kong.vue new file mode 100644 index 00000000..87327565 --- /dev/null +++ b/vue/src/views/bigScreen/components/kong.vue @@ -0,0 +1,43 @@ + + + + + \ No newline at end of file diff --git a/vue/src/views/bigScreen/components/message/message.js b/vue/src/views/bigScreen/components/message/message.js new file mode 100644 index 00000000..177e0264 --- /dev/null +++ b/vue/src/views/bigScreen/components/message/message.js @@ -0,0 +1,49 @@ +/* + * @Author: daidai + * @Date: 2022-02-16 17:08:26 + * @LastEditors: Please set LastEditors + * @LastEditTime: 2022-04-25 10:12:36 + * @FilePath: \yhht-ui\yhht-ui\packagesEle\getXY\src\main.js + */ +import Vue from 'vue'; +import Main from './message.vue'; +import {isObject,isVNode} from '@/lib/types' +let Message = Vue.extend(Main); +let instance; +var message = function (options) { + if (Vue.prototype.$isServer) return; + if(!instance){ + instance = new Message({ + data: { + ...options + }, + + }); + instance.$mount(); + } + instance.destroy=()=>{ + document.body.removeChild(instance.$el); + instance&&instance.$destroy() + instance=null + return null + } + instance.init(options) + document.body.appendChild(instance.$el); + return instance; +}; +['success', 'warning', 'info', 'error'].forEach(type => { + message[type] = (options) => { + if (isObject(options) && !isVNode(options)) { + return message({ + ...options, + type + }); + } + return message({ + type, + text: options + }); + }; + }); + +export default message; \ No newline at end of file diff --git a/vue/src/views/bigScreen/components/message/message.vue b/vue/src/views/bigScreen/components/message/message.vue new file mode 100644 index 00000000..73d8ebba --- /dev/null +++ b/vue/src/views/bigScreen/components/message/message.vue @@ -0,0 +1,67 @@ + + + + \ No newline at end of file diff --git a/vue/src/views/bigScreen/components/reacquire/reacquire.vue b/vue/src/views/bigScreen/components/reacquire/reacquire.vue new file mode 100644 index 00000000..845547e1 --- /dev/null +++ b/vue/src/views/bigScreen/components/reacquire/reacquire.vue @@ -0,0 +1,63 @@ + + + + + \ No newline at end of file diff --git a/vue/src/views/bigScreen/home.scss b/vue/src/views/bigScreen/home.scss new file mode 100644 index 00000000..d8551c07 --- /dev/null +++ b/vue/src/views/bigScreen/home.scss @@ -0,0 +1,267 @@ +#index { + color: #d3d6dd; + width: 1920px; + height: 1080px; + overflow: hidden; + + &.pageisScale { + position: absolute; + top: 50%; + left: 50%; + transform: translate(-50%, -50%); + transform-origin: left top; + } + + + .bg { + width: 100%; + height: 100%; + padding: 16px 16px 10px 16px; + box-sizing: border-box; + background-image: url("../../assets/bigScreen/img/pageBg.png"); + background-size: cover; + background-position: center center; + } + + .host-body { + height: 100%; + + .title_wrap { + height: 60px; + background-image: url("../../assets/bigScreen/img/top.png"); + background-size: cover; + background-position: center center; + position: relative; + margin-bottom: 4px; + + .guang { + position: absolute; + bottom: -26px; + background-image: url("../../assets/bigScreen/img/guang.png"); + background-position: 80px center; + width: 100%; + height: 56px; + } + + .zuojuxing, + .youjuxing { + position: absolute; + top: -2px; + width: 140px; + height: 6px; + background-image: url("../../assets/bigScreen/img/headers/juxing1.png"); + } + + .zuojuxing { + + left: 11%; + } + + .youjuxing { + right: 11%; + transform: rotate(180deg); + } + + .timers { + position: absolute; + right: 0; + top: 30px; + font-size: 18px; + display: flex; + align-items: center; + + .blq-icon-shezhi02 { + cursor: pointer; + } + } + } + + .title { + position: relative; + // width: 500px; + text-align: center; + background-size: cover; + color: transparent; + height: 60px; + line-height: 46px; + + .title-text { + font-size: 38px; + font-weight: 900; + letter-spacing: 6px; + width: 100%; + background: linear-gradient(92deg, #0072FF 0%, #00EAFF 48.8525390625%, #01AAFF 100%); + -webkit-background-clip: text; + -webkit-text-fill-color: transparent; + } + } + } + + +} + +.index_home { + width: 100vw; + height: 100vh; + background-color: #03050C; + .pagetab { + position: absolute; + top: -35px; + display: flex; + + .item { + width: 130px; + height: 36px; + border-radius: 18px 0px 0px 18px; + color: #00FBF8; + text-indent: 26px; + line-height: 36px; + font-size: 16px; + margin-right: 20px; + background: linear-gradient(to right, rgba(76, 245, 255, .5), rgba(76, 245, 255, 0)); + } + } +} + +.setting { + position: fixed; + width: 100%; + height: 100%; + z-index: 999; + top: 0; + left: 0; + + .left_shu { + color: #000; + font-weight: 900; + position: relative; + text-indent: 10px; + padding:16px 0 10px 0 ; + &::before { + display: block; + content: " "; + height: 16px; + width: 4px; + border-radius: 2px; + background: #0072FF; + position: absolute; + left: 0px; + } + } + + .setting_dislog { + background-color: rgba($color: #000000, $alpha: .5); + position: absolute; + width: 100%; + height: 100%; + z-index: 0; + right: 0; + top: 0; + } + + .setting_inner { + box-sizing: border-box; + background: #FFF; + width: 340px; + height: 100%; + position: absolute; + right: 0px; + top: 0; + z-index: 1; + color: #000000; + box-shadow: 0 8px 10px -5px rgba(0, 0, 0, .2), 0 16px 24px 2px rgba(0, 0, 0, .14), 0 6px 30px 5px rgba(0, 0, 0, .12); + + .setting_header { + font-size: 20px; + color: rgb(0, 0, 0); + font-weight: 900; + text-align: center; + line-height: 40px; + } + + .setting_body { + padding: 0px 16px; + box-sizing: border-box; + position: relative; + } + + .setting_item { + font-size: 14px; + line-height: 1.5; + + // display: flex; + .setting_label { + color: #555454; + } + .setting_label_tip{ + font-size: 12px; + color: #838282; + } + } + } + + .setting_inner { + animation: rtl-drawer-out .3s; + } +} + + +.settingShow { + .setting_inner { + animation: rtl-drawer-in .3s 1ms; + } + +} + +.yh-setting-fade-enter-active { + animation: yh-setting-fade-in .3s; +} + +.yh-setting-fade-leave-active { + + animation: yh-setting-fade-out .3s; + +} + +@keyframes yh-setting-fade-in { + 0% { + opacity: 0; + } + + 100% { + opacity: 1; + } +} + +@keyframes yh-setting-fade-out { + 0% { + opacity: 1; + + } + + 100% { + opacity: 0; + } +} + + +@keyframes rtl-drawer-in { + 0% { + transform: translate(100%, 0) + } + + 100% { + -webkit-transform: translate(0, 0); + transform: translate(0, 0) + } +} + +@keyframes rtl-drawer-out { + 0% { + transform: translate(0, 0) + } + + 100% { + transform: translate(100%, 0) + } +} \ No newline at end of file diff --git a/vue/src/views/bigScreen/home.vue b/vue/src/views/bigScreen/home.vue new file mode 100644 index 00000000..eba0664f --- /dev/null +++ b/vue/src/views/bigScreen/home.vue @@ -0,0 +1,93 @@ + + + + + diff --git a/vue/src/views/bigScreen/indexs/center-bottom.vue b/vue/src/views/bigScreen/indexs/center-bottom.vue new file mode 100644 index 00000000..ecf41da3 --- /dev/null +++ b/vue/src/views/bigScreen/indexs/center-bottom.vue @@ -0,0 +1,179 @@ + + + + \ No newline at end of file diff --git a/vue/src/views/bigScreen/indexs/center-map.vue b/vue/src/views/bigScreen/indexs/center-map.vue new file mode 100644 index 00000000..8f5dd7e9 --- /dev/null +++ b/vue/src/views/bigScreen/indexs/center-map.vue @@ -0,0 +1,398 @@ + + + + \ No newline at end of file diff --git a/vue/src/views/bigScreen/indexs/index.vue b/vue/src/views/bigScreen/indexs/index.vue new file mode 100644 index 00000000..f099448e --- /dev/null +++ b/vue/src/views/bigScreen/indexs/index.vue @@ -0,0 +1,154 @@ + + + + diff --git a/vue/src/views/bigScreen/indexs/left-bottom.vue b/vue/src/views/bigScreen/indexs/left-bottom.vue new file mode 100644 index 00000000..f619ef26 --- /dev/null +++ b/vue/src/views/bigScreen/indexs/left-bottom.vue @@ -0,0 +1,246 @@ + + + + \ No newline at end of file diff --git a/vue/src/views/bigScreen/indexs/left-center.vue b/vue/src/views/bigScreen/indexs/left-center.vue new file mode 100644 index 00000000..f6b79ffd --- /dev/null +++ b/vue/src/views/bigScreen/indexs/left-center.vue @@ -0,0 +1,223 @@ + + + + \ No newline at end of file diff --git a/vue/src/views/bigScreen/indexs/left-top.vue b/vue/src/views/bigScreen/indexs/left-top.vue new file mode 100644 index 00000000..63fa82fe --- /dev/null +++ b/vue/src/views/bigScreen/indexs/left-top.vue @@ -0,0 +1,222 @@ + + + + \ No newline at end of file diff --git a/vue/src/views/bigScreen/indexs/right-bottom.vue b/vue/src/views/bigScreen/indexs/right-bottom.vue new file mode 100644 index 00000000..d41d691a --- /dev/null +++ b/vue/src/views/bigScreen/indexs/right-bottom.vue @@ -0,0 +1,187 @@ + + + + \ No newline at end of file diff --git a/vue/src/views/bigScreen/indexs/right-center.vue b/vue/src/views/bigScreen/indexs/right-center.vue new file mode 100644 index 00000000..17edca13 --- /dev/null +++ b/vue/src/views/bigScreen/indexs/right-center.vue @@ -0,0 +1,157 @@ + + + + \ No newline at end of file diff --git a/vue/src/views/bigScreen/indexs/right-top.vue b/vue/src/views/bigScreen/indexs/right-top.vue new file mode 100644 index 00000000..a7a9b56b --- /dev/null +++ b/vue/src/views/bigScreen/indexs/right-top.vue @@ -0,0 +1,294 @@ + + + + \ No newline at end of file diff --git a/vue/src/views/bigScreen/setting.vue b/vue/src/views/bigScreen/setting.vue new file mode 100644 index 00000000..9450c73d --- /dev/null +++ b/vue/src/views/bigScreen/setting.vue @@ -0,0 +1,105 @@ + + + + + \ No newline at end of file diff --git a/vue/src/views/bigScreen/tjfx/tjfx.vue b/vue/src/views/bigScreen/tjfx/tjfx.vue new file mode 100644 index 00000000..7a5b911c --- /dev/null +++ b/vue/src/views/bigScreen/tjfx/tjfx.vue @@ -0,0 +1,30 @@ + + + + \ No newline at end of file