下拉树

monitorMobile/components/tki-tree/style.css

@@ -45,7 +45,7 @@
   line-height: 1;
 }
 .tki-tree-bar-confirm {
-  color: #07bb07;
+  color: #2388FF;
 }
 .tki-tree-view {
   position: absolute;
@@ -119,7 +119,7 @@
   border-bottom-width: 1rpx;
   border-right-width: 1rpx;
   border-style: solid;
-  border-color: #07bb07;
+  border-color: #2388FF;
   display: flex;
   justify-content: center;
   align-items: center;
@@ -132,7 +132,7 @@
   border-top-right-radius: 20%;
   border-bottom-right-radius: 20%;
   border-bottom-left-radius: 20%;
-  background-color: #07bb07;
+  background-color: #2388FF;
 }
 .tki-tree-check .radio {
   border-top-left-radius: 50%;

monitorMobile/components/tki-tree/tki-tree.vue

@@ -76,7 +76,7 @@
 			},
 			confirmColor: { // 确定按钮颜色
 				type: String,
-				default: '' // #07bb07
+				default: '' // #2388FF
 			},
 			cancelColor: { // 取消按钮颜色
 				type: String,

monitorMobile/pages/earlyWarning/detail.vue

@@ -242,7 +242,7 @@
 
 <style lang="scss" scoped>
 	.warningDetail {
-		height: 100%;
+		// height: 100%;
 		background: #fff;
 
 		.title {

monitorMobile/pages/monitor/index.vue

@@ -1,7 +1,7 @@
 <template>
 	<view class="inspectionCenter">
 		<view class="searchBox">
-			<view class="searchLine" @click="openSearch">
+			<view class="searchLine" @click="showTree">
 				<!-- <view class="searchShow"> -->
 				<view class="searchLabels">
 					<image v-show="isShowSearch==false" src="@/static/image/earlyWarning/group.png" mode="">
@@ -141,17 +141,20 @@
 			:options="[{value:1,label:'qinshi1'},{value:2,label:'qinshi2'}]" title="预警类型" search-place-holder="预警类型" />
 		<selectRadio ref="selectRadioBox" :cellVisible="false" :value.sync="searchForm.warnHand"
 			:options="[{value:1,label:'loudong1'},{value:2,label:'loudong2'}]" title="楼栋" />
+		<tki-tree ref="tkitree" :selectParent="selectParent" :multiple="multiple" :range="treelist" :foldAll="flod"
+			rangeKey="name" @confirm="treeConfirm" @cancel="treeCancel"></tki-tree>
 	</view>
 </template>
 
 <script>
 	import selectRadio from "@/components/selectRadio.vue"
 	import selectSearch from "@/components/selectSearch.vue"
+	import tkiTree from '@/components/tki-tree/tki-tree.vue';
 	export default {
 		components: {
 			selectRadio,
 			selectSearch,
-
+			tkiTree
 		},
 		data() {
 			return {
@@ -230,7 +233,22 @@
 						code: 13,
 						name: '你好'
 					}
-				]
+				],
+				treelist: [
+					{
+						name: '111',
+						value:'1',
+						children: [
+							{
+								name: '111',
+								value:'2',
+							}
+						]
+					}
+				],
+				multiple: false, //是否多选
+				selectParent: true, //父级可选择
+				flod: false, //折叠
 			}
 		},
 		watch: {
@@ -266,6 +284,29 @@
 			this.loadmore()
 		},
 		methods: {
+			addAttribute(data) { // tree结构递归添加属性
+				for (var i = 0; i < data.length; i++) {
+					data[i].isShow = false
+					data[i].name = data[i].title
+					if (data[i].children && data[i].children.length > 0) {
+						this.addAttribute(data[i].children)
+					}
+				}
+				return data
+			},
+			// 确定回调事件
+			treeConfirm(e) {
+				// this.form.groupName = e[0].name
+				// this.form.groupId = e[0].id
+			},
+			// 取消回调事件
+			treeCancel(e) {
+				// console.log(e)
+			},
+			// 显示树形选择器
+			showTree() {
+				this.$refs.tkitree._show();
+			},
 			cancelDelete() {
 				this.showDelete = false;
 			},