2024.7.15

riku

2024-07-15 b292a0a81869547e94fd85e783f9597db241a87e

2024.7.15

 src/assets/icon/bg-border-1.png

 src/assets/icon/bg-border-2.png

 src/assets/styles/element/index.scss

@@ -2,6 +2,7 @@
  $bg-color: (
    'page': #ffffffa9,
    '': #14428be8,
    // '': transparent,
    'overlay': #102f63c9
  ),
  $colors: (

 src/assets/styles/var.scss

¶Ô±ÈÐÂÎļþ
@@ -0,0 +1,8 @@
@charset "UTF-8";

$colors-bg:(
  primary: #14428be8
)
// :root {
//   --fy-color-bg: #14428be8;
// }

 src/components.d.ts

@@ -7,8 +7,11 @@
/* prettier-ignore */
declare module 'vue' {
  export interface GlobalComponents {
    BaseCard: typeof import('./components/BaseCard.vue')['default']
    BaseMap: typeof import('./components/map/BaseMap.vue')['default']
    BaseTable: typeof import('./components/BaseTable.vue')['default']
    CoreHeader: typeof import('./components/core/CoreHeader.vue')['default']
    DataTable: typeof import('./components/DataTable.vue')['default']
    ElCalendar: typeof import('element-plus/es')['ElCalendar']
    ElCard: typeof import('element-plus/es')['ElCard']
    ElCascader: typeof import('element-plus/es')['ElCascader']

 src/components/BaseCard.vue

¶Ô±ÈÐÂÎļþ
@@ -0,0 +1,26 @@
<template>
  <div class="wrap-2">
    <slot></slot>
  </div>
</template>
<script></script>
<style scoped>
.wrap {
  background-image: url('@/assets/icon/bg-border-1.png');
  background-repeat: no-repeat;
  /* background-position: center; */
  background-size: cover;
  /* background-color: white; */
  width: 100%;
  height: 100%;
  object-fit: cover;
  margin: 10px;
}

.wrap-2 {
  border: 2px solid rgba(255, 255, 255, 0.829);
  border-radius: 8px;
  padding: 4px;
  background: linear-gradient(#14428be8, #14428b8f);
}
</style>

 src/components/BaseTable.vue

¶Ô±ÈÐÂÎļþ
@@ -0,0 +1,71 @@
<template>
  <el-table
    ref="tableRef"
    :data="data"
    v-loading="loading"
    table-layout="fixed"
    size="small"
    :show-overflow-tooltip="true"
    border
    row-class-name="t-row"
    cell-class-name="t-cell"
    header-row-class-name="t-header-row"
    header-cell-class-name="t-header-cell"
    :show-summary="false"
    :highlight-current-row="true"
    @row-click="handleRowClick"
  >
    <slot></slot>
  </el-table>
</template>

<script>
export default {
  props: {
    loading: Boolean,
    data: Array
  },
  data() {
    return {}
  },
  emits: ['rowClick'],
  watch: {},
  computed: {},
  methods: {
    handleRowClick(row, col, event) {
      this.$emit('rowClick', row.index)
      // console.log(row);
      // console.log(col);
      // console.log(event.target.getBoundingClientRect().height);
    }
  }
}
</script>
<style>
.el-table {
  --el-table-bg-color: transparent;
  --el-table-row-hover-bg-color: #23dad0a2;
  --el-table-current-row-bg-color: #7dff5d96;
  --el-table-text-color: var(--font-color);
}

.t-row {
  cursor: pointer;
  background-color: transparent !important;
}

.t-cell {
  /* background: red !important; */
  /* height: 40px;
  border: 1px solid black; */
}

.t-header-row {
}

.t-header-cell {
  background-color: var(--bg-color-2) !important;
  text-align: center !important;
  color: white !important;
}
</style>

 src/views/inspection/WorkStream.vue

@@ -1,5 +1,6 @@
<template>
  <div class="border-r-small m-h-2 p-h-4">
  <!-- <div class="border-r-small m-h-2 p-h-4"> -->
  <BaseCard>
    <el-scrollbar ref="scrollbarRef" :height="height">
      <div ref="scrollContentRef">
        <div v-for="item in streams" :key="item.index">
@@ -12,7 +13,8 @@
        </div>
      </div>
    </el-scrollbar>
  </div>
  </BaseCard>
  <!-- </div> -->
</template>
<script setup>
import { reactive, ref, onMounted, inject } from 'vue'
@@ -21,7 +23,7 @@
import { unCalc } from '@/utils/css-util'

const excludeMapHeight = inject('excludeMapHeight')
const height = `calc(${unCalc(excludeMapHeight)} - 30px)`
const height = `calc(${unCalc(excludeMapHeight)} - 36px)`

const streams = reactive([])
const scrollContentRef = ref()

 src/views/inspection/problem/ProblemTrack.vue

@@ -1,11 +1,12 @@
<template>
  <div class="border-r-small">
  <!-- <div class="border-r-small"> -->
  <BaseCard>
    <div class="font-large">问题整改跟踪</div>
    <div>
      <el-row justify="end">
        <OptionTime v-model="time" type="date"></OptionTime>
      </el-row>
      <ProblemSummary :data="subtaskList"></ProblemSummary>
      <ProblemSummary :data="subtaskList" :proStatistic="proStatistic"></ProblemSummary>
      <ProblemTable :data="subtaskList"></ProblemTable>
    </div>
    <el-collapse v-model="activeNames" @change="handleChange">
@@ -16,7 +17,8 @@
        <ProblemType ref="pTypeRef"></ProblemType>
      </el-collapse-item>
    </el-collapse>
  </div>
  </BaseCard>
  <!-- </div> -->
</template>

<script>
@@ -30,14 +32,21 @@
import ProblemType from './component/ProblemType.vue'

import taskApi from '@/api/fysp/taskApi.js'
import problemApi from '@/api/fysp/problemApi.js'

export default {
  components: { ProblemSummary, ProblemTable, ProblemChangeChart, ProblemType },
  data() {
    return {
      // å•æ—¥ä»»åŠ¡è¯¦æƒ…
      subtaskList: [],
      // å•æ—¥é—®é¢˜ç»Ÿè®¡
      proStatistic: [],
      // æŠ˜å æ¡†æ¿€æ´»åç§°é›†åˆ
      activeNames: ['1', '2'],
      // å½“前时间
      time: '',
      // ç­›é€‰åŒºåŸŸæ¡ä»¶
      area: {}
    }
  },
@@ -49,6 +58,7 @@
        this.area.endtime = d.endOf('day').format('YYYY-MM-DD HH:mm:ss')
        // this.areaStore.setTimeOneDay(nV)
        this.fetchSubtask()
        this.fetchDayProblemsStatistic()
      }
    }
  },
@@ -61,6 +71,14 @@
        this.subtaskList = res.data
      })
    },
    fetchDayProblemsStatistic() {
      // this.fetchData((page, pageSize) => {
      //   return
      // })
      problemApi.fetchProblemsStatistic(this.area).then((res) => {
        this.proStatistic = res
      })
    },
    handleChange(val) {
      if (val.indexOf('1') != -1) {
        this.$refs.pChangeRef.refresh()

 src/views/inspection/problem/component/ProblemSummary.vue

@@ -1,16 +1,44 @@
<template>
  <div class="font-small">
  <!-- <div class="font-small">
    ä»Šæ—¥ç»Ÿè®¡ï¼šé—®é¢˜æ•°: {{ summary.proNum }}，整改数: {{ summary.changeNum }}，整改率:
    {{ summary.changePer }}
  </div> -->

  <div v-if="mainProType" class="font-small">
    çªå‡ºé—®é¢˜ï¼š{{ mainProType.name }}，问题数：{{ mainProType.count }}，占比{{ mainProType.per }}
  </div>
  <div class="font-small">突出问题：路面积尘，问题数：13，占比：81%</div>
  <BaseTable :data="summary">
    <el-table-column
      label="问题数"
      prop="proNum"
      :show-overflow-tooltip="true"
      width="60"
    ></el-table-column>
    <el-table-column
      label="整改数"
      prop="changeNum"
      :show-overflow-tooltip="true"
      width="60"
    ></el-table-column>
    <el-table-column
      label="整改率"
      prop="changePer"
      :show-overflow-tooltip="true"
      width="60"
    ></el-table-column>
  </BaseTable>
</template>
<script setup>
import { computed, ref } from 'vue'

const props = defineProps({
  data: {
    type: Array
    type: Array,
    default: () => []
  },
  proStatistic: {
    type: Array,
    default: () => []
  },
  loading: Boolean
})
@@ -28,26 +56,21 @@
    changePer = Math.round((changeNum / proNum) * 100) + '%'
  }

  return { proNum, changeNum, changePer }
  return [{ proNum, changeNum, changePer }]
})

