create-young-proj 1.7.0 → 2.1.0

package/template-big-screen/src/components/YoungHeader.vue

@@ -0,0 +1,54 @@
+<!--
+ * @Author: zhangyang
+ * @Date: 2024-02-02 14:28:02
+ * @LastEditTime: 2024-05-30 18:49:53
+ * @Description:
+-->
+<script setup lang='ts'>
+const formatted = useDateFormat(useNow(), 'YYYY-MM-DD HH:mm:ss')
+const { toggle, isFullscreen } = useFullscreen()
+
+const colorBtnTitle = computed(() => {
+  return isDark.value ? '切换成浅色主题' : '切换成深色主题'
+})
+
+const fullScreenTitle = computed(() => {
+  return isFullscreen.value ? '退出全屏' : '全屏'
+})
+</script>
+
+<template>
+  <div class="between">
+    <div class="center-y">
+      <div :class="{ 'logo-light': !isDark, 'logo-night': isDark }" class="h-120px bg-no-repeat" />
+      <div class="ml-4 flex-col justify-between">
+        <div class="font-mono text-2xl font-bold tracking-1">
+          XXXXXXXX
+        </div>
+        <div class="relative top-2 font-extralight tracking-widest italic underline decoration-[#ddd] underline-offset-8">
+          XXXX可视化分析平台
+        </div>
+      </div>
+    </div>
+    <div class="center-y">
+      <div class="w-80 center text-2xl font-bold tracking-0.5">
+        {{ formatted }}
+      </div>
+      <div class="w-14 center" :title="colorBtnTitle">
+        <div class="i-carbon-light dark:i-carbon-moon icon-btn" @click="toggleDark" />
+      </div>
+      <div class="w-14 center" :title="fullScreenTitle">
+        <div class="i-carbon-ica-2d icon-btn" @click="toggle" />
+      </div>
+    </div>
+  </div>
+</template>
+
+<style scoped lang="scss">
+ .logo-light{
+    background-position: 0 -140px;
+  }
+   .logo-night{
+    background-position: 0 0;
+  }
+</style>

package/template-big-screen/src/components/YoungSectionContainer.vue

