Skip to content
Projects
Groups
Snippets
Help
Loading...
Help
Submit feedback
Contribute to GitLab
Sign in / Register
Toggle navigation
Q
quality-dynamic
Project
Project
Details
Activity
Releases
Cycle Analytics
Repository
Repository
Files
Commits
Branches
Tags
Contributors
Graph
Compare
Charts
Issues
0
Issues
0
List
Board
Labels
Milestones
Merge Requests
0
Merge Requests
0
CI / CD
CI / CD
Pipelines
Jobs
Schedules
Charts
Wiki
Wiki
Snippets
Snippets
Members
Members
Collapse sidebar
Close sidebar
Activity
Graph
Charts
Create a new issue
Jobs
Commits
Issue Boards
Open sidebar
张牧越
quality-dynamic
Commits
5e00bd12
Commit
5e00bd12
authored
Dec 02, 2024
by
张牧越
Browse files
Options
Browse Files
Download
Email Patches
Plain Diff
假数据添加
parent
64559f2b
Changes
20
Show whitespace changes
Inline
Side-by-side
Showing
20 changed files
with
2131 additions
and
1028 deletions
+2131
-1028
element.less
src/assets/common/element.less
+359
-143
icon_tab_arr.png
src/assets/images/common/icon_tab_arr.png
+0
-0
dialog-title-bg.png
src/assets/images/dialog-title-bg.png
+0
-0
Dialog.vue
src/components/common/Dialog.vue
+100
-0
DialogApiDataTable.vue
src/components/common/DialogApiDataTable.vue
+171
-0
DialogTabs.vue
src/components/common/DialogTabs.vue
+97
-0
STable.vue
src/components/common/STable.vue
+67
-29
STable2.vue
src/components/common/STable2.vue
+68
-29
Section.vue
src/components/common/Section.vue
+5
-1
Title.vue
src/components/common/Title.vue
+10
-1
main.js
src/main.js
+7
-3
request.js
src/utils/request.js
+3
-0
Index copy2.vue
src/views/DataStatis/Index copy2.vue
+0
-747
Index.vue
src/views/DataStatis/Index.vue
+388
-74
CXCY.vue
src/views/DataStatis/project/CXCY.vue
+174
-0
GCZL.vue
src/views/DataStatis/project/GCZL.vue
+192
-0
Index.vue
src/views/DataStatis/project/Index.vue
+79
-0
ProjectDetail.vue
src/views/DataStatis/project/ProjectDetail.vue
+248
-0
ZFJG.vue
src/views/DataStatis/project/ZFJG.vue
+162
-0
vue.config.js
vue.config.js
+1
-1
No files found.
src/assets/common/element.less
View file @
5e00bd12
.el-date-editor {
vertical-align: top;
/* select style */
.el-select__wrapper {
background: transparent;
box-shadow: none;
border: 1px solid rgba(49, 97, 166, 1);
}
.el-input__inner {
background: #07196e !important;
border: 2px solid #0f57ba !important;
color: #fff !important;
}
.el-select__placeholder {
color: #fff;
}
.el-input__prefix {
color: #fff !important;
}
.el-input__inner {
color: #fff;
}
.el-input {
.el-input__inner {
background: #07196e !important;
border: 2px solid #0f57ba !importa
nt;
color: #fff !important
;
}
/* table style */
.el-table {
background-color: transpare
nt;
color: #fff
;
font-size: 12px;
}
.el-range-editor {
line-height: 32px;
.el-table tr {
background-color: transparent;
}
&.el-input__inner {
background: #07196e !important;
border: 2px solid #0f57ba !important;
color: #fff !important;
}
.el-table .cell {
padding: 8px 6px;
line-height: 18px;
.el-range-input {
background: transparent;
color: #fff;
}
}
.el-range-separator {
color: #fff;
}
.el-input__icon
{
.el-table thead
{
color: #fff;
}
}
.el-select {
.el-input__inner {
background: #07196e !important;
border: 2px solid #0f57ba !important;
color: #fff !important;
}
.el-table th.el-table__cell {
background: rgba(35, 221, 255, 0.2);
}
.el-dropdown-menu {
background: rgba(8, 34, 68, 0.9);
border: 1px solid #3CD4D4;
.el-table .el-table__cell {
padding: 0;
}
.el-
popper[x-placement^=top] .popper__arrow::after
{
border-top-color: rgba(8, 34, 68, 0.9)
;
.el-
table thead th
{
font-weight: 400
;
}
.el-dropdown-menu {
.el-dropdown-menu__item {
padding: 0;
color: #3DC7C7;
border-bottom: 1px solid rgba(44, 158, 169, 1);
border-image: linear-gradient(90deg, rgba(44, 158, 169, 0) 0%, rgba(44, 158, 169, 1) 50%, rgba(44, 158, 169, 0) 100%) 1;
}
.el-dropdown-menu__item:focus,
.el-dropdown-menu__item:not(.is-disabled):hover {
color: #33ffff;
background: transparent;
}
.el-table * {
border-color: rgba(11, 116, 136, 1);
}
.el-dropdown-menu__item:last-of-type {
border-bottom: none;
}
.el-table {
--el-table-border-color: rgba(11, 116, 136, 1);
}
.el-textarea__inner {
.el-table--enable-row-hover .el-table__body tr:hover>td.el-table__cell {
background: rgba(35, 221, 255, .3) !important;
}
background: #1E499B;
.el-table--striped .el-table__body tr.el-table__row--striped td.el-table__cell {
background: rgba(35, 221, 255, .1);
}
.el-table__empty-text {
color: #fff;
}
.el-dialog__body {
background: #063572;
/* dialog style */
.el-dialog {
padding: 0;
}
.el-dialog__header {
text-align: center;
padding: 16px 0;
height: 30px;
background: #063B80;
position: relative;
.el-dialog__title {
}
.el-dialog__header .el-dialog__title {
color: #fff;
z-index: 999;
position: absolute;
...
...
@@ -104,108 +97,331 @@
top: 50%;
transform: translateX(-50%)translateY(-50%);
}
}
&
::after {
.el-dialog__header
::after {
content: '';
position: absolute;
top: 0;
left: 50%;
width: 100%;
height: 100%;
//
background: url('@/assets/images/dialog-title-bg.png') no-repeat;
background: url('@/assets/images/dialog-title-bg.png') no-repeat;
background-size: 100% 100%;
transform: translateX(-50%);
z-index: 0;
}
}
.el-dialog__headerbtn {
.el-dialog__header
.el-dialog__headerbtn {
z-index: 999
}
}
.el-dialog {
border: 1px solid #107DE5;
border-radius: 10px;
overflow: hidden;
.el-dialog .el-dialog__body {
height: 800px;
display: flex;
flex-direction: column;
padding: 20px;
background: #033168;
}
.el-form-item__label {
color: #fff;
padding-bottom: 0 !important;
.el-dialog.full-screen .el-dialog__body {
height: calc(100% - 90px);
display: flex;
flex-direction: column;
}
.
el-dialog__body
{
padding: 16px 40px
;
.
search-form
{
width: 100%
;
}
.el-dialog__close {
.el-icon.el-dialog__close {
color: #fff;
font-size: 20px;
color: #fff !important;
line-height: 20px;
vertical-align: top;
margin-top: 2px;
}
.el-table {
background: #113883 !important;
.el-dialog__headerbtn {
width: 20px;
height: 20px;
top: 15px;
right: 14px;
transform: scale(1.2);
}
thead {
tr,
th {
background: #1D489B !important;
color: #fff;
}
}
/* form-style */
.search-form {
background: #12407F;
line-height: 40px;
position: relative;
}
.el-table tr {
background: rgba(17, 56, 131, 0.5);
color: #fff;
.search-form .el-form-item {
margin: 4px 0 !important;
}
.el-table--striped .el-table__body tr.el-table__row--striped td.el-table__cell {
background: #063572 !important;
.search-form .el-form-item__label {
font-size: 14px;
color: #60FFF6;
padding-left: 8px;
}
.
el-table--enable-row-hover .el-table__body tr:hover>td.el-table__cell
{
background: #063572 !important
;
.
search-form .el-select
{
min-width: 120px
;
}
.
el-table--border::after,
.el-table--group::after,
.el-table::before {
b
ackground-color: transparent !important
;
.
search-form .el-select__wrapper {
background: #072350;
box-shadow: none;
b
order: none
;
}
.el-table td.el-table__cell,
.el-table th.el-table__cell.is-leaf {
.search-form .el-input__inner {
background: #072350;
box-shadow: none;
border: none;
}
.
el-pagination
{
.
search-form .el-date-editor .el-range-separator
{
color: #fff;
text-align: right;
padding: 12px;
}
.el-pagination__total,
.el-pagination__jump {
color: #fff !important
;
}
.search-form .el-date-editor.el-input__inner {
background: rgba(6, 53, 114, 1) !important;
border: none
;
}
button
{
.search-form .el-date-editor .el-range-input
{
background-color: transparent !important;
}
color: #fff;
}
.el-pager li {
background-color: transparent !important;
}
.search-form .el-button--primary {
background: #37CCC4;
margin-left: 10px;
border: none;
}
.search-form .el-form--inline .el-form-item {
vertical-align: top;
}
.el-pager li.btn-quicknext,
.el-pager li.btn-quickprev {
/* dialog-table style */
.dialog-data-table {
margin-top: 10px;
width: 100%;
}
.dialog-data-table .el-scrollbar__view {
height: 100%;
}
.dialog-data-table:not(.no-minheight) {
flex-grow: 1;
}
.dialog-data-table.el-table th.el-table__cell {
background: #16488B;
}
.dialog-data-table.el-table {
--el-table-border-color: #1F4C89;
}
.table-pagination {
line-height: 50px;
border: 1.5px solid #1F4C89;
border-top: none;
padding: 0 10px;
color: #fff;
justify-content: right;
width: 100%;
box-sizing: border-box;
display: flex;
}
.table-pagination .el-pagination__sizes,
.el-pagination__total,
.el-pagination__jump {
color: #fff;
}
.table-pagination .el-input__inner {
background: transparent;
border: 1px solid rgba(60, 117, 193, 1);
box-shadow: none;
}
.table-pagination .el-input__inner {
color: #fff;
}
}
.table-pagination.el-pagination button .el-icon {
width: 1em !important;
height: 1em !important;
}
.table-pagination.el-pagination button,
.table-pagination.el-pagination button.is-disabled,
.table-pagination.el-pagination button:disabled {
background-color: transparent;
color: #fff;
line-height: 32px;
vertical-align: top;
}
.btn-next,
.btn-prev {
.table-pagination .el-pager li {
background-color: transparent;
color: #fff;
}
}
.table-pagination .el-pager li.is-active,
.table-pagination .el-pager li:hover {
color: #409eff;
}
.table-pagination .el-pagination__total {
flex-grow: 1;
}
/* calendar-style */
.el-calendar {
background: transparent;
--el-calendar-border: 1px solid #033168;
}
.el-calendar-table {
border-spacing: 4px;
}
.el-calendar-table thead th {
color: #fff;
}
.el-calendar__body {
padding: 0;
}
.el-calendar-table .el-calendar-day {
height: 40px;
}
.el-calendar-day {
color: #7DFBF4;
border: 1px solid #2857AE;
}
.el-calendar-table td {
background: #0E3779;
}
.el-calendar-day:hover {
background: #16428B !important;
}
.el-calendar-table:not(.is-range) td.next,
.el-calendar-table:not(.is-range) td.prev {
background: #033168 !important;
}
.el-calendar-table td.is-selected {
background: #0E3779 !important;
border: 1px solid #fff !important;
}
.el-calendar__header {
padding: 0;
}
.el-calendar-table thead th {
padding: 4px 0;
}
/* radio style */
.el-radio-button__inner {
background: #072350;
border: none !important;
color: #fff;
}
.el-icon {
width: 20px;
height: 20px;
}
.el-picker-panel__body .el-input__inner {
color: #606266 !important;
}
.el-pagination button,
.el-pagination span:not([class*=suffix]) {
line-height: 50px;
}
.table-pagination.el-pagination button,
.table-pagination.el-pagination button.is-disabled,
.table-pagination.el-pagination button:disabled {
line-height: 50px;
}
.el-pagination button,
.el-pagination span:not([class*=suffix]) {
height: 50px;
}
.el-pager li {
height: 50px;
line-height: 50px;
}
.el-table--border {
border: 1px solid rgba(31, 76, 137, 1) !important;
}
.el-table td.el-table__cell,
.el-table th.el-table__cell.is-leaf {
border-bottom: 1px solid rgba(31, 76, 137, 1) !important;
}
.el-table--border::after,
.el-table--group::after,
.el-table::before {
background-color: rgba(31, 76, 137, 1) !important;
}
.el-table--border .el-table__cell,
.el-table__body-wrapper .el-table--border.is-scrolling-left~.el-table__fixed {
border-right: 1px solid rgba(31, 76, 137, 1) !important;
}
.el-message {
font-size: 14px !important;
}
.el-pager .more::before {
line-height: 50px;
}
\ No newline at end of file
src/assets/images/common/icon_tab_arr.png
0 → 100644
View file @
5e00bd12
2.74 KB
src/assets/images/dialog-title-bg.png
0 → 100644
View file @
5e00bd12
70.6 KB
src/components/common/Dialog.vue
0 → 100644
View file @
5e00bd12
<
template
>
<el-dialog
:visible
.
sync=
"dialogVisible"
:class=
"[isFullScreen ? 'full-screen' : '']"
:append-to-body=
"true"
:width=
"width"
top=
".98rem"
@
close=
"closeDialog"
:destroy-on-close=
"true"
>
<template
slot=
"title"
>
<div
class=
"dialog-title"
>
<span
class=
"dialog-title-span"
>
{{
title
}}
</span>
<span
class=
"op-buttons"
>
<i
@
click=
"changeFullScreen"
:class=
"['iconfont', isFullScreen ? 'icon-suoxiao' : 'icon-fangda']"
></i>
</span>
</div>
</
template
>
<slot
/>
</el-dialog>
</template>
<
script
>
export
default
{
name
:
"Dialog"
,
props
:
{
visible
:
{
type
:
Boolean
,
default
:
false
,
},
title
:
{
type
:
String
,
default
:
""
,
},
width
:
{
type
:
[
String
,
Number
],
default
:
1200
,
},
},
data
()
{
return
{
isFullScreen
:
false
,
};
},
computed
:
{
dialogVisible
:
{
get
()
{
return
this
.
visible
;
},
set
(
val
)
{
this
.
$emit
(
"change-visible"
,
val
);
},
},
},
methods
:
{
closeDialog
()
{
console
.
log
(
"???"
);
this
.
dialogVisible
=
false
;
console
.
log
(
this
.
dialogVisible
);
},
changeFullScreen
()
{
this
.
isFullScreen
=
!
this
.
isFullScreen
;
this
.
$nextTick
(()
=>
{
window
.
dispatchEvent
(
new
Event
(
"resize"
));
});
},
},
};
</
script
>
<
style
lang=
"less"
scoped
>
.dialog-title {
position: relative;
z-index: 999;
color: #fff;
font-size: 18px;
line-height: 0.22rem;
.op-buttons {
position: absolute;
right: 15px;
top: 0px;
i {
cursor: pointer;
margin-left: 15px;
font-size: 18px;
margin-right: 18px;
padding: 0 12px;
&:hover {
color: #409eff;
}
}
}
}
.dialog-title-span {
position: relative;
}
</
style
>
\ No newline at end of file
src/components/common/DialogApiDataTable.vue
0 → 100644
View file @
5e00bd12
<
template
>
<div
class=
"data-table-out"
>
<el-table
border
class=
"dialog-data-table"
:data=
"tableData"
v-loading=
"loading"
:element-loading-background=
"loadingBG"
height=
"calc(100% - .5rem)"
>
<el-table-column
v-if=
"hasIndex"
label=
"序号"
type=
"index"
align=
"center"
></el-table-column>
<template
v-for=
"(column, cIndex) in columns"
>
<!-- 无插槽 -->
<el-table-column
v-if=
"!column.hasSlot"
:key=
"column.prop"
:label=
"column.label"
:prop=
"column.prop"
:align=
"column.align ? column.align : 'center'"
:min-width=
"column.minWidth ? column.minWidth : ''"
></el-table-column>
<!-- 自定义插槽 -->
<el-table-column
v-else
:key=
"cIndex"
:label=
"column.label"
:prop=
"column.prop"
:align=
"column.align ? column.align : 'center'"
:min-width=
"column.minWidth ? column.minWidth : ''"
>
<template
#
default=
"scope"
>
<slot
:name=
"column.prop"
:data=
"scope.row"
/>
</
template
>
</el-table-column>
</template>
</el-table>
<el-pagination
v-if=
"hasPagination"
class=
"table-pagination"
:current-page=
"currentPage"
:page-size=
"pageSize"
:page-sizes=
"[10, 20, 30, 40, 50]"
layout=
"total, sizes, prev, pager, next, jumper"
:total=
"total"
@
size-change=
"handleSizeChange"
@
current-change=
"handleCurrentChange"
/>
</div>
</template>
<
script
>
export
default
{
name
:
"DialogApiDataTable"
,
props
:
{
api
:
{
type
:
Function
,
required
:
true
,
},
height
:
{
type
:
String
,
default
:
"6rem"
,
},
columns
:
{
type
:
Array
,
required
:
true
,
default
:
()
=>
{
return
[];
},
},
parameters
:
{
type
:
Object
,
default
:
()
=>
{
return
{};
},
},
hasIndex
:
{
type
:
Boolean
,
default
:
true
,
},
hasPagination
:
{
type
:
Boolean
,
default
:
true
,
},
autoLoad
:
{
type
:
Boolean
,
default
:
true
,
},
apiType
:
{
default
:
""
,
},
pathId
:
{
default
:
""
,
},
data
:
{
type
:
Array
,
default
:
()
=>
{
return
[];
},
},
},
data
()
{
return
{
tableData
:
[],
currentPage
:
1
,
total
:
0
,
pageSize
:
20
,
loadingBG
:
"rgba(0, 0, 0, 0.2)"
,
loading
:
false
,
};
},
mounted
()
{
if
(
this
.
autoLoad
)
{
this
.
getData
();
}
else
{
this
.
tableData
=
this
.
data
;
this
.
total
=
13
;
}
},
methods
:
{
getData
()
{
if
(
this
.
api
)
{
this
.
loading
=
true
;
this
.
tableData
=
[];
if
(
!
this
.
pathId
)
{
this
.
api
({
...
this
.
parameters
,
page
:
this
.
currentPage
,
limit
:
this
.
pageSize
,
}).
then
((
res
)
=>
{
this
.
loading
=
false
;
this
.
tableData
=
res
.
data
.
data
;
this
.
total
=
res
.
data
.
total
;
});
}
else
{
this
.
api
(
{
...
this
.
parameters
,
page
:
this
.
currentPage
,
limit
:
this
.
pageSize
,
},
this
.
pathId
).
then
((
res
)
=>
{
this
.
loading
=
false
;
this
.
tableData
=
res
.
data
.
data
;
this
.
total
=
res
.
data
.
total
;
});
}
}
},
handleSizeChange
(
size
)
{
this
.
pageSize
=
size
;
this
.
handleCurrentChange
(
1
);
},
handleCurrentChange
(
currentPage
)
{
this
.
currentPage
=
currentPage
;
this
.
getData
();
},
},
};
</
script
>
<
style
>
.data-table-out
{
display
:
flex
;
flex-direction
:
column
;
height
:
100%
;
}
</
style
>
\ No newline at end of file
src/components/common/DialogTabs.vue
0 → 100644
View file @
5e00bd12
<
template
>
<div
class=
"dialog-tab"
>
<div
v-for=
"tab in tabList"
:key=
"tab.name"
:class=
"['tab-pane', currentTab == tab.name ? 'active' : '']"
@
click=
"changeTab(tab.name)"
>
{{
tab
.
label
}}
</div>
<div
class=
"separate-lines"
>
<div
class=
"separate-line"
></div>
<img
class=
"separate-arrow"
src=
"@/assets/images/common/icon_tab_arr.png"
/>
</div>
</div>
</
template
>
<
script
>
export
default
{
name
:
"DialogTabs"
,
props
:
{
currentTab
:
{
type
:
String
,
default
:
""
,
},
tabList
:
{
type
:
Array
,
default
:
()
=>
{
return
[];
},
},
},
methods
:
{
changeTab
(
tabName
)
{
this
.
$emit
(
"change"
,
tabName
);
},
},
data
()
{
return
{};
},
};
</
script
>
<
style
lang=
"less"
scoped
>
.dialog-tab {
width: 100%;
display: flex;
justify-content: space-between;
.tab-pane {
font-size: 16px;
color: #82a4e4;
line-height: 20px;
padding: 0 10px;
border-left: 1px solid #2857ae;
cursor: pointer;
&:hover {
color: #fff;
}
&.active {
padding-left: 30px;
position: relative;
color: #fff;
&::before {
position: absolute;
content: "";
width: 4px;
height: 4px;
background: #23ddff;
border: 3px solid #fff;
border-radius: 50%;
left: 10px;
top: 50%;
transform: translateY(-50%);
}
}
}
.separate-lines {
flex-grow: 1;
border-left: 1px solid #2857ae;
display: flex;
align-items: center;
.separate-line {
display: flex;
height: 1px;
background: #2857ae;
flex-grow: 1;
}
.separate-arrow {
width: 20px;
padding-left: 4px;
vertical-align: top;
}
}
}
</
style
>
\ No newline at end of file
src/components/common/STable.vue
View file @
5e00bd12
...
...
@@ -18,8 +18,9 @@
v-infinite-scroll=
"load"
:infinite-scroll-distance=
"1"
:infinite-scroll-delay=
"1000"
ref=
"
tableData
"
ref=
"
scrollContainer
"
>
<div
ref=
"scrollList"
>
<div
class=
"table-data-columns"
v-for=
"(row, index) in tableData"
...
...
@@ -51,6 +52,7 @@
</
template
>
</div>
</div>
</div>
<div
v-if=
"tableData.length == 0"
class=
"no-data"
>
<div
class=
"inner"
>
<img
src=
"@/assets/images/index/no-data.png"
alt=
""
/>
...
...
@@ -81,23 +83,59 @@ export default {
default
:
false
,
},
},
data
()
{
return
{
scrollInterval
:
null
,
};
},
methods
:
{
load
()
{
if
(
this
.
pagination
)
{
this
.
$emit
(
"load"
);
}
},
startScrolling
()
{
const
scrollContainer
=
this
.
$refs
.
scrollContainer
;
const
scrollList
=
this
.
$refs
.
scrollList
;
let
scrollTop
=
0
;
// 当前滚动位置
this
.
scrollInterval
=
setInterval
(()
=>
{
scrollTop
++
;
scrollContainer
.
scrollTop
=
scrollTop
;
// 如果滚动到底部,直接返回顶部
if
(
scrollTop
>=
scrollList
.
scrollHeight
-
scrollContainer
.
clientHeight
)
{
scrollTop
=
0
;
// 重置滚动位置为顶部
}
},
80
);
},
stopScrolling
()
{
if
(
this
.
scrollInterval
)
{
clearInterval
(
this
.
scrollInterval
);
}
},
},
data
()
{
return
{};
},
mounted
()
{
this
.
$refs
.
tableData
.
onscroll
=
()
=>
{
this
.
$refs
.
scrollContainer
.
onscroll
=
()
=>
{
let
list
=
document
.
getElementsByClassName
(
"el-tooltip__popper"
);
if
(
list
.
length
>
0
)
{
list
[
list
.
length
-
1
].
style
.
display
=
"none"
;
}
};
this
.
$refs
.
scrollContainer
.
onmouseover
=
()
=>
{
this
.
stopScrolling
();
};
this
.
$refs
.
scrollContainer
.
onmouseout
=
()
=>
{
this
.
startScrolling
();
};
this
.
startScrolling
();
},
};
</
script
>
...
...
src/components/common/STable2.vue
View file @
5e00bd12
...
...
@@ -18,8 +18,9 @@
v-infinite-scroll=
"load"
:infinite-scroll-distance=
"1"
:infinite-scroll-delay=
"1000"
ref=
"
tableData
"
ref=
"
scrollContainer
"
>
<div
ref=
"scrollList"
>
<div
class=
"table-data-columns"
v-for=
"(row, index) in tableData"
...
...
@@ -51,6 +52,8 @@
</
template
>
</div>
</div>
</div>
<div
v-if=
"tableData.length == 0"
class=
"no-data"
>
<div
class=
"inner"
>
<img
src=
"@/assets/images/index/no-data.png"
alt=
""
/>
...
...
@@ -81,23 +84,59 @@ export default {
default
:
false
,
},
},
data
()
{
return
{
scrollInterval
:
null
,
};
},
methods
:
{
load
()
{
if
(
this
.
pagination
)
{
this
.
$emit
(
"load"
);
}
},
startScrolling
()
{
const
scrollContainer
=
this
.
$refs
.
scrollContainer
;
const
scrollList
=
this
.
$refs
.
scrollList
;
let
scrollTop
=
0
;
// 当前滚动位置
this
.
scrollInterval
=
setInterval
(()
=>
{
scrollTop
++
;
scrollContainer
.
scrollTop
=
scrollTop
;
// 如果滚动到底部,直接返回顶部
if
(
scrollTop
>=
scrollList
.
scrollHeight
-
scrollContainer
.
clientHeight
)
{
scrollTop
=
0
;
// 重置滚动位置为顶部
}
},
80
);
},
stopScrolling
()
{
if
(
this
.
scrollInterval
)
{
clearInterval
(
this
.
scrollInterval
);
}
},
},
data
()
{
return
{};
},
mounted
()
{
this
.
$refs
.
tableData
.
onscroll
=
()
=>
{
this
.
$refs
.
scrollContainer
.
onscroll
=
()
=>
{
let
list
=
document
.
getElementsByClassName
(
"el-tooltip__popper"
);
if
(
list
.
length
>
0
)
{
list
[
list
.
length
-
1
].
style
.
display
=
"none"
;
}
};
this
.
$refs
.
scrollContainer
.
onmouseover
=
()
=>
{
this
.
stopScrolling
();
};
this
.
$refs
.
scrollContainer
.
onmouseout
=
()
=>
{
this
.
startScrolling
();
};
this
.
startScrolling
();
},
};
</
script
>
...
...
src/components/common/Section.vue
View file @
5e00bd12
<
template
>
<div
class=
"section"
:style=
"
{ height: height }">
<Title
:title=
"title"
>
</Title>
<Title
:title=
"title"
>
<template
#
right-slot
>
<slot
name=
"right-slot"
></slot>
</
template
>
</Title>
<div
:class=
"[type == 'long' ? 'container2' : 'container']"
>
<slot
/>
</div>
...
...
src/components/common/Title.vue
View file @
5e00bd12
<
template
>
<div
class=
"title"
>
{{
title
}}
<div
class=
"right-slot"
>
<slot
name=
"right-slot"
></slot>
</div>
</div>
</
template
>
<
script
>
...
...
@@ -23,8 +26,14 @@ export default {
background: url("@/assets/images/index/icon_toubg@2x.png");
background-repeat: no-repeat;
background-size: 100% 100%;
position: relative;
}
.right-slot {
float: right;
position: absolute;
right: 0;
top: 50%;
transform: translateY(-50%);
color: #43bcd2;
font-size: 14px;
}
</
style
>
\ No newline at end of file
src/main.js
View file @
5e00bd12
...
...
@@ -15,7 +15,9 @@ import STable from "@/components/common/STable"
import
"@/assets/iconfont/iconfont.css"
;
import
"@/assets/common/common.less"
import
"@/assets/common/element.less"
import
Dialog
from
"@/components/common/Dialog.vue"
import
DialogTabs
from
"@/components/common/DialogTabs.vue"
import
DialogApiDataTable
from
"@/components/common/DialogApiDataTable.vue"
window
.
_AMapSecurityConfig
=
{
securityJsCode
:
'a5006042196de6dda20a434eb443bf45'
,
...
...
@@ -24,13 +26,15 @@ Vue.use(scroll)
Vue
.
prototype
.
$echarts
=
echarts
Vue
.
config
.
productionTip
=
false
Vue
.
prototype
.
$eventBus
=
new
Vue
();
Vue
.
use
(
ElementUI
)
Vue
.
component
(
'Title'
,
Title
)
Vue
.
component
(
'Title2'
,
Title2
)
Vue
.
component
(
'Section'
,
Section
)
Vue
.
component
(
'STable'
,
STable
)
Vue
.
component
(
'Dialog'
,
Dialog
)
Vue
.
component
(
'DialogTabs'
,
DialogTabs
)
Vue
.
component
(
'DialogApiDataTable'
,
DialogApiDataTable
)
new
Vue
({
render
:
h
=>
h
(
App
),
store
,
...
...
src/utils/request.js
View file @
5e00bd12
...
...
@@ -70,6 +70,8 @@ request.interceptors.response.use(
return
response
.
data
},
async
(
error
)
=>
{
if
(
error
.
request
.
status
==
401
)
{
closeLoading
()
localStorage
.
setItem
(
'Authorization'
,
''
)
...
...
@@ -79,6 +81,7 @@ request.interceptors.response.use(
})
window
.
location
.
href
=
window
.
location
.
origin
}
closeLoading
()
Message
({
message
:
'服务器错误'
,
type
:
'error'
...
...
src/views/DataStatis/Index copy2.vue
deleted
100644 → 0
View file @
64559f2b
<
template
>
<div
id=
"data-statis"
>
<div
id=
"amap-container"
v-loading=
"mapLoading"
element-loading-background=
"rgba(0, 0, 0, 0.2)"
element-loading-text=
"地图加载中..."
></div>
<div
class=
"left-area"
>
<Section
class=
"sections"
title=
"本年问题分析"
>
<STable
:headers=
"header1"
:table-data=
"data1"
>
</STable>
</Section>
<Section
class=
"sections"
title=
"本年问题等级分析"
>
<STable
:headers=
"header2"
:table-data=
"data2"
>
</STable>
</Section>
<Section
class=
"sections"
title=
"本年问题处理分析"
>
<STable
:headers=
"header3"
:table-data=
"data3"
>
<template
slot-scope=
"scope"
>
<template
v-if=
"scope.header.slot == 'count'"
>
<span
>
{{
scope
.
row
.
count
}}
/
<span
style=
"color: #b2bfcf"
>
{{
scope
.
row
.
general
}}
</span></span
>
</
template
>
</template>
</STable>
</Section>
</div>
<div
class=
"right-area"
v-if=
"currentCityName"
>
<Section
class=
"sections long"
type=
"long"
:title=
"currentCityName"
>
<div
class=
"switch-buttons"
>
<div
:class=
"[activeTab == 1 ? 'active' : '']"
@
click=
"switchList(1)"
>
政府监管
</div>
<div
:class=
"[activeTab == 2 ? 'active' : '']"
@
click=
"switchList(2)"
>
质量管理制度
</div>
<div
:class=
"[activeTab == 3 ? 'active' : '']"
@
click=
"switchList(3)"
>
资质资格
</div>
<div
:class=
"[activeTab == 4 ? 'active' : '']"
@
click=
"switchList(4)"
>
实体质量
</div>
</div>
<STable2
style=
"margin-top: 0.14rem; height: calc(100% - 0.64rem)"
:headers=
"
activeTab == 1
? header4_1
: activeTab == 2
? header4_2
: activeTab == 3
? header4_3
: header4_4
"
:table-data=
"data4"
></STable2>
</Section>
</div>
<div
class=
"bottom-area"
>
<Section2
title=
"工程问题情况"
class=
"bottom-section"
>
<STable2
:headers=
"header5"
:table-data=
"data5"
>
<
template
slot-scope=
"scope"
>
<template
v-if=
"scope.header.slot == 'count'"
>
<span
>
{{
scope
.
row
.
question_count
}}
/
<span
style=
"color: #b2bfcf"
>
{{
scope
.
row
.
question_general
}}
</span></span
>
</
template
>
</template>
</STable2>
</Section2>
</div>
<img
src=
"@/assets/images/index/lt.png"
class=
"lt"
alt=
""
/>
<img
src=
"@/assets/images/index/rt.png"
class=
"rt"
alt=
""
/>
<img
src=
"@/assets/images/index/btm.png"
class=
"btm"
alt=
""
/>
</div>
</template>
<
script
>
import
{
getMapData
,
getYearQuestion
,
getLevelQuestion
,
getStatusQuestion
,
getProjectQuestion
,
getAreaQuestionByAreaId
,
}
from
"@/api/dataStatis"
;
import
AMapLoader
from
"@amap/amap-jsapi-loader"
;
import
{
mapState
}
from
"vuex"
;
import
Section2
from
"@/components/common/Section2.vue"
;
import
STable2
from
"@/components/common/STable2.vue"
;
export
default
{
name
:
"DataStatis"
,
components
:
{
Section2
,
STable2
,
},
data
()
{
return
{
mapLoading
:
true
,
header1
:
[
{
name
:
"市区"
,
props
:
"city_name"
,
width
:
"calc(100% / 5 - .1rem)"
,
},
{
name
:
"政府监管"
,
props
:
"zfjg"
,
width
:
"calc(100% / 5)"
,
},
{
name
:
"质量管理制度"
,
props
:
"zlglzd"
,
width
:
"calc(100% / 5 + .1rem)"
,
},
{
name
:
"资质资格"
,
props
:
"zzzg"
,
width
:
"calc(100% / 5)"
,
},
{
name
:
"实体质量"
,
props
:
"stzl"
,
width
:
"calc(100% / 5)"
,
},
],
data1
:
[],
header2
:
[
{
name
:
"市区"
,
props
:
"city_name"
,
width
:
"calc(100% / 4)"
,
},
{
name
:
"严重问题"
,
props
:
"serious"
,
width
:
"calc(100% / 4)"
,
},
{
name
:
"一般问题"
,
props
:
"general"
,
width
:
"calc(100% / 4)"
,
},
{
name
:
"问题总数"
,
props
:
"count"
,
width
:
"calc(100% / 4)"
,
},
],
data2
:
[],
header3
:
[
{
name
:
"市区"
,
props
:
"city_name"
,
width
:
"20%"
,
},
{
name
:
"涉及工程"
,
props
:
"project_count"
,
width
:
"20%"
,
},
{
name
:
"涉及单位"
,
props
:
"units_count"
,
width
:
"20%"
,
},
{
name
:
"问题总数/已处理数"
,
props
:
"count"
,
slot
:
"count"
,
width
:
"40%"
,
},
],
header4_1
:
[
{
name
:
"区域"
,
props
:
"name"
,
width
:
"20%"
,
},
{
name
:
"项目法人"
,
props
:
"category_count_14"
,
width
:
"10%"
,
style
:
{
lineHeight
:
"0.16rem"
,
fontSize
:
"0.12rem"
,
},
},
{
name
:
"监理单位"
,
props
:
"category_count_15"
,
width
:
"10%"
,
style
:
{
lineHeight
:
"0.16rem"
,
fontSize
:
"0.12rem"
,
},
},
{
name
:
"施工单位"
,
props
:
"category_count_16"
,
width
:
"10%"
,
style
:
{
lineHeight
:
"0.16rem"
,
fontSize
:
"0.12rem"
,
},
},
{
name
:
"设计单位"
,
props
:
"category_count_17"
,
width
:
"10%"
,
style
:
{
lineHeight
:
"0.16rem"
,
fontSize
:
"0.12rem"
,
},
},
{
name
:
"验收评定"
,
props
:
"category_count_18"
,
width
:
"10%"
,
style
:
{
lineHeight
:
"0.16rem"
,
fontSize
:
"0.12rem"
,
},
},
{
name
:
"检测单位"
,
props
:
"category_count_19"
,
width
:
"10%"
,
style
:
{
lineHeight
:
"0.16rem"
,
fontSize
:
"0.12rem"
,
},
},
],
header4_2
:
[
{
name
:
"区域"
,
props
:
"name"
,
width
:
"calc(100% / 3)"
,
},
{
name
:
"质量管理岗位职责"
,
props
:
"category_count_8"
,
width
:
"calc(100% / 3)"
,
},
{
name
:
"质量责任终身制"
,
props
:
"category_count_9"
,
width
:
"calc(100% / 3)"
,
},
],
header4_3
:
[
{
name
:
"区域"
,
props
:
"name"
,
width
:
"calc(100% / 2)"
,
},
{
name
:
"人员资格"
,
props
:
"category_count_10"
,
width
:
"calc(100% / 2)"
,
},
],
header4_4
:
[
{
name
:
"人员资格"
,
props
:
"name"
,
width
:
"calc(100% / 4)"
,
},
{
name
:
"工程外观"
,
props
:
"category_count_11"
,
width
:
"calc(100% / 4)"
,
},
{
name
:
"开挖与基础处理质量"
,
props
:
"category_count_12"
,
width
:
"calc(100% / 4)"
,
style
:
{
lineHeight
:
"0.16rem"
,
fontSize
:
"0.12rem"
,
},
},
{
name
:
"工程结构质量"
,
props
:
"category_count_13"
,
width
:
"calc(100% / 4)"
,
},
],
data4
:
[],
header5
:
[
{
name
:
"工程名称"
,
props
:
"project_name"
,
width
:
"20%"
,
style
:
{
textAlign
:
"left"
,
padding
:
"0 .2rem"
,
},
},
{
name
:
"标段名称"
,
props
:
"prname"
,
width
:
"15%"
,
style
:
{
textAlign
:
"left"
,
padding
:
"0 .2rem"
,
},
},
{
name
:
"政府监管"
,
props
:
"zfjg"
,
width
:
"10%"
,
},
{
name
:
"质量管理制度"
,
props
:
"zlglzd"
,
width
:
"10%"
,
},
{
name
:
"资质资格"
,
props
:
"zzzg"
,
width
:
"10%"
,
},
{
name
:
"实体质量"
,
props
:
"stzl"
,
width
:
"10%"
,
},
{
name
:
"问题总数/已处理数"
,
props
:
"label4"
,
slot
:
"count"
,
width
:
"15%"
,
},
],
data5
:
[],
activeTab
:
1
,
mapCenter
:
[],
AMap
:
null
,
map
:
null
,
mapActive
:
1
,
loca
:
null
,
renderColor
:
{
A
:
"#208995"
,
B
:
"#2a5dc6"
,
C
:
"#23366f"
,
D
:
"#a9a715"
,
E
:
"#b74f4f"
,
},
districtArr
:
[],
polygons
:
[],
currentCityName
:
""
,
currentCityId
:
""
,
};
},
methods
:
{
initMap
()
{
AMapLoader
.
load
({
key
:
"478c82d2e18c90f2fc32b93024d45539"
,
version
:
"2.0"
,
plugins
:
[
"AMap.MarkerClusterer"
,
"AMap.DistrictSearch"
],
Loca
:
{
version
:
"2.0.0"
,
//Loca 版本,缺省1.3.2
},
})
.
then
((
AMap
)
=>
{
// 初始化地图
this
.
AMap
=
AMap
;
var
options
=
{
subdistrict
:
1
,
extensions
:
"all"
,
level
:
"province"
,
};
var
district
=
new
this
.
AMap
.
DistrictSearch
(
options
);
district
.
search
(
"浙江省"
,
(
status
,
result
)
=>
{
var
bounds
=
result
.
districtList
[
0
][
"boundaries"
];
var
mask
=
[];
for
(
var
i
=
0
;
i
<
bounds
.
length
;
i
++
)
{
mask
.
push
([
bounds
[
i
]]);
}
this
.
map
=
new
this
.
AMap
.
Map
(
"amap-container"
,
{
mask
,
viewMode
:
"3D"
,
pitch
:
30
,
zoom
:
7.3
,
center
:
[
120.247008
,
28.883294
],
resizeEnable
:
true
,
mapStyle
:
"amap://styles/1dda787b3ac1ce28f171d2f153726eb7"
,
});
this
.
infoWindow
=
new
this
.
AMap
.
InfoWindow
({
offset
:
new
AMap
.
Pixel
(
0
,
-
25
),
});
// this.$nextTick(() => {
// var scale = window.innerHeight / 1080;
// document.getElementById("amap-container").style.zoom = 1 / scale;
// });
this
.
loca
=
new
Loca
.
Container
({
map
:
this
.
map
,
});
// this.map.on("click", () => {
// console.log(this.map.getCenter());
// });
getMapData
().
then
((
res
)
=>
{
this
.
districtArr
=
res
.
data
;
this
.
drawDistrict
(
result
.
districtList
[
0
].
districtList
);
this
.
setMarker
(
result
.
districtList
[
0
].
districtList
);
});
});
})
.
catch
((
e
)
=>
{
// console.log(e);
});
},
getData
()
{
getYearQuestion
().
then
((
res
)
=>
{
this
.
data1
=
res
.
data
;
});
getLevelQuestion
().
then
((
res
)
=>
{
this
.
data2
=
res
.
data
;
});
getStatusQuestion
().
then
((
res
)
=>
{
this
.
data3
=
res
.
data
;
});
getProjectQuestion
().
then
((
res
)
=>
{
this
.
data5
=
res
.
data
;
});
},
async
load
()
{
console
.
log
(
"load"
);
},
setMarker
(
districts
)
{
const
markers
=
[];
this
.
districtArr
.
map
((
item
)
=>
{
const
mapMarkers
=
new
this
.
AMap
.
Marker
({
icon
:
new
AMap
.
Icon
({
image
:
require
(
"@/assets/images/index/icon_dingwie@2x.png"
),
size
:
new
AMap
.
Size
(
40
,
40
),
imageSize
:
new
AMap
.
Size
(
40
,
40
),
}),
position
:
[
districts
.
filter
((
point
)
=>
{
return
point
.
name
==
item
.
name
;
})[
0
].
center
.
lng
,
districts
.
filter
((
point
)
=>
{
return
point
.
name
==
item
.
name
;
})[
0
].
center
.
lat
,
],
offset
:
new
this
.
AMap
.
Pixel
(
0
,
-
20
),
extData
:
{
markerData
:
districts
.
filter
((
point
)
=>
{
return
point
.
name
==
item
.
name
;
})[
0
],
},
});
mapMarkers
.
setLabel
({
offset
:
new
AMap
.
Pixel
(
12
,
20
),
//设置文本标注偏移量
content
:
`<div style="color:#fff;line-height:.16rem;padding-left:.02rem">
<div>
${
item
.
name
}
</div>
<div>
${
item
.
qcount
}
条</div>
</div>`
,
//设置文本标注内容
direction
:
"top"
,
//设置文本标注方位
});
markers
.
push
(
mapMarkers
);
});
markers
.
map
((
item
)
=>
{
item
.
setMap
(
this
.
map
);
});
},
markerClick
(
e
)
{
this
.
infoWindow
.
setContent
(
e
.
target
.
content
);
this
.
infoWindow
.
open
(
this
.
map
,
e
.
target
.
getPosition
());
},
drawDistrict
(
disArr
)
{
for
(
let
i
=
0
;
i
<
disArr
.
length
;
i
+=
1
)
{
setTimeout
(
async
()
=>
{
await
this
.
drawFunction
(
disArr
[
i
].
name
,
i
==
disArr
.
length
-
1
);
},
(
i
+
1
)
*
600
);
}
},
async
drawFunction
(
area
,
isfinish
)
{
return
new
Promise
((
resolve
)
=>
{
let
opts
=
{
subdistrict
:
1
,
//获取边界不需要返回下级行政区
extensions
:
"all"
,
//返回行政区边界坐标组等具体信息
level
:
"city"
,
//查询行政级别为 市
};
let
district
=
new
this
.
AMap
.
DistrictSearch
(
opts
);
district
.
setLevel
(
"city"
);
district
.
search
(
area
,
(
status
,
result
)
=>
{
let
holes
=
result
.
districtList
[
0
].
boundaries
;
let
pathArray
=
[];
for
(
var
i
=
0
;
i
<
holes
.
length
;
i
++
)
{
pathArray
.
push
([
holes
[
i
]]);
}
let
polygon
=
new
this
.
AMap
.
Polygon
({
path
:
pathArray
,
//线条颜色,使用16进制颜色代码赋值。默认值为#006600
// strokeColor: 'rgb(20,164,173)',
strokeColor
:
"#2656bb"
,
strokeWeight
:
1
,
//轮廓线透明度,取值范围[0,1],0表示完全透明,1表示不透明。默认为0.9
strokeOpacity
:
1
,
//多边形填充颜色,使用16进制颜色代码赋值,如:#FFAA00
fillColor
:
"#23366f"
,
//多边形填充透明度,取值范围[0,1],0表示完全透明,1表示不透明。默认为0.9
fillOpacity
:
0.9
,
//轮廓线样式,实线:solid,虚线:dashed
strokeStyle
:
"solid"
,
});
polygon
.
data
=
this
.
districtArr
.
filter
((
item
)
=>
{
return
item
.
name
==
area
;
})[
0
]
?
this
.
districtArr
.
filter
((
item
)
=>
{
return
item
.
name
==
area
;
})[
0
]
:
{};
// if (area == "杭州市")
polygon
.
on
(
"click"
,
()
=>
{
this
.
polygons
.
map
((
item
)
=>
{
item
.
setOptions
({
strokeColor
:
"#2656bb"
,
strokeWeight
:
1
,
fillColor
:
"#23366f"
,
});
item
.
selected
=
false
;
});
polygon
.
setOptions
({
strokeColor
:
"#14ddf5"
,
strokeWeight
:
2
,
fillColor
:
"#2a5dc6"
,
});
polygon
.
selected
=
true
;
console
.
log
(
polygon
);
this
.
currentCityName
=
polygon
.
data
.
name
?
polygon
.
data
.
name
:
""
;
if
(
polygon
.
data
.
id
)
{
this
.
currentCityId
=
polygon
.
data
.
id
;
this
.
switchList
(
1
);
}
});
// 添加鼠标移入事件
polygon
.
on
(
"mousemove"
,
function
(
event
)
{
polygon
.
setOptions
({
strokeColor
:
"#14ddf5"
,
strokeWeight
:
2
,
fillColor
:
"#2a5dc6"
,
});
});
// 添加鼠标移出事件
polygon
.
on
(
"mouseout"
,
function
(
event
)
{
if
(
!
polygon
.
selected
)
{
polygon
.
setOptions
({
strokeColor
:
"#2656bb"
,
strokeWeight
:
1
,
fillColor
:
"#23366f"
,
});
}
});
polygon
.
setPath
(
pathArray
);
this
.
polygons
.
push
(
polygon
);
this
.
map
.
add
(
polygon
);
console
.
log
(
i
);
if
(
isfinish
)
{
this
.
mapLoading
=
false
;
}
resolve
();
});
});
},
switchList
(
type
)
{
this
.
activeTab
=
type
;
this
.
data4
=
[];
getAreaQuestionByAreaId
(
type
,
this
.
currentCityId
).
then
((
res
)
=>
{
this
.
data4
=
res
.
data
;
});
},
},
mounted
()
{
this
.
getData
();
this
.
initMap
();
window
.
clickDetail
=
this
.
clickDetail
;
},
watch
:
{},
destroyed
()
{
this
.
map
&&
this
.
map
.
destroy
();
},
computed
:
{
...
mapState
([
"userInfo"
]),
},
};
</
script
>
<
style
lang=
"less"
scoped
>
#data-statis {
position: relative;
width: 100%;
height: 100%;
}
#amap-container {
position: absolute;
left: 50%;
transform: translateX(-50%);
top: 0;
width: calc(100% - 900px);
height: calc(100% - calc(calc(100% - 90px) / 3 - calc(28px / 3)));
background: transparent !important;
z-index: 5;
}
.left-area {
width: 440px;
left: 10px;
top: 80px;
position: fixed;
height: calc(100% - 90px);
z-index: 999;
}
.right-area {
position: fixed;
right: 10px;
top: 80px;
width: 440px;
height: calc(calc(100% - 90px) / 3 * 2);
z-index: 999;
}
.bottom-area {
position: fixed;
width: calc(100% - 480px);
left: 470px;
bottom: 10px;
right: 10px;
height: calc(calc(100% - 90px) / 3 - calc(28px / 3)) !important;
z-index: 999;
}
.sections {
height: calc(100% / 3 - calc(28px / 3)) !important;
margin-bottom: 14px;
&:last-child {
margin-bottom: 0;
}
}
.sections.long {
height: calc(100% - calc(28px / 3)) !important;
}
.bottom-section {
width: 100%;
height: 100% !important;
}
::v-deep .span-status {
&.green {
color: #47ae5f;
}
&.orange {
color: #df7a1f;
}
&.red {
color: #df441f;
}
&.blue {
color: #b83be7;
}
}
.lt {
position: fixed;
left: 0;
width: 500px;
top: 80px;
height: 100%;
z-index: 10;
}
.rt {
position: fixed;
right: 0;
width: 500px;
top: 80px;
height: 100%;
z-index: 10;
}
.btm {
position: fixed;
bottom: 0;
left: 0;
width: 100%;
height: calc(calc(100% - 90px) / 3 - calc(28px / 3) + 50px) !important;
z-index: 10;
}
.switch-buttons {
margin-top: 10px;
line-height: 40px;
display: flex;
justify-content: space-between;
div {
background: url("@/assets/images/index/icon_yier@2x.png");
background-repeat: no-repeat;
background-size: 100% 100%;
margin-right: 4px;
width: calc(100% / 4 - calc(12px / 3));
text-align: center;
color: rgba(255, 255, 255, 0.7);
font-size: 16px;
cursor: pointer;
&:last-child {
margin-right: 0;
}
&:hover,
&.active {
color: rgba(255, 255, 255, 1);
background: url("@/assets/images/index/icon_yiyi@2x.png");
background-repeat: no-repeat;
background-size: 100% 100%;
}
}
}
::v-deep .amap-marker-label {
border: none;
background-color: transparent;
font-size: 14px !important;
line-height: 14px !important;
top: 2% !important;
left: 10% !important;
}
</
style
>
\ No newline at end of file
src/views/DataStatis/Index.vue
View file @
5e00bd12
...
...
@@ -6,42 +6,62 @@
element-loading-text="地图加载中..." -->
<div
class=
"left-area"
>
<Section
class=
"sections"
title=
"政府监管"
>
<template
#
right-slot
>
<span
class=
"show-more"
@
click=
"showZFJG"
>
查看更多
</span>
</
template
>
<STable
:headers=
"header1"
:table-data=
"data1"
>
<
template
slot-scope=
"scope"
>
<template
v-if=
"scope.header.slot == 'score'"
>
<span
:style=
"
{ color: scope.row.score
<
80
?
'#
f86262
'
:
''
}"
>
{{
scope
.
row
.
score
}}
</span>
<template
v-if=
"scope.header.slot == 'quality_score'"
>
<span
:style=
"
{
color: scope.row.quality_score
<
80
?
'#
f86262
'
:
'',
}"
>
{{
scope
.
row
.
quality_score
}}
</span
>
</
template
>
</template>
</STable>
</Section>
<Section
class=
"sections"
title=
"工程质量"
>
<
template
#
right-slot
>
<span
class=
"show-more"
@
click=
"showGCZL"
>
查看更多
</span>
</
template
>
<STable
:headers=
"header2"
:table-data=
"data2"
>
<
template
slot-scope=
"scope"
>
<template
v-if=
"scope.header.slot == 'score'"
>
<span
:style=
"
{ color: scope.row.score
<
80
?
'#
f86262
'
:
''
}"
>
{{
scope
.
row
.
score
}}
</span>
<template
v-if=
"scope.header.slot == 'quality_score'"
>
<span
:style=
"
{
color: scope.row.quality_score
<
80
?
'#
f86262
'
:
'',
}"
>
{{
scope
.
row
.
quality_score
}}
</span
>
</
template
>
</template>
</STable>
</Section>
<Section
class=
"sections"
title=
"创新创优"
>
<
template
#
right-slot
>
<span
class=
"show-more"
@
click=
"showCXCY"
>
查看更多
</span>
</
template
>
<STable
:headers=
"header3"
:table-data=
"data3"
>
<
template
slot-scope=
"scope"
>
<template
v-if=
"scope.header.slot == 'score'"
>
<span
:style=
"
{ color: scope.row.score
<
80
?
'#
f86262
'
:
''
}"
>
{{
scope
.
row
.
score
}}
</span>
<template
v-if=
"scope.header.slot == 'quality_score'"
>
<span
:style=
"
{
color: scope.row.quality_score
<
80
?
'#
f86262
'
:
'',
}"
>
{{
scope
.
row
.
quality_score
}}
</span
>
</
template
>
</template>
</STable>
</Section>
</div>
<div
class=
"right-area"
>
<!-- v-if="currentCityName" -->
<div
class=
"right-area"
v-if=
"currentCityName"
>
<Section
class=
"sections long"
type=
"long"
:title=
"currentCityName"
>
<
template
#
right-slot
>
<span
class=
"show-more"
@
click=
"showCityList"
>
查看更多
</span>
</
template
>
<div
class=
"get-points"
>
<div
class=
"points"
>
<div
...
...
@@ -94,17 +114,11 @@
>
{{
scope
.
row
.
project_num
}}
</span
>
</
template
>
</template>
<
template
slot-scope=
"scope"
>
<
template
v-if=
"scope.header.slot == 'score'"
>
<span
:style=
"
{ color: scope.row.score
<
80
?
'#
f86262
'
:
''
}"
>
{{
scope
.
row
.
score
}}
</span>
</
template
>
</template>
<
template
slot-scope=
"scope"
>
<
template
v-if=
"scope.header.slot == 'score_count'"
>
<span
:style=
"
{ color: scope.row.score_count
<
80
?
'#
f86262
'
:
''
}"
...
...
@@ -123,6 +137,11 @@
</div> -->
</Section>
</div>
<ProjectList
:visible=
"projectListVisible"
@
change-visible=
"(val) => (projectListVisible = val)"
></ProjectList>
<!-- <div class="bottom-area">
<Section2 title="工程风险监视" class="bottom-section">
<STable2 :headers="header5" :table-data="data5">
...
...
@@ -151,23 +170,21 @@ import {
getYearQuestion
,
getLevelQuestion
,
getStatusQuestion
,
getProjectQuestion
,
getAreaQuestionByAreaId
,
getScoreByCity
,
getScoreStatusByCity
,
}
from
"@/api/dataStatis"
;
import
AMapLoader
from
"@amap/amap-jsapi-loader"
;
import
{
mapState
}
from
"vuex"
;
import
zhejiangMapData
from
"@/assets/data/mapData.json"
;
import
Section2
from
"@/components/common/Section2.vue"
;
import
STable2
from
"@/components/common/STable2.vue"
;
import
ProjectList
from
"@/views/DataStatis/project/Index.vue"
;
export
default
{
name
:
"DataStatis"
,
components
:
{
Section2
,
STable2
,
ProjectList
,
},
data
()
{
return
{
...
...
@@ -186,7 +203,12 @@ export default {
},
align
:
"left"
,
},
{
name
:
"政府监管得分"
,
props
:
"score"
,
width
:
"30%"
,
slot
:
"score"
},
{
name
:
"政府监管得分"
,
props
:
"quality_score"
,
width
:
"30%"
,
slot
:
"quality_score"
,
},
],
header2
:
[
{
...
...
@@ -202,7 +224,12 @@ export default {
},
align
:
"left"
,
},
{
name
:
"质量评定得分"
,
props
:
"score"
,
width
:
"30%"
,
slot
:
"score"
},
{
name
:
"质量评定得分"
,
props
:
"quality_score"
,
width
:
"30%"
,
slot
:
"quality_score"
,
},
],
header3
:
[
{
...
...
@@ -218,7 +245,12 @@ export default {
},
align
:
"left"
,
},
{
name
:
"创新创优得分"
,
props
:
"score"
,
width
:
"30%"
,
slot
:
"score"
},
{
name
:
"创新创优得分"
,
props
:
"quality_score"
,
width
:
"30%"
,
slot
:
"quality_score"
,
},
],
// header1: [
// {
...
...
@@ -484,16 +516,29 @@ export default {
polygons
:
[],
currentCityName
:
""
,
currentCityId
:
""
,
zfjg_score
:
0
,
zljc_score
:
0
,
score_count
:
0
,
zfjg_score
:
90
,
zljc_score
:
85
,
score_count
:
87
,
projectListVisible
:
false
,
};
},
methods
:
{
initMap
()
{
getMapData
().
then
((
res
)
=>
{
var
cityData
=
[
{
name
:
"杭州市"
,
id
:
383
,
score
:
97
},
{
name
:
"湖州市"
,
id
:
384
,
score
:
88
},
{
name
:
"嘉兴市"
,
id
:
385
,
score
:
75
},
{
name
:
"金华市"
,
id
:
386
,
score
:
85
},
{
name
:
"丽水市"
,
id
:
387
,
score
:
92
},
{
name
:
"宁波市"
,
id
:
388
,
score
:
95
},
{
name
:
"衢州市"
,
id
:
393
,
score
:
80
},
{
name
:
"绍兴市"
,
id
:
389
,
score
:
85
},
{
name
:
"台州市"
,
id
:
390
,
score
:
77
},
{
name
:
"温州市"
,
id
:
391
,
score
:
78
},
{
name
:
"舟山市"
,
id
:
392
,
score
:
84
},
];
var
newZhejiangMapData
=
[];
res
.
d
ata
.
map
((
item
)
=>
{
cityD
ata
.
map
((
item
)
=>
{
newZhejiangMapData
.
push
({
name
:
item
.
name
,
value
:
[
...
...
@@ -511,25 +556,207 @@ export default {
this
.
currentCityId
=
item
.
id
;
this
.
currentCityName
=
item
.
name
;
}
this
.
switchList
(
1
);
});
this
.
switchList
(
1
);
this
.
initMapData
(
"amap-container"
,
zhejiangJson
,
newZhejiangMapData
,
1
);
});
// getMapData().then((res) => {
// console.log(JSON.stringify(res.data));
// var newZhejiangMapData = [];
// res.data.map((item) => {
// newZhejiangMapData.push({
// name: item.name,
// value: [
// zhejiangMapData.filter((cx) => {
// return cx.name == item.name;
// })[0].value[0],
// zhejiangMapData.filter((cx) => {
// return cx.name == item.name;
// })[0].value[1],
// item.score,
// ],
// id: item.id,
// });
// if (item.name == "杭州市") {
// this.currentCityId = item.id;
// this.currentCityName = item.name;
// }
// });
// this.switchList(1);
// this.initMapData("amap-container", zhejiangJson, newZhejiangMapData, 1);
// });
},
getData
()
{
getYearQuestion
().
then
((
res
)
=>
{
this
.
data1
=
res
.
data
;
});
getLevelQuestion
().
then
((
res
)
=>
{
this
.
data2
=
res
.
data
;
});
getStatusQuestion
().
then
((
res
)
=>
{
this
.
data3
=
res
.
data
;
});
// getProjectQuestion().then((res) => {
// this.data5 = res.data;
// getYearQuestion().then((res) => {
// this.data1 = res.data;
// });
// getLevelQuestion().then((res) => {
// this.data2 = res.data;
// });
// getStatusQuestion().then((res) => {
// this.data3 = res.data;
// });
this
.
data1
=
[
{
project_name
:
"东苕溪防洪后续西险大塘达标加固工程(杭州市段)"
,
quality_score
:
"90"
,
},
{
project_name
:
"杭州市萧山区西江塘义桥段古海塘抢险加固工程"
,
quality_score
:
"85"
,
},
{
project_name
:
"钱塘江北岸五堡排涝泵站工程"
,
quality_score
:
"77"
,
},
{
project_name
:
"钱塘江西江塘闻堰段海塘提标加固工程"
,
quality_score
:
"92"
,
},
{
project_name
:
"杭州市萧围西线(一工段至四工段)提标加固工程"
,
quality_score
:
"85"
,
},
{
project_name
:
"杭州市本级海塘安澜工程 (三堡至乔司段海塘)一期"
,
quality_score
:
"90"
,
},
{
project_name
:
"杭州市本级海塘安澜工程(珊瑚沙海塘)"
,
quality_score
:
"82"
,
},
{
project_name
:
"杭州市本级海塘安澜工程(上泗南北大塘)二期"
,
quality_score
:
"87"
,
},
{
project_name
:
"杭州市本级海塘安澜工程(三堡船闸段海塘)"
,
quality_score
:
"88"
,
},
{
project_name
:
"临安区双溪口水库工程"
,
quality_score
:
"81"
,
},
{
project_name
:
"宁波市界牌碶泵站工程"
,
quality_score
:
"79"
,
},
{
project_name
:
"奉化区柏坑水库扩容工程"
,
quality_score
:
"89"
,
},
{
project_name
:
"余姚市陶家路江排涝枢纽及供水工程"
,
quality_score
:
"85"
,
},
];
this
.
data2
=
[
{
project_name
:
"东苕溪防洪后续西险大塘达标加固工程(杭州市段)"
,
quality_score
:
"80"
,
},
{
project_name
:
"杭州市萧山区西江塘义桥段古海塘抢险加固工程"
,
quality_score
:
"75"
,
},
{
project_name
:
"钱塘江北岸五堡排涝泵站工程"
,
quality_score
:
"97"
,
},
{
project_name
:
"钱塘江西江塘闻堰段海塘提标加固工程"
,
quality_score
:
"92"
,
},
{
project_name
:
"杭州市萧围西线(一工段至四工段)提标加固工程"
,
quality_score
:
"82"
,
},
{
project_name
:
"杭州市本级海塘安澜工程 (三堡至乔司段海塘)一期"
,
quality_score
:
"90"
,
},
{
project_name
:
"杭州市本级海塘安澜工程(珊瑚沙海塘)"
,
quality_score
:
"82"
,
},
{
project_name
:
"杭州市本级海塘安澜工程(上泗南北大塘)二期"
,
quality_score
:
"84"
,
},
{
project_name
:
"杭州市本级海塘安澜工程(三堡船闸段海塘)"
,
quality_score
:
"82"
,
},
{
project_name
:
"临安区双溪口水库工程"
,
quality_score
:
"81"
,
},
{
project_name
:
"宁波市界牌碶泵站工程"
,
quality_score
:
"79"
,
},
{
project_name
:
"奉化区柏坑水库扩容工程"
,
quality_score
:
"83"
,
},
{
project_name
:
"余姚市陶家路江排涝枢纽及供水工程"
,
quality_score
:
"82"
,
},
];
this
.
data3
=
[
{
project_name
:
"东苕溪防洪后续西险大塘达标加固工程(杭州市段)"
,
quality_score
:
"90"
,
},
{
project_name
:
"杭州市萧山区西江塘义桥段古海塘抢险加固工程"
,
quality_score
:
"90"
,
},
{
project_name
:
"钱塘江北岸五堡排涝泵站工程"
,
quality_score
:
"87"
,
},
{
project_name
:
"钱塘江西江塘闻堰段海塘提标加固工程"
,
quality_score
:
"92"
,
},
{
project_name
:
"杭州市萧围西线(一工段至四工段)提标加固工程"
,
quality_score
:
"85"
,
},
{
project_name
:
"杭州市本级海塘安澜工程 (三堡至乔司段海塘)一期"
,
quality_score
:
"77"
,
},
{
project_name
:
"杭州市本级海塘安澜工程(珊瑚沙海塘)"
,
quality_score
:
"90"
,
},
{
project_name
:
"杭州市本级海塘安澜工程(上泗南北大塘)二期"
,
quality_score
:
"95"
,
},
{
project_name
:
"杭州市本级海塘安澜工程(三堡船闸段海塘)"
,
quality_score
:
"88"
,
},
{
project_name
:
"临安区双溪口水库工程"
,
quality_score
:
"97"
,
},
{
project_name
:
"宁波市界牌碶泵站工程"
,
quality_score
:
"79"
,
},
{
project_name
:
"奉化区柏坑水库扩容工程"
,
quality_score
:
"83"
,
},
{
project_name
:
"余姚市陶家路江排涝枢纽及供水工程"
,
quality_score
:
"74"
,
},
];
},
async
load
()
{
...
...
@@ -539,15 +766,82 @@ export default {
switchList
(
type
)
{
this
.
activeTab
=
type
;
this
.
data4
=
[];
getScoreByCity
(
this
.
currentCityId
).
then
((
res
)
=>
{
this
.
data4
=
res
.
data
;
});
getScoreStatusByCity
(
this
.
currentCityId
).
then
((
res
)
=>
{
this
.
zfjg_score
=
res
.
data
.
zfjg_score
;
this
.
zljc_score
=
res
.
data
.
zljc_score
;
this
.
score_count
=
res
.
data
.
score_count
;
});
this
.
data4
=
[
{
project_name
:
"东苕溪防洪后续西险大塘达标加固工程(杭州市段)"
,
score
:
85
,
score_count
:
87
,
project_num
:
90
,
},
{
project_name
:
"杭州市萧山区西江塘义桥段古海塘抢险加固工程"
,
score
:
85
,
score_count
:
90
,
project_num
:
95
,
},
{
project_name
:
"钱塘江北岸五堡排涝泵站工程"
,
score
:
75
,
score_count
:
80
,
project_num
:
85
,
},
{
project_name
:
"钱塘江西江塘闻堰段海塘提标加固工程"
,
score
:
83
,
score_count
:
85
,
project_num
:
87
,
},
{
project_name
:
"杭州市萧围西线(一工段至四工段)提标加固工程"
,
score
:
90
,
score_count
:
94
,
project_num
:
98
,
},
{
project_name
:
"杭州市本级海塘安澜工程 (三堡至乔司段海塘)一期"
,
score
:
84
,
score_count
:
88
,
project_num
:
88
,
},
{
project_name
:
"杭州市本级海塘安澜工程(珊瑚沙海塘)"
,
score
:
73
,
score_count
:
79
,
project_num
:
86
,
},
{
project_name
:
"杭州市本级海塘安澜工程(上泗南北大塘)二期"
,
score
:
92
,
score_count
:
83
,
project_num
:
79
,
},
{
project_name
:
"杭州市本级海塘安澜工程(三堡船闸段海塘)"
,
score
:
82
,
score_count
:
90
,
project_num
:
98
,
},
{
project_name
:
"临安区双溪口水库工程"
,
score
:
83
,
score_count
:
82
,
project_num
:
94
,
},
{
project_name
:
"宁波市界牌碶泵站工程"
,
score
:
84
,
score_count
:
83
,
project_num
:
90
,
},
];
// getScoreByCity(this.currentCityId).then((res) => {
// this.data4 = res.data;
// });
// getScoreStatusByCity(this.currentCityId).then((res) => {
// this.zfjg_score = res.data.zfjg_score;
// this.zljc_score = res.data.zljc_score;
// this.score_count = res.data.score_count;
// });
// if (type == 1) {
...
...
@@ -747,13 +1041,14 @@ export default {
color
:
[
"#2f4ca3"
,
"#8c2d2d"
],
//区域颜色范范围
pieces
:
[
{
min
:
0
,
max
:
80
},
{
min
:
0
,
max
:
79
},
{
min
:
80
,
max
:
100
},
],
textStyle
:
{
color
:
"#eee"
,
fontSize
:
14
,
},
show
:
false
,
},
series
:
[
{
...
...
@@ -898,6 +1193,22 @@ export default {
});
return
myChart
;
},
showZFJG
()
{
this
.
projectListVisible
=
true
;
this
.
$eventBus
.
$emit
(
"switchTab"
,
"ZFJG"
);
},
showGCZL
()
{
this
.
projectListVisible
=
true
;
this
.
$eventBus
.
$emit
(
"switchTab"
,
"GCZL"
);
},
showCXCY
()
{
this
.
projectListVisible
=
true
;
this
.
$eventBus
.
$emit
(
"switchTab"
,
"CXCY"
);
},
showCityList
()
{
this
.
projectListVisible
=
true
;
this
.
$eventBus
.
$emit
(
"switchTab"
,
"ProjectDetail"
);
},
},
mounted
()
{
...
...
@@ -1092,4 +1403,7 @@ export default {
transform: translateX(-50%) translateY(-50%);
}
}
.show-more {
cursor: pointer;
}
</
style
>
\ No newline at end of file
src/views/DataStatis/project/CXCY.vue
0 → 100644
View file @
5e00bd12
<
template
>
<div
class=
"dialog-body-container"
>
<el-form
inline
:model=
"searchForm"
class=
"search-form"
>
<el-form-item
label=
"所在地区:"
>
<el-select></el-select>
</el-form-item>
<el-form-item
label=
"政府监管:"
>
<el-select>
<el-option
label=
"预警"
value=
"1"
></el-option>
<el-option
label=
"正常"
value=
"2"
></el-option>
</el-select>
</el-form-item>
<el-form-item
label=
"工程名称:"
>
<el-input></el-input>
</el-form-item>
<el-form-item>
<el-button
type=
"primary"
@
click=
"handleSearch"
>
查询
</el-button>
</el-form-item>
</el-form>
<DialogApiDataTable
:has-index=
"true"
ref=
"table"
:columns=
"columns"
:parameters=
"searchForm"
:api=
"api"
:auto-load=
"false"
:data=
"data"
>
<template
#
quality_score=
"
{ data }">
<span
:style=
"
{ color: data.quality_score
<
80
?
'#
f86262
'
:
''
}"
>
{{
data
.
quality_score
}}
</span>
</
template
>
</DialogApiDataTable>
</div>
</template>
<
script
>
export
default
{
name
:
"WarningMsg"
,
props
:
{
projectId
:
{
type
:
[
String
,
Number
],
default
:
""
,
},
},
data
()
{
return
{
searchForm
:
{},
columns
:
[
{
label
:
"工程名称"
,
prop
:
"project_name"
,
minWidth
:
"600px"
,
align
:
"left"
,
},
{
label
:
"所属地区"
,
prop
:
"city_name"
},
{
label
:
"创新创优得分"
,
prop
:
"quality_score"
,
hasSlot
:
true
},
],
dateRange
:
[],
data
:
[
{
project_name
:
"东苕溪防洪后续西险大塘达标加固工程(杭州市段)"
,
city_name
:
"杭州市"
,
quality_score
:
"90"
,
quality_score2
:
"85"
,
},
{
project_name
:
"杭州市萧山区西江塘义桥段古海塘抢险加固工程"
,
city_name
:
"杭州市"
,
quality_score
:
"85"
,
quality_score2
:
"87"
,
},
{
project_name
:
"钱塘江北岸五堡排涝泵站工程"
,
city_name
:
"杭州市"
,
quality_score
:
"77"
,
quality_score2
:
"85"
,
},
{
project_name
:
"钱塘江西江塘闻堰段海塘提标加固工程"
,
city_name
:
"杭州市"
,
quality_score
:
"92"
,
quality_score2
:
"83"
,
},
{
project_name
:
"杭州市萧围西线(一工段至四工段)提标加固工程"
,
quality_score
:
"85"
,
city_name
:
"杭州市"
,
quality_score2
:
"82"
,
},
{
project_name
:
"杭州市本级海塘安澜工程 (三堡至乔司段海塘)一期"
,
quality_score
:
"90"
,
city_name
:
"杭州市"
,
quality_score2
:
"73"
,
},
{
project_name
:
"杭州市本级海塘安澜工程(珊瑚沙海塘)"
,
quality_score
:
"82"
,
city_name
:
"杭州市"
,
quality_score2
:
"81"
,
},
{
project_name
:
"杭州市本级海塘安澜工程(上泗南北大塘)二期"
,
quality_score
:
"87"
,
city_name
:
"杭州市"
,
quality_score2
:
"92"
,
},
{
project_name
:
"杭州市本级海塘安澜工程(三堡船闸段海塘)"
,
quality_score
:
"88"
,
city_name
:
"杭州市"
,
quality_score2
:
"92"
,
},
{
project_name
:
"临安区双溪口水库工程"
,
quality_score
:
"81"
,
city_name
:
"杭州市"
,
quality_score2
:
"93"
,
},
{
project_name
:
"宁波市界牌碶泵站工程"
,
quality_score
:
"79"
,
city_name
:
"宁波市"
,
quality_score2
:
"84"
,
},
{
project_name
:
"奉化区柏坑水库扩容工程"
,
quality_score
:
"89"
,
city_name
:
"宁波市"
,
quality_score2
:
"92"
,
},
{
project_name
:
"余姚市陶家路江排涝枢纽及供水工程"
,
quality_score
:
"85"
,
city_name
:
"余姚市"
,
quality_score2
:
"87"
,
},
],
// api: getWarningList,
};
},
mounted
()
{},
methods
:
{
handleSearch
()
{
this
.
$refs
.
table
.
getData
();
},
openPdf
(
url
)
{
window
.
open
(
url
);
},
changeTime
(
tr
)
{
this
.
searchForm
.
start_time
=
tr
[
0
]
?
tr
[
0
]
:
""
;
this
.
searchForm
.
end_time
=
tr
[
1
]
?
tr
[
1
]
:
""
;
},
},
};
</
script
>
<
style
lang=
"less"
scoped
>
.search-form {
margin: 20px 0 10px 0;
}
.blue {
color: #0178ff;
&:hover {
cursor: pointer;
}
}
.dialog-body-container {
display: flex;
flex-direction: column;
height: 100%;
}
</
style
>
\ No newline at end of file
src/views/DataStatis/project/GCZL.vue
0 → 100644
View file @
5e00bd12
<
template
>
<div
class=
"dialog-body-container"
>
<el-form
inline
:model=
"searchForm"
class=
"search-form"
>
<el-form-item
label=
"所在地区:"
>
<el-select></el-select>
</el-form-item>
<el-form-item
label=
"质量检测:"
>
<el-select>
<el-option
label=
"预警"
value=
"1"
></el-option>
<el-option
label=
"正常"
value=
"2"
></el-option>
</el-select>
</el-form-item>
<el-form-item
label=
"质量评定:"
>
<el-select>
<el-option
label=
"预警"
value=
"1"
></el-option>
<el-option
label=
"正常"
value=
"2"
></el-option>
</el-select>
</el-form-item>
<el-form-item
label=
"工程整体:"
>
<el-select>
<el-option
label=
"预警"
value=
"1"
></el-option>
<el-option
label=
"正常"
value=
"2"
></el-option>
</el-select>
</el-form-item>
<el-form-item
label=
"工程名称:"
>
<el-input></el-input>
</el-form-item>
<el-form-item>
<el-button
type=
"primary"
@
click=
"handleSearch"
>
查询
</el-button>
</el-form-item>
</el-form>
<DialogApiDataTable
:has-index=
"true"
ref=
"table"
:columns=
"columns"
:parameters=
"searchForm"
:api=
"api"
:auto-load=
"false"
:data=
"data"
>
<template
#
quality_score=
"
{ data }">
<span
:style=
"
{ color: data.quality_score
<
80
?
'#
f86262
'
:
''
}"
>
{{
data
.
quality_score
}}
</span>
</
template
>
<
template
#
quality_score2=
"{ data }"
>
<span
:style=
"
{ color: data.quality_score2
<
80
?
'#
f86262
'
:
''
}"
>
{{
data
.
quality_score2
}}
</span>
</
template
>
</DialogApiDataTable>
</div>
</template>
<
script
>
export
default
{
name
:
"WarningMsg"
,
props
:
{
projectId
:
{
type
:
[
String
,
Number
],
default
:
""
,
},
},
data
()
{
return
{
searchForm
:
{},
columns
:
[
{
label
:
"工程名称"
,
prop
:
"project_name"
,
minWidth
:
"600px"
,
align
:
"left"
,
},
{
label
:
"所属地区"
,
prop
:
"city_name"
},
{
label
:
"质量检测得分"
,
prop
:
"quality_score"
,
hasSlot
:
true
},
{
label
:
"质量评定得分"
,
prop
:
"quality_score2"
,
hasSlot
:
true
},
],
dateRange
:
[],
// api: getWarningList,
data
:
[
{
project_name
:
"东苕溪防洪后续西险大塘达标加固工程(杭州市段)"
,
city_name
:
"杭州市"
,
quality_score
:
"90"
,
quality_score2
:
"85"
,
},
{
project_name
:
"杭州市萧山区西江塘义桥段古海塘抢险加固工程"
,
city_name
:
"杭州市"
,
quality_score
:
"85"
,
quality_score2
:
"87"
,
},
{
project_name
:
"钱塘江北岸五堡排涝泵站工程"
,
city_name
:
"杭州市"
,
quality_score
:
"77"
,
quality_score2
:
"85"
,
},
{
project_name
:
"钱塘江西江塘闻堰段海塘提标加固工程"
,
city_name
:
"杭州市"
,
quality_score
:
"92"
,
quality_score2
:
"83"
,
},
{
project_name
:
"杭州市萧围西线(一工段至四工段)提标加固工程"
,
quality_score
:
"85"
,
city_name
:
"杭州市"
,
quality_score2
:
"82"
,
},
{
project_name
:
"杭州市本级海塘安澜工程 (三堡至乔司段海塘)一期"
,
quality_score
:
"90"
,
city_name
:
"杭州市"
,
quality_score2
:
"73"
,
},
{
project_name
:
"杭州市本级海塘安澜工程(珊瑚沙海塘)"
,
quality_score
:
"82"
,
city_name
:
"杭州市"
,
quality_score2
:
"81"
,
},
{
project_name
:
"杭州市本级海塘安澜工程(上泗南北大塘)二期"
,
quality_score
:
"87"
,
city_name
:
"杭州市"
,
quality_score2
:
"92"
,
},
{
project_name
:
"杭州市本级海塘安澜工程(三堡船闸段海塘)"
,
quality_score
:
"88"
,
city_name
:
"杭州市"
,
quality_score2
:
"92"
,
},
{
project_name
:
"临安区双溪口水库工程"
,
quality_score
:
"81"
,
city_name
:
"杭州市"
,
quality_score2
:
"93"
,
},
{
project_name
:
"宁波市界牌碶泵站工程"
,
quality_score
:
"79"
,
city_name
:
"宁波市"
,
quality_score2
:
"84"
,
},
{
project_name
:
"奉化区柏坑水库扩容工程"
,
quality_score
:
"89"
,
city_name
:
"宁波市"
,
quality_score2
:
"92"
,
},
{
project_name
:
"余姚市陶家路江排涝枢纽及供水工程"
,
quality_score
:
"85"
,
city_name
:
"余姚市"
,
quality_score2
:
"87"
,
},
],
};
},
mounted
()
{},
methods
:
{
handleSearch
()
{
this
.
$refs
.
table
.
getData
();
},
openPdf
(
url
)
{
window
.
open
(
url
);
},
changeTime
(
tr
)
{
this
.
searchForm
.
start_time
=
tr
[
0
]
?
tr
[
0
]
:
""
;
this
.
searchForm
.
end_time
=
tr
[
1
]
?
tr
[
1
]
:
""
;
},
},
};
</
script
>
<
style
lang=
"less"
scoped
>
.search-form {
margin: 20px 0 10px 0;
}
.blue {
color: #0178ff;
&:hover {
cursor: pointer;
}
}
.dialog-body-container {
display: flex;
flex-direction: column;
height: 100%;
}
</
style
>
\ No newline at end of file
src/views/DataStatis/project/Index.vue
0 → 100644
View file @
5e00bd12
<
template
>
<Dialog
title=
"更多工程"
:visible=
"dialogVisible"
width=
"70%"
@
change-visible=
"changeVisible"
>
<DialogTabs
:tabList=
"tabList"
:currentTab=
"currentTabNow"
@
change=
"(val) => changeTab(val)"
></DialogTabs>
<component
:is=
"currentTabNow"
></component>
</Dialog>
</
template
>
<
script
>
import
ProjectDetail
from
"./ProjectDetail.vue"
;
import
CXCY
from
"./CXCY.vue"
;
import
GCZL
from
"./GCZL.vue"
;
import
ZFJG
from
"./ZFJG.vue"
;
export
default
{
name
:
"ProjectDialog"
,
components
:
{
ProjectDetail
,
CXCY
,
GCZL
,
ZFJG
},
props
:
{
projectName
:
{
type
:
String
,
default
:
""
,
},
visible
:
{
type
:
Boolean
,
default
:
false
,
},
projectId
:
{
type
:
[
Number
,
String
],
default
:
""
,
},
},
data
()
{
return
{
tabList
:
[
{
name
:
"ZFJG"
,
label
:
"政府监管"
},
{
name
:
"GCZL"
,
label
:
"工程质量"
},
{
name
:
"CXCY"
,
label
:
"创新创优"
},
{
name
:
"ProjectDetail"
,
label
:
"工程整体情况"
},
],
currentTabNow
:
"ProjectDetail"
,
};
},
computed
:
{
dialogVisible
:
{
get
()
{
return
this
.
visible
;
},
set
(
val
)
{
this
.
$emit
(
"change-visible"
,
val
);
},
},
},
methods
:
{
changeTab
(
e
)
{
this
.
currentTabNow
=
e
;
},
changeVisible
(
val
)
{
console
.
log
(
val
);
this
.
dialogVisible
=
val
;
},
},
mounted
()
{
this
.
$eventBus
.
$on
(
"switchTab"
,
(
type
)
=>
{
this
.
$nextTick
(()
=>
{
this
.
currentTabNow
=
type
;
});
});
},
};
</
script
>
<
style
lang=
"less"
scoped
>
</
style
>
\ No newline at end of file
src/views/DataStatis/project/ProjectDetail.vue
0 → 100644
View file @
5e00bd12
<
template
>
<div
class=
"dialog-body-container"
>
<el-form
inline
:model=
"searchForm"
class=
"search-form"
>
<el-form-item
label=
"所在地区:"
>
<el-select></el-select>
</el-form-item>
<el-form-item
label=
"工程整体:"
>
<el-select>
<el-option
label=
"预警"
value=
"1"
></el-option>
<el-option
label=
"正常"
value=
"2"
></el-option>
</el-select>
</el-form-item>
<el-form-item
label=
"工程名称:"
>
<el-input></el-input>
</el-form-item>
<el-form-item>
<el-button
type=
"primary"
@
click=
"handleSearch"
>
查询
</el-button>
</el-form-item>
</el-form>
<DialogApiDataTable
:has-index=
"true"
ref=
"table"
:columns=
"columns"
:parameters=
"searchForm"
:api=
"api"
:auto-load=
"false"
:data=
"data"
>
<template
#
quality_score=
"
{ data }">
<span
:style=
"
{ color: data.quality_score
<
80
?
'#
f86262
'
:
''
}"
>
{{
data
.
quality_score
}}
</span>
</
template
>
<
template
#
quality_score1=
"{ data }"
>
<span
:style=
"
{ color: data.quality_score1
<
80
?
'#
f86262
'
:
''
}"
>
{{
data
.
quality_score1
}}
</span>
</
template
>
<
template
#
quality_score2=
"{ data }"
>
<span
:style=
"
{ color: data.quality_score2
<
80
?
'#
f86262
'
:
''
}"
>
{{
data
.
quality_score2
}}
</span>
</
template
>
<
template
#
quality_score3=
"{ data }"
>
<span
:style=
"
{ color: data.quality_score3
<
80
?
'#
f86262
'
:
''
}"
>
{{
data
.
quality_score3
}}
</span>
</
template
>
<
template
#
quality_score4=
"{ data }"
>
<span
:style=
"
{ color: data.quality_score4
<
80
?
'#
f86262
'
:
''
}"
>
{{
data
.
quality_score4
}}
</span>
</
template
>
</DialogApiDataTable>
</div>
</template>
<
script
>
export
default
{
name
:
"WarningMsg"
,
props
:
{
projectId
:
{
type
:
[
String
,
Number
],
default
:
""
,
},
},
data
()
{
return
{
searchForm
:
{},
columns
:
[
{
label
:
"工程名称"
,
prop
:
"project_name"
,
minWidth
:
"350px"
,
align
:
"left"
,
},
{
label
:
"所属地区"
,
prop
:
"city_name"
},
{
label
:
"政府监管得分"
,
prop
:
"quality_score"
,
hasSlot
:
true
},
{
label
:
"质量检测得分"
,
prop
:
"quality_score1"
,
hasSlot
:
true
},
{
label
:
"质量评定得分"
,
prop
:
"quality_score2"
,
hasSlot
:
true
},
{
label
:
"创新创优得分"
,
prop
:
"quality_score3"
,
hasSlot
:
true
},
{
label
:
"整体得分"
,
prop
:
"quality_score4"
,
hasSlot
:
true
},
],
dateRange
:
[],
data
:
[
{
project_name
:
"东苕溪防洪后续西险大塘达标加固工程(杭州市段)"
,
city_name
:
"杭州市"
,
quality_score
:
"90"
,
quality_score1
:
"90"
,
quality_score2
:
"85"
,
quality_score3
:
"83"
,
quality_score4
:
"85"
,
},
{
project_name
:
"杭州市萧山区西江塘义桥段古海塘抢险加固工程"
,
city_name
:
"杭州市"
,
quality_score
:
"85"
,
quality_score1
:
"92"
,
quality_score2
:
"87"
,
quality_score3
:
"90"
,
quality_score4
:
"89"
,
},
{
project_name
:
"钱塘江北岸五堡排涝泵站工程"
,
city_name
:
"杭州市"
,
quality_score
:
"77"
,
quality_score1
:
"78"
,
quality_score2
:
"85"
,
quality_score3
:
"82"
,
quality_score4
:
"83"
,
},
{
project_name
:
"钱塘江西江塘闻堰段海塘提标加固工程"
,
city_name
:
"杭州市"
,
quality_score
:
"92"
,
quality_score1
:
"70"
,
quality_score2
:
"83"
,
quality_score3
:
"79"
,
quality_score4
:
"85"
,
},
{
project_name
:
"杭州市萧围西线(一工段至四工段)提标加固工程"
,
quality_score
:
"85"
,
city_name
:
"杭州市"
,
quality_score1
:
"83"
,
quality_score2
:
"82"
,
quality_score3
:
"84"
,
quality_score4
:
"81"
,
},
{
project_name
:
"杭州市本级海塘安澜工程 (三堡至乔司段海塘)一期"
,
quality_score
:
"90"
,
city_name
:
"杭州市"
,
quality_score1
:
"82"
,
quality_score2
:
"73"
,
quality_score3
:
"79"
,
quality_score4
:
"85"
,
},
{
project_name
:
"杭州市本级海塘安澜工程(珊瑚沙海塘)"
,
quality_score
:
"82"
,
city_name
:
"杭州市"
,
quality_score1
:
"92"
,
quality_score2
:
"81"
,
quality_score3
:
"75"
,
quality_score4
:
"80"
,
},
{
project_name
:
"杭州市本级海塘安澜工程(上泗南北大塘)二期"
,
quality_score
:
"87"
,
city_name
:
"杭州市"
,
quality_score1
:
"87"
,
quality_score2
:
"92"
,
quality_score3
:
"83"
,
quality_score4
:
"85"
,
},
{
project_name
:
"杭州市本级海塘安澜工程(三堡船闸段海塘)"
,
quality_score
:
"88"
,
city_name
:
"杭州市"
,
quality_score1
:
"92"
,
quality_score2
:
"92"
,
quality_score3
:
"78"
,
quality_score4
:
"85"
,
},
{
project_name
:
"临安区双溪口水库工程"
,
quality_score
:
"81"
,
city_name
:
"杭州市"
,
quality_score1
:
"91"
,
quality_score2
:
"93"
,
quality_score3
:
"81"
,
quality_score4
:
"82"
,
},
{
project_name
:
"宁波市界牌碶泵站工程"
,
quality_score
:
"79"
,
city_name
:
"宁波市"
,
quality_score1
:
"88"
,
quality_score2
:
"84"
,
quality_score3
:
"87"
,
quality_score4
:
"85"
,
},
{
project_name
:
"奉化区柏坑水库扩容工程"
,
quality_score
:
"89"
,
city_name
:
"宁波市"
,
quality_score1
:
"83"
,
quality_score2
:
"92"
,
quality_score3
:
"82"
,
quality_score4
:
"81"
,
},
{
project_name
:
"余姚市陶家路江排涝枢纽及供水工程"
,
quality_score
:
"85"
,
city_name
:
"余姚市"
,
quality_score1
:
"78"
,
quality_score2
:
"87"
,
quality_score3
:
"78"
,
quality_score4
:
"82"
,
},
],
// api: getWarningList,
};
},
mounted
()
{},
methods
:
{
handleSearch
()
{
this
.
$refs
.
table
.
getData
();
},
openPdf
(
url
)
{
window
.
open
(
url
);
},
changeTime
(
tr
)
{
this
.
searchForm
.
start_time
=
tr
[
0
]
?
tr
[
0
]
:
""
;
this
.
searchForm
.
end_time
=
tr
[
1
]
?
tr
[
1
]
:
""
;
},
},
};
</
script
>
<
style
lang=
"less"
scoped
>
.search-form {
margin: 20px 0 10px 0;
}
.blue {
color: #0178ff;
&:hover {
cursor: pointer;
}
}
.dialog-body-container {
display: flex;
flex-direction: column;
height: 100%;
}
</
style
>
\ No newline at end of file
src/views/DataStatis/project/ZFJG.vue
0 → 100644
View file @
5e00bd12
<
template
>
<div
class=
"dialog-body-container"
>
<el-form
inline
:model=
"searchForm"
class=
"search-form"
>
<el-form-item
label=
"所在地区:"
>
<el-select></el-select>
</el-form-item>
<el-form-item
label=
"政府监管:"
>
<el-select>
<el-option
label=
"预警"
value=
"1"
></el-option>
<el-option
label=
"正常"
value=
"2"
></el-option>
</el-select>
</el-form-item>
<el-form-item
label=
"工程名称:"
>
<el-input></el-input>
</el-form-item>
<el-form-item>
<el-button
type=
"primary"
@
click=
"handleSearch"
>
查询
</el-button>
</el-form-item>
</el-form>
<DialogApiDataTable
:has-index=
"true"
ref=
"table"
:columns=
"columns"
:parameters=
"searchForm"
:api=
"api"
:auto-load=
"false"
:data=
"data"
>
<template
#
quality_score=
"
{ data }">
<span
:style=
"
{ color: data.quality_score
<
80
?
'#
f86262
'
:
''
}"
>
{{
data
.
quality_score
}}
</span>
</
template
>
<!-- <template #noise_status="{ data }"> </template> -->
</DialogApiDataTable>
</div>
</template>
<
script
>
export
default
{
name
:
"WarningMsg"
,
props
:
{
projectId
:
{
type
:
[
String
,
Number
],
default
:
""
,
},
},
data
()
{
return
{
searchForm
:
{},
columns
:
[
{
label
:
"工程名称"
,
prop
:
"project_name"
,
minWidth
:
"600px"
,
align
:
"left"
,
},
{
label
:
"所属地区"
,
prop
:
"city_name"
},
{
label
:
"政府监管得分"
,
prop
:
"quality_score"
,
hasSlot
:
true
},
],
dateRange
:
[],
data
:
[
{
project_name
:
"东苕溪防洪后续西险大塘达标加固工程(杭州市段)"
,
city_name
:
"杭州市"
,
quality_score
:
"90"
,
},
{
project_name
:
"杭州市萧山区西江塘义桥段古海塘抢险加固工程"
,
city_name
:
"杭州市"
,
quality_score
:
"85"
,
},
{
project_name
:
"钱塘江北岸五堡排涝泵站工程"
,
city_name
:
"杭州市"
,
quality_score
:
"77"
,
},
{
project_name
:
"钱塘江西江塘闻堰段海塘提标加固工程"
,
city_name
:
"杭州市"
,
quality_score
:
"92"
,
},
{
project_name
:
"杭州市萧围西线(一工段至四工段)提标加固工程"
,
quality_score
:
"85"
,
city_name
:
"杭州市"
,
},
{
project_name
:
"杭州市本级海塘安澜工程 (三堡至乔司段海塘)一期"
,
quality_score
:
"90"
,
city_name
:
"杭州市"
,
},
{
project_name
:
"杭州市本级海塘安澜工程(珊瑚沙海塘)"
,
quality_score
:
"82"
,
city_name
:
"杭州市"
,
},
{
project_name
:
"杭州市本级海塘安澜工程(上泗南北大塘)二期"
,
quality_score
:
"87"
,
city_name
:
"杭州市"
,
},
{
project_name
:
"杭州市本级海塘安澜工程(三堡船闸段海塘)"
,
quality_score
:
"88"
,
city_name
:
"杭州市"
,
},
{
project_name
:
"临安区双溪口水库工程"
,
quality_score
:
"81"
,
city_name
:
"杭州市"
,
},
{
project_name
:
"宁波市界牌碶泵站工程"
,
quality_score
:
"79"
,
city_name
:
"宁波市"
,
},
{
project_name
:
"奉化区柏坑水库扩容工程"
,
quality_score
:
"89"
,
city_name
:
"宁波市"
,
},
{
project_name
:
"余姚市陶家路江排涝枢纽及供水工程"
,
quality_score
:
"85"
,
city_name
:
"余姚市"
,
},
],
// api: getWarningList,
};
},
mounted
()
{},
methods
:
{
handleSearch
()
{
this
.
$refs
.
table
.
getData
();
},
openPdf
(
url
)
{
window
.
open
(
url
);
},
changeTime
(
tr
)
{
this
.
searchForm
.
start_time
=
tr
[
0
]
?
tr
[
0
]
:
""
;
this
.
searchForm
.
end_time
=
tr
[
1
]
?
tr
[
1
]
:
""
;
},
},
};
</
script
>
<
style
lang=
"less"
scoped
>
.search-form {
margin: 20px 0 10px 0;
}
.blue {
color: #0178ff;
&:hover {
cursor: pointer;
}
}
.dialog-body-container {
display: flex;
flex-direction: column;
height: 100%;
}
</
style
>
\ No newline at end of file
vue.config.js
View file @
5e00bd12
...
...
@@ -23,7 +23,7 @@ module.exports = defineConfig({
port
:
3000
,
proxy
:
{
'/site'
:
{
target
:
'http://192.168.0.
185
/'
,
target
:
'http://192.168.0.
212
/'
,
changeOrigin
:
true
,
// pathRewrite: {
// '^/api': ''
...
...
Write
Preview
Markdown
is supported
0%
Try again
or
attach a new file
Attach a file
Cancel
You are about to add
0
people
to the discussion. Proceed with caution.
Finish editing this message first!
Cancel
Please
register
or
sign in
to comment