|
|
@@ -0,0 +1,761 @@
|
|
|
+<template>
|
|
|
+ <div class="page-head">
|
|
|
+ <van-search
|
|
|
+ v-model="keywords"
|
|
|
+ placeholder="请输入搜索关键词"
|
|
|
+ :left-icon="searchImg"
|
|
|
+ :right-icon="closeImg"
|
|
|
+ @search="onSearch"
|
|
|
+ />
|
|
|
+ <div class="select-box">
|
|
|
+ <div
|
|
|
+ style="padding-top: 10px; width: 50%; margin-left: 20px"
|
|
|
+ @click="showStructure"
|
|
|
+
|
|
|
+ >
|
|
|
+ {{adressContent}}
|
|
|
+ </div>
|
|
|
+ <div>
|
|
|
+ <van-field
|
|
|
+ v-model="fieldValue"
|
|
|
+ is-link
|
|
|
+ readonly
|
|
|
+ placeholder="选择类型"
|
|
|
+ @click="showPicker = true"
|
|
|
+ />
|
|
|
+ <van-popup
|
|
|
+ v-model:show="showPicker"
|
|
|
+ destroy-on-close
|
|
|
+ round
|
|
|
+ position="bottom"
|
|
|
+ >
|
|
|
+ <van-picker
|
|
|
+ :columns="responsibility_type"
|
|
|
+ title="类型选择"
|
|
|
+ :columns-field-names="customFieldName"
|
|
|
+ @cancel="showPicker = false"
|
|
|
+ @confirm="onConfirm"
|
|
|
+ />
|
|
|
+ </van-popup>
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+ <div
|
|
|
+ style="
|
|
|
+ margin-top: 90px;
|
|
|
+ height: calc(100vh - 55px - 90px);
|
|
|
+ overflow: scroll;
|
|
|
+ "
|
|
|
+ >
|
|
|
+ <van-list
|
|
|
+ v-model:loading="loading"
|
|
|
+ :finished="finished"
|
|
|
+ finished-text="没有更多了"
|
|
|
+ @load="onLoad"
|
|
|
+ >
|
|
|
+ <div v-for="item in persons" :key="item.id">
|
|
|
+ <div class="person-box" @click="showPersonalInformation(item)">
|
|
|
+ <div class="circle">
|
|
|
+ <img :src="item.profile_picture" alt="" />
|
|
|
+ </div>
|
|
|
+ <div class="information-card">
|
|
|
+ <div class="one">
|
|
|
+ <div>{{ item.name }}</div>
|
|
|
+ <div class="isOnline" :class="{ notOnline: item.state }">
|
|
|
+ {{ item.state === false ? "离线" : "在线" }}
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+ <div class="text-ellipsis">{{ item.position }}</div>
|
|
|
+ <div style="margin-top: 5px">
|
|
|
+ <span v-for="i in item.type" :key="i" class="type-name">
|
|
|
+ {{ i }}
|
|
|
+ </span>
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+ </van-list>
|
|
|
+ </div>
|
|
|
+
|
|
|
+ <div>
|
|
|
+ <van-overlay :show="isShowStructure">
|
|
|
+ <div class="block1">
|
|
|
+ <van-search
|
|
|
+ v-model="keywords"
|
|
|
+ placeholder="请输入关键字"
|
|
|
+ :left-icon="searchImg"
|
|
|
+ :right-icon="closeImg"
|
|
|
+ :clearable="false"
|
|
|
+ @search="onSearchKeyword"
|
|
|
+ @click-right-icon.stop="onSearchCancel"
|
|
|
+ />
|
|
|
+ <div class="head-card">
|
|
|
+ <div class="structure-head">
|
|
|
+ <div class="blue-rectangle" />
|
|
|
+ <div style="margin-top: 5px; margin-left: 5px">组织架构</div>
|
|
|
+ </div>
|
|
|
+ <div style="color: #b7c0c4; padding: 8px 13px; font-size: 13px">
|
|
|
+ [总人数]
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+ <hr />
|
|
|
+ <div style="margin-top: 1px">
|
|
|
+ <el-tree
|
|
|
+ ref="treeRef"
|
|
|
+ class="filter-tree"
|
|
|
+ :data="treeData"
|
|
|
+ show-checkbox
|
|
|
+ :props="defaultProps"
|
|
|
+ :filter-node-method="filterNode"
|
|
|
+ node-key="uuid"
|
|
|
+ default-expand-all
|
|
|
+ @check-change="handleCheckChange"
|
|
|
+ style="
|
|
|
+ height: calc(-145px - 70px + 100vh);
|
|
|
+ overflow: scroll;
|
|
|
+ margin-left: 10px;
|
|
|
+ "
|
|
|
+ >
|
|
|
+ <template #default="{ node, data }">
|
|
|
+ <span class="custom-tree-node">
|
|
|
+ <span>{{ node.label }}</span>
|
|
|
+ <span>
|
|
|
+ <a @click="append(data)" style="color: #d6d6d7"> [{{ data.personSum }}] </a>
|
|
|
+ </span>
|
|
|
+ </span>
|
|
|
+ </template>
|
|
|
+ </el-tree>
|
|
|
+ </div>
|
|
|
+ <div class="footer">
|
|
|
+ <div class="cancel-btn" @click="handleCancel">取消</div>
|
|
|
+ <div class="confirm-btn" @click="handleConfirm">确认</div>
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+ </van-overlay>
|
|
|
+ </div>
|
|
|
+</template>
|
|
|
+
|
|
|
+<script setup lang="ts">
|
|
|
+import {reactive, ref, watch} from "vue";
|
|
|
+import profile from "@/assets/images/tempImage/用户.png";
|
|
|
+import { getDicts } from "@/api/system/dict/data";
|
|
|
+import { getEventList } from "@/api/event";
|
|
|
+import searchImg from "@/assets/images/search.png";
|
|
|
+import closeImg from "@/assets/images/close.png";
|
|
|
+import { ElTree } from "element-plus";
|
|
|
+import {showConfirmDialog, showFailToast, showToast} from "vant";
|
|
|
+import {create_by_dept_ids} from "@/api/onlineRollCall";
|
|
|
+
|
|
|
+const router = useRouter();
|
|
|
+const keywords = ref("");
|
|
|
+let responsibility_type = ref([]);
|
|
|
+const fieldValue = ref("");
|
|
|
+const showPicker = ref(false);
|
|
|
+const onConfirm = ({ selectedValues, selectedOptions }) => {
|
|
|
+ showPicker.value = false; //用于控制 van-picker 组件的显示状态,将其设置为 false 表示隐藏选择器。
|
|
|
+ requestParameters.value.type_content = selectedValues.toString(); //将用户选择的值（selectedValues）保存到 requestParameters 对象的 type_content 属性中
|
|
|
+ fieldValue.value = selectedOptions[0].dictLabel; //将用户选择的第一个选项的 dictLabel 属性值保存到 fieldValue 中
|
|
|
+ onLoad();
|
|
|
+};
|
|
|
+const loading = ref(false);
|
|
|
+const finished = ref(false);
|
|
|
+const customFieldName = {
|
|
|
+ text: "dictLabel",
|
|
|
+ value: "dictValue"
|
|
|
+};
|
|
|
+const requestParameters = ref({
|
|
|
+ name: "",
|
|
|
+ type: [],
|
|
|
+ type_content: "",
|
|
|
+ page: 1,
|
|
|
+ page_size: 10,
|
|
|
+ keyword: keywords
|
|
|
+});
|
|
|
+const persons = ref([]);
|
|
|
+const onLoad = () => {
|
|
|
+ getEventList(requestParameters.value)
|
|
|
+ .then(res => {
|
|
|
+ res.data = [
|
|
|
+ {
|
|
|
+ id: 1,
|
|
|
+ name: "张嘉佳",
|
|
|
+ unit: "茂名市委员会",
|
|
|
+ position: "茂名市市委常委 市人民政府副市长 党组副书记",
|
|
|
+ type: ["三防指挥部", "应急部门"],
|
|
|
+ profile_picture: profile,
|
|
|
+ state: true
|
|
|
+ },
|
|
|
+ {
|
|
|
+ id: 2,
|
|
|
+ name: "王长青",
|
|
|
+ unit: "茂名市委员会",
|
|
|
+ position: "茂名市委员会 茂名市委常委 茂名市委常委",
|
|
|
+ type: ["党委政府"],
|
|
|
+ profile_picture: profile,
|
|
|
+ state: false
|
|
|
+ },
|
|
|
+ {
|
|
|
+ id: 3,
|
|
|
+ name: "王长青",
|
|
|
+ unit: "茂名市委员会",
|
|
|
+ position: "茂名市委员会 茂名市委常委",
|
|
|
+ type: ["重点部门"],
|
|
|
+ profile_picture: profile,
|
|
|
+ state: true
|
|
|
+ },
|
|
|
+ {
|
|
|
+ id: 4,
|
|
|
+ name: "王长青",
|
|
|
+ unit: "茂名市委员会",
|
|
|
+ position: "茂名市委员会 茂名市委常委",
|
|
|
+ type: ["重点部门"],
|
|
|
+ profile_picture: profile,
|
|
|
+ state: true
|
|
|
+ },
|
|
|
+ {
|
|
|
+ id: 5,
|
|
|
+ name: "王长青",
|
|
|
+ unit: "茂名市委员会",
|
|
|
+ position: "茂名市委员会 茂名市委常委",
|
|
|
+ type: ["重点部门"],
|
|
|
+ profile_picture: profile,
|
|
|
+ state: true
|
|
|
+ },
|
|
|
+ {
|
|
|
+ id: 6,
|
|
|
+ name: "王长青",
|
|
|
+ unit: "茂名市委员会",
|
|
|
+ position: "茂名市委员会 茂名市委常委",
|
|
|
+ type: ["重点部门", "成员单位"],
|
|
|
+ profile_picture: profile,
|
|
|
+ state: true
|
|
|
+ },
|
|
|
+ {
|
|
|
+ id: 7,
|
|
|
+ name: "王长青",
|
|
|
+ unit: "茂名市委员会",
|
|
|
+ position: "茂名市委员会 茂名市委常委",
|
|
|
+ type: ["重点部门"],
|
|
|
+ profile_picture: profile,
|
|
|
+ state: true
|
|
|
+ },
|
|
|
+ {
|
|
|
+ id: 8,
|
|
|
+ name: "王长青",
|
|
|
+ unit: "茂名市委员会",
|
|
|
+ position: "茂名市委员会 茂名市委常委",
|
|
|
+ type: ["重点部门"],
|
|
|
+ profile_picture: profile,
|
|
|
+ state: true
|
|
|
+ },
|
|
|
+ {
|
|
|
+ id: 9,
|
|
|
+ name: "王长青",
|
|
|
+ unit: "茂名市委员会",
|
|
|
+ position: "茂名市委员会 茂名市委常委",
|
|
|
+ type: ["重点部门"],
|
|
|
+ profile_picture: profile,
|
|
|
+ state: true
|
|
|
+ },
|
|
|
+ {
|
|
|
+ id: 10,
|
|
|
+ name: "王长青",
|
|
|
+ unit: "茂名市委员会",
|
|
|
+ position: "茂名市委员会 茂名市委常委",
|
|
|
+ type: ["重点部门"],
|
|
|
+ profile_picture: profile,
|
|
|
+ state: true
|
|
|
+ }
|
|
|
+ ];
|
|
|
+ var item = res.data || [];
|
|
|
+ // 重置 persons 数组（如果是第一页）
|
|
|
+ if (requestParameters.value.page == 1) {
|
|
|
+ persons.value = [];
|
|
|
+ }
|
|
|
+ // 将新数据添加到 persons 数组中
|
|
|
+ item.forEach(temp => {
|
|
|
+ persons.value.push(temp);
|
|
|
+ });
|
|
|
+ // 检查是否加载了所有数据
|
|
|
+ if (persons.value.length >= res.total) {
|
|
|
+ finished.value = true;
|
|
|
+ } else {
|
|
|
+ finished.value = false;
|
|
|
+ }
|
|
|
+ requestParameters.value.page++;
|
|
|
+ loading.value = false;
|
|
|
+ })
|
|
|
+ .catch(error => {
|
|
|
+ // 处理错误（例如，显示错误消息或重置加载状态）
|
|
|
+ console.error("加载事件列表时出错:", error);
|
|
|
+ loading.value = false;
|
|
|
+ });
|
|
|
+};
|
|
|
+onMounted(() => {
|
|
|
+ getDicts("responsibility_type").then(res => {
|
|
|
+ res.data.unshift({ dictLabel: "所有类型", dictValue: "" });
|
|
|
+ responsibility_type.value = res.data;
|
|
|
+ });
|
|
|
+});
|
|
|
+const onSearch = keywords => {
|
|
|
+ requestParameters.value.page = 1;
|
|
|
+ onLoad();
|
|
|
+};
|
|
|
+const showPersonalInformation = item => {
|
|
|
+ router.push({ name: "PersonInformation", query: { id: item.id } });
|
|
|
+};
|
|
|
+
|
|
|
+let keyword = ref("");
|
|
|
+let treeData = ref([
|
|
|
+ {
|
|
|
+ id: 1,
|
|
|
+ deptType: true,
|
|
|
+ label: "茂南区",
|
|
|
+ personSum: 34643,
|
|
|
+ children: [
|
|
|
+ {
|
|
|
+ id: 2,
|
|
|
+ deptType: true,
|
|
|
+ label: "茂南区政府",
|
|
|
+ personSum: 343,
|
|
|
+ children: [
|
|
|
+ {
|
|
|
+ id: 3,
|
|
|
+ deptType: true,
|
|
|
+ label: "茂南区应急管理局",
|
|
|
+ personSum: 5687,
|
|
|
+ children: [
|
|
|
+ {
|
|
|
+ id: 3,
|
|
|
+ deptType: true,
|
|
|
+ label: "茂南区应急管理局",
|
|
|
+ personSum: 5687
|
|
|
+ }
|
|
|
+ ]
|
|
|
+ }
|
|
|
+ ]
|
|
|
+ }
|
|
|
+ ]
|
|
|
+ },
|
|
|
+ {
|
|
|
+ id: 1,
|
|
|
+ deptType: true,
|
|
|
+ label: "茂南区",
|
|
|
+ personSum: 34643,
|
|
|
+ children: [
|
|
|
+ {
|
|
|
+ id: 2,
|
|
|
+ deptType: true,
|
|
|
+ label: "茂南区政府",
|
|
|
+ personSum: 343,
|
|
|
+ children: [
|
|
|
+ {
|
|
|
+ id: 3,
|
|
|
+ deptType: true,
|
|
|
+ label: "茂南区应急管理局",
|
|
|
+ personSum: 5687,
|
|
|
+ children: [
|
|
|
+ {
|
|
|
+ id: 3,
|
|
|
+ deptType: true,
|
|
|
+ label: "茂南区应急管理局",
|
|
|
+ personSum: 5687
|
|
|
+ }
|
|
|
+ ]
|
|
|
+ }
|
|
|
+ ]
|
|
|
+ }
|
|
|
+ ]
|
|
|
+ },
|
|
|
+ {
|
|
|
+ id: 1,
|
|
|
+ deptType: true,
|
|
|
+ label: "茂南区",
|
|
|
+ personSum: 34643,
|
|
|
+ children: [
|
|
|
+ {
|
|
|
+ id: 2,
|
|
|
+ deptType: true,
|
|
|
+ label: "茂南区政府",
|
|
|
+ personSum: 343,
|
|
|
+ children: [
|
|
|
+ {
|
|
|
+ id: 3,
|
|
|
+ deptType: true,
|
|
|
+ label: "茂南区应急管理局",
|
|
|
+ personSum: 5687,
|
|
|
+ children: [
|
|
|
+ {
|
|
|
+ id: 3,
|
|
|
+ deptType: true,
|
|
|
+ label: "茂南区应急管理局",
|
|
|
+ personSum: 5687
|
|
|
+ }
|
|
|
+ ]
|
|
|
+ }
|
|
|
+ ]
|
|
|
+ }
|
|
|
+ ]
|
|
|
+ },
|
|
|
+ {
|
|
|
+ id: 1,
|
|
|
+ deptType: true,
|
|
|
+ label: "茂南区",
|
|
|
+ personSum: 34643,
|
|
|
+ children: [
|
|
|
+ {
|
|
|
+ id: 2,
|
|
|
+ deptType: true,
|
|
|
+ label: "茂南区政府",
|
|
|
+ personSum: 343,
|
|
|
+ children: [
|
|
|
+ {
|
|
|
+ id: 3,
|
|
|
+ deptType: true,
|
|
|
+ label: "茂南区应急管理局",
|
|
|
+ personSum: 5687,
|
|
|
+ children: [
|
|
|
+ {
|
|
|
+ id: 3,
|
|
|
+ deptType: true,
|
|
|
+ label: "茂南区应急管理局",
|
|
|
+ personSum: 5687
|
|
|
+ }
|
|
|
+ ]
|
|
|
+ }
|
|
|
+ ]
|
|
|
+ }
|
|
|
+ ]
|
|
|
+ },
|
|
|
+ {
|
|
|
+ id: 1,
|
|
|
+ deptType: true,
|
|
|
+ label: "茂南区",
|
|
|
+ personSum: 34643,
|
|
|
+ children: [
|
|
|
+ {
|
|
|
+ id: 2,
|
|
|
+ deptType: true,
|
|
|
+ label: "茂南区政府",
|
|
|
+ personSum: 343,
|
|
|
+ children: [
|
|
|
+ {
|
|
|
+ id: 3,
|
|
|
+ deptType: true,
|
|
|
+ label: "茂南区应急管理局",
|
|
|
+ personSum: 5687,
|
|
|
+ children: [
|
|
|
+ {
|
|
|
+ id: 3,
|
|
|
+ deptType: true,
|
|
|
+ label: "茂南区应急管理局",
|
|
|
+ personSum: 5687
|
|
|
+ }
|
|
|
+ ]
|
|
|
+ }
|
|
|
+ ]
|
|
|
+ }
|
|
|
+ ]
|
|
|
+ },
|
|
|
+ {
|
|
|
+ id: 1,
|
|
|
+ deptType: true,
|
|
|
+ label: "茂南区",
|
|
|
+ personSum: 34643,
|
|
|
+ children: [
|
|
|
+ {
|
|
|
+ id: 2,
|
|
|
+ deptType: true,
|
|
|
+ label: "茂南区政府",
|
|
|
+ personSum: 343,
|
|
|
+ children: [
|
|
|
+ {
|
|
|
+ id: 3,
|
|
|
+ deptType: true,
|
|
|
+ label: "茂南区应急管理局",
|
|
|
+ personSum: 5687,
|
|
|
+ children: [
|
|
|
+ {
|
|
|
+ id: 3,
|
|
|
+ deptType: true,
|
|
|
+ label: "茂南区应急管理局",
|
|
|
+ personSum: 5687
|
|
|
+ }
|
|
|
+ ]
|
|
|
+ }
|
|
|
+ ]
|
|
|
+ }
|
|
|
+ ]
|
|
|
+ },
|
|
|
+ {
|
|
|
+ id: 1,
|
|
|
+ deptType: true,
|
|
|
+ label: "茂南区",
|
|
|
+ personSum: 34643,
|
|
|
+ children: [
|
|
|
+ {
|
|
|
+ id: 2,
|
|
|
+ deptType: true,
|
|
|
+ label: "茂南区政府",
|
|
|
+ personSum: 343,
|
|
|
+ children: [
|
|
|
+ {
|
|
|
+ id: 3,
|
|
|
+ deptType: true,
|
|
|
+ label: "茂南区应急管理局",
|
|
|
+ personSum: 5687,
|
|
|
+ children: [
|
|
|
+ {
|
|
|
+ id: 3,
|
|
|
+ deptType: true,
|
|
|
+ label: "茂南区应急管理局",
|
|
|
+ personSum: 5687
|
|
|
+ }
|
|
|
+ ]
|
|
|
+ }
|
|
|
+ ]
|
|
|
+ }
|
|
|
+ ]
|
|
|
+ }
|
|
|
+]);
|
|
|
+let treeRef = ref();
|
|
|
+let checkData = ref([]);
|
|
|
+const isShowStructure = ref(false);
|
|
|
+const showStructure = () => {
|
|
|
+ isShowStructure.value = true;
|
|
|
+};
|
|
|
+const onSearchKeyword = () => {};
|
|
|
+const onSearchCancel = () => {};
|
|
|
+const handleCancel = () => {
|
|
|
+ isShowStructure.value = false;
|
|
|
+};
|
|
|
+const adressContent = ref("");
|
|
|
+const handleConfirm = () => {
|
|
|
+ if (checkData.value.length > 0) {
|
|
|
+ showConfirmDialog({
|
|
|
+ title: '提示',
|
|
|
+ message: '确认选择？'
|
|
|
+ })
|
|
|
+ .then(() => {
|
|
|
+ // create_by_dept_ids({depts: checkData.value, remark:''}).then((res) => {
|
|
|
+ // showToast({type: 'success', message: res.msg, onClose:()=>{
|
|
|
+ // router.push({ name : 'RollCallDetails', query: { id: res.data }})
|
|
|
+ // }});
|
|
|
+ // })
|
|
|
+ adressContent.value = checkData.value;
|
|
|
+ isShowStructure.value = false;
|
|
|
+ });
|
|
|
+ // router.push({ name : 'RollCallDetails', query: { id: 'test' }})
|
|
|
+ } else {
|
|
|
+ showFailToast('请先选择点名单位')
|
|
|
+ }
|
|
|
+}
|
|
|
+
|
|
|
+let defaultProps = reactive({
|
|
|
+ children: "children",
|
|
|
+ label: "label",
|
|
|
+ personSum: "personSum"
|
|
|
+});
|
|
|
+const filterNode = (value, data) => {
|
|
|
+ if (!value) return true;
|
|
|
+ return data.label.indexOf(value) !== -1;
|
|
|
+};
|
|
|
+watch(keyword, (val) => {
|
|
|
+ treeRef.value!.filter(val);
|
|
|
+});
|
|
|
+const handleCheckChange = () => {
|
|
|
+ const data = [];
|
|
|
+ const treeData = treeRef.value.getCheckedNodes(false, false);
|
|
|
+ treeData.forEach((item) => {
|
|
|
+ data.push(item.id);
|
|
|
+ });
|
|
|
+ checkData.value = data;
|
|
|
+};
|
|
|
+</script>
|
|
|
+
|
|
|
+<style scoped lang="scss">
|
|
|
+.select-box {
|
|
|
+ display: flex;
|
|
|
+ flex-direction: row;
|
|
|
+ margin-top: -2px;
|
|
|
+ background: #fff;
|
|
|
+}
|
|
|
+.circle {
|
|
|
+ width: 80px;
|
|
|
+ height: 80px;
|
|
|
+ border-radius: 50%;
|
|
|
+ background-color: #eaeaea;
|
|
|
+ display: flex;
|
|
|
+ justify-content: center;
|
|
|
+ align-items: center;
|
|
|
+ color: black;
|
|
|
+ font-size: 15px;
|
|
|
+ margin: 15px 5px 15px;
|
|
|
+}
|
|
|
+.circle2 {
|
|
|
+ width: 100px;
|
|
|
+ height: 100px;
|
|
|
+ border-radius: 50%;
|
|
|
+ background-color: #eaeaea;
|
|
|
+ display: flex;
|
|
|
+ justify-content: center;
|
|
|
+ align-items: center;
|
|
|
+ color: black;
|
|
|
+ font-size: 15px;
|
|
|
+ margin: 15px 5px 15px;
|
|
|
+}
|
|
|
+.person-box {
|
|
|
+ display: flex;
|
|
|
+ flex-direction: row;
|
|
|
+}
|
|
|
+.information-card {
|
|
|
+ display: flex;
|
|
|
+ flex-direction: column;
|
|
|
+ margin-left: 10px;
|
|
|
+}
|
|
|
+.type-name {
|
|
|
+ background-color: #eff2fc;
|
|
|
+ padding: 3px 15px;
|
|
|
+ font-size: 13px;
|
|
|
+ color: #8d9bc8;
|
|
|
+ margin-left: 5px;
|
|
|
+ &:nth-child(1) {
|
|
|
+ margin-left: 0;
|
|
|
+ }
|
|
|
+}
|
|
|
+.text-ellipsis {
|
|
|
+ margin-top: 5px;
|
|
|
+ width: 250px;
|
|
|
+ white-space: nowrap;
|
|
|
+ overflow: hidden;
|
|
|
+ text-overflow: ellipsis;
|
|
|
+ font-size: 14px;
|
|
|
+}
|
|
|
+.one {
|
|
|
+ display: flex;
|
|
|
+ justify-content: space-between;
|
|
|
+ margin-top: 15px;
|
|
|
+ align-items: center;
|
|
|
+}
|
|
|
+.isOnline {
|
|
|
+ font-size: 12px;
|
|
|
+ background-color: #b3b3b3;
|
|
|
+ padding: 0px 10px;
|
|
|
+ height: 15px;
|
|
|
+}
|
|
|
+.notOnline {
|
|
|
+ background-color: limegreen;
|
|
|
+}
|
|
|
+.wrapper {
|
|
|
+ display: flex;
|
|
|
+ align-items: center;
|
|
|
+ justify-content: center;
|
|
|
+ height: 100%;
|
|
|
+}
|
|
|
+.block {
|
|
|
+ width: 100%;
|
|
|
+ height: 100%;
|
|
|
+ background-color: #f2f2f2;
|
|
|
+}
|
|
|
+.block1 {
|
|
|
+ width: 100%;
|
|
|
+ height: 100%;
|
|
|
+ background-color: #ffffff;
|
|
|
+}
|
|
|
+.information-box {
|
|
|
+ display: flex;
|
|
|
+ flex-direction: row;
|
|
|
+ padding: 10px 10px;
|
|
|
+}
|
|
|
+.unit-box {
|
|
|
+ display: flex;
|
|
|
+ flex-direction: row;
|
|
|
+ background-color: #ffffff;
|
|
|
+ height: 35px;
|
|
|
+ width: 100%;
|
|
|
+ margin-top: 5px;
|
|
|
+}
|
|
|
+.unit1-box {
|
|
|
+ display: flex;
|
|
|
+ flex-direction: row;
|
|
|
+ background-color: #ffffff;
|
|
|
+ height: 35px;
|
|
|
+ width: 100%;
|
|
|
+ margin-top: 1px;
|
|
|
+}
|
|
|
+.info-content {
|
|
|
+ margin: 5px 20px;
|
|
|
+}
|
|
|
+.text {
|
|
|
+ color: grey;
|
|
|
+ width: 84.04px;
|
|
|
+ padding: 5px 10px;
|
|
|
+ text-align-last: justify;
|
|
|
+}
|
|
|
+.page-head {
|
|
|
+ position: fixed;
|
|
|
+ top: 0;
|
|
|
+ width: 100%;
|
|
|
+}
|
|
|
+.structure-head {
|
|
|
+ display: flex;
|
|
|
+ background-color: #ffffff;
|
|
|
+ padding-left: 10px;
|
|
|
+ padding-bottom: 5px;
|
|
|
+ align-items: center;
|
|
|
+}
|
|
|
+.blue-rectangle {
|
|
|
+ width: 6px;
|
|
|
+ height: 17px;
|
|
|
+ background-image: linear-gradient(180deg, #00fce7 0%, #2c81ff 100%);
|
|
|
+ border-radius: 0 3px 0 0;
|
|
|
+}
|
|
|
+.head-card {
|
|
|
+ display: flex;
|
|
|
+ flex-direction: row;
|
|
|
+ justify-content: space-between;
|
|
|
+ background-color: white;
|
|
|
+}
|
|
|
+.footer {
|
|
|
+ position: absolute;
|
|
|
+ z-index: 9999;
|
|
|
+ bottom: 0;
|
|
|
+ left: 0;
|
|
|
+ width: 100%;
|
|
|
+ height: 70px;
|
|
|
+ background: #ffffff;
|
|
|
+ display: flex;
|
|
|
+ justify-content: center;
|
|
|
+ align-items: center;
|
|
|
+ margin-bottom: 50px;
|
|
|
+ .cancel-btn {
|
|
|
+ width: 90px;
|
|
|
+ height: 40px;
|
|
|
+ border: 1px solid #d1d1d1;
|
|
|
+ border-radius: 2px;
|
|
|
+ font-size: 16px;
|
|
|
+ color: #b3b3b3;
|
|
|
+ display: flex;
|
|
|
+ justify-content: center;
|
|
|
+ align-items: center;
|
|
|
+ }
|
|
|
+ .confirm-btn {
|
|
|
+ width: 90px;
|
|
|
+ height: 40px;
|
|
|
+ background: #2c81ff;
|
|
|
+ border-radius: 2px;
|
|
|
+ font-size: 16px;
|
|
|
+ color: #ffffff;
|
|
|
+ display: flex;
|
|
|
+ justify-content: center;
|
|
|
+ align-items: center;
|
|
|
+ margin-left: 80px;
|
|
|
+ }
|
|
|
+}
|
|
|
+.custom-tree-node {
|
|
|
+ display: flex;
|
|
|
+ width: 100%;
|
|
|
+ justify-content: space-between;
|
|
|
+ margin-right: 12px;
|
|
|
+}
|
|
|
+</style>
|
