yxy/web/src/layouts/frontend/Yiqi.vue

<template>
  <video autoplay loop muted>
   <source src="/@/assets/particle2.mp4">
  </video>
  <div class="yiqi_box">
    <div class="yiqi_box1">
      <div class="visual_box">

        <div class="swiper-container visual_swiper1 visual_chart">

          <div class="visual_con">
            <div class="visual_conTop">
              <div class="visual_conTop_box visual_conTop1">
                <div>
                  <h3>仪器总数(台)</h3>
                  <div class="visual_shuju">
                    <p class="danshu">{{ ltydata.count }}</p>
                  </div>

                </div>
              </div>
              <div class="visual_conTop_box visual_conTop1">
                <div class="visual_shuju">
                  <h3>仪器总价值（万元）</h3>
                  <p class="danshu">{{ ltydata.value }}</p>
                </div>
              </div>

              <div class="visual_conTop_box visual_conTop2">
                <div>
                  <h3>仪器借出（台）</h3>
                  <div class="visual_shuju">
                    <!-- <p class="shuanshu">{{ ltydata.lent_number }}</p> -->
                    <p class="shuanshu">165</p>
                    <div class="conTop_smil">
                      <!-- fa-long-arrow-up -->
                      <a class="sz">周环比:<span>-5%</span><i class="fa fa-long-arrow-down"></i></a>
                      <a class="xd">月环比:<span>-2%</span><i class="fa fa-long-arrow-down"></i></a>
                    </div>
                  </div>
                </div>
              </div>

              <div class="visual_conTop_box visual_conTop2">
                <div>
                  <h3>仪器损坏（台）</h3>
                  <div class="visual_shuju">
                    <p class="shuanshu">{{ ltydata.repair_number }}</p>
                    <div class="conTop_smil">
                      <a class="null">null</a>
                      <a class="xd">月环比:<span>-10%</span><i class="fa fa-long-arrow-down"></i></a>
                    </div>
                  </div>
                </div>
              </div>
            </div>
          </div>
        </div>
      </div>
    </div>


    <!-- 蓝晓玉 -->
    <div class="yiqi_box3">
      <dv-border-box13 style="width:96vw;height:18vw;padding-left: 0.5vw;padding-top: 0.5vw;margin: 0 auto;"
        :color="['#4fd2dd', '#235fa7']">
        <div>
          <!-- title -->
        </div>

        <div class="lunbo_con">
          <!-- 内容 -->
          <Swiper :speed="2" :direction="'left'" :swiper_a='ltydata.labdisplay'></Swiper>
        </div>
      </dv-border-box13>
    </div>


    <div class="yiqi_box2">
      <div class="box2_left">
        <dv-border-box13 style="width:27vw;height:15.5vw;padding-left: 0.5vw;padding-top: 0.5vw;"
          :color="['#4fd2dd', '#235fa7']">
          <div class="box2_left_title">
            借单列表{{ data }}
          </div>
          <div class="box2_left_con">
<!--              <dv-scroll-board :config="config" style="width:26vw;height:12vw"-->
<!--                               />-->
            <dv-scroll-board :config="config" style="width:26vw;height:12vw" @mouseover="mouseoverHandler"
              @click="clickHandler" />
          </div>
        </dv-border-box13>
      </div>

      <div class="box2_center">
        <dv-border-box13 style="width:41vw;height:15.5vw;margin: 0 1.5vw; padding-left: 0.5vw;padding-top: 0.5vw;"
          :color="['#4fd2dd', '#235fa7']">
          <div class="box2_center_title">
            仪器借用统计（近6月）
          </div>
          <div class="box2_center_con">
            <div :style="{ width: '100%', height: '100%' }">
              <Echarts :option="option" />
            </div>
          </div>
        </dv-border-box13>
      </div>

      <div class="box2_right dslca">
        <dv-border-box13 style="width:25vw;height:15.5vw;padding-left: 0.5vw;padding-top: 0.5vw;"
          :color="['#4fd2dd', '#235fa7']">
          <div class="box2_right_title">
            仪器借用排行
          </div>
          <div class="box2_right_con">
            <dv-scroll-ranking-board :config="config2" style="width:24vw;height:11.5vw" />
          </div>
        </dv-border-box13>
      </div>


    </div>

    <div class="beijin"></div>
  </div>
</template>

<script setup lang="ts" name="Home">
import {onMounted, ref, reactive, computed, onUnmounted} from 'vue';
// import { BorderBox13 as DvBorderBox13 } from '@kjgl77/datav-vue3'
import dayjs from 'dayjs';
import Echarts from '/@/components/ReEcharts/index.vue';
import * as echarts from 'echarts';
import Swiper from '/@/layouts/frontend/BaseSwiper.vue'
import {useRouter} from "vue-router";
import createAxios from '/@/utils/axios'

