Skip to content

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

初始化提交

parents
Show whitespace changes
Inline Side-by-side
Showing with 4333 additions and 0 deletions
.env.development 0 → 100644
View file @ 00438664
NODE_ENV = "development"
Mock: true
VUE_APP_API_URL = "http://detectapi.cnjsjd.net"
VUE_APP_CIVIL_API_URL = ""
.env.production 0 → 100644
View file @ 00438664
NODE_ENV = "production"
Mock: false
VUE_APP_API_URL = "http://detectapi.cnjsjd.net"
VUE_APP_CIVIL_API_URL = "http://dhjc.vnet1000.net"
\ No newline at end of file
.eslintrc.js 0 → 100644
View file @ 00438664
module.exports = {
root: true,
env: {
node: true
},
'extends': [
'plugin:vue/essential',
'eslint:recommended'
],
parserOptions: {
parser: '@babel/eslint-parser'
},
rules: {
'no-console': process.env.NODE_ENV === 'production' ? 'warn' : 'off',
'no-debugger': process.env.NODE_ENV === 'production' ? 'warn' : 'off',
//在rules中添加自定义规则
//关闭组件命名规则
"vue/multi-word-component-names": "off",
},
overrides: [
{
files: [
'**/__tests__/*.{j,t}s?(x)',
'**/tests/unit/**/*.spec.{j,t}s?(x)'
],
env: {
jest: true
}
}
]
}
.gitignore 0 → 100644
View file @ 00438664
.DS_Store
node_modules
/dist
dist.zip
# local env files
.env.local
.env.*.local
# Log files
npm-debug.log*
yarn-debug.log*
yarn-error.log*
pnpm-debug.log*
# Editor directories and files
.idea
.vscode
*.suo
*.ntvs*
*.njsproj
*.sln
*.sw?
README.md 0 → 100644
View file @ 00438664
# digital-construction
## Project setup
```
npm install
```
### Compiles and hot-reloads for development
```
npm run serve
```
### Compiles and minifies for production
```
npm run build
```
### Lints and fixes files
```
npm run lint
```
### Customize configuration
See [Configuration Reference](https://cli.vuejs.org/config/).
babel.config.js 0 → 100644
View file @ 00438664
module.exports = {
presets: [
'@vue/cli-plugin-babel/preset'
]
}
jsconfig.json 0 → 100644
View file @ 00438664
{
"compilerOptions": {
"target": "es5",
"module": "esnext",
"baseUrl": "./",
"moduleResolution": "node",
"paths": {
"@/*": [
"src/*"
]
},
"lib": [
"esnext",
"dom",
"dom.iterable",
"scripthost"
]
}
}
package-lock.json 0 → 100644
View file @ 00438664
This source diff could not be displayed because it is too large. You can view the blob instead.
package.json 0 → 100644
View file @ 00438664
{
"name": "digital-construction",
"version": "0.1.0",
"private": true,
"scripts": {
"serve": "vue-cli-service serve",
"build": "vue-cli-service build",
"lint": "vue-cli-service lint"
},
"dependencies": {
"@amap/amap-jsapi-loader": "^1.0.1",
"autoprefixer": "^10.4.14",
"axios": "^1.3.4",
"core-js": "^3.8.3",
"echarts": "^5.4.2",
"element-ui": "^2.15.13",
"js-md5": "^0.8.3",
"lib-flexible": "^0.3.2",
"precss": "^4.0.0",
"video.js": "^8.0.4",
"videojs-contrib-hls": "^5.15.0",
"vue": "^2.6.14",
"vue-calendar-component": "^2.8.2",
"vue-router": "^3.5.2",
"vue-seamless-scroll": "^1.1.23",
"vue-video-player": "^5.0.1",
"vuex": "^3.6.2"
},
"postcss": {
"plugins": {
"autoprefixer": {},
"precss": {}
}
},
"devDependencies": {
"@babel/core": "^7.12.16",
"@babel/eslint-parser": "^7.12.16",
"@vue/cli-plugin-babel": "~5.0.0",
"@vue/cli-plugin-eslint": "~5.0.0",
"@vue/cli-service": "~5.0.0",
"eslint": "^7.32.0",
"eslint-plugin-vue": "^8.0.3",
"less": "^4.1.3",
"less-loader": "^11.1.0",
"postcss-plugin-px2rem": "^0.8.1",
"px2rem-loader": "^0.1.9",
"style-resources-loader": "^1.5.0",
"vue-cli-plugin-style-resources-loader": "^0.1.5",
"vue-template-compiler": "^2.6.14"
},
"eslintConfig": {
"root": true,
"env": {
"node": true
},
"extends": [
"plugin:vue/essential",
"eslint:recommended"
],
"parserOptions": {
"parser": "@babel/eslint-parser"
},
"rules": {}
},
"browserslist": [
"> 1%",
"last 2 versions",
"not dead"
]
}
public/index.html 0 → 100644
View file @ 00438664
<!DOCTYPE html>
<html lang="">
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width,initial-scale=1.0">
<title>
水利工程质量动态评估系统
</title>
<style>
.el-icon-loading {
font-size: 30px !important;
}
.el-loading-text {
font-size: 16px !important;
}
.amap-logo {
display: none !important;
}
.amap-copyright {
opacity: 0 !important;
}
.el-loading-mask {
z-index: 99999 !important;
}
</style>
</head>
<body style="height: 100vh;">
<noscript>
<strong>We're sorry but <%= htmlWebpackPlugin.options.title %> doesn't work properly without JavaScript enabled.
Please enable it to continue.</strong>
</noscript>
<div id="app"></div>
<!-- built files will be auto injected -->
</body>
</html>
\ No newline at end of file
src/App.vue 0 → 100644
View file @ 00438664
<template>
<div id="app">
<router-view></router-view>
</div>
</template>
<script>
const debounce = (fn, delay) => {
let timer = null;
return function () {
let context = this;
let args = arguments;
clearTimeout(timer);
timer = setTimeout(function () {
fn.apply(context, args);
}, delay);
};
};
const _ResizeObserver = window.ResizeObserver;
window.ResizeObserver = class ResizeObserver extends _ResizeObserver {
constructor(callback) {
callback = debounce(callback, 16);
super(callback);
}
};
import { getUserInfo } from "@/api/index";
export default {
name: "App",
components: {},
data() {
return {
signIn: false,
};
},
methods: {
bodyScale() {
// var deviceHeight = window.innerHeight;
// var scale = deviceHeight / 1080;
// document.body.style.zoom = scale;
// document.body.style.height = (1 / scale) * 100 + "vh";
// document.styleSheets[document.styleSheets.length - 1].insertRule(
// "canvas:not(.amap-layer):not(.amap-labels) {zoom: " +
// Number(1 / scale).toFixed(2) +
// "!important}"
// );
// document.styleSheets[document.styleSheets.length - 1].insertRule(
// "canvas:not(.amap-layer):not(.amap-labels) {transform: scale(" +
// scale +
// ")!important}"
// );
// document.styleSheets[document.styleSheets.length - 1].insertRule(
// "canvas:not(.amap-layer):not(.amap-labels) {transform-origin: 0 0}"
// );
var designW = 1920;
var font_rate = 100;
document.getElementsByTagName("html")[0].style.fontSize =
(document.body.offsetWidth / designW) * font_rate + "px";
document.getElementsByTagName("body")[0].style.fontSize =
(document.body.offsetWidth / designW) * font_rate + "px";
// //监测窗口大小变化
window.addEventListener(
"onorientationchange" in window ? "orientationchange" : "resize",
function () {
document.getElementsByTagName("html")[0].style.fontSize =
(document.body.offsetWidth / designW) * font_rate + "px";
document.getElementsByTagName("body")[0].style.fontSize =
(document.body.offsetWidth / designW) * font_rate + "px";
},
false
);
},
getUserInfo() {
// var op_id = "B0877928-60DF-4CE8-A18C-41954D48B183 ";
if (this.getcookie("op_id")) {
getUserInfo(this.getcookie("op_id")).then((res) => {
if (res.status == 200) {
this.$store.commit("changeUserInfo", res.data[0]);
}
});
}
// getUserInfo(op_id).then((res) => {
// if (res.status == 200) {
// this.$store.commit("changeUserInfo", res.data[0]);
// }
// });
},
getcookie(sname) {
var acookie = document.cookie.split("; ");
for (var i = 0; i < acookie.length; i++) {
var arr = acookie[i].split("=");
if (sname == arr[0]) {
if (arr.length > 1) return unescape(arr[1]);
else return "";
}
}
return "";
},
},
mounted() {
var isChrome = window.navigator.userAgent.indexOf("Chrome") !== -1;
if (isChrome) {
}
this.bodyScale();
this.getUserInfo();
},
watch: {
$route(to, from) {
window.location.reload();
},
},
};
</script>
<style>
* {
margin: 0;
padding: 0;
box-sizing: border-box;
}
body {
margin: 0px;
}
#app {
height: 100%;
}
/* 滚动条样式 */
*::-webkit-scrollbar {
width: 8px; /* 设置纵轴（y轴）轴滚动条 */
height: 4px; /* 设置横轴（x轴）轴滚动条 */
}
/* 滚动条滑块（里面小方块） */
*::-webkit-scrollbar-thumb {
border-radius: 10px;
box-shadow: inset 0 0 5px rgba(0, 0, 0, 0.2);
background: rgba(255, 255, 255, 0.3);
}
/* 滚动条轨道 */
*::-webkit-scrollbar-track {
border-radius: 0;
box-shadow: inset 0 0 5px rgba(0, 0, 0, 0.2);
background: rgba(0, 0, 0, 0.5);
}
</style>
src/api/dataStatis.js 0 → 100644
View file @ 00438664
import request from "@/utils/request"
// 地图数据
export async function getMapData(params) {
return await request({
url: '/site/index/mapcount',
method: 'get',
params
})
}
// 本年问题分析
export async function getYearQuestion(params) {
return await request({
url: '/site/index/yearQuestion',
method: 'get',
params
})
}
// 本年问题等级分析
export async function getLevelQuestion(params) {
return await request({
url: '/site/index/levelQuestion',
method: 'get',
params
})
}
// 本年问题处理分析
export async function getStatusQuestion(params) {
return await request({
url: '/site/index/statusQuestion',
method: 'get',
params
})
}
// 工程问题情况
export async function getProjectQuestion(params) {
return await request({
url: '/site/index/projectQuestion',
method: 'get',
params
})
}
// 区域问题列表
export async function getAreaQuestionByAreaId(areaId) {
return await request({
url: `/site/index/type`,
method: 'get',
params: {
city_id: areaId
}
})
}
// 区域问题列表
export async function getScoreByCity(areaId) {
return await request({
url: `/site/index/type`,
method: 'get',
params: {
city_id: areaId
}
})
}
src/api/index.js 0 → 100644
View file @ 00438664
import request from "@/utils/request"
// import noLoadingrequest from "@/utils/noloadingRequest"
// const getLocationParams = (keyWords) => {
// // 提取路由值（字符串）
// let href = window.location.href;
// // 从占位符开始截取路由（不包括占位符）
// let query = href.substring(href.indexOf("?") + 1);
// // 根据 & 切割字符串
// let vars = query.split("&");
// for (let i = 0; i < vars.length; i++) {
// let pair = vars[i].split("=");
// // 根据指定的参数名去筛选参数值
// if (pair[0] == keyWords) {
// return pair[1];
// }
// }
// return "";
// };
export async function getAccess(data) {
return await request({
url: '/api/access',
method: 'post',
data
})
}
//获取登录信息
export async function getUserInfo(userId) {
return await request({
url: `/api/screen/logininfo/${userId}`,
method: 'get'
})
}
src/assets/Dialog/element.less 0 → 100644
View file @ 00438664
::v-deep .el-dialog__body {
padding: 15px !important;
height: 700px;
}
::v-deep .el-form {
margin-bottom: 10px;
background: #12407F;
padding: 5px 5px 0 5px;
}
::v-deep .el-form-item {
margin-bottom: 5px;
}
::v-deep .el-form-item__content {
line-height: 0;
}
::v-deep .el-form-item__label {
line-height: 30px;
height: 30px;
color: #60FFF6;
}
::v-deep .el-input .el-input__inner {
background: #072350 !important;
border: none !important;
height: 30px !important;
font-size: 14px;
color: rgba(255, 255, 255, 0.7);
}
.inputInfo {
width: 120px;
}
.selectInfo {
width: 150px;
}
::v-deep .el-range-editor.el-input__inner {
height: 30px !important;
background: #072350 !important;
border: none !important;
font-size: 14px;
color: rgba(255, 255, 255, 0.7);
}
::v-deep .el-range-editor .el-range-input {
font-size: 14px;
color: rgba(255, 255, 255, 0.7);
}
::v-deep .el-date-editor .el-range__icon {
line-height: 37px;
}
::v-deep .el-range-editor .el-range-separator {
line-height: 26px;
}
.searchButton {
height: 30px !important;
padding: 0 10px;
background: #37CCC4;
}
/* 表格头部样式 背景颜色 */
::v-deep .el-table th.el-table__cell {
background: #16488b;
color: #01fff5;
font-size: 14px;
}
/* 表格身体背景颜色 */
::v-deep .el-table__body-wrapper {
background-color: #0c3163;
}
::v-deep .el-table tr:nth-child(even) {
background: #0e356b;
}
::v-deep .el-table tr:nth-child(odd) {
background: #0c3163;
}
/* 表格列和行的间距 */
.el-table .el-table__cell {
padding: 7px 0;
}
/* 表格外部 top 和 left 线条 */
::v-deep .el-table--border,
::v-deep .el-table--group {
border-color: #1f4c89;
}
/* 表格外部 right 和 bottom 线条 */
::v-deep .el-table--border::after,
::v-deep .el-table--group::after,
::v-deep .el-table::before {
background-color: #1f4c89;
}
/* 表格头部内部线条 */
::v-deep .el-table th.el-table__cell.is-leaf {
border: 1px solid #1f4c89 !important;
padding: 8px 0;
text-align: center;
}
/* 表格内部样式 线条 */
::v-deep .el-table td.el-table__cell {
border-bottom: 1px solid #1f4c89;
border-right: 1px solid #1f4c89;
color: #ffffff;
font-size: 12px;
}
.pagination {
height: 40px;
background: #0c3163;
border: 1px solid #1f4c89;
display: flex;
align-items: center;
justify-content: end;
}
\ No newline at end of file
src/assets/common/common.less 0 → 100644
View file @ 00438664
@font-face {
font-family: 'kufangti';
src: url('./kufangti.ttf');
}
.amap-info-content {
background: #0f2e68;
border: 1px solid #05B9FD;
padding: 0;
}
.amap-info-close {
color: #fff;
}
.amap-info-sharp {
border: none !important;
}
.amap-info-outer {
border-radius: 8px;
}
\ No newline at end of file
src/assets/common/element.less 0 → 100644
View file @ 00438664
.el-date-editor {
vertical-align: top;
.el-input__inner {
background: #07196e !important;
border: 2px solid #0f57ba !important;
color: #fff !important;
}
.el-input__prefix {
color: #fff !important;
}
}
.el-input {
.el-input__inner {
background: #07196e !important;
border: 2px solid #0f57ba !important;
color: #fff !important;
}
}
.el-range-editor {
line-height: 32px;
&.el-input__inner {
background: #07196e !important;
border: 2px solid #0f57ba !important;
color: #fff !important;
}
.el-range-input {
background: transparent;
color: #fff;
}
.el-range-separator {
color: #fff;
}
.el-input__icon {
color: #fff;
}
}
.el-select {
.el-input__inner {
background: #07196e !important;
border: 2px solid #0f57ba !important;
color: #fff !important;
}
}
.el-dropdown-menu {
background: rgba(8, 34, 68, 0.9);
border: 1px solid #3CD4D4;
}
.el-popper[x-placement^=top] .popper__arrow::after {
border-top-color: rgba(8, 34, 68, 0.9);
}
.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-dropdown-menu__item:last-of-type {
border-bottom: none;
}
}
.el-textarea__inner {
background: #1E499B;
}
.el-dialog__body {
background: #063572;
}
.el-dialog__header {
text-align: center;
padding: 16px 0;
height: 30px;
background: #063B80;
position: relative;
.el-dialog__title {
color: #fff;
z-index: 999;
position: absolute;
left: 50%;
top: 50%;
transform: translateX(-50%)translateY(-50%);
}
&::after {
content: '';
position: absolute;
top: 0;
left: 50%;
width: 100%;
height: 100%;
// background: url('@/assets/images/dialog-title-bg.png') no-repeat;
background-size: 100% 100%;
transform: translateX(-50%);
z-index: 0;
}
.el-dialog__headerbtn {
z-index: 999
}
}
.el-dialog {
border: 1px solid #107DE5;
border-radius: 10px;
overflow: hidden;
}
.el-form-item__label {
color: #fff;
padding-bottom: 0 !important;
}
.el-dialog__body {
padding: 16px 40px;
}
.el-dialog__close {
font-size: 20px;
color: #fff !important;
}
.el-table {
background: #113883 !important;
thead {
tr,
th {
background: #1D489B !important;
color: #fff;
}
}
}
.el-table tr {
background: rgba(17, 56, 131, 0.5);
color: #fff;
}
.el-table--striped .el-table__body tr.el-table__row--striped td.el-table__cell {
background: #063572 !important;
}
.el-table--enable-row-hover .el-table__body tr:hover>td.el-table__cell {
background: #063572 !important;
}
.el-table--border::after,
.el-table--group::after,
.el-table::before {
background-color: transparent !important;
}
.el-table td.el-table__cell,
.el-table th.el-table__cell.is-leaf {
border: none;
}
.el-pagination {
color: #fff;
text-align: right;
padding: 12px;
.el-pagination__total,
.el-pagination__jump {
color: #fff !important;
}
button {
background-color: transparent !important;
}
.el-pager li {
background-color: transparent !important;
}
.el-pager li.btn-quicknext,
.el-pager li.btn-quickprev {
color: #fff;
}
.btn-next,
.btn-prev {
color: #fff;
}
}
\ No newline at end of file
src/assets/data/mapData.json 0 → 100644
View file @ 00438664
[
{
"name": "杭州市",
"value": [
120.155070,
30.274085
]
},
{
"name": "宁波市",
"value": [
121.549792,
29.868388
]
},
{
"name": "温州市",
"value": [
120.699366,
27.994267
]
},
{
"name": "嘉兴市",
"value": [
120.755486,
30.746129
]
},
{
"name": "湖州市",
"value": [
120.102398,
30.867198
]
},
{
"name": "绍兴市",
"value": [
120.582112,
29.997117
]
},
{
"name": "金华市",
"value": [
119.649506,
29.089524
]
},
{
"name": "衢州市",
"value": [
118.872630,
28.941708
]
},
{
"name": "舟山市",
"value": [
122.106863,
30.016028
]
},
{
"name": "台州市",
"value": [
121.428599,
28.661378
]
},
{
"name": "丽水市",
"value": [
119.921786,
28.451993
]
}
]
\ No newline at end of file
src/assets/data/zhejiang.js 0 → 100644
View file @ 00438664
This source diff could not be displayed because it is too large. You can view the blob instead.
src/assets/iconfont/iconfont.css 0 → 100644
View file @ 00438664
@font-face {
font-family: "iconfont"; /* Project id 4406516 */
src: url('iconfont.woff2?t=1706752068577') format('woff2'),
url('iconfont.woff?t=1706752068577') format('woff'),
url('iconfont.ttf?t=1706752068577') format('truetype');
}
.iconfont {
font-family: "iconfont" !important;
font-size: 16px;
font-style: normal;
-webkit-font-smoothing: antialiased;
-moz-osx-font-smoothing: grayscale;
}
.icon-gangjin-01:before {
content: "\e62f";
}
.icon-DY-yewuchuli:before {
content: "\ea5a";
}
.icon-dingwei:before {
content: "\e602";
}
.icon-jiankong1:before {
content: "\e629";
}
.icon-rili:before {
content: "\e635";
}
.icon-sousuo:before {
content: "\e65a";
}
.icon-you-2-2:before {
content: "\ea37";
}
.icon-you-22:before {
content: "\ea38";
}
.icon-you-23:before {
content: "\ea39";
}
.icon-guanbi-17-2-2:before {
content: "\ea3a";
}
.icon-xia:before {
content: "\ea3b";
}
.icon-huifang:before {
content: "\e6ee";
}
.icon-bofang:before {
content: "\e610";
}
.icon-jiankong:before {
content: "\e6c4";
}
.icon-a-danjucaozuobaocuncaogao:before {
content: "\e613";
}
src/assets/iconfont/iconfont.js 0 → 100644
View file @ 00438664
window._iconfont_svg_string_4406516='<svg><symbol id="icon-gangjin-01" viewBox="0 0 1024 1024"><path d="M647.314286 205.714286c-21.394286 0-41.325714 8.045714-57.6 23.04l-3.84 3.291428c22.857143 4.937143 45.714286 14.628571 65.828571 28.708572 27.794286 19.382857 48.274286 43.337143 60.525714 69.485714l0.731429-0.548571c6.034286-5.851429 10.788571-10.24 13.714286-13.165715l-0.548572 0.548572 1.097143-3.657143c1.828571-6.217143 2.925714-12.434286 3.291429-19.017143l0.182857-4.937143c0-46.262857-37.302857-83.748571-83.382857-83.748571z m-21.76 92.525714c-27.245714-19.017143-61.44-27.062857-88.137143-23.954286l-40.228572 34.925715c25.782857 4.388571 51.382857 13.714286 72.96 27.977142 28.342857 18.651429 48.457143 42.971429 60.708572 68.754286 9.508571-8.777143 18.285714-16.822857 26.514286-24.32 6.948571-6.4 13.348571-12.251429 19.2-17.737143-7.497143-24.137143-24.502857-46.994286-51.017143-65.645714z m-80.822857 76.982857c-28.342857-18.651429-67.291429-25.965714-97.645715-22.674286l-28.708571 24.868572c55.771429 16.822857 98.56 64.182857 108.8 122.697143 24.685714-22.491429 47.177143-42.971429 67.291428-61.44-7.314286-22.857143-23.588571-46.262857-49.737142-63.451429z m230.582857 37.485714c-21.394286 0-41.325714 8.045714-57.6 23.04l-3.84 3.291429c22.857143 4.937143 45.714286 14.628571 65.828571 28.708571 27.794286 19.382857 48.274286 43.337143 60.525714 69.485715l0.731429-0.548572c5.302857-4.937143 9.325714-8.96 12.434286-11.885714l0.731428-0.731429 1.097143-3.657142c1.828571-6.217143 2.925714-12.434286 3.291429-19.017143l0.182857-4.937143c0-46.262857-37.302857-83.748571-83.382857-83.748572z m-402.285715 31.085715c-46.08 0-83.382857 37.485714-83.382857 83.748571s37.302857 83.748571 83.382857 83.748572c19.2 0 36.754286-6.4 50.834286-17.371429l7.497143-6.4c15.542857-15.177143 25.234286-36.388571 25.234286-59.977143-0.182857-46.262857-37.485714-83.748571-83.565715-83.748571z m380.525715 61.44c-27.245714-19.017143-61.44-27.062857-88.137143-23.954286l-40.228572 34.925714c25.782857 4.388571 51.382857 13.714286 72.96 27.977143 28.342857 18.651429 48.457143 42.971429 60.708572 68.754286 9.508571-8.777143 18.285714-16.822857 26.514286-24.32 6.948571-6.4 13.348571-12.251429 19.2-17.737143-7.497143-24.137143-24.502857-46.994286-51.017143-65.645714z m-80.822857 76.982857c-28.342857-18.651429-67.291429-25.965714-97.645715-22.674286l-28.708571 24.868572c55.771429 16.822857 98.56 64.182857 108.8 122.697142 24.685714-22.491429 47.177143-42.788571 67.291428-61.257142-7.314286-23.04-23.588571-46.445714-49.737142-63.634286zM248.685714 650.971429c-46.08 0-83.382857 37.485714-83.382857 83.748571 0 46.262857 37.302857 83.748571 83.382857 83.748571s83.382857-37.485714 83.382857-83.748571a83.309714 83.309714 0 0 0-83.382857-83.748571z m252.342857 0c-46.08 0-83.382857 37.485714-83.382857 83.748571 0 46.262857 37.302857 83.748571 83.382857 83.748571s83.382857-37.485714 83.382858-83.748571c0-46.445714-37.302857-83.748571-83.382858-83.748571z m146.285715-518.4c86.491429 0 156.525714 70.217143 156.525714 156.891428 0 17.737143-2.925714 35.108571-8.594286 51.565714 76.982857 9.691429 136.594286 75.702857 136.594286 155.611429 0 21.394286-4.388571 42.24-12.617143 61.622857-1.462857 3.474286-6.4 9.508571-18.102857 21.211429l-4.022857 4.022857c-32.548571 32.365714-109.531429 102.4-284.708572 261.302857a155.757714 155.757714 0 0 1-111.542857 46.811429c-51.748571 0-97.645714-25.051429-126.171428-63.817143a156.251429 156.251429 0 0 1-126.171429 63.817143c-86.491429 0-156.525714-70.217143-156.525714-156.891429 0-78.628571 57.782857-143.725714 133.12-155.062857-5.668571-16.274286-8.777143-33.828571-8.777143-51.931429a156.16 156.16 0 0 1 51.382857-116.114285L540.891429 174.445714a155.794286 155.794286 0 0 1 106.422857-41.874285z" fill="#606060" ></path></symbol><symbol id="icon-DY-yewuchuli" viewBox="0 0 1024 1024"><path d="M545.883 309.033c13.474 0 24.397 13.108 24.397 29.276 0 14.372-8.63 26.326-20.012 28.804l-4.385 0.472H301.914c-13.474 0-24.397-13.108-24.397-29.276 0-14.372 8.63-26.326 20.012-28.804l4.385-0.472h243.969z m0 117.105c13.474 0 24.397 13.107 24.397 29.276 0 14.372-8.63 26.326-20.012 28.805l-4.385 0.472H301.914c-13.474 0-24.397-13.107-24.397-29.276 0-14.372 8.63-26.326 20.012-28.805l4.385-0.472h243.969z m282.029-199.079L722.517 227v398.216h105.336l0.059-398.157z m-175.658-58.553h-456.71v456.711l214.759 0.019a35.134 35.134 0 0 1 27.401 13.146l3.004 4.388c14.578 25.19 41.403 40.999 71.021 40.999 29.617 0 56.443-15.809 71.021-40.999a35.135 35.135 0 0 1 25.102-17.132l5.302-0.402 39.101-0.019V168.506z m234.211 526.916l-254.821 0.059c-24.107 30.88-59.176 51.423-98.248 57.014l-10.75 1.151-10.917 0.388c-43.961 0-84.669-18.809-113.122-50.394l-6.853-8.159-254.763-0.059v164.006h749.474V695.422zM687.386 98.243c17.462 0 31.949 12.74 34.672 29.433l0.46 5.698v23.363l140.526 0.059c17.462 0 31.949 12.74 34.672 29.433l0.46 5.698-0.059 433.289h23.477c17.463 0 31.951 12.74 34.674 29.433l0.46 5.699v234.211c0 17.462-12.74 31.949-29.433 34.672l-5.698 0.46H101.859c-17.462 0-31.949-12.74-34.672-29.433l-0.46-5.699V660.348c0-17.463 12.742-31.949 29.435-34.672l5.699-0.46h23.419V133.375c0-17.462 12.74-31.949 29.433-34.672l5.699-0.46h526.974z" ></path></symbol><symbol id="icon-dingwei" viewBox="0 0 1024 1024"><path d="M511.999 959.753S176.185 585.513 176.185 400.06c0-185.448 150.362-335.815 335.814-335.815 185.456 0 335.816 150.368 335.816 335.815C847.815 585.512 512 959.753 512 959.753z m0-686.495c-70.027 0-126.805 56.779-126.805 126.805 0 70.03 56.778 126.807 126.805 126.807 70.029 0 126.806-56.777 126.806-126.807 0-70.026-56.777-126.805-126.806-126.805z" fill="" ></path></symbol><symbol id="icon-jiankong1" viewBox="0 0 1024 1024"><path d="M637.44 816.64C716.8 846.08 766.72 898.56 766.72 960H247.04c0-61.44 53.76-115.2 135.68-143.36C232.96 762.88 125.44 619.52 125.44 450.56 125.44 235.52 296.96 64 512 64s386.56 171.52 386.56 386.56c0 168.96-107.52 312.32-261.12 366.08zM519.68 332.8c-111.36 0-204.8 93.44-204.8 204.8s93.44 204.8 204.8 204.8c115.2 0 204.8-93.44 204.8-204.8s-90.88-204.8-204.8-204.8z m0 314.88c-53.76 0-99.84-43.52-99.84-99.84 0-53.76 46.08-99.84 99.84-99.84s99.84 43.52 99.84 99.84c0 53.76-43.52 99.84-99.84 99.84z" fill="#515151" ></path></symbol><symbol id="icon-rili" viewBox="0 0 1024 1024"><path d="M256 550.4h512c20.48 0 38.4-17.92 38.4-38.4s-17.92-38.4-38.4-38.4H256c-20.48 0-38.4 17.92-38.4 38.4s17.92 38.4 38.4 38.4zM256 729.6h512c20.48 0 38.4-17.92 38.4-38.4s-17.92-38.4-38.4-38.4H256c-20.48 0-38.4 17.92-38.4 38.4s17.92 38.4 38.4 38.4zM358.4 128h307.2v76.8H358.4z" fill="" ></path><path d="M896 128h-76.8v76.8h76.8v691.2H128V204.8h76.8V128H128C84.48 128 51.2 161.28 51.2 204.8v691.2c0 43.52 33.28 76.8 76.8 76.8h768c43.52 0 76.8-33.28 76.8-76.8V204.8c0-43.52-33.28-76.8-76.8-76.8z" fill="" ></path><path d="M281.6 294.4c20.48 0 38.4-17.92 38.4-38.4V76.8c0-20.48-17.92-38.4-38.4-38.4S243.2 56.32 243.2 76.8v179.2c0 20.48 17.92 38.4 38.4 38.4zM742.4 294.4c20.48 0 38.4-17.92 38.4-38.4V76.8c0-20.48-17.92-38.4-38.4-38.4s-38.4 17.92-38.4 38.4v179.2c0 20.48 17.92 38.4 38.4 38.4z" fill="" ></path></symbol><symbol id="icon-sousuo" viewBox="0 0 1024 1024"><path d="M926.72 870.4L768 714.666667a375.04 375.04 0 0 0-19.626667-517.973334 394.24 394.24 0 0 0-549.12 0 375.04 375.04 0 0 0 0 538.453334A395.093333 395.093333 0 0 0 708.266667 768l160.426666 157.44A42.666667 42.666667 0 0 0 896 938.666667a42.666667 42.666667 0 0 0 29.013333-11.52 40.106667 40.106667 0 0 0 1.706667-56.746667z m-759.466667-404.48a303.786667 303.786667 0 0 1 306.773334-298.666667 303.786667 303.786667 0 0 1 306.346666 298.666667 303.786667 303.786667 0 0 1-306.346666 298.666667 303.786667 303.786667 0 0 1-306.773334-298.666667z" fill="#666666" ></path></symbol><symbol id="icon-you-2-2" viewBox="0 0 1024 1024"><path d="M628 512L278.4 162.4c-20.8-21.6-20.8-56.8 1.6-77.6 21.6-20.8 55.2-20.8 76 0l385.6 385.6c23.2 20 25.6 54.4 5.6 77.6l-2.4 2.4-388 388c-21.6 20.8-56.8 20.8-77.6-1.6-20.8-21.6-20.8-55.2 0-76L628 512z" ></path></symbol><symbol id="icon-you-22" viewBox="0 0 1024 1024"><path d="M396 512l349.6 349.6c20.8 21.6 20.8 56.8-1.6 77.6-21.6 20.8-55.2 20.8-76 0L282.4 553.6c-23.2-20-25.6-54.4-5.6-77.6l2.4-2.4 388-388c21.6-20.8 56.8-20.8 77.6 1.6 20.8 21.6 20.8 55.2 0 76L396 512z" ></path></symbol><symbol id="icon-you-23" viewBox="0 0 1024 1024"><path d="M512 396L162.4 745.6c-21.6 20.8-56.8 20.8-77.6-1.6-20.8-21.6-20.8-55.2 0-76l385.6-385.6c20-23.2 54.4-25.6 77.6-5.6l2.4 2.4 388 388c20.8 21.6 20.8 56.8-1.6 77.6-21.6 20.8-55.2 20.8-76 0L512 396z" ></path></symbol><symbol id="icon-guanbi-17-2-2" viewBox="0 0 1025 1024"><path d="M1000.669 911.989l-399.31-399.31 399.31-397.71c27.153-23.16 31.146-63.89 7.986-91.842-23.16-27.153-63.89-31.146-91.841-7.986-2.396 2.396-5.59 4.792-7.987 7.986l-399.309 399.31L110.21 22.327C83.855-0.032 42.327 3.96 19.965 31.912 0.8 55.87 0.8 90.21 19.965 114.169l397.712 399.31L18.368 912.788c-23.958 26.354-22.361 67.882 3.993 91.84 24.757 22.362 63.091 22.362 87.848 0L509.52 605.32l399.308 399.309c24.758 25.555 64.689 25.555 90.244 1.597l1.598-1.597c24.757-26.355 24.757-67.084 0-92.64z" ></path></symbol><symbol id="icon-xia" viewBox="0 0 1024 1024"><path d="M511.2 628l349.6-349.6c21.6-20.8 56.8-20.8 77.6 1.6 20.8 21.6 20.8 55.2 0 76L552.8 741.6c-20 23.2-54.4 25.6-77.6 5.6l-2.4-2.4-388-388c-20.8-21.6-20.8-56.8 1.6-77.6 21.6-20.8 55.2-20.8 76 0l348.8 348.8z" ></path></symbol><symbol id="icon-huifang" viewBox="0 0 1033 1024"><path d="M716.8 69.632c4.096-8.192 0-20.48-4.096-28.672-20.48-8.192-40.96-12.288-61.44-20.48-8.192 4.096-16.384 12.288-20.48 24.576L593.92 180.224c28.672 8.192 53.248 16.384 77.824 32.768l45.056-143.36z m135.168 405.504l163.84-45.056c-4.096-28.672-12.288-57.344-20.48-81.92l-163.84 45.056c12.288 24.576 16.384 53.248 20.48 81.92z m65.536-266.24s0-4.096 4.096-8.192c-16.384-20.48-32.768-40.96-49.152-57.344-4.096 0-8.192 0-12.288 4.096l-114.688 114.688c20.48 20.48 40.96 40.96 57.344 65.536l114.688-118.784z m-73.728 389.12c-36.864 147.456-172.032 258.048-331.776 258.048-188.416 0-339.968-151.552-339.968-339.968S323.584 176.128 512 176.128V0C229.376 0 0 229.376 0 512s229.376 512 512 512c253.952 0 462.848-184.32 503.808-425.984h-172.032zM430.08 684.032l258.048-172.032L430.08 339.968v344.064z" ></path></symbol><symbol id="icon-bofang" viewBox="0 0 1024 1024"><path d="M512.1 63.9c-247.4 0-447.9 200.5-447.9 447.9 0 247.4 200.5 447.9 447.9 447.9S960 759.2 960 511.8c0.1-247.4-200.5-447.9-447.9-447.9z m210.5 480.2L413.7 722.4c-24.9 14.4-56-3.6-56-32.3V333.5c0-28.7 31.1-46.7 56-32.3l308.8 178.3c24.9 14.3 24.9 50.3 0.1 64.6z" ></path></symbol><symbol id="icon-jiankong" viewBox="0 0 1024 1024"><path d="M713.194667 659.093333c0.96 1.429333 1.813333 2.944 2.602666 4.48L757.333333 746.666667a73.706667 73.706667 0 0 1-65.92 106.666666H332.586667a73.706667 73.706667 0 0 1-65.92-106.666666l41.536-83.072c0.789333-1.557333 1.642667-3.072 2.602666-4.48A276.245333 276.245333 0 0 0 490.666667 725.333333h42.666666c68.629333 0 131.434667-24.938667 179.861334-66.24zM512 170.666667c141.376 0 256 114.624 256 256s-114.624 256-256 256-256-114.624-256-256S370.624 170.666667 512 170.666667z m0 405.333333a106.666667 106.666667 0 1 0 0-213.333333 106.666667 106.666667 0 0 0 0 213.333333z m2.261333-64a42.666667 42.666667 0 1 1 0-85.333333 42.666667 42.666667 0 0 1 0 85.333333z" fill="#2A2A37" ></path></symbol><symbol id="icon-a-danjucaozuobaocuncaogao" viewBox="0 0 1024 1024"><path d="M951.84 898.84H525.55l368.2-247.11a70 70 0 0 0 19.11-97.13L600.34 88.94a70 70 0 0 0-18.17-18.47 32.64 32.64 0 0 0-21.08-10.88l-11.3-1.23-60.66-6.58-98.73-10.71a33 33 0 0 0-21.9 5.46 69.88 69.88 0 0 0-13.83 7.18L53.15 256.07A70 70 0 0 0 34 353.21l366.1 545.5 0.1 0.14H144.88a30 30 0 0 0 0 60h807a30 30 0 0 0 0-60zM491.62 112.4l-50.72 43-15.66-50.2z m-35.29 757.1a10 10 0 0 1-6.37-4.24L83.86 319.77a10 10 0 0 1 2.73-13.88l279.82-187.8 29.06 93.1a32.55 32.55 0 0 0 19.31 21.9 32.61 32.61 0 0 0 31.64-3.83l0.91-0.67 111.21-94.26L863 588a10 10 0 0 1-2.73 13.88L463.84 868a10 10 0 0 1-7.51 1.5z" fill="#000000" ></path><path d="M533.4 235.07a30 30 0 0 0-41.66-8L216.43 413.41a30 30 0 1 0 33.63 49.69l275.32-186.37a30 30 0 0 0 8.02-41.66zM618.22 368.25a30 30 0 0 0-41.66-8L301.25 546.59a30 30 0 0 0 33.63 49.69L610.2 409.91a30 30 0 0 0 8.02-41.66zM669.2 499.28L393.89 685.65a30 30 0 0 0 33.63 49.69L702.83 549a30 30 0 1 0-33.63-49.69z" fill="#000000" ></path></symbol></svg>',function(t){var c=(c=document.getElementsByTagName("script"))[c.length-1],l=c.getAttribute("data-injectcss"),c=c.getAttribute("data-disable-injectsvg");if(!c){var o,i,e,a,n,s=function(c,l){l.parentNode.insertBefore(c,l)};if(l&&!t.__iconfont__svg__cssinject__){t.__iconfont__svg__cssinject__=!0;try{document.write("<style>.svgfont {display: inline-block;width: 1em;height: 1em;fill: currentColor;vertical-align: -0.1em;font-size:16px;}</style>")}catch(c){console&&console.log(c)}}o=function(){var c,l=document.createElement("div");l.innerHTML=t._iconfont_svg_string_4406516,(l=l.getElementsByTagName("svg")[0])&&(l.setAttribute("aria-hidden","true"),l.style.position="absolute",l.style.width=0,l.style.height=0,l.style.overflow="hidden",l=l,(c=document.body).firstChild?s(l,c.firstChild):c.appendChild(l))},document.addEventListener?~["complete","loaded","interactive"].indexOf(document.readyState)?setTimeout(o,0):(i=function(){document.removeEventListener("DOMContentLoaded",i,!1),o()},document.addEventListener("DOMContentLoaded",i,!1)):document.attachEvent&&(e=o,a=t.document,n=!1,m(),a.onreadystatechange=function(){"complete"==a.readyState&&(a.onreadystatechange=null,d())})}function d(){n||(n=!0,e())}function m(){try{a.documentElement.doScroll("left")}catch(c){return void setTimeout(m,50)}d()}}(window);
\ No newline at end of file
src/assets/iconfont/iconfont.json 0 → 100644
View file @ 00438664
{
"id": "4406516",
"name": "大合可视化",
"font_family": "iconfont",
"css_prefix_text": "icon-",
"description": "",
"glyphs": [
{
"icon_id": "34330311",
"name": "钢筋-01",
"font_class": "gangjin-01",
"unicode": "e62f",
"unicode_decimal": 58927
},
{
"icon_id": "39123779",
"name": "wenj",
"font_class": "DY-yewuchuli",
"unicode": "ea5a",
"unicode_decimal": 59994
},
{
"icon_id": "2075245",
"name": "定位",
"font_class": "dingwei",
"unicode": "e602",
"unicode_decimal": 58882
},
{
"icon_id": "15631425",
"name": "监控",
"font_class": "jiankong1",
"unicode": "e629",
"unicode_decimal": 58921
},
{
"icon_id": "1848839",
"name": "日历",
"font_class": "rili",
"unicode": "e635",
"unicode_decimal": 58933
},
{
"icon_id": "4320352",
"name": "搜索",
"font_class": "sousuo",
"unicode": "e65a",
"unicode_decimal": 58970
},
{
"icon_id": "38641193",
"name": "右",
"font_class": "you-2-2",
"unicode": "ea37",
"unicode_decimal": 59959
},
{
"icon_id": "38641195",
"name": "左",
"font_class": "you-22",
"unicode": "ea38",
"unicode_decimal": 59960
},
{
"icon_id": "38641198",
"name": "上",
"font_class": "you-23",
"unicode": "ea39",
"unicode_decimal": 59961
},
{
"icon_id": "38641248",
"name": "关闭",
"font_class": "guanbi-17-2-2",
"unicode": "ea3a",
"unicode_decimal": 59962
},
{
"icon_id": "38641282",
"name": "下",
"font_class": "xia",
"unicode": "ea3b",
"unicode_decimal": 59963
},
{
"icon_id": "6851967",
"name": "回放",
"font_class": "huifang",
"unicode": "e6ee",
"unicode_decimal": 59118
},
{
"icon_id": "9851587",
"name": "播放",
"font_class": "bofang",
"unicode": "e610",
"unicode_decimal": 58896
},
{
"icon_id": "15686544",
"name": "监控",
"font_class": "jiankong",
"unicode": "e6c4",
"unicode_decimal": 59076
},
{
"icon_id": "37238421",
"name": "保存草稿",
"font_class": "a-danjucaozuobaocuncaogao",
"unicode": "e613",
"unicode_decimal": 58899
}
]
}
src/assets/images/index/grade-bg.png 0 → 100644
View file @ 00438664
This image diff could not be displayed because it is too large. You can view the blob instead.
src/components/Header.vue 0 → 100644
View file @ 00438664
<template>
<div class="nav-header">
<div class="nav-bg"></div>
<div class="left-nav">
<span>{{ date }} {{ weekDay }} {{ time }}</span>
</div>
<div class="mid-title">
<span>水利工程质量动态评估系统</span>
</div>
<div class="right-nav">
<!-- <img :src="userInfo.op_avatar" alt="" />
{{ userInfo.op_name }} -->
</div>
</div>
</template>
<script>
import { mapState } from "vuex";
export default {
data() {
return {
date: "",
weekDay: "",
time: "",
};
},
methods: {
getTime() {
let date = new Date();
let year = date.getFullYear();
let month = date.getMonth() + 1;
let day = date.getDate();
month = month > 9 ? month : "0" + month;
day = day < 10 ? "0" + day : day;
let today = year + "-" + month + "-" + day;
this.date = today;
let hour = date.getHours() < 10 ? "0" + date.getHours() : date.getHours();
let min =
date.getMinutes() < 10 ? "0" + date.getMinutes() : date.getMinutes();
let sec =
date.getSeconds() < 10 ? "0" + date.getSeconds() : date.getSeconds();
this.time = `${hour}:${min}:${sec}`;
let str = "星期";
let weekDay = new Date().getDay();
switch (weekDay) {
case 0:
str += "日";
break;
case 1:
str += "一";
break;
case 2:
str += "二";
break;
case 3:
str += "三";
break;
case 4:
str += "四";
break;
case 5:
str += "五";
break;
case 6:
str += "六";
break;
}
this.weekDay = str;
},
},
mounted() {
setInterval(() => {
this.getTime();
}, 1000);
},
computed: {
...mapState(["userInfo"]),
},
};
</script>
<style lang="less" scoped>
.nav-header {
display: flex;
align-content: center;
line-height: 80px;
padding: 0 30px;
height: 130px;
margin: 0px;
background: url("@/assets/images/index/img_bjh@2x.png");
background-repeat: no-repeat;
background-size: 100% 100%;
position: relative;
.nav-bg {
position: absolute;
left: 0;
top: 0;
width: 100%;
height: 80px;
background: url("@/assets/images/index/img_dingbu@2x.png");
background-repeat: no-repeat;
background-size: 100% 100%;
}
.left-nav {
width: calc(100% / 3);
display: flex;
justify-content: flex-start;
span {
color: #fff;
font-size: 18px;
}
.weather-img {
vertical-align: top;
width: 30px;
height: 30px;
margin: 24px 0;
margin-right: 30px;
}
}
.mid-title {
width: calc(100% / 3);
font-size: 32px;
color: #fefeff;
text-align: center;
letter-spacing: 3px;
line-height: 60px;
position: relative;
span {
position: absolute;
left: 0;
width: 100%;
height: 100%;
font-weight: bold;
white-space: nowrap;
background-clip: text;
-webkit-text-fill-color: transparent;
background-image: linear-gradient(to bottom, #ffffff, #a4c7e8);
z-index: 999;
}
}
.right-nav {
width: calc(100% / 3);
text-align: right;
font-size: 16px;
color: #fff;
img {
width: 26px;
height: 26px;
vertical-align: top;
border-radius: 50%;
margin-right: 10px;
margin-top: 26px;
object-fit: cover;
}
}
}
</style>
\ No newline at end of file
src/components/Index.vue 0 → 100644
View file @ 00438664
<template>
<div id="index" style="height: 100%">
<Header></Header>
<div class="route-container">
<router-view></router-view>
</div>
</div>
</template>
<script>
import Header from "./Header";
export default {
name: "Index",
components: { Header },
data() {
return {
time: "",
weekDay: "",
date: "",
zoom: 1,
screenDetail: {},
leftNav: [],
rightNav: [],
childRouteName: "",
totalMenu: [],
};
},
methods: {},
computed: {
token() {
return localStorage.getItem("token");
},
},
mounted() {},
};
</script>
<style scoped lang="less">
#index {
background: url("@/assets/images/background.png") no-repeat;
background-size: 100% 100%;
background-attachment: fixed;
}
.route-container {
position: fixed;
top: 80px;
left: 0;
width: 100%;
height: calc(100% - 80px);
}
.router-change {
position: fixed;
right: 40px;
bottom: 40px;
z-index: 1000;
img {
width: 70px;
height: 70px;
vertical-align: top;
cursor: pointer;
opacity: 0.6;
&:hover {
opacity: 1;
}
}
}
</style>
\ No newline at end of file
src/components/common/STable.vue 0 → 100644
View file @ 00438664
<template>
<div class="s-table">
<div class="table-headers">
<div
v-for="(header, index) in headers"
:key="index"
:style="{
...header.headerStyle,
width: header.width ? header.width : '',
textAlign: header.align,
}"
>
{{ header.name }}
</div>
</div>
<div
class="table-data"
v-infinite-scroll="load"
:infinite-scroll-distance="1"
:infinite-scroll-delay="1000"
ref="tableData"
>
<div
class="table-data-columns"
v-for="(row, index) in tableData"
:key="index"
>
<div
v-for="(header, hIndex) in headers"
:key="hIndex"
:style="{
...header.style,
width: header.width ? header.width : '',
textAlign: header.align,
}"
class="table-data-column"
>
<template v-if="header.slot">
<slot :row="row" :header="header" />
</template>
<template v-else>
<el-tooltip
class="table-data-cell"
effect="dark"
:content="String(row[header.props])"
>
<div>
{{ row[header.props] }}
</div>
</el-tooltip>
</template>
</div>
</div>
<div v-if="tableData.length == 0" class="no-data">
<div class="inner">
<img src="@/assets/images/index/no-data.png" alt="" />
<div>暂无数据</div>
</div>
</div>
</div>
</div>
</template>
<script>
export default {
name: "STable",
props: {
headers: {
type: Array,
default: () => {
return [];
},
},
tableData: {
type: Array,
default: () => {
return [];
},
},
pagination: {
type: Boolean,
default: false,
},
},
methods: {
load() {
if (this.pagination) {
this.$emit("load");
}
},
},
data() {
return {};
},
mounted() {
this.$refs.tableData.onscroll = () => {
let list = document.getElementsByClassName("el-tooltip__popper");
if (list.length > 0) {
list[list.length - 1].style.display = "none";
}
};
},
};
</script>
<style lang="less" scoped>
.s-table {
height: 100%;
}
.table-headers {
line-height: 32px;
color: #b2bfcf;
font-size: 14px;
text-align: center;
display: flex;
justify-content: space-between;
flex-wrap: nowrap;
div {
padding: 0 4px;
}
}
.table-data {
height: calc(100% - 34px);
overflow-y: auto;
.table-data-columns {
line-height: 34px;
display: flex;
justify-content: space-between;
flex-wrap: nowrap;
text-align: center;
color: #fff;
font-size: 14px;
margin-bottom: 4px;
background: url("@/assets/images/index/icon_moren@2x.png");
background-repeat: no-repeat;
background-size: 100% 100%;
&:hover {
background: url("@/assets/images/index/icon_xuanz@2x.png");
background-repeat: no-repeat;
background-size: 100% 100%;
}
.table-data-cell {
overflow: hidden;
white-space: nowrap;
text-overflow: ellipsis;
padding: 0 4px;
}
}
}
.no-data {
text-align: center;
color: #fff;
height: 100%;
font-size: 20px;
position: relative;
img {
width: 100px;
vertical-align: top;
opacity: 0.7;
}
.inner {
position: absolute;
left: 50%;
top: 50%;
transform: translateX(-50%) translateY(-50%);
}
}
</style>
\ No newline at end of file
src/components/common/STable2.vue 0 → 100644
View file @ 00438664
<template>
<div class="s-table">
<div class="table-headers">
<div
v-for="(header, index) in headers"
:key="index"
:style="{
...header.headerStyle,
width: header.width ? header.width : '',
textAlign: header.align,
}"
>
{{ header.name }}
</div>
</div>
<div
class="table-data"
v-infinite-scroll="load"
:infinite-scroll-distance="1"
:infinite-scroll-delay="1000"
ref="tableData"
>
<div
class="table-data-columns"
v-for="(row, index) in tableData"
:key="index"
>
<div
v-for="(header, hIndex) in headers"
:key="hIndex"
:style="{
...header.style,
width: header.width ? header.width : '',
textAlign: header.align,
}"
class="table-data-column"
>
<template v-if="header.slot">
<slot :row="row" :header="header" />
</template>
<template v-else>
<el-tooltip
class="table-data-cell"
effect="dark"
:content="String(row[header.props])"
>
<div>
{{ row[header.props] }}
</div>
</el-tooltip>
</template>
</div>
</div>
<div v-if="tableData.length == 0" class="no-data">
<div class="inner">
<img src="@/assets/images/index/no-data.png" alt="" />
<div>暂无数据</div>
</div>
</div>
</div>
</div>
</template>
<script>
export default {
name: "STable",
props: {
headers: {
type: Array,
default: () => {
return [];
},
},
tableData: {
type: Array,
default: () => {
return [];
},
},
pagination: {
type: Boolean,
default: false,
},
},
methods: {
load() {
if (this.pagination) {
this.$emit("load");
}
},
},
data() {
return {};
},
mounted() {
this.$refs.tableData.onscroll = () => {
let list = document.getElementsByClassName("el-tooltip__popper");
if (list.length > 0) {
list[list.length - 1].style.display = "none";
}
};
},
};
</script>
<style lang="less" scoped>
.s-table {
height: 100%;
}
.table-headers {
line-height: 32px;
border: 1px solid #21436b;
background: #19314d;
color: #fff;
font-size: 14px;
text-align: center;
display: flex;
justify-content: space-between;
flex-wrap: nowrap;
div {
padding: 0 4px;
}
}
.table-data {
height: calc(100% - 34px);
overflow-y: auto;
.table-data-columns {
line-height: 40px;
display: flex;
justify-content: space-between;
flex-wrap: nowrap;
text-align: center;
color: #fff;
font-size: 14px;
padding: 0 1px;
.table-data-column {
}
.table-data-cell {
overflow: hidden;
white-space: nowrap;
text-overflow: ellipsis;
padding: 0 4px;
}
&:nth-child(2n) {
background: rgba(4, 36, 66, 0.6);
}
&:hover {
background: #1c3f67;
border: 1px solid #6286ba;
}
}
}
.no-data {
text-align: center;
color: #fff;
background: rgba(4, 36, 66, 0.6);
height: 100%;
font-size: 20px;
position: relative;
img {
width: 100px;
vertical-align: top;
opacity: 0.7;
}
.inner {
position: absolute;
left: 50%;
top: 50%;
transform: translateX(-50%) translateY(-50%);
}
}
</style>
\ No newline at end of file
src/components/common/Section.vue 0 → 100644
View file @ 00438664
<template>
<div class="section" :style="{ height: height }">
<Title :title="title"> </Title>
<div :class="[type == 'long' ? 'container2' : 'container']">
<slot />
</div>
</div>
</template>
<script>
export default {
name: "Section",
props: {
title: {
type: String,
default: "",
},
height: {
type: String,
default: "400px",
},
type: {
type: String,
},
},
};
</script>
<style lang="less" scoped>
.container {
height: calc(100% - 40px);
background: url("@/assets/images/index/img_iyi@2x.png");
background-repeat: no-repeat;
background-size: 100% 100%;
}
.container2 {
height: calc(100% - 40px);
background: url("@/assets/images/index/img_yiwu@2x.png");
background-repeat: no-repeat;
background-size: 100% 100%;
}
</style>
\ No newline at end of file
src/components/common/Section2.vue 0 → 100644
View file @ 00438664
<template>
<div class="section" :style="{ height: height }">
<Title2 :title="title"> </Title2>
<div class="container-short">
<slot />
</div>
</div>
</template>
<script>
export default {
name: "Section",
props: {
title: {
type: String,
default: "",
},
height: {
type: String,
default: "400px",
},
},
};
</script>
<style lang="less" scoped>
.container-short {
height: calc(100% - 50px);
background: url("@/assets/images/index/img_kirs@2x.png");
background-repeat: no-repeat;
background-size: 100% 100%;
margin-top: 10px;
}
</style>
\ No newline at end of file
src/components/common/Title.vue 0 → 100644
View file @ 00438664
<template>
<div class="title">
{{ title }}
</div>
</template>
<script>
export default {
name: "Title",
props: {
title: {
type: String,
default: "",
},
},
};
</script>
<style lang="less" scoped>
.title {
font-size: 18px;
color: #fff;
line-height: 40px !important;
text-align: center;
background: url("@/assets/images/index/icon_toubg@2x.png");
background-repeat: no-repeat;
background-size: 100% 100%;
}
.right-slot {
float: right;
}
</style>
\ No newline at end of file
src/components/common/Title2.vue 0 → 100644
View file @ 00438664
<template>
<div class="title">
{{ title }}
</div>
</template>
<script>
export default {
name: "Title",
props: {
title: {
type: String,
default: "",
},
},
};
</script>
<style lang="less" scoped>
.title {
font-size: 18px;
color: #fff;
line-height: 40px !important;
text-align: left;
padding-left: 20px;
background: url("@/assets/images/index/icon_snei@2x.png");
background-repeat: no-repeat;
background-size: 100% 100%;
}
.right-slot {
float: right;
}
</style>
\ No newline at end of file
src/components/users/Header.vue 0 → 100644
View file @ 00438664
<template>
<div class="nav-header">
<div class="left-nav">
<span>{{ date }} {{ weekDay }} {{ time }}</span>
</div>
<div class="mid-title">
<span>{{ userInfo.customer_shortname }}检测数字化生产可视平台</span>
</div>
<div class="right-nav"></div>
</div>
</template>
<script>
import { mapState } from "vuex";
export default {
data() {
return {
date: "",
weekDay: "",
time: "",
};
},
methods: {
getTime() {
let date = new Date();
let year = date.getFullYear();
let month = date.getMonth() + 1;
let day = date.getDate();
month = month > 9 ? month : "0" + month;
day = day < 10 ? "0" + day : day;
let today = year + "-" + month + "-" + day;
this.date = today;
let hour = date.getHours() < 10 ? "0" + date.getHours() : date.getHours();
let min =
date.getMinutes() < 10 ? "0" + date.getMinutes() : date.getMinutes();
let sec =
date.getSeconds() < 10 ? "0" + date.getSeconds() : date.getSeconds();
this.time = `${hour}:${min}:${sec}`;
let str = "星期";
let weekDay = new Date().getDay();
switch (weekDay) {
case 0:
str += "日";
break;
case 1:
str += "一";
break;
case 2:
str += "二";
break;
case 3:
str += "三";
break;
case 4:
str += "四";
break;
case 5:
str += "五";
break;
case 6:
str += "六";
break;
}
this.weekDay = str;
},
},
mounted() {
setInterval(() => {
this.getTime();
}, 1000);
},
computed: {
...mapState(["userInfo"]),
},
};
</script>
<style lang="less" scoped>
.nav-header {
width: calc(100% - 40px);
display: flex;
align-content: center;
padding: 0 20px;
height: 110px;
margin: 0px;
background: url("@/assets/images/User/header.png") no-repeat;
background-size: 100% 100%;
.left-nav {
width: calc(100% / 3);
display: flex;
justify-content: flex-start;
line-height: 50px;
span {
color: #fff;
font-size: 18px;
}
.weather-img {
vertical-align: top;
width: 30px;
height: 30px;
margin: 15px 0;
margin-right: 30px;
}
}
.mid-title {
width: calc(100% / 3);
font-size: 32px;
color: #fff;
text-align: center;
letter-spacing: 3px;
line-height: 65px;
span {
white-space: nowrap;
}
}
.right-nav {
width: calc(100% / 3);
text-align: right;
}
}
</style>
\ No newline at end of file
src/components/users/Section.vue 0 → 100644
View file @ 00438664
<template>
<div class="section" :style="{ height: height }">
<UTitle :title="title" :type="type">
<template slot="title-slot">
<slot name="title-slot"></slot>
</template>
</UTitle>
<div class="container">
<slot name="container-slot" />
</div>
</div>
</template>
<script>
import UTitle from "./Utitle";
export default {
name: "Section",
components: { UTitle },
props: {
title: {
type: String,
default: "",
},
height: {
type: String,
default: "400px",
},
type: {
type: String,
default: "short",
},
},
};
</script>
<style lang="less" scoped>
.container {
margin-top: 10px;
height: calc(100% - 64px);
}
</style>
\ No newline at end of file
src/components/users/Utable.vue 0 → 100644
View file @ 00438664
<template>
<div class="s-table">
<div class="table-headers">
<div
v-for="(header, index) in headers"
:key="index"
:style="{
minWidth: header.width ? header.width : '',
...(header.style ? header.style : {}),
}"
>
{{ header.name }}
</div>
</div>
<div class="table-data" ref="table">
<div
class="table-data-columns"
v-for="(row, index) in tableData"
:key="index"
>
<div
v-for="(header, hIndex) in headers"
:key="hIndex"
:style="{
minWidth: header.width ? header.width : '',
...(header.style ? header.style : {}),
}"
class="table-data-column"
>
<template v-if="header.slot">
<slot :row="row" :header="header" />
</template>
<template v-else>
<el-tooltip
class="table-data-cell"
effect="dark"
:content="String(row[header.props])"
>
<div>
{{ row[header.props] }}
</div>
</el-tooltip>
</template>
</div>
</div>
</div>
</div>
</template>
<script>
export default {
name: "UTable",
props: {
headers: {
type: Array,
default: () => {
return [];
},
},
tableData: {
type: Array,
default: () => {
return [];
},
},
},
data() {
return {};
},
mounted() {
this.$refs.table.onscroll = () => {
let list = document.getElementsByClassName("el-tooltip__popper");
if (list.length > 0) {
list[list.length - 1].style.display = "none";
}
};
},
};
</script>
<style lang="less" scoped>
.s-table {
height: 100%;
}
.table-headers {
line-height: 32px;
border: 1px solid #107de5;
background: #0a3163;
color: #02fffc;
font-size: 14px;
text-align: center;
display: flex;
justify-content: space-between;
flex-wrap: nowrap;
div {
flex: 1;
white-space: nowrap;
}
}
.table-data {
height: calc(100% - 34px);
overflow-y: auto;
.table-data-columns {
line-height: 40px;
display: flex;
justify-content: space-between;
flex-wrap: nowrap;
text-align: center;
color: #fff;
font-size: 14px;
.table-data-column {
flex: 1;
}
.table-data-cell {
overflow: hidden;
white-space: nowrap;
text-overflow: ellipsis;
}
&:nth-child(2n) {
background: rgba(4, 36, 66, 0.6);
}
&:hover {
background: rgba(19, 56, 132, 0.6);
}
}
}
</style>
\ No newline at end of file
src/components/users/Utitle.vue 0 → 100644
View file @ 00438664
<template>
<div :class="['title', type == 'long' ? 'long' : '']">
{{ title }}
<slot />
</div>
</template>
<script>
export default {
name: "Utitle",
props: {
title: {
type: String,
default: "",
},
type: {
type: String,
default: "short",
},
},
};
</script>
<style lang="less" scoped>
.title {
width: calc(100% - 24px);
font-size: 20px;
color: #fff;
line-height: 38px !important;
height: 38px;
padding-left: 24px;
background: url("@/assets/images/User/title-short.png") no-repeat;
background-size: 100% 100%;
text-shadow: 0 0 5px rgba(255, 255, 255, 0.6);
&.long {
background: url("@/assets/images/User/title-long.png") no-repeat;
background-size: 100% 100%;
}
}
</style>
\ No newline at end of file
src/main.js 0 → 100644
View file @ 00438664
import Vue from 'vue'
import App from './App.vue'
import router from '@/router/index'
import ElementUI from 'element-ui'
import 'element-ui/lib/theme-chalk/index.css'
import 'lib-flexible'
import store from "@/store/index"
import * as echarts from "echarts"
import scroll from 'vue-seamless-scroll'
import Title from "@/components/common/Title"
import Title2 from "@/components/common/Title2"
import Section from "@/components/common/Section"
import STable from "@/components/common/STable"
import "@/assets/iconfont/iconfont.css";
import "@/assets/common/common.less"
import "@/assets/common/element.less"
window._AMapSecurityConfig = {
securityJsCode: 'a5006042196de6dda20a434eb443bf45',
}
Vue.use(scroll)
Vue.prototype.$echarts = echarts
Vue.config.productionTip = false
Vue.use(ElementUI)
Vue.component('Title', Title)
Vue.component('Title2', Title2)
Vue.component('Section', Section)
Vue.component('STable', STable)
new Vue({
render: h => h(App),
store,
router
}).$mount('#app')
src/router/index.js 0 → 100644
View file @ 00438664
import Vue from 'vue'
import VueRouter from 'vue-router'
import Index from "@/components/Index"
import DataStatis from "@/views/DataStatis/Index"
Vue.use(VueRouter)
const router = new VueRouter({
routes: [
{
path: '/', component: Index, redirect: "/dataStatis",
children: [
{
path: '/dataStatis', component: DataStatis,
meta: {
title: '水利工程质量动态评估系统'
}
},
],
},
]
})
router.beforeEach((to, from, next) => {
if (to.meta.title) {
document.title = to.meta.title
}
next()
})
export default router
\ No newline at end of file
src/store/index.js 0 → 100644
View file @ 00438664
import Vue from 'vue'
import Vuex from "vuex"
Vue.use(Vuex)
const store = new Vuex.Store({
state: {
userInfo: {}
},
getters: {
},
mutations: {
changeUserInfo(state, userInfo) {
state.userInfo = userInfo
}
},
actions: {
}
})
export default store
src/utils/civilRequest.js 0 → 100644
View file @ 00438664
import axios from 'axios'
import { Message } from 'element-ui';
const civilRequest = axios.create({
withCredentials: false,
baseURL: process.env.VUE_APP_CIVIL_API_URL
})
civilRequest.interceptors.request.use(
config => {
const Authorization = localStorage.getItem('Authorization')
const PermitAuthorization = localStorage.getItem('PermitAuthorization')
if (Authorization) {
config.headers['Authorization'] = Authorization
}
config.headers['key'] = 100001
config.headers['secret'] = 'CTn5S6z5l9uKMXSw9buEqs1m0JmmViyz4GYD7RGJ'
if (PermitAuthorization) {
config.headers['Permit-Authorization'] = PermitAuthorization
}
return config
},
error => {
return Promise.reject(new Error(error).message)
}
)
civilRequest.interceptors.response.use(
response => {
if (response.data.status != 200) {
Message({
message: response.data.msg,
type: 'error'
})
}
return response.data
},
error => {
Message({
message: '服务器错误',
type: 'error'
})
console.log(error)
return Promise.reject(new Error(error).message)
}
)
export default civilRequest
src/utils/noloadingRequest.js 0 → 100644
View file @ 00438664
import axios from 'axios'
import { Message } from 'element-ui';
const noLoadingrequest = axios.create({
withCredentials: false
})
noLoadingrequest.interceptors.request.use(
config => {
const Authorization = localStorage.getItem('Authorization')
const PermitAuthorization = localStorage.getItem('PermitAuthorization')
if (Authorization) {
config.headers['Authorization'] = Authorization
}
if (PermitAuthorization) {
config.headers['Permit-Authorization'] = PermitAuthorization
}
return config
},
error => {
return Promise.reject(new Error(error).message)
}
)
noLoadingrequest.interceptors.response.use(
response => {
if (response.data.status != 200) {
Message({
message: response.data.msg,
type: 'error'
})
}
return response.data
},
error => {
Message({
message: '服务器错误',
type: 'error'
})
console.log(error)
return Promise.reject(new Error(error).message)
}
)
export default noLoadingrequest
src/utils/request.js 0 → 100644
View file @ 00438664
import axios from 'axios'
import Vue from 'vue'
import { Message, Loading } from 'element-ui';
import _ from 'lodash';
// loading框设置局部刷新，且所有请求完成后关闭loading框
let loadingInstance; //loading 实例
let needLoadingRequestCount = 0; //当前正在请求的数量
import { getAccess } from "@/api/index"
import md5 from "js-md5"
function showLoading() {
let main = document.querySelector('#app') //获取dom节点
if (main) {
if (needLoadingRequestCount === 0 && !loadingInstance) {
loadingInstance = Loading.service({
target: main, text: '正在加载...', background: 'rgba(0,0,0,0.6)', spinner: 'el-icon-loading'
});
}
needLoadingRequestCount++;
}
}
function closeLoading() {
Vue.nextTick(() => { // 以服务的方式调用的 Loading 需要异步关闭
needLoadingRequestCount--;
needLoadingRequestCount = Math.max(needLoadingRequestCount, 0); // 保证大于等于0
if (needLoadingRequestCount === 0) {
if (loadingInstance) {
hideLoading()
}
}
});
}
//防抖
var hideLoading = _.debounce(() => {
loadingInstance.close();
loadingInstance = null;
}, 10);
const request = axios.create({
withCredentials: false,
// baseURL: process.env.VUE_APP_API_URL
})
request.interceptors.request.use(
config => {
console.log(config)
// const Authorization = localStorage.getItem('maToken')
// if (Authorization) {
// config.headers['Authorization'] = Authorization
// }
// config.headers['Authorization'] = 'Bearer eyJ0eXAiOiJKV1QiLCJhbGciOiJSUzI1NiJ9.eyJhdWQiOiI1IiwianRpIjoiZjQ0MjM0NzJlMjI0NzE2NWRjOWI3YzhlMTU5OGM1NGIwYTIxM2UyMDFmNThjYjc0OWNhYjVhZWUzZDE2NzVjMGNhODlkODIzZWM3MDM1ZWMiLCJpYXQiOjE3MzE4OTE5OTQuNDU5OTY0LCJuYmYiOjE3MzE4OTE5OTQuNDU5OTcsImV4cCI6MTc2MzQyNzk5NC4zNTgyNjcsInN1YiI6IjEiLCJzY29wZXMiOlsiKiJdfQ.kHggVPwqqNdp1VBbrGiEEBJHjhN8VCeDbS22C-sIeOMFPbeo-KCxpKpISwbVGpgEuqB57tz_mCtpFUYxcQW9lHIiRkn9YV8looMjZqDnRhLk-lBsKper_9nqhh_dacVMlwyiZZuOo34H-C45IHeDbzxL2vpqYfM2DYPTBgJYw5rexM2jqyiCEQOzYmYEUCeuMvAcjXA7Y7wPVbW1b4JbI5lAnLHPtlB7n3QZ0krH4VfWNj2fKwYGeWEHEkGnnXDlBh7E1IDjbZ_n1RbpM_PBr-rmSCnK3rXOwneICW-yzIiv3oiLE5UMz04LwQZr5p_7zLJQaqkpSREWfUiKVoMdwvXtCjYomhrj4KqxUqkUJNicKDNorKNHbpg7j45b3OLJrp8_8RIL9bWAxykzkFsQCMyt7xHw8oT0ejUmGTLSSKYiAT2ZMV_S0_KWexDiDJvzC6flH0hOK7lPG7e7idjBxC1qD0phmIggn1hcmfnFJ6ZOV_XlS4VHfvTzqoLuQXaUffH_qqKLn9rvci4EedqYDOrlbh957HrrCbvnywYwahh_3R43CfhcmI494zxpdWhUKbhCqo1uNWvlR9MKL3WVP_lvswkd9JlzO17oN9oXqCpt8SPH41tVQ0BxuVUeYrMFmSmxCYuN5026VrFwYKXOF5lMsFdNBnqagIABa6gFyx8'
showLoading()
return config
},
error => {
closeLoading()
return Promise.reject(new Error(error).message)
}
)
request.interceptors.response.use(
response => {
closeLoading()
if (response.data.status != 200) {
Message({
message: response.data.msg,
type: 'error'
})
}
return response.data
},
async (error) => {
if (error.request.status == 401) {
closeLoading()
localStorage.setItem('Authorization', '')
Message({
message: '请先登录',
type: 'error'
})
window.location.href = window.location.origin
}
Message({
message: '服务器错误',
type: 'error'
})
return Promise.reject(new Error(error).message)
}
)
export default request
src/views/DataStatis/Index copy2.vue 0 → 100644
View file @ 00438664
<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 0 → 100644
View file @ 00438664
<template>
<div id="data-statis">
<div id="amap-container"></div>
<!-- v-loading="mapLoading"
element-loading-background="rgba(0, 0, 0, 0.2)"
element-loading-text="地图加载中..." -->
<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: green">{{
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="get-points">
<div class="points">
<div class="grade" style="color: #f86262">
{{ zfjgPoints }}
</div>
<div class="label">政府监管</div>
</div>
<div class="points">
<div class="grade" style="color: #5aefd1">
{{ zfjgPoints }}
</div>
<div class="label">质量检测</div>
</div>
<div class="points">
<div class="grade" style="color: #f86262">
{{ zfjgPoints }}
</div>
<div class="label">总得分</div>
</div>
</div>
<!-- <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> -->
<STable2
:style="{ marginTop: '.1rem', height: 'calc(100% - 1rem)' }"
:headers="header4_1"
:table-data="data4"
></STable2>
<!-- activeTab == 1 ? header4_1 : activeTab == 2 ? header4_2 : header4_3 -->
<!-- <div class="no-data" v-if="activeTab == 3">
<div class="inner">
<img src="@/assets/images/index/no-data.png" alt="" />
<div>暂无数据</div>
</div>
</div> -->
</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: green">{{
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 * as echarts from "echarts";
import { zhejiangJson } from "@/assets/data/zhejiang.js";
import {
getMapData,
getYearQuestion,
getLevelQuestion,
getStatusQuestion,
getProjectQuestion,
getAreaQuestionByAreaId,
} 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";
export default {
name: "DataStatis",
components: {
Section2,
STable2,
},
data() {
return {
mapLoading: true,
header1: [
{
name: "工程名称",
props: "project_name",
width: "70%",
headerStyle: {
padding: "0 .2rem",
textAlign: "left",
},
style: {
padding: "0 .2rem",
},
align: "left",
},
{ name: "政府监管得分", props: "score", width: "30%" },
],
header2: [
{
name: "工程名称",
props: "project_name",
width: "70%",
headerStyle: {
padding: "0 .2rem",
textAlign: "left",
},
style: {
padding: "0 .2rem",
},
align: "left",
},
{ name: "工程质量得分", props: "score", width: "30%" },
],
header3: [
{
name: "工程名称",
props: "project_name",
width: "70%",
headerStyle: {
padding: "0 .2rem",
textAlign: "left",
},
style: {
padding: "0 .2rem",
},
align: "left",
},
{ name: "创新创优得分", props: "score", width: "30%" },
],
// 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%",
// },
// ],
data3: [],
header4_1: [
{
name: "工程名称",
props: "name",
width: "40%",
headerStyle: {
padding: "0 .2rem",
textAlign: "left",
},
style: {
padding: "0 .2rem",
},
align: "left",
},
{
name: "工程质量",
props: "value1",
width: "20%",
},
{
name: "质量检测",
props: "value2",
width: "20%",
},
{
name: "总得分",
props: "value2",
width: "20%",
},
],
header4_2: [
{
name: "工程名称",
props: "name",
width: "calc(100% / 3)",
headerStyle: {
padding: "0 .2rem",
textAlign: "left",
},
style: {
padding: "0 .2rem",
},
align: "left",
},
{
name: "单位工程",
props: "value1",
width: "calc(100% / 3)",
headerStyle: {
padding: "0 .2rem",
textAlign: "left",
},
style: {
padding: "0 .2rem",
},
align: "left",
// headerStyle: {
// fontSize: "0.13rem",
// },
},
{
name: "得分情况",
props: "value2",
width: "calc(100% / 3)",
},
],
header4_3: [
{
name: "工程名称",
props: "name",
width: "70%",
headerStyle: {
padding: "0 .2rem",
textAlign: "left",
},
style: {
padding: "0 .2rem",
},
align: "left",
},
{
name: "不合格率",
props: "value1",
width: "30%",
},
],
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% / 3)",
},
{
name: "工程结构质量",
props: "category_count_13",
width: "calc(100% / 4)",
},
],
data4: [],
header5: [
{
name: "工程名称",
props: "project_name",
width: "20%",
headerStyle: {
padding: "0 .2rem",
},
style: {
padding: "0 .2rem",
},
align: "left",
},
{
name: "标段名称",
props: "prname",
width: "15%",
headerStyle: {
padding: "0 .2rem",
},
style: {
padding: "0 .2rem",
},
align: "left",
},
{
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: "",
zfjgPoints: 0,
};
},
methods: {
initMap() {
getMapData().then((res) => {
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;
// });
},
async load() {
console.log("load");
},
switchList(type) {
this.activeTab = type;
this.data4 = [];
if (type == 1) {
this.data4 = [
{
name: "苍南县江南垟平原骨干排涝工程（龙港段）龙金运河和新兰闸站工程",
value1: 17,
},
{
name: "慈溪市水资源开发利用二期（梅湖水库扩容工程）",
value1: 23,
},
{
name: "东苕溪防洪后续西险大塘达标加固工程（杭州市段）",
value1: 18,
},
{
name: "奉化区柏坑水库扩容工程",
value1: 19,
},
{
name: "海宁市百里钱塘综合整治提升工程一期（盐仓段）",
value1: 32,
},
{
name: "杭州市本级海塘安澜工程 （三堡至乔司段海塘）一期",
value1: 45,
},
{
name: "杭州市本级海塘安澜工程（三堡船闸段海塘）",
value1: 16,
},
{
name: "杭州市本级海塘安澜工程（珊瑚沙海塘）",
value1: 9,
},
{
name: "杭州市本级海塘安澜工程（上泗南北大塘）二期",
value1: 10,
},
{
name: "杭州市萧山区西江塘义桥段古海塘抢险加固工程",
value1: 58,
},
{
name: "杭州市萧围西线（一工段至四工段）提标加固工程",
value1: 21,
},
{
name: "湖州市苕溪清水入湖河道整治后续工程（德清县段）",
value1: 12,
},
{
name: "环湖大堤（浙江段）后续工程（长兴段）",
value1: 32,
},
{
name: "嘉兴市区城市防洪扩展工程三期（封闭工程）",
value1: 3,
},
{
name: "金华市安地灌区续建配套与节水改造项目（2021-2022年）调增项目",
value1: 4,
},
{
name: "杭州市本级海塘安澜工程（珊瑚沙海塘）",
value1: 9,
},
];
// getAreaQuestionByAreaId(this.currentCityId).then((res) => {
// this.data4 = res.data;
// });
} else if (type == 2) {
this.data4 = [
{
name: "环湖大堤施工2标",
value1: "堤防工程",
value2: "92.8%",
},
{
name: "环湖大堤施工2标",
value1: "蔡浦港闸站工程",
value2: "93.4%",
},
{
name: "环湖大堤施工2标",
value1: "其他口门建筑物单位工程",
value2: "89.5%",
},
{
name: "环湖大堤施工2标",
value1: "夹浦港-秋龙港-吴城港河道堤防工程",
value2: "93.4%",
},
{
name: "环湖大堤施工2标",
value1: "夹浦港-秋龙港-吴城港闸站第一单位工程",
value2: "91.9%",
},
{
name: "环湖大堤施工2标",
value1: "夹浦港-秋龙港-吴城港闸站第二单位工程",
value2: "91.1%",
},
{
name: "衢州市柯城区寺桥水库工程",
value1: "混凝土面板堆石坝",
value2: "/",
},
{
name: "衢州市柯城区寺桥水库工程",
value1: "导流泄放洞",
value2: "/",
},
{
name: "衢州市柯城区寺桥水库工程",
value1: "溢洪道",
value2: "/",
},
{
name: "金华市安地灌区续建配套与节水改造项目（2021-2022年）调增项目施工标【金华市安地灌区续建配套与节水改造项目（2021-2022年）IV标】",
value1: "渠道及信息化项目",
value2: "/",
},
];
} else if (type == 3) {
this.data4 = [
{
name: "苍南县江南垟平原骨干排涝工程（龙港段）龙金运河和新兰闸站工程",
value1: "98%",
},
{
name: "慈溪市水资源开发利用二期（梅湖水库扩容工程）",
value1: "87%",
},
{
name: "东苕溪防洪后续西险大塘达标加固工程（杭州市段）",
value1: "76.4%",
},
{
name: "奉化区柏坑水库扩容工程",
value1: "87.1%",
},
{
name: "海宁市百里钱塘综合整治提升工程一期（盐仓段）",
value1: "95.1%",
},
{
name: "杭州市本级海塘安澜工程 （三堡至乔司段海塘）一期",
value1: "98%",
},
{
name: "杭州市本级海塘安澜工程（三堡船闸段海塘）",
value1: "87%",
},
{
name: "杭州市本级海塘安澜工程（珊瑚沙海塘）",
value1: "76.4%",
},
{
name: "杭州市本级海塘安澜工程（上泗南北大塘）二期",
value1: "87.1%",
},
{
name: "杭州市萧山区西江塘义桥段古海塘抢险加固工程",
value1: "95.1%",
},
{
name: "杭州市萧围西线（一工段至四工段）提标加固工程",
value1: "98%",
},
{
name: "湖州市苕溪清水入湖河道整治后续工程（德清县段）",
value1: "87%",
},
{
name: "环湖大堤（浙江段）后续工程（长兴段）",
value1: "76.4%",
},
{
name: "嘉兴市区城市防洪扩展工程三期（封闭工程）",
value1: "87.1%",
},
{
name: "金华市安地灌区续建配套与节水改造项目（2021-2022年）调增项目",
value1: "95.1%",
},
{
name: "杭州市本级海塘安澜工程（珊瑚沙海塘）",
value1: "76.2%",
},
];
}
},
initMapData(mapid, baseAreaJson, mapData, maplevel) {
var myChart = echarts.init(document.getElementById(mapid));
echarts.registerMap(mapid, baseAreaJson);
var outdata = []; //地图区域挂载数据
mapData.forEach(function (item, index) {
console.log(item);
outdata.push({
name: item.name,
id: item.id,
value: item.value[2],
index: index,
});
});
var _layoutSize = "100%";
var option = {
tooltip: {
show: true,
formatter: function (params) {
if (
params.seriesType == "scatter" ||
params.seriesType == "effectScatter"
) {
return false;
}
return params.name + "<br>" + params.value;
},
},
grid: {
left: "0%",
right: "0%",
top: "0%",
bottom: "0%",
show: true,
borderWidth: 0,
backgroundColor: "transparent",
},
// 地图的阴影底图
geo: {
map: mapid,
left: 0,
right: 0,
bottom: 0,
top: 0,
aspectScale: 0.9,
layoutCenter: ["50%", "50%"], //地图位置
layoutSize: _layoutSize,
itemStyle: {
normal: {},
},
z: 1,
animationDurationUpdate: 0,
roam: false,
data: outdata,
},
visualMap: {
type: "piecewise",
splitNumber: 2,
min: 0,
max: 100,
align: "left",
right: 20,
bottom: 20,
itemWidth: 60,
itemHeight: 20,
itemGap: 5,
// itemSymbol: 'circle',
orient: "vertical",
//区域颜色
color: ["#2f4ca3", "#8c2d2d"],
//区域颜色范范围
pieces: [
{ min: 0, max: 80 },
{ min: 80, max: 100 },
],
textStyle: {
color: "#eee",
fontSize: 14,
},
},
series: [
{
type: "map",
map: mapid,
aspectScale: 0.9,
layoutCenter: ["50%", "50%"], //地图位置
layoutSize: _layoutSize,
label: {
normal: {
show: false,
fontFamily: "SourceHanSansCN",
fontSize: "14",
color: "#FEFEFE",
position: "bottom",
},
emphasis: {
show: false,
fontFamily: "SourceHanSansCN",
fontSize: "14",
color: "#FEFEFE",
},
},
select: {
label: {
color: "#fff",
show: false,
},
itemStyle: {
areaColor: "#2a5dc6",
borderColor: "#14ddf5",
},
},
itemStyle: {
normal: {
borderColor: "#2656bb",
borderWidth: 1,
color: "#032359",
areaColor: "#23366f",
},
emphasis: {
shadowColor: "rgba(0, 0, 0, 1)",
shadowBlur: 10,
shadowOffsetX: 5,
shadowOffsetY: 5,
areaColor: {
type: "linear-gradient",
x: 0,
y: 0,
x2: 0,
y2: 1,
colorStops: [
{
offset: 0,
color: "#15b5f5", // 0% 处的颜色
},
{
offset: 1,
color: "#106fd5",
},
],
},
},
},
z: 1,
data: outdata.map((item) => {
return {
...item,
selected: item.name == "杭州市",
};
}),
roam: false,
},
{
name: "点",
type: "scatter",
coordinateSystem: "geo",
symbol: (value, params) => {
return (
"image://" +
require("@/assets/images/index/icon_dingwie@2x.png")
);
},
colorBy: "data",
symbolSize: 50,
symbolOffset: [20, -20],
label: {
position: "inside",
formatter: function (params) {
console.log(params);
return `${params.data.name}\n${params.data.value[2]}分`;
},
show: true,
color: "#fff",
fontSize: 14,
offset: [10, -6],
},
z: 3,
data: mapData,
},
],
};
myChart.clear();
myChart.setOption(option);
window.addEventListener("resize", function () {
myChart.resize();
});
myChart.off().on("click", (params) => {
if (maplevel == 1 && params.componentType === "series") {
var streetName = null;
var areaGUID = null;
if (params.seriesType == "map") {
// 地图
streetName = params.data.name;
areaGUID = params.data.id;
} else {
// 散点图
streetName = params.name.split("|")[0];
areaGUID = params.name.split("|")[1];
}
console.log(params);
this.currentCityId = params.data.id;
this.currentCityName = params.data.name;
this.switchList(1);
}
});
this.$nextTick(() => {
myChart.resize();
});
return myChart;
},
},
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% - 90px);
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(100% - 90px);
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% / 3 - calc(8px / 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%;
}
}
}
.get-points {
display: flex;
justify-content: space-around;
margin-top: 10px;
.points {
width: calc(100% / 3 - calc(8px / 3));
background: url("@/assets/images/index/grade-bg.png");
background-repeat: no-repeat;
background-size: 100% 100%;
margin-right: 4px;
height: 80px;
&:last-child {
margin-right: 0;
}
.label {
width: 70%;
margin: 0 auto;
text-align: center;
line-height: 36px;
color: #bdcae4;
border-top: 1px solid rgba(255, 255, 255, 0.7);
font-size: 14px;
}
.grade {
line-height: 44px;
text-align: center;
font-size: 24px;
}
}
}
::v-deep .amap-marker-label {
border: none;
background-color: transparent;
font-size: 14px !important;
line-height: 14px !important;
top: 2% !important;
left: 10% !important;
}
.no-data {
text-align: center;
color: #fff;
height: 100%;
font-size: 20px;
position: relative;
img {
width: 100px;
vertical-align: top;
opacity: 0.7;
}
.inner {
position: absolute;
left: 50%;
top: 50%;
transform: translateX(-50%) translateY(-50%);
}
}
</style>
\ No newline at end of file
vue.config.js 0 → 100644
View file @ 00438664
const { defineConfig } = require('@vue/cli-service')
module.exports = defineConfig({
transpileDependencies: true,
productionSourceMap: false,
css: {
loaderOptions: {
postcss: {
postcssOptions: {
plugins: [
require('postcss-plugin-px2rem')({
rootValue: 100,
mediaQuery: false, //（布尔值）允许在媒体查询中转换px。
minPixelValue: 0 //设置要替换的最小像素值(3px会被转rem)。 默认 0
}),
]
}
}
}
},
publicPath: process.env.NODE_ENV == 'production' ? './' : '/', // 二级根目录需要修改
devServer: {
port: 3000,
proxy: {
'/site': {
target: 'http://192.168.0.185/',
changeOrigin: true,
// pathRewrite: {
// '^/api': ''
// }
},
}
},
lintOnSave: true,
pluginOptions: {
"style-resources-loader": {
preProcessor: "less",
patterns: []
}
},
chainWebpack: (config) => {
config.module
.rule('css')
.test(/\.css$/)
.oneOf('vue')
.resourceQuery(/\?vue/)
.use('px2rem')
.loader('px2rem-loader')
.options({
remUnit: 100,
})
}
})
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