create-young-proj 1.6.2 → 2.0.0

package/template-big-screen/src/pages/social/condition.vue

@@ -0,0 +1,202 @@
+<!--
+ * @Author: zhangyang
+ * @Date: 2024-02-02 14:32:40
+ * @LastEditTime: 2024-02-02 14:32:40
+ * @Description:
+-->
+<script setup lang='ts'>
+import echarts from '~/components/YoungECharts/config'
+
+const { data, options } = useLoadData<ISocialCondition>(apis.get.getSocialCondition, (res) => {
+  return {
+    grid: {
+      left: '0%',
+      right: '0%',
+      top: ' 0%',
+      bottom: '0%',
+      containLabel: true,
+    },
+    tooltip: {
+      trigger: 'item',
+    },
+    title: [
+      {
+        text: '国内生产总值',
+        left: 'center',
+        top: '0',
+        textStyle: {
+          fontSize: 12,
+          color: '#aed3dd',
+        },
+      },
+      {
+        text: `${res?.increment?.reduce((pre, current) => (pre + current), 0).toFixed(2)}%`,
+        left: 'center',
+        top: 'center',
+        textStyle: {
+          fontSize: 14,
+          color: '#aed3dd',
+        },
+        subtextStyle: {
+          fontSize: 12,
+          color: '#afcfdc',
+        },
+        itemGap: 0,
+      },
+    ],
+    legend: {
+      bottom: '0%',
+      textStyle: {
+        color: '#90acb9',
+        fontSize: '12px',
+      },
+      itemWidth: 12,
+      itemHeight: 12,
+      itemGap: 4,
+    },
+    series: [
+      {
+        name: '国内生产总值',
+        type: 'pie',
+        radius: ['30%', '50%'],
+        avoidLabelOverlap: false,
+        labelLine: {
+          show: true,
+          length: 6,
+          length2: 6,
+        },
+        label: {
+          color: '#afcfdc',
+          fontSize: 12,
+          overflow: 'break',
+          position: 'outside',
+          formatter: '{d} %',
+        },
+        emphasis: {
+          label: {
+            show: true,
+            fontSize: 10,
+            fontWeight: 'bold',
+          },
+        },
+        data: [
+          {
+            name: '第一产业',
+            value: res?.industry?.[0],
+            itemStyle: {
+              color: new echarts.graphic.LinearGradient(
+                0,
+                1,
+                0,
+                0,
+                [
+                  {
+                    offset: 0,
+                    color: '#08d8d8', // 0% 处的颜色
+                  },
+                  {
+                    offset: 1,
+                    color: '#7affff', // 100% 处的颜色
+                  },
+                ],
+                false,
+              ),
+            },
+          },
+          {
+            name: '第二产业',
+            value: res?.industry?.[1],
+            itemStyle: {
+              color: new echarts.graphic.LinearGradient(
+                0,
+                1,
+                0,
+                0,
+                [
+                  {
+                    offset: 0,
+                    color: '#fa53fa', // 0% 处的颜色
+                  },
+                  {
+                    offset: 1,
+                    color: '#e793f8', // 100% 处的颜色
+                  },
+                ],
+                false,
+              ),
+            },
+          },
+          {
+            name: '第三产业',
+            value: res?.industry?.[2],
+            itemStyle: {
+              color: new echarts.graphic.LinearGradient(
+                0,
+                1,
+                0,
+                0,
+                [
+                  {
+                    offset: 0,
+                    color: '#7161fe', // 0% 处的颜色
+                  },
+                  {
+                    offset: 1,
+                    color: '#e388f2', // 100% 处的颜色
+                  },
+
+                ],
+                false,
+              ),
+            },
+          },
+        ],
+      },
+    ],
+  }
+})
+</script>
+
+<template>
+  <div v-if="data" class="h-full flex flex-col">
+    <YoungSectionHeader index="1" title="社会状况" />
+    <div class="h-full flex flex-1 py-4">
+      <YoungSectionContainer>
+        <div class="h-full between">
+          <div class="w-full text-left">
+            <div class="between">
+              <div>
+                <div v-ellipsis>
+                  铁路货物运输量(万吨)
+                </div>
+                <YoungCountUp :count="data?.values?.[0]" />
+              </div>
+              <YoungCountUp :count="data?.increment?.[`0`]" showfix :decimal-places="1" />
+            </div>
+            <div class="between py-2">
+              <div>
+                <div v-ellipsis>
+                  银行中长期贷款(亿元)
+                </div>
+                <YoungCountUp :count="data?.values?.[1]" />
+              </div>
+              <YoungCountUp :count="data?.increment?.[`1`]" showfix :decimal-places="1" />
+            </div>
+            <div class="between">
+              <div>
+                <div v-ellipsis>
+                  耗电量(万千瓦时)
+                </div>
+                <YoungCountUp :count="data?.values?.[2]" />
+              </div>
+              <YoungCountUp :count="data?.increment?.[`2`]" showfix :decimal-places="1" />
+            </div>
+          </div>
+        </div>
+      </YoungSectionContainer>
+      <div class="h-full w-50% center">
+        <YoungECharts :options="options" width="250px" height="200px" />
+      </div>
+    </div>
+  </div>
+</template>

