跟新echarts

src/components/baseEcharts/index.vue

@@ -0,0 +1,41 @@
+<template>
+    <div :style="{
+        width: width,
+        height: height,
+    }" ref="echartsRef" />
+</template>
+  
+<script setup lang="ts">
+import { ref, onMounted, watch, PropType } from "vue";
+import { useEcharts, EChartsCoreOption } from "../../hooks/useEcharts"; // 引入hooks
+
+const props = defineProps({
+    options: { type: Object as PropType<EChartsCoreOption>, required: true },
+    height: { type: String, default: "100%" },
+    width: { type: String, default: "100%" },
+    themeColors: { type: Array as PropType<string[]>, default: () => [] },
+});
+
+const echartsRef = ref();
+
+const { setOptions, initCharts } = useEcharts(echartsRef, props.options);
+
+watch(
+    () => props.options,
+    (nVal) => {
+        let targetOptions: EChartsCoreOption = {};
+        if (props.themeColors && props.themeColors.length > 0) {
+            targetOptions = { ...nVal };
+            targetOptions.color = props.themeColors;
+        } else {
+            targetOptions = { ...nVal };
+        }
+        setOptions(targetOptions);
+    }
+);
+
+onMounted(() => {
+    initCharts();
+});
+</script>
+  

src/views/BusDynamics/OPCMonitoring/index.vue

@@ -1,9 +1,125 @@
 <template>
-    <div>
-        企业产值产能监测（不开放）
-    </div>
-  </template>
-  
-  <script setup name="Confirmation">
-  </script>
-  
+    <div ref="chartRef" style="width: 100%; height: 80vh;"></div>
+</template>
+   
+<script setup>
+// import { onMounted, onBeforeUnmount, ref } from 'vue';
+import {
+    ref,
+    onMounted,
+    onDeactivated,
+    onBeforeUnmount,
+} from "vue";
+
+import * as echarts from 'echarts';
+import { getOutputValueData } from "@/api/buscmonitoring/index";
+const chartRef = ref(null);
+const chartInstance = ref(null);
+
+// 重新窗口变化时，重新计算
+const resize = () => {
+    chartInstance.value && chartInstance.value.resize();
+};
+
+const fetchData = async () => {
+    try {
+        const response = await getOutputValueData().then(res => { return res.data })
+        const namesArray = response.map(obj => obj.detailedUnitName);
+        const valuesArray = response.map(obj => obj.industrialOutputValue);
+        const valuesLastArray = response.map(obj => obj.industrialOutputValueLastYear);
+
+        const options = {
+            title: {
+                text: "产值产能检测",
+                subtext: "",
+                subTextStyle: {
+                    fontSize: 16,
+                    fontWeight: "normal",
+                    left: "center",
+                    y: "center",
+                },
+            },
+            tooltip: {
+                trigger: 'item', // 触发类型，可选值为：'item'、'axis'
+                formatter: function (params) {
+                    // params 是一个包含当前数据点信息的对象
+                    // 你可以根据 params 中的数据来自定义提示框的内容
+                    return '企业名称' + params.name + '<br/>' + '值：' + params.value;
+                }
+            },
+            // dataZoom: [
+            //     {
+            //         show: true,
+            //         realtime: true,
+            //         start: 30,
+            //         end: 70,
+            //         xAxisIndex: [0, 1]
+            //     },
+            //     {
+            //         type: 'inside',
+            //         realtime: true,
+            //         start: 30,
+            //         end: 70,
+            //         xAxisIndex: [0, 1]
+            //     }
+            // ],
+            grid: {
+                left: "1%",
+                right: "1%",
+                bottom: "1%",
+                top: "60px",
+                containLabel: true,
+            },
+            xAxis: {
+                type: "category",
+                data: namesArray,
+                axisLabel: {
+                    interval: 0,
+                    rotate: 30,
+                },
+            },
+            yAxis: {
+                axisLabel: {
+                    formatter: (val) => {
+                        return val;
+                    },
+                },
+            },
+            series: [
+                {
+                    name: "工业产值",
+                    type: "bar",
+                    stack: "Total",
+                    data: valuesArray,
+                },
+                {
+                    name: "去年工业产值",
+                    type: "line",
+                    stack: "Total",
+                    data: valuesLastArray,
+                },
+            ],
+        };
+
+        chartInstance.value.setOption(options);
+    } catch (error) {
+        console.error('Error fetching data:', error);
+    }
+};
+
+onMounted(() => {
+    chartInstance.value = echarts.init(chartRef.value);
+    fetchData();
+    window.addEventListener("resize", resize);
+});
+
+// 页面keepAlive时，不监听页面
+onDeactivated(() => {
+    window.removeEventListener("resize", resize);
+});
+
+onBeforeUnmount(() => {
+    window.removeEventListener("resize", resize);
+});
+
+</script>

src/views/FSServices/TechnologyLoan/index.vue

@@ -0,0 +1,32 @@
+<template>
+    <div class="iframe-container" v-loading="loading">
+        <iframe src="http://www.hntpe.com" scrolling="auto" frameborder="0" class="frame">
+        </iframe>
+    </div>
+</template>
+  
+<script setup>
+import { ref } from 'vue'
+const loading = ref(false)
+</script>
+
+<style lang="scss">
+.iframe-container {
+    position: absolute; 
+    top: 0px;
+    left: 0px;
+    right: 0px;
+    ;
+    bottom: 0px;
+
+    .frame {
+        width: 100%;
+        height: 100%;
+    }
+    
+.example-showcase .el-loading-mask {
+  z-index: 9;
+}
+}
+
+</style>

src/views/FSServices/XiaoXianLoan/index.vue

@@ -0,0 +1,32 @@
+<template>
+    <div class="iframe-container" v-loading="loading">
+        <iframe src="http://www.hunan.gov.cn/zqt/hqzc/202206/t20220610_25443825.html" scrolling="auto" frameborder="0" class="frame">
+        </iframe>
+    </div>
+</template>
+  
+<script setup>
+import { ref } from 'vue'
+const loading = ref(false)
+</script>
+  
+<style lang="scss">
+.iframe-container {
+    position: absolute;
+    top: 0px;
+    left: 0px;
+    right: 0px;
+    ;
+    bottom: 0px;
+
+    .frame {
+        width: 100%;
+        height: 100%;
+    }
+    
+.example-showcase .el-loading-mask {
+  z-index: 9;
+}
+}
+
+</style>