Browse Source

修改最后问题,剩下浓度未修改

Version1.0
YF-yuan 3 years ago
parent
commit
baf8646fb2
5 changed files with 116 additions and 95 deletions
  1. +79
    -81
      package-lock.json
  2. +31
    -8
      src/views/Home.vue
  3. +2
    -2
      src/views/leftCompoents/landUse.vue
  4. +3
    -3
      src/views/leftCompoents/outletComponents.vue
  5. +1
    -1
      src/views/leftCompoents/pointQulity.vue

+ 79
- 81
package-lock.json View File

"integrity": "sha1-/q7SVZc9LndVW4PbwIhRpsY1IPo=", "integrity": "sha1-/q7SVZc9LndVW4PbwIhRpsY1IPo=",
"dev": true "dev": true
}, },
"ansi-styles": {
"version": "4.3.0",
"resolved": "https://registry.npmjs.org/ansi-styles/-/ansi-styles-4.3.0.tgz",
"integrity": "sha512-zbB9rCJAT1rbjiVDb2hqKFHNYLxgtk8NURxZ3IZwD3F6NtxbXZQCnnSi1Lkx+IDohdPlFp222wVALIheZJQSEg==",
"dev": true,
"optional": true,
"requires": {
"color-convert": "^2.0.1"
}
},
"cacache": { "cacache": {
"version": "13.0.1", "version": "13.0.1",
"resolved": "https://registry.npm.taobao.org/cacache/download/cacache-13.0.1.tgz", "resolved": "https://registry.npm.taobao.org/cacache/download/cacache-13.0.1.tgz",
"unique-filename": "^1.1.1" "unique-filename": "^1.1.1"
} }
}, },
"chalk": {
"version": "4.1.0",
"resolved": "https://registry.npmjs.org/chalk/-/chalk-4.1.0.tgz",
"integrity": "sha512-qwx12AxXe2Q5xQ43Ac//I6v5aXTipYrSESdOgzrN+9XjgEpyjpKuvSGaN4qE93f7TQTlerQQ8S+EQ0EyDoVL1A==",
"dev": true,
"optional": true,
"requires": {
"ansi-styles": "^4.1.0",
"supports-color": "^7.1.0"
}
},
"color-convert": {
"version": "2.0.1",
"resolved": "https://registry.npmjs.org/color-convert/-/color-convert-2.0.1.tgz",
"integrity": "sha512-RRECPsj7iu/xb5oKYcsFHSppFNnsj/52OVTRKb4zP5onXwVF3zVmmToNcOfGC+CRDpfK/U584fMg38ZHCaElKQ==",
"dev": true,
"optional": true,
"requires": {
"color-name": "~1.1.4"
}
},
"color-name": {
"version": "1.1.4",
"resolved": "https://registry.npmjs.org/color-name/-/color-name-1.1.4.tgz",
"integrity": "sha512-dOy+3AuW3a2wNbZHIuMZpTcgjGuLU/uBL/ubcZF9OXbDo8ff4O8yVp5Bf0efS8uEoYo5q4Fx7dY9OgQGXgAsQA==",
"dev": true,
"optional": true
},
"has-flag": {
"version": "4.0.0",
"resolved": "https://registry.npmjs.org/has-flag/-/has-flag-4.0.0.tgz",
"integrity": "sha512-EykJT/Q1KjTWctppgIAgfSO0tKVuZUjhgMr17kqTumMl6Afv3EISleU7qZUzoXDFTAHTDC4NOoG/ZxU3EvlMPQ==",
"dev": true,
"optional": true
},
"loader-utils": {
"version": "2.0.0",
"resolved": "https://registry.npmjs.org/loader-utils/-/loader-utils-2.0.0.tgz",
"integrity": "sha512-rP4F0h2RaWSvPEkD7BLDFQnvSf+nK+wr3ESUjNTyAGobqrijmW92zc+SO6d4p4B1wh7+B/Jg1mkQe5NYUEHtHQ==",
"dev": true,
"optional": true,
"requires": {
"big.js": "^5.2.2",
"emojis-list": "^3.0.0",
"json5": "^2.1.2"
}
},
"source-map": { "source-map": {
"version": "0.6.1", "version": "0.6.1",
"resolved": "https://registry.npm.taobao.org/source-map/download/source-map-0.6.1.tgz", "resolved": "https://registry.npm.taobao.org/source-map/download/source-map-0.6.1.tgz",
"minipass": "^3.1.1" "minipass": "^3.1.1"
} }
}, },
"supports-color": {
"version": "7.2.0",
"resolved": "https://registry.npmjs.org/supports-color/-/supports-color-7.2.0.tgz",
"integrity": "sha512-qpCAvRl9stuOHveKsn7HncJRvv501qIacKzQlO/+Lwxc9+0q2wLyv4Dfvt80/DPn2pqOBsJdDiogXGR9+OvwRw==",
"dev": true,
"optional": true,
"requires": {
"has-flag": "^4.0.0"
}
},
"terser-webpack-plugin": { "terser-webpack-plugin": {
"version": "2.3.8", "version": "2.3.8",
"resolved": "https://registry.npm.taobao.org/terser-webpack-plugin/download/terser-webpack-plugin-2.3.8.tgz?cache=0&sync_timestamp=1603881839307&other_urls=https%3A%2F%2Fregistry.npm.taobao.org%2Fterser-webpack-plugin%2Fdownload%2Fterser-webpack-plugin-2.3.8.tgz", "resolved": "https://registry.npm.taobao.org/terser-webpack-plugin/download/terser-webpack-plugin-2.3.8.tgz?cache=0&sync_timestamp=1603881839307&other_urls=https%3A%2F%2Fregistry.npm.taobao.org%2Fterser-webpack-plugin%2Fdownload%2Fterser-webpack-plugin-2.3.8.tgz",
"terser": "^4.6.12", "terser": "^4.6.12",
"webpack-sources": "^1.4.3" "webpack-sources": "^1.4.3"
} }
},
"vue-loader-v16": {
"version": "npm:vue-loader@16.1.2",
"resolved": "https://registry.npmjs.org/vue-loader/-/vue-loader-16.1.2.tgz",
"integrity": "sha512-8QTxh+Fd+HB6fiL52iEVLKqE9N1JSlMXLR92Ijm6g8PZrwIxckgpqjPDWRP5TWxdiPaHR+alUWsnu1ShQOwt+Q==",
"dev": true,
"optional": true,
"requires": {
"chalk": "^4.1.0",
"hash-sum": "^2.0.0",
"loader-utils": "^2.0.0"
}
} }
} }
}, },
} }
} }
}, },
"vue-loader-v16": {
"version": "npm:vue-loader@16.1.2",
"resolved": "https://registry.npmjs.org/vue-loader/-/vue-loader-16.1.2.tgz",
"integrity": "sha512-8QTxh+Fd+HB6fiL52iEVLKqE9N1JSlMXLR92Ijm6g8PZrwIxckgpqjPDWRP5TWxdiPaHR+alUWsnu1ShQOwt+Q==",
"dev": true,
"optional": true,
"requires": {
"chalk": "^4.1.0",
"hash-sum": "^2.0.0",
"loader-utils": "^2.0.0"
},
"dependencies": {
"ansi-styles": {
"version": "4.3.0",
"resolved": "https://registry.npmjs.org/ansi-styles/-/ansi-styles-4.3.0.tgz",
"integrity": "sha512-zbB9rCJAT1rbjiVDb2hqKFHNYLxgtk8NURxZ3IZwD3F6NtxbXZQCnnSi1Lkx+IDohdPlFp222wVALIheZJQSEg==",
"dev": true,
"optional": true,
"requires": {
"color-convert": "^2.0.1"
}
},
"chalk": {
"version": "4.1.0",
"resolved": "https://registry.npmjs.org/chalk/-/chalk-4.1.0.tgz",
"integrity": "sha512-qwx12AxXe2Q5xQ43Ac//I6v5aXTipYrSESdOgzrN+9XjgEpyjpKuvSGaN4qE93f7TQTlerQQ8S+EQ0EyDoVL1A==",
"dev": true,
"optional": true,
"requires": {
"ansi-styles": "^4.1.0",
"supports-color": "^7.1.0"
}
},
"color-convert": {
"version": "2.0.1",
"resolved": "https://registry.npmjs.org/color-convert/-/color-convert-2.0.1.tgz",
"integrity": "sha512-RRECPsj7iu/xb5oKYcsFHSppFNnsj/52OVTRKb4zP5onXwVF3zVmmToNcOfGC+CRDpfK/U584fMg38ZHCaElKQ==",
"dev": true,
"optional": true,
"requires": {
"color-name": "~1.1.4"
}
},
"color-name": {
"version": "1.1.4",
"resolved": "https://registry.npmjs.org/color-name/-/color-name-1.1.4.tgz",
"integrity": "sha512-dOy+3AuW3a2wNbZHIuMZpTcgjGuLU/uBL/ubcZF9OXbDo8ff4O8yVp5Bf0efS8uEoYo5q4Fx7dY9OgQGXgAsQA==",
"dev": true,
"optional": true
},
"has-flag": {
"version": "4.0.0",
"resolved": "https://registry.npmjs.org/has-flag/-/has-flag-4.0.0.tgz",
"integrity": "sha512-EykJT/Q1KjTWctppgIAgfSO0tKVuZUjhgMr17kqTumMl6Afv3EISleU7qZUzoXDFTAHTDC4NOoG/ZxU3EvlMPQ==",
"dev": true,
"optional": true
},
"loader-utils": {
"version": "2.0.0",
"resolved": "https://registry.npmjs.org/loader-utils/-/loader-utils-2.0.0.tgz",
"integrity": "sha512-rP4F0h2RaWSvPEkD7BLDFQnvSf+nK+wr3ESUjNTyAGobqrijmW92zc+SO6d4p4B1wh7+B/Jg1mkQe5NYUEHtHQ==",
"dev": true,
"optional": true,
"requires": {
"big.js": "^5.2.2",
"emojis-list": "^3.0.0",
"json5": "^2.1.2"
}
},
"supports-color": {
"version": "7.2.0",
"resolved": "https://registry.npmjs.org/supports-color/-/supports-color-7.2.0.tgz",
"integrity": "sha512-qpCAvRl9stuOHveKsn7HncJRvv501qIacKzQlO/+Lwxc9+0q2wLyv4Dfvt80/DPn2pqOBsJdDiogXGR9+OvwRw==",
"dev": true,
"optional": true,
"requires": {
"has-flag": "^4.0.0"
}
}
}
},
"vue-router": { "vue-router": {
"version": "3.4.9", "version": "3.4.9",
"resolved": "https://registry.npm.taobao.org/vue-router/download/vue-router-3.4.9.tgz?cache=0&sync_timestamp=1607347184356&other_urls=https%3A%2F%2Fregistry.npm.taobao.org%2Fvue-router%2Fdownload%2Fvue-router-3.4.9.tgz", "resolved": "https://registry.npm.taobao.org/vue-router/download/vue-router-3.4.9.tgz?cache=0&sync_timestamp=1607347184356&other_urls=https%3A%2F%2Fregistry.npm.taobao.org%2Fvue-router%2Fdownload%2Fvue-router-3.4.9.tgz",

+ 31
- 8
src/views/Home.vue View File

<p class="utils" v-else>(mg/L)</p> <p class="utils" v-else>(mg/L)</p>
</div> </div>
<point-qulity :dataList="pointParamsData"></point-qulity> <point-qulity :dataList="pointParamsData"></point-qulity>
<p class="pointId">点号</p>
</div> </div>


<el-menu-item-group> <el-menu-item-group>
<template slot="title">反演结果</template> <template slot="title">反演结果</template>
<el-menu-item v-for="($item, $index) in item.item" <el-menu-item v-for="($item, $index) in item.item"
:key="$index" :index="index + $index+1+''" @click="selectParams($item.type, $item.value, index, $index)">{{$item.name}}: {{ $item.cf }}</el-menu-item>
:key="$index" :index="index + $index+1+''" @click="selectParams($item.type, $item.value, index, $index)" :class="{paramsActive:checkedParamsActive==$item.type}">{{$item.name}}: {{ $item.cf }}</el-menu-item>
</el-menu-item-group> </el-menu-item-group>
<el-menu-item-group> <el-menu-item-group>
<template slot="title">风险源</template> <template slot="title">风险源</template>
<input type="checkbox" id="google" :checked="isChecked == 'google'" /> <input type="checkbox" id="google" :checked="isChecked == 'google'" />
</div> </div>
<div class="mapItem"> <div class="mapItem">
<label class="mapText" for="UAV" :class="{ mapActive: isUAV }"
<label class="unaMap" for="UAV" :class="{ mapActive: isUAV }"
>无人机影像图</label >无人机影像图</label
> >
<input type="checkbox" id="UAV" :checked="isUAV" /> <input type="checkbox" id="UAV" :checked="isUAV" />
showColor: false, // 控制色带显示影藏 showColor: false, // 控制色带显示影藏
checkedRiver: 0, // 当前河道 checkedRiver: 0, // 当前河道
checkedParams: 'cod', // 当前参数 checkedParams: 'cod', // 当前参数
checkedParamsActive: '', // 当前选中参数高亮显示
checkedRef: false, // 当前主题,是否被选中 checkedRef: false, // 当前主题,是否被选中
checkedPointParams: 0, // 当前采样点参数 checkedPointParams: 0, // 当前采样点参数
isChecked: "google", // isChecked: "google", //
this.sourceDong4.updateParams({ layers: "show:" + id }); this.sourceDong4.updateParams({ layers: "show:" + id });
// 2.显示色带以及相应的值 // 2.显示色带以及相应的值
this.showColor = true; this.showColor = true;
this.checkedParams = type
this.checkedParams = type;
this.checkedParamsActive = type
let l = 4 * this.checkedRiver; let l = 4 * this.checkedRiver;
for (let i = l; i < l + 4; i++) { for (let i = l; i < l + 4; i++) {
this.colorList.push(this.allcolorList[i]); this.colorList.push(this.allcolorList[i]);
// 选择河道 // 选择河道
selectRiver(index) { selectRiver(index) {
this.isParams = 'cod' this.isParams = 'cod'
this.checkedParamsActive = ''
this.checkedPointParams = 0 this.checkedPointParams = 0
// 初始化this.colorList 东风河 // 初始化this.colorList 东风河
// 1.根据所选河道变换对应的位置以及缩放信息 // 1.根据所选河道变换对应的位置以及缩放信息
.cancelChart { .cancelChart {
width: 100%; width: 100%;
padding: 10px 20px 0 0; padding: 10px 20px 0 0;
font-size: 20px;
font-size: 16px;
color: rgba(51, 51, 51, 0.822); color: rgba(51, 51, 51, 0.822);
text-align: end; text-align: end;
} }
text-align: start; text-align: start;
padding-left: 40px; padding-left: 40px;
} }
.pointId {
font-size: 12px;
color: #666;
text-align: end;
padding-right: 30px;
margin-bottom: 15px;
}
.placeChart { .placeChart {
width: 100%; width: 100%;
/* padding: 10px; */ /* padding: 10px; */
justify-content: space-around; justify-content: space-around;
align-items: center; align-items: center;
} }
.mapItem {
display: flex;
}
.mapText { .mapText {
width: 60px; width: 60px;
height: 24px; height: 24px;
padding: 4px 8px;
color: #333333; color: #333333;
font-size: 12px; font-size: 12px;
font-weight: 600; font-weight: 600;
line-height: 20px;
line-height: 24px;
background-color: #ffffff;
cursor: pointer;
}
.unaMap {
width: 90px;
height: 24px;
color: #333333;
font-size: 12px;
font-weight: 600;
line-height: 24px;
background-color: #ffffff; background-color: #ffffff;
cursor: pointer; cursor: pointer;
} }


/* 高亮显示 */ /* 高亮显示 */
.btnActive { .btnActive {
background-color: #2b7b8a;
background-color: #0091FF;
} }
.riverActive { .riverActive {
background-image: url("../assets/img/gisdemo/river-h.png"); background-image: url("../assets/img/gisdemo/river-h.png");
background-size: cover; background-size: cover;
} }
.paramsActive { .paramsActive {
background-color: #2b7b8a;
background-color: #0091FF !important;
} }
.mapActive { .mapActive {
color: #fff; color: #fff;

+ 2
- 2
src/views/leftCompoents/landUse.vue View File

const chart = new Chart({ const chart = new Chart({
  container: 'landUse',   container: 'landUse',
//   autoFit: true, //   autoFit: true,
width: 320,
width: 330,
  height: 230,   height: 230,
padding: [0, 30, 10, 60],
padding: [0, 40, 10, 60],
}); });
chart.data(data); chart.data(data);
chart.scale('ratio', { chart.scale('ratio', {

+ 3
- 3
src/views/leftCompoents/outletComponents.vue View File

#outletComponents .paramsList { #outletComponents .paramsList {
width: 100%; width: 100%;
margin: 10 auto; margin: 10 auto;
padding: 10px;
padding: 0 10px;
list-style: none; list-style: none;
display: flex; display: flex;
flex-direction: column; flex-direction: column;
align-items: flex-start; align-items: flex-start;
} }
.value { .value {
width: 80%;
width: 100%;
margin-top: 8px; margin-top: 8px;
display: flex; display: flex;
flex-direction: column; flex-direction: column;
} }
.imgtitle { .imgtitle {
margin: 8px 0px; margin: 8px 0px;
font-weight: 600;
font-size: 14px;
} }
.closePopup { .closePopup {
width: 12px; width: 12px;

+ 1
- 1
src/views/leftCompoents/pointQulity.vue View File

container: "pointQulity", container: "pointQulity",
width: 300, width: 300,
height: 200, height: 200,
padding: [10, 30, 40, 50],
padding: [10, 10, 20, 40],
}); });


chart.data(data); chart.data(data);

Loading…
Cancel
Save