BoxCommonVector.vue 18 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230231232233234235236237238239240241242243244245246247248249250251252253254255256257258259260261262263264265266267268269270271272273274275276277278279280281282283284285286287288289290291292293294295296297298299300301302303304305306307308309310311312313314315316317318319320321322323324325326327328329330331332333334335336337338339340341342343344345346347348349350351352353354355356357358359360361362363364365366367368369370371372373374375376377378379380381382383384385386387388389390391392393394395396397398399400401402403404405406407408409410411412413414415416417418419420421422423424425426427428429430431432433434435436437438439440441442443444445446447448449450451452453454455456457458459460461462463464465466467468469470471472473474475476477478479480481482483484485486487488489490491492493494495496497498499500501502503504505506507508509510511512513514515516517518519520521522523524525526527528529530531532533534535536537538539540541542543544545546547548549550551552553554555556557558559560561562563564565566567568569570571572573574575576577578579580581582583584585586587588589590591592593594
  1. <template>
  2. <div class="BoxCommonVector" v-if="title">
  3. <div class="innerContainerVector leftPaneVector">
  4. <h2 class="PangetitleVector">
  5. <span class="pange_textVector">{{ title }}</span>
  6. </h2>
  7. <i class="el-icon-close" @click="close"></i>
  8. <el-input clearable v-model="state" @input="change_witch" class="search" placeholder="请输入内容"></el-input>
  9. <el-table :data="active_dableData" style="width: 100%" height="650" :header-cell-style="{
  10. background: 'rgba(10, 25, 38, 0.6)',
  11. color: '#66b1ff',
  12. fontSize: '14px',
  13. fontFamily: 'Microsoft YaHei',
  14. fontWeight: '400',
  15. }">
  16. <el-table-column show-overflow-tooltip="true" v-for="(index, item) in store.state.cockpit_vector.columns"
  17. :key="index" width="120" :prop="store.state.cockpit_vector.columns[item]"
  18. :label="store.state.cockpit_vector.columns[item]">
  19. </el-table-column>
  20. <el-table-column fixed="right" label="操作" width="50">
  21. <template slot-scope="scope">
  22. <!-- <el-button @click="info(scope.row)" type="text" size="small">详情</el-button> -->
  23. <el-button @click="go(scope.row)" type="text" size="small">定位</el-button>
  24. </template>
  25. </el-table-column>
  26. </el-table>
  27. </div>
  28. </div>
  29. </template>
  30. <script>
  31. import { QueryList } from '@/api/cockpitNew'
  32. import * as tdsy from "@/views/cockpit/js/tdsy";
  33. import * as wellknown from "wellknown";
  34. import * as turf from "@turf/turf";
  35. let BoxCommonVector_entity = null;
  36. export default {
  37. data() {
  38. return {
  39. state: '',
  40. timeout: null,
  41. title: "",
  42. active_dableData: null,
  43. tableData: null,
  44. };
  45. },
  46. methods: {
  47. multiPolygonToPolygons(multiPolygon) {
  48. const polygons = [];
  49. multiPolygon.coordinates.forEach(polygonCoordinates => {
  50. polygons.push({
  51. type: 'Polygon',
  52. coordinates: polygonCoordinates
  53. });
  54. });
  55. return polygons;
  56. },
  57. // draw_vector_tdgy_gy_jd(data) {
  58. // const that = this;
  59. // data.forEach((res) => {
  60. // res.type = this.title
  61. // if (res.geom) {
  62. // res.geom.coordinates.forEach((res_coordinates) => {
  63. // // let arrayt = [];
  64. // // if (res_coordinates.length == 1) {
  65. // // arrayt = res_coordinates[0]
  66. // // const twoDArray = arrayt;
  67. // // const oneDArray = twoDArray.reduce((accumulator, currentValue) => accumulator.concat(currentValue), []);
  68. // // tdsy.add(res, oneDArray);
  69. // // } else {
  70. // // // arrayt = res_coordinates
  71. // // }
  72. // // 多面转单面
  73. // // if (res.geom.type == 'MultiPolygon') {
  74. // // let polygons = that.multiPolygonToPolygons(geojson);
  75. // // // 在
  76. // // polygons.forEach((res) => {
  77. // // that.add_viewer_for_vector(res, data);
  78. // // tdsy.add(res, oneDArray);
  79. // // })
  80. // // } else {
  81. // // }
  82. // })
  83. // }
  84. // })
  85. // },
  86. draw_vector_tdgy_gy_jd(data) {
  87. // tdsy.remove();
  88. data.forEach((res) => {
  89. res.type = this.title
  90. if (res.geom) {
  91. res.geom.coordinates.forEach((res_coordinates) => {
  92. let arrayt = [];
  93. if (res_coordinates.length == 1) {
  94. arrayt = res_coordinates[0]
  95. } else {
  96. arrayt = res_coordinates
  97. }
  98. const twoDArray = arrayt;
  99. const oneDArray = twoDArray.reduce((accumulator, currentValue) => accumulator.concat(currentValue), []);
  100. tdsy.add(res, oneDArray);
  101. })
  102. }
  103. })
  104. },
  105. close() {
  106. store.setViewerFlagb(true);
  107. tdsy.remove();
  108. store.state.vectorData = [];
  109. store.setToolBarAction(9);
  110. },
  111. info() { },
  112. switch_show(flag) {
  113. BoxCommonVector_entity.entities.values.forEach((res) => {
  114. res.show = flag;
  115. })
  116. },
  117. build_data(geojson) {
  118. geojson.coordinates.forEach((res) => {
  119. const twoDArray = res[0];
  120. const oneDArray = twoDArray.reduce((accumulator, currentValue) => accumulator.concat(currentValue), []);
  121. BoxCommonVector_entity.entities.add({
  122. polygon: {
  123. // 获取指定属性(positions,holes(图形内需要挖空的区域))
  124. hierarchy: {
  125. positions: Cesium.Cartesian3.fromDegreesArrayHeights(oneDArray),
  126. },
  127. // 边框
  128. outline: true,
  129. // 边框颜色
  130. outlineColor: Cesium.Color.RED,
  131. // 边框尺寸
  132. outlineWidth: 10,
  133. // 填充的颜色,withAlpha透明度
  134. material: Cesium.Color.GREEN.withAlpha(0),
  135. // 是否被提供的材质填充
  136. fill: true,
  137. // 恒定高度
  138. height: 1.1,
  139. // 显示在距相机的距离处的属性,多少区间内是可以显示的
  140. // distanceDisplayCondition: new Cesium.DistanceDisplayCondition(1000, 10000000),
  141. // 是否显示
  142. show: true,
  143. // 顺序,仅当`clampToGround`为true并且支持地形上的折线时才有效。
  144. zIndex: 10
  145. }
  146. });
  147. // 注意:polygon首尾坐标要一致
  148. var polygon = turf.polygon([twoDArray]);
  149. var centroid = turf.centroid(polygon).geometry.coordinates;
  150. viewer.camera.flyTo({
  151. duration: 1,
  152. destination: Cesium.Cartesian3.fromDegrees(centroid[0], centroid[1], 3000),
  153. // destination: {
  154. // x: -6283267.004204832,
  155. // y: 28123682.896774407,
  156. // z: 23709669.98539126
  157. // },
  158. orientation: {
  159. heading: 6.149339593573709,
  160. pitch: -1.539825618847483,
  161. roll: 0
  162. },
  163. });
  164. })
  165. },
  166. go(item) {
  167. let arr = [];
  168. const that = this;
  169. // BoxCommonVector_entity = new Cesium.CustomDataSource("BoxCommonVector_entity");
  170. // viewer.dataSources.add(BoxCommonVector_entity);
  171. Object.keys(item).forEach(key => {
  172. arr.push({
  173. "name": key,
  174. "value": item[key],
  175. });
  176. if (key == 'geom') {
  177. console.log();
  178. let geojson = item[key];
  179. if (geojson.type == 'MultiPolygon') {
  180. this.build_data(geojson);
  181. } else {
  182. const twoDArray = geojson.coordinates[0];
  183. const oneDArray = twoDArray.reduce((accumulator, currentValue) => accumulator.concat(currentValue), []);
  184. BoxCommonVector_entity.entities.add({
  185. polygon: {
  186. // 获取指定属性(positions,holes(图形内需要挖空的区域))
  187. hierarchy: {
  188. positions: Cesium.Cartesian3.fromDegreesArrayHeights(oneDArray),
  189. },
  190. // 边框
  191. outline: true,
  192. // 边框颜色
  193. outlineColor: Cesium.Color.RED,
  194. // 边框尺寸
  195. outlineWidth: 10,
  196. // 填充的颜色,withAlpha透明度
  197. material: Cesium.Color.GREEN.withAlpha(0),
  198. // 是否被提供的材质填充
  199. fill: true,
  200. // 恒定高度
  201. height: 1.1,
  202. // 显示在距相机的距离处的属性,多少区间内是可以显示的
  203. // distanceDisplayCondition: new Cesium.DistanceDisplayCondition(1000, 10000000),
  204. // 是否显示
  205. show: true,
  206. // 顺序,仅当`clampToGround`为true并且支持地形上的折线时才有效。
  207. zIndex: 10
  208. }
  209. });
  210. // 注意:polygon首尾坐标要一致
  211. var polygon = turf.polygon([geojson.coordinates[0]]);
  212. var centroid = turf.centroid(polygon).geometry.coordinates;
  213. viewer.camera.flyTo({
  214. duration: 1,
  215. destination: Cesium.Cartesian3.fromDegrees(centroid[0], centroid[1], 3000),
  216. // destination: {
  217. // x: -6283267.004204832,
  218. // y: 28123682.896774407,
  219. // z: 23709669.98539126
  220. // },
  221. orientation: {
  222. heading: 6.149339593573709,
  223. pitch: -1.539825618847483,
  224. roll: 0
  225. },
  226. });
  227. }
  228. let flag = true;
  229. let time = setInterval(() => {
  230. flag = !flag
  231. that.switch_show(flag);
  232. }, 500);
  233. setTimeout(() => {
  234. clearInterval(time);
  235. for (var i = 0; i < 10; i++) {
  236. BoxCommonVector_entity.entities.values.forEach((res) => {
  237. BoxCommonVector_entity.entities.remove(res);
  238. })
  239. }
  240. }, 6000)
  241. }
  242. });
  243. store.state.vectorData = arr
  244. store.setActiveToolBar(9);
  245. },
  246. change_witch() {
  247. this.get_search(this.state);
  248. },
  249. get_search(word) {
  250. if (word.length == 0) {
  251. this.active_dableData = this.tableData;
  252. } else {
  253. let gy_ju = {
  254. beginTime: store.state.cockpit_date[0],
  255. endTime: store.state.cockpit_date[1],
  256. jscType: store.state.cockpit_vector.tablejscType + '_cx',
  257. id: '4602',
  258. val0: word,
  259. }
  260. if (this.title == '土地供应完成项目' || this.title == '山水工程完成项目') {
  261. gy_ju.beginTime = undefined
  262. gy_ju.endTime = undefined
  263. }
  264. // let bj_sl = {
  265. // beginTime: store.state.cockpit_date[0],
  266. // endTime: store.state.cockpit_date[1],
  267. // jscType: 'jsc_bjxm_csbj_zbmx_cx',
  268. // id: '4602',
  269. // val0: word,
  270. // }
  271. Promise.all([QueryList(gy_ju)]).then((values) => {
  272. values[0].data.map((res) => {
  273. if (res.geom) {
  274. res.geom = wellknown.parse(res.geom.split(";")[1]);
  275. }
  276. })
  277. this.active_dableData = values[0].data
  278. }).catch((error) => {
  279. console.error(error); // 如果有任何一个 promise 失败,则捕获这个错误
  280. });
  281. }
  282. },
  283. async init_vector(params) {
  284. const that = this;
  285. let obj = {
  286. jscType: store.state.cockpit_vector.tablejscType,
  287. beginTime: store.state.cockpit_date[0],
  288. endTime: store.state.cockpit_date[1],
  289. id: params ? params.id : "4602",
  290. };
  291. if (this.title == '土地供应完成项目' || this.title == '山水工程完成项目') {
  292. obj.beginTime = undefined
  293. obj.endTime = undefined
  294. }
  295. if (this.title == '进出平衡') {
  296. obj.jscType = "jsc_gdbh_jcph_zbmc",
  297. obj.val2 = 0,
  298. obj.val1 = 50000,
  299. obj.beginTime = store.state.cockpit_date[1].slice(0, 4),
  300. obj.endTime = undefined
  301. }
  302. if (this.title == '土地收储计划项目') {
  303. obj.beginTime = undefined
  304. obj.endTime = undefined
  305. }
  306. let data = await QueryList(obj);
  307. data.data.map((res) => {
  308. if (res.geom) {
  309. res.geom = wellknown.parse(res.geom.split(";")[1]);
  310. }
  311. });
  312. this.active_dableData = data.data
  313. this.tableData = data.data
  314. },
  315. },
  316. computed: {
  317. cockpit_vector() {
  318. return store.state.cockpit_vector;
  319. },
  320. },
  321. watch: {
  322. cockpit_vector(newVal, oldVal) {
  323. this.title = newVal.title
  324. if (newVal.tableData.length > 0) {
  325. this.active_dableData = newVal.tableData
  326. this.tableData = newVal.tableData
  327. this.init_vector()
  328. } else {
  329. this.init_vector()
  330. }
  331. if (newVal.goitem) {
  332. this.go(newVal.goitem)
  333. }
  334. },
  335. active_dableData(newVal, oldVal) {
  336. this.draw_vector_tdgy_gy_jd(newVal);
  337. }
  338. },
  339. mounted() {
  340. const that = this;
  341. this.$nextTick(() => {
  342. BoxCommonVector_entity = new Cesium.CustomDataSource("BoxCommonVector_entity");
  343. viewer.dataSources.add(BoxCommonVector_entity);
  344. });
  345. }
  346. };
  347. </script>
  348. <style lang="scss" scoped>
  349. .BoxCommonVector {
  350. width: 100%;
  351. height: 100%;
  352. position: absolute;
  353. left: -1rem;
  354. top: 0rem;
  355. }
  356. .innerContainerVector {
  357. width: 350px;
  358. height: 760px; //calc(100% - 20px);
  359. position: absolute;
  360. top: 28px;
  361. z-index: 99;
  362. background-image: url("/static/images/ghzc/内容框.png");
  363. background-size: 100% 100%;
  364. border-top-right-radius: 15px;
  365. .search {
  366. // margin: 2rem;
  367. }
  368. /deep/ .el-input {
  369. display: inline-block;
  370. }
  371. /deep/ .el-input__inner {
  372. // background: transparent !important;
  373. color: white !important;
  374. background: rgba(10, 25, 38, 0.5);
  375. border-color: #5ecef09a;
  376. // color: #64daff;
  377. // font-size: 12px;
  378. }
  379. }
  380. .leftPaneVector {
  381. left: 20px;
  382. .el-icon-close {
  383. width: 22px;
  384. height: 22px;
  385. color: #fff !important;
  386. background-color: #335f87;
  387. line-height: 23px;
  388. padding: 0 5px;
  389. border-radius: 4px;
  390. top: -1.9rem !important;
  391. position: relative;
  392. right: -19.5rem;
  393. }
  394. .PangetitleVector {
  395. box-sizing: border-box;
  396. width: 100%;
  397. height: 35px;
  398. background: url("/static/images/overview/titlebox.gif") no-repeat !important;
  399. background-size: 100% 100% !important;
  400. line-height: 35px;
  401. font-size: 14px;
  402. padding-left: 15px;
  403. display: flex;
  404. position: relative;
  405. overflow: hidden;
  406. }
  407. .pange_textVector {
  408. font-size: 14px !important;
  409. font-family: 'HarmonyOS Sans, HarmonyOS Sans';
  410. font-weight: bold;
  411. font-size: 18px;
  412. color: #FFFFFF;
  413. margin-left: 30px;
  414. }
  415. }
  416. /deep/.el-input__inner:focus {
  417. border: 1px solid #1fb1ef;
  418. }
  419. /deep/.el-input__inner {
  420. border: 1px solid rgba(10, 25, 38, 0.5);
  421. background: rgba(10, 25, 38, 0.5);
  422. border-radius: 18px;
  423. height: 30px;
  424. color: white;
  425. line-height: 30px;
  426. // background: #ffffff3b;
  427. }
  428. /deep/.el-input__icon {
  429. line-height: 30px;
  430. border-radius: 0 18px 18px 0;
  431. cursor: pointer;
  432. }
  433. /deep/.el-input__suffix {
  434. background: #1fb1ef;
  435. right: 1px;
  436. padding: 0 5px;
  437. border-radius: 0 18px 18px 0;
  438. opacity: 0.8;
  439. color: #fff;
  440. }
  441. /deep/ .el-autocomplete-suggestion {
  442. margin-top: 8px;
  443. border-radius: 6px;
  444. border: 1px solid #198ec0;
  445. background: rgba(10, 25, 38, 0.9);
  446. color: rgba(25, 142, 192, 1);
  447. .popper__arrow {
  448. top: -8px;
  449. border-bottom-color: rgba(31, 177, 239, 1);
  450. }
  451. .popper__arrow::after {
  452. border-bottom-color: rgba(0, 80, 111, 0.9);
  453. }
  454. .el-autocomplete-suggestion__wrap {
  455. padding: 2px;
  456. }
  457. }
  458. /deep/ .el-autocomplete-suggestion li {
  459. color: #ffffff;
  460. }
  461. /deep/ .el-autocomplete-suggestion li:hover {
  462. background-color: rgba(8, 162, 223, 0.8);
  463. border-radius: 6px;
  464. }
  465. /deep/ .el-table tr {
  466. background: rgba(10, 25, 38, 0.5) !important;
  467. }
  468. /deep/ .el-table td.el-table__cell,
  469. .el-table th.el-table__cell.is-leaf {
  470. background: rgba(10, 25, 38, 0.5) !important;
  471. border-bottom: 0px solid #EBEEF5;
  472. }
  473. .el-table {
  474. color: #fff;
  475. background: rgba(10, 25, 38, 0.5) !important;
  476. }
  477. /deep/ .el-table__fixed-right::before,
  478. .el-table__fixed::before {
  479. background: rgba(10, 25, 38, 0.9) !important;
  480. }
  481. /deep/ .el-table__fixed-right-patch {
  482. background: rgba(10, 25, 38, 0.9) !important;
  483. }
  484. /deep/ .el-table--border::after,
  485. .el-table--group::after,
  486. .el-table::before {
  487. background: rgba(10, 25, 38, 0) !important;
  488. }
  489. </style>