Skip to content

Q
quality-dynamic
Commit 5e00bd12 authored by 张牧越's avatar 张牧越
Browse files
Options

假数据添加

parent 64559f2b
Show whitespace changes
Inline Side-by-side
Showing with 2131 additions and 1028 deletions
src/assets/common/element.less
View file @ 5e00bd12
.el-date-editor { /* select style */
vertical-align: top; .el-select__wrapper {
background: transparent;
box-shadow: none;
border: 1px solid rgba(49, 97, 166, 1);
}
.el-input__inner { .el-select__placeholder {
background: #07196e !important; color: #fff;
border: 2px solid #0f57ba !important; }
color: #fff !important;
}
.el-input__prefix { .el-input__inner {
color: #fff !important; color: #fff;
}
} }
.el-input { /* table style */
.el-input__inner {
background: #07196e !important; .el-table {
border: 2px solid #0f57ba !important; background-color: transparent;
color: #fff !important; color: #fff;
} font-size: 12px;
} }
.el-range-editor { .el-table tr {
line-height: 32px; background-color: transparent;
}
&.el-input__inner { .el-table .cell {
background: #07196e !important; padding: 8px 6px;
border: 2px solid #0f57ba !important; line-height: 18px;
color: #fff !important;
}
.el-range-input { }
background: transparent;
color: #fff;
}
.el-range-separator {
color: #fff;
}
.el-input__icon { .el-table thead {
color: #fff; color: #fff;
}
} }
.el-select { .el-table th.el-table__cell {
.el-input__inner { background: rgba(35, 221, 255, 0.2);
background: #07196e !important;
border: 2px solid #0f57ba !important;
color: #fff !important;
}
} }
.el-dropdown-menu { .el-table .el-table__cell {
background: rgba(8, 34, 68, 0.9); padding: 0;
border: 1px solid #3CD4D4;
} }
.el-popper[x-placement^=top] .popper__arrow::after { .el-table thead th {
border-top-color: rgba(8, 34, 68, 0.9); font-weight: 400;
} }
.el-dropdown-menu { .el-table * {
.el-dropdown-menu__item { border-color: rgba(11, 116, 136, 1);
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-dropdown-menu__item:last-of-type { .el-table {
border-bottom: none; --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 { .el-dialog__header {
text-align: center; text-align: center;
padding: 16px 0; padding: 16px 0;
height: 30px;
background: #063B80; background: #063B80;
position: relative; position: relative;
.el-dialog__title {
}
.el-dialog__header .el-dialog__title {
color: #fff; color: #fff;
z-index: 999; z-index: 999;
position: absolute; position: absolute;
...@@ -104,108 +97,331 @@ ...@@ -104,108 +97,331 @@
top: 50%; top: 50%;
transform: translateX(-50%)translateY(-50%); transform: translateX(-50%)translateY(-50%);
} }
&::after { .el-dialog__header::after {
content: ''; content: '';
position: absolute; position: absolute;
top: 0; top: 0;
left: 50%; left: 50%;
width: 100%; width: 100%;
height: 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%; background-size: 100% 100%;
transform: translateX(-50%); transform: translateX(-50%);
z-index: 0; z-index: 0;
} }
.el-dialog__headerbtn { .el-dialog__header .el-dialog__headerbtn {
z-index: 999 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 { .el-dialog.full-screen .el-dialog__body {
color: #fff; height: calc(100% - 90px);
padding-bottom: 0 !important; display: flex;
flex-direction: column;
} }
.el-dialog__body { .search-form {
padding: 16px 40px; width: 100%;
} }
.el-dialog__close {
.el-icon.el-dialog__close {
color: #fff;
font-size: 20px; font-size: 20px;
color: #fff !important; line-height: 20px;
vertical-align: top;
margin-top: 2px;
} }
.el-table { .el-dialog__headerbtn {
background: #113883 !important; width: 20px;
height: 20px;
top: 15px;
right: 14px;
transform: scale(1.2);
}
thead {
tr,
th { /* form-style */
background: #1D489B !important;
color: #fff;
} .search-form {
} background: #12407F;
line-height: 40px;
position: relative;
} }
.el-table tr { .search-form .el-form-item {
background: rgba(17, 56, 131, 0.5); margin: 4px 0 !important;
color: #fff;
} }
.el-table--striped .el-table__body tr.el-table__row--striped td.el-table__cell { .search-form .el-form-item__label {
background: #063572 !important; font-size: 14px;
color: #60FFF6;
padding-left: 8px;
} }
.el-table--enable-row-hover .el-table__body tr:hover>td.el-table__cell { .search-form .el-select {
background: #063572 !important; min-width: 120px;
} }
.el-table--border::after, .search-form .el-select__wrapper {
.el-table--group::after, background: #072350;
.el-table::before { box-shadow: none;
background-color: transparent !important; border: none;
} }
.el-table td.el-table__cell, .search-form .el-input__inner {
.el-table th.el-table__cell.is-leaf { background: #072350;
box-shadow: none;
border: none; border: none;
} }
.el-pagination { .search-form .el-date-editor .el-range-separator {
color: #fff; color: #fff;
text-align: right; }
padding: 12px;
.el-pagination__total, .search-form .el-date-editor.el-input__inner {
.el-pagination__jump { background: rgba(6, 53, 114, 1) !important;
color: #fff !important; border: none;
} }
button { .search-form .el-date-editor .el-range-input {
background-color: transparent !important; background-color: transparent !important;
} color: #fff;
}
.el-pager li { .search-form .el-button--primary {
background-color: transparent !important; background: #37CCC4;
} margin-left: 10px;
border: none;
}
.search-form .el-form--inline .el-form-item {
vertical-align: top;
}
.el-pager li.btn-quicknext, /* dialog-table style */
.el-pager li.btn-quickprev { .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; 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, .table-pagination .el-pager li {
.btn-prev { background-color: transparent;
color: #fff; 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/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 @@ ...@@ -18,8 +18,9 @@
v-infinite-scroll="load" v-infinite-scroll="load"
:infinite-scroll-distance="1" :infinite-scroll-distance="1"
:infinite-scroll-delay="1000" :infinite-scroll-delay="1000"
ref="tableData" ref="scrollContainer"
> >
<div ref="scrollList">
<div <div
class="table-data-columns" class="table-data-columns"
v-for="(row, index) in tableData" v-for="(row, index) in tableData"
...@@ -51,6 +52,7 @@ ...@@ -51,6 +52,7 @@
</template> </template>
</div> </div>
</div> </div>
</div>
<div v-if="tableData.length == 0" class="no-data"> <div v-if="tableData.length == 0" class="no-data">
<div class="inner"> <div class="inner">
<img src="@/assets/images/index/no-data.png" alt="" /> <img src="@/assets/images/index/no-data.png" alt="" />
...@@ -81,23 +83,59 @@ export default { ...@@ -81,23 +83,59 @@ export default {
default: false, default: false,
}, },
}, },
data() {
return {
scrollInterval: null,
};
},
methods: { methods: {
load() { load() {
if (this.pagination) { if (this.pagination) {
this.$emit("load"); 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() { data() {
return {}; return {};
}, },
mounted() { mounted() {
this.$refs.tableData.onscroll = () => { this.$refs.scrollContainer.onscroll = () => {
let list = document.getElementsByClassName("el-tooltip__popper"); let list = document.getElementsByClassName("el-tooltip__popper");
if (list.length > 0) { if (list.length > 0) {
list[list.length - 1].style.display = "none"; list[list.length - 1].style.display = "none";
} }
}; };
this.$refs.scrollContainer.onmouseover = () => {
this.stopScrolling();
};
this.$refs.scrollContainer.onmouseout = () => {
this.startScrolling();
};
this.startScrolling();
}, },
}; };
</script> </script>
......
src/components/common/STable2.vue
View file @ 5e00bd12
...@@ -18,8 +18,9 @@ ...@@ -18,8 +18,9 @@
v-infinite-scroll="load" v-infinite-scroll="load"
:infinite-scroll-distance="1" :infinite-scroll-distance="1"
:infinite-scroll-delay="1000" :infinite-scroll-delay="1000"
ref="tableData" ref="scrollContainer"
> >
<div ref="scrollList">
<div <div
class="table-data-columns" class="table-data-columns"
v-for="(row, index) in tableData" v-for="(row, index) in tableData"
...@@ -51,6 +52,8 @@ ...@@ -51,6 +52,8 @@
</template> </template>
</div> </div>
</div> </div>
</div>
<div v-if="tableData.length == 0" class="no-data"> <div v-if="tableData.length == 0" class="no-data">
<div class="inner"> <div class="inner">
<img src="@/assets/images/index/no-data.png" alt="" /> <img src="@/assets/images/index/no-data.png" alt="" />
...@@ -81,23 +84,59 @@ export default { ...@@ -81,23 +84,59 @@ export default {
default: false, default: false,
}, },
}, },
data() {
return {
scrollInterval: null,
};
},
methods: { methods: {
load() { load() {
if (this.pagination) { if (this.pagination) {
this.$emit("load"); 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() { data() {
return {}; return {};
}, },
mounted() { mounted() {
this.$refs.tableData.onscroll = () => { this.$refs.scrollContainer.onscroll = () => {
let list = document.getElementsByClassName("el-tooltip__popper"); let list = document.getElementsByClassName("el-tooltip__popper");
if (list.length > 0) { if (list.length > 0) {
list[list.length - 1].style.display = "none"; list[list.length - 1].style.display = "none";
} }
}; };
this.$refs.scrollContainer.onmouseover = () => {
this.stopScrolling();
};
this.$refs.scrollContainer.onmouseout = () => {
this.startScrolling();
};
this.startScrolling();
}, },
}; };
</script> </script>
......
src/components/common/Section.vue
View file @ 5e00bd12
<template> <template>
<div class="section" :style="{ height: height }"> <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']"> <div :class="[type == 'long' ? 'container2' : 'container']">
<slot /> <slot />
</div> </div>
......
src/components/common/Title.vue
View file @ 5e00bd12
<template> <template>
<div class="title"> <div class="title">
{{ title }} {{ title }}
<div class="right-slot">
<slot name="right-slot"></slot>
</div>
</div> </div>
</template> </template>
<script> <script>
...@@ -23,8 +26,14 @@ export default { ...@@ -23,8 +26,14 @@ export default {
background: url("@/assets/images/index/icon_toubg@2x.png"); background: url("@/assets/images/index/icon_toubg@2x.png");
background-repeat: no-repeat; background-repeat: no-repeat;
background-size: 100% 100%; background-size: 100% 100%;
position: relative;
} }
.right-slot { .right-slot {
float: right; position: absolute;
right: 0;
top: 50%;
transform: translateY(-50%);
color: #43bcd2;
font-size: 14px;
} }
</style> </style>
\ No newline at end of file
src/main.js
View file @ 5e00bd12
...@@ -15,7 +15,9 @@ import STable from "@/components/common/STable" ...@@ -15,7 +15,9 @@ import STable from "@/components/common/STable"
import "@/assets/iconfont/iconfont.css"; import "@/assets/iconfont/iconfont.css";
import "@/assets/common/common.less" import "@/assets/common/common.less"
import "@/assets/common/element.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 = { window._AMapSecurityConfig = {
securityJsCode: 'a5006042196de6dda20a434eb443bf45', securityJsCode: 'a5006042196de6dda20a434eb443bf45',
...@@ -24,13 +26,15 @@ Vue.use(scroll) ...@@ -24,13 +26,15 @@ Vue.use(scroll)
Vue.prototype.$echarts = echarts Vue.prototype.$echarts = echarts
Vue.config.productionTip = false Vue.config.productionTip = false
Vue.prototype.$eventBus = new Vue();
Vue.use(ElementUI) Vue.use(ElementUI)
Vue.component('Title', Title) Vue.component('Title', Title)
Vue.component('Title2', Title2) Vue.component('Title2', Title2)
Vue.component('Section', Section) Vue.component('Section', Section)
Vue.component('STable', STable) Vue.component('STable', STable)
Vue.component('Dialog', Dialog)
Vue.component('DialogTabs', DialogTabs)
Vue.component('DialogApiDataTable', DialogApiDataTable)
new Vue({ new Vue({
render: h => h(App), render: h => h(App),
store, store,
......
src/utils/request.js
View file @ 5e00bd12
...@@ -70,6 +70,8 @@ request.interceptors.response.use( ...@@ -70,6 +70,8 @@ request.interceptors.response.use(
return response.data return response.data
}, },
async (error) => { async (error) => {
if (error.request.status == 401) { if (error.request.status == 401) {
closeLoading() closeLoading()
localStorage.setItem('Authorization', '') localStorage.setItem('Authorization', '')
...@@ -79,6 +81,7 @@ request.interceptors.response.use( ...@@ -79,6 +81,7 @@ request.interceptors.response.use(
}) })
window.location.href = window.location.origin window.location.href = window.location.origin
} }
closeLoading()
Message({ Message({
message: '服务器错误', message: '服务器错误',
type: 'error' 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 @@ ...@@ -6,42 +6,62 @@
element-loading-text="地图加载中..." --> element-loading-text="地图加载中..." -->
<div class="left-area"> <div class="left-area">
<Section class="sections" title="政府监管"> <Section class="sections" title="政府监管">
<template #right-slot>
<span class="show-more" @click="showZFJG">查看更多</span>
</template>
<STable :headers="header1" :table-data="data1"> <STable :headers="header1" :table-data="data1">
<template slot-scope="scope"> <template slot-scope="scope">
<template v-if="scope.header.slot == 'score'"> <template v-if="scope.header.slot == 'quality_score'">
<span :style="{ color: scope.row.score < 80 ? '#f86262' : '' }">{{ <span
scope.row.score :style="{
}}</span> color: scope.row.quality_score < 80 ? '#f86262' : '',
}"
>{{ scope.row.quality_score }}</span
>
</template> </template>
</template> </template>
</STable> </STable>
</Section> </Section>
<Section class="sections" title="工程质量"> <Section class="sections" title="工程质量">
<template #right-slot>
<span class="show-more" @click="showGCZL">查看更多</span>
</template>
<STable :headers="header2" :table-data="data2"> <STable :headers="header2" :table-data="data2">
<template slot-scope="scope"> <template slot-scope="scope">
<template v-if="scope.header.slot == 'score'"> <template v-if="scope.header.slot == 'quality_score'">
<span :style="{ color: scope.row.score < 80 ? '#f86262' : '' }">{{ <span
scope.row.score :style="{
}}</span> color: scope.row.quality_score < 80 ? '#f86262' : '',
}"
>{{ scope.row.quality_score }}</span
>
</template> </template>
</template> </template>
</STable> </STable>
</Section> </Section>
<Section class="sections" title="创新创优"> <Section class="sections" title="创新创优">
<template #right-slot>
<span class="show-more" @click="showCXCY">查看更多</span>
</template>
<STable :headers="header3" :table-data="data3"> <STable :headers="header3" :table-data="data3">
<template slot-scope="scope"> <template slot-scope="scope">
<template v-if="scope.header.slot == 'score'"> <template v-if="scope.header.slot == 'quality_score'">
<span :style="{ color: scope.row.score < 80 ? '#f86262' : '' }">{{ <span
scope.row.score :style="{
}}</span> color: scope.row.quality_score < 80 ? '#f86262' : '',
}"
>{{ scope.row.quality_score }}</span
>
</template> </template>
</template> </template>
</STable> </STable>
</Section> </Section>
</div> </div>
<div class="right-area"> <div class="right-area" v-if="currentCityName">
<!-- v-if="currentCityName" -->
<Section class="sections long" type="long" :title="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="get-points">
<div class="points"> <div class="points">
<div <div
...@@ -94,17 +114,11 @@ ...@@ -94,17 +114,11 @@
>{{ scope.row.project_num }}</span >{{ scope.row.project_num }}</span
> >
</template> </template>
</template>
<template slot-scope="scope">
<template v-if="scope.header.slot == 'score'"> <template v-if="scope.header.slot == 'score'">
<span :style="{ color: scope.row.score < 80 ? '#f86262' : '' }">{{ <span :style="{ color: scope.row.score < 80 ? '#f86262' : '' }">{{
scope.row.score scope.row.score
}}</span> }}</span>
</template> </template>
</template>
<template slot-scope="scope">
<template v-if="scope.header.slot == 'score_count'"> <template v-if="scope.header.slot == 'score_count'">
<span <span
:style="{ color: scope.row.score_count < 80 ? '#f86262' : '' }" :style="{ color: scope.row.score_count < 80 ? '#f86262' : '' }"
...@@ -123,6 +137,11 @@ ...@@ -123,6 +137,11 @@
</div> --> </div> -->
</Section> </Section>
</div> </div>
<ProjectList
:visible="projectListVisible"
@change-visible="(val) => (projectListVisible = val)"
></ProjectList>
<!-- <div class="bottom-area"> <!-- <div class="bottom-area">
<Section2 title="工程风险监视" class="bottom-section"> <Section2 title="工程风险监视" class="bottom-section">
<STable2 :headers="header5" :table-data="data5"> <STable2 :headers="header5" :table-data="data5">
...@@ -151,23 +170,21 @@ import { ...@@ -151,23 +170,21 @@ import {
getYearQuestion, getYearQuestion,
getLevelQuestion, getLevelQuestion,
getStatusQuestion, getStatusQuestion,
getProjectQuestion,
getAreaQuestionByAreaId,
getScoreByCity, getScoreByCity,
getScoreStatusByCity, getScoreStatusByCity,
} from "@/api/dataStatis"; } from "@/api/dataStatis";
import AMapLoader from "@amap/amap-jsapi-loader";
import { mapState } from "vuex"; import { mapState } from "vuex";
import zhejiangMapData from "@/assets/data/mapData.json"; import zhejiangMapData from "@/assets/data/mapData.json";
import Section2 from "@/components/common/Section2.vue"; import Section2 from "@/components/common/Section2.vue";
import STable2 from "@/components/common/STable2.vue"; import STable2 from "@/components/common/STable2.vue";
import ProjectList from "@/views/DataStatis/project/Index.vue";
export default { export default {
name: "DataStatis", name: "DataStatis",
components: { components: {
Section2, Section2,
STable2, STable2,
ProjectList,
}, },
data() { data() {
return { return {
...@@ -186,7 +203,12 @@ export default { ...@@ -186,7 +203,12 @@ export default {
}, },
align: "left", align: "left",
}, },
{ name: "政府监管得分", props: "score", width: "30%", slot: "score" }, {
name: "政府监管得分",
props: "quality_score",
width: "30%",
slot: "quality_score",
},
], ],
header2: [ header2: [
{ {
...@@ -202,7 +224,12 @@ export default { ...@@ -202,7 +224,12 @@ export default {
}, },
align: "left", align: "left",
}, },
{ name: "质量评定得分", props: "score", width: "30%", slot: "score" }, {
name: "质量评定得分",
props: "quality_score",
width: "30%",
slot: "quality_score",
},
], ],
header3: [ header3: [
{ {
...@@ -218,7 +245,12 @@ export default { ...@@ -218,7 +245,12 @@ export default {
}, },
align: "left", align: "left",
}, },
{ name: "创新创优得分", props: "score", width: "30%", slot: "score" }, {
name: "创新创优得分",
props: "quality_score",
width: "30%",
slot: "quality_score",
},
], ],
// header1: [ // header1: [
// { // {
...@@ -484,16 +516,29 @@ export default { ...@@ -484,16 +516,29 @@ export default {
polygons: [], polygons: [],
currentCityName: "", currentCityName: "",
currentCityId: "", currentCityId: "",
zfjg_score: 0, zfjg_score: 90,
zljc_score: 0, zljc_score: 85,
score_count: 0, score_count: 87,
projectListVisible: false,
}; };
}, },
methods: { methods: {
initMap() { 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 = []; var newZhejiangMapData = [];
res.data.map((item) => { cityData.map((item) => {
newZhejiangMapData.push({ newZhejiangMapData.push({
name: item.name, name: item.name,
value: [ value: [
...@@ -511,25 +556,207 @@ export default { ...@@ -511,25 +556,207 @@ export default {
this.currentCityId = item.id; this.currentCityId = item.id;
this.currentCityName = item.name; this.currentCityName = item.name;
} }
this.switchList(1);
}); });
this.switchList(1);
this.initMapData("amap-container", zhejiangJson, newZhejiangMapData, 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() { getData() {
getYearQuestion().then((res) => { // getYearQuestion().then((res) => {
this.data1 = res.data; // this.data1 = res.data;
}); // });
getLevelQuestion().then((res) => { // getLevelQuestion().then((res) => {
this.data2 = res.data; // this.data2 = res.data;
});
getStatusQuestion().then((res) => {
this.data3 = res.data;
});
// getProjectQuestion().then((res) => {
// this.data5 = 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() { async load() {
...@@ -539,15 +766,82 @@ export default { ...@@ -539,15 +766,82 @@ export default {
switchList(type) { switchList(type) {
this.activeTab = type; this.activeTab = type;
this.data4 = []; this.data4 = [];
this.data4 = [
getScoreByCity(this.currentCityId).then((res) => { {
this.data4 = res.data; project_name: "东苕溪防洪后续西险大塘达标加固工程（杭州市段）",
}); score: 85,
getScoreStatusByCity(this.currentCityId).then((res) => { score_count: 87,
this.zfjg_score = res.data.zfjg_score; project_num: 90,
this.zljc_score = res.data.zljc_score; },
this.score_count = res.data.score_count; {
}); 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) { // if (type == 1) {
...@@ -747,13 +1041,14 @@ export default { ...@@ -747,13 +1041,14 @@ export default {
color: ["#2f4ca3", "#8c2d2d"], color: ["#2f4ca3", "#8c2d2d"],
//区域颜色范范围 //区域颜色范范围
pieces: [ pieces: [
{ min: 0, max: 80 }, { min: 0, max: 79 },
{ min: 80, max: 100 }, { min: 80, max: 100 },
], ],
textStyle: { textStyle: {
color: "#eee", color: "#eee",
fontSize: 14, fontSize: 14,
}, },
show: false,
}, },
series: [ series: [
{ {
...@@ -898,6 +1193,22 @@ export default { ...@@ -898,6 +1193,22 @@ export default {
}); });
return myChart; 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() { mounted() {
...@@ -1092,4 +1403,7 @@ export default { ...@@ -1092,4 +1403,7 @@ export default {
transform: translateX(-50%) translateY(-50%); transform: translateX(-50%) translateY(-50%);
} }
} }
.show-more {
cursor: pointer;
}
</style> </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({ ...@@ -23,7 +23,7 @@ module.exports = defineConfig({
port: 3000, port: 3000,
proxy: { proxy: {
'/site': { '/site': {
target: 'http://192.168.0.185/', target: 'http://192.168.0.212/',
changeOrigin: true, changeOrigin: true,
// pathRewrite: { // pathRewrite: {
// '^/api': '' // '^/api': ''
......
Markdown is supported
0% or
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment