add

src/views/article/lists/detail.vue

@@ -3,11 +3,11 @@
         <popup ref="popupRef" title="文章详情" :async="true" width="60vw" @confirm="handleSubmit" @close="handleClose">
             <h1 style="font-size:32px; margin-bottom: 20px;font-weight:700"> {{ formData.title }} </h1>
             <h4 style="margin:20px 0"> {{ formData.desc }} </h4>
+            <el-image :src="formData.image" />
             <div v-html="formData.content"> </div>
             <div style="text-align: right;margin-top: 20px">
                 本文由{{ formData.author }}于{{ (formData.create_time) }}发布
             </div>
-
             <!-- {{ formData }} -->
         </popup>
     </div>

src/views/astatistics/components/Custom.vue

@@ -9,8 +9,6 @@
             <el-date-picker v-model="year" @change='getCustom' value-format="YYYY" type="year" style="float:right"
                 :placeholder="year" />
         </div>
-
-
         <div style="display: flex;justify-content: space-around;">
             <router-link :to="{
                 path: item.url,
@@ -23,14 +21,14 @@
             </router-link>
 
         </div>
-        <div id="customNum" class="chart" v-if="showChart"></div>
+        <div class="chart">
+            <v-charts style="height: 300px" :option="visitorOption" :autoresize="true" />
+        </div>
     </el-card>
 </template>
 <script setup>
-import * as echarts from 'echarts';
 import { apistatisticscustoms } from '@/api/statistics'
-// import route from "vue-route"
-
+import vCharts from 'vue-echarts'
 
 const year = ref('')
 const showChart = ref(true)
@@ -58,13 +56,6 @@ const labelOption = {
 };
 
 
-
-const initChart = (id, opt) => {
-    var chartDom = document.getElementById(id);
-    var myChart = echarts.init(chartDom);
-    myChart.setOption(opt);
-}
-
 const setHistogramOption = (legend, xAxisData, series) => {
     return {
         tooltip: {
@@ -98,12 +89,15 @@ const setHistogramOption = (legend, xAxisData, series) => {
 
 }
 
+
+
+let visitorOption = ref({})
 const getCustom = async () => {
     showChart.value = false
     let res = await apistatisticscustoms({ year: year.value })
     showChart.value = true
     await nextTick()
-    initChart("customNum", setHistogramOption({ data: [res.series.name] }, res.column
+    visitorOption.value = setHistogramOption({ data: [res.series.name] }, res.column
         , [{
             name: res.series.name,
             type: 'bar',
@@ -113,12 +107,15 @@ const getCustom = async () => {
                 focus: 'series'
             },
             data: res.series.data
-        },]))
+        },])
     customList[0].value = res.custom_total
     customList[1].value = res.this_year_add
 }
 
-getCustom()
+onMounted(() => {
+    getCustom()
+})
+
 </script>
 <style lang="scss" scoped>
 #main,

src/views/astatistics/components/Project.vue

@@ -5,8 +5,6 @@
                 <span> 项目立项</span>
             </div>
         </template>
-
-
         <div style="display: flex;justify-content: space-around;">
             <router-link :to="{
                 path: item.url,
@@ -18,12 +16,14 @@
                 </div>
             </router-link>
         </div>
-        <div id="projectApproved" class="chart"></div>
+        <div class="chart">
+            <v-charts style="height: 300px" :option="visitorOption" :autoresize="true" />
+        </div>
     </el-card>
 </template>
 <script setup>
-import * as echarts from 'echarts';
 import { apistatisticsprojectInitiation } from '@/api/statistics'
+import vCharts from 'vue-echarts'
 
 const customList = reactive([
     {
@@ -58,11 +58,7 @@ const customList = reactive([
     },
 ])
 
-const initChart = (id, opt) => {
-    var chartDom = document.getElementById(id);
-    var myChart = echarts.init(chartDom);
-    myChart.setOption(opt);
-}
+let visitorOption = ref({})
 
 const getData = async () => {
     let res = await apistatisticsprojectInitiation()
@@ -98,11 +94,19 @@ const getData = async () => {
             }
         ]
     };
-    initChart("projectApproved", option2)
+    visitorOption.value = option2
 }
 
 
-getData()
+
+
+
+onMounted(() => {
+    getData()
+
+})
+
+
 </script>
 <style lang="scss" scoped>
 #main,

src/views/astatistics/components/ProjectPayment.vue

@@ -21,16 +21,18 @@
                 </div>
             </router-link>
         </div>
-        <div id="ProjectPayment" class="chart" v-if="showChart"></div>
+        <div class="chart">
+            <v-charts style="height: 300px" :option="visitorOption" :autoresize="true" />
+        </div>
     </el-card>
 </template>
 <script setup>
-import * as echarts from 'echarts';
 import { apistatisticsprojectRefund } from '@/api/statistics'
+import vCharts from 'vue-echarts'
 
 const year = ref(new Date().getFullYear())
 const showChart = ref(true)
-
+let visitorOption = ref({})
 
 
 const customList = reactive([
@@ -175,14 +177,15 @@ const getCustom = async () => {
             },
         ]
     };
-
-    initChart("ProjectPayment", option4)
+    visitorOption.value = option4
     customList[0].value = res.year_invoicing_amount
     customList[1].value = res.year_refund_amount
     customList[2].value = res.year_not_refund_amount
     customList[3].value = res.year_refund_plan_amount
 }
