lcw
This commit is contained in:
148
package-lock.json
generated
148
package-lock.json
generated
@ -1457,12 +1457,12 @@
|
||||
},
|
||||
"@paddlejs/paddlejs-backend-webgl": {
|
||||
"version": "1.2.9",
|
||||
"resolved": "https://registry.npmmirror.com/@paddlejs/paddlejs-backend-webgl/-/paddlejs-backend-webgl-1.2.9.tgz",
|
||||
"resolved": "https://registry.npmjs.org/@paddlejs/paddlejs-backend-webgl/-/paddlejs-backend-webgl-1.2.9.tgz",
|
||||
"integrity": "sha512-cVDa0/Wbw2EyfsYqdYUPhFeqKsET79keEUWjyhYQmQkJfWg8j1qdR6yp7g6nx9qAGrqFvwuj1s0EqkYA1dok6A=="
|
||||
},
|
||||
"@paddlejs/paddlejs-core": {
|
||||
"version": "2.2.0",
|
||||
"resolved": "https://registry.npmmirror.com/@paddlejs/paddlejs-core/-/paddlejs-core-2.2.0.tgz",
|
||||
"resolved": "https://registry.npmjs.org/@paddlejs/paddlejs-core/-/paddlejs-core-2.2.0.tgz",
|
||||
"integrity": "sha512-P3rPkF9fFHtq8uSte5gA7fJQwBNl9Ytsvj6aTcfQSsirnBO/HxMNu0gJyh7+lItvEtF92PR15eI0eOwJYfZDhQ=="
|
||||
},
|
||||
"@petamoriken/float16": {
|
||||
@ -2134,51 +2134,6 @@
|
||||
"integrity": "sha512-nQyp0o1/mNdbTO1PO6kHkwSrmgZ0MT/jCCpNiwbUjGoRN4dlBhqJtoQuCnEOKzgTVwg0ZWiCoQy6SxMebQVh8A==",
|
||||
"dev": true
|
||||
},
|
||||
"ansi-styles": {
|
||||
"version": "4.3.0",
|
||||
"resolved": "https://registry.npmmirror.com/ansi-styles/-/ansi-styles-4.3.0.tgz",
|
||||
"integrity": "sha512-zbB9rCJAT1rbjiVDb2hqKFHNYLxgtk8NURxZ3IZwD3F6NtxbXZQCnnSi1Lkx+IDohdPlFp222wVALIheZJQSEg==",
|
||||
"dev": true,
|
||||
"optional": true,
|
||||
"requires": {
|
||||
"color-convert": "^2.0.1"
|
||||
}
|
||||
},
|
||||
"chalk": {
|
||||
"version": "4.1.2",
|
||||
"resolved": "https://registry.npmmirror.com/chalk/-/chalk-4.1.2.tgz",
|
||||
"integrity": "sha512-oKnbhFyRIXpUuez8iBMmyEa4nbj4IOQyuhc/wy9kY7/WVPcwIO9VA668Pu8RkO7+0G76SLROeyw9CpQ061i4mA==",
|
||||
"dev": true,
|
||||
"optional": true,
|
||||
"requires": {
|
||||
"ansi-styles": "^4.1.0",
|
||||
"supports-color": "^7.1.0"
|
||||
}
|
||||
},
|
||||
"color-convert": {
|
||||
"version": "2.0.1",
|
||||
"resolved": "https://registry.npmmirror.com/color-convert/-/color-convert-2.0.1.tgz",
|
||||
"integrity": "sha512-RRECPsj7iu/xb5oKYcsFHSppFNnsj/52OVTRKb4zP5onXwVF3zVmmToNcOfGC+CRDpfK/U584fMg38ZHCaElKQ==",
|
||||
"dev": true,
|
||||
"optional": true,
|
||||
"requires": {
|
||||
"color-name": "~1.1.4"
|
||||
}
|
||||
},
|
||||
"color-name": {
|
||||
"version": "1.1.4",
|
||||
"resolved": "https://registry.npmmirror.com/color-name/-/color-name-1.1.4.tgz",
|
||||
"integrity": "sha512-dOy+3AuW3a2wNbZHIuMZpTcgjGuLU/uBL/ubcZF9OXbDo8ff4O8yVp5Bf0efS8uEoYo5q4Fx7dY9OgQGXgAsQA==",
|
||||
"dev": true,
|
||||
"optional": true
|
||||
},
|
||||
"has-flag": {
|
||||
"version": "4.0.0",
|
||||
"resolved": "https://registry.npmmirror.com/has-flag/-/has-flag-4.0.0.tgz",
|
||||
"integrity": "sha512-EykJT/Q1KjTWctppgIAgfSO0tKVuZUjhgMr17kqTumMl6Afv3EISleU7qZUzoXDFTAHTDC4NOoG/ZxU3EvlMPQ==",
|
||||
"dev": true,
|
||||
"optional": true
|
||||
},
|
||||
"ssri": {
|
||||
"version": "8.0.1",
|
||||
"resolved": "https://registry.npmjs.org/ssri/-/ssri-8.0.1.tgz",
|
||||
@ -2187,28 +2142,6 @@
|
||||
"requires": {
|
||||
"minipass": "^3.1.1"
|
||||
}
|
||||
},
|
||||
"supports-color": {
|
||||
"version": "7.2.0",
|
||||
"resolved": "https://registry.npmmirror.com/supports-color/-/supports-color-7.2.0.tgz",
|
||||
"integrity": "sha512-qpCAvRl9stuOHveKsn7HncJRvv501qIacKzQlO/+Lwxc9+0q2wLyv4Dfvt80/DPn2pqOBsJdDiogXGR9+OvwRw==",
|
||||
"dev": true,
|
||||
"optional": true,
|
||||
"requires": {
|
||||
"has-flag": "^4.0.0"
|
||||
}
|
||||
},
|
||||
"vue-loader-v16": {
|
||||
"version": "npm:vue-loader@16.8.3",
|
||||
"resolved": "https://registry.npmmirror.com/vue-loader/-/vue-loader-16.8.3.tgz",
|
||||
"integrity": "sha512-7vKN45IxsKxe5GcVCbc2qFU5aWzyiLrYJyUuMz4BQLKctCj/fmCa0w6fGiiQ2cLFetNcek1ppGJQDCup0c1hpA==",
|
||||
"dev": true,
|
||||
"optional": true,
|
||||
"requires": {
|
||||
"chalk": "^4.1.0",
|
||||
"hash-sum": "^2.0.0",
|
||||
"loader-utils": "^2.0.0"
|
||||
}
|
||||
}
|
||||
}
|
||||
},
|
||||
@ -3368,7 +3301,7 @@
|
||||
},
|
||||
"blueimp-canvas-to-blob": {
|
||||
"version": "3.29.0",
|
||||
"resolved": "https://registry.npmmirror.com/blueimp-canvas-to-blob/-/blueimp-canvas-to-blob-3.29.0.tgz",
|
||||
"resolved": "https://registry.npmjs.org/blueimp-canvas-to-blob/-/blueimp-canvas-to-blob-3.29.0.tgz",
|
||||
"integrity": "sha512-0pcSSGxC0QxT+yVkivxIqW0Y4VlO2XSDPofBAqoJ1qJxgH9eiUDLv50Rixij2cDuEfx4M6DpD9UGZpRhT5Q8qg=="
|
||||
},
|
||||
"bmp-js": {
|
||||
@ -6969,7 +6902,7 @@
|
||||
},
|
||||
"file-saver": {
|
||||
"version": "2.0.5",
|
||||
"resolved": "https://registry.npmmirror.com/file-saver/-/file-saver-2.0.5.tgz",
|
||||
"resolved": "https://registry.npmjs.org/file-saver/-/file-saver-2.0.5.tgz",
|
||||
"integrity": "sha512-P9bmyZ3h/PRG+Nzga+rbdI4OEpNDzAVyy74uVO9ATgzLK6VtAsYybF/+TOCvrc0MO793d6+42lLyZTw7/ArVzA=="
|
||||
},
|
||||
"file-uri-to-path": {
|
||||
@ -7949,7 +7882,7 @@
|
||||
},
|
||||
"image-compressor.js": {
|
||||
"version": "1.1.4",
|
||||
"resolved": "https://registry.npmmirror.com/image-compressor.js/-/image-compressor.js-1.1.4.tgz",
|
||||
"resolved": "https://registry.npmjs.org/image-compressor.js/-/image-compressor.js-1.1.4.tgz",
|
||||
"integrity": "sha512-DF1YFSw+m6FqpXsleD4+q9eu/wFFkm8sHuYhgYy5GWFVencXeuB1/UqC12xz+dCZooPetf5LIb8JOGkgEWmlcg==",
|
||||
"requires": {
|
||||
"blueimp-canvas-to-blob": "^3.14.0",
|
||||
@ -8321,7 +8254,7 @@
|
||||
},
|
||||
"is-blob": {
|
||||
"version": "1.0.0",
|
||||
"resolved": "https://registry.npmmirror.com/is-blob/-/is-blob-1.0.0.tgz",
|
||||
"resolved": "https://registry.npmjs.org/is-blob/-/is-blob-1.0.0.tgz",
|
||||
"integrity": "sha512-QIZDHQZpRfMEZwSTD7egdNZS7H/awVW9FZ3yJv+gg1z8d8GPXEs76QWL67fZs2BoBqp2dGtamTJpEYFJHmD73g=="
|
||||
},
|
||||
"is-boolean-object": {
|
||||
@ -15121,6 +15054,75 @@
|
||||
}
|
||||
}
|
||||
},
|
||||
"vue-loader-v16": {
|
||||
"version": "npm:vue-loader@16.8.3",
|
||||
"resolved": "https://registry.npmmirror.com/vue-loader/-/vue-loader-16.8.3.tgz",
|
||||
"integrity": "sha512-7vKN45IxsKxe5GcVCbc2qFU5aWzyiLrYJyUuMz4BQLKctCj/fmCa0w6fGiiQ2cLFetNcek1ppGJQDCup0c1hpA==",
|
||||
"dev": true,
|
||||
"optional": true,
|
||||
"requires": {
|
||||
"chalk": "^4.1.0",
|
||||
"hash-sum": "^2.0.0",
|
||||
"loader-utils": "^2.0.0"
|
||||
},
|
||||
"dependencies": {
|
||||
"ansi-styles": {
|
||||
"version": "4.3.0",
|
||||
"resolved": "https://registry.npmmirror.com/ansi-styles/-/ansi-styles-4.3.0.tgz",
|
||||
"integrity": "sha512-zbB9rCJAT1rbjiVDb2hqKFHNYLxgtk8NURxZ3IZwD3F6NtxbXZQCnnSi1Lkx+IDohdPlFp222wVALIheZJQSEg==",
|
||||
"dev": true,
|
||||
"optional": true,
|
||||
"requires": {
|
||||
"color-convert": "^2.0.1"
|
||||
}
|
||||
},
|
||||
"chalk": {
|
||||
"version": "4.1.2",
|
||||
"resolved": "https://registry.npmmirror.com/chalk/-/chalk-4.1.2.tgz",
|
||||
"integrity": "sha512-oKnbhFyRIXpUuez8iBMmyEa4nbj4IOQyuhc/wy9kY7/WVPcwIO9VA668Pu8RkO7+0G76SLROeyw9CpQ061i4mA==",
|
||||
"dev": true,
|
||||
"optional": true,
|
||||
"requires": {
|
||||
"ansi-styles": "^4.1.0",
|
||||
"supports-color": "^7.1.0"
|
||||
}
|
||||
},
|
||||
"color-convert": {
|
||||
"version": "2.0.1",
|
||||
"resolved": "https://registry.npmmirror.com/color-convert/-/color-convert-2.0.1.tgz",
|
||||
"integrity": "sha512-RRECPsj7iu/xb5oKYcsFHSppFNnsj/52OVTRKb4zP5onXwVF3zVmmToNcOfGC+CRDpfK/U584fMg38ZHCaElKQ==",
|
||||
"dev": true,
|
||||
"optional": true,
|
||||
"requires": {
|
||||
"color-name": "~1.1.4"
|
||||
}
|
||||
},
|
||||
"color-name": {
|
||||
"version": "1.1.4",
|
||||
"resolved": "https://registry.npmmirror.com/color-name/-/color-name-1.1.4.tgz",
|
||||
"integrity": "sha512-dOy+3AuW3a2wNbZHIuMZpTcgjGuLU/uBL/ubcZF9OXbDo8ff4O8yVp5Bf0efS8uEoYo5q4Fx7dY9OgQGXgAsQA==",
|
||||
"dev": true,
|
||||
"optional": true
|
||||
},
|
||||
"has-flag": {
|
||||
"version": "4.0.0",
|
||||
"resolved": "https://registry.npmmirror.com/has-flag/-/has-flag-4.0.0.tgz",
|
||||
"integrity": "sha512-EykJT/Q1KjTWctppgIAgfSO0tKVuZUjhgMr17kqTumMl6Afv3EISleU7qZUzoXDFTAHTDC4NOoG/ZxU3EvlMPQ==",
|
||||
"dev": true,
|
||||
"optional": true
|
||||
},
|
||||
"supports-color": {
|
||||
"version": "7.2.0",
|
||||
"resolved": "https://registry.npmmirror.com/supports-color/-/supports-color-7.2.0.tgz",
|
||||
"integrity": "sha512-qpCAvRl9stuOHveKsn7HncJRvv501qIacKzQlO/+Lwxc9+0q2wLyv4Dfvt80/DPn2pqOBsJdDiogXGR9+OvwRw==",
|
||||
"dev": true,
|
||||
"optional": true,
|
||||
"requires": {
|
||||
"has-flag": "^4.0.0"
|
||||
}
|
||||
}
|
||||
}
|
||||
},
|
||||
"vue-router": {
|
||||
"version": "4.1.3",
|
||||
"resolved": "https://registry.npmjs.org/vue-router/-/vue-router-4.1.3.tgz",
|
||||
|
||||
@ -3,261 +3,306 @@
|
||||
-webkit-background-clip: text;
|
||||
-webkit-text-fill-color: transparent;
|
||||
}
|
||||
.homeBox{
|
||||
|
||||
.homeBox {
|
||||
width: 100%;
|
||||
height: 100vh;
|
||||
|
||||
.home-aside {
|
||||
position: relative;
|
||||
width: 442px;
|
||||
top: 70px;
|
||||
height: 100%;
|
||||
height: calc(100vh - 72px);
|
||||
overflow: hidden;
|
||||
z-index: 10;
|
||||
|
||||
.asideTitle {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: space-between;
|
||||
padding: 0 10px;
|
||||
box-sizing: border-box;
|
||||
background: linear-gradient(90deg, #124CB3 0%, rgba(18, 76, 179, 0.23) 77%, rgba(18, 76, 179, 0) 100%);
|
||||
border-radius: 0px 0px 0px 0px;
|
||||
height: 40px;
|
||||
|
||||
.title {
|
||||
font-weight: bold;
|
||||
font-size: 16px;
|
||||
color: #FFFFFF;
|
||||
margin-right: 20px;
|
||||
}
|
||||
}
|
||||
|
||||
.asideCnt {
|
||||
height: calc(100% - 40px);
|
||||
}
|
||||
|
||||
.aside-middle {
|
||||
height: calc(100%/2);
|
||||
padding: 4px;
|
||||
box-sizing: border-box;
|
||||
}
|
||||
}
|
||||
|
||||
.homeBtn {
|
||||
height: 302px;
|
||||
width: calc(100% - 894px);
|
||||
position: absolute;
|
||||
bottom: 2px;
|
||||
left: 50%;
|
||||
transform: translateX(-50%);
|
||||
}
|
||||
|
||||
// 头部
|
||||
.headBox {
|
||||
position: fixed;
|
||||
top: 0;
|
||||
width: 100%;
|
||||
height: 100vh;
|
||||
.home-aside{
|
||||
position: relative;
|
||||
width: 442px;
|
||||
top: 70px;
|
||||
height: 70px;
|
||||
background: rgba(0, 0, 0, 0.8);
|
||||
z-index: 2;
|
||||
|
||||
.headBoxBg {
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
height: calc(100vh - 72px);
|
||||
overflow: hidden;
|
||||
z-index: 10;
|
||||
.asideTitle{
|
||||
background: url("~@/assets/images/home_head.png") no-repeat center center;
|
||||
background-size: 100% 100%;
|
||||
height: 151px;
|
||||
}
|
||||
|
||||
.top-center {
|
||||
position: absolute;
|
||||
left: 50%;
|
||||
top: 2%;
|
||||
transform: translateX(-50%);
|
||||
font-size: 56px;
|
||||
letter-spacing: 2px;
|
||||
font-family: "YSBTH";
|
||||
white-space: nowrap;
|
||||
background: linear-gradient(180deg, #FFFFFF 0%, #66B5FF 100%);
|
||||
-webkit-background-clip: text;
|
||||
-webkit-text-fill-color: transparent;
|
||||
text-shadow: 4px 4px 4px rgba(54, 255, 243, 0.15);
|
||||
}
|
||||
|
||||
.topBtn {
|
||||
display: flex;
|
||||
position: absolute;
|
||||
top: 22px;
|
||||
|
||||
.topBtn-item {
|
||||
width: 190px;
|
||||
height: 38px;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: space-between;
|
||||
padding: 0 10px;
|
||||
box-sizing: border-box;
|
||||
background: linear-gradient( 90deg, #124CB3 0%, rgba(18,76,179,0.23) 77%, rgba(18,76,179,0) 100%);
|
||||
border-radius: 0px 0px 0px 0px;
|
||||
height: 40px;
|
||||
.title{
|
||||
font-weight: bold;
|
||||
font-size: 16px;
|
||||
color: #FFFFFF;
|
||||
margin-right: 20px;
|
||||
}
|
||||
}
|
||||
.asideCnt{
|
||||
height: calc(100% - 40px);
|
||||
}
|
||||
.aside-middle{
|
||||
height: calc(100%/2);
|
||||
padding: 4px;
|
||||
box-sizing: border-box;
|
||||
}
|
||||
}
|
||||
.homeBtn{
|
||||
height: 302px;
|
||||
width: calc(100% - 894px);
|
||||
position: absolute;
|
||||
bottom: 2px;
|
||||
left: 50%;
|
||||
transform: translateX(-50%);
|
||||
}
|
||||
// 头部
|
||||
.headBox {
|
||||
position: fixed;
|
||||
top: 0;
|
||||
width: 100%;
|
||||
height: 70px;
|
||||
background: rgba(0,0,0,0.8);
|
||||
z-index: 2;
|
||||
.headBoxBg{
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
background: url("~@/assets/images/home_head.png") no-repeat center center;
|
||||
justify-content: center;
|
||||
background: url("~@/assets/images/home_btns.png") no-repeat center center;
|
||||
background-size: 100% 100%;
|
||||
height: 151px;
|
||||
}
|
||||
.top-center {
|
||||
position: absolute;
|
||||
left: 50%;
|
||||
top: 2%;
|
||||
transform: translateX(-50%);
|
||||
font-size: 56px;
|
||||
letter-spacing: 2px;
|
||||
font-family: "YSBTH";
|
||||
white-space: nowrap;
|
||||
background: linear-gradient(180deg, #FFFFFF 0%, #66B5FF 100%);
|
||||
-webkit-background-clip: text;
|
||||
-webkit-text-fill-color: transparent;
|
||||
text-shadow: 4px 4px 4px rgba(54, 255, 243, 0.15);
|
||||
}
|
||||
.topBtn {
|
||||
display: flex;
|
||||
position: absolute;
|
||||
top: 22px;
|
||||
.topBtn-item {
|
||||
width: 190px;
|
||||
height: 38px;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
background: url("~@/assets/images/home_btns.png") no-repeat center center;
|
||||
background-size: 100% 100%;
|
||||
font-size: 18px;
|
||||
cursor: pointer;
|
||||
span {
|
||||
font-family: "YSBTH";
|
||||
margin-top: -4px;
|
||||
@include textColor(#a1d6ff, #ffffff);
|
||||
}
|
||||
}
|
||||
|
||||
}
|
||||
.topBtn-left {
|
||||
left: 30px;
|
||||
font-size: 12px;
|
||||
.text {
|
||||
font-size: 18px;
|
||||
cursor: pointer;
|
||||
|
||||
span {
|
||||
font-family: "YSBTH";
|
||||
color: #0bb7ff;
|
||||
}
|
||||
.tests {
|
||||
color: #0a99ff;
|
||||
}
|
||||
}
|
||||
.leftBtn-yjbtn{
|
||||
position: absolute;
|
||||
left: 360px;
|
||||
top: 20px;
|
||||
.leftBtn-item{
|
||||
width: 155px;
|
||||
height: 38px;
|
||||
line-height: 38px;
|
||||
text-align: center;
|
||||
background: url("~@/assets/images/home_btns.png") no-repeat center center;
|
||||
background-size: 100% 100%;
|
||||
font-size: 16px;
|
||||
font-family: "YSBTH";
|
||||
}
|
||||
.btms{
|
||||
margin-top: -4px;
|
||||
@include textColor(#a1d6ff, #ffffff);
|
||||
}
|
||||
}
|
||||
.yjbtnActive{
|
||||
background: url("~@/assets/images/home_btns_active.png") no-repeat center center;
|
||||
|
||||
}
|
||||
|
||||
.topBtn-left {
|
||||
left: 30px;
|
||||
font-size: 12px;
|
||||
|
||||
.text {
|
||||
font-family: "YSBTH";
|
||||
color: #0bb7ff;
|
||||
}
|
||||
|
||||
.tests {
|
||||
color: #0a99ff;
|
||||
}
|
||||
}
|
||||
|
||||
.leftBtn-yjbtn {
|
||||
position: absolute;
|
||||
left: 360px;
|
||||
top: 20px;
|
||||
|
||||
.leftBtn-item {
|
||||
width: 155px;
|
||||
height: 38px;
|
||||
line-height: 38px;
|
||||
text-align: center;
|
||||
background: url("~@/assets/images/home_btns.png") no-repeat center center;
|
||||
background-size: 100% 100%;
|
||||
.btms{
|
||||
font-size: 16px;
|
||||
font-family: "YSBTH";
|
||||
}
|
||||
|
||||
.btms {
|
||||
@include textColor(#a1d6ff, #ffffff);
|
||||
}
|
||||
}
|
||||
|
||||
.yjbtnActive {
|
||||
background: url("~@/assets/images/home_btns_active.png") no-repeat center center;
|
||||
background-size: 100% 100%;
|
||||
|
||||
.btms {
|
||||
@include textColor(#00ffff, #faff00);
|
||||
}
|
||||
}
|
||||
|
||||
.topBtn-right {
|
||||
right: 270px;
|
||||
top: 22px;
|
||||
|
||||
.topBtn-item {
|
||||
background: url("~@/assets/images/home_btns_right.png") no-repeat center center;
|
||||
background-size: 100% 100%;
|
||||
}
|
||||
|
||||
.active-topBtn {
|
||||
background: url("~@/assets/images/home_btns_right_active.png") no-repeat center center;
|
||||
background-size: 100% 100%;
|
||||
|
||||
span {
|
||||
@include textColor(#00ffff, #faff00);
|
||||
}
|
||||
}
|
||||
.topBtn-right {
|
||||
right: 270px;
|
||||
top: 22px;
|
||||
.topBtn-item {
|
||||
background: url("~@/assets/images/home_btns_right.png") no-repeat center
|
||||
center;
|
||||
background-size: 100% 100%;
|
||||
}
|
||||
.active-topBtn {
|
||||
background: url("~@/assets/images/home_btns_right_active.png") no-repeat
|
||||
center center;
|
||||
background-size: 100% 100%;
|
||||
span {
|
||||
@include textColor(#00ffff, #faff00);
|
||||
}
|
||||
}
|
||||
}
|
||||
.rightIcon {
|
||||
position: absolute;
|
||||
right: 20px;
|
||||
top: 22px;
|
||||
font-size: 17px;
|
||||
z-index: 9;
|
||||
span {
|
||||
color: #0bb7ff;
|
||||
cursor: pointer;
|
||||
}
|
||||
img {
|
||||
width: 20px;
|
||||
}
|
||||
}
|
||||
}
|
||||
// 左边
|
||||
.asideL{
|
||||
|
||||
.rightIcon {
|
||||
position: absolute;
|
||||
box-sizing: border-box;
|
||||
left: 0px;
|
||||
.asideL-top{
|
||||
width: 100%;
|
||||
height: 141px;
|
||||
background: #052249;
|
||||
}
|
||||
.asideL-Bottom{
|
||||
height: calc(100% - 141px);
|
||||
.commom-aside{
|
||||
height: calc((100%/3) - 6px);
|
||||
margin-top: 7px;
|
||||
background: #052249;
|
||||
}
|
||||
}
|
||||
}
|
||||
// 右边
|
||||
.asideR{
|
||||
position: absolute;
|
||||
right: 0px;
|
||||
.commom-aside-small{
|
||||
height: calc(((100% - 146px) /3) - 6px);
|
||||
background: #052249;
|
||||
margin-top: 9px;
|
||||
}
|
||||
.commom-aside-big{
|
||||
height: calc(((100% - (100% - 146px) /3)/2) - 6px);
|
||||
margin-bottom: 9px;
|
||||
background: #052249;
|
||||
}
|
||||
}
|
||||
|
||||
.home-center{
|
||||
position: absolute;
|
||||
left: 50%;
|
||||
top: 70px;
|
||||
transform: translateX(-50%);
|
||||
width: calc(100% - 890px);
|
||||
height: 80px;
|
||||
right: 20px;
|
||||
top: 22px;
|
||||
font-size: 17px;
|
||||
z-index: 9;
|
||||
|
||||
span {
|
||||
color: #0bb7ff;
|
||||
cursor: pointer;
|
||||
}
|
||||
|
||||
img {
|
||||
width: 20px;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
// 左边
|
||||
.asideL {
|
||||
position: absolute;
|
||||
box-sizing: border-box;
|
||||
left: 0px;
|
||||
|
||||
.asideL-top {
|
||||
width: 100%;
|
||||
height: 141px;
|
||||
background: #052249;
|
||||
}
|
||||
|
||||
.home-foot-t{
|
||||
position: absolute;
|
||||
left: 50%;
|
||||
bottom: 2px;
|
||||
transform: translateX(-50%);
|
||||
width: calc(100% - 920px);
|
||||
height: calc((100% - 141px)/3 - 32px);
|
||||
min-width: 560px;
|
||||
overflow: hidden;
|
||||
z-index: 9;
|
||||
background: url("~@/assets/images/right-1.png") no-repeat center center;
|
||||
background-size: 100% 100%;
|
||||
.comom-title{
|
||||
background: url("~@/assets/images/bg18.png") no-repeat center center;
|
||||
background-size: 100% 100%;
|
||||
.title{
|
||||
font-size: 22px;
|
||||
font-family: 'YSBTH';
|
||||
padding-left: 35px;
|
||||
}
|
||||
.asideL-Bottom {
|
||||
height: calc(100% - 141px);
|
||||
|
||||
.commom-aside {
|
||||
height: calc((100%/3) - 6px);
|
||||
margin-top: 7px;
|
||||
background: #052249;
|
||||
}
|
||||
}
|
||||
|
||||
// 公用
|
||||
.comom-title{
|
||||
background: url("~@/assets/images/bg17.png") no-repeat center center;
|
||||
}
|
||||
|
||||
// 右边
|
||||
.asideR {
|
||||
position: absolute;
|
||||
right: 0px;
|
||||
|
||||
.commom-aside-small {
|
||||
height: calc(((100% - 146px) /3) - 6px);
|
||||
background: #052249;
|
||||
margin-top: 9px;
|
||||
}
|
||||
|
||||
.commom-aside-big {
|
||||
height: calc(((100% - (100% - 146px) /3)/2) - 6px);
|
||||
margin-bottom: 9px;
|
||||
background: #052249;
|
||||
}
|
||||
}
|
||||
|
||||
.home-center {
|
||||
position: absolute;
|
||||
left: 50%;
|
||||
top: 70px;
|
||||
transform: translateX(-50%);
|
||||
width: calc(100% - 890px);
|
||||
z-index: 9;
|
||||
background: #052249;
|
||||
height: calc(100% - (100% - 141px) / 3 - 45px);
|
||||
|
||||
.middle-top {
|
||||
height: 80px;
|
||||
}
|
||||
|
||||
.middle-bottom {
|
||||
height: calc(100% - 90px);
|
||||
}
|
||||
}
|
||||
|
||||
.home-foot-t {
|
||||
position: absolute;
|
||||
left: 50%;
|
||||
bottom: 2px;
|
||||
transform: translateX(-50%);
|
||||
width: calc(100% - 920px);
|
||||
height: calc((100% - 141px)/3 - 32px);
|
||||
min-width: 560px;
|
||||
overflow: hidden;
|
||||
z-index: 9;
|
||||
background: url("~@/assets/images/right-1.png") no-repeat center center;
|
||||
background-size: 100% 100%;
|
||||
|
||||
.comom-title {
|
||||
background: url("~@/assets/images/bg18.png") no-repeat center center;
|
||||
background-size: 100% 100%;
|
||||
width: 100%;
|
||||
height: 35px;
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
align-items: center;
|
||||
padding: 0 10px;
|
||||
box-sizing: border-box;
|
||||
.title{
|
||||
|
||||
.title {
|
||||
font-size: 22px;
|
||||
font-family: 'YSBTH';
|
||||
padding-left: 35px;
|
||||
}
|
||||
}
|
||||
.comom-cnt{
|
||||
height: calc(100% - 35px);
|
||||
padding: 4px 10px;
|
||||
box-sizing: border-box;
|
||||
background: url("~@/assets/images/bg_13.png") no-repeat center center;
|
||||
background-size: 100% 100%;
|
||||
}
|
||||
|
||||
// 公用
|
||||
.comom-title {
|
||||
background: url("~@/assets/images/bg17.png") no-repeat center center;
|
||||
background-size: 100% 100%;
|
||||
width: 100%;
|
||||
height: 35px;
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
align-items: center;
|
||||
padding: 0 10px;
|
||||
box-sizing: border-box;
|
||||
|
||||
.title {
|
||||
font-size: 22px;
|
||||
font-family: 'YSBTH';
|
||||
padding-left: 35px;
|
||||
}
|
||||
|
||||
}
|
||||
}
|
||||
|
||||
.comom-cnt {
|
||||
height: calc(100% - 35px);
|
||||
padding: 4px 10px;
|
||||
box-sizing: border-box;
|
||||
background: url("~@/assets/images/bg_13.png") no-repeat center center;
|
||||
background-size: 100% 100%;
|
||||
}
|
||||
|
||||
}
|
||||
BIN
src/assets/images/ddtb.png
Normal file
BIN
src/assets/images/ddtb.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 1.1 KiB |
BIN
src/assets/images/xxxxxx.png
Normal file
BIN
src/assets/images/xxxxxx.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 17 KiB |
@ -340,7 +340,7 @@ export const publicRoutes = [
|
||||
"@/views/backOfficeSystem/HumanIntelligence/CollectCrculate/index"
|
||||
),
|
||||
meta: {
|
||||
title: "人力情报数据采集管理",
|
||||
title: "人力情报管理",
|
||||
icon: "article"
|
||||
}
|
||||
},
|
||||
@ -485,7 +485,7 @@ export const publicRoutes = [
|
||||
{
|
||||
path: "/mpvPeo",
|
||||
name: "mpvPeo",
|
||||
component: () =>import("@/views/backOfficeSystem/DeploymentDisposal/mpvPeo/index"),
|
||||
component: () => import("@/views/backOfficeSystem/DeploymentDisposal/mpvPeo/index"),
|
||||
meta: {
|
||||
title: "重点人管理",
|
||||
icon: "article"
|
||||
@ -494,7 +494,7 @@ export const publicRoutes = [
|
||||
{
|
||||
path: "/mpvPeoSh",
|
||||
name: "mpvPeoSh",
|
||||
component: () =>import("@/views/backOfficeSystem/DeploymentDisposal/mpvPeoSh/index"),
|
||||
component: () => import("@/views/backOfficeSystem/DeploymentDisposal/mpvPeoSh/index"),
|
||||
meta: {
|
||||
title: "重点人审批",
|
||||
icon: "article"
|
||||
@ -503,7 +503,7 @@ export const publicRoutes = [
|
||||
{
|
||||
path: "/mpvGroup",
|
||||
name: "mpvGroup",
|
||||
component: () =>import("@/views/backOfficeSystem/DeploymentDisposal/mpvGroup/index"),
|
||||
component: () => import("@/views/backOfficeSystem/DeploymentDisposal/mpvGroup/index"),
|
||||
meta: {
|
||||
title: "重点群体管理",
|
||||
icon: "article"
|
||||
@ -512,7 +512,7 @@ export const publicRoutes = [
|
||||
{
|
||||
path: "/mpvGroupSh",
|
||||
name: "mpvGroupSh",
|
||||
component: () =>import("@/views/backOfficeSystem/DeploymentDisposal/mpvGroupSh/index"),
|
||||
component: () => import("@/views/backOfficeSystem/DeploymentDisposal/mpvGroupSh/index"),
|
||||
meta: {
|
||||
title: "重点群体审核",
|
||||
icon: "article"
|
||||
@ -521,7 +521,7 @@ export const publicRoutes = [
|
||||
{
|
||||
path: "/mpvCar",
|
||||
name: "mpvCar",
|
||||
component: () =>import("@/views/backOfficeSystem/DeploymentDisposal/mpvCar/index"),
|
||||
component: () => import("@/views/backOfficeSystem/DeploymentDisposal/mpvCar/index"),
|
||||
meta: {
|
||||
title: "重点车辆管理",
|
||||
icon: "article"
|
||||
@ -548,6 +548,18 @@ export const publicRoutes = [
|
||||
title: "布控监视",
|
||||
icon: "article"
|
||||
}
|
||||
},
|
||||
{
|
||||
path: "/experienceShare",
|
||||
name: "experienceShare",
|
||||
component: () =>
|
||||
import(
|
||||
"@/views/backOfficeSystem/BasicManagement/experienceShare/index"
|
||||
),
|
||||
meta: {
|
||||
title: "经验分享",
|
||||
icon: "article"
|
||||
}
|
||||
}
|
||||
]
|
||||
}
|
||||
|
||||
@ -0,0 +1,109 @@
|
||||
<template>
|
||||
<div class="dialog" v-if="dialogForm">
|
||||
<div class="head_box">
|
||||
<span class="title">经验分享{{ title }} </span>
|
||||
<div>
|
||||
<el-button type="primary" size="small" :loading="loading" @click="submit">保存</el-button>
|
||||
<el-button size="small" @click="close">关闭</el-button>
|
||||
</div>
|
||||
</div>
|
||||
<div class="form_cnt">
|
||||
<FormMessage :formList="formData" v-model="listQuery" ref="elform" :rules="rules">
|
||||
</FormMessage>
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script setup>
|
||||
import FormMessage from "@/components/aboutTable/FormMessage.vue";
|
||||
import { qcckGet, qcckPost, qcckPut } from "@/api/qcckApi.js";
|
||||
import Xslist from '@/components/ChooseList/ChooseXs/index.vue'
|
||||
import { ref, defineExpose, reactive, defineEmits, getCurrentInstance } from "vue";
|
||||
const emit = defineEmits(["updateDate"]);
|
||||
const props = defineProps({
|
||||
dic: Object
|
||||
});
|
||||
const { proxy } = getCurrentInstance();
|
||||
|
||||
const dialogForm = ref(false); //弹窗
|
||||
|
||||
const rules = reactive({
|
||||
jymc: [
|
||||
{ required: true, message: "请输入经验名称", trigger: "blur" }
|
||||
],
|
||||
fbnr: [
|
||||
{ required: true, message: "请输入经验内容", trigger: "blur" }
|
||||
]
|
||||
});
|
||||
const formData = ref([
|
||||
|
||||
]);
|
||||
const listQuery = ref({}); //表单
|
||||
const loading = ref(false);
|
||||
const elform = ref();
|
||||
const title = ref("");
|
||||
|
||||
// 初始化数据
|
||||
const init = (type, row) => {
|
||||
dialogForm.value = true;
|
||||
title.value = type == "add" ? "新增" : "编辑";
|
||||
// 根据id查询详情
|
||||
if (row) {
|
||||
console.log(row,"xxxxx");
|
||||
formData.value = [
|
||||
{ label: "经验名称", prop: "jymc", type: "input", width: "100%" },
|
||||
{ label: "发布时间", prop: "fbsj", type: "input", width: "50%",disabled:true },
|
||||
{ label: "发布人", prop: "fbr", type: "input", width: "50%",disabled:true },
|
||||
{ label: "经验内容", prop: "fbnr", type: "textarea", width: "100%" },
|
||||
]
|
||||
listQuery.value = row;
|
||||
} else {
|
||||
formData.value = [
|
||||
{ label: "经验名称", prop: "jymc", type: "input", width: "100%" },
|
||||
{ label: "任务内容", prop: "fbnr", type: "textarea", width: "100%" },
|
||||
]
|
||||
}
|
||||
};
|
||||
|
||||
// 提交
|
||||
const submit = () => {
|
||||
elform.value.submit((data) => {
|
||||
let url = title.value == "新增" ? "/mosty-gsxt/gsxt/jyfx/add" : "/mosty-gsxt/gsxt/jyfx/edit";
|
||||
let params = { ...data };
|
||||
qcckPost(params, url).then(() => {
|
||||
loading.value = false;
|
||||
proxy.$message({ type: "success", message: title.value + "成功" });
|
||||
emit("updateDate");
|
||||
close();
|
||||
}).catch(()=>{
|
||||
loading.value = false;
|
||||
})
|
||||
});
|
||||
};
|
||||
|
||||
|
||||
|
||||
|
||||
// 关闭
|
||||
const close = () => {
|
||||
listQuery.value = {};
|
||||
loading.value = false;
|
||||
dialogForm.value = false;
|
||||
listQuery.value={}
|
||||
};
|
||||
|
||||
defineExpose({ init });
|
||||
</script>
|
||||
|
||||
<style lang="scss" scoped>
|
||||
@import "~@/assets/css/layout.scss";
|
||||
@import "~@/assets/css/element-plus.scss";
|
||||
|
||||
.boxlist {
|
||||
width: 99%;
|
||||
margin-top: 10px;
|
||||
}
|
||||
::v-deep .el-textarea__inner {
|
||||
min-height: 550px !important;
|
||||
}
|
||||
</style>
|
||||
@ -0,0 +1,195 @@
|
||||
<template>
|
||||
<div>
|
||||
<div class="titleBox">
|
||||
<PageTitle title="经验分享">
|
||||
<el-button type="primary" @click="addEdit('add', '')">
|
||||
<el-icon style="vertical-align: middle"><CirclePlus /></el-icon>
|
||||
<span style="vertical-align: middle">新增</span>
|
||||
</el-button>
|
||||
</PageTitle>
|
||||
</div>
|
||||
<!-- 搜索 -->
|
||||
<div ref="searchBox">
|
||||
<Search
|
||||
:searchArr="searchConfiger"
|
||||
@submit="onSearch"
|
||||
:key="pageData.keyCount"
|
||||
></Search>
|
||||
</div>
|
||||
<!-- 表格 -->
|
||||
<div class="tabBox">
|
||||
<MyTable
|
||||
:tableData="pageData.tableData"
|
||||
:tableColumn="pageData.tableColumn"
|
||||
:tableHeight="pageData.tableHeight"
|
||||
:key="pageData.keyCount"
|
||||
:tableConfiger="pageData.tableConfiger"
|
||||
:controlsWidth="pageData.controlsWidth"
|
||||
>
|
||||
<!-- 操作 -->
|
||||
<template #controls="{ row }">
|
||||
<el-link type="primary" @click="addEdit('edit', row)">编辑</el-link>
|
||||
<el-link type="danger" @click="delDictItem(row.id)">删除</el-link>
|
||||
</template>
|
||||
</MyTable>
|
||||
<Pages
|
||||
@changeNo="changeNo"
|
||||
@changeSize="changeSize"
|
||||
:tableHeight="pageData.tableHeight"
|
||||
:pageConfiger="{
|
||||
...pageData.pageConfiger,
|
||||
total: pageData.total
|
||||
}"
|
||||
></Pages>
|
||||
</div>
|
||||
<!-- 编辑详情 -->
|
||||
<EditAddForm
|
||||
v-if="show"
|
||||
ref="detailDiloag"
|
||||
:dic="{ D_GS_BQ_LX, D_GS_BQ_DJ, D_GS_SSYJ, D_GS_BQ_LB }"
|
||||
@updateDate="getList"
|
||||
/>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script setup>
|
||||
import PageTitle from "@/components/aboutTable/PageTitle.vue";
|
||||
import MyTable from "@/components/aboutTable/MyTable.vue";
|
||||
import Pages from "@/components/aboutTable/Pages.vue";
|
||||
import Search from "@/components/aboutTable/Search.vue";
|
||||
import EditAddForm from "./components/editAddForm.vue";
|
||||
import { qcckGet, qcckPost, qcckDelete } from "@/api/qcckApi.js";
|
||||
import { reactive, ref, onMounted, getCurrentInstance, nextTick } from "vue";
|
||||
const { proxy } = getCurrentInstance();
|
||||
|
||||
const detailDiloag = ref();
|
||||
const show = ref(false);
|
||||
const searchBox = ref(); //搜索框
|
||||
const searchConfiger = ref([
|
||||
{
|
||||
label: "发布人",
|
||||
prop: "fbr",
|
||||
placeholder: "请输入发布人",
|
||||
showType: "input"
|
||||
},
|
||||
{
|
||||
label: "经验标题",
|
||||
prop: "jymc",
|
||||
placeholder: "请输入经验标题",
|
||||
showType: "input"
|
||||
},
|
||||
{
|
||||
label: "发布时间",
|
||||
prop: "startTime",
|
||||
placeholder: "请选择发布时间",
|
||||
showType: "daterange"
|
||||
},
|
||||
]);
|
||||
const queryFrom = ref({});
|
||||
const pageData = reactive({
|
||||
tableData: [], //表格数据
|
||||
keyCount: 0,
|
||||
tableConfiger: {
|
||||
rowHieght: 61,
|
||||
showSelectType: "null",
|
||||
loading: false
|
||||
},
|
||||
total: 0,
|
||||
pageConfiger: {
|
||||
pageSize: 20,
|
||||
pageCurrent: 1
|
||||
}, //分页
|
||||
controlsWidth: 160, //操作栏宽度
|
||||
tableColumn: [
|
||||
{
|
||||
label: "发布人",
|
||||
prop: "fbr"
|
||||
},
|
||||
{
|
||||
label: "经验名称",
|
||||
prop: "jymc"
|
||||
},{
|
||||
label: "发布时间",
|
||||
prop: "fbsj"
|
||||
},{
|
||||
label: "发布内容",
|
||||
prop: "fbnr",
|
||||
showOverflowTooltip:true
|
||||
},
|
||||
|
||||
]
|
||||
});
|
||||
onMounted(() => {
|
||||
tabHeightFn();
|
||||
getList();
|
||||
});
|
||||
|
||||
// 搜索
|
||||
const onSearch = (val) => {
|
||||
queryFrom.value = {
|
||||
...val,
|
||||
startTime: val.startTime&&val.startTime.length > 0 ? val.startTime[0] : '',
|
||||
endTime: val.startTime&& val.startTime.length > 0 ? val.startTime[1] : ''
|
||||
};
|
||||
pageData.pageConfiger.pageCurrent = 1;
|
||||
getList();
|
||||
};
|
||||
|
||||
const changeNo = (val) => {
|
||||
pageData.pageConfiger.pageCurrent = val;
|
||||
getList();
|
||||
};
|
||||
const changeSize = (val) => {
|
||||
pageData.pageConfiger.pageSize = val;
|
||||
getList();
|
||||
};
|
||||
|
||||
const getList = () => {
|
||||
pageData.tableConfiger.loading = true;
|
||||
qcckPost(queryFrom.value, "/mosty-gsxt/gsxt/jyfx/selectPage")
|
||||
.then((res) => {
|
||||
pageData.tableData = res.records;
|
||||
pageData.total = res.total;
|
||||
pageData.tableConfiger.loading = false;
|
||||
})
|
||||
.catch(() => {
|
||||
pageData.tableConfiger.loading = false;
|
||||
});
|
||||
};
|
||||
|
||||
// 删除
|
||||
const delDictItem = (id) => {
|
||||
proxy
|
||||
.$confirm("确定要删除", "警告", { type: "warning" })
|
||||
.then(() => {
|
||||
qcckDelete({}, "/mosty-gsxt/tbGsxtBqzh/" + id).then(() => {
|
||||
proxy.$message({ type: "success", message: "删除成功" });
|
||||
getList();
|
||||
});
|
||||
})
|
||||
.catch(() => {});
|
||||
};
|
||||
|
||||
// 新增
|
||||
const addEdit = (type, row) => {
|
||||
show.value = true;
|
||||
nextTick(() => {
|
||||
detailDiloag.value.init(type, row);
|
||||
});
|
||||
};
|
||||
|
||||
// 表格高度计算
|
||||
const tabHeightFn = () => {
|
||||
pageData.tableHeight =
|
||||
window.innerHeight - searchBox.value.offsetHeight - 250;
|
||||
window.onresize = function () {
|
||||
tabHeightFn();
|
||||
};
|
||||
};
|
||||
</script>
|
||||
|
||||
<style>
|
||||
.el-loading-mask {
|
||||
background: rgba(0, 0, 0, 0.5) !important;
|
||||
}
|
||||
</style>
|
||||
131
src/views/home/components/assessmentItem.vue
Normal file
131
src/views/home/components/assessmentItem.vue
Normal file
@ -0,0 +1,131 @@
|
||||
<template>
|
||||
<div class="warning-card ">
|
||||
<div class="warning-info warning-boder pb5">
|
||||
<div class="mt4 two_text_detail">{{ item[nameData.title] }}</div>
|
||||
</div>
|
||||
<!-- 态势研判预警 -->
|
||||
<div class="warning-info pt5 pb5 flex align-center just-between" v-if="lx == 1">
|
||||
<div class="mt4 two_text_detail flex align-center">预警类别：
|
||||
<DictTag :tag="false" :value="item.ypLx" color="#fff" :options="dict.D_SG_TSYPGZ" />
|
||||
</div>
|
||||
<div class="mt4 two_text_detail">预警次数：{{ item.num }}</div>
|
||||
</div>
|
||||
<!-- 群体预警 -->
|
||||
<div class="warning-info pt5 pb5 flex align-center just-between" v-if="lx == 2">
|
||||
<div class="mt4 two_text_detail flex align-center">群体类别：
|
||||
<DictTag :tag="false" :value="item.qtlb" color="#fff" :options="dict.D_GS_ZDQT_LB" />
|
||||
</div>
|
||||
<div class="mt4 two_text_detail flex align-center">风险等级：
|
||||
<DictTag :tag="false" :value="item.yjJb" color="#fff" :options="dict.D_BZ_TYJB" />
|
||||
</div>
|
||||
</div>
|
||||
<!-- 经验分享 -->
|
||||
<div class="warning-info pt5 pb5 flex align-center just-between" v-if="lx == 3">
|
||||
<div class="mt4 two_text_detail">经验发布人：{{ item.fbr }}</div>
|
||||
</div>
|
||||
<div class="warning-info pt5 pb5 warning-boder" v-if="lx == 1 || lx == 2">
|
||||
<div class="mt4 two_text_detail">预警时间：{{ item.yjsj }}</div>
|
||||
</div>
|
||||
<div class="warning-info pt5 pb5 warning-boder" v-if="lx == 3">
|
||||
<div class="mt4 two_text_detail">经验内容：{{ item.fbnr }}</div>
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script setup>
|
||||
import { IdCard } from '@/utils/validate.js'
|
||||
import { reactive, ref, watch } from "vue";
|
||||
const props = defineProps({
|
||||
item: {
|
||||
type: Object,
|
||||
default: {}
|
||||
}, dict: {
|
||||
tupe: Object,
|
||||
default: {}
|
||||
},
|
||||
lx: {
|
||||
type: Number,
|
||||
default: 1
|
||||
}
|
||||
});
|
||||
let nameData = ref({
|
||||
title: "ypMc",
|
||||
lbNoe: "预警类别：",
|
||||
})
|
||||
watch(() => props.lx, (val) => {
|
||||
switch (val) {
|
||||
case 1:
|
||||
nameData.value = { title: 'ypMc' }
|
||||
break;
|
||||
case 2:
|
||||
nameData.value = { title: 'qtMc' }
|
||||
case 3:
|
||||
nameData.value = { title: 'qtMc' }
|
||||
break;
|
||||
}
|
||||
}, { immediate: true })
|
||||
</script>
|
||||
|
||||
<style lang="scss" scoped>
|
||||
.warning-card {
|
||||
background: url("~@/assets/images/xxxxxx.png") no-repeat center center;
|
||||
background-size: 100% 100%;
|
||||
gap: 12px;
|
||||
margin-bottom: 4px;
|
||||
padding: 10px;
|
||||
box-sizing: border-box;
|
||||
|
||||
.warning-image {
|
||||
//
|
||||
// width: 80px;
|
||||
// height: 100px;
|
||||
|
||||
// img {
|
||||
// width: 100%;
|
||||
// height: 100%;
|
||||
// object-fit: cover;
|
||||
// }
|
||||
}
|
||||
|
||||
.warning-info {
|
||||
flex: 1;
|
||||
|
||||
.tag {
|
||||
padding: 1px 6px;
|
||||
background: #0072FF;
|
||||
border-radius: 2px 2px 2px 2px;
|
||||
font-size: 12px;
|
||||
}
|
||||
|
||||
.gapline {
|
||||
width: 2px;
|
||||
height: 14px;
|
||||
background: #e9e9e9;
|
||||
}
|
||||
}
|
||||
|
||||
.warning-boder {
|
||||
border-bottom: 2px dashed #0958b2;
|
||||
}
|
||||
}
|
||||
|
||||
.red {
|
||||
background: url("~@/assets/images/GroupRed.png") no-repeat center center;
|
||||
background-size: 100% 100%;
|
||||
}
|
||||
|
||||
.orange {
|
||||
background: url("~@/assets/images/GroupOrange.png") no-repeat center center;
|
||||
background-size: 100% 100%;
|
||||
}
|
||||
|
||||
.yellow {
|
||||
background: url("~@/assets/images/GroupYellow.png") no-repeat center center;
|
||||
background-size: 100% 100%;
|
||||
}
|
||||
|
||||
.blue {
|
||||
background: url("~@/assets/images/GroupBlue.png") no-repeat center center;
|
||||
background-size: 100% 100%;
|
||||
}
|
||||
</style>
|
||||
125
src/views/home/components/deployControlItem.vue
Normal file
125
src/views/home/components/deployControlItem.vue
Normal file
@ -0,0 +1,125 @@
|
||||
<template>
|
||||
<div class="warning-card ">
|
||||
<div class="warning-image flex">
|
||||
<img :src="item.yjTp" width="65" height="70" />
|
||||
<div class="ml10 warning-info">
|
||||
<div class="flex just-between align-center">
|
||||
<div class="flex align-center mt4" v-if="item.yjLx == 2">
|
||||
<span >{{ item.yjClcph }}</span>
|
||||
</div>
|
||||
<div class="flex align-center mt4" v-else>
|
||||
<span>{{ item.yjRyxm }}</span>
|
||||
<span class="gapline mr10 ml10"></span>
|
||||
<span>{{ IdCard(item.yjRysfzh, 2) }}</span>
|
||||
<span class="gapline mr10 ml10"></span>
|
||||
<span>{{ IdCard(item.yjRysfzh, 3) }}</span>
|
||||
</div>
|
||||
<span class="tag" v-if="item.yjbqmc">{{ item.yjbqmc }}</span>
|
||||
</div>
|
||||
<div v-if="item.yjLx == 2" class="flex">车牌类型：
|
||||
<DictTag :tag="false" :value="item.yjHplx" color="#fff" :options="dict.D_BZ_HPZL"/>
|
||||
</div>
|
||||
<div class="mt4" v-else>身份证：{{ item.yjRysfzh }}</div>
|
||||
<div class="mt4 two_text_detail">预警时间：{{ item.yjSj }}</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="warning-info warning-boder pb5">
|
||||
<div class="mt4 two_text_detail">预警内容：{{ item.yjNr }}</div>
|
||||
</div>
|
||||
<div class="warning-info pt5 pb5 warning-boder">
|
||||
<div class="mt4 two_text_detail">处置结果：{{ item.yjNr }}</div>
|
||||
</div>
|
||||
<div class="warning-info pt5 ">
|
||||
<div class="two_text_detail flex lh25"><img src="@/assets/images/ddtb.png" width="20" height="25" alt="" srcset="">{{ item.yjNr }}</div>
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script setup>
|
||||
import { IdCard } from '@/utils/validate.js'
|
||||
import { reactive, ref } from "vue";
|
||||
const props = defineProps({
|
||||
item: {
|
||||
type: Object,
|
||||
default: {}
|
||||
}, dict: {
|
||||
tupe: Object,
|
||||
default: {}
|
||||
}
|
||||
});
|
||||
|
||||
const changeBG = (str) => {
|
||||
switch (str) {
|
||||
case "10":
|
||||
return "red";
|
||||
case "20":
|
||||
return "orange";
|
||||
case "30":
|
||||
return "yellow";
|
||||
default: return "blue";
|
||||
}
|
||||
};
|
||||
</script>
|
||||
|
||||
<style lang="scss" scoped>
|
||||
.warning-card {
|
||||
background: url("~@/assets/images/xxxxxx.png") no-repeat center center;
|
||||
background-size: 100% 100%;
|
||||
gap: 12px;
|
||||
margin-bottom: 4px;
|
||||
padding: 10px;
|
||||
box-sizing: border-box;
|
||||
|
||||
.warning-image {
|
||||
//
|
||||
// width: 80px;
|
||||
// height: 100px;
|
||||
|
||||
// img {
|
||||
// width: 100%;
|
||||
// height: 100%;
|
||||
// object-fit: cover;
|
||||
// }
|
||||
}
|
||||
|
||||
.warning-info {
|
||||
flex: 1;
|
||||
|
||||
.tag {
|
||||
padding: 1px 6px;
|
||||
background: #0072FF;
|
||||
border-radius: 2px 2px 2px 2px;
|
||||
font-size: 12px;
|
||||
}
|
||||
|
||||
.gapline {
|
||||
width: 2px;
|
||||
height: 14px;
|
||||
background: #e9e9e9;
|
||||
}
|
||||
}
|
||||
.warning-boder{
|
||||
border-bottom: 2px dashed #0958b2;
|
||||
}
|
||||
}
|
||||
|
||||
.red {
|
||||
background: url("~@/assets/images/GroupRed.png") no-repeat center center;
|
||||
background-size: 100% 100%;
|
||||
}
|
||||
|
||||
.orange {
|
||||
background: url("~@/assets/images/GroupOrange.png") no-repeat center center;
|
||||
background-size: 100% 100%;
|
||||
}
|
||||
|
||||
.yellow {
|
||||
background: url("~@/assets/images/GroupYellow.png") no-repeat center center;
|
||||
background-size: 100% 100%;
|
||||
}
|
||||
|
||||
.blue {
|
||||
background: url("~@/assets/images/GroupBlue.png") no-repeat center center;
|
||||
background-size: 100% 100%;
|
||||
}
|
||||
</style>
|
||||
@ -5,16 +5,24 @@
|
||||
</div>
|
||||
<div class="warning-info">
|
||||
<div class="flex just-between align-center">
|
||||
<div class="flex align-center mt4">
|
||||
<span>{{ item.yjRyxm }}</span>
|
||||
<span class="gapline mr10 ml10"></span>
|
||||
<span>{{ IdCard(item.yjRysfzh,2) }}</span>
|
||||
<span class="gapline mr10 ml10"></span>
|
||||
<span>{{ IdCard(item.yjRysfzh,3) }}</span>
|
||||
</div>
|
||||
<div class="flex align-center mt4" v-if="item.yjLx == 2">
|
||||
<span >{{ item.yjClcph }}</span>
|
||||
</div>
|
||||
<div class="flex align-center mt4" v-else>
|
||||
<span>{{ item.yjRyxm }}</span>
|
||||
<span class="gapline mr10 ml10"></span>
|
||||
<span>{{ IdCard(item.yjRysfzh, 2) }}</span>
|
||||
<span class="gapline mr10 ml10"></span>
|
||||
<span>{{ IdCard(item.yjRysfzh, 3) }}</span>
|
||||
</div>
|
||||
|
||||
<span class="tag" v-if="item.yjbqmc">{{ item.yjbqmc }}</span>
|
||||
</div>
|
||||
<div class="mt4">身份证：{{ item.yjRysfzh }}</div>
|
||||
<div v-if="item.yjLx == 2" class="flex">车牌类型：
|
||||
<DictTag :tag="false" :value="item.yjHplx" color="#fff" :options="dict.D_BZ_HPZL"/>
|
||||
</div>
|
||||
<div class="mt4" v-else>身份证：{{ item.yjRysfzh }}</div>
|
||||
<div class="mt4 two_text_detail">预警时间：{{ item.yjSj }}</div>
|
||||
<div class="mt4 one_text_detail">预警地址：{{ item.yjDz }}</div>
|
||||
<div class="mt4 two_text_detail">预警内容：{{ item.yjNr }}</div>
|
||||
</div>
|
||||
@ -28,19 +36,22 @@ const props = defineProps({
|
||||
item: {
|
||||
type: Object,
|
||||
default: {}
|
||||
}, dict: {
|
||||
tupe: Object,
|
||||
default: {}
|
||||
}
|
||||
});
|
||||
|
||||
const changeBG = (str) => {
|
||||
switch(str){
|
||||
case "10":
|
||||
return "red";
|
||||
case "20":
|
||||
return "orange";
|
||||
case "30":
|
||||
return "yellow";
|
||||
default: return "blue";
|
||||
}
|
||||
switch (str) {
|
||||
case "10":
|
||||
return "red";
|
||||
case "20":
|
||||
return "orange";
|
||||
case "30":
|
||||
return "yellow";
|
||||
default: return "blue";
|
||||
}
|
||||
};
|
||||
</script>
|
||||
|
||||
@ -52,31 +63,36 @@ const changeBG = (str) => {
|
||||
margin-bottom: 4px;
|
||||
padding: 10px;
|
||||
box-sizing: border-box;
|
||||
|
||||
.warning-image {
|
||||
width: 80px;
|
||||
height: 100px;
|
||||
img {
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
object-fit: cover;
|
||||
}
|
||||
|
||||
img {
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
object-fit: cover;
|
||||
}
|
||||
}
|
||||
|
||||
.warning-info {
|
||||
flex: 1;
|
||||
|
||||
.tag {
|
||||
padding: 1px 6px;
|
||||
background: #0072FF;
|
||||
border-radius: 2px 2px 2px 2px;
|
||||
font-size: 12px;
|
||||
}
|
||||
|
||||
.warning-info {
|
||||
flex: 1;
|
||||
.tag{
|
||||
padding: 1px 6px;
|
||||
background: #0072FF;
|
||||
border-radius: 2px 2px 2px 2px;
|
||||
font-size: 12px;
|
||||
}
|
||||
.gapline{
|
||||
width: 2px;
|
||||
height: 14px;
|
||||
background: #e9e9e9;
|
||||
}
|
||||
.gapline {
|
||||
width: 2px;
|
||||
height: 14px;
|
||||
background: #e9e9e9;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.red {
|
||||
background: url("~@/assets/images/GroupRed.png") no-repeat center center;
|
||||
background-size: 100% 100%;
|
||||
@ -86,13 +102,14 @@ const changeBG = (str) => {
|
||||
background: url("~@/assets/images/GroupOrange.png") no-repeat center center;
|
||||
background-size: 100% 100%;
|
||||
}
|
||||
|
||||
.yellow {
|
||||
background: url("~@/assets/images/GroupYellow.png") no-repeat center center;
|
||||
background-size: 100% 100%;
|
||||
}
|
||||
|
||||
.blue {
|
||||
background: url("~@/assets/images/GroupBlue.png") no-repeat center center;
|
||||
background-size: 100% 100%;
|
||||
}
|
||||
|
||||
</style>
|
||||
|
||||
@ -1,7 +1,8 @@
|
||||
<template>
|
||||
<div class="homeBox">
|
||||
<GdMap></GdMap>
|
||||
<!-- <GdMap></GdMap> -->
|
||||
<!-- 头部 -->
|
||||
|
||||
<Head></Head>
|
||||
<!-- 内容 -->
|
||||
<!-- 左边 -->
|
||||
@ -10,19 +11,44 @@
|
||||
<DbCount></DbCount>
|
||||
</div>
|
||||
<div class="asideL-Bottom">
|
||||
<div class="commom-aside"><QbsbCount></QbsbCount></div>
|
||||
<div class="commom-aside"><QblyType></QblyType></div>
|
||||
<div class="commom-aside"><QbfkCount></QbfkCount></div>
|
||||
<div class="commom-aside">
|
||||
<QbsbCount></QbsbCount>
|
||||
</div>
|
||||
<div class="commom-aside">
|
||||
<QblyType></QblyType>
|
||||
</div>
|
||||
<div class="commom-aside">
|
||||
<QbfkCount></QbfkCount>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<!-- 右边 -->
|
||||
<div class="home-aside asideR">
|
||||
<div class="commom-aside-big"><ZdryWarning></ZdryWarning></div>
|
||||
<div class="commom-aside-big"><Zdgk></Zdgk></div>
|
||||
<div class="commom-aside-small"><Fjqk></Fjqk></div>
|
||||
<div class="commom-aside-big">
|
||||
<SituationAssessment/>
|
||||
</div>
|
||||
<div class="commom-aside-big">
|
||||
<GroupWarning/>
|
||||
</div>
|
||||
<div class="commom-aside-small">
|
||||
<Experience/>
|
||||
</div>
|
||||
</div>
|
||||
<!-- 中间 -->
|
||||
<div class="home-center"><Yszs></Yszs></div>
|
||||
<div class="home-center">
|
||||
<div class="middle-top">
|
||||
<Yszs />
|
||||
</div>
|
||||
<div class="flex middle-bottom mt10">
|
||||
<div class="mr10" style="width: 50%;">
|
||||
<DeployControl />
|
||||
</div>
|
||||
<div class="flex-1" style="flex: 1;">
|
||||
<ZdryWarning />
|
||||
</div>
|
||||
</div>
|
||||
|
||||
</div>
|
||||
<!-- 底部 -->
|
||||
<div class="home-foot-t">
|
||||
<Bkcz></Bkcz>
|
||||
@ -43,14 +69,18 @@ import QbsbCount from './model/qbsbCount.vue'
|
||||
import QblyType from './model/qblyType.vue'
|
||||
import Bkcz from './model/bkcz.vue'
|
||||
import ZdryWarning from './model/zdryWarning.vue'
|
||||
import Zdgk from './model/zdgk.vue'
|
||||
import GroupWarning from './model/groupWarning.vue'
|
||||
import Fjqk from './model/fjqk.vue'
|
||||
import Yszs from './model/yszs.vue'
|
||||
import DeployControl from './model/deployControl.vue';
|
||||
import SituationAssessment from './model/situationAssessment.vue'
|
||||
import Experience from './model/experience.vue'
|
||||
</script>
|
||||
|
||||
<style lang="scss" scoped>
|
||||
@import "@/assets/css/homeScreen.scss";
|
||||
|
||||
.transition {
|
||||
transition: all 0.5s;
|
||||
}
|
||||
</style>
|
||||
</style>
|
||||
|
||||
149
src/views/home/model/deployControl.vue
Normal file
149
src/views/home/model/deployControl.vue
Normal file
@ -0,0 +1,149 @@
|
||||
<template>
|
||||
<div class="comom-title">
|
||||
<span class="title">布控预警</span>
|
||||
</div>
|
||||
<div class="comom-cnt zdryBox">
|
||||
<div style="height:33px;">
|
||||
<CheckBox :data="checkData" @changeData="changeData"></CheckBox>
|
||||
</div>
|
||||
<ul class="ryBox" v-loading="loading" v-infinite-scroll="loadList" style="overflow: auto">
|
||||
<li v-for="item in personList" :key="item.id" @click="chooseItem(item)">
|
||||
<DeployControlItem :item="item" :dict="{D_BZ_HPZL}"/>
|
||||
</li>
|
||||
<MOSTY.Empty :show="!loading && personList.length <= 0" :imgSize="100"></MOSTY.Empty>
|
||||
</ul>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script setup>
|
||||
import emitter from "@/utils/eventBus.js";
|
||||
import { qcckPost } from "@/api/qcckApi.js";
|
||||
import DeployControlItem from "@/views/home/components/deployControlItem.vue";
|
||||
import * as MOSTY from "@/components/MyComponents/index";
|
||||
import CheckBox from "@/components/checkBox/index.vue";
|
||||
import { ref ,reactive, onMounted,getCurrentInstance} from 'vue';
|
||||
const { proxy } = getCurrentInstance();
|
||||
const {D_BZ_HPZL} =proxy.$dict('D_BZ_HPZL')
|
||||
const checkData = reactive({
|
||||
list: ["一级", "二级", "三级", "四级"],
|
||||
hasChoose: ["一级", "二级", "三级", "四级"]
|
||||
});
|
||||
const total = ref(0);
|
||||
const yjJb = ref('10,20,30,40');
|
||||
const pageNum = ref(1);
|
||||
const loading = ref(false); // 加载中
|
||||
const personList = ref([]);
|
||||
onMounted(()=>{
|
||||
getList()
|
||||
})
|
||||
// 复选框切换
|
||||
function changeData(val){
|
||||
pageNum.value = 1;
|
||||
personList.value = [];
|
||||
checkData.hasChoose = val;
|
||||
let ids = [];
|
||||
val.forEach(it => {
|
||||
if(it == '一级') ids.push(10);
|
||||
if(it == '二级') ids.push(20);
|
||||
if(it == '三级') ids.push(30);
|
||||
if(it == '四级') ids.push(40);
|
||||
});
|
||||
yjJb.value = ids.join(',')
|
||||
if(val.length == 0) personList.value = [];
|
||||
else getList();
|
||||
}
|
||||
|
||||
// 触底加载
|
||||
const loadList = () =>{
|
||||
if( personList.value.length == total.value) return;
|
||||
pageNum.value++;
|
||||
getList()
|
||||
}
|
||||
|
||||
const getList = () =>{
|
||||
let data = { pageSize:10, pageNum:pageNum.value,yjJb:yjJb.value ,bkyj:1};
|
||||
loading.value = true;
|
||||
qcckPost(data,'/mosty-gsxt/tbYjxx/getPageList').then(res=>{
|
||||
loading.value = false;
|
||||
let arr = res.records || [];
|
||||
personList.value = pageNum.value == 1 ? arr : personList.value.concat(arr);
|
||||
total.value = res.total;
|
||||
}).catch(()=>{
|
||||
loading.value = false;
|
||||
})
|
||||
}
|
||||
|
||||
const chooseItem = (item) =>{
|
||||
emitter.emit('showHomeYJ',[item]);
|
||||
emitter.emit('deletePointArea','home_yj_map');
|
||||
if(!item.jd || !item.jd) return proxy.$message({ type: "warning", message: "该预警没有坐标！" });
|
||||
let icon = require('@/assets/point/yj.png');
|
||||
if(item.yjjb == '20') icon = require('@/assets/point/yj1.png');
|
||||
if(item.yjjb == '30') icon = require('@/assets/point/yj2.png');
|
||||
if(item.yjjb == '40') icon = require('@/assets/point/yj3.png');
|
||||
emitter.emit('addPointArea',{flag:'home_yj_map',icon,coords:[item]});
|
||||
emitter.emit('setMapCenter',{location:[item.jd,item.wd],zoomLevel:10});
|
||||
}
|
||||
</script>
|
||||
|
||||
<style>
|
||||
.el-loading-mask{
|
||||
background: rgba(0,0,0,0.5);
|
||||
}
|
||||
</style>
|
||||
|
||||
<style lang="scss" scoped>
|
||||
@import "@/assets/css/homeScreen.scss";
|
||||
.zdryBox{
|
||||
background: #052249;
|
||||
height: 100%;
|
||||
.ryBox{
|
||||
height: calc(100% - 33px);
|
||||
overflow: hidden;
|
||||
overflow-y: auto;
|
||||
}
|
||||
}
|
||||
|
||||
::-webkit-scrollbar {
|
||||
background-color: #263b70;
|
||||
}
|
||||
::-webkit-scrollbar-thumb {
|
||||
background-color: #146bbe;
|
||||
}
|
||||
::-webkit-scrollbar-track {
|
||||
background-color: #263b70;
|
||||
}
|
||||
::-webkit-scrollbar-corner {
|
||||
background-color: #142141;
|
||||
}
|
||||
|
||||
::v-deep .el-checkbox__label{
|
||||
color:#fff;
|
||||
}
|
||||
::v-deep .el-checkbox__input.is-checked+.el-checkbox__label{
|
||||
color:#00FFFF;
|
||||
}
|
||||
::v-deep .el-checkbox__inner{
|
||||
background:rgba(0,144,255,0.2);
|
||||
border:1px solid #0072FF;
|
||||
}
|
||||
::v-deep .el-checkbox__input.is-checked .el-checkbox__inner{
|
||||
background-color: #00FFFF;
|
||||
border-color:#00FFFF;
|
||||
}
|
||||
::v-deep .el-checkbox__input.is-indeterminate .el-checkbox__inner{
|
||||
background-color: #00FFFF;
|
||||
border-color:#00FFFF;
|
||||
}
|
||||
::v-deep .el-checkbox__inner::after{
|
||||
border:2px solid #000;
|
||||
border-left:0;
|
||||
border-top:0;
|
||||
left:3px;
|
||||
top:0px;
|
||||
}
|
||||
::v-deep .el-checkbox__input.is-indeterminate .el-checkbox__inner::before{
|
||||
background: #000;
|
||||
}
|
||||
|
||||
</style>
|
||||
144
src/views/home/model/experience.vue
Normal file
144
src/views/home/model/experience.vue
Normal file
@ -0,0 +1,144 @@
|
||||
<template>
|
||||
<div class="comom-title">
|
||||
<span class="title">经验分享</span>
|
||||
</div>
|
||||
<div class="comom-cnt zdryBox">
|
||||
<ul class="ryBox" v-loading="loading" v-infinite-scroll="loadList" style="overflow: auto">
|
||||
<li v-for="item in personList" :key="item.id" >
|
||||
<Assessment :item="item" :dict="{D_GS_ZDQT_LB,D_BZ_TYJB}" :lx="3"/>
|
||||
</li>
|
||||
<MOSTY.Empty :show="!loading && personList.length <= 0" :imgSize="100"></MOSTY.Empty>
|
||||
</ul>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script setup>
|
||||
import emitter from "@/utils/eventBus.js";
|
||||
import { qcckPost } from "@/api/qcckApi.js";
|
||||
import Assessment from "@/views/home/components/assessmentItem.vue";
|
||||
import * as MOSTY from "@/components/MyComponents/index";
|
||||
import CheckBox from "@/components/checkBox/index.vue";
|
||||
import { ref ,reactive, onMounted,getCurrentInstance} from 'vue';
|
||||
const { proxy } = getCurrentInstance();
|
||||
const {D_GS_ZDQT_LB,D_BZ_TYJB} =proxy.$dict('D_GS_ZDQT_LB','D_BZ_TYJB')
|
||||
const checkData = reactive({
|
||||
list: ["人员", "车辆"],
|
||||
hasChoose: ["人员", "车辆"],
|
||||
});
|
||||
const total = ref(0);
|
||||
const yjJb = ref('10,20,30,40');
|
||||
const pageNum = ref(1);
|
||||
const loading = ref(false); // 加载中
|
||||
const personList = ref([]);
|
||||
onMounted(()=>{
|
||||
getList()
|
||||
})
|
||||
// 复选框切换
|
||||
function changeData(val){
|
||||
pageNum.value = 1;
|
||||
personList.value = [];
|
||||
checkData.hasChoose = val;
|
||||
let ids = [];
|
||||
val.forEach(it => {
|
||||
if(it == '人员') ids.push(1);
|
||||
if(it == '车辆') ids.push(2);
|
||||
});
|
||||
yjJb.value = ids.join(',')
|
||||
if(val.length == 0) personList.value = [];
|
||||
else getList();
|
||||
}
|
||||
|
||||
// 触底加载
|
||||
const loadList = () =>{
|
||||
if( personList.value.length == total.value) return;
|
||||
pageNum.value++;
|
||||
getList()
|
||||
}
|
||||
|
||||
const getList = () =>{
|
||||
let data = { pageSize:10, pageCurrent:pageNum.value };
|
||||
loading.value = true;
|
||||
qcckPost(data,'/mosty-gsxt/gsxt/jyfx/selectPage').then(res=>{
|
||||
loading.value = false;
|
||||
let arr = res.records || [];
|
||||
personList.value = pageNum.value == 1 ? arr : personList.value.concat(arr);
|
||||
total.value = res.total;
|
||||
}).catch(()=>{
|
||||
loading.value = false;
|
||||
})
|
||||
}
|
||||
|
||||
const chooseItem = (item) =>{
|
||||
emitter.emit('showHomeYJ',[item]);
|
||||
emitter.emit('deletePointArea','home_yj_map');
|
||||
if(!item.jd || !item.jd) return proxy.$message({ type: "warning", message: "该预警没有坐标！" });
|
||||
let icon = require('@/assets/point/yj.png');
|
||||
if(item.yjjb == '20') icon = require('@/assets/point/yj1.png');
|
||||
if(item.yjjb == '30') icon = require('@/assets/point/yj2.png');
|
||||
if(item.yjjb == '40') icon = require('@/assets/point/yj3.png');
|
||||
emitter.emit('addPointArea',{flag:'home_yj_map',icon,coords:[item]});
|
||||
emitter.emit('setMapCenter',{location:[item.jd,item.wd],zoomLevel:10});
|
||||
}
|
||||
</script>
|
||||
|
||||
<style>
|
||||
.el-loading-mask{
|
||||
background: rgba(0,0,0,0.5);
|
||||
}
|
||||
</style>
|
||||
|
||||
<style lang="scss" scoped>
|
||||
@import "@/assets/css/homeScreen.scss";
|
||||
.zdryBox{
|
||||
background: #052249;
|
||||
height: 100%;
|
||||
.ryBox{
|
||||
height: 100%;
|
||||
overflow: hidden;
|
||||
overflow-y: auto;
|
||||
}
|
||||
}
|
||||
|
||||
::-webkit-scrollbar {
|
||||
background-color: #263b70;
|
||||
}
|
||||
::-webkit-scrollbar-thumb {
|
||||
background-color: #146bbe;
|
||||
}
|
||||
::-webkit-scrollbar-track {
|
||||
background-color: #263b70;
|
||||
}
|
||||
::-webkit-scrollbar-corner {
|
||||
background-color: #142141;
|
||||
}
|
||||
|
||||
::v-deep .el-checkbox__label{
|
||||
color:#fff;
|
||||
}
|
||||
::v-deep .el-checkbox__input.is-checked+.el-checkbox__label{
|
||||
color:#00FFFF;
|
||||
}
|
||||
::v-deep .el-checkbox__inner{
|
||||
background:rgba(0,144,255,0.2);
|
||||
border:1px solid #0072FF;
|
||||
}
|
||||
::v-deep .el-checkbox__input.is-checked .el-checkbox__inner{
|
||||
background-color: #00FFFF;
|
||||
border-color:#00FFFF;
|
||||
}
|
||||
::v-deep .el-checkbox__input.is-indeterminate .el-checkbox__inner{
|
||||
background-color: #00FFFF;
|
||||
border-color:#00FFFF;
|
||||
}
|
||||
::v-deep .el-checkbox__inner::after{
|
||||
border:2px solid #000;
|
||||
border-left:0;
|
||||
border-top:0;
|
||||
left:3px;
|
||||
top:0px;
|
||||
}
|
||||
::v-deep .el-checkbox__input.is-indeterminate .el-checkbox__inner::before{
|
||||
background: #000;
|
||||
}
|
||||
|
||||
</style>
|
||||
144
src/views/home/model/groupWarning.vue
Normal file
144
src/views/home/model/groupWarning.vue
Normal file
@ -0,0 +1,144 @@
|
||||
<template>
|
||||
<div class="comom-title">
|
||||
<span class="title">群体预警</span>
|
||||
</div>
|
||||
<div class="comom-cnt zdryBox">
|
||||
<ul class="ryBox" v-loading="loading" v-infinite-scroll="loadList" style="overflow: auto">
|
||||
<li v-for="item in personList" :key="item.id" >
|
||||
<Assessment :item="item" :dict="{D_GS_ZDQT_LB,D_BZ_TYJB}" :lx="2"/>
|
||||
</li>
|
||||
<MOSTY.Empty :show="!loading && personList.length <= 0" :imgSize="100"></MOSTY.Empty>
|
||||
</ul>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script setup>
|
||||
import emitter from "@/utils/eventBus.js";
|
||||
import { qcckPost } from "@/api/qcckApi.js";
|
||||
import Assessment from "@/views/home/components/assessmentItem.vue";
|
||||
import * as MOSTY from "@/components/MyComponents/index";
|
||||
import CheckBox from "@/components/checkBox/index.vue";
|
||||
import { ref ,reactive, onMounted,getCurrentInstance} from 'vue';
|
||||
const { proxy } = getCurrentInstance();
|
||||
const {D_GS_ZDQT_LB,D_BZ_TYJB} =proxy.$dict('D_GS_ZDQT_LB','D_BZ_TYJB')
|
||||
const checkData = reactive({
|
||||
list: ["人员", "车辆"],
|
||||
hasChoose: ["人员", "车辆"],
|
||||
});
|
||||
const total = ref(0);
|
||||
const yjJb = ref('10,20,30,40');
|
||||
const pageNum = ref(1);
|
||||
const loading = ref(false); // 加载中
|
||||
const personList = ref([]);
|
||||
onMounted(()=>{
|
||||
getList()
|
||||
})
|
||||
// 复选框切换
|
||||
function changeData(val){
|
||||
pageNum.value = 1;
|
||||
personList.value = [];
|
||||
checkData.hasChoose = val;
|
||||
let ids = [];
|
||||
val.forEach(it => {
|
||||
if(it == '人员') ids.push(1);
|
||||
if(it == '车辆') ids.push(2);
|
||||
});
|
||||
yjJb.value = ids.join(',')
|
||||
if(val.length == 0) personList.value = [];
|
||||
else getList();
|
||||
}
|
||||
|
||||
// 触底加载
|
||||
const loadList = () =>{
|
||||
if( personList.value.length == total.value) return;
|
||||
pageNum.value++;
|
||||
getList()
|
||||
}
|
||||
|
||||
const getList = () =>{
|
||||
let data = { pageSize:10, pageCurrent:pageNum.value };
|
||||
loading.value = true;
|
||||
qcckPost(data,'/mosty-gsxt/qtYjxx/getPageList').then(res=>{
|
||||
loading.value = false;
|
||||
let arr = res.records || [];
|
||||
personList.value = pageNum.value == 1 ? arr : personList.value.concat(arr);
|
||||
total.value = res.total;
|
||||
}).catch(()=>{
|
||||
loading.value = false;
|
||||
})
|
||||
}
|
||||
|
||||
const chooseItem = (item) =>{
|
||||
emitter.emit('showHomeYJ',[item]);
|
||||
emitter.emit('deletePointArea','home_yj_map');
|
||||
if(!item.jd || !item.jd) return proxy.$message({ type: "warning", message: "该预警没有坐标！" });
|
||||
let icon = require('@/assets/point/yj.png');
|
||||
if(item.yjjb == '20') icon = require('@/assets/point/yj1.png');
|
||||
if(item.yjjb == '30') icon = require('@/assets/point/yj2.png');
|
||||
if(item.yjjb == '40') icon = require('@/assets/point/yj3.png');
|
||||
emitter.emit('addPointArea',{flag:'home_yj_map',icon,coords:[item]});
|
||||
emitter.emit('setMapCenter',{location:[item.jd,item.wd],zoomLevel:10});
|
||||
}
|
||||
</script>
|
||||
|
||||
<style>
|
||||
.el-loading-mask{
|
||||
background: rgba(0,0,0,0.5);
|
||||
}
|
||||
</style>
|
||||
|
||||
<style lang="scss" scoped>
|
||||
@import "@/assets/css/homeScreen.scss";
|
||||
.zdryBox{
|
||||
background: #052249;
|
||||
height: 100%;
|
||||
.ryBox{
|
||||
height: 100%;
|
||||
overflow: hidden;
|
||||
overflow-y: auto;
|
||||
}
|
||||
}
|
||||
|
||||
::-webkit-scrollbar {
|
||||
background-color: #263b70;
|
||||
}
|
||||
::-webkit-scrollbar-thumb {
|
||||
background-color: #146bbe;
|
||||
}
|
||||
::-webkit-scrollbar-track {
|
||||
background-color: #263b70;
|
||||
}
|
||||
::-webkit-scrollbar-corner {
|
||||
background-color: #142141;
|
||||
}
|
||||
|
||||
::v-deep .el-checkbox__label{
|
||||
color:#fff;
|
||||
}
|
||||
::v-deep .el-checkbox__input.is-checked+.el-checkbox__label{
|
||||
color:#00FFFF;
|
||||
}
|
||||
::v-deep .el-checkbox__inner{
|
||||
background:rgba(0,144,255,0.2);
|
||||
border:1px solid #0072FF;
|
||||
}
|
||||
::v-deep .el-checkbox__input.is-checked .el-checkbox__inner{
|
||||
background-color: #00FFFF;
|
||||
border-color:#00FFFF;
|
||||
}
|
||||
::v-deep .el-checkbox__input.is-indeterminate .el-checkbox__inner{
|
||||
background-color: #00FFFF;
|
||||
border-color:#00FFFF;
|
||||
}
|
||||
::v-deep .el-checkbox__inner::after{
|
||||
border:2px solid #000;
|
||||
border-left:0;
|
||||
border-top:0;
|
||||
left:3px;
|
||||
top:0px;
|
||||
}
|
||||
::v-deep .el-checkbox__input.is-indeterminate .el-checkbox__inner::before{
|
||||
background: #000;
|
||||
}
|
||||
|
||||
</style>
|
||||
144
src/views/home/model/situationAssessment.vue
Normal file
144
src/views/home/model/situationAssessment.vue
Normal file
@ -0,0 +1,144 @@
|
||||
<template>
|
||||
<div class="comom-title">
|
||||
<span class="title">态势研判预警</span>
|
||||
</div>
|
||||
<div class="comom-cnt zdryBox">
|
||||
<ul class="ryBox" v-loading="loading" v-infinite-scroll="loadList" style="overflow: auto">
|
||||
<li v-for="item in personList" :key="item.id" >
|
||||
<Assessment :item="item" :dict="{D_SG_TSYPGZ}" :lx="2"/>
|
||||
</li>
|
||||
<MOSTY.Empty :show="!loading && personList.length <= 0" :imgSize="100"></MOSTY.Empty>
|
||||
</ul>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script setup>
|
||||
import emitter from "@/utils/eventBus.js";
|
||||
import { qcckPost } from "@/api/qcckApi.js";
|
||||
import Assessment from "@/views/home/components/assessmentItem.vue";
|
||||
import * as MOSTY from "@/components/MyComponents/index";
|
||||
import CheckBox from "@/components/checkBox/index.vue";
|
||||
import { ref ,reactive, onMounted,getCurrentInstance} from 'vue';
|
||||
const { proxy } = getCurrentInstance();
|
||||
const {D_SG_TSYPGZ} =proxy.$dict('D_SG_TSYPGZ')
|
||||
const checkData = reactive({
|
||||
list: ["人员", "车辆"],
|
||||
hasChoose: ["人员", "车辆"],
|
||||
});
|
||||
const total = ref(0);
|
||||
const yjJb = ref('10,20,30,40');
|
||||
const pageNum = ref(1);
|
||||
const loading = ref(false); // 加载中
|
||||
const personList = ref([]);
|
||||
onMounted(()=>{
|
||||
getList()
|
||||
})
|
||||
// 复选框切换
|
||||
function changeData(val){
|
||||
pageNum.value = 1;
|
||||
personList.value = [];
|
||||
checkData.hasChoose = val;
|
||||
let ids = [];
|
||||
val.forEach(it => {
|
||||
if(it == '人员') ids.push(1);
|
||||
if(it == '车辆') ids.push(2);
|
||||
});
|
||||
yjJb.value = ids.join(',')
|
||||
if(val.length == 0) personList.value = [];
|
||||
else getList();
|
||||
}
|
||||
|
||||
// 触底加载
|
||||
const loadList = () =>{
|
||||
if( personList.value.length == total.value) return;
|
||||
pageNum.value++;
|
||||
getList()
|
||||
}
|
||||
|
||||
const getList = () =>{
|
||||
let data = { pageSize:10, pageCurrent:pageNum.value };
|
||||
loading.value = true;
|
||||
qcckPost(data,'/mosty-gsxt/tsyp/selectPage').then(res=>{
|
||||
loading.value = false;
|
||||
let arr = res.records || [];
|
||||
personList.value = pageNum.value == 1 ? arr : personList.value.concat(arr);
|
||||
total.value = res.total;
|
||||
}).catch(()=>{
|
||||
loading.value = false;
|
||||
})
|
||||
}
|
||||
|
||||
const chooseItem = (item) =>{
|
||||
emitter.emit('showHomeYJ',[item]);
|
||||
emitter.emit('deletePointArea','home_yj_map');
|
||||
if(!item.jd || !item.jd) return proxy.$message({ type: "warning", message: "该预警没有坐标！" });
|
||||
let icon = require('@/assets/point/yj.png');
|
||||
if(item.yjjb == '20') icon = require('@/assets/point/yj1.png');
|
||||
if(item.yjjb == '30') icon = require('@/assets/point/yj2.png');
|
||||
if(item.yjjb == '40') icon = require('@/assets/point/yj3.png');
|
||||
emitter.emit('addPointArea',{flag:'home_yj_map',icon,coords:[item]});
|
||||
emitter.emit('setMapCenter',{location:[item.jd,item.wd],zoomLevel:10});
|
||||
}
|
||||
</script>
|
||||
|
||||
<style>
|
||||
.el-loading-mask{
|
||||
background: rgba(0,0,0,0.5);
|
||||
}
|
||||
</style>
|
||||
|
||||
<style lang="scss" scoped>
|
||||
@import "@/assets/css/homeScreen.scss";
|
||||
.zdryBox{
|
||||
background: #052249;
|
||||
height: 100%;
|
||||
.ryBox{
|
||||
height: 100%;
|
||||
overflow: hidden;
|
||||
overflow-y: auto;
|
||||
}
|
||||
}
|
||||
|
||||
::-webkit-scrollbar {
|
||||
background-color: #263b70;
|
||||
}
|
||||
::-webkit-scrollbar-thumb {
|
||||
background-color: #146bbe;
|
||||
}
|
||||
::-webkit-scrollbar-track {
|
||||
background-color: #263b70;
|
||||
}
|
||||
::-webkit-scrollbar-corner {
|
||||
background-color: #142141;
|
||||
}
|
||||
|
||||
::v-deep .el-checkbox__label{
|
||||
color:#fff;
|
||||
}
|
||||
::v-deep .el-checkbox__input.is-checked+.el-checkbox__label{
|
||||
color:#00FFFF;
|
||||
}
|
||||
::v-deep .el-checkbox__inner{
|
||||
background:rgba(0,144,255,0.2);
|
||||
border:1px solid #0072FF;
|
||||
}
|
||||
::v-deep .el-checkbox__input.is-checked .el-checkbox__inner{
|
||||
background-color: #00FFFF;
|
||||
border-color:#00FFFF;
|
||||
}
|
||||
::v-deep .el-checkbox__input.is-indeterminate .el-checkbox__inner{
|
||||
background-color: #00FFFF;
|
||||
border-color:#00FFFF;
|
||||
}
|
||||
::v-deep .el-checkbox__inner::after{
|
||||
border:2px solid #000;
|
||||
border-left:0;
|
||||
border-top:0;
|
||||
left:3px;
|
||||
top:0px;
|
||||
}
|
||||
::v-deep .el-checkbox__input.is-indeterminate .el-checkbox__inner::before{
|
||||
background: #000;
|
||||
}
|
||||
|
||||
</style>
|
||||
@ -41,4 +41,4 @@ const getCount = () =>{
|
||||
height: 50px;
|
||||
background: url('~@/assets/images/line.png') no-repeat bottom center;
|
||||
}
|
||||
</style>
|
||||
</style>
|
||||
|
||||
@ -1,14 +1,14 @@
|
||||
<template>
|
||||
<div class="comom-title">
|
||||
<span class="title">重点人员动态预警</span>
|
||||
</div>
|
||||
<span class="title">常规预警</span>
|
||||
</div>
|
||||
<div class="comom-cnt zdryBox">
|
||||
<div style="height:33px;">
|
||||
<CheckBox :data="checkData" @changeData="changeData"></CheckBox>
|
||||
</div>
|
||||
<ul class="ryBox" v-loading="loading" v-infinite-scroll="loadList" style="overflow: auto">
|
||||
<li v-for="item in personList" :key="item.id" @click="chooseItem(item)">
|
||||
<YjItem :item="item"></YjItem>
|
||||
<YjItem :item="item" :dict="{D_BZ_HPZL}"></YjItem>
|
||||
</li>
|
||||
<MOSTY.Empty :show="!loading && personList.length <= 0" :imgSize="100"></MOSTY.Empty>
|
||||
</ul>
|
||||
@ -23,12 +23,13 @@ import * as MOSTY from "@/components/MyComponents/index";
|
||||
import CheckBox from "@/components/checkBox/index.vue";
|
||||
import { ref ,reactive, onMounted,getCurrentInstance} from 'vue';
|
||||
const { proxy } = getCurrentInstance();
|
||||
const {D_BZ_HPZL} =proxy.$dict('D_BZ_HPZL')
|
||||
const checkData = reactive({
|
||||
list: ["红", "橙", "黄", "蓝"],
|
||||
hasChoose: ["红","橙", "黄", "蓝"]
|
||||
list: ["人员", "车辆"],
|
||||
hasChoose: ["人员", "车辆"],
|
||||
});
|
||||
const total = ref(0);
|
||||
const yjJb = ref('10,20,30,40');
|
||||
const yjJb = ref('1,2');
|
||||
const pageNum = ref(1);
|
||||
const loading = ref(false); // 加载中
|
||||
const personList = ref([]);
|
||||
@ -42,10 +43,8 @@ function changeData(val){
|
||||
checkData.hasChoose = val;
|
||||
let ids = [];
|
||||
val.forEach(it => {
|
||||
if(it == '红') ids.push(10);
|
||||
if(it == '橙') ids.push(20);
|
||||
if(it == '黄') ids.push(30);
|
||||
if(it == '蓝') ids.push(40);
|
||||
if(it == '人员') ids.push(1);
|
||||
if(it == '车辆') ids.push(2);
|
||||
});
|
||||
yjJb.value = ids.join(',')
|
||||
if(val.length == 0) personList.value = [];
|
||||
@ -60,9 +59,9 @@ const loadList = () =>{
|
||||
}
|
||||
|
||||
const getList = () =>{
|
||||
let data = { pageSize:10, pageNum:pageNum.value,yjJb:yjJb.value };
|
||||
let data = { pageSize:10, pageNum:pageNum.value,yjLx:yjJb.value };
|
||||
loading.value = true;
|
||||
qcckPost(data,'/mosty-jmxf/tbYjxx/getPageList').then(res=>{
|
||||
qcckPost(data,'/mosty-gsxt/tbYjxx/getPageList').then(res=>{
|
||||
loading.value = false;
|
||||
let arr = res.records || [];
|
||||
personList.value = pageNum.value == 1 ? arr : personList.value.concat(arr);
|
||||
|
||||
@ -4,7 +4,7 @@ function resolve(dir) {
|
||||
return path.join(__dirname, dir);
|
||||
}
|
||||
|
||||
const serverHost = "http://192.168.8.15:8066"//波哥
|
||||
const serverHost = "http://192.168.1.32:8066"//波哥
|
||||
// const serverHost = "http://192.168.0.231:8006"//线上
|
||||
// const serverHost = "http://192.168.1.117:8006"//周
|
||||
// const serverHost = "http://192.168.1.98:8006"//毛毛
|
||||
|
||||
Reference in New Issue
Block a user