LayerManageSplit.vue 8.1 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230231232233234235236237238239240241242243244245246247248249250251252253254255256257258259260261262263264265266267268269270271272273274275276277278279280281282283284285286287288289290291292293294295296297298
  1. <template>
  2. <div class="sm-panel" v-if="LayerManageShow">
  3. <div class="sm-panel-header">
  4. <span>{{ Resource.LayerManage }}</span>
  5. <span class="closeBtn" @click="toggleVisibility">&times;</span>
  6. </div>
  7. <Tabs value="">
  8. <TabPane :label="Resource.Resource" name="zyml">
  9. <div class="zyml" :class="$props.splitId ? `zymlsplit` : ''">
  10. <el-input
  11. :placeholder="Resource.InputPlaceholder"
  12. prefix-icon="el-icon-search"
  13. v-model="treeSearchText"
  14. size="small"
  15. >
  16. </el-input>
  17. <div class="treeDiv">
  18. <el-tree
  19. @check="handleCheckChange"
  20. class="filter-tree"
  21. :data="TreeDatas"
  22. show-checkbox
  23. :props="defaultProps"
  24. :filter-node-method="filterNode"
  25. :default-checked-keys="checkedKeys"
  26. node-key="id"
  27. ref="tree"
  28. >
  29. <span class="custom-tree-node" slot-scope="{ node, data }">
  30. <span>{{ node.label }}</span>
  31. <span>
  32. <Icon
  33. :type="!data.favorite ? 'ios-star-outline' : 'ios-star'"
  34. color="green"
  35. size="18"
  36. class="opBtn"
  37. :title="
  38. data.favorite ? Resource.DelCollect : Resource.AddCollect
  39. "
  40. @click="favoriteHandle(data)"
  41. v-if="data.url != ''"
  42. />
  43. </span>
  44. </span>
  45. </el-tree>
  46. </div>
  47. </div>
  48. </TabPane>
  49. <TabPane
  50. :label="Resource.LayerOptions"
  51. name="tckz"
  52. v-if="!$props.splitId"
  53. >
  54. <div class="tckz">
  55. <List split size="large">
  56. <ListItem v-for="(item, index) in addlayerdata" :key="index">
  57. {{ item.title }}
  58. <div class="listBtn">
  59. <i-switch
  60. v-model="item.visible"
  61. size="small"
  62. @on-change="visibleChange(item, $event)"
  63. >
  64. <template #open>
  65. <span></span>
  66. </template>
  67. <template #close>
  68. <span></span>
  69. </template>
  70. </i-switch>
  71. <Icon
  72. type="md-arrow-round-up"
  73. color="green"
  74. size="18"
  75. class="opBtn"
  76. :title="Resource.MoveUpOneLevel"
  77. @click="raise(item)"
  78. v-if="
  79. index > 0 && (item.type == 'Vector' || item.type == 'IMG')
  80. "
  81. />
  82. <Icon
  83. type="md-arrow-round-down"
  84. color="green"
  85. size="18"
  86. class="opBtn"
  87. :title="Resource.MoveDownOneLevel"
  88. @click="lower(item)"
  89. v-if="
  90. index < addlayerdata.length - 1 &&
  91. (item.type == 'Vector' || item.type == 'IMG')
  92. "
  93. />
  94. <Icon
  95. type="md-locate"
  96. color="green"
  97. size="18"
  98. class="opBtn"
  99. :title="Resource.location"
  100. @click="location(item)"
  101. />
  102. </div>
  103. <div class="sliderBtn" v-if="item.type != 'Terrain'">
  104. <Slider
  105. v-model="item.trans"
  106. @on-change="transSliderChange(item, $event)"
  107. ></Slider>
  108. </div>
  109. </ListItem>
  110. </List>
  111. </div>
  112. </TabPane>
  113. <TabPane :label="Resource.Favorite" name="collect">
  114. <div class="collect" :class="$props.splitId ? `collectsplit` : ''">
  115. <List split>
  116. <ListItem
  117. v-for="(item, index) in favoriteLayerList"
  118. :key="index"
  119. class="layerlist"
  120. >
  121. <Checkbox @on-change="checkboxChange(item, $event)">{{
  122. item.title
  123. }}</Checkbox>
  124. <div class="listBtn">
  125. <Icon
  126. type="ios-star"
  127. color="green"
  128. size="18"
  129. class="opBtn"
  130. :title="Resource.DelCollect"
  131. @click="favoriteHandle(item)"
  132. />
  133. </div>
  134. </ListItem>
  135. </List>
  136. </div>
  137. </TabPane>
  138. </Tabs>
  139. </div>
  140. </template>
  141. <script>
  142. import { Collect, GetResourceTree, GetMyCollect } from "@/api/map";
  143. export default {
  144. name: "LayerManageSplit",
  145. props: {
  146. splitId: {
  147. type: Number,
  148. default: false,
  149. },
  150. isshow: {
  151. type: Boolean,
  152. default: false,
  153. },
  154. checkedKeys: {
  155. type: Object,
  156. },
  157. },
  158. data() {
  159. return {
  160. defaultProps: {
  161. children: "children",
  162. label: "label",
  163. },
  164. treeSearchText: "",
  165. addlayerdata: [],
  166. favoriteLayerList: [],
  167. sharedState: store.state,
  168. TreeDatas: [
  169. {
  170. title: Resource.layerList,
  171. expand: true,
  172. // selected: true,
  173. // contextmenu: true,
  174. children: [],
  175. type: "ROOT",
  176. },
  177. ],
  178. };
  179. },
  180. computed: {
  181. LayerManageShow: function () {
  182. return this.$props.splitId
  183. ? this.$props.isshow
  184. : this.sharedState.toolBar[0];
  185. },
  186. },
  187. methods: {
  188. toggleVisibility() {
  189. this.$props.splitId ? this.$emit("close") : store.setToolBarAction(0);
  190. },
  191. setCheckedKeys(keys) {
  192. this.$refs.tree.setCheckedKeys(keys);
  193. },
  194. filterNode(value, data) {
  195. if (!value) return true;
  196. return data.label.indexOf(value) !== -1;
  197. },
  198. favoriteHandle(data) {
  199. // this.$emit("favoriteHandle", data);
  200. if (data.favorite) {
  201. data.favorite = null;
  202. for (let i = 0; i < this.favoriteLayerList.length; i++) {
  203. if (this.favoriteLayerList[i].id == data.id) {
  204. this.favoriteLayerList.splice(i, 1);
  205. }
  206. }
  207. } else {
  208. data.favorite = this.username;
  209. this.favoriteLayerList.push(data);
  210. }
  211. Collect(this.username, data.id).then((res) => {
  212. if (res.statuscode == 200) {
  213. this.$message({
  214. message: "操作成功",
  215. type: "success",
  216. });
  217. } else {
  218. this.$message.error(res.message);
  219. }
  220. });
  221. },
  222. favorite(data) {
  223. console.log(data);
  224. },
  225. checkboxChange(obj, checked, a) {
  226. obj.checked = checked;
  227. this.handleCheckChange(obj, checked);
  228. },
  229. visibleChange(obj, visible, a) {
  230. this.$emit("visibleChange", obj, visible, a);
  231. },
  232. transSliderChange(obj, v, a) {
  233. this.$emit("transSliderChange", obj, v, a);
  234. },
  235. // 复选框改变
  236. handleCheckChange(obj, checked) {
  237. console.log(obj, checked);
  238. if (typeof checked == "boolean") {
  239. obj.checked = checked;
  240. } else {
  241. obj.checked = !obj.checked;
  242. }
  243. this.$emit("handleCheckChange", obj, checked, this.$props.splitId);
  244. },
  245. //获取后台资源目录树结构
  246. getResourceTree() {
  247. GetResourceTree().then((res) => {
  248. if (res.statuscode == 200) {
  249. this.TreeDatas = res.data;
  250. store.state.tempResourceTree = res.data;
  251. } else {
  252. console.log(e);
  253. }
  254. });
  255. },
  256. //获取后台资源目录树结构
  257. getFavoriteLayers() {
  258. GetMyCollect().then((res) => {
  259. if (res.statuscode == 200) {
  260. this.favoriteLayerList = res.data;
  261. } else {
  262. console.log(e);
  263. }
  264. });
  265. },
  266. //图层定位
  267. location(obj) {
  268. this.$emit("location", obj);
  269. },
  270. //影像图层操作
  271. raise(obj) {
  272. this.$emit("raise", obj);
  273. },
  274. lower(obj) {
  275. this.$emit("lower", obj);
  276. },
  277. },
  278. mounted() {
  279. this.getResourceTree();
  280. this.getFavoriteLayers();
  281. },
  282. watch: {
  283. treeSearchText(val) {
  284. this.$refs.tree.filter(val);
  285. },
  286. },
  287. };
  288. </script>
  289. <style lang="scss">
  290. @import "./LayerManage.scss";
  291. </style>