值班员工作台两侧列表

src/store/modules/app.ts

@@ -7,7 +7,7 @@ const state = {
 	},
 	userInfo: <any>{},
 	userRoleList: [],
-	zby: false,
+	zby: true,
 	timestamp: new Date().getTime()
 }
 

src/views/staging/zby/index.vue

@@ -1,8 +1,14 @@
 <template>
   <div class="staging-layout">
-    <div class="staging-left">1</div>
-    <div class="staging-center">2</div>
-    <div class="staging-right">3</div>
+    <div class="staging-left">
+      <ClueCom class="clue-main"/>
+      <ResearchCom class="daily-weekly-main"/>
+    </div>
+<!--    <div class="staging-center">2</div>-->
+    <div class="staging-right">
+      <NoticeCom class="notice-main"/>
+      <DailyWeeklyCom class="daily-weekly-main"/>
+    </div>
   </div>
 </template>
 
@@ -21,10 +27,19 @@ import {
 } from 'vue'
 import {useStore} from 'vuex'
 import {useRouter, useRoute} from 'vue-router'
+import ClueCom from "./left/clue-com.vue";
+import ResearchCom from "./left/research-com.vue";
+import NoticeCom from "./right/notice-com.vue";
+import DailyWeeklyCom from "./right/daily-weekly-com.vue";
 
 export default defineComponent({
   name: '',
-  components: {},
+  components: {
+    ClueCom,
+    ResearchCom,
+    NoticeCom,
+    DailyWeeklyCom,
+  },
   setup(props, {emit}) {
     const store = useStore();
     const router = useRouter();
@@ -39,4 +54,20 @@ export default defineComponent({
 </script>
 
 <style scoped lang="scss">
+.staging-left {
+  display: flex;
+  flex-direction: column;
+  >div {
+    width: 100%;
+    height: calc(100% / 2);
+  }
+}
+.staging-right {
+  display: flex;
+  flex-direction: column;
+  >div {
+    width: 100%;
+    height: calc(100% / 2);
+  }
+}
 </style>

src/views/staging/zby/left/clue-com.vue

@@ -0,0 +1,121 @@
+<template>
+  <BaseBlockCom title="我的线索">
+    <template #title>
+      <div class="more">查看更多》</div>
+    </template>
+    <ButtonSwitchCom class="buttons" :options="[
+          {label: '日', value: '1'},
+          {label: '周', value: '2'},
+          {label: '月', value: '3'},
+      ]" padding="3px 12px" v-model:active="dateType"/>
+    <div class="statistic">
+      sadasdsd
+    </div>
+    <div class="list">
+      <template v-for="item in list">
+        <div class="item">
+          <img src="@/assets/images/business/clue-icon.png"/>
+          <div class="title __text-ellipsis">{{item.title}}</div>
+          <div class="time">{{Handle.formatDate(item.time)}}</div>
+        </div>
+      </template>
+    </div>
+  </BaseBlockCom>
+</template>
+
+<script lang="ts">
+import {
+  defineComponent,
+  computed,
+  onMounted,
+  ref,
+  reactive,
+  watch,
+  getCurrentInstance,
+  ComponentInternalInstance,
+  toRefs,
+  nextTick
+} from 'vue'
+import {useStore} from 'vuex'
+import {useRouter, useRoute} from 'vue-router'
+import BaseBlockCom from '../../common/base-block.vue'
+import ButtonSwitchCom from '../../common/button-switch.vue'
+import * as Handle from '../../common/handle'
+
+export default defineComponent({
+  name: '',
+  components: {
+    BaseBlockCom,
+    ButtonSwitchCom,
+  },
+  setup(props, {emit}) {
+    const store = useStore();
+    const router = useRouter();
+    const route = useRoute();
+    const that = (getCurrentInstance() as ComponentInternalInstance).appContext.config.globalProperties
+    const state = reactive({
+      Handle: Handle,
+      list: [
+        {type: 1, title: '系统新版本升级V1.1通知，新功能系统新版本升级V1.1通知，新功能', time: '2023-09-01 13:22:33'},
+        {type: 2, title: '系统新版本升级V1.1通知，新功能系统新版本升级V1.1通知，新功能', time: '2023-11-22 13:22:33'},
+        {type: 1, title: '系统新版本升级V1.1通知', time: '2023-11-01 13:22:33'},
+        {type: 1, title: '系统新版本升级V1.1通知', time: '2023-11-01 13:22:33'},
+        {type: 1, title: '系统新版本升级V1.1通知', time: '2023-11-01 13:22:33'},
+        {type: 2, title: '系统新版本升级V1.1通知', time: '2023-11-01 13:22:33'},
+        {type: 1, title: '系统新版本升级V1.1通知', time: '2023-11-01 13:22:33'},
+      ],
+      dateType: '1'
+    })
+    return {
+      ...toRefs(state)
+    }
+  },
+})
+</script>
+
+<style scoped lang="scss">
+.more {
+  font-size: 12px;
+  font-family: Microsoft YaHei;
+  font-weight: 400;
+  color: #2EB8FF;
+  margin-right: 10px;
+}
+$buttonsHeight: 30px;
+.buttons {
+  height: $buttonsHeight;
+  justify-content: center;
+}
+$statisticHeight: 70px;
+.statistic {
+  width: 100%;
+  height: $statisticHeight;
+}
+.list {
+  width: 100%;
+  height: calc(100% - #{$buttonsHeight} - #{$statisticHeight});
+  overflow: hidden;
+  display: grid;
+  grid-template-rows: repeat(8, 1fr);
+  padding: 0 10px;
+  box-sizing: border-box;
+  .item {
+    display: flex;
+    align-items: center;
+    font-size: 14px;
+    font-family: Microsoft YaHei;
+    font-weight: 400;
+    color: #C5D0D4;
+    width: 100%;
+    >img {
+      margin-right: 8px;
+    }
+    .title {
+      max-width: 260px;
+    }
+    .time {
+      margin-left: auto;
+    }
+  }
+}
+</style>

src/views/staging/zby/left/research-com.vue

@@ -0,0 +1,101 @@
+<template>
+  <BaseBlockCom title="研判报告">
+    <template #title>
+      <div class="more">查看更多》</div>
+    </template>
+    <div class="list">
+      <template v-for="(item, index) in list">
+        <div class="item">
+          <div class="title __text-ellipsis">{{index + 1}}、{{item.title}}</div>
+          <div class="time">{{Handle.formatDate(item.time)}}</div>
+        </div>
+      </template>
+    </div>
+  </BaseBlockCom>
+</template>
+
+<script lang="ts">
+import {
+  defineComponent,
+  computed,
+  onMounted,
+  ref,
+  reactive,
+  watch,
+  getCurrentInstance,
+  ComponentInternalInstance,
+  toRefs,
+  nextTick
+} from 'vue'
+import {useStore} from 'vuex'
+import {useRouter, useRoute} from 'vue-router'
+import BaseBlockCom from '../../common/base-block.vue'
+import * as Handle from '../../common/handle'
+
+export default defineComponent({
+  name: '',
+  components: {
+    BaseBlockCom,
+  },
+  setup(props, {emit}) {
+    const store = useStore();
+    const router = useRouter();
+    const route = useRoute();
+    const that = (getCurrentInstance() as ComponentInternalInstance).appContext.config.globalProperties
+    const state = reactive({
+      Handle: Handle,
+      list: [
+        {type: 1, title: '日、系统新版本升级V1.1通知，新功能系统新版本升级V1.1通知，新功能', time: '2023-09-01 13:22:33'},
+        {type: 2, title: '周、系统新版本升级V1.1通知，新功能系统新版本升级V1.1通知，新功能', time: '2023-11-22 13:22:33'},
+        {type: 1, title: '日、系统新版本升级V1.1通知', time: '2023-11-01 13:22:33'},
+        {type: 1, title: '日、系统新版本升级V1.1通知', time: '2023-11-01 13:22:33'},
+        {type: 1, title: '日、系统新版本升级V1.1通知', time: '2023-11-01 13:22:33'},
+        {type: 2, title: '周、系统新版本升级V1.1通知', time: '2023-11-01 13:22:33'},
+        {type: 1, title: '日、系统新版本升级V1.1通知', time: '2023-11-01 13:22:33'},
+        {type: 1, title: '日、系统新版本升级V1.1通知', time: '2023-11-01 13:22:33'},
+        {type: 2, title: '周、系统新版本升级V1.1通知', time: '2023-11-01 13:22:33'},
+        {type: 1, title: '日、系统新版本升级V1.1通知', time: '2023-11-01 13:22:33'},
+        {type: 1, title: '日、系统新版本升级V1.1通知', time: '2023-11-01 13:22:33'},
+      ],
+
+    })
+    return {
+      ...toRefs(state),
+    }
+  },
+})
+</script>
+
+<style scoped lang="scss">
+.more {
+  font-size: 12px;
+  font-family: Microsoft YaHei;
+  font-weight: 400;
+  color: #2EB8FF;
+  margin-right: 10px;
+}
+.list {
+  width: 100%;
+  height: 100%;
+  overflow: hidden;
+  display: grid;
+  grid-template-rows: repeat(11, 1fr);
+  padding: 0 10px;
+  box-sizing: border-box;
+  .item {
+    display: flex;
+    align-items: center;
+    font-size: 14px;
+    font-family: Microsoft YaHei;
+    font-weight: 400;
+    color: #C5D0D4;
+    width: 100%;
+    .title {
+      max-width: 280px;
+    }
+    .time {
+      margin-left: auto;
+    }
+  }
+}
+</style>

src/views/staging/zby/right/daily-weekly-com.vue

@@ -0,0 +1,137 @@
+<template>
+  <BaseBlockCom title="日报周报">
+    <template #title>
+      <ButtonSwitchCom style="margin-right: 14px" :options="[
+          {label: '日报', value: '1'},
+          {label: '周报', value: '2'},
+      ]" padding="6px 16px" type="type2" v-model:active="sourceType"/>
+      <div class="more">查看更多》</div>
+    </template>
+    <div class="list">
+      <template v-for="item in list">
+        <div class="item __hover" @click="onView(item)">
+          <img src="@/assets/images/business/clue-icon.png"/>
+          <div class="title __text-ellipsis">{{item.title}}</div>
+          <div class="time">{{Handle.formatDate(item.time)}}</div>
+        </div>
+      </template>
+    </div>
+    <DailyManageDetailCom v-model:show="showDaily" :transfer="transferDaily"/>
+    <WeeklyManageDetailCom v-model:show="showWeekly" :transfer="transferWeekly"/>
+  </BaseBlockCom>
+</template>
+
+<script lang="ts">
+import {
+  defineComponent,
+  computed,
+  onMounted,
+  ref,
+  reactive,
+  watch,
+  getCurrentInstance,
+  ComponentInternalInstance,
+  toRefs,
+  nextTick
+} from 'vue'
+import {useStore} from 'vuex'
+import {useRouter, useRoute} from 'vue-router'
+import BaseBlockCom from '../../common/base-block.vue'
+import ButtonSwitchCom from '../../common/button-switch.vue'
+import * as Handle from '../../common/handle'
+import DailyManageDetailCom from '@/views/system/daily-manage/detail.vue'
+import WeeklyManageDetailCom from '@/views/system/weekly-manage/detail.vue'
+
+export default defineComponent({
+  name: '',
+  components: {
+    BaseBlockCom,
+    ButtonSwitchCom,
+    DailyManageDetailCom,
+    WeeklyManageDetailCom
+  },
+  setup(props, {emit}) {
+    const store = useStore();
+    const router = useRouter();
+    const route = useRoute();
+    const that = (getCurrentInstance() as ComponentInternalInstance).appContext.config.globalProperties
+    const state = reactive({
+      Handle: Handle,
+      list: [
+        {type: 1, title: '日、系统新版本升级V1.1通知，新功能系统新版本升级V1.1通知，新功能', time: '2023-09-01 13:22:33'},
+        {type: 2, title: '周、系统新版本升级V1.1通知，新功能系统新版本升级V1.1通知，新功能', time: '2023-11-22 13:22:33'},
+        {type: 1, title: '日、系统新版本升级V1.1通知', time: '2023-11-01 13:22:33'},
+        {type: 1, title: '日、系统新版本升级V1.1通知', time: '2023-11-01 13:22:33'},
+        {type: 1, title: '日、系统新版本升级V1.1通知', time: '2023-11-01 13:22:33'},
+        {type: 2, title: '周、系统新版本升级V1.1通知', time: '2023-11-01 13:22:33'},
+        {type: 1, title: '日、系统新版本升级V1.1通知', time: '2023-11-01 13:22:33'},
+        {type: 1, title: '日、系统新版本升级V1.1通知', time: '2023-11-01 13:22:33'},
+        {type: 2, title: '周、系统新版本升级V1.1通知', time: '2023-11-01 13:22:33'},
+        {type: 1, title: '日、系统新版本升级V1.1通知', time: '2023-11-01 13:22:33'},
+        {type: 1, title: '日、系统新版本升级V1.1通知', time: '2023-11-01 13:22:33'},
+      ],
+      sourceType: '1',
+      showDaily: false,
+      transferDaily: {},
+      showWeekly: false,
+      transferWeekly: {}
+    })
+    const onView = (val) => {
+      if (val.type === 1) {
+        state.transferDaily = {
+          method: 'view',
+          detail: val
+        }
+        state.showDaily = true
+      } else {
+        state.transferWeekly = {
+          method: 'view',
+          detail: val
+        }
+        state.showWeekly = true
+      }
+    }
+    return {
+      ...toRefs(state),
+      onView
+    }
+  },
+})
+</script>
+
+<style scoped lang="scss">
+.more {
+  font-size: 12px;
+  font-family: Microsoft YaHei;
+  font-weight: 400;
+  color: #2EB8FF;
+  margin-right: 10px;
+}
+.list {
+  width: 100%;
+  height: 100%;
+  overflow: hidden;
+  display: grid;
+  grid-template-rows: repeat(11, 1fr);
+  padding: 0 10px;
+  box-sizing: border-box;
+  .item {
+    display: flex;
+    align-items: center;
+    font-size: 14px;
+    font-family: Microsoft YaHei;
+    font-weight: 400;
+    color: #C5D0D4;
+    width: 100%;
+    >img {
+      margin-right: 8px;
+    }
+    .title {
+      max-width: 260px;
+    }
+    .time {
+      margin-left: auto;
+    }
+  }
+}
+</style>

src/views/staging/zby/right/notice-com.vue

@@ -0,0 +1,148 @@
+<template>
+  <BaseBlockCom title="通知公告">
+    <template #title>
+      <div class="more">查看更多》</div>
+    </template>
+    <div class="list">
+      <template v-for="item in list">
+        <div class="item __hover" @click="onView(item)">
+          <div class="type" :class="`type-${item.type}`">
+            {{item.type === 1 ? '消息' : '通知'}}
+            <div v-if="!item.read" class="read"/>
+          </div>
+          <div class="title __text-ellipsis">{{item.title}}</div>
+          <div class="time">{{Handle.formatDate(item.time)}}</div>
+        </div>
+      </template>
+    </div>
+    <NoticeDetailCom v-model:show="showDetail" :transfer="transfer"/>
+  </BaseBlockCom>
+</template>
+
+<script lang="ts">
+import {
+  defineComponent,
+  computed,
+  onMounted,
+  ref,
+  reactive,
+  watch,
+  getCurrentInstance,
+  ComponentInternalInstance,
+  toRefs,
+  nextTick
+} from 'vue'
+import {useStore} from 'vuex'
+import {useRouter, useRoute} from 'vue-router'
+import BaseBlockCom from '../../common/base-block.vue'
+import * as Handle from '../../common/handle'
+import NoticeDetailCom from '@/views/system/notice-announcement/detail.vue'
+
+export default defineComponent({
+  name: '',
+  components: {
+    BaseBlockCom,
+    NoticeDetailCom
+  },
+  setup(props, {emit}) {
+    const store = useStore();
+    const router = useRouter();
+    const route = useRoute();
+    const that = (getCurrentInstance() as ComponentInternalInstance).appContext.config.globalProperties
+    const state = reactive({
+      Handle: Handle,
+      list: [
+        {type: 1, read: false, title: '系统新版本升级V1.1通知，新功能系统新版本升级V1.1通知，新功能', time: '2023-09-01 13:22:33'},
+        {type: 2, read: false, title: '系统新版本升级V1.1通知，新功能系统新版本升级V1.1通知，新功能', time: '2023-11-22 13:22:33'},
+        {type: 1, read: false, title: '系统新版本升级V1.1通知', time: '2023-11-01 13:22:33'},
+        {type: 1, read: true, title: '系统新版本升级V1.1通知', time: '2023-11-01 13:22:33'},
+        {type: 1, read: false, title: '系统新版本升级V1.1通知', time: '2023-11-01 13:22:33'},
+        {type: 2, read: true, title: '系统新版本升级V1.1通知', time: '2023-11-01 13:22:33'},
+        {type: 1, read: true, title: '系统新版本升级V1.1通知', time: '2023-11-01 13:22:33'},
+        {type: 1, read: true, title: '系统新版本升级V1.1通知', time: '2023-11-01 13:22:33'},
+        {type: 1, read: true, title: '系统新版本升级V1.1通知', time: '2023-11-01 13:22:33'},
+        {type: 1, read: true, title: '系统新版本升级V1.1通知', time: '2023-11-01 13:22:33'},
+        {type: 1, read: true, title: '系统新版本升级V1.1通知', time: '2023-11-01 13:22:33'},
+      ],
+      showDetail: false,
+      transfer: {}
+    })
+    const onView = (val) => {
+      state.transfer = {
+        method: 'view',
+        detail: val
+      }
+      state.showDetail = true
+    }
+    return {
+      ...toRefs(state),
+      onView
+    }
+  },
+})
+</script>
+
+<style scoped lang="scss">
+.more {
+  font-size: 12px;
+  font-family: Microsoft YaHei;
+  font-weight: 400;
+  color: #2EB8FF;
+  margin-right: 10px;
+}
+.list {
+  width: 100%;
+  height: 100%;
+  overflow: hidden;
+  display: grid;
+  grid-template-rows: repeat(11, 1fr);
+  padding: 0 10px;
+  box-sizing: border-box;
+  .item {
+    display: flex;
+    align-items: center;
+    font-size: 14px;
+    font-family: Microsoft YaHei;
+    font-weight: 400;
+    color: #C5D0D4;
+    width: 100%;
+    .type {
+      width: 46px;
+      height: 25px;
+      display: flex;
+      align-items: center;
+      justify-content: center;
+      background-repeat: no-repeat;
+      background-size: 100% 100%;
+      font-size: 12px;
+      padding-bottom: 2px;
+      box-sizing: border-box;
+      margin-right: 8px;
+      position: relative;
+      &.type-1 {
+        color: #20D9AA;
+        background-image: url("@/assets/images/business/notice-xx.png");
+      }
+      &.type-2 {
+        color: #F2C347;
+        background-image: url("@/assets/images/business/notice-tz.png");
+      }
+      .read {
+        width: 7px;
+        height: 7px;
+        background-color: #E5004F;
+        border-radius: 50%;
+        position: absolute;
+        top: -2px;
+        left: -2px;
+      }
+    }
+    .title {
+      max-width: 230px;
+    }
+    .time {
+      margin-left: auto;
+    }
+  }
+}
+</style>