完善项目及大屏

2025-08-22 22:17:57 +08:00
parent a712dce2cd
commit e4523299d4
7 changed files with 296 additions and 119 deletions
--- a/src/api/projectScreen/index.ts
+++ b/src/api/projectScreen/index.ts
@ -32,3 +32,35 @@ export const getScreenLand = (projectId: number | string) => {
    method: 'get',
  });
 };
+
+// 查询项目形象进度
+export const getScreenImgProcess = (projectId: number | string) => {
+  return request({
+    url: '/project/big/screen/imageProgress/' + projectId,
+    method: 'get',
+  });
+};
+
+// 查询项目人员情况
+export const getScreenPeople = (projectId: number | string) => {
+  return request({
+    url: '/project/big/screen/people/' + projectId,
+    method: 'get',
+  });
+};
+
+// 查询项目AI安全巡检
+export const getScreenSafetyInspection = (projectId: number | string) => {
+  return request({
+    url: '/project/big/screen/safetyInspection/' + projectId,
+    method: 'get',
+  });
+};
+
+// 查询项目概况
+export const getScreenGeneralize = (projectId: number | string) => {
+  return request({
+    url: '/project/big/screen/generalize/' + projectId,
+    method: 'get',
+  });
+};
--- a/src/views/ProjectScreen/components/centerPage.vue
+++ b/src/views/ProjectScreen/components/centerPage.vue
@ -1,26 +1,25 @@
 <template>
  <div class="centerPage">
-    <div class="topPage" :class="{ 'full-height': hideFooter }">
-      <!-- <img src="@/assets/projectLarge/center.png" alt="" style="width: 100%;object-fit: scale-down"> -->
+    <div class="topPage">
+      <img src="@/assets/projectLarge/center.png" alt="">
    </div>
    <div class="endPage" :class="{ 'slide-out-down': hideFooter }" v-if="!isHide">
      <Title title="AI安全巡检" :prefix="true" />
-
      <div class="swiper">
        <div class="arrow" :class="{ 'canUse': canLeft }" @click="swiperClick('left')">
-          <el-icon size="16" color="skyblue">
+          <el-icon size="16" :color="canLeft ? 'rgba(29, 214, 255, 1)' : 'rgba(29, 214, 255, 0.3)'">
            <ArrowLeft />
          </el-icon>
        </div>
        <div class="swiper_content" ref="swiperContent">
-          <div class="swiper_item" v-for="(item, i) in 10" :key="i">
-            <img src="@/assets/projectLarge/swiper.png" alt="安全巡检图片" class="swiper_img">
-            <div class="swiper_date">2025-03-18</div>
-            <div class="swiper_tip">未佩戴安全帽{{ i }}</div>
+          <div class="swiper_item" v-for="(item, i) in inspectionList" :key="i">
+            <img :src="item.picture" alt="安全巡检图片" class="swiper_img">
+            <div class="swiper_date">{{ item.createTime.slice(5) }}</div>
+            <div class="swiper_tip">{{ item.label }}</div>
          </div>
        </div>
        <div class="arrow" :class="{ 'canUse': canRight }" @click="swiperClick('right')">
-          <el-icon size="16">
+          <el-icon size="16" :color="canRight ? 'rgba(29, 214, 255, 1)' : 'rgba(29, 214, 255, 0.3)'">
            <ArrowRight />
          </el-icon>
        </div>
@ -30,9 +29,13 @@
 </template>

 <script setup lang="ts">
-import { ref, onMounted } from "vue"
+import { ref, onMounted, toRefs, getCurrentInstance } from "vue"
 import Title from './title.vue'
 import { ArrowLeft, ArrowRight } from '@element-plus/icons-vue'
