GeojsonQualityInspection.vue 11 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230231232233234235236237238239240241242243244245246247248249250251252253254255256257258259260261262263264265266267268269270271272273274275276277278279280281282283284285286287288289290291292293294295296297298299300301302303304305306307308309310311312313314315316317318319320321322323324325326327328329330331332333334335336337338339340341342343344345346347348349350351352353354355356357358359360361362363364365366367368369370371372373374375
  1. <template>
  2. <el-container>
  3. <el-row class="header">
  4. <el-button type="primary" @click="addRules">添加规则</el-button>
  5. </el-row>
  6. <div class="ruleContent" ref="ruleContent">
  7. <el-table
  8. ref="multipleTable"
  9. :data="checkDetail"
  10. border
  11. :max-height="tableMaxHeight"
  12. style="width: 100%"
  13. >
  14. <el-table-column prop="index" label="序号" width="50" align="center">
  15. </el-table-column>
  16. <el-table-column
  17. prop="name"
  18. label="是否检查"
  19. width="160"
  20. align="center"
  21. >
  22. <template slot-scope="scope">
  23. <el-radio v-model="scope.row.isCheck" :label="1">是</el-radio>
  24. <el-radio v-model="scope.row.isCheck" :label="0">否</el-radio>
  25. </template>
  26. </el-table-column>
  27. <el-table-column
  28. prop="checkContent"
  29. label="检查项"
  30. width="180"
  31. align="center"
  32. >
  33. <template slot-scope="scope">
  34. <!-- <div class="morerow" v-if="scope.row.children != undefined">
  35. <el-row v-for="(item, index) in scope.row.children" :key="index">
  36. <span> {{ item.checkContent }} </span>
  37. </el-row>
  38. </div>
  39. <span v-else> {{ scope.row.checkContent }} </span> -->
  40. <span> {{ scope.row.checkContent }} </span>
  41. </template>
  42. </el-table-column>
  43. <el-table-column prop="checkDescribe" label="描述" align="center">
  44. <template slot-scope="scope">
  45. <div class="morerow" v-if="scope.row.children != undefined">
  46. <el-row v-for="(item, index) in scope.row.children" :key="index">
  47. <span> {{ item.checkDescribe }} </span>
  48. </el-row>
  49. </div>
  50. <span v-else> {{ scope.row.checkDescribe }} </span>
  51. </template>
  52. </el-table-column>
  53. <el-table-column
  54. prop="fieldName"
  55. label="字段名称"
  56. width="200"
  57. align="center"
  58. >
  59. <template slot-scope="scope">
  60. <div class="morerow" v-if="scope.row.children != undefined">
  61. <el-row v-for="(item, index) in scope.row.children" :key="index">
  62. <el-input v-model="item.fieldName"></el-input>
  63. </el-row>
  64. </div>
  65. <el-input v-else v-model="scope.row.fieldName"></el-input>
  66. </template>
  67. </el-table-column>
  68. </el-table>
  69. </div>
  70. <el-row>
  71. <!-- <el-button class="uploadbtn" type="primary" @click="uploadFile">
  72. 上传文件
  73. </el-button> -->
  74. <el-upload
  75. class="uploadbtn"
  76. ref="upload"
  77. accept=".json"
  78. :action="''"
  79. :auto-upload="true"
  80. :show-file-list="false"
  81. :limit="1"
  82. :before-upload="uploadFile"
  83. >
  84. <el-button type="primary" class="add-item">上传文件</el-button>
  85. </el-upload>
  86. </el-row>
  87. </el-container>
  88. </template>
  89. <script>
  90. import qualityApi from "@/api/qualityinspection";
  91. export default {
  92. data() {
  93. return {
  94. tableMaxHeight: 450,
  95. defaultField: {
  96. index: 1,
  97. isCheck: 1,
  98. checkContent: "数据完整性",
  99. checkDescribe:
  100. "检查所填字段数据是否完整(可填写多个字段,会动态扩展行数)",
  101. fieldName: "",
  102. delBtn: true,
  103. type: "dataIntegrality",
  104. },
  105. checkDefaultDetail: [
  106. {
  107. index: 1,
  108. isCheck: 1,
  109. checkContent: "数据完整性",
  110. checkDescribe:
  111. "检查所填字段数据是否完整(可填写多个字段,会动态扩展行数)",
  112. fieldName: "",
  113. delBtn: true,
  114. type: "dataIntegrality",
  115. },
  116. {
  117. index: 2,
  118. isCheck: 1,
  119. checkContent: "省级行政区划编码检查",
  120. checkDescribe: '验证是否是以"13"开头的纯数字的行政区划编码',
  121. fieldName: "",
  122. delBtn: false,
  123. type: "provinceCode",
  124. },
  125. {
  126. index: 3,
  127. isCheck: 1,
  128. checkContent: "市级行政区划编码检查",
  129. checkDescribe: '验证是否是以"13"开头的纯数字且至少4位的行政区划编码',
  130. fieldName: "",
  131. type: "cityCode",
  132. delBtn: false,
  133. },
  134. {
  135. index: 4,
  136. isCheck: 1,
  137. checkContent: "县级行政区划编码检查",
  138. checkDescribe: '验证是否是以"13"开头的纯数字且至少6位的行政区划编码',
  139. fieldName: "",
  140. type: "countyCode",
  141. delBtn: false,
  142. },
  143. {
  144. index: 5,
  145. isCheck: 1,
  146. checkContent: "经纬度验证",
  147. checkDescribe: "经纬度是否在河北省境内",
  148. fieldName: "",
  149. type: "latlon",
  150. delBtn: false,
  151. children: [
  152. {
  153. checkDescribe: "验证所需经度字段名",
  154. fieldName: "",
  155. type: "lon",
  156. delBtn: false,
  157. },
  158. {
  159. checkDescribe: "验证所需纬度字段名",
  160. fieldName: "",
  161. type: "lat",
  162. delBtn: false,
  163. },
  164. ],
  165. },
  166. {
  167. index: 6,
  168. isCheck: 1,
  169. checkContent: "行政区划+经纬度验证",
  170. checkDescribe:
  171. "检查经纬度点位是否在行政区划范围内部,例:经纬度为116.4,39.9的位置是否在石家庄范围内",
  172. fieldName: "",
  173. type: "areaLatlon",
  174. delBtn: false,
  175. children: [
  176. {
  177. checkDescribe: "验证所需行政区划编码字段名",
  178. fieldName: "",
  179. type: "areaCode",
  180. delBtn: false,
  181. },
  182. {
  183. checkDescribe: "验证所需经度字段名",
  184. fieldName: "",
  185. type: "lon",
  186. delBtn: false,
  187. },
  188. {
  189. checkDescribe: "验证所需纬度字段名",
  190. fieldName: "",
  191. type: "lat",
  192. delBtn: false,
  193. },
  194. ],
  195. },
  196. ],
  197. checkDetail: [],
  198. };
  199. },
  200. components: {},
  201. mounted() {
  202. let that = this;
  203. this.checkDetail = JSON.parse(JSON.stringify(this.checkDefaultDetail));
  204. setTimeout(() => {
  205. that.resizeWindowEvent();
  206. }, 100);
  207. },
  208. methods: {
  209. // 重置表格高度
  210. resizeWindowEvent() {
  211. let that = this;
  212. this.tableInterval = setInterval(() => {
  213. if (that.$refs["ruleContent"]) {
  214. that.tableMaxHeight = that.$refs["ruleContent"].clientHeight;
  215. clearInterval(that.tableInterval);
  216. }
  217. }, 100);
  218. window.onresize = () => {
  219. return (() => {
  220. if (that.$refs["ruleContent"])
  221. that.tableMaxHeight = that.$refs["ruleContent"].clientHeight;
  222. })();
  223. };
  224. },
  225. addRules() {
  226. let obj = JSON.parse(JSON.stringify(this.defaultField));
  227. this.checkDetail.unshift(obj);
  228. this.checkDetail = this.checkDetail.map(function (item, index) {
  229. item.index = index + 1;
  230. return item;
  231. });
  232. },
  233. uploadFile(file) {
  234. let that = this;
  235. // let ceshiObj = {};
  236. let obj = new FormData();
  237. let completeArr = [];
  238. for (let i = 0; i < this.checkDetail.length; i++) {
  239. let param = this.checkDetail[i];
  240. if (param.isCheck) {
  241. if (!param.children) {
  242. switch (param.type) {
  243. case "dataIntegrality":
  244. if (that.webMessage(param.fieldName, param.checkContent))
  245. return;
  246. completeArr.push(param.fieldName);
  247. break;
  248. default:
  249. if (that.webMessage(param.fieldName, param.checkContent))
  250. return;
  251. obj.append(param.type, param.fieldName);
  252. // ceshiObj[param.type] = param.fieldName;
  253. break;
  254. }
  255. } else {
  256. let arr = [];
  257. for (let k = 0; k < param.children.length; k++) {
  258. const item = param.children[k];
  259. if (that.webMessage(item.fieldName, item.checkContent)) return;
  260. arr.push(item.fieldName);
  261. }
  262. obj.append(param.type, arr);
  263. // ceshiObj[param.type] = arr;
  264. }
  265. }
  266. }
  267. if (completeArr.length > 0) {
  268. obj.append("dataIntegrality", completeArr);
  269. // ceshiObj["dataIntegrality"] = completeArr;
  270. }
  271. const loading = this.$createLoading("数据质检中,请稍后!");
  272. obj.append("file", file);
  273. qualityApi
  274. .uploadInspectionFile(obj)
  275. .then((result) => {
  276. loading.close();
  277. if (result.code == 200) {
  278. that
  279. .$confirm(result.content, "质检结果", {
  280. showConfirmButton: false,
  281. cancelButtonText: "关闭",
  282. type: "success",
  283. })
  284. .then(() => {})
  285. .catch(() => {});
  286. } else {
  287. that
  288. .$confirm(result.content, "质检结果", {
  289. showConfirmButton: false,
  290. cancelButtonText: "关闭",
  291. type: "error",
  292. })
  293. .then(() => {})
  294. .catch(() => {});
  295. }
  296. })
  297. .catch((err) => {
  298. loading.close();
  299. that.$message({
  300. type: "error",
  301. message: err,
  302. });
  303. });
  304. return false;
  305. },
  306. webMessage(fieldName, str) {
  307. if (fieldName == "") {
  308. this.$message({
  309. message: "请完善" + str,
  310. type: "warning",
  311. });
  312. return true;
  313. }
  314. return false;
  315. },
  316. },
  317. };
  318. </script>
  319. <style lang="less" scoped>
  320. .el-container {
  321. display: block;
  322. width: 100%;
  323. padding: 10px 20px;
  324. box-sizing: border-box;
  325. background: #ffffff;
  326. overflow: hidden;
  327. overflow-y: auto;
  328. .el-row {
  329. line-height: 40px;
  330. &::before {
  331. display: unset;
  332. }
  333. }
  334. .header {
  335. margin-bottom: 10px;
  336. }
  337. .ruleContent {
  338. height: calc(100% - 110px);
  339. }
  340. .el-table {
  341. /deep/ .el-table--border .el-table__cell:first-child .cell {
  342. padding-left: unset;
  343. }
  344. /deep/ .cell {
  345. padding-left: unset;
  346. padding-right: unset;
  347. }
  348. .el-input {
  349. margin: 0 10px;
  350. width: calc(100% - 20px);
  351. }
  352. .morerow {
  353. .el-row {
  354. padding-bottom: 10px;
  355. border-bottom: 1px solid #eeeeee;
  356. &:last-child {
  357. padding-top: 10px;
  358. padding-bottom: 0px;
  359. border-bottom: 0px;
  360. }
  361. }
  362. }
  363. }
  364. .uploadbtn {
  365. float: right;
  366. margin-top: 10px;
  367. margin-right: 20px;
  368. }
  369. }
  370. </style>