const router = useRouter()

const ltydata = reactive({
  labinfo: [{
    laboratory_introduction: '',
    laboratorydisplay_diagram: ''
  }],
  count: 0,
  value: 0,
  lent_number: 0,
  repair_number: 0,
  "a": {
    "水准仪": 109,
    "RTK": 43,
    "全站仪": 89,
    "无人机": 19,
    "其他": 68
  },
  labborrow: [],

});
const datas = ref()
// 月份数据
const mouthsData = ref()

function pps_svg(i: number) {
  // 0k 1j
  return (i as boolean) ? '<span style="font-size:0.8vw"><svg width="1vw" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 1024 1024" data-v-ea893728=""><path fill="currentColor" d="M359.168 768H160a32 32 0 0 1-32-32V192H64a32 32 0 0 1 0-64h896a32 32 0 1 1 0 64h-64v544a32 32 0 0 1-32 32H665.216l110.848 192h-73.856L591.36 768H433.024L322.176 960H248.32zM832 192H192v512h640zM342.656 534.656a32 32 0 1 1-45.312-45.312L444.992 341.76l125.44 94.08L679.04 300.032a32 32 0 1 1 49.92 39.936L581.632 524.224 451.008 426.24 342.656 534.592z"></path></svg>教学借单</span>'
    : '<span style="font-size:0.8vw"><svg width="1vw" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 1024 1024" data-v-ea893728=""><path fill="currentColor" d="M839.7 734.7c0 33.3-17.9 41-17.9 41S519.7 949.8 499.2 960c-10.2 5.1-20.5 5.1-30.7 0 0 0-314.9-184.3-325.1-192-5.1-5.1-10.2-12.8-12.8-20.5V368.6c0-17.9 20.5-28.2 20.5-28.2L466 158.6c12.8-5.1 25.6-5.1 38.4 0 0 0 279 161.3 309.8 179.2 17.9 7.7 28.2 25.6 25.6 46.1-.1-5-.1 317.5-.1 350.8M714.2 371.2c-64-35.8-217.6-125.4-217.6-125.4-7.7-5.1-20.5-5.1-30.7 0L217.6 389.1s-17.9 10.2-17.9 23v297c0 5.1 5.1 12.8 7.7 17.9 7.7 5.1 256 148.5 256 148.5 7.7 5.1 17.9 5.1 25.6 0 15.4-7.7 250.9-145.9 250.9-145.9s12.8-5.1 12.8-30.7v-74.2l-276.5 169v-64c0-17.9 7.7-30.7 20.5-46.1L745 535c5.1-7.7 10.2-20.5 10.2-30.7v-66.6l-279 169v-69.1c0-15.4 5.1-30.7 17.9-38.4l220.1-128zM919 135.7c0-5.1-5.1-7.7-7.7-7.7h-58.9V66.6c0-5.1-5.1-5.1-10.2-5.1l-30.7 5.1c-5.1 0-5.1 2.6-5.1 5.1V128h-56.3c-5.1 0-5.1 5.1-7.7 5.1v38.4h69.1v64c0 5.1 5.1 5.1 10.2 5.1l30.7-5.1c5.1 0 5.1-2.6 5.1-5.1v-56.3h64l-2.5-38.4z"></path></svg>科研借单</span>'
}
function sta_style(i: number) {
  // 0k 1j
  var lty_color_tab = ['#fe3e12', '#c5c8ce', '#00ff00', '#00ff00', '#c5c8ce', '#fe3e12', '#fe3e12', '#c5c8ce'];
  var sta_str = ['待审批', '已驳回', '待使用', '使用中', '已归还', '已逾期', '待审批', '已驳回']
  return '<span style="color:' + lty_color_tab[i] + ';font-size:0.8vw">' + sta_str[i] + '</span>';
}

//大屏操作
const timer: any = ref(null);
const checkBackendStatus: any = async () => {
    const response = await createAxios({
            url: '/api/ScreenData/getCurrent',
            method: 'get',
        }
    ).then(async (val: any) => {
        console.log(val.data)
        if (val.code == 1) {
            if (val.data.data.types == 'opt1') {
                setTimeout(() => {
                    console.log(val.data.data.time* 60 * 1000)
                    router.push('/home');
                }, val.data.data.time * 60 * 1000)
            }
        }
    })
};
onMounted(() => {
    // 每5秒轮询一次
    timer.value = setInterval(checkBackendStatus, 5000);
});

