原型制作

riku

2024-06-12 58a5242ff58523f5d048da13fc543ffba5065414

原型制作

 src/assets/styles/base.scss

@@ -1,13 +1,13 @@
/************************************** font size **************************************/
$fontsize: (
  s: var(--el-font-size-small),
  b: var(--el-font-size-base),
  m: var(--el-font-size-medium),
  l: var(--el-font-size-large)
  small: var(--el-font-size-small),
  base: var(--el-font-size-base),
  medium: var(--el-font-size-medium),
  large: var(--el-font-size-large)
);

@each $dName, $dValue in $fontsize {
  .f-#{$dName} {
  .font-#{$dName} {
    font-size: #{$dValue};
  }
}

 src/components/inspection/SubtaskExamineItem.vue

@@ -1,5 +1,5 @@
<template>
  <div :class="itemClass + ' p-v-4 f-s'">
  <div :class="itemClass + ' p-v-4 font-small'">
    <div>
      <el-text class="w-200" size="default" truncated>
        {{ name }}

 src/components/inspection/SubtaskItem.vue

@@ -1,5 +1,5 @@
<template>
  <div :class="itemClass + ' p-v-4 f-s'">
  <div :class="itemClass + ' p-v-4 font-small'">
    <div>
      <!-- <el-row justify="center"> -->
      <el-text class="w-200" size="default" truncated>

 src/components/inspection/TaskItem.vue

@@ -1,42 +1,49 @@
<template>
  <div class="demo-progress border-r-small f-b">
    <el-row>
      <el-col span="8">
        <el-progress :width="100" type="dashboard" :percentage="(finish / total) * 100">
  <!-- <div class="demo-progress border-r-small"> -->
  <el-row justify="space-evenly">
    <el-col span="12">
      <div class="v-center">
        <el-text>总量</el-text>
        <el-progress
          :width="100"
          type="circle"
          status="warning"
          :percentage="(finish / total) * 100"
        >
          <template #default="{ percentage }">
            <span class="percentage-value">{{ percentage }}%</span>
            <span class="percentage-label">{{ finish + '/' + total }}</span>
            <!-- <span class="percentage-label">{{ finish + '/' + total }}</span> -->
          </template>
        </el-progress>
      </el-col>
      <el-col span="16">
        <div>{{ name }}</div>
        <!-- <div>{{ planTime }}</div> -->
        <div>{{ userName }}</div>
        <el-row style="gap: 10px">
          <div class="v-center" v-for="item in count" :key="item.sceneType">
            <el-progress
              :width="50"
              :stroke-width="3"
              type="dashboard"
              :percentage="(item.finish / item.total) * 100"
            >
              <template #default="{ percentage }">
                <span class="percentage-value-small">{{ percentage }}%</span>
              </template>
            </el-progress>
            <div>
              <el-text size="small">{{ item.sceneType }}</el-text>
              <el-text size="small">{{ item.finish + '/' + item.total }}</el-text>
            </div>
            <div></div>
            <!-- <div class="percentage-label-small">{{ item.sceneType }}</div> -->
            <!-- <span class="percentage-label-small">{{ item.finish + '/' + item.total }} </span> -->
          </div>
        </el-row>
      </el-col>
    </el-row>
  </div>
        <el-text size="small">{{ finish + '/' + total }}</el-text>
      </div>
    </el-col>
    <el-col span="12" class="flex-bottom">
      <!-- <div>{{ name }}</div> -->
      <!-- <div>{{ planTime }}</div> -->
      <!-- <div>{{ userName }}</div> -->
      <el-row style="gap: 40px" justify="space-between">
        <div class="v-center" v-for="item in count" :key="item.sceneType">
          <el-text size="small">{{ item.sceneType }}</el-text>
          <el-progress
            :width="50"
            :stroke-width="3"
            type="circle"
            status="warning"
            :percentage="(item.finish / item.total) * 100"
          >
            <template #default="{ percentage }">
              <span class="percentage-value-small">{{ percentage }}%</span>
            </template>
          </el-progress>
          <el-text size="small">{{ item.finish + '/' + item.total }}</el-text>
          <!-- <div class="percentage-label-small">{{ item.sceneType }}</div> -->
          <!-- <span class="percentage-label-small">{{ item.finish + '/' + item.total }} </span> -->
        </div>
      </el-row>
    </el-col>
  </el-row>
  <!-- </div> -->
</template>

<script>
@@ -85,6 +92,12 @@
  border-radius: var(--el-border-radius-base);
}

.flex-bottom {
  display: flex;
  flex-direction: column;
  justify-content: end;
}