+import { getScreenSafetyInspection } from '@/api/projectScreen'
+
+const { proxy } = getCurrentInstance();
+const { violation_level_type } = toRefs(proxy?.useDict('violation_level_type'));

 const props = defineProps({
  hideFooter: {
@ -42,10 +45,19 @@ const props = defineProps({
  isHide: {
    type: Boolean,
    default: false
+  },
+  projectId: {
+    type: String,
+    default: ""
  }
 })

-const swiperList = ref([])
+const inspectionList = ref([{
+  id: "",
+  label: "",
+  picture: "",
+  createTime: ""
+}])
 const swiperContent = ref<HTMLDivElement>()
 const swiperItemWidth = ref(100)
 const canLeft = ref(false)
@ -75,7 +87,19 @@ const swiperClick = (direction: 'left' | 'right') => {
  canRight.value = swiperContent.value.scrollLeft < swiperContent.value.scrollWidth - swiperContent.value.clientWidth
 }

+const getInspectionList = async () => {
+  const res = await getScreenSafetyInspection(props.projectId)
+  const { code, data } = res
+  if (code === 200) {
+    data.map(item => {
+      item.label = violation_level_type.value.find((i: any) => i.value === item.violationType)?.label
+    })
+    inspectionList.value = data
+  }
+}
+
 onMounted(() => {
+  getInspectionList()
  if (swiperContent.value && swiperContent.value.children.length > 0) {
    swiperItemWidth.value = swiperContent.value.children[0].clientWidth + 20
  }
@ -94,30 +118,23 @@ onMounted(() => {
  display: flex;
  flex-direction: column;
  align-items: center;
+  justify-content: center;
  width: 100%;
  padding: 15px 0;
-  border: 1px solid rgba(29, 214, 255, 0.1);
+  border: 1px solid rgba(230, 247, 255, 0.1);
  box-sizing: border-box;
 }

 .topPage {
  flex: 1;
  margin-bottom: 23px;
-  transition: flex 1s ease;
-  /* 添加flex过渡效果 */
-}
-
-/* 当endPage隐藏时，topPage占满高度 */
-.full-height {
-  flex: 1 1 100%;
-  margin-bottom: 0;
+  transition: flex 0.5s ease;
 }

 .endPage {
  max-height: 300px;
-  /* 根据实际内容调整最大高度 */
  opacity: 1;
-  transition: all 1s ease;
+  transition: all 0.5s ease;
 }

 /* 向下滑出动画 */
@ -189,17 +206,16 @@ onMounted(() => {
 .arrow {
  display: grid;
  place-items: center;
-  width: 20px;
-  height: 20px;
+  width: 24px;
+  height: 24px;
  border-radius: 50%;
-  border: 1px solid skyblue;
+  border: 1px solid rgba(29, 214, 255, 0.3);
  color: skyblue;
  cursor: pointer;
  transition: all 0.3s ease;

  &.canUse {
-    background-color: skyblue;
-    color: #fff !important;
+    border: 1px solid rgba(29, 214, 255, 1);
  }

  &:hover:not(.canUse) {
--- a/src/views/ProjectScreen/components/header.vue
+++ b/src/views/ProjectScreen/components/header.vue
@ -16,6 +16,10 @@
    </div>
    <div class="header_right">
      <div class="top-bar">
+        <!--  -->
+        <div style="margin-right: 10px;cursor: pointer;" @click="emit('changePage')">
+           <el-icon size="20"><Expand /></el-icon>
+        </div>
        <!-- 左侧：天气图标 + 日期文字 -->
        <div class="left-section">
          <div class="weather-list" @mouseenter="requestPause" @mouseleave="resumeScroll">
@ -33,7 +37,7 @@
          <div class="bottom-block"></div>
        </div>
        <!-- 右侧：管理系统图标 + 文字 -->
-        <div class="right-section" @click="emit('changePage')">
+        <div class="right-section">
          <img src="@/assets/large/setting.png" alt="设置图标" />
          <span>管理系统</span>
        </div>
--- a/src/views/ProjectScreen/components/leftPage.vue
+++ b/src/views/ProjectScreen/components/leftPage.vue
@ -2,31 +2,53 @@
  <div class="leftPage">
    <div class="topPage">
      <Title title="项目公告" />
-
      <div class="content">
        <div class="content_item" v-for="item in news" :key="item.id">
-          <div class="round">
-            <div class="sub_round"></div>
-          </div>
-          <div class="ellipsis">{{ item.title }}</div>
+          <img src="@/assets/projectLarge/round.svg" alt="">
+          <div class="ellipsis">
+            {{ item.title }}
+            <span @click="showNewsDetail(item)" style="color: rgba(138, 149, 165, 1);">{{ item.id === newId ? '关闭' :
+              '查看' }}</span>
          </div>
        </div>
      </div>
+    </div>
+
+    <div class="detailBox" :class="{'show': newId}">
+      <!-- <div class="detail_title">{{ newDetail.title }}</div> -->
+      <div class="detail_content" v-html="newDetail.content"></div>
+    </div>
+
    <div class="endPage">
      <Title title="人员情况" />
-
      <div class="map">
        <img src="@/assets/projectLarge/map.svg" alt="">
        <!-- <div ref="mapChartRef"></div> -->
      </div>

      <div class="attendance_tag">
-        <div class="tag_item" v-for="(item, index) in tagList" :key="index">
+        <div class="tag_item">
          <img src="@/assets/projectLarge/people.svg" alt="">
-          <div class="tag_title">{{ item.title }}</div>
+          <div class="tag_title">出勤人数</div>
          <div class="tag_info">
-            {{ item.number }}
-            <span style="font-size: 14px;">{{ index === 2 ? '%' : '人' }}</span>
+            {{ attendanceCount }}
+            <span style="font-size: 14px;">人</span>
+          </div>
+        </div>
+        <div class="tag_item">
+          <img src="@/assets/projectLarge/people.svg" alt="">
+          <div class="tag_title">在岗人数</div>
+          <div class="tag_info">
+            {{ peopleCount }}
+            <span style="font-size: 14px;">人</span>
+          </div>
+        </div>
+        <div class="tag_item">
+          <img src="@/assets/projectLarge/people.svg" alt="">
+          <div class="tag_title">出勤率</div>
+          <div class="tag_info">
+            {{ attendanceRate }}
+            <span style="font-size: 14px;">%</span>
          </div>
        </div>
      </div>
@ -38,11 +60,11 @@
          <div class="attendance_item_title">出勤率</div>
          <div class="attendance_item_title">出勤时间</div>
        </div>
-        <div v-for="item in list" :key="item.title" class="attendance_item">
-          <div class="attendance_item_title">{{ item.title }}</div>
-          <div class="attendance_item_number">{{ item.number }} <span class="subfont">人/{{ item.number }}</span></div>
+        <div v-for="item in teamAttendanceList" :key="item.id" class="attendance_item">
+          <div class="attendance_item_title">{{ item.teamName }}</div>
+          <div class="attendance_item_number">{{ item.attendanceNumber }} <span class="subfont">人/{{ item.allNumber }}</span></div>
          <div class="attendance_item_rate">{{ item.attendanceRate }} %</div>
-          <div class="attendance_item_date subfont">{{ item.date }}</div>
+          <div class="attendance_item_date subfont">{{ item.attendanceTime }}</div>
        </div>
      </div>
    </div>
@ -52,7 +74,7 @@
 <script setup lang="ts">
 import { ref } from "vue"
 import Title from './title.vue'
-import { getScreenNews } from '@/api/projectScreen';
+import { getScreenNews, getScreenPeople } from '@/api/projectScreen';
 import { mapOption } from './optionList'
 import * as echarts from 'echarts';

@ -66,20 +88,55 @@ const props = defineProps({
 let mapChart = null
 const mapChartRef = ref<HTMLDivElement | null>(null);
 const news = ref([])
-const list = ref([
-  { title: '智慧系统运维', number: 30, attendanceRate: 100, date: '2025-08-05 08:10' },
-  { title: '智慧系统运维', number: 30, attendanceRate: 100, date: '2025-08-05 08:10' },
-  { title: '智慧系统运维', number: 30, attendanceRate: 100, date: '2025-08-05 08:10' },
-  { title: '智慧系统运维', number: 30, attendanceRate: 100, date: '2025-08-05 08:10' },
-  { title: '智慧系统运维', number: 30, attendanceRate: 100, date: '2025-08-05 08:10' },
-  { title: '智慧系统运维', number: 30, attendanceRate: 100, date: '2025-08-05 08:10' },
-])
-const tagList = ref([
-  { title: '出勤人数', number: 259 },
-  { title: '在岗人数', number: 100 },
-  { title: '出勤率', number: 100 },
+const newDetail = ref({
+  title: '',
+  content: ''
+})
+const newId = ref('')
+const attendanceCount = ref(0)
+const attendanceRate = ref(0)
+const peopleCount = ref(0)
+const teamAttendanceList = ref([
+  { id: "", teamName: "", attendanceNumber: 0, allNumber: 0, attendanceRate: 0, attendanceTime: "" },
 ])

+/**
+ * 显示新闻详情
+ */
+const showNewsDetail = (item: any) => {
+  if (newId.value === item.id) {
+    newId.value = ''
+    return
+  }
+  newDetail.value = item
+  newId.value = item.id
+}
+
+/**
+ * 获取项目人员出勤数据
+ */
+const getPeopleData = async () => {
+  const res = await getScreenPeople(props.projectId);
+  const { data, code } = res
+  if (code === 200) {
+    attendanceCount.value = data.attendanceCount
+    attendanceRate.value = data.attendanceRate
+    peopleCount.value = data.peopleCount
+    teamAttendanceList.value = data.teamAttendanceList
+  }
+}
+
+/**
+ * 获取项目新闻数据
+ */
+const getNewsData = async () => {
+  const res = await getScreenNews(props.projectId);
+  const { data, code } = res
+  if (code === 200) {
+    news.value = data
+  }
+}
+
 /**
 * 初始化地图
 */
@ -95,12 +152,8 @@ onMounted(() => {
  // nextTick(() => {
  //   initMapChart();
  // });
-  getScreenNews(props.projectId).then(res => {
-    const { data, code } = res
-    if (code === 200) {
-      news.value = data
-    }
-  })
+  getPeopleData()
+  getNewsData()
 })

 onUnmounted(() => {
@ -116,7 +169,6 @@ onUnmounted(() => {
 .leftPage {
  display: flex;
  flex-direction: column;
-  width: 25vw;
  height: 100%;

  .topPage,
@ -158,11 +210,11 @@ onUnmounted(() => {
    display: flex;
    align-items: flex-start;
    gap: 10px;
-    // position: relative;
    margin-bottom: 20px;
    font-size: 14px;
    font-weight: 400;
    color: rgba(230, 247, 255, 1);
+    cursor: pointer;

    .ellipsis {
      display: -webkit-box;
@ -177,21 +229,8 @@ onUnmounted(() => {
      margin-bottom: 0;
    }

-    .round {
-      display: grid;
-      place-items: center;
+    img {
      margin-top: 3px;
-      width: 12px;
-      height: 12px;
-      border-radius: 50%;
-      background: rgba(29, 214, 255, 0.3);
-
-      .sub_round {
-        width: 6px;
-        height: 6px;
-        border-radius: 50%;
-        background: #1DD6FF;
-      }
    }
  }
 }
@ -244,4 +283,45 @@ onUnmounted(() => {
 .subfont {
  color: rgba(138, 149, 165, 1);
 }
+
+.detailBox {
+  position: absolute;
+  left: 20vw;
+  top: 0;
+  width: 300px;
+  height: 300px;
+  max-height: 500px;
+  overflow-y: auto;
+  padding: 0 15px;
+  box-sizing: border-box;
+  background: rgba(255, 255, 255, 0.2);
+  border-radius: 4px;
+  transition: all 0.3s ease;
+  opacity: 0;
+  z-index: -1;
+
+  &.show {
+    left: 25vw;
+    opacity: 1;
+    z-index: 1;
+  }
+}
+
+.detailBox::before {
+  content: '';
+  /* 绝对定位相对于父元素 */
+  position: absolute;
+  /* 定位到左侧中间位置 */
+  left: -10px;
+  top: 50%;
+  /* 垂直居中 */
+  transform: translateY(-50%);
+  /* 利用边框创建三角形 */
+  border-width: 10px 10px 10px 0;
+  border-style: solid;
+  /* 三角形颜色与背景匹配，左侧边框透明 */
+  border-color: transparent rgba(255, 255, 255, 0.2) transparent transparent;
+  /* 确保三角形在内容下方 */
+  z-index: -1;
+}
 </style>
--- a/src/views/ProjectScreen/components/optionList.ts
+++ b/src/views/ProjectScreen/components/optionList.ts
@ -84,6 +84,12 @@ export let barOption = {
    axisLabel: {
      color: '#fff'
    },
+    axisLine: {
+      show: false
+    },
+    splitLine: {
+      show: false
+    }
  },
  yAxis: {
    name: '单位：m²',
--- a/src/views/ProjectScreen/components/rightPage.vue
+++ b/src/views/ProjectScreen/components/rightPage.vue
@ -2,20 +2,10 @@
  <div class="leftPage">
    <div class="topPage">
      <Title title="项目概况" />
-
-      <div class="content">
-        <div class="content_item">项目名称：智慧生态工地社区开发项目</div>
-        <div class="content_item">项目位置：贵州省贵阳市乌当区（具体地块编号：01-123-11）</div>
-        <div class="content_item">占地面积：约10000亩</div>
-        <div class="content_item"> 土地性质：城镇住宅用地（兼容商业用地，容积率≤2.5）</div>
-        <div class="content_item"> 土地性质：城镇住宅用地（兼容商业用地，容积率≤2.5）</div>
-        <div class="content_item"> 土地性质：城镇住宅用地（兼容商业用地，容积率≤2.5）</div>
-        <div class="content_item"> 土地性质：城镇住宅用地（兼容商业用地，容积率≤2.5）</div>
-      </div>
+      <div class="content" v-html="generalize"></div>
    </div>
    <div class="endPage">
      <Title title="形象进度" />
-
      <div class="chart_container">
        <div ref="pieChartRef" class="echart" />
        <div ref="lineChartRef" class="echart" />
@ -29,7 +19,7 @@ import { ref, onMounted, onUnmounted, nextTick } from "vue"
 import Title from './title.vue'
 import * as echarts from 'echarts';
 import { pieOption, barOption } from './optionList';
-import { getScreenLand } from '@/api/projectScreen';
+import { getScreenLand, getScreenImgProcess, getScreenGeneralize } from '@/api/projectScreen';

 const props = defineProps({
  projectId: {
@ -38,9 +28,11 @@ const props = defineProps({
  }
 })

+const generalize = ref()
 // 饼图相关
 const pieChartRef = ref<HTMLDivElement | null>(null);
 let pieChart: any = null;
+const totalPercent = ref(0)
 // 折线图相关
 const lineChartRef = ref<HTMLDivElement | null>(null);
 let lineChart: any = null;
@ -49,11 +41,12 @@ const designAreaData = ref([])
 const transferAreaData = ref([])
 // 饼图数据
 const pieData = [
-  { name: '桩点浇筑', value: 13 },
-  { name: '水泥灌注', value: 7 },
-  { name: '箱变安装', value: 40 },
-  { name: '支架安装', value: 20 },
-  { name: '组件安装', value: 20 },
+  { label: 'areaPercentage', name: '厂区', value: 0 },
+  { label: 'roadPercentage', name: '道路', value: 0 },
+  { label: 'collectorLinePercentage', name: '集电线路', value: 0 },
+  { label: 'exportLinePercentage', name: '送出线路', value: 0 },
+  { label: 'substationPercentage', name: '升压站', value: 0 },
+  { label: 'boxTransformerPercentage', name: '箱变', value: 0 },
 ]

 // 初始化饼图
@ -63,6 +56,7 @@ const initPieChart = () => {
    return;
  }
  pieOption.series.data = pieData
+  pieOption.graphic[0].style.text = totalPercent.value + '%'
  pieChart = echarts.init(pieChartRef.value, null, {
    renderer: 'canvas',
    useDirtyRect: false
@ -104,9 +98,37 @@ const getScreenLandData = async () => {
  }
 }

+/**
+ * 获取项目形象进度数据
+ */
+const getScreenImgProcessData = async () => {
+  const res = await getScreenImgProcess(props.projectId);
+  const { data, code } = res
+  if (code === 200) {
+    totalPercent.value = data.totalPercentage
+    pieData.forEach((item: any) => {
+      item.value = data[item.label]
+    })
+    initPieChart()
+  }
+}
+
+/**
+ * 获取项目概况数据
+ */
+const getScreenGeneralizeData = async () => {
+  const res = await getScreenGeneralize(props.projectId);
+  const { data, code } = res
+  if (code === 200) {
+    generalize.value = data
+  }
+}
+
 // 组件挂载时初始化图表
 onMounted(() => {
  getScreenLandData()
+  getScreenImgProcessData()
+  getScreenGeneralizeData()
  nextTick(() => {
    initPieChart();
    window.addEventListener('resize', handleResize);
@ -131,7 +153,6 @@ onUnmounted(() => {
 .leftPage {
  display: flex;
  flex-direction: column;
-  width: 25vw;
  height: 100%;

  .topPage,
--- a/src/views/ProjectScreen/index.vue
+++ b/src/views/ProjectScreen/index.vue
@ -2,13 +2,13 @@
  <div class="large_screen">
    <Header :projectId="projectId" @changePage="handleChangePage" />
    <div class="nav">
-      <div class="nav_left" v-if="!isHide" :class="{ 'slide-out-left': isHiding }">
+      <div class="nav_left" :style="{ left: isHideOther ? '-25vw' : '0' }">
        <leftPage :projectId="projectId" />
      </div>
-      <div class="nav_center" :class="{ 'full-width': isHiding }">
-        <centerPage :projectId="projectId" :hideFooter="isHiding" :isHide="isHide" />
+      <div class="nav_center" :style="{ width: isFull ? '100%' : 'calc(50vw - 30px)' }">
+        <centerPage :projectId="projectId" :hideFooter="isHiding" :isHide="isFull" />
      </div>
-      <div class="nav_right" v-if="!isHide" :class="{ 'slide-out-right': isHiding }">
+      <div class="nav_right" :style="{ right: isHideOther ? '-25vw' : '0' }">
        <rightPage :projectId="projectId" />
      </div>
    </div>
@ -16,6 +16,7 @@
 </template>

 <script setup lang="ts">
+import { ref } from 'vue';
 import Header from './components/header.vue';
 import leftPage from './components/leftPage.vue';
 import centerPage from './components/centerPage.vue';
@ -24,16 +25,23 @@ import { useUserStoreHook } from '@/store/modules/user';

 const userStore = useUserStoreHook();
 const projectId = computed(() => userStore.selectedProject.id);
-const isHide = ref(false)
+const isFull = ref(false)
+const isHideOther = ref(false)
 const isHiding = ref(false)

+/**
+ * 切换中心页面全屏
+ */
 const handleChangePage = () => {
-  isHiding.value = true;
-
+  if (isFull.value) {
+    isFull.value = false;
    setTimeout(() => {
-    isHide.value = !isHide.value;
-    isHiding.value = false;
+      isHideOther.value = false;
    }, 500);
+  } else {
+    isFull.value = true;
+    isHideOther.value = true;
+  }
 }
 </script>

@ -49,9 +57,9 @@ const handleChangePage = () => {
 }

 .nav {
-  display: flex;
-  justify-content: center;
-  gap: 15px;
+  position: relative;
+  display: grid;
+  place-items: center;
  width: calc(100vw - 30px);
  height: calc(100vh - 90px);
  margin: 0 auto;
@ -61,15 +69,25 @@ const handleChangePage = () => {

 .nav_left,
 .nav_right {
-  width: 25vw;
-  transition: transform 1s ease, opacity 1s ease;
-  flex-shrink: 0;
+  position: absolute;
+  width: calc(25vw - 15px);
+  height: 100%;
+  transition: all 0.5s ease;
+}
+
+.nav_left {
+  top: 0;
+  left: 0;
+}
+
+.nav_right {
+  top: 0;
+  right: 0;
 }

 .nav_center {
-  flex: 1 1 auto;
-  min-width: 0;
-  transition: all 1s ease;
+  height: 100%;
+  transition: all 0.5s ease;
 }

 /* 中间面板全屏动画 */
@ -79,13 +97,13 @@ const handleChangePage = () => {
  flex: none;
 }

-.slide-out-left {
-  transform: translateX(-100%);
+.slide_left {
+  left: -25vw;
  opacity: 0;
 }

-.slide-out-right {
-  transform: translateX(100%);
+.slide_right {
+  right: -25vw;
  opacity: 0;
 }
 </style>