[update] 移动端主页、管理
This commit is contained in:
danshihao
Generated
+29
-5
@@ -1292,7 +1292,6 @@
|
||||
"version": "7.22.6",
|
||||
"resolved": "https://registry.npmmirror.com/@babel/runtime/-/runtime-7.22.6.tgz",
|
||||
"integrity": "sha512-wDb5pWm4WDdF6LFUde3Jl8WzPA+3ZbxYqkC6xAXuD3irdEHN1k0NfTRrJD8ZD378SJ61miMLCqIOXYhd8x+AJQ==",
|
||||
"dev": true,
|
||||
"requires": {
|
||||
"regenerator-runtime": "^0.13.11"
|
||||
},
|
||||
@@ -1300,8 +1299,7 @@
|
||||
"regenerator-runtime": {
|
||||
"version": "0.13.11",
|
||||
"resolved": "https://registry.npmmirror.com/regenerator-runtime/-/regenerator-runtime-0.13.11.tgz",
|
||||
"integrity": "sha512-kY1AZVr2Ra+t+piVaJ4gxaFaReZVH40AKNo7UCX6W+dEwBo/2oZJzqfuN1qLq1oL45o56cPaTXELwrTh8Fpggg==",
|
||||
"dev": true
|
||||
"integrity": "sha512-kY1AZVr2Ra+t+piVaJ4gxaFaReZVH40AKNo7UCX6W+dEwBo/2oZJzqfuN1qLq1oL45o56cPaTXELwrTh8Fpggg=="
|
||||
}
|
||||
}
|
||||
},
|
||||
@@ -1848,11 +1846,20 @@
|
||||
}
|
||||
}
|
||||
},
|
||||
"@vant/icons": {
|
||||
"version": "3.0.2",
|
||||
"resolved": "https://registry.npmmirror.com/@vant/icons/-/icons-3.0.2.tgz",
|
||||
"integrity": "sha512-4OlRVMd0uiDtD9hgSISZW8hB95vU0fFtc41tQchRIyiXkR0tS+DydZOLb8/bQkithrNWhW7Uud38MbKjlJ9lJw=="
|
||||
},
|
||||
"@vant/popperjs": {
|
||||
"version": "1.3.0",
|
||||
"resolved": "https://registry.npmmirror.com/@vant/popperjs/-/popperjs-1.3.0.tgz",
|
||||
"integrity": "sha512-hB+czUG+aHtjhaEmCJDuXOep0YTZjdlRR+4MSmIFnkCQIxJaXLQdSsR90XWvAI2yvKUI7TCGqR8pQg2RtvkMHw=="
|
||||
},
|
||||
"@vue/babel-helper-vue-jsx-merge-props": {
|
||||
"version": "1.4.0",
|
||||
"resolved": "https://registry.npmmirror.com/@vue/babel-helper-vue-jsx-merge-props/-/babel-helper-vue-jsx-merge-props-1.4.0.tgz",
|
||||
"integrity": "sha512-JkqXfCkUDp4PIlFdDQ0TdXoIejMtTHP67/pvxlgeY+u5k3LEdKuWZ3LK6xkxo52uDoABIVyRwqVkfLQJhk7VBA==",
|
||||
"dev": true
|
||||
"integrity": "sha512-JkqXfCkUDp4PIlFdDQ0TdXoIejMtTHP67/pvxlgeY+u5k3LEdKuWZ3LK6xkxo52uDoABIVyRwqVkfLQJhk7VBA=="
|
||||
},
|
||||
"@vue/babel-plugin-transform-vue-jsx": {
|
||||
"version": "1.4.0",
|
||||
@@ -17955,6 +17962,18 @@
|
||||
"spdx-expression-parse": "^3.0.0"
|
||||
}
|
||||
},
|
||||
"vant": {
|
||||
"version": "2.13.2",
|
||||
"resolved": "https://registry.npmmirror.com/vant/-/vant-2.13.2.tgz",
|
||||
"integrity": "sha512-anZbbLqXCq+rUJk10D67mn+V/1/i9tfOTdoR+64B0e+0BzV3KFgpHBF76noLa+yX9i/L+8DeL560WMk0GEN38g==",
|
||||
"requires": {
|
||||
"@babel/runtime": "7.x",
|
||||
"@vant/icons": "^3.0.2",
|
||||
"@vant/popperjs": "^1.1.0",
|
||||
"@vue/babel-helper-vue-jsx-merge-props": "^1.0.0",
|
||||
"vue-lazyload": "1.2.3"
|
||||
}
|
||||
},
|
||||
"vary": {
|
||||
"version": "1.1.2",
|
||||
"resolved": "https://registry.npmmirror.com/vary/-/vary-1.1.2.tgz",
|
||||
@@ -18121,6 +18140,11 @@
|
||||
"resolved": "https://registry.npmmirror.com/vue-i18n/-/vue-i18n-8.28.2.tgz",
|
||||
"integrity": "sha512-C5GZjs1tYlAqjwymaaCPDjCyGo10ajUphiwA922jKt9n7KPpqR7oM1PCwYzhB/E7+nT3wfdG3oRre5raIT1rKA=="
|
||||
},
|
||||
"vue-lazyload": {
|
||||
"version": "1.2.3",
|
||||
"resolved": "https://registry.npmmirror.com/vue-lazyload/-/vue-lazyload-1.2.3.tgz",
|
||||
"integrity": "sha512-DC0ZwxanbRhx79tlA3zY5OYJkH8FYp3WBAnAJbrcuoS8eye1P73rcgAZhyxFSPUluJUTelMB+i/+VkNU/qVm7g=="
|
||||
},
|
||||
"vue-loader": {
|
||||
"version": "15.10.1",
|
||||
"resolved": "https://registry.npmmirror.com/vue-loader/-/vue-loader-15.10.1.tgz",
|
||||
|
||||
@@ -33,6 +33,7 @@
|
||||
"nprogress": "^0.2.0",
|
||||
"tinymce": "5.4.1",
|
||||
"v-viewer": "^1.6.4",
|
||||
"vant": "^2.13.2",
|
||||
"viser-vue": "^2.4.8",
|
||||
"vue": "^2.6.10",
|
||||
"vue-area-linkage": "^5.1.0",
|
||||
|
||||
+1
-1
@@ -60,7 +60,7 @@ export default {
|
||||
|
||||
<style>
|
||||
html.mobile-html {
|
||||
font-size: calc(100vw / 7.5);
|
||||
font-size: calc(100vw / 3.75);
|
||||
-webkit-text-size-adjust: 100%;
|
||||
}
|
||||
</style>
|
||||
|
||||
Binary file not shown.
|
After Width: | Height: | Size: 3.1 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 3.0 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 1.3 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 4.5 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 5.1 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 2.9 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 372 B |
+353
-80
@@ -307,92 +307,161 @@ div.ant-table table,
|
||||
}
|
||||
// 按钮样式
|
||||
.custom-btns-box {
|
||||
button.ant-btn {
|
||||
.btn-icon {
|
||||
margin-right: 3px;
|
||||
margin-bottom: 3px;
|
||||
width: 14px;
|
||||
}
|
||||
.btn-text {
|
||||
font-family: PingFang SC, PingFang SC, sans-serif;
|
||||
font-weight: 500;
|
||||
font-size: 14px;
|
||||
color: #FFFFFF;
|
||||
line-height: 16px;
|
||||
}
|
||||
|
||||
.btn-icon {
|
||||
margin-right: 3px;
|
||||
margin-bottom: 3px;
|
||||
width: 14px;
|
||||
}
|
||||
.btn-text {
|
||||
font-family: PingFang SC, PingFang SC, sans-serif;
|
||||
font-weight: 500;
|
||||
font-size: 14px;
|
||||
color: #FFFFFF;
|
||||
line-height: 16px;
|
||||
}
|
||||
// 蓝色按钮
|
||||
.btn-blue {
|
||||
background: url("~@assets/images/componentImg/btn-blue.png") no-repeat center center !important;
|
||||
width: 88px !important;
|
||||
}
|
||||
.btn-blue-long {
|
||||
background: url("~@assets/images/componentImg/btn-blue-long.png") no-repeat center center !important;
|
||||
width: 128px !important;
|
||||
}
|
||||
// 青色按钮
|
||||
.btn-cyan {
|
||||
background: url("~@assets/images/componentImg/btn-cyan.png") no-repeat center center !important;
|
||||
width: 88px !important;
|
||||
}
|
||||
.btn-cyan-medium {
|
||||
background: url("~@assets/images/componentImg/btn-cyan-medium.png") no-repeat center center !important;
|
||||
width: 108px !important;
|
||||
}
|
||||
// 蓝色按钮
|
||||
&.btn-blue {
|
||||
background: url("~@assets/images/componentImg/btn-blue.png") no-repeat center center;
|
||||
width: 88px;
|
||||
}
|
||||
&.btn-blue-long {
|
||||
background: url("~@assets/images/componentImg/btn-blue-long.png") no-repeat center center;
|
||||
width: 128px;
|
||||
}
|
||||
// 青色按钮
|
||||
&.btn-cyan {
|
||||
background: url("~@assets/images/componentImg/btn-cyan.png") no-repeat center center;
|
||||
width: 88px;
|
||||
}
|
||||
&.btn-cyan-medium {
|
||||
background: url("~@assets/images/componentImg/btn-cyan-medium.png") no-repeat center center;
|
||||
width: 108px;
|
||||
}
|
||||
|
||||
// 按钮公共样式
|
||||
.btn-blue,
|
||||
.btn-cyan,
|
||||
.btn-blue-long,
|
||||
.btn-cyan-medium {
|
||||
border: none !important;
|
||||
background-size: 100% @btn-height-base !important;
|
||||
// 按钮公共样式
|
||||
&.btn-blue,
|
||||
&.btn-cyan,
|
||||
&.btn-blue-long,
|
||||
&.btn-cyan-medium {
|
||||
border: none !important;
|
||||
background-size: 100% @btn-height-base;
|
||||
}
|
||||
}
|
||||
}
|
||||
.ant-btn {
|
||||
&.primary-btn,
|
||||
&.primary-btn:hover,
|
||||
&.primary-btn:focus {
|
||||
width: 88px;
|
||||
height: 32px;
|
||||
background: linear-gradient( 180deg, rgba(0,148,255,0) 0%, rgba(0,148,255,0.6) 100%);
|
||||
border-radius: 2px 2px 2px 2px;
|
||||
border: 1px solid #0094FF;
|
||||
color: @text-color;
|
||||
}
|
||||
&.danger-btn,
|
||||
&.danger-btn:hover,
|
||||
&.danger-btn:focus {
|
||||
width: 88px;
|
||||
height: 32px;
|
||||
background: linear-gradient( 0deg, rgba(255,83,83,0.6) 00%, rgba(255,83,83,0) 100%);
|
||||
border-radius: 2px 2px 2px 2px;
|
||||
border: 1px solid #FF5353;
|
||||
color: @text-color;
|
||||
}
|
||||
|
||||
.ant-btn.primary-btn,
|
||||
.ant-btn.primary-btn:hover,
|
||||
.ant-btn.primary-btn:focus {
|
||||
width: 88px;
|
||||
height: 32px;
|
||||
background: linear-gradient( 180deg, rgba(0,148,255,0) 0%, rgba(0,148,255,0.6) 100%);
|
||||
border-radius: 2px 2px 2px 2px;
|
||||
border: 1px solid #0094FF;
|
||||
color: @text-color;
|
||||
}
|
||||
.ant-btn.danger-btn,
|
||||
.ant-btn.danger-btn:hover,
|
||||
.ant-btn.danger-btn:focus {
|
||||
width: 88px;
|
||||
height: 32px;
|
||||
background: linear-gradient( 0deg, rgba(255,83,83,0.6) 00%, rgba(255,83,83,0) 100%);
|
||||
border-radius: 2px 2px 2px 2px;
|
||||
border: 1px solid #FF5353;
|
||||
color: @text-color;
|
||||
}
|
||||
&.ant-btn-primary,
|
||||
&.ant-btn-primary:hover,
|
||||
&.ant-btn-primary:focus {
|
||||
background: linear-gradient( 180deg, rgba(0,148,255,0) 0%, rgba(0,148,255,0.6) 100%);
|
||||
border: 1px solid #0094FF;
|
||||
color: @text-color;
|
||||
}
|
||||
&.ant-btn-primary[disabled],
|
||||
&.ant-btn-primary[disabled]:hover,
|
||||
&.ant-btn-primary[disabled]:focus {
|
||||
color: @text-color;
|
||||
background: linear-gradient(180deg, rgba(0, 148, 255, 0) 0%, rgba(0, 148, 255, 0.6) 100%);
|
||||
}
|
||||
|
||||
.ant-btn.ant-btn-primary,
|
||||
.ant-btn.ant-btn-primary:hover,
|
||||
.ant-btn.ant-btn-primary:focus {
|
||||
background: linear-gradient( 180deg, rgba(0,148,255,0) 0%, rgba(0,148,255,0.6) 100%);
|
||||
border: 1px solid #0094FF;
|
||||
color: @text-color;
|
||||
}
|
||||
.ant-btn.ant-btn-primary[disabled],
|
||||
.ant-btn.ant-btn-primary[disabled]:hover,
|
||||
.ant-btn.ant-btn-primary[disabled]:focus {
|
||||
color: @text-color;
|
||||
background: linear-gradient(180deg, rgba(0, 148, 255, 0) 0%, rgba(0, 148, 255, 0.6) 100%);
|
||||
&.ant-btn-danger,
|
||||
&.ant-btn-danger:hover,
|
||||
&.ant-btn-danger:focus {
|
||||
background: linear-gradient( 0deg, rgba(255,83,83,0.6) 00%, rgba(255,83,83,0) 100%);
|
||||
border: 1px solid #FF5353;
|
||||
color: @text-color;
|
||||
}
|
||||
}
|
||||
.mobile-html {
|
||||
.ant-btn {
|
||||
font-size: 0.14rem;
|
||||
line-height: 0.16rem;
|
||||
height: 0.36rem;
|
||||
}
|
||||
.custom-btns-box {
|
||||
.ant-btn {
|
||||
.btn-icon {
|
||||
margin-right: 0.03rem;
|
||||
margin-bottom: 0.03rem;
|
||||
width: 0.14rem;
|
||||
}
|
||||
.btn-text {
|
||||
font-size: 0.14rem;
|
||||
line-height: 0.16rem;
|
||||
}
|
||||
// 蓝色按钮
|
||||
&.btn-blue {
|
||||
width: 0.88rem;
|
||||
}
|
||||
&.btn-blue-long {
|
||||
width: 1.28rem;
|
||||
}
|
||||
&.btn-blue-small {
|
||||
width: 0.36rem;
|
||||
}
|
||||
// 青色按钮
|
||||
&.btn-cyan {
|
||||
width: 0.88rem;
|
||||
}
|
||||
&.btn-cyan-medium {
|
||||
width: 1.08rem;
|
||||
}
|
||||
&.btn-blue,
|
||||
&.btn-cyan,
|
||||
&.btn-blue-small,
|
||||
&.btn-blue-long,
|
||||
&.btn-cyan-medium {
|
||||
background-size: 100% 0.36rem;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.ant-btn.ant-btn-danger,
|
||||
.ant-btn.ant-btn-danger:hover,
|
||||
.ant-btn.ant-btn-danger:focus {
|
||||
background: linear-gradient( 0deg, rgba(255,83,83,0.6) 00%, rgba(255,83,83,0) 100%);
|
||||
border: 1px solid #FF5353;
|
||||
color: @text-color;
|
||||
.ant-btn.primary-btn,
|
||||
.ant-btn.primary-btn:hover,
|
||||
.ant-btn.primary-btn:focus,
|
||||
.ant-btn.danger-btn,
|
||||
.ant-btn.danger-btn:hover,
|
||||
.ant-btn.danger-btn:focus {
|
||||
width: 0.88rem;
|
||||
height: 0.32rem;
|
||||
border-radius: 0.02rem;
|
||||
border-width: 0.01rem;
|
||||
}
|
||||
|
||||
.ant-btn.ant-btn-primary,
|
||||
.ant-btn.ant-btn-primary:hover,
|
||||
.ant-btn.ant-btn-primary:focus,
|
||||
.ant-btn.ant-btn-danger,
|
||||
.ant-btn.ant-btn-danger:hover,
|
||||
.ant-btn.ant-btn-danger:focus {
|
||||
border-width: 0.01rem;
|
||||
}
|
||||
}
|
||||
/* 部分组件end */
|
||||
|
||||
// 一些间距
|
||||
.ml-8 {
|
||||
margin-left: 8px;
|
||||
}
|
||||
@@ -408,12 +477,42 @@ div.ant-table table,
|
||||
.mr-10 {
|
||||
margin-right: 10px;
|
||||
}
|
||||
// 移动端下的样式
|
||||
.mobile-html {
|
||||
.mb-12 {
|
||||
margin-bottom: .12rem;
|
||||
}
|
||||
.mb-8 {
|
||||
margin-bottom: 0.08rem;
|
||||
}
|
||||
.mb-6 {
|
||||
margin-bottom: 0.06rem;
|
||||
}
|
||||
.mr-6 {
|
||||
margin-right: 0.06rem;
|
||||
}
|
||||
}
|
||||
// 分割线
|
||||
.divider-vertical {
|
||||
width: 1px;
|
||||
margin: 0 20px;
|
||||
background-color: rgba(108, 128, 151, 0.3);
|
||||
}
|
||||
.divider-horizontal {
|
||||
height: 1px;
|
||||
margin: 20px 0;
|
||||
background-color: rgba(108, 128, 151, 0.3);
|
||||
}
|
||||
|
||||
// 移动端下的样式
|
||||
.mobile-html {
|
||||
.divider-vertical {
|
||||
margin: 0 .1rem;
|
||||
}
|
||||
.divider-horizontal {
|
||||
margin: .12rem 0;
|
||||
}
|
||||
}
|
||||
|
||||
// 一行的内容
|
||||
.info-row {
|
||||
@@ -448,6 +547,21 @@ div.ant-table table,
|
||||
word-break: break-all;
|
||||
white-space: nowrap;
|
||||
}
|
||||
|
||||
// 移动端下的样式
|
||||
.mobile-html {
|
||||
.info-row {
|
||||
.info-label {
|
||||
font-size: 0.12rem;
|
||||
line-height: 0.14rem;
|
||||
}
|
||||
|
||||
.info-value {
|
||||
font-size: 0.12rem;
|
||||
line-height: 0.14rem;
|
||||
}
|
||||
}
|
||||
}
|
||||
// 运行
|
||||
.working::before {
|
||||
content: '';
|
||||
@@ -468,7 +582,14 @@ div.ant-table table,
|
||||
border-radius: 50%;
|
||||
background-color: #FF5353;
|
||||
}
|
||||
|
||||
.mobile-html {
|
||||
.working::before,
|
||||
.cease::before {
|
||||
width: 0.06rem;
|
||||
height: 0.06rem;
|
||||
margin-right: 0.04rem;
|
||||
}
|
||||
}
|
||||
// 特殊大数字
|
||||
.big-number {
|
||||
font-family: Audiowide, Audiowide, sans-serif;
|
||||
@@ -479,10 +600,14 @@ div.ant-table table,
|
||||
background: linear-gradient(90deg, #FFFFFF 0%, #96D0F9 100%);
|
||||
-webkit-background-clip: text;
|
||||
}
|
||||
.mobile-html .big-number {
|
||||
font-size: 0.22rem;
|
||||
line-height: 0.32rem;
|
||||
}
|
||||
|
||||
// 标题加渐变背景
|
||||
.title-background {
|
||||
margin-bottom: 9px;
|
||||
margin-bottom: 10px;
|
||||
font-family: DingTalk JinBuTi, DingTalk JinBuTi, sans-serif;
|
||||
font-weight: 400;
|
||||
font-size: 15px;
|
||||
@@ -495,20 +620,40 @@ div.ant-table table,
|
||||
content: '';
|
||||
display: block;
|
||||
position: absolute;
|
||||
top: 6px;
|
||||
top: 4px;
|
||||
left: 0;
|
||||
width: 100%;
|
||||
width: calc(100% + 8px);
|
||||
height: 16px;
|
||||
background: linear-gradient( 90deg, rgba(0,116,202,0.1) 0%, #0074CA 50%, rgba(0,116,202,0) 100%);
|
||||
}
|
||||
|
||||
.title-background-text {
|
||||
padding: 0 4px;
|
||||
margin-left: 4px;
|
||||
position: relative;
|
||||
height: 22px;
|
||||
}
|
||||
}
|
||||
// 移动端-标题加渐变背景
|
||||
.mobile-html {
|
||||
.title-background {
|
||||
margin-bottom: 0.05rem;
|
||||
font-size: 0.14rem;
|
||||
line-height: 0.16rem;
|
||||
|
||||
&::before {
|
||||
top: 0.04rem;
|
||||
height: 0.15rem;
|
||||
width: calc(100% + 0.08rem);
|
||||
background: linear-gradient( 90deg, rgba(0,116,202,0.1) 0%, #0074CA 50%, rgba(0,116,202,0) 100%);
|
||||
}
|
||||
|
||||
.title-background-text {
|
||||
margin-left: 0.04rem;
|
||||
position: relative;
|
||||
height: 0.21rem;
|
||||
}
|
||||
}
|
||||
}
|
||||
// 青色
|
||||
.text-cyan { color: @custom-cyan; }
|
||||
|
||||
@@ -546,6 +691,64 @@ div.ant-table table,
|
||||
line-height: 35.5px;
|
||||
}
|
||||
}
|
||||
.mobile-html {
|
||||
.ant-input {
|
||||
height: 0.36rem;
|
||||
border-radius: 0.04rem;
|
||||
padding: 0.04rem 0.11rem;
|
||||
font-size: 0.14rem;
|
||||
border-width: 0.01rem;
|
||||
}
|
||||
textarea.ant-input {
|
||||
height: auto;
|
||||
}
|
||||
.ant-select {
|
||||
display: block;
|
||||
font-size: 0.14rem;
|
||||
.ant-select-selection--single {
|
||||
height: 0.36rem;
|
||||
}
|
||||
.ant-select-selection__rendered {
|
||||
line-height: 0.36rem;
|
||||
margin-left: 0.11rem;
|
||||
}
|
||||
.ant-select-selection--single .ant-select-selection__rendered {
|
||||
margin-right: 0.24rem;
|
||||
}
|
||||
.ant-select-selection__placeholder, .ant-select-search__field__placeholder {
|
||||
right: 0.09rem;
|
||||
height: 0.2rem;
|
||||
margin-top: -0.1rem;
|
||||
line-height: 0.2rem;
|
||||
}
|
||||
}
|
||||
.ant-form-explain, .ant-form-extra {
|
||||
min-height: 0.22rem;
|
||||
font-size: 0.14rem;
|
||||
}
|
||||
.ant-form-item-required::before {
|
||||
font-size: 0.14rem;
|
||||
margin-right: 0.04rem;
|
||||
}
|
||||
.ant-form label {
|
||||
font-size: 0.14rem;
|
||||
}
|
||||
|
||||
.ant-form-item-label {
|
||||
padding: 0;
|
||||
line-height: 0.22rem;
|
||||
margin-bottom: 0.04rem;
|
||||
}
|
||||
.ant-form-item {
|
||||
margin-bottom: 0.12rem;
|
||||
}
|
||||
.ant-form-item-label > label::after {
|
||||
display: none;
|
||||
}
|
||||
.ant-form-item-control {
|
||||
line-height: 0.36rem;
|
||||
}
|
||||
}
|
||||
/* 表单end */
|
||||
|
||||
// flex居中
|
||||
@@ -561,6 +764,11 @@ div.ant-table table,
|
||||
flex-direction: column;
|
||||
justify-content: space-between;
|
||||
}
|
||||
.flex-between {
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
align-items: center;
|
||||
}
|
||||
|
||||
// 表格中的tag对齐inline-block导致错位，父元素字体调整为0，解决tag对齐问题
|
||||
.ant-table-middle > .ant-table-content > .ant-table-scroll > .ant-table-body > table > .ant-table-tbody > tr > td:has( > .tag-blue),
|
||||
@@ -596,4 +804,69 @@ div.ant-table table,
|
||||
overflow: hidden;
|
||||
text-overflow: ellipsis;
|
||||
word-break: break-all;
|
||||
}
|
||||
|
||||
// 内容卡片
|
||||
.custom-content-card {
|
||||
padding: 12px 16px;
|
||||
position: relative;
|
||||
border: 1px solid;
|
||||
background: linear-gradient( 90deg, rgba(0,148,255,0.4) 0%, rgba(0,148,255,0.05) 100%);
|
||||
border-image: linear-gradient(85deg, rgba(71, 137, 233, 1), rgba(46, 228, 253, 1), rgba(54, 109, 200, 1)) 1 1;
|
||||
border-left: none;
|
||||
border-right: none;
|
||||
|
||||
// 伪元素装饰
|
||||
&::before,
|
||||
&::after {
|
||||
pointer-events: none;
|
||||
user-select: none;
|
||||
content: '';
|
||||
display: block;
|
||||
position: absolute;
|
||||
}
|
||||
|
||||
// 四个角
|
||||
&::before {
|
||||
top: -2px;
|
||||
left: -1px;
|
||||
width: calc(100% + 2px);
|
||||
height: calc(100% + 4px);
|
||||
background-image: url("~@/assets/images/systemOverview/equipmentManagement/left-top.png"),
|
||||
url("~@/assets/images/systemOverview/equipmentManagement/left-bottom.png"),
|
||||
url("~@/assets/images/systemOverview/equipmentManagement/right-top.png"),
|
||||
url("~@/assets/images/systemOverview/equipmentManagement/right-bottom.png");
|
||||
background-repeat: no-repeat;
|
||||
background-position: left top, left bottom, right top, right bottom;
|
||||
}
|
||||
// 两侧的边框
|
||||
&::after {
|
||||
left: 0;
|
||||
top: 0;
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
border: 1px solid;
|
||||
border-top: none;
|
||||
border-bottom: none;
|
||||
border-image: linear-gradient(0deg, rgba(46,228,253,0) 0%, #2EE4FD 50%, rgba(46,228,253,0) 100%) 1;
|
||||
}
|
||||
}
|
||||
// 移动端-内容卡片
|
||||
.mobile-html {
|
||||
.custom-content-card {
|
||||
padding: 0.1rem 0.08rem;
|
||||
border-width: 0.01rem;
|
||||
|
||||
// 四个角
|
||||
&::before {
|
||||
top: -0.02rem;
|
||||
left: -0.01rem;
|
||||
width: calc(100% + 0.02rem);
|
||||
height: calc(100% + 0.04rem);
|
||||
}
|
||||
// 两侧的边框
|
||||
&::after {
|
||||
border-width: 0.01rem;
|
||||
}
|
||||
}
|
||||
}
|
||||
@@ -26,5 +26,11 @@ module.exports = {
|
||||
'input-height-base': '36px',
|
||||
|
||||
// 其他
|
||||
'red-6': '#FF5353'
|
||||
'red-6': '#FF5353',
|
||||
|
||||
// vant
|
||||
white: '#001B36',
|
||||
black: 'rgba(255, 255, 255, 0.96)',
|
||||
red: '#0094FF',
|
||||
'dialog-has-title-message-text-color': 'rgba(255, 255, 255, 0.96)'
|
||||
}
|
||||
|
||||
@@ -118,4 +118,50 @@ export default {
|
||||
line-height: 16px;
|
||||
text-shadow: 1px 1px 0px rgba(21,154,255,0.7), 1px 1px 0px #000000;
|
||||
}
|
||||
// 如果是移动端设置为rem单位
|
||||
.mobile-html {
|
||||
.common-card {
|
||||
border: .01rem solid rgba(0,148,255,0.24);
|
||||
border-bottom: .01rem @primary-color solid;
|
||||
|
||||
// 左下右下高亮边框
|
||||
&::before, &::after {
|
||||
min-width: 0.16rem;
|
||||
height: 0.01rem;
|
||||
bottom: -0.01rem;
|
||||
}
|
||||
&::before {
|
||||
left: 0;
|
||||
}
|
||||
&::after {
|
||||
right: 0;
|
||||
}
|
||||
|
||||
/deep/ .ant-card-head {
|
||||
background-size: 0.01rem 100%, calc(100% - 0.02rem) 100%, 0.01rem 100%;
|
||||
border: none;
|
||||
min-height: 0.42rem;
|
||||
height: 0.42rem;
|
||||
padding: 0 0.16rem;
|
||||
}
|
||||
/deep/ .ant-card-head-title {
|
||||
font-size: 0.14rem;
|
||||
line-height: 0.36rem;
|
||||
}
|
||||
/deep/ .ant-card-head-title::before {
|
||||
width: 0.12rem;
|
||||
height: 0.12rem;
|
||||
}
|
||||
/deep/ .ant-card-body {
|
||||
padding: 0.08rem 0.12rem 0.12rem !important;
|
||||
height: calc(100% - 0.42rem);
|
||||
}
|
||||
}
|
||||
.card-title {
|
||||
margin-left: 0.08rem;
|
||||
font-size: 0.14rem;
|
||||
color: @text-color;
|
||||
line-height: 0.16rem;
|
||||
}
|
||||
}
|
||||
</style>
|
||||
|
||||
@@ -76,4 +76,17 @@ export default {
|
||||
.mb-15 {
|
||||
margin-bottom: 15px;
|
||||
}
|
||||
|
||||
// 移动端样式
|
||||
.mobile-html {
|
||||
.info-row {
|
||||
height: 0.17rem;
|
||||
}
|
||||
.mb-12 {
|
||||
margin-bottom: 0.12rem;
|
||||
}
|
||||
.mb-15 {
|
||||
margin-bottom: 0.15rem;
|
||||
}
|
||||
}
|
||||
</style>
|
||||
|
||||
@@ -20,4 +20,16 @@ export default {
|
||||
color: #0094FF;
|
||||
}
|
||||
}
|
||||
// 移动端字体大小
|
||||
.mobile-html {
|
||||
.empty {
|
||||
/deep/.ant-empty-image {
|
||||
height: 1rem;
|
||||
margin-bottom: 0.08rem;
|
||||
}
|
||||
.empty-text {
|
||||
font-size: 0.14rem;
|
||||
}
|
||||
}
|
||||
}
|
||||
</style>
|
||||
|
||||
@@ -31,6 +31,12 @@ export default {
|
||||
getPopupContainer: {
|
||||
type: Function,
|
||||
default: (node) => node.parentNode
|
||||
},
|
||||
// 过滤的值
|
||||
filterDictValues: {
|
||||
type: Array,
|
||||
required: false,
|
||||
default: () => []
|
||||
}
|
||||
},
|
||||
data () {
|
||||
@@ -66,14 +72,14 @@ export default {
|
||||
initDictData () {
|
||||
// 优先从缓存中读取字典配置
|
||||
if (getDictItemsFromCache(this.dictCode)) {
|
||||
this.dictOptions = getDictItemsFromCache(this.dictCode)
|
||||
this.dictOptions = (getDictItemsFromCache(this.dictCode) || []).filter(item => !this.filterDictValues.includes(item.value))
|
||||
return
|
||||
}
|
||||
|
||||
// 根据字典Code, 初始化字典数组
|
||||
ajaxGetDictItems(this.dictCode, null).then((res) => {
|
||||
if (res.success) {
|
||||
this.dictOptions = res.result
|
||||
this.dictOptions = (res.result || []).filter(item => !this.filterDictValues.includes(item.value))
|
||||
}
|
||||
})
|
||||
},
|
||||
|
||||
@@ -1,27 +1,6 @@
|
||||
<template>
|
||||
<global-layout @dynamicRouterShow="dynamicRouterShow">
|
||||
<!-- update-begin- author:sunjianlei --- date:20191009 --- for: 提升右键菜单的层级 -->
|
||||
<contextmenu :itemList="menuItemList" :visible.sync="menuVisible" style="z-index: 9999;" @select="onMenuSelect"/>
|
||||
<!-- update-end- author:sunjianlei --- date:20191009 --- for: 提升右键菜单的层级 -->
|
||||
<div class='topHeadertabList'>
|
||||
<a-tabs
|
||||
@contextmenu.native="e => onContextmenu(e)"
|
||||
v-if="multipage"
|
||||
:active-key="activePage"
|
||||
class="tab-layout-tabs "
|
||||
style="height:52px"
|
||||
:hide-add="true"
|
||||
type="editable-card"
|
||||
@change="changePage"
|
||||
@tabClick="tabCallBack"
|
||||
@edit="editPage">
|
||||
<a-tab-pane :id="page.fullPath" :key="page.fullPath" v-for="page in pageList" >
|
||||
<span slot="tab" :pagekey="page.fullPath">{{ page.meta.title}}</span>
|
||||
</a-tab-pane>
|
||||
</a-tabs>
|
||||
</div>
|
||||
|
||||
<div style="margin-left: 24px;">
|
||||
<div :style="isDesktop() && 'margin-left: 24px;'">
|
||||
<!-- update-begin-author:taoyan date:20201221 for:此处删掉transition标签 不知道为什么加上后 页面路由切换的时候即1及菜单切到2及菜单的时候 两个菜单页面会同时出现300-500秒左右 -->
|
||||
<keep-alive v-if="multipage">
|
||||
<router-view v-if="reloadFlag"/>
|
||||
|
||||
@@ -0,0 +1,15 @@
|
||||
/**
|
||||
* 按需加载vant组件
|
||||
*/
|
||||
import Vue from 'vue'
|
||||
|
||||
import {
|
||||
Picker,
|
||||
Popup,
|
||||
Dialog
|
||||
} from 'vant'
|
||||
import 'vant/lib/index.less'
|
||||
Vue.use(Picker)
|
||||
Vue.use(Popup)
|
||||
Vue.prototype.$vantDialog = Dialog
|
||||
Vue.prototype.$vantConfirm = Dialog.confirm
|
||||
@@ -35,11 +35,6 @@ export default {
|
||||
menu: {
|
||||
type: Array,
|
||||
required: true
|
||||
},
|
||||
collapsed: {
|
||||
type: Boolean,
|
||||
required: false,
|
||||
default: false
|
||||
}
|
||||
},
|
||||
data () {
|
||||
@@ -119,7 +114,7 @@ export default {
|
||||
|
||||
// update-begin-author:taoyan date:20190510 for:online表单菜单点击展开的一级目录不对
|
||||
if (!this.selectedKeys || this.selectedKeys[0].indexOf(':') < 0) {
|
||||
this.collapsed ? (this.cachedOpenKeys = openKeys) : (this.openKeys = openKeys)
|
||||
this.openKeys = openKeys
|
||||
}
|
||||
// update-end-author:taoyan date:20190510 for:online表单菜单点击展开的一级目录不对
|
||||
},
|
||||
|
||||
@@ -116,6 +116,7 @@ export default {
|
||||
|
||||
<style lang="less" scoped>
|
||||
.mobile-menu {
|
||||
background-color: #001125;
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
|
||||
@@ -128,8 +129,8 @@ export default {
|
||||
margin: 0;
|
||||
|
||||
li {
|
||||
height: 1.12rem;
|
||||
padding: 0.12rem;
|
||||
height: 0.56rem;
|
||||
padding: 0.06rem;
|
||||
text-align: center;
|
||||
|
||||
.menu-item {
|
||||
@@ -138,13 +139,13 @@ export default {
|
||||
background-size: 100%;
|
||||
background-repeat: no-repeat;
|
||||
background-position: center center;
|
||||
width: .8rem;
|
||||
height: .8rem;
|
||||
width: 0.4rem;
|
||||
height: 0.4rem;
|
||||
font-size: 0;
|
||||
|
||||
img {
|
||||
width: .36rem;
|
||||
height: .36rem;
|
||||
width: 0.18rem;
|
||||
height: 0.18rem;
|
||||
position: absolute;
|
||||
left: 50%;
|
||||
top: 50%;
|
||||
@@ -154,9 +155,9 @@ export default {
|
||||
|
||||
.menu-item-title {
|
||||
font-weight: bold;
|
||||
font-size: 0.2rem;
|
||||
font-size: 0.1rem;
|
||||
color: #FFC97A;
|
||||
line-height: 0.23rem;
|
||||
line-height: 0.12rem;
|
||||
font-style: normal;
|
||||
text-transform: none;
|
||||
word-break: break-all;
|
||||
@@ -167,7 +168,7 @@ export default {
|
||||
font-family: Alimama ShuHeiTi, Alimama ShuHeiTi, sans-serif;
|
||||
color: rgba(255,255,255,0.96);
|
||||
text-shadow: 0 4px 4px rgba(0,0,0,0.25);
|
||||
transform: translateY(-0.1rem);
|
||||
transform: translateY(-0.05rem);
|
||||
}
|
||||
|
||||
// 选中的样式
|
||||
@@ -179,9 +180,9 @@ export default {
|
||||
.menu-item-title {
|
||||
font-family: Alimama ShuHeiTi, Alimama ShuHeiTi, sans-serif;
|
||||
font-weight: bold;
|
||||
font-size: 0.2rem;
|
||||
font-size: 0.1rem;
|
||||
color: #FFC97A;
|
||||
line-height: 0.23rem;
|
||||
line-height: 0.12rem;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
@@ -15,7 +15,6 @@
|
||||
<user-menu :theme="theme"/>
|
||||
<!-- 头部一级菜单 -->
|
||||
<first-level-menu :menu="menus"
|
||||
:collapsed="collapsed"
|
||||
@select="selectFirstLevelMenu"/>
|
||||
</div>
|
||||
<!-- 移动端头部 -->
|
||||
@@ -25,7 +24,7 @@
|
||||
<div class="mobile-header-right">
|
||||
<a-dropdown>
|
||||
<a class="ant-dropdown-link">
|
||||
<a-icon type="setting" />
|
||||
<a-icon type="setting" style="font-size: 0.14rem;line-height: 0.44rem" />
|
||||
</a>
|
||||
<a-menu slot="overlay">
|
||||
<user-menu :theme="theme"/>
|
||||
@@ -295,24 +294,24 @@ export default {
|
||||
}
|
||||
// 移动端
|
||||
.global-header-mobile {
|
||||
height: .88rem;
|
||||
height: 0.44rem;
|
||||
background-color: #001125;
|
||||
background-repeat: no-repeat;
|
||||
background-image: url("~@/assets/images/system-title.png");
|
||||
background-position: center center;
|
||||
background-size: 2.88rem;
|
||||
background-size: 1.44rem;
|
||||
}
|
||||
.mobile-header {
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
height: .88rem;
|
||||
height: 0.44rem;
|
||||
|
||||
.mobile-header-left {
|
||||
width: .88rem;
|
||||
width: 0.44rem;
|
||||
}
|
||||
|
||||
.mobile-header-right {
|
||||
width: .88rem;
|
||||
width: 0.44rem;
|
||||
text-align: center;
|
||||
}
|
||||
}
|
||||
|
||||
@@ -36,7 +36,7 @@
|
||||
</a-layout>
|
||||
|
||||
<!-- 移动端内容布局 -->
|
||||
<a-layout :style="{backgroundColor: '#001125', padding: '.24rem .24rem 1.12rem'}" v-else-if="device === 'mobile'">
|
||||
<a-layout :style="{backgroundColor: '#001125', padding: '0.12rem 0.12rem 0.56rem'}" v-else-if="device === 'mobile'">
|
||||
<!-- layout content -->
|
||||
<a-layout-content :style="{ height: '100%', paddingTop: fixedHeader ? '59px' : '0' }">
|
||||
<slot></slot>
|
||||
@@ -175,7 +175,7 @@ export default {
|
||||
.mobile-footer {
|
||||
position: fixed;
|
||||
bottom: 0;
|
||||
height: 1.12rem;
|
||||
height: 0.56rem;
|
||||
width: 100%;
|
||||
padding: 0;
|
||||
background-color: transparent;
|
||||
|
||||
@@ -1,73 +1,70 @@
|
||||
<template>
|
||||
<div class="user-wrapper" :class="theme">
|
||||
<span class="action">
|
||||
<a class="logout_title" @click="handleHelp">
|
||||
<div class="operate" title="帮助">
|
||||
<img :src="require(`@assets/images/icon/help.png`)" alt="help" class="operate-img">
|
||||
<span class="operate-text">帮助</span>
|
||||
</div>
|
||||
</a>
|
||||
</span>
|
||||
<!-- <header-notice class="action"/>-->
|
||||
<!-- <span style="display:inline-block;padding: 0 0 0 16px">-->
|
||||
<!-- <template v-if='getAvatar()'>-->
|
||||
<!-- <a-avatar class="avatar" size="small" :src="getAvatar()"/>-->
|
||||
<!-- </template>-->
|
||||
<!-- <template v-else>-->
|
||||
<!-- <a-avatar :size="20">-->
|
||||
<!-- <template #icon> <a-icon type="user"></a-icon></template>-->
|
||||
<!-- </a-avatar>-->
|
||||
<!-- </template>-->
|
||||
<!-- </span>-->
|
||||
<a-dropdown>
|
||||
<div class="user-wrapper" :class="[theme, {mobile: isMobile()}]">
|
||||
<template v-if="isDesktop()">
|
||||
<span class="action">
|
||||
<a class="logout_title" @click="handleHelp">
|
||||
<div class="operate" title="帮助">
|
||||
<img :src="require(`@assets/images/icon/help.png`)" alt="help" class="operate-img">
|
||||
<span class="operate-text">帮助</span>
|
||||
</div>
|
||||
</a>
|
||||
</span>
|
||||
<a-dropdown>
|
||||
<span class=" small-action">
|
||||
<div class="operate" :title="nickname()">
|
||||
<img :src="require(`@assets/images/icon/user.png`)" alt="user" class="operate-img">
|
||||
<span class="operate-text">{{ nickname() }}</span>
|
||||
</div>
|
||||
</span>
|
||||
<a-menu slot="overlay" class="user-dropdown-menu-wrapper">
|
||||
<!-- <a-menu-item key="0">-->
|
||||
<!-- <router-link :to="{ name: 'account-center' }">-->
|
||||
<!-- <a-icon type="user"/>-->
|
||||
<!-- <span>个人中心</span>-->
|
||||
<!-- </router-link>-->
|
||||
<!-- </a-menu-item>-->
|
||||
<!-- <a-menu-item key="1">-->
|
||||
<!-- <router-link :to="{ name: 'account-settings-base' }">-->
|
||||
<!-- <a-icon type="setting"/>-->
|
||||
<!-- <span>账户设置</span>-->
|
||||
<!-- </router-link>-->
|
||||
<!-- </a-menu-item>-->
|
||||
<!-- <a-menu-item key="3" @click="systemSetting">-->
|
||||
<!-- <a-icon type="tool"/>-->
|
||||
<!-- <span>系统设置</span>-->
|
||||
<!-- </a-menu-item>-->
|
||||
<!-- <a-menu-item key="4" @click="updatePassword">-->
|
||||
<!-- <a-icon type="setting"/>-->
|
||||
<!-- <span>密码修改</span>-->
|
||||
<!-- </a-menu-item>-->
|
||||
<!-- <a-menu-item key="5" @click="updateCurrentDepart">-->
|
||||
<!-- <a-icon type="cluster"/>-->
|
||||
<!-- <span>切换部门</span>-->
|
||||
<!-- </a-menu-item>-->
|
||||
<a-menu-item key="6" @click="clearCache">
|
||||
<a-icon type="sync"/>
|
||||
<span>清理缓存</span>
|
||||
</a-menu-item>
|
||||
<!-- <a-menu-item key="2" disabled>
|
||||
<a-icon type="setting"/>
|
||||
<span>测试</span>
|
||||
</a-menu-item>
|
||||
<a-menu-divider/>-->
|
||||
<a-menu-item key="3">
|
||||
<a href="javascript:;" @click="handleLogout">
|
||||
<a-icon type="logout"/>
|
||||
<span>退出登录</span>
|
||||
</a>
|
||||
</a-menu-item>
|
||||
</a-menu>
|
||||
</a-dropdown>
|
||||
<a-menu slot="overlay" class="user-dropdown-menu-wrapper">
|
||||
<!-- <a-menu-item key="0">-->
|
||||
<!-- <router-link :to="{ name: 'account-center' }">-->
|
||||
<!-- <a-icon type="user"/>-->
|
||||
<!-- <span>个人中心</span>-->
|
||||
<!-- </router-link>-->
|
||||
<!-- </a-menu-item>-->
|
||||
<!-- <a-menu-item key="1">-->
|
||||
<!-- <router-link :to="{ name: 'account-settings-base' }">-->
|
||||
<!-- <a-icon type="setting"/>-->
|
||||
<!-- <span>账户设置</span>-->
|
||||
<!-- </router-link>-->
|
||||
<!-- </a-menu-item>-->
|
||||
<!-- <a-menu-item key="3" @click="systemSetting">-->
|
||||
<!-- <a-icon type="tool"/>-->
|
||||
<!-- <span>系统设置</span>-->
|
||||
<!-- </a-menu-item>-->
|
||||
<!-- <a-menu-item key="4" @click="updatePassword">-->
|
||||
<!-- <a-icon type="setting"/>-->
|
||||
<!-- <span>密码修改</span>-->
|
||||
<!-- </a-menu-item>-->
|
||||
<!-- <a-menu-item key="5" @click="updateCurrentDepart">-->
|
||||
<!-- <a-icon type="cluster"/>-->
|
||||
<!-- <span>切换部门</span>-->
|
||||
<!-- </a-menu-item>-->
|
||||
<a-menu-item key="6" @click="clearCache">
|
||||
<a-icon type="sync"/>
|
||||
<span>清理缓存</span>
|
||||
</a-menu-item>
|
||||
<!-- <a-menu-item key="2" disabled>
|
||||
<a-icon type="setting"/>
|
||||
<span>测试</span>
|
||||
</a-menu-item>
|
||||
<a-menu-divider/>-->
|
||||
<a-menu-item key="3">
|
||||
<a href="javascript:;" @click="handleLogout">
|
||||
<a-icon type="logout"/>
|
||||
<span>退出登录</span>
|
||||
</a>
|
||||
</a-menu-item>
|
||||
</a-menu>
|
||||
</a-dropdown>
|
||||
</template>
|
||||
<template v-else-if="isMobile()">
|
||||
<a href="javascript:;" @click="handleLogout">
|
||||
<a-icon type="logout"/>
|
||||
<span>退出登录</span>
|
||||
</a>
|
||||
</template>
|
||||
<user-password ref="userPassword"></user-password>
|
||||
<depart-select ref="departSelect" :closable="true" title="部门切换"></depart-select>
|
||||
<setting-drawer ref="settingDrawer" :closable="true" title="系统设置"></setting-drawer>
|
||||
@@ -161,7 +158,23 @@ export default {
|
||||
},
|
||||
handleLogout () {
|
||||
const that = this
|
||||
|
||||
// 移动端登出弹框
|
||||
if (this.isMobile()) {
|
||||
this.$vantConfirm({
|
||||
title: '提示',
|
||||
message: '真的要注销登录吗 ?'
|
||||
}).then(() => {
|
||||
return that.Logout({}).then(() => {
|
||||
window.location.replace('/user/login')
|
||||
}).catch(err => {
|
||||
that.$message.error({
|
||||
title: '错误',
|
||||
description: err.message
|
||||
})
|
||||
})
|
||||
}).catch(() => {})
|
||||
return
|
||||
}
|
||||
this.$confirm({
|
||||
title: '提示',
|
||||
content: '真的要注销登录吗 ?',
|
||||
@@ -285,6 +298,11 @@ export default {
|
||||
}
|
||||
}
|
||||
}
|
||||
.user-wrapper.mobile {
|
||||
height: auto;
|
||||
font-size: 0.12rem;
|
||||
padding: 0.08rem;
|
||||
}
|
||||
/* update-end author:sunjianlei date:20191220 for: 解决全局样式冲突问题 */
|
||||
/* update_end author:zhaoxin date:20191129 for: 让搜索框颜色能随主题颜色变换*/
|
||||
</style>
|
||||
|
||||
@@ -0,0 +1,89 @@
|
||||
<template>
|
||||
<div>
|
||||
<j-dict-select-tag v-bind="$attrs"
|
||||
v-on="$listeners"
|
||||
:placeholder="placeholder"
|
||||
:open="false"
|
||||
ref="dictSelect"
|
||||
:value="value"
|
||||
@click.capture.native="onOpen"></j-dict-select-tag>
|
||||
<!-- 移动端下拉框 -->
|
||||
<van-popup v-model="show"
|
||||
class="dict-picker"
|
||||
position="bottom"
|
||||
safe-area-inset-bottom>
|
||||
<van-picker
|
||||
:loading="loading"
|
||||
:title="placeholder"
|
||||
:columns="dictOptions"
|
||||
show-toolbar
|
||||
@confirm="onConfirm"
|
||||
@cancel="onCancel"
|
||||
/>
|
||||
</van-popup>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
|
||||
export default {
|
||||
name: 'DictPicker',
|
||||
props: {
|
||||
placeholder: {
|
||||
type: String,
|
||||
required: false,
|
||||
default: ''
|
||||
},
|
||||
value: {
|
||||
type: String,
|
||||
required: false,
|
||||
default: undefined
|
||||
}
|
||||
},
|
||||
data () {
|
||||
return {
|
||||
show: false,
|
||||
loading: false,
|
||||
dictOptions: []
|
||||
}
|
||||
},
|
||||
methods: {
|
||||
// 打开下拉，并且获取下拉数据
|
||||
onOpen () {
|
||||
this.show = true
|
||||
this.dictOptions = [
|
||||
{ text: '请选择', value: undefined },
|
||||
...this.$refs.dictSelect.getCurrentDictOptions()
|
||||
]
|
||||
},
|
||||
// 确认
|
||||
onConfirm (value) {
|
||||
this.$emit('change', value.value)
|
||||
this.onCancel()
|
||||
},
|
||||
// 取消
|
||||
onCancel () {
|
||||
this.show = false
|
||||
}
|
||||
},
|
||||
model: {
|
||||
prop: 'value',
|
||||
event: 'change'
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
||||
<style lang="less" scoped>
|
||||
@import "~@assets/less/modifyLessVars.less";
|
||||
.dict-picker {
|
||||
/deep/.van-picker__confirm {
|
||||
color: #fff;
|
||||
}
|
||||
/deep/.van-picker__cancel {
|
||||
color: @text-color-secondary
|
||||
}
|
||||
/deep/.van-picker__mask {
|
||||
background: transparent;
|
||||
}
|
||||
}
|
||||
</style>
|
||||
@@ -0,0 +1,108 @@
|
||||
<template>
|
||||
<div>
|
||||
<a-select v-bind="$attrs"
|
||||
v-on="$listeners"
|
||||
:placeholder="placeholder"
|
||||
:open="false"
|
||||
:value="value"
|
||||
@click.capture.native="onOpen">
|
||||
<a-select-option v-for="item in options" :key="item[valueKey]" :value="item[valueKey]">{{item[labelKey]}}</a-select-option>
|
||||
</a-select>
|
||||
<!-- 移动端下拉框 -->
|
||||
<van-popup v-model="show"
|
||||
class="select-picker"
|
||||
position="bottom"
|
||||
safe-area-inset-bottom>
|
||||
<van-picker
|
||||
:loading="loading"
|
||||
:title="placeholder"
|
||||
:columns="options"
|
||||
show-toolbar
|
||||
:value-key="labelKey"
|
||||
@confirm="onConfirm"
|
||||
@cancel="onCancel"
|
||||
/>
|
||||
</van-popup>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
|
||||
export default {
|
||||
name: 'SelectPicker',
|
||||
props: {
|
||||
placeholder: {
|
||||
type: String,
|
||||
required: false,
|
||||
default: ''
|
||||
},
|
||||
list: {
|
||||
type: Array,
|
||||
required: false,
|
||||
default: () => []
|
||||
},
|
||||
// 显示的字段
|
||||
labelKey: {
|
||||
type: String,
|
||||
required: false,
|
||||
default: 'text'
|
||||
},
|
||||
// 实际的值
|
||||
valueKey: {
|
||||
type: String,
|
||||
required: false,
|
||||
default: 'id'
|
||||
},
|
||||
value: {
|
||||
type: String,
|
||||
required: false,
|
||||
default: undefined
|
||||
}
|
||||
},
|
||||
data () {
|
||||
return {
|
||||
show: false,
|
||||
loading: false,
|
||||
options: []
|
||||
}
|
||||
},
|
||||
methods: {
|
||||
// 打开下拉，并且获取下拉数据
|
||||
onOpen () {
|
||||
this.show = true
|
||||
this.options = [
|
||||
{ [this.labelKey]: '请选择', [this.valueKey]: undefined },
|
||||
...this.list
|
||||
]
|
||||
},
|
||||
// 确认
|
||||
onConfirm (value) {
|
||||
this.$emit('change', value[this.valueKey])
|
||||
this.onCancel()
|
||||
},
|
||||
// 取消
|
||||
onCancel () {
|
||||
this.show = false
|
||||
}
|
||||
},
|
||||
model: {
|
||||
prop: 'value',
|
||||
event: 'change'
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
||||
<style lang="less" scoped>
|
||||
@import "~@assets/less/modifyLessVars.less";
|
||||
.select-picker {
|
||||
/deep/.van-picker__confirm {
|
||||
color: #fff;
|
||||
}
|
||||
/deep/.van-picker__cancel {
|
||||
color: @text-color-secondary
|
||||
}
|
||||
/deep/.van-picker__mask {
|
||||
background: transparent;
|
||||
}
|
||||
}
|
||||
</style>
|
||||
@@ -33,3 +33,10 @@ export const msgType = {
|
||||
hostToDevice: { label: 'Host-》Device', value: 'hostToDevice' },
|
||||
deviceToHost: { label: 'Device-》Host', value: 'deviceToHost' }
|
||||
}
|
||||
|
||||
// 移动端设备类型字典
|
||||
export const deviceType = {
|
||||
rtuController: { label: 'RTU控制器', value: '1' },
|
||||
transmissionTerminal: { label: '天然气数据远传终端', value: '2' },
|
||||
wellheadEquipment: { label: '井口设备', value: '3' }
|
||||
}
|
||||
|
||||
@@ -48,6 +48,8 @@ import '@/components/jero/JVxeTable/install'
|
||||
import '@/components/JVxeCells/install'
|
||||
// 表单验证
|
||||
import { rules } from '@/utils/rules'
|
||||
// 导入vant
|
||||
import '@/components/lazy_vant'
|
||||
|
||||
require('@/components/onlineForm/onlineForm')
|
||||
require('@/components/onlineForm/OnlineForm.css')
|
||||
|
||||
@@ -1,15 +1,551 @@
|
||||
<template>
|
||||
<div>
|
||||
Home
|
||||
</div>
|
||||
<a-spin :spinning="loading">
|
||||
<!-- 查询区域 -->
|
||||
<div class="mb-12 header-search">
|
||||
<a-form>
|
||||
<a-row type="flex" justify="space-between">
|
||||
<a-col flex="2.51rem">
|
||||
<a-form-item label="设备类型" :labelCol="{span:6}" :wrapperCol="{span:18}">
|
||||
<dict-picker :triggerChange="true"
|
||||
style="width: 100%"
|
||||
class="search-input"
|
||||
dictCode="device_type"
|
||||
:filter-dict-values="[deviceType.rtuController.value]"
|
||||
@change="changeDeviceType"
|
||||
v-model="queryParam.deviceType"
|
||||
placeholder="请选择设备类型"/>
|
||||
</a-form-item>
|
||||
</a-col>
|
||||
<a-col flex="0.88rem">
|
||||
<span class="search-operate-btns custom-btns-box">
|
||||
<a-button class="btn-blue" type="primary" @click="searchQuery">
|
||||
<span class="btn-text">检索设备</span>
|
||||
</a-button>
|
||||
</span>
|
||||
</a-col>
|
||||
</a-row>
|
||||
</a-form>
|
||||
</div>
|
||||
<div v-if="hasData" class="all-data-container">
|
||||
<!-- 井口设备 -->
|
||||
<template v-if="lastQuery.deviceType === deviceType.wellheadEquipment.value">
|
||||
<!-- 油井基础信息 -->
|
||||
<div class="mb-12">
|
||||
<common-card title="油井基础信息">
|
||||
<common-card-info :data="allData"
|
||||
:left-list="labelData.oilWellLeft || []"
|
||||
:right-list="labelData.oilWellRight || []"
|
||||
gutter="12"/>
|
||||
</common-card>
|
||||
</div>
|
||||
<!-- 油井实时参数 -->
|
||||
<div class="mb-12">
|
||||
<common-card title="油井实时参数">
|
||||
<common-card-info :data="allData"
|
||||
:left-list="labelData.oilWellsRealTimeParamsLeft || []"
|
||||
:right-list="labelData.oilWellsRealTimeParamsRight || []"/>
|
||||
</common-card>
|
||||
</div>
|
||||
<!-- 实时示功图 -->
|
||||
<div class="mb-12">
|
||||
<common-card title="实时示功图">
|
||||
<div slot="extra" class="indicator-diagram-extra" v-if="oilWellRealTimeData['实时示功图']">
|
||||
<span class="time">{{ oilWellRealTimeData['实时示功图']['时间'] }}</span>
|
||||
</div>
|
||||
<responsive-chart ref="indicatorDiagram" key="indicatorDiagram" height="2.03rem"/>
|
||||
</common-card>
|
||||
</div>
|
||||
<!-- 底部查询 -->
|
||||
<div class="bottom-search">
|
||||
<a-form>
|
||||
<a-row type="flex" justify="space-between">
|
||||
<a-col flex="2.59rem">
|
||||
<a-form-item :labelCol="{span:2}" :wrapperCol="{span:22}">
|
||||
<span slot="label" class="vertical-label">油<br/>井</span>
|
||||
<dict-picker :triggerChange="true"
|
||||
class="search-input mb-8"
|
||||
style="width: 100%;"
|
||||
dictCode="wellhead_area"
|
||||
@change="changeWellSite"
|
||||
v-model="queryParam.wellheadArea"
|
||||
placeholder="请选择所属井场"/>
|
||||
<select-picker class="search-input"
|
||||
style="width: 100%"
|
||||
v-model="queryParam.singleWell"
|
||||
placeholder="请选择单井"
|
||||
label-key="wellheadName"
|
||||
:list="singleWellList"
|
||||
allowClear/>
|
||||
</a-form-item>
|
||||
</a-col>
|
||||
<a-col flex="0.8rem">
|
||||
<span class="search-operate-btns custom-btns-box">
|
||||
<a-button class="btn-blue bottom-search-btn mb-8" type="primary" @click="searchQuery">
|
||||
<span class="btn-text">查询</span>
|
||||
</a-button>
|
||||
<div class="flex-between">
|
||||
<a-button class="btn-blue btn-blue-small" type="primary" @click="searchQuery">
|
||||
<span class="btn-text"><a-icon type="left" /></span>
|
||||
</a-button>
|
||||
<a-button class="btn-blue btn-blue-small" type="primary" @click="searchQuery">
|
||||
<span class="btn-text"><a-icon type="right" /></span>
|
||||
</a-button>
|
||||
</div>
|
||||
</span>
|
||||
</a-col>
|
||||
</a-row>
|
||||
</a-form>
|
||||
</div>
|
||||
</template>
|
||||
<!-- 天然气远程终端 -->
|
||||
<template v-else-if="lastQuery.deviceType === deviceType.transmissionTerminal.value">
|
||||
<!-- 油井基础信息 -->
|
||||
<div class="mb-12">
|
||||
<common-card title="门站信息">
|
||||
<common-card-info :data="allData"
|
||||
:left-list="labelData.gateStationLeft || []"
|
||||
:right-list="labelData.gateStationRight || []"
|
||||
gutter="12"/>
|
||||
</common-card>
|
||||
</div>
|
||||
<!-- 实时运行参数 -->
|
||||
<div class="mb-12">
|
||||
<common-card title="实时运行参数">
|
||||
<template v-for="(item, index) in allData.realTimeRunningParamsList">
|
||||
<common-card-info :data="item"
|
||||
:key="(item.id || item.channelNo) + 'info'"
|
||||
:left-list="labelData.realTimeRunningParamsLeft || []"
|
||||
:right-list="labelData.realTimeRunningParamsRight || []"/>
|
||||
<div class="divider-horizontal"
|
||||
v-if="index !== allData.realTimeRunningParamsList.length - 1"
|
||||
:key="(item.id || item.channelNo) + 'horizontal-line'"></div>
|
||||
</template>
|
||||
</common-card>
|
||||
</div>
|
||||
<!-- 底部查询 -->
|
||||
<div class="bottom-search">
|
||||
<a-form>
|
||||
<a-row type="flex" justify="space-between">
|
||||
<a-col flex="2.59rem">
|
||||
<a-form-item :labelCol="{span:4}" :wrapperCol="{span:20}">
|
||||
<span slot="label" class="vertical-label">场站<br/>门站</span>
|
||||
<dict-picker :triggerChange="true"
|
||||
class="search-input mb-8"
|
||||
style="width: 100%"
|
||||
dictCode="wellhead_area"
|
||||
@change="changeWellSite"
|
||||
v-model="queryParam.wellheadArea"
|
||||
placeholder="请选择场站门站"/>
|
||||
<select-picker class="search-input"
|
||||
style="width: 100%"
|
||||
v-model="queryParam.singleWell"
|
||||
placeholder="请选择数采设备"
|
||||
label-key="wellheadName"
|
||||
:list="singleWellList"
|
||||
allowClear/>
|
||||
</a-form-item>
|
||||
</a-col>
|
||||
<a-col flex="0.8rem">
|
||||
<span class="search-operate-btns custom-btns-box">
|
||||
<a-button class="btn-blue bottom-search-btn mb-8" type="primary" @click="searchQuery">
|
||||
<span class="btn-text">查询</span>
|
||||
</a-button>
|
||||
<div class="flex-between">
|
||||
<a-button class="btn-blue btn-blue-small" type="primary" @click="searchQuery">
|
||||
<span class="btn-text"><a-icon type="left" /></span>
|
||||
</a-button>
|
||||
<a-button class="btn-blue btn-blue-small" type="primary" @click="searchQuery">
|
||||
<span class="btn-text"><a-icon type="right" /></span>
|
||||
</a-button>
|
||||
</div>
|
||||
</span>
|
||||
</a-col>
|
||||
</a-row>
|
||||
</a-form>
|
||||
</div>
|
||||
</template>
|
||||
</div>
|
||||
<!-- 没有数据查询为空 -->
|
||||
<div v-else class="empty-box">
|
||||
<common-empty/>
|
||||
</div>
|
||||
</a-spin>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
// 默认写死数据
|
||||
import CommonCard from '@comp/CommonCard'
|
||||
import CommonCardInfo from '@comp/CommonCardInfo'
|
||||
import ResponsiveChart from '@comp/ResponsiveChart'
|
||||
import CommonEmpty from '@comp/CommonEmpty'
|
||||
import { getOilWellRealTimeData, getWellheadList } from '@api/systemOverview'
|
||||
import { generateBaseOption } from '@/utils/charts'
|
||||
import * as echarts from 'echarts'
|
||||
import { deviceType, wellheadType } from '@/enums/commonEnums'
|
||||
import DictPicker from '@comp/vant/DictPicker'
|
||||
import SelectPicker from '@comp/vant/SelectPicker'
|
||||
|
||||
const staticData = {
|
||||
wellName: '华H62-1',
|
||||
pumpingType: '抽油机',
|
||||
wellType: '水平井',
|
||||
wellField: '华H62井场',
|
||||
productionLayer: '长_7_2',
|
||||
productionDate: '2020-03-27',
|
||||
realTimeMoisture: '11.1',
|
||||
hourlyMoisture: '11.8',
|
||||
twentyFourHourMoisture: '12.3',
|
||||
dynamicLiquidPressure: '1.55',
|
||||
dynamicLiquidSoundVelocity: '370',
|
||||
dynamicLiquidDepth: '96',
|
||||
timeRate: '100',
|
||||
openingDuration: '15时0分',
|
||||
dailyWaterProduction: '4.34',
|
||||
dailyLiquidProduction: '19.09',
|
||||
dailyOilProduction: '14.75',
|
||||
electricityUsage: '0.00',
|
||||
wellCondition: '功图错误',
|
||||
pumpDepth: '1340',
|
||||
pumpDiameter: '57',
|
||||
pumpEfficiency: '20.05',
|
||||
comment: '当前工作状态良好，请按时检查',
|
||||
pumpType: '常规泵',
|
||||
// 门站信息
|
||||
stationName: '济源1#2号站',
|
||||
region: '济宁区域',
|
||||
terminalType: '电池供电设备',
|
||||
flowmetersNumber: '30',
|
||||
dataAcquisitionTerminals: '5',
|
||||
equipmentInstallationTime: '2024-12-25',
|
||||
// 实时运行参数
|
||||
realTimeRunningParamsList: [
|
||||
...new Array(4).fill(0).map((_, i) => {
|
||||
return {
|
||||
channelNo: '济源1#通道' + i,
|
||||
cumulativeFlow: '1232222',
|
||||
instantaneousStandardCondition: '236.33',
|
||||
realTimeTemperature: '35',
|
||||
realTimePressure: '1.23',
|
||||
instantaneousWorkingConditions: '256.33'
|
||||
}
|
||||
})
|
||||
]
|
||||
}
|
||||
|
||||
export default {
|
||||
name: 'Home'
|
||||
name: 'Home',
|
||||
components: { SelectPicker, DictPicker, CommonEmpty, ResponsiveChart, CommonCardInfo, CommonCard },
|
||||
data () {
|
||||
return {
|
||||
deviceType,
|
||||
loading: false,
|
||||
queryParam: {},
|
||||
lastQuery: {},
|
||||
defaultId: 'default', // 默认数据的id
|
||||
hasData: false, // 有没有请求到数据
|
||||
// 油井实时数据
|
||||
oilWellRealTimeData: {},
|
||||
// 所有面板展示的数据
|
||||
allData: {},
|
||||
// 定时器，用于10秒请求一次
|
||||
timer: null,
|
||||
// 页面显示label和对应数据字段
|
||||
labelData: {
|
||||
// 油井基础信息
|
||||
oilWellLeft: [
|
||||
{ label: '油井名称', valueField: 'wellName' },
|
||||
{ label: '机采类型', valueField: 'pumpingType' },
|
||||
{ label: '井型', valueField: 'wellType' }
|
||||
],
|
||||
oilWellRight: [
|
||||
{ label: '所属井场', valueField: 'wellField' },
|
||||
{ label: '开采层位', valueField: 'productionLayer' },
|
||||
{ label: '投产日期', valueField: 'productionDate' }
|
||||
],
|
||||
// 油井实时参数
|
||||
oilWellsRealTimeParamsLeft: [
|
||||
{ label: '油压', valueField: 'oilPressure', unit: 'MPa' },
|
||||
{ label: 'A相电流', valueField: 'currentA', unit: 'A' },
|
||||
{ label: 'B相电流', valueField: 'currentB', unit: 'A' },
|
||||
{ label: 'C相电流', valueField: 'currentC', unit: 'A' },
|
||||
{ label: '有功功率', valueField: 'activePower', unit: 'KW' },
|
||||
{ label: '功率因素', valueField: 'powerFactor', unit: '' },
|
||||
{ label: '最大载荷', valueField: 'maxLoad', unit: 'KN' },
|
||||
{ label: '冲程', valueField: 'stroke', unit: 'm' }
|
||||
],
|
||||
oilWellsRealTimeParamsRight: [
|
||||
{ label: '套压', valueField: 'casingPressure', unit: 'MPa' },
|
||||
{ label: 'A相电压', valueField: 'voltageA', unit: 'V' },
|
||||
{ label: 'B相电压', valueField: 'voltageB', unit: 'V' },
|
||||
{ label: 'C相电压', valueField: 'voltageC', unit: 'V' },
|
||||
{ label: '无功功率', valueField: 'reactivePower', unit: 'KW' },
|
||||
{ label: '输出频率', valueField: 'outputFrequency', unit: 'Hz' },
|
||||
{ label: '最小载荷', valueField: 'minLoad', unit: 'KN' },
|
||||
{ label: '冲次', valueField: 'strokeCount', unit: '次/分' }
|
||||
],
|
||||
// 门站信息
|
||||
gateStationLeft: [
|
||||
{ label: '场站名称', valueField: 'stationName' },
|
||||
{ label: '所属区域', valueField: 'region' },
|
||||
{ label: '终端类型', valueField: 'terminalType' }
|
||||
],
|
||||
gateStationRight: [
|
||||
{ label: '流量计数量', valueField: 'flowmetersNumber', unit: '台' },
|
||||
{ label: '数采终端数量', valueField: 'dataAcquisitionTerminals', unit: '台' },
|
||||
{ label: '设备安装时间', valueField: 'equipmentInstallationTime', unit: '' }
|
||||
],
|
||||
// 实时运行参数
|
||||
realTimeRunningParamsLeft: [
|
||||
{ label: '通道编号', valueField: 'channelNo', unit: '' },
|
||||
{ label: '累计流量', valueField: 'cumulativeFlow', unit: 'm³' },
|
||||
{ label: '标况瞬时', valueField: 'instantaneousStandardCondition', unit: 'm³/d' }
|
||||
],
|
||||
realTimeRunningParamsRight: [
|
||||
{ label: '实时温度', valueField: 'realTimeTemperature', unit: '℃' },
|
||||
{ label: '实时压力', valueField: 'realTimePressure', unit: 'Mpa' },
|
||||
{ label: '工况瞬时', valueField: 'instantaneousWorkingConditions', unit: 'm³/d' }
|
||||
]
|
||||
},
|
||||
// 油井下拉
|
||||
singleWellList: []
|
||||
}
|
||||
},
|
||||
mounted () {
|
||||
this.searchQuery()
|
||||
},
|
||||
beforeDestroy () {
|
||||
clearInterval(this.timer)
|
||||
},
|
||||
methods: {
|
||||
searchQuery () {
|
||||
const params = Object.assign({}, this.queryParam)
|
||||
// 保存最后一次搜索参数
|
||||
this.lastQuery = params
|
||||
// 根据设备类型区分
|
||||
switch (params.deviceType + '') {
|
||||
// 天然气数据远传终端
|
||||
case deviceType.transmissionTerminal.value:
|
||||
this.loadOilWellRealTimeData()
|
||||
clearInterval(this.timer)
|
||||
this.timer = null
|
||||
break
|
||||
// 井口设备
|
||||
case deviceType.wellheadEquipment.value:
|
||||
// 每10秒请求一次实时数据
|
||||
this.loadOilWellRealTimeData()
|
||||
clearInterval(this.timer)
|
||||
this.timer = setInterval(() => {
|
||||
this.loadOilWellRealTimeData()
|
||||
}, 1000 * 10)
|
||||
break
|
||||
default:
|
||||
// 如果没有就置空数据，不请求实时数据
|
||||
this.allData = {}
|
||||
clearInterval(this.timer)
|
||||
this.timer = null
|
||||
this.hasData = false
|
||||
return
|
||||
}
|
||||
},
|
||||
// 加载实时数据(实时示功图)(每10s请求一次)
|
||||
loadOilWellRealTimeData () {
|
||||
this.loading = true
|
||||
getOilWellRealTimeData({ id: this.defaultId }).then(res => {
|
||||
if (res.success) {
|
||||
this.hasData = !!res.result
|
||||
const data = res.result || {}
|
||||
this.oilWellRealTimeData = data
|
||||
// 将油井实时参数放进全部数据中
|
||||
this.allData = Object.assign({}, staticData, data['油井实时参数'])
|
||||
this.initIndicatorDiagram(data['实时示功图'])
|
||||
} else {
|
||||
this.$message.warning(res.message)
|
||||
}
|
||||
}).finally(() => {
|
||||
this.loading = false
|
||||
})
|
||||
},
|
||||
// 初始化 实时示功图
|
||||
initIndicatorDiagram (data) {
|
||||
// 没有渲染出组件就不执行
|
||||
if (!this.$refs.indicatorDiagram) {
|
||||
return
|
||||
}
|
||||
// 置空数据
|
||||
if (!data || Object.keys(data).length === 0) {
|
||||
this.$refs.indicatorDiagram.updateMyChartOption()
|
||||
return
|
||||
}
|
||||
// 获取基础配置
|
||||
const legendData = ['上冲程', '下冲程']
|
||||
const option = generateBaseOption()
|
||||
option.legend.data = legendData
|
||||
option.xAxis[0].data = data['X轴']
|
||||
option.yAxis[0].name = '载荷(KN)'
|
||||
option.yAxis[0].nameTextStyle.padding = [0, 0, 0, 5]
|
||||
option.series = [
|
||||
{
|
||||
name: legendData[0],
|
||||
type: 'line',
|
||||
stack: 'upStroke',
|
||||
color: '#FF5353',
|
||||
symbol: 'none',
|
||||
smooth: true,
|
||||
areaStyle: {
|
||||
color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
|
||||
{ offset: 0, color: 'rgba(255,83,83,0.2)' },
|
||||
{ offset: 1, color: 'rgba(255,83,83,0)' }
|
||||
])
|
||||
},
|
||||
data: data['上冲程']
|
||||
},
|
||||
{
|
||||
name: legendData[1],
|
||||
type: 'line',
|
||||
stack: 'downStroke',
|
||||
color: '#0094FF',
|
||||
symbol: 'none',
|
||||
smooth: true,
|
||||
areaStyle: {
|
||||
color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
|
||||
{ offset: 0, color: 'rgba(0,148,255,0.2)' },
|
||||
{ offset: 1, color: 'rgba(0,148,255,0)' }
|
||||
])
|
||||
},
|
||||
data: data['下冲程']
|
||||
}
|
||||
]
|
||||
// 设置数据
|
||||
JSON.stringify(option).replaceAll('px', 'rem')
|
||||
this.$refs.indicatorDiagram && this.$refs.indicatorDiagram.updateMyChartOption(option)
|
||||
},
|
||||
// 油井下拉
|
||||
loadOilWellList (wellheadArea) {
|
||||
getWellheadList({
|
||||
wellheadArea: wellheadArea,
|
||||
wellheadType: wellheadType.oil.value
|
||||
}).then(res => {
|
||||
if (res.success) {
|
||||
this.singleWellList = res.result || []
|
||||
}
|
||||
})
|
||||
},
|
||||
// 修改井场获取油井下拉
|
||||
changeWellSite (value) {
|
||||
if (value) {
|
||||
this.loadOilWellList(value)
|
||||
} else {
|
||||
this.singleWellList = []
|
||||
this.$set(this.queryParam, 'singleWell', undefined)
|
||||
}
|
||||
},
|
||||
// 修改设备类型把底部表单置空
|
||||
changeDeviceType (value) {
|
||||
this.queryParam = {
|
||||
deviceType: value
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
||||
<style lang="less" scoped>
|
||||
/deep/ .ant-form-item {
|
||||
margin-bottom: 0;
|
||||
font-size: 0;
|
||||
}
|
||||
.header-search {
|
||||
/deep/ .ant-form-item-label {
|
||||
line-height: 0.36rem;
|
||||
text-align: left;
|
||||
padding: 0;
|
||||
}
|
||||
// 输入框错位
|
||||
/deep/ .ant-form-item-control {
|
||||
height: 0.36rem;
|
||||
}
|
||||
/deep/ .ant-form-item-control-wrapper {
|
||||
font-size: 0;
|
||||
}
|
||||
/deep/.van-cell {
|
||||
height: 100%;
|
||||
padding: 0;
|
||||
background-color: transparent;
|
||||
|
||||
.van-field__label {
|
||||
padding: 0.07rem 0;
|
||||
width: 0.56rem;
|
||||
height: 0.22rem;
|
||||
font-family: PingFang SC, PingFang SC, sans-serif;
|
||||
font-weight: 400;
|
||||
font-size: 0.14rem;
|
||||
color: #FFFFFF;
|
||||
line-height: 0.22rem;
|
||||
}
|
||||
.van-field__value {
|
||||
padding: 0.07rem 0.12rem;
|
||||
width: 1.83rem;
|
||||
height: 0.36rem;
|
||||
}
|
||||
}
|
||||
}
|
||||
// 展示数据的容器空出来底部搜索的高度
|
||||
.all-data-container {
|
||||
margin-bottom: 1.12rem;
|
||||
}
|
||||
|
||||
.bottom-search {
|
||||
height: 1.12rem;
|
||||
width: 100%;
|
||||
padding: 0.16rem 0.12rem;
|
||||
position: fixed;
|
||||
overflow: hidden;
|
||||
z-index: 2;
|
||||
left: 0;
|
||||
bottom: 0.56rem;
|
||||
background-color: #001125;
|
||||
|
||||
// 实现垂直居中 label
|
||||
/deep/.ant-form-item-label {
|
||||
padding: 0;
|
||||
}
|
||||
.vertical-label {
|
||||
display: block;
|
||||
margin: 0.18rem 0;
|
||||
font-family: PingFang SC, PingFang SC, sans-serif;
|
||||
font-weight: 400;
|
||||
font-size: 0.14rem;
|
||||
color: #FFFFFF;
|
||||
line-height: 0.22rem;
|
||||
text-align: left;
|
||||
}
|
||||
.bottom-search-btn {
|
||||
width: 0.8rem !important;
|
||||
}
|
||||
}
|
||||
|
||||
// 实时示功图头部
|
||||
.indicator-diagram-extra {
|
||||
|
||||
.info-row .info-label,
|
||||
.info-row .info-value,
|
||||
.time {
|
||||
font-family: Rubik, Rubik, sans-serif;
|
||||
font-weight: 400;
|
||||
font-size: 0.13rem;
|
||||
color: #D0DEEE;
|
||||
line-height: 0.15rem;
|
||||
}
|
||||
|
||||
.info-row .info-value {
|
||||
color: #2EE4FD;
|
||||
}
|
||||
.divider-vertical {
|
||||
width: 0.01rem;
|
||||
height: 0.12rem;
|
||||
background: rgba(108,128,151,0.3);
|
||||
margin: 0 0.12rem;
|
||||
display: inline-block;
|
||||
}
|
||||
}
|
||||
</style>
|
||||
|
||||
@@ -1,13 +1,591 @@
|
||||
<template>
|
||||
<div>manage</div>
|
||||
<a-spin :spinning="loading">
|
||||
<div class="mb-12">
|
||||
<common-card title="系统设备概况">
|
||||
<div class="overview-grid">
|
||||
<div class="overview-card" v-for="item in deviceOverview" :key="item.id || item.title">
|
||||
<div class="title-background">
|
||||
<div class="title-background-text">{{ item.title }}</div>
|
||||
</div>
|
||||
<div class="overview-card-main custom-content-card">
|
||||
<div class="overview-card-img">
|
||||
<img :src="item.icon" alt=''>
|
||||
</div>
|
||||
<div class="overview-card-content">
|
||||
<div class="first-content" v-if="sysDeviceOverviewData[item.countField] || sysDeviceOverviewData[item.countField] === 0">
|
||||
<span class="big-number">{{sysDeviceOverviewData[item.countField]}}</span>台
|
||||
</div>
|
||||
<!-- 在线 -->
|
||||
<div v-if="sysDeviceOverviewData[item.onLineField] || sysDeviceOverviewData[item.onLineField] === 0"
|
||||
class="working">在线：{{ sysDeviceOverviewData[item.onLineField] }}台</div>
|
||||
<!-- 离线 -->
|
||||
<div v-if="sysDeviceOverviewData[item.offLineField] || sysDeviceOverviewData[item.offLineField] === 0"
|
||||
class="cease">离线：{{ sysDeviceOverviewData[item.offLineField] }}台</div>
|
||||
<!-- 其他数据 -->
|
||||
<template v-if="item.otherData">
|
||||
<div v-for="it in item.otherData" :key="it.id || it.label">
|
||||
{{it.label}}：{{sysDeviceOverviewData[it.valueField]}}{{it.unit}}
|
||||
</div>
|
||||
</template>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</common-card>
|
||||
</div>
|
||||
<div class="mb-12">
|
||||
<common-card title="设备列表" :isEmpty="deviceDataSource.length === 0">
|
||||
<div class="device-list">
|
||||
<div class="device-list-item custom-content-card"
|
||||
v-for="(item, index) in deviceDataSource"
|
||||
:key="item.id"
|
||||
:class="{ 'mb-8': index !== deviceDataSource.length - 1}">
|
||||
<div class="status mb-6"
|
||||
:class="getDeviceStatusClass(item.deviceStatus)"
|
||||
>{{ item.deviceStatus_dictText }}</div>
|
||||
<div class="device-list-item-main">
|
||||
<div class="device-list-item-main-img">
|
||||
<img :src="deviceOverview[0].icon" alt=''>
|
||||
</div>
|
||||
<div class="device-list-item-main-content">
|
||||
<p>{{ item.deviceName }}</p>
|
||||
<p>{{ item.deviceSn }}</p>
|
||||
<p>{{ item.wellheadId_dictText }}</p>
|
||||
</div>
|
||||
<div class="device-list-item-main-btns">
|
||||
<a-button type="primary" class="mr-6"
|
||||
@click="handleChangeStatus(item, index)"
|
||||
>{{ item.changeDeviceStatus_dictText }}</a-button>
|
||||
<a-button type="danger"
|
||||
@click="handleDelete(item, index)"
|
||||
>删除</a-button>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<!-- 数据大于5条显示折叠 -->
|
||||
<div v-if="deviceData.dataSource.length > 5" class="list-toggle" @click="toggleDeviceList">
|
||||
{{deviceData.showAll ? '收起' : '展开'}}<div class="list-toggle-arrow" :class="`list-toggle-arrow-${deviceData.showAll ? 'up' : 'down'}`"></div>
|
||||
</div>
|
||||
</div>
|
||||
</common-card>
|
||||
</div>
|
||||
<div class="mb-12">
|
||||
<common-card title="添加设备">
|
||||
<a-form :form="deviceForm" class="custom-vertical-form">
|
||||
<div class="mb-12">
|
||||
<a-form-item label="设备名称">
|
||||
<a-input placeholder="请输入设备名称" :max-length="50"
|
||||
@change="event => event.target.value = event.target.value.trim()"
|
||||
v-decorator.trim="['deviceName', validatorRules.deviceName]"/>
|
||||
</a-form-item>
|
||||
<a-form-item label="设备类型">
|
||||
<dict-picker :triggerChange="true"
|
||||
dictCode="device_type"
|
||||
v-decorator="['deviceType', validatorRules.deviceType]"
|
||||
placeholder="请选择设备类型"/>
|
||||
<!-- <j-dict-select-tag :triggerChange="true"-->
|
||||
<!-- dictCode="device_type"-->
|
||||
<!-- v-decorator="['deviceType', validatorRules.deviceType]"-->
|
||||
<!-- placeholder="请选择设备类型">-->
|
||||
<!-- </j-dict-select-tag>-->
|
||||
</a-form-item>
|
||||
<a-form-item label="所属井口">
|
||||
<select-picker v-decorator="['wellheadId', validatorRules.wellheadId]"
|
||||
allowClear
|
||||
label-key="wellheadName"
|
||||
:list="wellheadList"
|
||||
placeholder="请选择所属井口"/>
|
||||
<!-- <a-select v-decorator="['wellheadId', validatorRules.wellheadId]" allowClear-->
|
||||
<!-- placeholder="请选择所属井口">-->
|
||||
<!-- <a-select-option v-for="item in wellheadList" :key="item.id" :value="item.id">{{ item.wellheadName }}</a-select-option>-->
|
||||
<!-- </a-select>-->
|
||||
</a-form-item>
|
||||
<a-form-item label="设备描述">
|
||||
<a-textarea
|
||||
placeholder="请输入设备描述"
|
||||
:rows="4"
|
||||
:max-length="500"
|
||||
@change="event => event.target.value = event.target.value.trim()"
|
||||
v-decorator="['deviceDesc', validatorRules.deviceDesc]" />
|
||||
</a-form-item>
|
||||
</div>
|
||||
<div class="flex-center custom-btns-box">
|
||||
<a-button class="btn-blue btn-blue-155" @click="handleResetForm(deviceForm)" style="margin-right: 0.16rem;">
|
||||
<img :src="require('@assets/images/icon/refresh.png')" alt="重置" class="btn-icon">
|
||||
<span class="btn-text">重置</span>
|
||||
</a-button>
|
||||
<a-button class="btn-cyan btn-cyan-155" @click="handleAddDevice">
|
||||
<img :src="require('@assets/images/icon/add.png')" alt="添加" class="btn-icon">
|
||||
<span class="btn-text">添加</span>
|
||||
</a-button>
|
||||
</div>
|
||||
</a-form>
|
||||
</common-card>
|
||||
</div>
|
||||
<div class="mb-12">
|
||||
<common-card title="添加井口">
|
||||
<a-form :form="wellheadForm" class="custom-vertical-form">
|
||||
<div class="mb-12">
|
||||
<a-form-item label="所属作业区">
|
||||
<a-input placeholder="请输入所属作业区" :max-length="50"
|
||||
@change="event => event.target.value = event.target.value.trim()"
|
||||
v-decorator.trim="['operateArea', validatorRules.operateArea]"/>
|
||||
</a-form-item>
|
||||
<a-form-item label="所属井场">
|
||||
<dict-picker :triggerChange="true"
|
||||
dictCode="wellhead_area"
|
||||
v-decorator="['wellheadArea', validatorRules.wellheadArea]"
|
||||
placeholder="请选择所属井场"/>
|
||||
<!-- <j-dict-select-tag :triggerChange="true"-->
|
||||
<!-- dictCode="wellhead_area"-->
|
||||
<!-- v-decorator="['wellheadArea', validatorRules.wellheadArea]"-->
|
||||
<!-- placeholder="请选择所属井场">-->
|
||||
<!-- </j-dict-select-tag>-->
|
||||
</a-form-item>
|
||||
<a-form-item label="井口类型">
|
||||
<dict-picker :triggerChange="true"
|
||||
dictCode="wellhead_type"
|
||||
v-decorator="['wellheadType', validatorRules.wellheadType]"
|
||||
placeholder="请选择井口类型"/>
|
||||
<!-- <j-dict-select-tag :triggerChange="true"-->
|
||||
<!-- dictCode="wellhead_type"-->
|
||||
<!-- v-decorator="['wellheadType', validatorRules.wellheadType]"-->
|
||||
<!-- placeholder="请选择井口类型">-->
|
||||
<!-- </j-dict-select-tag>-->
|
||||
</a-form-item>
|
||||
<a-form-item label="井口名称">
|
||||
<a-input placeholder="请输入井口名称" :max-length="50"
|
||||
@change="event => event.target.value = event.target.value.trim()"
|
||||
v-decorator.trim="['wellheadName', validatorRules.wellheadName]"/>
|
||||
</a-form-item>
|
||||
</div>
|
||||
<div class="flex-center custom-btns-box">
|
||||
<a-button class="btn-cyan btn-cyan-327" @click="handleAddWellhead">
|
||||
<img :src="require('@assets/images/icon/add.png')" alt="添加" class="btn-icon">
|
||||
<span class="btn-text">添加</span>
|
||||
</a-button>
|
||||
</div>
|
||||
</a-form>
|
||||
</common-card>
|
||||
</div>
|
||||
</a-spin>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import CommonCard from '@comp/CommonCard'
|
||||
import {
|
||||
addDevice,
|
||||
addWellhead,
|
||||
delDevice,
|
||||
editDevice,
|
||||
getDevicePage,
|
||||
getSysDeviceOverview,
|
||||
getWellheadList
|
||||
} from '@api/systemOverview'
|
||||
import { deviceStatus } from '@/enums/commonEnums'
|
||||
import DictPicker from '@comp/vant/DictPicker'
|
||||
import SelectPicker from '@comp/vant/SelectPicker'
|
||||
export default {
|
||||
name: 'Manage'
|
||||
name: 'Manage',
|
||||
components: { SelectPicker, DictPicker, CommonCard },
|
||||
data () {
|
||||
return {
|
||||
deviceStatus,
|
||||
loading: false,
|
||||
// 系统设备概况
|
||||
deviceOverview: [
|
||||
{
|
||||
title: '设备总数',
|
||||
icon: require('@/assets/images/systemOverview/equipmentManagement/device.png'),
|
||||
countField: 'deviceCount',
|
||||
onLineField: 'onlineDeviceCount',
|
||||
offLineField: 'offlineDeviceCount'
|
||||
},
|
||||
{
|
||||
title: '井口数量',
|
||||
icon: require('@/assets/images/systemOverview/equipmentManagement/wellhead.png'),
|
||||
otherData: [
|
||||
{ label: '总井数', unit: '口', valueField: 'wellCount' },
|
||||
{ label: '水井数', unit: '口', valueField: 'waterWellCount' },
|
||||
{ label: '油井数', unit: '口', valueField: 'oilWellCount' }
|
||||
]
|
||||
},
|
||||
{
|
||||
title: 'RTU控制器数量',
|
||||
icon: require('@/assets/images/systemOverview/equipmentManagement/controller.png'),
|
||||
countField: 'rtuCount',
|
||||
onLineField: 'onlineRtuCount',
|
||||
offLineField: 'offlineRtuCount'
|
||||
},
|
||||
{
|
||||
title: '天然气数据远传终端数量',
|
||||
icon: require('@/assets/images/systemOverview/equipmentManagement/terminal.png'),
|
||||
countField: 'ngCount',
|
||||
onLineField: 'onlineNgCount',
|
||||
offLineField: 'offlineNgCount'
|
||||
}
|
||||
],
|
||||
// 系统设备概况数据
|
||||
sysDeviceOverviewData: {},
|
||||
// 设备列表相关
|
||||
deviceData: {
|
||||
loading: false,
|
||||
dataSource: [],
|
||||
showAll: false // true显示全部，默认显示前五
|
||||
},
|
||||
// 添加设备表单
|
||||
deviceForm: this.$form.createForm(this),
|
||||
// 添加井口表单
|
||||
wellheadForm: this.$form.createForm(this),
|
||||
// 表单校验
|
||||
validatorRules: {
|
||||
deviceName: { rules: [{ required: true, message: '请输入设备名称' }], validateTrigger: 'blur' },
|
||||
deviceType: { rules: [{ required: true, message: '请选择设备类型' }], validateTrigger: 'change' },
|
||||
wellheadId: { rules: [{ required: true, message: '请选择所属井口' }], validateTrigger: 'change' },
|
||||
deviceDesc: { rules: [{ required: true, message: '请输入设备描述' }], validateTrigger: 'blur' },
|
||||
operateArea: { rules: [{ required: true, message: '请输入所属作业区' }], validateTrigger: 'blur' },
|
||||
wellheadArea: { rules: [{ required: true, message: '请选择所属井场' }], validateTrigger: 'change' },
|
||||
wellheadType: { rules: [{ required: true, message: '请选择井口类型' }], validateTrigger: 'change' },
|
||||
wellheadName: { rules: [{ required: true, message: '请输入井口名称' }], validateTrigger: 'blur' }
|
||||
},
|
||||
// 井口列表
|
||||
wellheadList: []
|
||||
}
|
||||
},
|
||||
computed: {
|
||||
// 展示的设备列表数据，默认显示前五
|
||||
deviceDataSource () {
|
||||
if (this.deviceData.showAll) {
|
||||
return this.deviceData.dataSource
|
||||
} else {
|
||||
return this.deviceData.dataSource.slice(0, 5)
|
||||
}
|
||||
}
|
||||
},
|
||||
created () {
|
||||
this.loadPage()
|
||||
},
|
||||
methods: {
|
||||
// 加载全部数据
|
||||
loadPage () {
|
||||
// 下拉菜单
|
||||
this.loadWellheadList()
|
||||
// 页面数据
|
||||
this.loadSysDeviceOverview()
|
||||
this.loadDeviceList()
|
||||
},
|
||||
// 加载系统设备概况数据
|
||||
loadSysDeviceOverview () {
|
||||
getSysDeviceOverview().then(res => {
|
||||
if (res.success) {
|
||||
this.sysDeviceOverviewData = res.result || {}
|
||||
} else {
|
||||
this.$message.warning(res.message)
|
||||
}
|
||||
})
|
||||
},
|
||||
// 加载设备列表
|
||||
loadDeviceList () {
|
||||
this.deviceData.loading = true
|
||||
getDevicePage({
|
||||
pageNo: 1,
|
||||
pageSize: 10,
|
||||
column: 'createTime',
|
||||
order: 'desc'
|
||||
}).then((res) => {
|
||||
if (res.success) {
|
||||
const data = res.result.records || res.result || []
|
||||
// 翻译设备状态，加修改设备状态的字段
|
||||
this.deviceData.dataSource = data.map(item => {
|
||||
if (item.deviceStatus === deviceStatus.onLine.value) {
|
||||
item.deviceStatus_dictText = deviceStatus.onLine.label
|
||||
item.changeDeviceStatus = deviceStatus.offLine.value
|
||||
item.changeDeviceStatus_dictText = deviceStatus.offLine.label
|
||||
} else if (item.deviceStatus === deviceStatus.offLine.value) {
|
||||
item.deviceStatus_dictText = deviceStatus.offLine.label
|
||||
item.changeDeviceStatus = deviceStatus.onLine.value
|
||||
item.changeDeviceStatus_dictText = deviceStatus.onLine.label
|
||||
}
|
||||
return item
|
||||
})
|
||||
} else {
|
||||
this.$message.warning(res.message)
|
||||
}
|
||||
}).finally(() => {
|
||||
this.deviceData.loading = false
|
||||
})
|
||||
},
|
||||
// 获取设备状态样式
|
||||
getDeviceStatusClass (status) {
|
||||
switch (status + '') {
|
||||
case deviceStatus.onLine.value:
|
||||
return 'working'
|
||||
case deviceStatus.offLine.value:
|
||||
return 'cease'
|
||||
default:
|
||||
return ''
|
||||
}
|
||||
},
|
||||
// 设备状态改变
|
||||
handleChangeStatus (record) {
|
||||
const { id } = record
|
||||
this.$vantConfirm({
|
||||
title: '确认' + record.changeDeviceStatus_dictText + '设备',
|
||||
message: `确定要修改设备状态为${record.changeDeviceStatus_dictText}吗?`
|
||||
}).then(() => {
|
||||
const params = { id, deviceStatus: record.changeDeviceStatus }
|
||||
editDevice(params).then((res) => {
|
||||
if (res.success) {
|
||||
this.$message.success(res.message)
|
||||
} else {
|
||||
this.$message.warning(res.message)
|
||||
}
|
||||
}).finally(() => {
|
||||
this.loadSysDeviceOverview()
|
||||
this.loadDeviceList()
|
||||
})
|
||||
}).catch(() => {})
|
||||
},
|
||||
// 删除设备
|
||||
handleDelete (record) {
|
||||
const { id } = record
|
||||
this.$vantConfirm({
|
||||
title: '确认删除',
|
||||
message: '确定要删除此条数据吗?'
|
||||
}).then(() => {
|
||||
delDevice({ id }).then((res) => {
|
||||
if (res.success) {
|
||||
this.$message.success(res.message)
|
||||
} else {
|
||||
this.$message.warning(res.message)
|
||||
}
|
||||
}).finally(() => {
|
||||
this.loadSysDeviceOverview()
|
||||
this.loadDeviceList()
|
||||
})
|
||||
}).catch(() => {})
|
||||
},
|
||||
// 切换展开折叠列表
|
||||
toggleDeviceList () {
|
||||
this.deviceData.showAll = !this.deviceData.showAll
|
||||
},
|
||||
// 添加设备
|
||||
handleAddDevice () {
|
||||
this.deviceForm.validateFields((err, values) => {
|
||||
if (!err) {
|
||||
const formData = Object.assign({}, values)
|
||||
addDevice(formData).then((res) => {
|
||||
if (res.success) {
|
||||
this.$message.success(res.message)
|
||||
} else {
|
||||
this.$message.warning(res.message)
|
||||
}
|
||||
}).finally(() => {
|
||||
// 重置表单
|
||||
this.deviceForm.resetFields()
|
||||
// 更新系统设备概况和设备列表
|
||||
this.loadSysDeviceOverview()
|
||||
this.loadDeviceList()
|
||||
})
|
||||
}
|
||||
})
|
||||
},
|
||||
// 添加井口
|
||||
handleAddWellhead () {
|
||||
this.wellheadForm.validateFields((err, values) => {
|
||||
if (!err) {
|
||||
const formData = Object.assign({}, values)
|
||||
addWellhead(formData).then((res) => {
|
||||
if (res.success) {
|
||||
this.$message.success(res.message)
|
||||
} else {
|
||||
this.$message.warning(res.message)
|
||||
}
|
||||
}).finally(() => {
|
||||
// 重置表单
|
||||
this.wellheadForm.resetFields()
|
||||
// 更新系统设备概况
|
||||
this.loadSysDeviceOverview()
|
||||
// 更新井口下拉
|
||||
this.loadWellheadList()
|
||||
})
|
||||
}
|
||||
})
|
||||
},
|
||||
// 获取井口下拉
|
||||
loadWellheadList () {
|
||||
getWellheadList().then(res => {
|
||||
if (res.success) {
|
||||
this.wellheadList = res.result || []
|
||||
}
|
||||
})
|
||||
},
|
||||
// 重置表单
|
||||
handleResetForm (form) {
|
||||
form && form.resetFields && form.resetFields()
|
||||
}
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
||||
<style scoped>
|
||||
<style lang="less" scoped>
|
||||
@import "~@/assets/less/modifyLessVars.less";
|
||||
// 系统设备概况
|
||||
.overview-grid {
|
||||
display: grid;
|
||||
grid-gap: 0.08rem;
|
||||
grid-template-columns: 1fr 1fr;
|
||||
grid-template-rows: auto auto;
|
||||
grid-template-areas: 'a b'
|
||||
'c d';
|
||||
}
|
||||
.overview-card {
|
||||
.overview-card-main {
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
|
||||
.overview-card-img {
|
||||
flex: 0 0 0.56rem;
|
||||
margin-right: 0.1rem;
|
||||
|
||||
img {
|
||||
width: 100%;
|
||||
}
|
||||
}
|
||||
.overview-card-content {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
justify-content: space-around;
|
||||
flex: auto;
|
||||
font-family: Rubik, Rubik, sans-serif;
|
||||
font-weight: 400;
|
||||
font-size: 0.12rem;
|
||||
color: @text-color;
|
||||
line-height: 0.14rem;
|
||||
|
||||
.first-content {
|
||||
padding-left: 0.16rem;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
// 设备列表
|
||||
.device-list {
|
||||
&-item {
|
||||
.status {
|
||||
font-size: 0.12rem;
|
||||
line-height: 0.14rem;
|
||||
}
|
||||
&-main {
|
||||
position: relative;
|
||||
display: flex;
|
||||
|
||||
// 图片
|
||||
&-img {
|
||||
flex: 0 0 0.56rem;
|
||||
width: 0.56rem;
|
||||
height: 0.56rem;
|
||||
margin-right: 0.12rem;
|
||||
|
||||
img {
|
||||
width: 100%;
|
||||
}
|
||||
}
|
||||
|
||||
// 内容
|
||||
&-content {
|
||||
flex: auto;
|
||||
margin: 0;
|
||||
font-family: DingTalk JinBuTi, DingTalk JinBuTi, sans-serif;
|
||||
font-size: 0.12rem;
|
||||
line-height: 0.14rem;
|
||||
|
||||
& > p {
|
||||
margin: 0;
|
||||
padding: 0;
|
||||
margin-bottom: 0.06rem;
|
||||
// 内容宽度 = 100% - 按钮部分宽度 - 距离按钮间距
|
||||
width: calc(100% - 1.46rem - 0.08rem);
|
||||
}
|
||||
|
||||
& > p:first-child {
|
||||
width: 100%;
|
||||
min-height: 0.16rem;
|
||||
font-size: 0.14rem;
|
||||
line-height: 0.16rem;
|
||||
margin-bottom: 0.07rem;
|
||||
}
|
||||
}
|
||||
|
||||
// 按钮
|
||||
&-btns {
|
||||
width: 1.46rem;
|
||||
position: absolute;
|
||||
right: 0;
|
||||
bottom: 0;
|
||||
font-family: PingFang SC, PingFang SC, sans-serif;
|
||||
font-weight: 500;
|
||||
font-size: 0.14rem;
|
||||
color: #FFFFFF;
|
||||
line-height: 0.16rem;
|
||||
|
||||
/deep/.ant-btn {
|
||||
width: 0.7rem;
|
||||
height: 0.32rem;
|
||||
border: none;
|
||||
}
|
||||
/deep/.ant-btn-primary {
|
||||
background: url("~@assets/images/componentImg/btn-blue-70.png");
|
||||
background-size: 100% 100%;
|
||||
}
|
||||
/deep/.ant-btn-danger {
|
||||
background: url("~@assets/images/componentImg/btn-red-70.png");
|
||||
background-size: 100% 100%;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
.list-toggle {
|
||||
width: 0.48rem;
|
||||
height: 0.14rem;
|
||||
margin: 0.12rem auto 0;
|
||||
font-family: Rubik, Rubik, sans-serif;
|
||||
font-size: 0.12rem;
|
||||
color: #A5B8CE;
|
||||
line-height: 0.14rem;
|
||||
|
||||
.list-toggle-arrow {
|
||||
display: inline-block;
|
||||
width: 0.18rem;
|
||||
height: 0.07rem;
|
||||
background: url("~@assets/images/icon/list-arrow.png");
|
||||
background-size: 100% 100%;
|
||||
margin-left: 0.06rem;
|
||||
|
||||
&-up {
|
||||
transform: rotate(180deg);
|
||||
}
|
||||
&-down {
|
||||
transform: rotate(0deg);
|
||||
}
|
||||
}
|
||||
}
|
||||
.custom-btns-box {
|
||||
/deep/.ant-btn {
|
||||
&.btn-blue.btn-blue-155 {
|
||||
width: 1.55rem;
|
||||
background-image: url("~@assets/images/componentImg/btn-blue-155.png");
|
||||
}
|
||||
&.btn-cyan.btn-cyan-155 {
|
||||
width: 1.55rem;
|
||||
background-image: url("~@assets/images/componentImg/btn-cyan-155.png");
|
||||
}
|
||||
&.btn-cyan.btn-cyan-327 {
|
||||
width: 3.27rem;
|
||||
background-image: url("~@assets/images/componentImg/btn-cyan-327.png");
|
||||
}
|
||||
}
|
||||
}
|
||||
</style>
|
||||
|
||||
@@ -4,7 +4,7 @@
|
||||
<a-col flex="545px">
|
||||
<common-card title="系统设备概况">
|
||||
<div class="overview-grid">
|
||||
<div class="overview-card" v-for="item in deviceOverview" :key="item.id || item.title">
|
||||
<div class="overview-card custom-content-card" v-for="item in deviceOverview" :key="item.id || item.title">
|
||||
<div class="title-background">
|
||||
<div class="title-background-text">{{ item.title }}</div>
|
||||
</div>
|
||||
@@ -405,7 +405,6 @@ export default {
|
||||
if (this.deviceData.ipagination.current > 1 && ((this.deviceData.ipagination.current - 1) * this.deviceData.ipagination.pageSize) + 1 === this.deviceData.ipagination.total) {
|
||||
this.deviceData.ipagination.current -= 1
|
||||
}
|
||||
this.loadData()
|
||||
} else {
|
||||
this.$message.warning(res.message)
|
||||
}
|
||||
@@ -430,7 +429,6 @@ export default {
|
||||
if (this.deviceData.ipagination.current > 1 && ((this.deviceData.ipagination.current - 1) * this.deviceData.ipagination.pageSize) + 1 === this.deviceData.ipagination.total) {
|
||||
this.deviceData.ipagination.current -= 1
|
||||
}
|
||||
this.loadData()
|
||||
} else {
|
||||
this.$message.warning(res.message)
|
||||
}
|
||||
@@ -572,49 +570,6 @@ export default {
|
||||
'c d';
|
||||
}
|
||||
.overview-card {
|
||||
padding: 12px;
|
||||
position: relative;
|
||||
border: 1px solid;
|
||||
background: linear-gradient( 90deg, rgba(0,148,255,0.4) 0%, rgba(0,148,255,0.05) 100%);
|
||||
border-image: linear-gradient(85deg, rgba(71, 137, 233, 1), rgba(46, 228, 253, 1), rgba(54, 109, 200, 1)) 1 1;
|
||||
border-left: none;
|
||||
border-right: none;
|
||||
|
||||
// 伪元素装饰
|
||||
&::before,
|
||||
&::after {
|
||||
pointer-events: none;
|
||||
user-select: none;
|
||||
content: '';
|
||||
display: block;
|
||||
position: absolute;
|
||||
}
|
||||
|
||||
// 四个角
|
||||
&::before {
|
||||
top: -2px;
|
||||
left: -1px;
|
||||
width: calc(100% + 2px);
|
||||
height: calc(100% + 4px);
|
||||
background-image: url("~@/assets/images/systemOverview/equipmentManagement/left-top.png"),
|
||||
url("~@/assets/images/systemOverview/equipmentManagement/left-bottom.png"),
|
||||
url("~@/assets/images/systemOverview/equipmentManagement/right-top.png"),
|
||||
url("~@/assets/images/systemOverview/equipmentManagement/right-bottom.png");
|
||||
background-repeat: no-repeat;
|
||||
background-position: left top, left bottom, right top, right bottom;
|
||||
}
|
||||
// 两侧的边框
|
||||
&::after {
|
||||
left: 0;
|
||||
top: 0;
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
border: 1px solid;
|
||||
border-top: none;
|
||||
border-bottom: none;
|
||||
border-image: linear-gradient(0deg, rgba(46,228,253,0) 0%, #2EE4FD 50%, rgba(46,228,253,0) 100%) 1;
|
||||
}
|
||||
|
||||
.overview-card-main {
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
|
||||
@@ -58,7 +58,7 @@
|
||||
</a-col>
|
||||
<a-col :xl="12" :xxl="6" class="mb-20">
|
||||
<common-card title="油井实时参数">
|
||||
<common-card-info :data="oilWellRealTimeData['油井实时参数']"
|
||||
<common-card-info :data="allData"
|
||||
:left-list="labelData.oilWellsRealTimeParamsLeft || []"
|
||||
:right-list="labelData.oilWellsRealTimeParamsRight || []"/>
|
||||
</common-card>
|
||||
@@ -554,7 +554,7 @@ export default {
|
||||
searchQuery () {
|
||||
const params = Object.assign({}, this.queryParam)
|
||||
// 没有条件恢复默认数据
|
||||
if (Object.values(params).length === 0) {
|
||||
if (Object.values(params).filter(item => item || item !== 0).length === 0) {
|
||||
this.allData = staticData
|
||||
this.dataSource = staticTableData
|
||||
setTimeout(() => {
|
||||
@@ -607,6 +607,8 @@ export default {
|
||||
if (res.success) {
|
||||
const data = res.result || {}
|
||||
this.oilWellRealTimeData = data
|
||||
// 将油井实时参数放进全部数据中
|
||||
this.allData = Object.assign({}, staticData, data['油井实时参数'])
|
||||
this.initIndicatorDiagram(data['实时示功图'])
|
||||
this.initLoadDistribution(data['载荷分布图'])
|
||||
} else {
|
||||
@@ -617,19 +619,19 @@ export default {
|
||||
// 初始化 实时示功图
|
||||
initIndicatorDiagram (data) {
|
||||
// 没有渲染出组件就不执行
|
||||
if (!this.$refs.productionMonitoring) {
|
||||
if (!this.$refs.indicatorDiagram) {
|
||||
return
|
||||
}
|
||||
// 置空数据
|
||||
if (!data || Object.keys(data).length === 0) {
|
||||
this.$refs.productionMonitoring.updateMyChartOption()
|
||||
this.$refs.indicatorDiagram.updateMyChartOption()
|
||||
return
|
||||
}
|
||||
// 获取基础配置
|
||||
const legendData = ['上冲程', '下冲程']
|
||||
const option = generateBaseOption()
|
||||
option.legend.data = legendData
|
||||
option.xAxis.data = data['X轴']
|
||||
option.xAxis[0].data = data['X轴']
|
||||
option.yAxis[0].name = '载荷(KN)'
|
||||
option.yAxis[0].nameTextStyle.padding = [0, 0, 0, 5]
|
||||
option.series = [
|
||||
@@ -682,7 +684,7 @@ export default {
|
||||
const legendData = ['产油量(t/d)', '产液量(m³/d)']
|
||||
const option = generateBaseOption()
|
||||
option.legend.data = legendData
|
||||
option.xAxis.data = data['X轴']
|
||||
option.xAxis[0].data = data['X轴']
|
||||
option.yAxis[0].name = '产油量(t/d) / 产液量(m³/d)'
|
||||
option.yAxis[0].nameTextStyle.padding = [0, 0, 0, 105]
|
||||
option.series = [
|
||||
@@ -725,19 +727,19 @@ export default {
|
||||
// 初始化 载荷分布图
|
||||
initLoadDistribution (data) {
|
||||
// 没有渲染出组件就不执行
|
||||
if (!this.$refs.productionMonitoring) {
|
||||
if (!this.$refs.loadDistribution) {
|
||||
return
|
||||
}
|
||||
// 置空数据
|
||||
if (!data || Object.keys(data).length === 0) {
|
||||
this.$refs.productionMonitoring.updateMyChartOption()
|
||||
this.$refs.loadDistribution.updateMyChartOption()
|
||||
return
|
||||
}
|
||||
// 获取基础配置
|
||||
const legendData = ['最大载荷(KN)', '最小载荷(KN)']
|
||||
const option = generateBaseOption()
|
||||
option.legend.data = legendData
|
||||
option.xAxis.data = data['X轴']
|
||||
option.xAxis[0].data = data['X轴']
|
||||
option.yAxis[0].name = '载荷(KN)'
|
||||
option.yAxis[0].nameTextStyle.padding = [0, 0, 0, 5]
|
||||
option.series = [
|
||||
@@ -984,7 +986,7 @@ export default {
|
||||
right: 10px;
|
||||
top: 40px;
|
||||
bottom: 0;
|
||||
width: 6px;
|
||||
width: 5px;
|
||||
overflow: hidden;
|
||||
.border-table {
|
||||
position: absolute;
|
||||
|
||||
+12
-12
@@ -549,9 +549,9 @@ function isMobile () {
|
||||
top: 0;
|
||||
display: block;
|
||||
width: 100%;
|
||||
height: 4.8rem;
|
||||
height: 2.4rem;
|
||||
background: url("~@/assets/mobile-login-bg.png") no-repeat;
|
||||
background-position-y: -0.88rem;
|
||||
background-position-y: -0.44rem;
|
||||
background-size: cover;
|
||||
}
|
||||
|
||||
@@ -559,8 +559,8 @@ function isMobile () {
|
||||
user-select: none;
|
||||
position: absolute;
|
||||
left: 50%;
|
||||
top: 4rem;
|
||||
width: 3.84rem;
|
||||
top: 2rem;
|
||||
width: 1.92rem;
|
||||
transform: translateX(-50%);
|
||||
|
||||
img {
|
||||
@@ -570,32 +570,32 @@ function isMobile () {
|
||||
|
||||
// 移动端登录表单样式
|
||||
.login-form {
|
||||
padding: 5.62rem 0.48rem 0;
|
||||
padding: 2.81rem 0.24rem 0;
|
||||
|
||||
/deep/.ant-input-affix-wrapper .ant-input-prefix {
|
||||
left: 0;
|
||||
.prefix-icon {
|
||||
width: .48rem;
|
||||
width: 0.24rem;
|
||||
}
|
||||
}
|
||||
/deep/.ant-input {
|
||||
border: none;
|
||||
border-radius: 0;
|
||||
background: none !important;
|
||||
border-bottom: 0.02rem solid rgba(0,148,255,0.4);
|
||||
border-bottom: 0.01rem solid rgba(0,148,255,0.4);
|
||||
box-shadow: none;
|
||||
height: .96rem;
|
||||
padding-left: .72rem;
|
||||
height: 0.48rem;
|
||||
padding-left: 0.36rem;
|
||||
font-family: PingFang SC, PingFang SC, sans-serif;
|
||||
font-weight: 400;
|
||||
font-size: 0.32rem;
|
||||
line-height: 0.48rem;
|
||||
font-size: 0.16rem;
|
||||
line-height: 0.24rem;
|
||||
}
|
||||
.login-btn {
|
||||
.ant-btn {
|
||||
background: url("~@assets/images/login-btn.png") no-repeat;
|
||||
background-size: 100% 100%;
|
||||
height: 0.96rem;
|
||||
height: 0.48rem;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
Reference in New Issue
Block a user