CockpitVector.vue 13 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230231232233234235236237238239240241242243244245246247248249250251252253254255256257258259260261262263264265266267268269270271272273274275276277278279280281282283284285286287288289290291292293294295296297298299300301302303304305306307308309310311312313314315316317318319320321322323324325326327328329330331332333334335336337338339340341342343344345346347348349350351352353354355356357358359360361362363364365366367368369370371372373374375376377378379380381382383384385386387388389390391392393394395396397398399400401402403404405406407408409410411412413414415416417418419420421422423424425426427428429430431432433434435436437438439440441442443444445446447448449450451452453454455456457458459460461462463464465466467468469470471472473474475476477478479480481482483484485486487488489490491492493494495496497498499500501
  1. <template>
  2. <div class="CockpitVectorBox">
  3. <span class="clearBtn" @click="cockpit">
  4. <i class="iconfont iconSize el-icon-thumb" style="margin-top: 0px"></i>
  5. 图斑详情查询
  6. </span>
  7. <div class="cockpit_vector">
  8. <el-table
  9. :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. :data="
  17. baseData.filter(
  18. (item) =>
  19. item.name !== 'id' &&
  20. item.name !== 'geom' &&
  21. item.name !== 'type' &&
  22. item.name !== 'create_time' &&
  23. item.name !== 'val1' &&
  24. item.name !== 'val2' &&
  25. item.name !== 'xmmc' &&
  26. item.name !== 'zlmj' &&
  27. item.name !== 'tzje' &&
  28. item.name !== 'dataid' &&
  29. item.name !== 'did'
  30. )
  31. "
  32. style="width: 100%"
  33. >
  34. <el-table-column
  35. show-overflow-tooltip="true"
  36. prop="name"
  37. label="属性"
  38. width="140"
  39. >
  40. </el-table-column>
  41. <el-table-column
  42. show-overflow-tooltip="true"
  43. prop="value"
  44. label="属性值"
  45. >
  46. </el-table-column>
  47. </el-table>
  48. <div
  49. id="seaTransferCharts"
  50. ref="echartsRef"
  51. v-if="store.state.vectordataid"
  52. ></div>
  53. </div>
  54. </div>
  55. </template>
  56. <script>
  57. //这里可以导入其他文件(比如:组件,工具js,第三方插件js,json文件,图片文件等等)
  58. import { QueryList } from "@/api/cockpitNew";
  59. import * as wellknown from "wellknown";
  60. import * as turf from "@turf/turf";
  61. import * as echarts from "echarts";
  62. import { name } from "file-loader";
  63. import * as pick_cockpit_vector from "./pick_cockpit_vector.js";
  64. let pick_entity = null;
  65. export default {
  66. components: {},
  67. props: {
  68. baseData: {
  69. type: Object,
  70. default: function () {
  71. return {};
  72. },
  73. },
  74. },
  75. data() {
  76. return {
  77. restaurants: [],
  78. state: "",
  79. timeout: null,
  80. pick_entity: null,
  81. dataid: 0,
  82. };
  83. },
  84. //监听属性 类似于data概念
  85. computed: {
  86. vectordataid() {
  87. return store.state.vectordataid;
  88. },
  89. viewer_flag() {
  90. return store.state.viewer_flag;
  91. },
  92. },
  93. //监控data中的数据变化
  94. watch: {
  95. vectordataid: {
  96. immediate: true,
  97. handler(newValue) {
  98. this.dataid = newValue;
  99. if (newValue)
  100. this.$nextTick(() => {
  101. this.initChart();
  102. });
  103. },
  104. },
  105. viewer_flag(newVal) {
  106. if (newVal) {
  107. // viewer.dataSources.removeAll();
  108. store.state.vectordataid = 0;
  109. }
  110. },
  111. },
  112. //方法集合
  113. methods: {
  114. cockpit() {
  115. //驾驶舱矢量数据点选查询
  116. pick_cockpit_vector.init_handler();
  117. },
  118. build_data(geojson) {
  119. geojson.coordinates.forEach((res) => {
  120. const twoDArray = res[0];
  121. const oneDArray = twoDArray.reduce(
  122. (accumulator, currentValue) => accumulator.concat(currentValue),
  123. []
  124. );
  125. pick_entity.entities.add({
  126. polygon: {
  127. // 获取指定属性(positions,holes(图形内需要挖空的区域))
  128. hierarchy: {
  129. positions: Cesium.Cartesian3.fromDegreesArrayHeights(oneDArray),
  130. },
  131. // 边框
  132. outline: true,
  133. // 边框颜色
  134. outlineColor: Cesium.Color.RED,
  135. // 边框尺寸
  136. outlineWidth: 2,
  137. // 填充的颜色,withAlpha透明度
  138. material: Cesium.Color.GREEN.withAlpha(0),
  139. // 是否被提供的材质填充
  140. fill: true,
  141. // 恒定高度
  142. height: 1.1,
  143. // 显示在距相机的距离处的属性,多少区间内是可以显示的
  144. // distanceDisplayCondition: new Cesium.DistanceDisplayCondition(1000, 10000000),
  145. // 是否显示
  146. show: true,
  147. // 顺序,仅当`clampToGround`为true并且支持地形上的折线时才有效。
  148. zIndex: 10,
  149. },
  150. });
  151. // 注意:polygon首尾坐标要一致
  152. var polygon = turf.polygon([twoDArray]);
  153. var centroid = turf.centroid(polygon).geometry.coordinates;
  154. viewer.camera.flyTo({
  155. duration: 1,
  156. destination: Cesium.Cartesian3.fromDegrees(
  157. centroid[0],
  158. centroid[1],
  159. 3000
  160. ),
  161. // destination: {
  162. // x: -6283267.004204832,
  163. // y: 28123682.896774407,
  164. // z: 23709669.98539126
  165. // },
  166. orientation: {
  167. heading: 6.149339593573709,
  168. pitch: -1.539825618847483,
  169. roll: 0,
  170. },
  171. });
  172. });
  173. },
  174. async initChart(params) {
  175. const chartDom = this.$refs.echartsRef;
  176. let myChart = echarts.init(chartDom);
  177. let obj = {
  178. jscType: "jsc_hysyq_yhlx_zbmx_cx",
  179. beginTime: params ? params.beginTime : store.state.cockpit_date[0],
  180. endTime: params ? params.endTime : store.state.cockpit_date[1],
  181. id: params ? params.id : "4602",
  182. val0: this.dataid == 0 ? store.state.vectordataid : this.dataid,
  183. };
  184. let res = await QueryList(obj);
  185. const data = [];
  186. var total = 0;
  187. res.data.forEach((item, index) => {
  188. data.push({
  189. name: item["用海类型"],
  190. value: item["宗海面积(公顷)"],
  191. });
  192. total += Number(item["宗海面积(公顷)"]);
  193. });
  194. const color = [
  195. "#3591FF",
  196. "#2040B8",
  197. "#3EF6D1",
  198. "#0082CE",
  199. "#42DEED",
  200. "#C1CC77",
  201. "#00AB51",
  202. "#31B571",
  203. "#3351E3",
  204. ];
  205. const legendData = data.map((item, index) => {
  206. const tag = index % 6;
  207. return {
  208. name: item.name,
  209. itemStyle: {
  210. color: color[tag] || "",
  211. },
  212. textStyle: {
  213. rich: {
  214. title: {
  215. color: "#CDCEDA",
  216. fontSize: 14,
  217. width: 70,
  218. fontWeight: "bold",
  219. },
  220. p: {
  221. fontSize: 14,
  222. width: 55,
  223. color: "#02D0C5",
  224. shadowColor: "#000",
  225. inactiveColor: "#000",
  226. fontWeight: "bold",
  227. },
  228. },
  229. },
  230. };
  231. });
  232. let option = {
  233. //你的代码
  234. backgroundColor: "transparent",
  235. legend: {
  236. // type: 'scroll',
  237. show: true,
  238. // orient: "vertical",
  239. bottom: 0,
  240. // top: "center",
  241. itemGap: 5,
  242. borderRadius: 5,
  243. itemWidth: 10,
  244. icon: "circle",
  245. // itemHeight: 10,
  246. data: legendData,
  247. formatter: function (name) {
  248. const name1 = name.length > 5 ? `${name.substring(0, 4)}...` : name;
  249. const value = data.filter((item) => item.name === name)[0].value;
  250. // const proportion = data.filter((item) => item.name === name)[0].proportion;
  251. return `{title|${name1}} {p|${value}公顷}`;
  252. },
  253. },
  254. tooltip: {
  255. trigger: "item",
  256. backgroundColor: "rgba(13,5,30,.6)",
  257. borderWidth: 1,
  258. borderColor: "#32A1FF",
  259. padding: 5,
  260. textStyle: {
  261. color: "#fff",
  262. },
  263. formatter: (data) => {
  264. const { name = "", value = "" } = data.data || {};
  265. const name1 =
  266. name.length > 10
  267. ? `${name.substring(0, 10)} <br /> ${name.substring(
  268. 10,
  269. name.length
  270. )}`
  271. : name;
  272. return `${name1} ${value}公顷`;
  273. },
  274. },
  275. title: {
  276. // text: `{a|${total.toFixed(2)}}`+"{b|公顷}",
  277. text: `{a|${total.toFixed(2)}}`,
  278. textStyle: {
  279. rich: {
  280. a: {
  281. color: "#fff",
  282. fontSize: 18,
  283. align: "35%",
  284. },
  285. b: {
  286. fontSize: 14,
  287. color: "#fff",
  288. // fontWeight: "bold",
  289. align: "35%",
  290. },
  291. },
  292. },
  293. x: "35%",
  294. y: "35%",
  295. },
  296. series: [
  297. {
  298. name: "",
  299. type: "pie",
  300. radius: ["40%", "60%"],
  301. center: ["45%", "40%"],
  302. startAngle: 90,
  303. itemStyle: {
  304. shadowBlur: 10,
  305. shadowColor: "rgba(0, 103, 255, 0.2)",
  306. shadowOffsetX: -5,
  307. shadowOffsetY: 5,
  308. color: function (params) {
  309. return color[params.dataIndex % 6];
  310. },
  311. },
  312. label: {
  313. show: false,
  314. },
  315. labelLine: {},
  316. data: data,
  317. },
  318. ],
  319. };
  320. myChart.setOption(option);
  321. },
  322. },
  323. beforeCreate() {}, //生命周期 - 创建之前
  324. created() {}, //生命周期 - 创建完成(可以访问当前this实例)
  325. beforeMount() {}, //生命周期 - 挂载之前
  326. mounted() {
  327. const that = this;
  328. this.$nextTick(() => {
  329. pick_entity = new Cesium.CustomDataSource("pick_entity");
  330. viewer.dataSources.add(pick_entity);
  331. }); //生命周期 - 挂在完成
  332. }, //生命周期 - 挂在完成
  333. beforeUpdate() {}, //生命周期 - 更新之前
  334. updated() {}, //生命周期 - 更新之后
  335. beforeDestroy() {}, //生命周期 - 销毁之前
  336. destroy() {}, //生命周期 - 销毁完成
  337. activated() {}, //若组件实例是 <KeepAlive> 缓存树的一部分,当组件被插入到 DOM 中时调用。
  338. deactivated() {}, //若组件实例是 <KeepAlive> 缓存树的一部分,当组件从 DOM 中被移除时调用。
  339. };
  340. </script>
  341. <style scoped lang="scss">
  342. .CockpitVectorBox {
  343. // color: #198ec0;
  344. position: absolute;
  345. top: 6rem;
  346. width: 100%;
  347. height: 100%;
  348. .clearBtn {
  349. cursor: pointer;
  350. background-color: #3f94f53f;
  351. border: 1px solid #3f93f5;
  352. color: #b6e0ff;
  353. padding: 5px 15px;
  354. display: inline-block;
  355. margin: 10px 0;
  356. &:hover {
  357. font-weight: bold;
  358. }
  359. }
  360. }
  361. .list_vector {
  362. background-image: url("/static/images/ghzc/内容框.png");
  363. width: 20rem;
  364. border-top: 1px solid #ccc;
  365. font-size: 14px;
  366. padding: 1rem;
  367. // border-bottom:1px solid #CCC ;
  368. }
  369. .list_vector:last-child {
  370. border-bottom: 1px solid #ccc;
  371. }
  372. .cockpit_vector {
  373. width: 100%;
  374. height: 100%;
  375. overflow: auto;
  376. overflow-x: hidden;
  377. // z-index: -1;
  378. }
  379. /deep/.el-input__inner:focus {
  380. border: 1px solid #1fb1ef;
  381. }
  382. /deep/.el-input__inner {
  383. border: 1px solid #1fb1ef;
  384. background: rgba(0, 80, 111, 0.8);
  385. border-radius: 18px;
  386. height: 30px;
  387. color: white;
  388. line-height: 30px;
  389. // background: #ffffff3b;
  390. }
  391. /deep/.el-input__icon {
  392. line-height: 30px;
  393. border-radius: 0 18px 18px 0;
  394. cursor: pointer;
  395. }
  396. /deep/.el-input__suffix {
  397. background: #1fb1ef;
  398. right: 1px;
  399. padding: 0 5px;
  400. border-radius: 0 18px 18px 0;
  401. opacity: 0.8;
  402. color: #fff;
  403. }
  404. /deep/ .el-autocomplete-suggestion {
  405. margin-top: 8px;
  406. border-radius: 6px;
  407. border: 1px solid #198ec0;
  408. background: rgba(0, 80, 111, 0.6);
  409. color: rgba(25, 142, 192, 1);
  410. .popper__arrow {
  411. top: -8px;
  412. border-bottom-color: rgba(31, 177, 239, 1);
  413. }
  414. .popper__arrow::after {
  415. border-bottom-color: rgba(0, 80, 111, 0.9);
  416. }
  417. .el-autocomplete-suggestion__wrap {
  418. padding: 2px;
  419. }
  420. }
  421. /deep/ .el-autocomplete-suggestion li {
  422. color: #ffffff;
  423. }
  424. /deep/ .el-autocomplete-suggestion li:hover {
  425. background-color: rgba(8, 162, 223, 0.8);
  426. border-radius: 6px;
  427. }
  428. .list_vector_multi {
  429. background-image: url("/static/images/ghzc/内容框.png");
  430. width: 20rem;
  431. border-top: 1px solid #ccc;
  432. font-size: 14px;
  433. padding: 0.5rem 0rem 0.5rem 0rem;
  434. border-left: 1px solid #ccc;
  435. border-right: 1px solid #ccc;
  436. }
  437. .list_vector_multi:last-child {
  438. border-bottom: 1px solid #ccc;
  439. }
  440. /deep/ .el-table tr {
  441. background: rgba(10, 25, 38, 0.5) !important;
  442. }
  443. /deep/ .el-table td.el-table__cell,
  444. .el-table th.el-table__cell.is-leaf {
  445. background: rgba(10, 25, 38, 0.5) !important;
  446. border-bottom: 0px solid #ebeef5;
  447. }
  448. .el-table {
  449. color: #fff;
  450. background: rgba(10, 25, 38, 0.5) !important;
  451. }
  452. /deep/ .el-table__fixed-right::before,
  453. .el-table__fixed::before {
  454. background: rgba(10, 25, 38, 0.9) !important;
  455. }
  456. /deep/ .el-table__fixed-right-patch {
  457. background: rgba(10, 25, 38, 0.9) !important;
  458. }
  459. /deep/ .el-table--border::after,
  460. .el-table--group::after,
  461. .el-table::before {
  462. background: rgba(10, 25, 38, 0) !important;
  463. }
  464. #seaTransferCharts {
  465. width: 100%;
  466. height: 13rem;
  467. background-color: rgba(10, 25, 38, 0.9) !important;
  468. }
  469. </style>