@@ -0,0 +1,55 @@
+<!--
+ * @Author: zhangyang
+ * @Date: 2024-02-02 11:43:48
+ * @LastEditTime: 2024-02-02 11:44:33
+ * @Description:
+-->
+<script setup lang='ts'>
+withDefaults(defineProps<{
+  right?: boolean
+}>(), {
+  right: false,
+})
+</script>
+
+<template>
+  <div :class="[!right ? 'contanier-border-left' : 'contanier-border-right']">
+    <div />
+    <div />
+    <div />
+    <slot />
+  </div>
+</template>
+
+<style scoped lang="scss">
+.contanier-border-left{
+ --uno:relative px-2 py-2  text-sm w-50% border-1 border-solid border-[#457482] rounded-br-6;
+
+ > div:nth-child(1){
+  --uno:h-1.5 w-1.5 bg-[#ffda67] absolute top-0 left-0 ;
+ }
+
+ > div:nth-child(2){
+  --uno:h-1.5 w-1.5 bg-[#ffda67] absolute top-0 right-0 ;
+ }
+
+ > div:nth-child(3){
+  --uno:h-1.5 w-1.5 bg-[#ffda67] absolute bottom-0 left-0 ;
+ }
+}
+.contanier-border-right{
+ --uno:relative px-2 py-2  text-sm w-50% border-1 border-solid border-[#457482] rounded-bl-6;
+
+ > div:nth-child(1){
+  --uno:h-1.5 w-1.5 bg-[#ffda67] absolute top-0 left-0 ;
+ }
+
+ > div:nth-child(2){
+  --uno:h-1.5 w-1.5 bg-[#ffda67] absolute top-0 right-0 ;
+ }
+
+ > div:nth-child(3){
+  --uno:h-1.5 w-1.5 bg-[#ffda67] absolute bottom-0 right-0 ;
+ }
+}
+</style>

package/template-big-screen/src/components/YoungSectionHeader.vue

@@ -0,0 +1,23 @@
+<!--
+ * @Author: zhangyang
+ * @Date: 2024-02-02 11:36:25
+ * @LastEditTime: 2024-02-02 11:41:22
+ * @Description:
+-->
+<script setup lang='ts'>
+defineProps<{
+  index: string
+  title: string
+}>()
+</script>
+
+<template>
+  <div class="center-y text-white dark:text-[#03dbf6]">
+    <div class="h-8 w-8 center bg-[#189692] dark:bg-[#4e6b8d]">
+      {{ index }}
+    </div>
+    <div class="h-8 w-full center-y bg-[#189692] pl-2 opacity-70 dark:bg-[#2a3c55] dark:opacity-100">
+      {{ title }}
+    </div>
+  </div>
+</template>

package/template-big-screen/src/composables/breakPoint.ts

@@ -0,0 +1,20 @@
+export function useAppBreakpoint() {
+  const breakpoints = useBreakpoints(Breakpoint)
+  const current = breakpoints.current()
+  const xs = breakpoints.smaller('sm')
+  const sm = breakpoints.between('sm', 'md')
+  const md = breakpoints.between('md', 'lg')
+  const lg = breakpoints.between('lg', 'xl')
+  const xl = breakpoints.between('xl', '2xl')
+  const xxl = breakpoints['2xl']
+  return {
+    breakpoints,
+    current,
+    xs,
+    sm,
+    md,
+    lg,
+    xl,
+    xxl,
+  }
+}

package/template-big-screen/src/composables/dark.ts

@@ -0,0 +1,52 @@
+/*
+ * @Author: Leo l024983409@qq.com
+ * @Date: 2023-09-19 20:22:55
+ * @LastEditors: Leo l024983409@qq.com
+ * @LastEditTime: 2023-09-27 11:40:43
+ * @Description:
+ */
+// these APIs are auto-imported from @vueuse/core
+export const isDark = useDark()
+export const preferredDark = usePreferredDark()
+
+// @ts-expect-error: Transition API
+const isAppearanceTransition = document.startViewTransition
+  && !window.matchMedia('(prefers-reduced-motion: reduce)').matches
+
+export function toggleDark(event?: MouseEvent) {
+  if (!isAppearanceTransition || !event) {
+    isDark.value = !isDark.value
+    return
+  }
+  const x = event.clientX
+  const y = event.clientY
+  const endRadius = Math.hypot(
+    Math.max(x, innerWidth - x),
+    Math.max(y, innerHeight - y),
+  )
+  // @ts-expect-error: Transition API
+  const transition = document.startViewTransition(async () => {
+    isDark.value = !isDark.value
+    await nextTick()
+  })
+  transition.ready.then(() => {
+    const clipPath = [
+      `circle(0px at ${x}px ${y}px)`,
+      `circle(${endRadius}px at ${x}px ${y}px)`,
+    ]
+    document.documentElement.animate(
+      {
+        clipPath: isDark.value
+          ? [...clipPath].reverse()
+          : clipPath,
+      },
+      {
+        duration: 400,
+        easing: 'ease-in',
+        pseudoElement: isDark.value
+          ? '::view-transition-old(root)'
+          : '::view-transition-new(root)',
+      },
+    )
+  })
+}

package/template-big-screen/src/composables/echarts.ts

@@ -0,0 +1,17 @@
+/*
+ * @Author: Leo l024983409@qq.com
+ * @Date: 2023-09-24 16:34:11
+ * @LastEditors: Please set LastEditors
+ * @LastEditTime: 2024-02-02 12:09:50
+ * @Description:
+ */
+export function useEcharts() {
+  const options = ref<EChartsOption>()
+  function setOptions(data: EChartsOption) {
+    options.value = data
+  }
+  return {
+    options,
+    setOptions,
+  }
+}

package/template-big-screen/src/composables/loadData.ts

@@ -0,0 +1,38 @@
+/*
+ * @Author: Leo l024983409@qq.com
+ * @Date: 2023-09-28 10:03:45
+ * @LastEditors: Please set LastEditors
+ * @LastEditTime: 2024-02-02 15:35:58
+ * @Description:
+ */
+
+type LoadData<T> = () => Promise<T>
+type InitialOptionsWithData<T> = (data: T) => EChartsOption
+
+/**
+ * 定时刷新数据
+ * @param getData 获取数据的Api
+ * @param initialOptionsWithData 传入回调函数
+ */
+export function useLoadData<T>(getData: LoadData<T>, initialOptionsWithData: InitialOptionsWithData<T>) {
+  const { options, setOptions } = useEcharts()
+
+  const data = ref<T>()
+
+  loadData()
+
+  async function loadData() {
+    const res = await getData()
+    data.value = res
+    setOptions(initialOptionsWithData(data.value))
+  }
+
+  useIntervalFn(async () => {
+    await loadData()
+  }, 5000)
+
+  return {
+    data,
+    options,
+  }
+}

package/template-big-screen/src/directives/ellipsis.ts

@@ -0,0 +1,20 @@
+import type { App, Directive } from 'vue'
+
+const ellipsisDirective: Directive = {
+  updated(el: Element) {
+    const ellipsisCcontainer = el.parentElement as HTMLDivElement
+    const scrollingText = el as HTMLDivElement
+
+    ellipsisCcontainer.classList.add('ellipsis-container')
+    scrollingText.classList.add('scrolling-text')
+
+    if (scrollingText.offsetWidth > ellipsisCcontainer.offsetWidth)
+      scrollingText.style.animation = 'scrollText 10s linear infinite'
+    else
+      scrollingText.style.animation = 'none' // 如果文本没有溢出，停止滚动动画
+  },
+}
+
+export function setupEllipsisDirective(app: App) {
+  app.directive('ellipsis', ellipsisDirective)
+}

package/template-big-screen/src/directives/index.ts

@@ -0,0 +1,13 @@
+/*
+ * @Author: Leo l024983409@qq.com
+ * @Date: 2023-09-25 11:17:47
+ * @LastEditors: Leo l024983409@qq.com
+ * @LastEditTime: 2023-09-25 11:24:39
+ * @Description:
+ */
+import type { App } from 'vue'
+import { setupEllipsisDirective } from './ellipsis'
+
+export function setupDirectives(app: App) {
+  setupEllipsisDirective(app)
+}

package/template-big-screen/src/enums/breakpointEnum.ts

@@ -0,0 +1,9 @@
+export enum Breakpoint {
+  'xs' = '480px',
+  'sm' = '640px',
+  'md' = '768px',
+  'lg' = '1024px',
+  'xl' = '1280px',
+  '2xl' = '1536px',
+  '3xl' = '1920px',
+}

package/template-big-screen/src/layouts/404.vue

@@ -0,0 +1,19 @@
+<!--
+ * @Author: zhangyang
+ * @Date: 2024-02-02 14:16:12
+ * @LastEditTime: 2024-02-02 14:16:12
+ * @Description:
+-->
+<template>
+  <main p="x4 y10" text="center teal-700 dark:gray-200">
+    <div text-4xl>
+      <div i-carbon-warning inline-block />
+    </div>
+    <RouterView />
+    <div>
+      <button text-sm btn m="3 t8" @click="$router.back()">
+        back
+      </button>
+    </div>
+  </main>
+</template>

package/template-big-screen/src/layouts/blank.vue

@@ -0,0 +1,9 @@
+<!--
+ * @Author: zhangyang
+ * @Date: 2024-02-02 14:16:52
+ * @LastEditTime: 2024-02-02 14:16:53
+ * @Description:
+-->
+<template>
+  <RouterView />
+</template>

package/template-big-screen/src/layouts/default.vue

@@ -0,0 +1,17 @@
+<!--
+ * @Author: zhangyang
+ * @Date: 2024-02-02 14:55:35
+ * @LastEditTime: 2024-02-02 14:56:49
+ * @Description:
+-->
+<template>
+  <div>
+    <YoungHeader />
+    <main px-4 py-10 text="center gray-700 dark:gray-200">
+      <RouterView />
+      <div mx-auto mt-5 text-center text-sm opacity-50 cursor="pointer" underline @click="$router.back">
+        [返回]
+      </div>
+    </main>
+  </div>
+</template>

package/template-big-screen/src/main.ts

@@ -0,0 +1,59 @@
+/*
+ * @Author: Leo l024983409@qq.com
+ * @Date: 2023-09-19 20:22:55
+ * @LastEditors: Please set LastEditors
+ * @LastEditTime: 2024-02-02 16:20:23
+ * @Description:
+ */
+import { server } from 'virtual:local-server'
+import appVue from './App.vue'
+
+import '@unocss/reset/tailwind.css'
+import './styles/index.scss'
+import 'uno.css'
+import { setupDirectives } from './directives'
+import { setupModules } from './modules'
+
+async function getEnv() {
+  try {
+    const viteEnv: ImportMetaEnv = await (await fetch(`${server}/get/env`)).json()
+    console.log('🚀 ~ getEnv ~ viteEnv:', viteEnv)
+    return viteEnv
+  }
+  catch (error) {
+    document.write(`服务启动异常：\n${error}`)
+    throw error
+  }
+}
+
+function checkUpadte() {
+  const YOUNG_UPDATE_TIMER = setInterval(() => {
+    getEnv().then(({ NUXT_PUBLIC_CURRENT_VERSION }) => {
+      if (NUXT_PUBLIC_CURRENT_VERSION !== window.__YOUNG_ENV__.NUXT_PUBLIC_CURRENT_VERSION) {
+        clearInterval(YOUNG_UPDATE_TIMER)
+
+        // eslint-disable-next-line no-alert
+        alert('检测到新版本，请刷新页面')
+        window.location.reload()
+      }
+    })
+  }, 6e4)
+}
+
+async function init() {
+  const env = await getEnv()
+  window.__YOUNG_ENV__ = env
+
+  checkUpadte()
+}
+
+function setup() {
+  const app = createApp(appVue)
+
+  setupDirectives(app)
+  setupModules(app)
+
+  app.mount('#app')
+}
+
+init().then(setup)

package/template-big-screen/src/modules/index.ts

@@ -0,0 +1,8 @@
+import type { App } from 'vue'
+import pinia from './pinia'
+import router from './router'
+
+export function setupModules(app: App) {
+  app.use(router)
+  app.use(pinia)
+}

package/template-big-screen/src/modules/pinia.ts

@@ -0,0 +1,11 @@
+/*
+ * @Author: Leo l024983409@qq.com
+ * @Date: 2023-09-19 20:22:55
+ * @LastEditors: Please set LastEditors
+ * @LastEditTime: 2024-02-02 14:23:35
+ * @Description:
+ */
+// Setup Pinia
+// https://pinia.vuejs.org/
+const pinia = createPinia()
+export default pinia

package/template-big-screen/src/modules/router.ts

@@ -0,0 +1,28 @@
+/*
+ * @Author: Leo l024983409@qq.com
+ * @Date: 2023-09-19 21:04:34
+ * @LastEditors: Leo l024983409@qq.com
+ * @LastEditTime: 2023-09-24 11:55:22
+ * @Description:
+ */
+import NProgress from 'nprogress'
+import { setupLayouts } from 'virtual:generated-layouts'
+import generatedRoutes from 'virtual:generated-pages'
+import { createRouter, createWebHistory } from 'vue-router'
+
+const routes = setupLayouts(generatedRoutes)
+
+const router = createRouter({
+  history: createWebHistory(),
+  routes,
+})
+
+router.beforeEach((to, from) => {
+  if (to.path !== from.path)
+    NProgress.start()
+})
+router.afterEach(() => {
+  NProgress.done()
+})
+
+export default router

package/template-big-screen/src/pages/[...all].vue

@@ -0,0 +1,16 @@
+<!--
+ * @Author: zhangyang
+ * @Date: 2024-02-01 16:33:23
+ * @LastEditTime: 2024-02-02 14:22:23
+ * @Description:
+-->
+<route lang="yaml">
+meta:
+  layout: 404
+</route>
+
+<template>
+  <div>
+    页面不存在
+  </div>
+</template>

package/template-big-screen/src/pages/electricity/build.vue

@@ -0,0 +1,135 @@
+<!--
+ * @Author: zhangyang
+ * @Date: 2024-02-02 14:40:50
+ * @LastEditTime: 2024-02-02 14:42:06
+ * @Description:
+-->
+<script setup lang='ts'>
+import echarts from '~/components/YoungECharts/config'
+
+const { data, options } = useLoadData<IPowerGridConstruction>(apis.get.getPowerGridConstruction, (res) => {
+  return {
+    grid: {
+      left: '10%',
+      right: '2%',
+      top: '13%',
+      bottom: '0%',
+      containLabel: true,
+    },
+    title: {
+      text: '固定资产投资完成情况',
+      left: 'center',
+      top: '0%',
+      textStyle: {
+        fontSize: '12px',
+        width: 250,
+        overflow: 'break',
+        color: '#aed3dd',
+      },
+
+    },
+    xAxis: {
+      max(value) {
+        return 120
+      },
+      show: false,
+      type: 'value',
+      boundaryGap: [0, 0.01],
+      axisPointer: {
+        show: true,
+      },
+    },
+    yAxis: {
+      type: 'category',
+      data: ['福建', '浙江', '安徽', '上海', '江苏'],
+      inverse: true,
+      animationDuration: 300,
+      animationDurationUpdate: 300,
+      axisTick: {
+        show: false,
+      },
+      axisLine: {
+        show: false,
+      },
+      axisLabel: {
+        color: '#92b1bb',
+      },
+    },
+    series: [
+      {
+        realtimeSort: true,
+        type: 'bar',
+        data: res.province,
+        label: {
+          show: true,
+          position: 'right',
+          valueAnimation: true,
+          color: '#92b1bb',
+        },
+        barWidth: '12px',
+        barGap: '100%',
+        itemStyle: {
+          color: new echarts.graphic.LinearGradient(0, 0, 1, 0, [
+            {
+              offset: 0,
+              color: '#409ef7',
+            },
+            {
+              offset: 1,
+              color: '#11ccd6',
+            },
+          ]),
+          borderRadius: [0, 9999, 9999, 0],
+        },
+      },
+    ],
+    tooltip: {
+      show: true,
+    },
+    legend: {
+      show: false,
+    },
+    animationDuration: 0,
+    animationDurationUpdate: 3000,
+    animationEasing: 'linear',
+    animationEasingUpdate: 'linear',
+  }
+})
+</script>
+
+<template>
+  <div class="h-full flex flex-col">
+    <YoungSectionHeader index="2" title="XX建设" />
+    <div class="h-full w-full flex flex-1 py-4">
+      <YoungSectionContainer v-if="data">
+        <div class="h-full w-full center">
+          <div class="h-60% w-full between flex-col">
+            <div class="w-full between">
+              <div>
+                <div v-ellipsis>
+                  500KV线路长度(公里)
+                </div>
+                <YoungCountUp :count="data?.values?.[0]" :decimal-places="1" />
+              </div>
+              <YoungCountUp :count="data?.increment?.[0]" showfix :decimal-places="1" />
+            </div>
+            <div class="w-full between">
+              <div>
+                <div v-ellipsis>
+                  500KV变电功率(万千伏安)
+                </div>
+                <YoungCountUp :count="data?.values?.[1]" :decimal-places="1" />
+              </div>
+              <YoungCountUp :count="data?.increment?.[1]" showfix :decimal-places="1" />
+            </div>
+          </div>
+        </div>
+      </YoungSectionContainer>
+      <div class="h-full w-50% center">
+        <YoungECharts width="250px" height="200px" :options="options" />
+      </div>
+    </div>
+  </div>
+</template>
+
+<style scoped lang="scss"></style>