数据大屏产业预警

main/src/components/custom-echart-scatter-blister/index.vue

@@ -0,0 +1,73 @@
+<template>
+  <div ref="chartRef" :style="{ height, width }"></div>
+</template>
+<script>
+import { ref, reactive, watch, watchEffect } from 'vue';
+import { cloneDeep } from 'lodash';
+import { useEcharts } from '../../hooks/useEcharts';
+
+export default {
+  name: 'customEchartScatterBlister',
+  props: {
+    chartData: {
+      type: Array,
+      default: () => [],
+    },
+    size: {
+      type: Object,
+      default: () => {},
+    },
+    option: {
+      type: Object,
+      default: () => ({}),
+    },
+    width: {
+      type: String,
+      default: '100%',
+    },
+    height: {
+      type: String,
+      default: 'calc(100vh - 78px)',
+    },
+  },
+  emits: ['click'],
+  setup(props, { emit }) {
+    const chartRef = ref(null);
+    const { setOptions, getInstance, resize } = useEcharts(chartRef);
+    const option = reactive({
+      series: [],
+    });
+
+    watchEffect(() => {
+      props.chartData && initCharts();
+    });
+
+    watch(
+      () => props.size,
+      () => {
+        resize();
+      },
+      {
+        immediate: true,
+      }
+    );
+
+    function initCharts() {
+      if (props.option) {
+        Object.assign(option, cloneDeep(props.option));
+      }
+      option.series = props.chartData;
+      setOptions(option);
+      resize();
+      getInstance()?.off('click', onClick);
+      getInstance()?.on('click', onClick);
+    }
+
+    function onClick(params) {
+      emit('click', params);
+    }
+
+    return { chartRef };
+  },
+};
+</script>

main/src/components/index.js

@@ -17,6 +17,7 @@ import CustomEchartPie3d from './custom-echart-pie-3d';
 import CustomEchartWaterDroplet from './custom-echart-water-droplet';
 import CustomEchartPieGauge from './custom-echart-pie-gauge';
 import CustomEchartWordCloud from './custom-echart-word-cloud';