onUnmounted(() => {
    // 清除定时器
    clearInterval(timer.value);
});

// 列表

let config: any = reactive({
  header: ['<span style="color:#20dbfd;font-weight: bold;font-size:0.9vw">仪器类型</span>', '<span style="color:#20dbfd;font-weight: bold;font-size:0.9vw">借单时间</span>', '<span style="color:#20dbfd;font-weight: bold;font-size:0.9vw">领用人</span>', '<span style="color:#20dbfd;font-weight: bold;font-size:0.9vw">借单状态</span>'],
  headerBGC: '',
  indexHeader: '',
  oddRowBGC: '#31416042',
  evenRowBGC: '',
  columnWidth: [110],
  align: ['center'],
  rowNum: 4,
  columnWidth: [130, 200, 100, 100],
})





await createAxios({
  url: '/api/ScreenData/getdata',
  method: 'get',
},
  {
    loading: true,

  }
).then(async (val: any) => {

  //  console.log(val)
  //  yiqiData.value = val.data
  //  console.log(yiqiData.value)

  Object.assign(ltydata, val.data);
  var reb_labborrow = [];
  ltydata.labborrow.forEach(elm => {
    reb_labborrow.push([
      pps_svg(elm.purpose),
      '<span style="font-size:0.8vw">' + elm.create_time + '</span>',
      '<span style="font-size:0.8vw">' + elm.username + '</span>',
      sta_style(elm.status)
    ])
  });
  config.data = reb_labborrow;
  console.log(ltydata)
})


// 排名
datas.value = Object.entries(ltydata.q).map(entry => ({
  name: entry[0],
  value: entry[1]
}));
console.log('s', datas);


const config2 = reactive({
  data: datas,
  unit: '台',
  color: '#409EFF',
})


// 月份柱状图
mouthsData.value = Object.entries(ltydata.mq).map(entry => ({
  key: entry[0],
  value: entry[1]
}));

console.log("mouthsData", mouthsData.value);

// 获取当前月份
const currentMonth = computed(() => {
  return dayjs().format('MM');
});
// 筛选出当前月和前5个月的数据
const currentAndPreviousFiveMonthsData = computed(() => {
  const now = dayjs();
  const filteredData = [];
  for (let i = 0; i < 6; i++) {
    const month = now.subtract(i, 'month').format('MM');
    const dataItem = mouthsData.value.find(item => item.key === month);
    if (dataItem) {
      filteredData.push(dataItem);
    }
  }
  return filteredData;
});
console.log("currentAndPreviousFiveMonthsData", currentAndPreviousFiveMonthsData.value)
currentAndPreviousFiveMonthsData.value.reverse();
const keys = ref();
const values = ref();

// 提取键和值
keys.value = currentAndPreviousFiveMonthsData.value.map(item => item.key);
values.value = currentAndPreviousFiveMonthsData.value.map(item => item.value);


console.log('Keys:', keys.value);
console.log('Values:', values.value);

const monthNumberToChineseMap = {
  '01': '一月',
  '02': '二月',
  '03': '三月',
  '04': '四月',
  '05': '五月',
  '06': '六月',
  '07': '七月',
  '08': '八月',
  '09': '九月',
  '10': '十月',
  '11': '十一月',
  '12': '十二月'
};

// // 假设你有一个包含数字月份的数组
// const numberMonths = ['03', '02', '01', '12', '11', '10'];

// 转换为中文月份名称
const chineseMonthNames = keys.value.map(month => monthNumberToChineseMap[month]);

console.log(chineseMonthNames);



const option = reactive({
  xAxis: [{
    type: 'category',
    data: chineseMonthNames,
    axisLabel: {
      textStyle: {
        color: '#fff', //坐标值得具体的颜色
      }
    },
  },

  ],
  yAxis: [{
    type: 'value',
    axisLabel: {
      textStyle: {
        color: '#fff', //坐标值得具体的颜色

      }
    },
  }],
  grid: {
    left: '3%',
    right: '4%',
    bottom: '3%',
    top: '12%',
    containLabel: true
  },
  series: [
    {
      data: values.value,
      type: 'bar',
      showBackground: true,
      barWidth: '60%',
      itemStyle: {
        color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
          { offset: 0, color: '#83bff6' },
          { offset: 0.5, color: '#188df0' },
          { offset: 1, color: '#188df0' }
        ])
      },
      label: {
        show: true, //开启显示
        position: 'top', //在上方显示
        formatter: '{c}',//显示百分号
        textStyle: { //数值样式
          color: '#fff',//字体颜色
          fontSize: 16//字体大小
        }
      },
    }
  ]
})


</script>


