lcw

src/views/backOfficeSystem/DeploymentDisposal/mpvPeo/model/czModel.vue

@@ -0,0 +1,222 @@
+<template>
+  <div class="backinfo-container">
+    <div class="headClass">
+      <h3>操作日志</h3>
+    </div>
+    <!-- 列表区域 -->
+    <div class="list-container">
+      <div v-loading="loading" class="behavior-list">
+          <div class="behavior-list-inner">
+            <div
+              v-for="(item, index) in behaviorList"
+              :key="item.id"
+              class="behavior-item"
+            >
+              <div class="behavior-item-header">
+                <span class="behavior-index">{{ index + 1 }}.</span>
+                <el-tag :type="getTagType(item.behaviorType)">{{ item.zhmc }}</el-tag>
+                <span class="behavior-time">{{ item.czsj }}</span>
+              </div>
+              <div class="behavior-item-content">
+                <p class="behavior-description">{{ item.czjl }}</p>
+                <p class="behavior-location"><i class="el-icon-location-outline"></i> {{ item.bz }}</p>
+              </div>
+            </div>
+            <div v-if="!loading && behaviorList.length === 0" class="empty-state">
+              <el-empty description="暂无操作记录" />
+            </div>
+          </div>
+        </div>
+    </div>
+  </div>
+</template>
+
+<script setup>
+import { ref, getCurrentInstance, onMounted,watch } from 'vue'
+import GdMap from "@/components/GdMap/index.vue";
+import {tbGsxtZdryCzrzSelectCzrz} from '@/api/zdr'
+const { proxy } = getCurrentInstance();
+const props = defineProps({
+  dataList: {
+    type: Object,
+    default: () => { },
+  }, disabled: {
+    type: Boolean,
+    default: false
+  },
+  showBut: {
+    type: Boolean,
+    default: false
+  },
+})
+const listData = ref({})
+watch(() => props.dataList, (val) => {
+  if (val) {
+    listData.value = val
+    fetchData()
+  }
+}, { deep: true })
+// 列表数据
+const behaviorList = ref([])
+const loading = ref(false)
+
+// 获取数据
+const fetchData = () => {
+  loading.value = true
+  tbGsxtZdryCzrzSelectCzrz({ zdrid: listData.value.id }).then(res => {
+    behaviorList.value = res
+  }).finally(() => {
+    loading.value = false
+  })
+}
+
+// 页面加载时获取数据
+onMounted(() => {
+})
+</script>
+
+<style lang="scss" scoped>
+@import "~@/assets/css/layout.scss";
+@import "~@/assets/css/element-plus.scss";
+
+.backinfo-container {
+  padding-top: 20px;
+width: 100%;
+  background-color: #f5f7fa;
+}
+
+.headClass {
+  font-size: 18px;
+  font-weight: 600;
+  color: #303133;
+  margin: 0 0 20px 0;
+  padding-bottom: 15px;
+  border-bottom: 2px solid #409eff;
+  position: relative;
+}
+
+h3 {
+  margin: 0;
+}
+
+.search-container {
+  background-color: #fff;
+  padding: 16px;
+  border-radius: 6px;
+  margin-bottom: 16px;
+  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.05);
+
+}
+
+.demo-form-inline {
+  display: flex;
+  align-items: center;
+  flex-wrap: wrap;
+  gap: 16px;
+}
+
+.list-container {
+    background-color: #fff;
+    padding: 16px;
+    border-radius: 6px;
+    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.05);
+  }
+
+  .behavior-list {
+    max-height: 600px;
+    overflow: hidden; /* 完全禁止滚动条 */
+    position: relative;
+  }
+
+  .behavior-list-inner {
+    max-height: 600px;
+    overflow-y: auto;
+    overflow-x: hidden;
+    padding-right: 10px; /* 为滚动条留出空间但不显示 */
+  }
+
+  .behavior-item {
+    padding: 16px;
+    border-bottom: 1px solid #f0f0f0;
+    transition: all 0.3s ease;
+    position: relative;
+    left: 0; /* 初始位置 */
+  }
+
+  .behavior-item:hover {
+    background-color: #fafafa;
+    left: 5px; /* 使用left属性代替transform，避免触发滚动条 */
+  }
+
+  .behavior-item:last-child {
+    border-bottom: none;
+  }
+
+  .behavior-item-header {
+    display: flex;
+    align-items: center;
+    margin-bottom: 12px;
+  }
+
+  .behavior-index {
+    font-weight: 600;
+    color: #606266;
+    margin-right: 12px;
+    min-width: 20px;
+  }
+
+  .behavior-time {
+    margin-left: auto;
+    color: #909399;
+    font-size: 13px;
+  }
+
+  .behavior-item-content {
+    padding-left: 32px;
+  }
+
+  .behavior-description {
+    margin: 0 0 8px 0;
+    color: #303133;
+    line-height: 1.5;
+  }
+
+  .behavior-location {
+    margin: 0;
+    color: #606266;
+    font-size: 13px;
+    line-height: 1.5;
+  }
+
+  .empty-state {
+    padding: 60px 0;
+    text-align: center;
+  }
+
+::v-deep .el-tag {
+  margin-right: 0;
+}
+
+::v-deep .el-date-editor .el-range-separator {
+  color: #606266;
+}
+
+@media (max-width: 768px) {
+  .backinfo-container {
+    padding: 10px;
+  }
+
+  .demo-form-inline {
+    flex-direction: column;
+    align-items: stretch;
+  }
+
+  .demo-form-inline .el-form-item {
+    margin-bottom: 10px;
+  }
+
+  .pagination-container {
+    justify-content: center;
+  }
+}
+</style>