package/template-big-screen/src/pages/social/electricity-usage.vue

@@ -0,0 +1,140 @@
+<!--
+ * @Author: zhangyang
+ * @Date: 2024-02-02 14:43:35
+ * @LastEditTime: 2024-02-02 14:43:36
+ * @Description:
+-->
+<script setup lang='ts'>
+import echarts from '~/components/YoungECharts/config'
+
+const { data, options } = useLoadData(apis.get.getElectricityUsage, (res) => {
+  return {
+    grid: {
+      left: '2%',
+      right: '4%',
+      top: '30%',
+      bottom: '0%',
+      containLabel: true,
+    },
+    title: {
+      text: '全社会用电量',
+      left: 'center',
+      top: '0',
+      textStyle: {
+        fontSize: '12px',
+        width: 250,
+        overflow: 'break',
+        color: '#aed3dd',
+      },
+    },
+    tooltip: {
+      trigger: 'axis',
+      axisPointer: {
+        type: 'cross',
+        crossStyle: {
+          color: '#999',
+        },
+      },
+    },
+    legend: {
+      show: false,
+    },
+    xAxis: [
+      {
+        type: 'category',
+        data: ['福建', '浙江', '安徽', '上海', '江苏'],
+        axisPointer: {
+          type: 'shadow',
+        },
+      },
+    ],
+    yAxis: [
+      {
+        type: 'value',
+        name: '用电量',
+        min: 0,
+        max: 4000,
+      },
+      {
+        type: 'value',
+        name: '增长率',
+        min: 0,
+        max: 8,
+      },
+    ],
+    series: [
+      {
+        name: '用电量',
+        type: 'bar',
+        tooltip: {
+          valueFormatter(value) {
+            return `${value as number}`
+          },
+        },
+        data: res.electricity,
+        itemStyle: {
+          color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
+            {
+              offset: 0,
+              color: '#db8195',
+            },
+            {
+              offset: 1,
+              color: '#603969',
+            },
+          ]),
+        },
+      },
+      {
+        name: '增长率',
+        type: 'line',
+        yAxisIndex: 1,
+        tooltip: {
+          valueFormatter(value) {
+            return `${value as number}`
+          },
+        },
+        itemStyle: {
+          color: '#855661',
+        },
+        data: res.electricity.map(item => Math.ceil((item / 500))),
+      },
+    ],
+  }
+})
+</script>
+
+<template>
+  <div class="h-full flex flex-col">
+    <YoungSectionHeader index="3" title="全社会用电量" />
+    <div v-if="data" class="h-full flex flex-1 py-4">
+      <YoungSectionContainer>
+        <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>
+                  本月全网用电量(亿千瓦时)
+                </div>
+                <YoungCountUp :count="data?.values?.[0]" :decimal-places="2" />
+              </div>
+              <YoungCountUp :count="data?.increment?.[0]" :decimal-places="1" showfix />
+            </div>
+            <div class="w-full between">
+              <div>
+                <div v-ellipsis>
+                  本年用电负荷(万千瓦时)
+                </div>
+                <YoungCountUp :count="data?.values?.[1]" />
+              </div>
+              <YoungCountUp :count="data?.increment?.[1]" :decimal-places="1" showfix />
+            </div>
+          </div>
+        </div>
+      </YoungSectionContainer>
+      <div class="h-full w-50% center">
+        <YoungECharts :options="options" height="200px" width="250px" />
+      </div>
+    </div>
+  </div>
+</template>