+import customEchartScatterBlister from './custom-echart-scatter-blister';
 
 export {
   SvgIcon,
@@ -38,4 +39,5 @@ export {
   CustomEchartWaterDroplet,
   CustomEchartPieGauge,
   CustomEchartWordCloud,
+  customEchartScatterBlister,
 };

main/src/utils/echarts.js

@@ -1,6 +1,6 @@
 import * as echarts from 'echarts/core';
 
-import { BarChart, LineChart, PieChart, MapChart, PictorialBarChart, RadarChart, GraphChart, GaugeChart } from 'echarts/charts';
+import { BarChart, LineChart, PieChart, MapChart, PictorialBarChart, RadarChart, GraphChart, GaugeChart, ScatterChart } from 'echarts/charts';
 import 'echarts-gl';
 import 'echarts-liquidfill';
 import 'echarts-wordcloud';
@@ -48,6 +48,7 @@ echarts.use([
   GraphicComponent,
   GraphChart,
   GaugeChart,
+  ScatterChart,
 ]);
 
 export default echarts;

sub-government-screen-service/src/views/early/components/popularFeelings.vue

@@ -0,0 +1,43 @@
+<template>
+  <div class="popular-feelings-warp">
+    <div class="popular-feelings-content">
+      <template v-for="(n, index) in datalist" :key="index">
+        <div class="popular-feelings-item" :style="{ 'background-image': 'url(' + getAssetsFile('images/early/back1.png') + ')' + ',' + n.style }">
+          <div class="val">{{ n.val || 0 }}</div>
+          <div class="label">{{ n.title || 0 }}</div>
+        </div>
+      </template>
+    </div>
+  </div>
+</template>
+<script setup>
+import { ref, reactive, onMounted, computed } from 'vue';
+import { isEmpty, getAssetsFile } from '@/utils';
+let datalist = reactive([
+  { title: '今天舆情量', val: 1872, style: 'left: 0,top: 50%,' },
+  { title: '今日文章量', val: 1856, style: 'right: 0,top: 50%,' },
+  { title: '今日浏览量', val: 54681, style: 'left: 50%,top: 0,' },
+  { title: '文章总数', val: 75671, style: 'left: 50%,bottom: 0,' },
+]);
+</script>
+<style lang="scss" scoped>
+div {
+  box-sizing: border-box;
+}
+.popular-feelings-warp {
+  height: 100%;
+  width: 100%;
+  padding: 10px;
+  .popular-feelings-content {
+    width: 100%;
+    height: 100%;
+    position: relative;
+    .popular-feelings-item {
+      position: absolute;
+      background-size: 100% 100%;
+      background-position: left bottom;
+      background-repeat: no-repeat;
+    }
+  }
+}
+</style>

sub-government-screen-service/src/views/early/components/priceCharts.vue

@@ -0,0 +1,161 @@
+<template>
+  <div class="price-charts">
+    <custom-echart-scatter-blister :chart-data="chartsData.valData" height="100%" :option="chartsData.option" />
+  </div>
+</template>
+<script setup>
+import { ref, reactive, onMounted, computed } from 'vue';
+// 随机配色
+const colors1 = reactive(['#6beff9', '#e4f116', '#2087e3']);
+const dataX = reactive(['周一', '周二', '周三', '周四', '周五', '周六', '周日']);
+let legendData = reactive(['最高价', '最低价', '建议价']);
+
+const hexToRGBA = (hex, alpha = 1) => {
+  let hexCode = hex.replace('#', '');
+  if (hexCode.length === 3) {
+    hexCode = hexCode
+      .split('')
+      .map((char) => char + char)
+      .join('');
+  }
+  const r = parseInt(hexCode.slice(0, 2), 16);
+  const g = parseInt(hexCode.slice(2, 4), 16);
+  const b = parseInt(hexCode.slice(4, 6), 16);
+  return `rgba(${r}, ${g}, ${b}, ${alpha})`;
+};
+
+let seriesList = computed(() => {
+  let list = [];
+  if (legendData.length > 0) {
+    list = legendData.map((m, index) => {
+      let num = [
+        [100, 30, 60],
+        [10, 2, 3],
+        [80, 50, 70],
+      ];
+      return {
+        name: m,
+        data: dataX.map((n) => {
+          return [
+            Number((num[index][0] + Math.random() * 100).toFixed(2)),
+            Number((num[index][1] + Math.random() * 100).toFixed(2)),
+            Number((num[index][2] + Math.random() * 100).toFixed(2)),
+            n,
+          ];
+        }),
+        type: 'scatter',
+        symbolSize: (val) => {
+          // 获取所有values
+          let values = [];
+
+          values = list[index].data
+            .map((n) => {
+              return n;
+            })
+            .flat()
+            .filter((item) => typeof item === 'number');
+          // console.info('values', values);
+          // 获取最大值
+          const max = Math.max(Math.max(...values));
+          // 获取最小值
+          const min = Math.min(...values);
+          // 定义最大气泡
+          const maxSize4Pin = 50;
+          // 定义最小气泡
+          const minSize4Pin = 10;
+          // 固定套路
+          var a = (maxSize4Pin - minSize4Pin) / (max - min);
+          var b = maxSize4Pin - a * max;
+          return a * val[2] + b;
+        },
+        label: {
+          normal: { show: true, formatter: '', position: 'top' },
+          emphasis: { show: true, formatter: (param) => param.data[3], position: 'top' },
+        },
+        itemStyle: {
+          shadowBlur: 10,
+          shadowColor: 'rgba(25, 100, 150, 0.5)',
+          shadowOffsetY: 5,
+          color: {
+            type: 'linear',
+            x: 1,
+            y: 0,
+            x2: 0,
+            y2: 0,
+            colorStops: [
+              { offset: 1, color: hexToRGBA(colors1[index], 1) },
+              { offset: 0, color: hexToRGBA(colors1[index], 0.8) },
+            ],
+            globalCoord: false,
+          },
+        },
+      };
+    });
+  }
+
+  console.info('list', list);
+  return list;
+});
+const chartsData = reactive({
+  option: {
+    grid: {
+      left: '3%',
+      right: '10%',
+      bottom: '6%',
+      top: '18%',
+      containLabel: true,
+    },
+    tooltip: {
+      trigger: 'item',
+      // formatter: function (params) {
+      //   return params.value[3] + ':' + parseInt(params.value[1] * 1000) / 10 + '%';
+      // },
+    },
+    title: {
+      text: ' ',
+      subtext: ' ',
+      left: 'center',
+    },
+    legend: {
+      right: 10,
+      top: 5,
+      data: legendData,
+    },
+    xAxis: {
+      name: ' ',
+      splitLine: {
+        show: false,
+        lineStyle: {
+          type: 'dashed',
+        },
+      },
+    },
+    yAxis: {
+      name: ' ',
+      splitLine: {
+        show: true,
+        lineStyle: {
+          type: 'dashed',
+          color: 'rgba(181,197,221,0.2)',
+        },
+      },
+      scale: true,
+    },
+  },
+  valData: seriesList,
+});
+
+onMounted(() => {
+  if (chartsData.valData && chartsData.valData.length) {
+    chartsData.valData.forEach((m, index) => {
+      let num = 100;
+      m.value = (Number(m.value) + Math.random() + num).toFixed(2);
+    });
+  }
+});
+</script>
+<style lang="scss" scoped>
+.price-charts {
+  height: 100%;
+}
+</style>

sub-government-screen-service/src/views/early/components/productTypeWordClould.vue

@@ -25,7 +25,7 @@ const chartsData = reactive({
     {
       type: 'wordCloud',
       // 网格大小，各项之间间距
-      gridSize: 30,
+      gridSize: 22,
       // 形状 circle 圆，cardioid  心， diamond 菱形，
       // triangle-forward 、triangle 三角，star五角星
       shape: 'circle',
@@ -42,14 +42,14 @@ const chartsData = reactive({
       right: null,
       bottom: null,
       // 画布宽
-      width: '100%',
+      width: '90%',
       // 画布高
-      height: '100%',
+      height: '90%',
       // 是否渲染超出画布的文字
       drawOutOfBound: false,
       textStyle: {
         color: function () {
-          const colors = ['#165DFF', '#6aca37', '#05a4b6', '#f93920', '#f0b114'];
+          const colors = ['#165DFF', '#6aca37', '#05a4b6', '#f93920', '#f0b114', '#ab1489', '#149cab', '#ab1414', '#27b30f', '#7e11b3', '#11b32e'];
           return colors[parseInt(Math.random() * colors.length)];
         },
         emphasis: {

sub-government-screen-service/src/views/early/components/realTimePrice.vue

@@ -0,0 +1,223 @@
+<template>
+  <div class="real-time-price-wrap">
+    <div class="tab-warp">
+      <el-carousel
+        indicator-position="none"
+        :autoplay="false"
+        :arrow="'always'"
+        :height="'120px'"
+        :style="{
+          '--arrow-left-bg': `url(${arrowRightBg})`,
+          '--arrow-right-bg': `url(${arrowLeftBg})`,
+        }"
+      >
+        <el-carousel-item v-for="item in tablist" :key="item">
+          <div class="item-warp" :style="{ 'background-image': 'url(' + getAssetsFile('images/early/back2.png') + ')' }">
+            <div class="img-wrap">
+              <img :src="getAssetsFile('images/early/icon3.png')" />
+            </div>
+
+            <div class="name">
+              <span class="name-val">{{ item.name }}</span>
+            </div>
+          </div>
+        </el-carousel-item>
+      </el-carousel>
+    </div>
+    <div class="price-list">
+      <div
+        v-for="(n, index) in pricelist"
+        :key="index"
+        :style="{
+          'background-image': 'url(' + getAssetsFile('images/early/bg5.png') + ')',
+          height: 'calc((100% - 50px) /' + 3 + ')',
+        }"
+        class="data-item"
+      >
+        <div class="data-warp">
+          <div class="small-bg">
+            <img :src="getAssetsFile('images/early/back3.png')" />
+            <img :src="getAssetsFile('images/early/' + n.icon)" class="img-icon" />
+          </div>
+          <div class="data-pos">
+            <div class="data-pos-center">
+              <div class="pos-center">
+                <div class="label">
+                  <span class="val">{{ n.title }}</span>
+                  <span class="unit">{{ n.unit }}</span>
+                </div>
+                <span class="value">{{ n.value }}</span>
+              </div>
+            </div>
+          </div>
+        </div>
+      </div>
+    </div>
+  </div>
+</template>
+<script setup>
+import { ref, reactive, onMounted, computed } from 'vue';
+import { isEmpty, getAssetsFile } from '@/utils';
+let tablist = reactive([
+  { name: '西红柿', label: '价格', scr: '' },
+  { name: '甘蔗', label: '价格', scr: '' },
+  { name: '白菜', label: '价格', scr: '' },
+]);
+
+let pricelist = reactive([
+  { title: '今日最高价', value: 1.24, unit: '元/kg', icon: 'icon1.png' },
+  { title: '今日最低价', value: 0.87, unit: '元/kg', icon: 'icon2.png' },
+  { title: '最多价格', value: 1.19, unit: '元/kg', icon: 'icon3.png' },
+  { title: '建议售价', value: 1.21, unit: '元/kg', icon: 'icon5.png' },
+  { title: '历史最高价', value: 1.36, unit: '元/kg', icon: 'icon6.png' },
+  { title: '历史最低价', value: 0.75, unit: '元/kg', icon: 'icon7.png' },
+]);
+
+// 动态获取箭头图片路径
+const arrowLeftBg = getAssetsFile('images/early/arrowL.png');
+const arrowRightBg = getAssetsFile('images/early/arrowR.png');
+</script>
+<style lang="scss" scoped>
+div {
+  box-sizing: border-box;
+}
+.real-time-price-wrap {
+  height: 100%;
+  width: 100%;
+  padding: 10px 0;
+  text-align: center;
+  ::v-deep() {
+    .el-carousel__arrow--left {
+      background-image: var(--arrow-left-bg);
+      background-size: 100% 100%;
+      background-position: left center;
+      width: 68px;
+      height: 54px;
+      i {
+        display: none;
+      }
+    }
+    .el-carousel__arrow--right {
+      background-image: var(--arrow-right-bg);
+      background-size: 100% 100%;
+      background-position: left center;
+      width: 68px;
+      height: 54px;
+      i {
+        display: none;
+      }
+    }
+  }
+  .item-warp {
+    width: calc(100% - 136px);
+    text-align: center;
+    margin: 0 auto;
+    background-size: 80% 80%;
+    background-position: center 8px;
+    height: 100%;
+    background-repeat: no-repeat;
+    .img-wrap {
+      width: 80%;
+      height: 80%;
+      text-align: center;
+      margin-left: 10%;
+      img {
+        width: 100%;
+        height: 100%;
+        margin: auto;
+      }
+    }
+    .name {
+      width: 100%;
+      .name-val {
+        font-size: 16px;
+        font-weight: bold;
+        color: #fff;
+      }
+    }
+  }
+
+  .price-list {
+    width: 100%;
+    height: calc(100% - 120px);
+    padding-top: 10px;
+    display: inline-flex;
+    justify-content: space-between;
+    flex-wrap: wrap;
+    .data-item {
+      width: calc((100% - 10px) / 2);
+      display: inline-flex;
+      flex-direction: column;
+      justify-content: center;
+      background-size: 100% 100%;
+      position: relative;
+    }
+    .data-warp {
+      padding: 8px;
+      text-align: center;
+      z-index: 1;
+      display: inline-flex;
+      justify-content: center;
+      .small-bg,
+      .data-pos {
+        display: inline-flex;
+        vertical-align: middle;
+        .data-pos-center {
+          display: inline-flex;
+          justify-content: space-around;
+          flex-direction: column;
+          height: 100%;
+          .pos-center {
+          }
+        }
+      }
+      .small-bg {
+        width: 54px;
+        height: 54px;
+        position: relative;
+        .img-icon {
+          position: absolute;
+          left: 50%;
+          top: 50%;
+          transform: translate(-50%, -50%);
+          width: 38%;
+          height: 38%;
+        }
+      }
+      .data-pos {
+        width: calc(100% - 54px);
+        padding-left: 8px;
+        .label,
+        .value {
+          display: inline-block;
+          width: 100%;
+        }
+        .label {
+          color: #fff;
+          text-align: left;
+          .val {
+            font-size: 12px;
+          }
+          .unit {
+            font-size: 10px;
+            padding-left: 3px;
+          }
+          .unit::before {
+            content: '(';
+          }
+          .unit::after {
+            content: ')';
+          }
+        }
+        .value {
+          color: #6beff9;
+          font-size: 16px;
+          font-weight: bold;
+          margin-top: 6px;
+          text-align: left;
+        }
+      }
+    }
+  }
+}
+</style>

sub-government-screen-service/src/views/early/index.vue

@@ -6,7 +6,9 @@
           <el-col :span="6" class="left-charts">
             <div class="left-charts-item">
               <customBack top-title="舆情数据统计" :top-postion="'left'">
-                <template #back> </template>
+                <template #back>
+                  <!-- <popularFeelings></popularFeelings> -->
+                </template>
               </customBack>
             </div>
             <div class="left-charts-item">
@@ -28,9 +30,18 @@
             <centerMap></centerMap>
           </el-col>
           <el-col :span="6" class="right-charts">
-            <div class="right-charts-item" style="height: 100%">
+            <div class="right-charts-item" style="height: 67%">
               <customBack top-title="农场品实时价格" :top-postion="'right'">
-                <template #back> </template>
+                <template #back>
+                  <realTimePrice></realTimePrice>
+                </template>
+              </customBack>
+            </div>
+            <div class="right-charts-item" style="height: 33%">
+              <customBack top-title="农产品价格数据分析" :top-postion="'right'">
+                <template #back>
+                  <priceCharts></priceCharts>
+                </template>
               </customBack>
             </div>
           </el-col>
@@ -45,6 +56,9 @@ import customBack from '@/components/customBack.vue';
 import centerMap from '@/components/centerMap.vue';
 import backToCharts from './components/backToCharts.vue';
 import productTypeWordClould from './components/productTypeWordClould.vue';
+import priceCharts from './components/priceCharts.vue';
+import realTimePrice from './components/realTimePrice.vue';
+import popularFeelings from './components/popularFeelings.vue';
 </script>
 <style lang="scss" scoped>
 .data-home-index {

sub-government-screen-service/src/views/home/components/comprehensive.vue

@@ -14,7 +14,7 @@
           </div>
           <div class="data-pos">
             <div class="data-pos-center">
-              <div class="c">
+              <div class="pos-center">
                 <span class="label">{{ n.label }}</span>
                 <span class="value">{{ n.value }}</span>
               </div>