-getCustom()
+onMounted(() => {
+    getCustom()
+})
 </script>
 <style lang="scss" scoped>
 .chart {

src/views/astatistics/components/ProjectWithdraw.vue

@@ -21,13 +21,16 @@
                 </div>
             </router-link>
         </div>
-        <div id="ProjectWithdraw" class="chart" v-if="showChart"></div>
+        <div class="chart">
+            <v-charts style="height: 300px" :option="visitorOption" :autoresize="true" />
+        </div>
     </el-card>
 </template>
 <script setup>
-import * as echarts from 'echarts';
+import vCharts from 'vue-echarts'
 import { apistatisticsprojectPayment } from '@/api/statistics'
 const year = ref(new Date().getFullYear())
+let visitorOption = ref({})
 
 const showChart = ref(true)
 const customList = reactive([
@@ -56,11 +59,6 @@ const labelOption = {
     }
 };
 
-const initChart = (id, opt) => {
-    var chartDom = document.getElementById(id);
-    var myChart = echarts.init(chartDom);
-    myChart.setOption(opt);
-}
 
 
 const getCustom = async () => {
@@ -148,14 +146,15 @@ const getCustom = async () => {
 
         ]
     };
-
-    initChart("ProjectWithdraw", option4)
+    visitorOption.value = option4
     customList[0].value = res.year_invoicing_amount
     customList[1].value = res.year_payment_amount
     customList[2].value = res.year_payment_plan_amount
 }
 
-getCustom()
+onMounted(() => {
+    getCustom()
+})
 </script>
 <style lang="scss" scoped>
 .chart {

src/views/astatistics/components/PurchaseContracts.vue

@@ -21,15 +21,18 @@
                 </div>
             </router-link>
         </div>
-        <div id="PurchaseContracts" class="chart" v-if="showChart"></div>
+        <div class="chart">
+            <v-charts style="height: 300px" :option="visitorOption" :autoresize="true" />
+        </div>
     </el-card>
 </template>
 <script setup>
-import * as echarts from 'echarts';
+import vCharts from 'vue-echarts'
 import { apistatisticsprocurementContract } from '@/api/statistics'
 
 const year = ref(new Date().getFullYear())
 const showChart = ref(true)
+let visitorOption = ref({})
 
 
 const customList = reactive([
@@ -108,9 +111,8 @@ const setHistogramOption = (legend, xAxisData, series) => {
 const getCustom = async () => {
     showChart.value = false
     let res = await apistatisticsprocurementContract({ year: year.value })
-    showChart.value = true
     await nextTick()
-    initChart("PurchaseContracts", setHistogramOption({ data: [res.series.name] }, res.column
+    visitorOption.value = setHistogramOption({ data: [res.series.name] }, res.column
         , [{
             name: res.series.name,
             type: 'bar',
@@ -120,14 +122,16 @@ const getCustom = async () => {
                 focus: 'series'
             },
             data: res.series.data
-        },]))
+        },])
     customList[0].value = res.total_num
     customList[1].value = res.total_amount
     customList[2].value = res.year_total_num
     customList[3].value = res.year_total_amount
 }
 
-getCustom()
+onMounted(() => {
+    getCustom()
+})
 </script>
 <style lang="scss" scoped>
 #main,

src/views/astatistics/components/Subcontract.vue

@@ -22,13 +22,16 @@
                 </div>
             </router-link>
         </div>
-        <div id="Subcontract" class="chart" v-if="showChart"></div>
+        <div class="chart">
+            <v-charts style="height: 300px" :option="visitorOption" :autoresize="true" />
+        </div>
     </el-card>
 </template>
 <script setup>
-import * as echarts from 'echarts';
+import vCharts from 'vue-echarts'
 import { apistatisticssubcontractingContract } from '@/api/statistics'
 const year = ref(new Date().getFullYear())
+let visitorOption = ref({})
 
 const showChart = ref(true)
 const customList = reactive([
@@ -110,7 +113,8 @@ const getCustom = async () => {
     let res = await apistatisticssubcontractingContract({ year: year.value })
     showChart.value = true
     await nextTick()
-    initChart("Subcontract", setHistogramOption({ data: [res.series.name] }, res.column
+
+    visitorOption.value = setHistogramOption({ data: [res.series.name] }, res.column
         , [{
             name: res.series.name,
             type: 'bar',
@@ -120,16 +124,17 @@ const getCustom = async () => {
                 focus: 'series'
             },
             data: res.series.data
-        },]))
+        },])
     customList[0].value = res.total_amount
     customList[1].value = res.total_negotiation_amount
     customList[2].value = res.total_num
     customList[3].value = res.year_total_amount
     customList[4].value = res.year_total_num
-
 }
 
-getCustom()
+onMounted(() => {
+    getCustom()
+})
 </script>
 <style lang="scss" scoped>
 .chart {

src/views/astatistics/components/Tender.vue

@@ -16,13 +16,15 @@
                 </div>
             </router-link>
         </div>
-        <div id="main"></div>
+        <div class="chart">
+            <v-charts style="height: 300px" :option="visitorOption" :autoresize="true" />
+        </div>
     </el-card>
 </template>
 <script setup>
-import * as echarts from 'echarts';
+import vCharts from 'vue-echarts'
 import { apistatisticsbidding } from '@/api/statistics'
-
+let visitorOption = ref({})
 const customList = reactive([
     {
         name: "投标决策",
@@ -174,7 +176,9 @@ const getData = async () => {
             },
         ]
     };
-    initChart("main", option3)
+
+
+    visitorOption.value = option3
     customList[0].value = res.decision
     customList[1].value = res.document
     customList[2].value = res.examination
@@ -183,7 +187,12 @@ const getData = async () => {
 
 
 }
-getData()
+
+
+
+onMounted(() => {
+    getData()
+})
 </script>
 <style lang="scss" scoped>
 #main,

src/views/astatistics/components/projectContracts.vue

@@ -21,12 +21,18 @@
                 </div>
             </router-link>
         </div>
-        <div id="main3" class="chart" v-if="showChart"></div>
+        <div class="chart">
+            <v-charts style="height: 300px" :option="visitorOption" :autoresize="true" />
+        </div>
     </el-card>
 </template>
 <script setup>
-import * as echarts from 'echarts';
 import { apistatisticscontracts } from '@/api/statistics'
+import vCharts from 'vue-echarts'
+
+
+
+let visitorOption = ref({})
 const year = ref(new Date().getFullYear())
 const showChart = ref(true)
 
@@ -115,7 +121,8 @@ const getCustom = async () => {
     let res = await apistatisticscontracts({ year: year.value })
     showChart.value = true
     await nextTick()
-    initChart("main3", setHistogramOption({ data: [res.series.name] }, res.column
+
+    visitorOption.value = setHistogramOption({ data: [res.series.name] }, res.column
         , [{
             name: res.series.name,
             type: 'bar',
@@ -125,7 +132,8 @@ const getCustom = async () => {
                 focus: 'series'
             },
             data: res.series.data
-        },]))
+        },])
+
     customList[0].value = res.total_amount
     customList[1].value = res.total_negotiate_amount
     customList[2].value = res.total_num
@@ -133,7 +141,9 @@ const getCustom = async () => {
     customList[4].value = res.year_total_num
 }
 
-getCustom()
+onMounted(() => {
+    getCustom()
+})
 </script>
 <style lang="scss" scoped>
 .chart {