<style scoped>
video {
  width: 100%;
  position: absolute;
  /* top: 0; */
  left: 0;
  bottom: -110px;
}

.beijin {
  width: 100%;
  height: 100%;
  position: absolute;
  z-index: -1;
  top: 0;
  background-color: rgb(23, 23, 23) !important;
}

.lunbo_con {
  height: 14vw;
}

.yiqi_box3 {
  width: 100%;
  margin-bottom: 1vw;

}
/* .box2_right_con{
  height: 12vw;
} */
.yiqi_box2 {
  height: 14vw;
}

.box2_center_con {
  height: 12vw;

}

.box2_left,
.box2_center,
.box2_right {
  float: left;
}



.box2_left_title,
.box2_center_title,
.box2_right_title {
  color: #ffffff;
  font-weight: bold;
  font-size: 1vw;
  margin: 0.5vw;
}


.box2_left {
  margin-left: 2vw;
  width: 27vw;
  height: 14vw;
  /* background-color: #747474; */
}

.shuanshu {
  margin-left: 33%;
}

.visual_conTop1 .danshu {
  width: 99%;
}

.visual_shuju {
  width: 100%;
}

.yiqi_box {
  width: 100%;
}

.visual_box {
  height: 6vw;
}

.visual_box .visual_title {
  position: relative;
  height: 2vw;
}

.visual_box .visual_title span[data-v-8733ac73] {
  color: #fff;
  font-size: 1.2vw;
  line-height: 1.5vw;
  margin-left: 1vw;
}

.visual_con {
  height: 100%;
}

.visual_con .visual_conTop {
  height: 6.5vw;
  margin-top: 6vw;
}

.visual_con .visual_conTop .visual_conTop_box {
  height: 100%;
  padding: 0 3px;
}

.visual_con .visual_conTop .visual_conTop1 {
  width: 25%;
  height: 100%;
  float: left;
}

.visual_con .visual_conTop .visual_conTop1>div {
  background: url(../images/ksh40.png) no-repeat;
  background-size: 100% 100%;
}

.visual_con .visual_conTop .visual_conTop2 {
  width: 25%;
  height: 100%;
  float: left;
}

.visual_con .visual_conTop .visual_conTop2>div {
  background: url(../images/ksh39.png) no-repeat;
  background-size: 100% 100%;
}

.visual_right {
  width: 25%;
  height: 900px;
  float: right;
}

.visual_con .visual_conTop .visual_conTop_box>div {
  height: 100%;
  text-align: center;
}

.visual_con .visual_conTop .visual_conTop_box>div h3 {
  color: #fff;
  font-size: 1vw;
}

.visual_con .visual_conTop .visual_conTop_box>div p {
  float: left;
  line-height: 4vw;
  color: #20dbfd;
  text-shadow: 0 0 0.8vw #00d8ff;
  font-size: 2.5vw;
  font-family: 'yjsz';
}

.visual_con .visual_conTop .visual_conTop_box>div .conTop_smil {
  width: 31%;
  height: 4vw;
  float: left;
  padding-top: 1.2vw;
  font-size: 0.7vw;
  margin-left: 0.5vw;
}

.visual_con .visual_conTop .visual_conTop_box>div .conTop_smil a {
  display: block;
  text-align: left;
  color: #fff;
}

.visual_con .visual_conTop .visual_conTop_box>div .conTop_smil span {
  display: inline-block;
  margin-left: 0.2vw;
}

.visual_con .visual_conTop .visual_conTop_box>div .conTop_smil a.sz {
  color: #ff9900;
}

.visual_con .visual_conTop .visual_conTop_box>div .conTop_smil a.xd {
  color: #12fe81;
}

.visual_con .visual_conTop .visual_conTop_box>div .conTop_smil a.null {
  visibility: hidden;
}

.home {
  width: 800px;
  height: 300px;
}

.bg {
  width: 100vw;
  height: 100vh;
  background: url(/@/assets/bg.jpg) repeat;
  background-size: 100%;
  color: var(--el-color-white);
  z-index: -1;
  position: absolute;
  background-attachment: fixed
}
</style>
<style>
.ranking-value {
  font-size: 0.9vw;
}

.rank {
  font-size: 0.8vw;
}

.info-name {
  font-size: 0.8vw;
}
.dslca .rank{
  width: auto !important;
  margin-right: 5px;
}
.dslca .ranking-info{
  line-height: 20px;
}
.dslca .row-item{
  margin-bottom: 0px;
}
.dslca .ranking-value{
  margin-right: 5px;
}
.dslca .dv-scroll-ranking-board .ranking-column{
  margin-top: 1px !important;
}
</style>