const mainPro = computed(() => {
const mainProType = computed(() => {
  let res
  let total = 0,
    max = 0
  props.data.forEach((d) => {
    total += d.proNum
  props.proStatistic.forEach((d) => {
    total += d.count
  })
  props.data.forEach((d) => {
  props.proStatistic.forEach((d) => {
    if (total > 0) {
      const per = d.proNum / total
      const per = d.count / total
      if (per >= max) {
        max = per
        // res.push({
        //   name: d.name,
        //   count: d.count,
        //   per: Math.round(per * 100) + '%'
        // })
        res = {
          name: d.name,
          count: d.count,

 src/views/management/ManagementView.vue

@@ -39,9 +39,9 @@
    }
  },
  mounted() {
    vResize.mounted(this.$refs.statusRef.$el, ({ height }) => {
      this.statusHeight = height
    })
    // vResize.mounted(this.$refs.statusRef.$el, ({ height }) => {
    //   this.statusHeight = height
    // })
    // vResize.mounted(this.$refs.summaryRef.$el, ({ height }) => {
    //   this.summaryHeight = height
    // })

 src/views/management/evaluate/EvaluateSummary.vue

@@ -1,12 +1,14 @@
<template>
  <div class="border-r-small">
  <!-- <div class="border-r-small"> -->
  <BaseCard>
    <el-row justify="space-between">
      <div ref="titleRef" class="font-large">综合风险评估</div>
      <!-- <OptionTime v-model="time"></OptionTime> -->
    </el-row>
    <RiskCount></RiskCount>
    <RiskArea></RiskArea>
  </div>
  </BaseCard>
  <!-- </div> -->
</template>

<script>