.percentage-value {
  display: block;
  margin-top: 10px;

 src/components/inspection/TaskNode.vue

@@ -4,7 +4,7 @@
      <div>{{ title }}</div>
      <el-text type="danger" size="small">{{ warning }}</el-text>
    </el-row>
    <div class="border-r-small f-b">
    <div class="border-r-small font-base">
      <div v-for="(item, i) in items" :key="title + i">
        <slot :item="item" :index="i"></slot>
      </div>

 src/views/inspection/JointEnforcement.vue

@@ -1,6 +1,6 @@
<template>
  <div class="border-r-small" style="height: 200px">
    <div class="f-l">联合执法</div>
    <div class="font-large">联合执法</div>
  </div>
</template>


 src/views/inspection/ProblemTrack.vue

@@ -1,6 +1,6 @@
<template>
  <el-card shadow="hover">
    <div class="f-l">巡查问题跟踪</div>
    <div class="font-large">巡查问题跟踪</div>
  </el-card>
</template>


 src/views/inspection/SelfInspection.vue

@@ -1,6 +1,6 @@
<template>
  <div class="border-r-small" style="height: 200px">
    <div class="f-l">应急自巡查</div>
    <div class="font-large">应急自巡查</div>
  </div>
</template>


 src/views/inspection/TaskTrack.vue

@@ -1,7 +1,7 @@
<template>
  <div>
    <el-row justify="space-evenly">
      <!-- <div class="f-l">现场巡查跟踪（现场人员巡查情况实时掌握）</div> -->
      <!-- <div class="font-large">现场巡查跟踪（现场人员巡查情况实时掌握）</div> -->
      <!-- <SubtaskItem v-for="item in subtaskList" :key="item.guid" v-bind="item"> </SubtaskItem> -->
      <el-col :span="4">
        <TaskNode

 src/views/main/MonitorView.vue

@@ -1,6 +1,11 @@
<template>
  <el-row>
    <el-col :span="16">
    <el-col :span="6" class="page-right">
      <el-scrollbar height="var(--fy-body-height)">
        <ManagementView></ManagementView>
      </el-scrollbar>
    </el-col>
    <el-col :span="12">
      <el-scrollbar class="page-left-top">
        <VisualizationView></VisualizationView>
      </el-scrollbar>
@@ -8,7 +13,7 @@
        <InspectionView></InspectionView>
      </el-scrollbar>
    </el-col>
    <el-col :span="8" class="page-right">
    <el-col :span="6" class="page-right">
      <el-scrollbar height="var(--fy-body-height)">
        <ManagementView></ManagementView>
      </el-scrollbar>

 src/views/management/EvaluateSummary.vue

¶Ô±ÈÐÂÎļþ
@@ -0,0 +1,18 @@
<template>
  <div class="border-r-small">
    <div class="font-large">风险评估</div>
    <el-row justify="space-evenly">
      <el-statistic title="高风险" :value="10"> </el-statistic>
      <el-statistic title="中风险" :value="10"> </el-statistic>
      <el-statistic title="低风险" :value="10"> </el-statistic>
    </el-row>
  </div>
</template>

<script setup>
/**
 * å¯¹å®Œæˆçš„任务进行评估风险，显示高风险场景，显示复核的场景的情况
 */
</script>

<style scoped></style>

 src/views/management/ManagementView.vue

@@ -1,12 +1,14 @@
<template>
  <el-row> ç»Ÿè®¡ç®¡ç† </el-row>
  <!-- <el-row> ç»Ÿè®¡ç®¡ç† </el-row> -->
  <TaskStats></TaskStats>
  <EvaluateSummary></EvaluateSummary>
  <TaskSummary></TaskSummary>
</template>

<script setup>
import TaskStats from '@/views/management/TaskStats.vue'
import TaskSummary from '@/views/management/TaskSummary.vue'
import EvaluateSummary from '@/views/management/EvaluateSummary.vue'
</script>

<style scoped></style>

 src/views/management/TaskStats.vue

@@ -1,17 +1,22 @@
<template>
  <div class="border-r-small">
    <div class="f-l">各监管区县的巡查完成情况</div>
    <el-row>
      <TaskItem v-for="item in tasks" :key="item.guid" v-bind="item"></TaskItem>
    <div class="font-large">巡查量</div>
    <el-row justify="space-evenly">
      <el-statistic title="今日完成" :value="10"> </el-statistic>
      <el-statistic title="本周完成" :value="10"> </el-statistic>
    </el-row>
    <el-row>
    <!-- <el-row> -->
    <TaskItem v-for="item in tasks" :key="item.guid" v-bind="item"></TaskItem>
    <!-- </el-row> -->

    <!-- <el-row>
      <el-col :span="12">
        <SelfInspection></SelfInspection>
      </el-col>
      <el-col :span="12">
        <JointEnforcement></JointEnforcement>
      </el-col>
    </el-row>
    </el-row> -->
  </div>
</template>

@@ -33,7 +38,7 @@
  methods: {},
  mounted() {
    let i = 0
    while (i < 3) {
    while (i < 1) {
      this.tasks.push({
        guid: 'SMuheEkjswioSn7A',
        name: '2024å¹´6月上海市静安区巡查任务',