yjxp-web/src/views/disasterRiskMonitor/emergencyOfficials.vue

<template>
  <div class="container">
    <div v-show="!isShowStructure" class="page-head">
      <van-search
        v-model="keywords"
        placeholder="请输入搜索关键词"
        :left-icon="searchImg"
        :right-icon="closeImg"
        @search="onSearch"
      />
      <div class="select-box">
        <div class="adress-box" @click="showStructure">
          <div class="blue-rectangle" />
          <div v-if="!!requestParameters.checkedId" class="block1">
            <div>{{ upOneLevel }}</div>
            <div style="margin: 0 5px">{{ ">" }}</div>
            <div style="color: #1d92ff">{{ adressContent }}</div>
          </div>
          <div v-else class="block1" style="height: 27px">
            <div>广东省</div>
            <div style="margin: 0 5px">{{ ">" }}</div>
            <div style="color: #1d92ff">茂名市</div>
          </div>
        </div>
        <div />
      </div>
      <hr style="color: #f9f9f9" />
    </div>
    <div v-show="!isShowStructure" class="scroll-list">
      <van-list
        v-model:loading="loading"
        :finished="finished"
        finished-text="没有更多了"
        @load="onLoad"
      >
        <div v-for="(item, index) in persons" :key="item.id">
          <div class="person-box2" @click="personInform(item)">
            <div class="circle">
              <img :src="onlineUser" alt="" />
            </div>
            <div style="display: flex">
              <div class="information-card2">
                <div style="display: flex">
                  <div style="font-weight: bold">{{ item.name }}</div>
                </div>
                <div style="display: flex">
                  <div style="font-size: 13px; margin-top: 5px; color: #979797">
                    {{ item.unit }}&nbsp;&nbsp;{{ item.position }}
                  </div>
                </div>
              </div>
            </div>
          </div>
          <div class="link-top" />
        </div>
      </van-list>
    </div>
    <organizationalStructure
      v-if="isShowStructure"
      v-model:isShowStructure="isShowStructure"
      @confirm="handleSelect"
    />
  </div>
</template>

<script setup lang="ts">
import offlineUser from "@/assets/images/threePreventionResponsiblePerson/offlineUsers.png";
import onlineUser from "@/assets/images/threePreventionResponsiblePerson/onlineUsers.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 OrganizationalStructure from "@/views/threePreventionResponsiblePerson/organizationalStructure.vue";
import { getPersonalData, getPersonalType } from "@/api/persons";
import { listContact } from "@/api/duty/eventing";

