estate/src/views/workbench/index2.vue

<template>
  <!-- 外层缩放容器 -->
  <div class="scale-container">
    <div class="w-full h-full workBenchBox">
      <el-row>
        <el-col :span="18">
          <VillageAllInfo :list="list"></VillageAllInfo>
          <div class="echartsbox flex flex-items-center">
            <repairechartsAll></repairechartsAll>
            <feeOverview></feeOverview>
          </div>
        </el-col>
        <!-- tabs -->
        <el-col :span="6">
          <div class="flex flex-col h-full">
            <weatherVue :villageinfo="villageinfo"></weatherVue>
            <div class="tabbox1 flex flex-col flex-1 h-full">
              <div class="tabsbox flex flex-col flex-1">
                <div
                  :class="{
                    quickbg: sideActive === 1,
                    todobg: sideActive === 2
                  }"
                  class="topbox"
                >
                  <div
                    :class="{
                      active: sideActive === 1
                    }"
                    @click="handleSelect(1)"
                  >
                    <span>快捷入口</span>
                    <i></i>
                  </div>
                  <div
                    :class="{
                      active: sideActive === 2
                    }"
                    @click="handleSelect(2)"
                  >
                    <span>创建办事记录</span>
                    <i class="righti"></i>
                  </div>
                </div>
                <div class="body flex-1">
                  <quick v-if="sideActive === SideList.quick"></quick>
                  <todo v-else-if="sideActive === SideList.todo"></todo>
                </div>
              </div>
            </div>
          </div>
        </el-col>
      </el-row>
      <!-- table -->
      <el-row class="mt-20px">
        <el-col>
          <userTable></userTable>
        </el-col>
      </el-row>
    </div>
  </div>
</template>

<script lang="ts" setup>
import { useHouseStore } from '@/store/modules/house';

import icon1 from './assets/user.png';
import icon2 from './assets/user.png';
import icon3 from './assets/car.png';
import icon4 from './assets/device.png';
// import icon5 from './assets/wuliao.png';
import icon6 from './assets/tousu.png';

import { getVillageByIdAPI } from '@/api/system/community';
import { workSpaceTotalListApi } from '@/api/workflow';

import VillageAllInfo from './components/villageAllinfo.vue';
import weatherVue from './components/weather.vue';
import userTable from './components/usertable.vue';
import quick from './components/quick.vue';
import todo from './components/todo.vue';
import feeOverview from './components/feeOverview.vue';

// import inandoutEcharts from './components/inandout.vue';
import repairechartsAll from './components/repairechartsAll.vue';
const houseStore = useHouseStore();
const villageinfo = ref({
  'villageId': null,
  'villageName': ''
});
const list = ref([
  { name: '住户总数量', value: 10000, icon: icon1 },
  { name: '房屋总数量', value: 458, icon: icon2 },
  { name: '车位总数量', value: 2539, icon: icon3 },
  { name: '设备总数量', value: 22, icon: icon4 },
  { name: '投诉总数量', value: 458, icon: icon6 }
  // { name: '物料总数量', value: 458, icon: icon5 }
]);

function getVillageInfo() {
  const id = localStorage.getItem('villageid');
  workSpaceTotalListApi(id).then((res) => {
    list.value[0].value = res.totalResident ?? 0;
    list.value[1].value = res.totalHouse ?? 0;
    list.value[2].value = res.totalParking ?? 0;
    list.value[3].value = res.totalDevice ?? 0;
    list.value[4].value = res.totalComplaint ?? 0;
    // list.value[5].value = res.totalMaterial ?? 0;
  });
  getVillageByIdAPI(id).then((res) => {
    villageinfo.value = {
      ...villageinfo.value,
      villageId: res.data.villageId,
      villageName: res.data.villageName
    };
    // const city = res.data.city.replaceAll('/', '');
    // workSpaceWeatherApi(city).then((res) => {
    //   weather_icon.value = {
    //     iconvalue: res.weather_icon,
    //     title: res.weather,
    //     wind_direction: res.wind_direction,
    //     wind_power: res.wind_power,
    //     humidity: res.humidity,
    //     temperature: res.temperature
    //   };
    // });
    houseStore.updateVilageinfo(res.data);
  });
}
getVillageInfo();

// ! 侧边栏
const sideActive = ref(1);
function handleSelect(val: number) {
  sideActive.value = val;
}
// ! 侧边栏
/** 侧边栏功能枚举 */
enum SideList {
  /** 快捷入口 */
  quick = 1,
  /** 代办事项 */
  todo = 2
}
// ! 快捷入口
// ! 创建办事记录
</script>

<style lang="scss" scoped>
.scale-container {
  background-color: #eaf2ff;
  height: 100%;
  min-height: 0;
}

.workBenchBox {
  padding: 20px;
  background-color: #eaf2ff;
  overflow-y: auto; /* 滚动放到这里 */
  // tabs
  .tabbox1 {
    margin-left: 20px;
    background-image: url(./assets/Rectangle.png);
    background-repeat: no-repeat;
    background-size: 100% 100%;
  }
  .tabsbox {
    background-size: 100% auto;
    background-blend-mode: multiply;
    overflow: hidden;
    .topbox {
      display: flex;
      align-items: center;
      div {
        flex: 1;
        text-align: center;
        padding: 14px;
        cursor: pointer;
        color: #98a4b2;
        &.active {
          border-bottom-color: transparent;
          border-image: none;
          position: relative;
          color: #000;
          &::after {
            content: '';
            display: block;
            position: absolute;
            bottom: 0;
            left: 50%;
            width: 24px;
            height: 4px;
            background: #036aff;
            border-radius: 3px 3px 3px 3px;
            transform: translateX(-50%);
          }
        }
      }

      &.quickbg {
        background-image: url(./assets/tabs/Union_tabl.png);
        background-repeat: no-repeat;
        background-size: 100% 100%;
      }

      &.todobg {
        background-size: 100% 100%;
        background-repeat: no-repeat;
        background-image: url(./assets/tabs/Union_tabr.png);
      }
    }
    .body {
      color: #222222;
      padding: 20px;
      font-size: 0.75rem;
      background-image: url(./assets/tabs/Union_body.png);
      background-repeat: no-repeat;
      background-size: 100% 100%;
    }
  }
}
</style>