package/template-big-screen/src/styles/index.scss

@@ -0,0 +1,82 @@
+:root{
+  --text-color:#92b1bb
+}
+
+html,
+body,
+#app {
+  height: 100%;
+  margin: 0;
+  padding: 0;
+  color:#07cfc2;
+}
+
+html.light{
+  background: #f9f9f9;
+  color-scheme: light;
+}
+
+html.dark {
+  background: #101521;
+  color-scheme: dark;
+}
+
+#nprogress {
+  pointer-events: none;
+}
+
+#nprogress .bar {
+  background: rgb(13,148,136);
+  opacity: 0.75;
+  position: fixed;
+  z-index: 1031;
+  top: 0;
+  left: 0;
+  width: 100%;
+  height: 2px;
+}
+
+
+//dark transition
+::view-transition-old(root),
+::view-transition-new(root) {
+  animation: none;
+  mix-blend-mode: normal;
+}
+::view-transition-old(root) {
+  z-index: 1;
+}
+::view-transition-new(root) {
+  z-index: 2147483646;
+}
+.dark::view-transition-old(root) {
+  z-index: 2147483646;
+}
+.dark::view-transition-new(root) {
+  z-index: 1;
+}
+
+.ellipsis-container {
+  width: 200px; /* 设置文本容器的宽度 */
+  overflow: hidden; /* 隐藏溢出的文本内容 */
+  white-space: nowrap; /* 防止文本换行 */
+}
+
+.scrolling-text {
+  display: inline-block; /* 将文本作为内联块元素显示 */
+  animation: scrollText 10s linear infinite; /* 应用滚动动画 */
+}
+
+@keyframes scrollText {
+  0% {
+    transform: translateX(0%); /* 开始位置：文本在容器右侧 */
+  }
+  30% {
+    transform: translateX(0%); /* 开始位置：文本在容器右侧 */
+  }
+  100% {
+    transform: translateX(-100%); /* 结束位置：文本在容器左侧 */
+  }
+}
+
+

package/template-big-screen/tsconfig.json

@@ -0,0 +1,38 @@
+{
+  "compilerOptions": {
+    "target": "ESNext",
+    "jsx": "preserve",
+    "lib": ["DOM", "ESNext"],
+    "baseUrl": ".",
+    "module": "ESNext",
+    "moduleResolution": "node",
+    "paths": {
+      "~/*": ["src/*"]
+    },
+    "resolveJsonModule": true,
+    "types": [
+      "vite/client",
+      "vite-plugin-pages/client",
+      "vite-plugin-vue-layouts/client",
+      "types/*.d.ts"
+    ],
+    "allowJs": true,
+    "strict": true,
+    "strictNullChecks": true,
+    "noUnusedLocals": true,
+    "esModuleInterop": true,
+    "forceConsistentCasingInFileNames": true,
+    "isolatedModules": true,
+    "skipLibCheck": true
+  },
+  "include": [
+    "src/**/*.ts",
+    "src/**/*.d.ts",
+    "src/**/*.tsx",
+    "src/**/*.vue",
+    "types/**/*.d.ts",
+    "types/**/*.ts",
+    "vite.config.ts"
+  ],
+  "exclude": ["dist", "node_modules"]
+}