/*
const list = ref([
  {
    id: "1",
    name: "谢和平",
    unit: "茂名市应急管理局",
    position: "一级科员",
    title: "教授",
    expertType: "其它突发事件"
  },
  {
    id: "2",
    name: "谢和平",
    unit: "茂名市应急管理局",
    position: "一级科员",
    title: "教授",
    expertType: "其它突发事件"
  },
  {
    id: "3",
    name: "谢和平",
    unit: "茂名市应急管理局",
    position: "一级科员",
    title: "教授",
    expertType: "其它突发事件"
  },
  {
    id: "4",
    name: "谢和平",
    unit: "茂名市应急管理局",
    position: "一级科员",
    title: "教授",
    expertType: "其它突发事件"
  },
  {
    id: "5",
    name: "谢和平",
    unit: "茂名市应急管理局",
    position: "一级科员",
    title: "教授",
    expertType: "其它突发事件"
  },
  {
    id: "6",
    name: "谢和平",
    unit: "茂名市应急管理局",
    position: "一级科员",
    title: "教授",
    expertType: "其它突发事件"
  },
  {
    id: "7",
    name: "谢和平",
    unit: "茂名市应急管理局",
    position: "一级科员",
    title: "教授",
    expertType: "其它突发事件"
  },
  {
    id: "8",
    name: "谢和平",
    unit: "茂名市应急管理局",
    position: "一级科员",
    title: "教授",
    expertType: "其它突发事件"
  },
  {
    id: "9",
    name: "谢和平",
    unit: "茂名市应急管理局",
    position: "一级科员",
    title: "教授",
    expertType: "其它突发事件"
  },
  {
    id: "10",
    name: "谢和平",
    unit: "茂名市应急管理局",
    position: "一级科员",
    title: "教授",
    expertType: "其它突发事件"
  }
]);
*/
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_parent_id = selectedValues.toString(); //将用户选择的值（selectedValues）保存到 requestParameters 对象的 type_content 属性中
  fieldValue.value = selectedOptions[0].dictLabel; //将用户选择的第一个选项的 dictLabel 属性值保存到 fieldValue 中
  requestParameters.value.page = 1;
  onLoad();
};
const loading = ref(false);
const finished = ref(false);
const customFieldName = {
  text: "dictLabel",
  value: "dictValue"
};
const requestParameters = ref({
  name: "",
  type: [],
  type_parent_id: "",
  page: 1,
  pageSize: 10,
  contactName: keywords,
  checkedId: ""
});
const personInform = item => {
  router.push({ name: "CadreInformation", query: { id: item.id } });
};
const persons = ref([]);
const onLoad = () => {
  /*
  getPersonalData(requestParameters.value).then(res => {
    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;
  });
  */
  listContact(requestParameters.value).then(res => {
    var item = res.data || [];
    // 重置 persons 数组（如果是第一页）
    if (requestParameters.value.page == 1) {
      persons.value = [];
    }

    // 将新数据添加到 persons 数组中
    item.forEach(i => {
      persons.value.push({
        id: i.id,
        name: i.contactName,
        unit: i.unitName,
        position: i.position,
        phone: i.phone
      });
    });

    // 检查是否加载了所有数据
    if (persons.value.length >= res.total) {
      finished.value = true;
    } else {
      finished.value = false;
    }
    requestParameters.value.page++;
    loading.value = false;
  });
};
onMounted(() => {
  // getDicts("responsibility_type").then(res => {
  //   res.data.unshift({ dictLabel: "所有类型", dictValue: "" });
  //   responsibility_type.value = res.data;
  // });
  //getPersonalType(requestParameters.value).then(res => {
  //  responsibility_type = res.data || [];
  //});
  onLoad();
});
const onSearch = keywords => {
  requestParameters.value.page = 1;
  onLoad();
};
const showPersonalInformation = item => {
  router.push({ name: "PersonInformation", query: { id: item.id } });
};
let keyword = ref("");
let treeRef = ref();
let checkData = ref([]);
const isShowStructure = ref(false);
const showStructure = () => {
  isShowStructure.value = true;
};

const adressContent = ref();
const upOneLevel = ref();

const filterNode = (value, data) => {
  if (!value) return true;
  return data.label.indexOf(value) !== -1;
};
let selectedTreeId = ref([]);
const handleSelect = data => {
  adressContent.value = data.label;
  upOneLevel.value = data.value;
  requestParameters.value.checkedId = data.id;
};
</script>

<style scoped lang="scss">
.container {
  height: calc(100vh - 55px);
  display: flex;
  flex-direction: column;
}
.select-box {
  display: flex;
  flex-direction: row;
  justify-content: space-between;
  margin-top: -2px;
  background: #fff;
}
.circle {
  width: 55px;
  height: 55px;
  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;
  margin-left: 10px;
}
.person-box2 {
  display: flex;
  flex-direction: row;
  padding-left: 8px;
  background-color: #ffffff;
}
.information-card {
  display: flex;
  flex-direction: column;
  margin-left: 10px;
  width: 250px;
}
.block {
  width: 100%;
  height: 100%;
  background-color: #f2f2f2;
}
.page-head {
  width: 100%;
}
.blue-rectangle {
  width: 6px;
  height: 20px;
  background-image: linear-gradient(180deg, #00fce7 0%, #2c81ff 100%);
  border-radius: 0 3px 0 0;
  margin-left: -10px;
}

.adress-box {
  display: flex;
  flex-direction: row;
  padding-top: 10px;
  width: 50%;
  margin-left: 20px;
}
.link-top {
  height: 0.5px;
  border-top: solid #f2f2f2 1px;
}
.block1 {
  display: flex;
  flex-direction: row;
  margin-left: 5px;
}
.scroll-list {
  flex: 1;
  overflow: scroll;
}
.information-card2 {
  display: flex;
  flex-direction: column;
  justify-content: center;
  margin-left: 10px;
  width: 230px;
  margin-top: 2px;
}
.common-search {
  :deep(.van-field__right-icon) {
    width: 30px;
    height: 30px;
    padding: 0;
    .van-icon__image {
      width: 30px;
      height: 30px;
    }
  }
}
</style>