Merge branch 'main' of http://47.109.205.240:3000/Web/digital-agriculture-screen

src/App.vue

@@ -18,4 +18,5 @@ const size = computed(() => SettingStore.themeConfig.globalComSize);
 </script>
 <style lang="scss">
 @import './styles/style';
+@import './assets/fonts/font.css';
 </style>

src/assets/fonts/font.css

@@ -0,0 +1,15 @@
+@font-face {
+    font-family: 'JinBuTi';
+    /* 自定义字体名称 */
+    src: url('./DingTalk JinBuTi.ttf') format('truetype');
+    font-weight: normal;
+    font-style: normal;
+}
+
+@font-face {
+    font-family: 'Sans';
+    /* 自定义字体名称 */
+    src: url('./DingTalk Sans.ttf') format('truetype');
+    font-weight: normal;
+    font-style: normal;
+}

src/components/baseBg.vue

@@ -3,55 +3,7 @@
   <div class="data-warp" :style="{ 'background-image': 'url(' + getAssetsFile('images/vsualized/screenbg.png') + ')' }">
     <div class="chart-content">
       <div class="top">
-        <slot v-if="$slots.top" name="top"></slot>
-        <!--:style="{ 'background-image': 'url(' + getAssetsFile('images/vsualized/hraderbg.png') + ')' }" -->
-        <div v-else class="top-content-warp">
-          <div class="top-left"></div>
-          <div class="top-content">
-            <div class="top-content-p">
-              <div class="b-nav-l">
-                <template v-for="(n, indexn) in navlist" :key="n.name">
-                  <div
-                    v-if="indexn <= 3"
-                    class="b-nav-item"
-                    :style="{
-                      'background-image':
-                        'url(' +
-                        (currentName == n.name ? getAssetsFile('images/vsualized/home/nav-on.png') : getAssetsFile('images/vsualized/home/nav.png')) +
-                        ')',
-                    }"
-                    :class="currentName == n.name ? 'nav-act' : 'nav-normal'"
-                    @click="itemAct(n.name)"
-                  >
-                    <span>{{ n.title }}</span>
-                  </div>
-                </template>
-              </div>
-
-              <!-- <div class="title txt-ellipsis clamp1">{{ topTitle }}</div> -->
-              <div class="title txt-ellipsis clamp1">{{ '农业产业政务云平台' }}</div>
-              <div class="b-nav-r">
-                <template v-for="(m, indexm) in navlist" :key="m.name">
-                  <div
-                    v-if="indexm > 3"
-                    class="b-nav-item"
-                    :style="{
-                      'background-image':
-                        'url(' +
-                        (currentName == m.name ? getAssetsFile('images/vsualized/home/nav-on.png') : getAssetsFile('images/vsualized/home/nav.png')) +
-                        ')',
-                    }"
-                    :class="currentName == m.name ? 'nav-act' : 'nav-normal'"
-                    @click="itemAct(m.name)"
-                  >
-                    <span>{{ m.title }}</span>
-                  </div>
-                </template>
-              </div>
-            </div>
-          </div>
-          <!-- <div class="top-right">{{ currentTime }}</div> -->
-        </div>
+        <custom-scroll-title :titles="titles" @change-title="handleChangeTitle" />
       </div>
       <div class="content">
         <slot name="center"></slot>
@@ -60,10 +12,9 @@
   </div>
 </template>
 <script setup>
-import { isEmpty, getAssetsFile } from '@/utils';
-import { ref, reactive, onMounted, watch, onUnmounted } from 'vue';
+import { getAssetsFile } from '@/utils';
+import { ref } from 'vue';
 import { useRouter } from 'vue-router';
-import { useApp } from '@/hooks';
 const router = useRouter();
 const props = defineProps({
   nameVal: {
@@ -76,34 +27,19 @@ const props = defineProps({
   },
 });
 
-const navlist = ref([
-  { title: '首页', name: 'home' },
-  { title: '土地资源', name: 'land' },
-  { title: '投入品', name: 'inputs' },
-  { title: '生产经营主体', name: 'entities' },
-  // { title: '智慧种植监测', name: 'plant' },
-  // { title: '智慧养殖监测', name: 'breed' },
-  { title: '全流程溯源', name: 'trace' },
-  { title: '产业预警决策', name: 'early' },
+const titles = ref([
+  { label: '首页', value: 'home' },
+  { label: '土地资源', value: 'land' },
+  { label: '投入品', value: 'inputs' },
+  { label: '生产经营主体', value: 'entities' },
+  // { label: '智慧种植监测', value: 'plant' },
+  // { label: '智慧养殖监测', value: 'breed' },
+  { label: '全流程溯源', value: 'trace' },
+  { label: '产业预警决策', value: 'early' },
 ]);
-
-let currentName = ref('home');
-
-watch(
-  () => props.nameVal,
-  () => {
-    currentName.value = props.nameVal;
-  },
-  {
-    deep: true,
-    immediate: true,
-  }
-);
-
-const itemAct = (name) => {
-  currentName.value = name;
+function handleChangeTitle(name) {
   router.push({ name: name });
-};
+}
 </script>
 <style lang="scss" scoped>
 div {
@@ -121,7 +57,6 @@ div {
     position: absolute;
     left: 0;
     top: 0;
-    .top,
     .content,
     .bottom {
       width: 100%;
@@ -132,7 +67,7 @@ div {
       justify-content: center;
     }
     .top {
-      height: 55px;
+      height: 60px;
       .top-content-warp {
         width: 100%;
         height: 100%;
@@ -260,7 +195,7 @@ div {
       }
     }
     .content {
-      height: calc(100% - 60px);
+      height: calc(100% - 70px);
     }
   }
 }

src/components/custom-scroll-title/index.vue

@@ -1,7 +1,9 @@
 <template>
   <section class="header_title" :style="{ '--titleContentW': titleContentW + 'px', '--itemW': itemW + 'px', '--gap': gap + 'px' }">
-    <el-button icon="el-icon-arrow-left" class="left_btn" @click="handleTitleBtn(1)"></el-button>
-    <el-button icon="el-icon-arrow-right" class="right_btn" @click="handleTitleBtn(-1)"></el-button>
+    <el-icon v-if="props.titles.length > 6" icon="el-icon-arrow-left" class="left_btn" @click="handleTitleBtn(1)">
+      <ArrowLeftBold />
+    </el-icon>
+    <el-icon v-if="props.titles.length > 6" icon="el-icon-arrow-right" class="right_btn" @click="handleTitleBtn(-1)"><ArrowRightBold /></el-icon>
     <section class="left_titles_container">
       <section class="title_content" :style="{ left: `-${position}px` }">
         <section
@@ -14,6 +16,7 @@
         </section>
       </section>
     </section>
+    <section class="sys_name">政务云数字农业智慧大屏</section>
     <section class="right_titles_container">
       <section class="title_content" :style="{ left: `${right ? right + 'px' : '-' + position + 'px'}` }">
         <section
@@ -31,7 +34,8 @@
 
 <script setup>
 import { ref, watch, onMounted } from 'vue';
-
+import { useRouter } from 'vue-router';
+const router = useRouter();
 onMounted(() => {
   handleWidth();
 });
@@ -41,25 +45,14 @@ const props = defineProps({
     type: Array,
     default() {
       return [
-        { label: '标题1', value: '1' },
-        { label: '标题2', value: '2' },
-        { label: '标题3', value: '3' },
-        { label: '标题4', value: '4' },
-        { label: '标题5', value: '5' },
-        { label: '标题6', value: '6' },
-        { label: '标题7', value: '7' },
-        { label: '标题8', value: '8' },
-        { label: '标题9', value: '9' },
-        { label: '标题10', value: '10' },
-        { label: '标题11', value: '11' },
-        { label: '标题12', value: '12' },
-        { label: '标题13', value: '13' },
-        { label: '标题14', value: '14' },
-        { label: '标题15', value: '15' },
-        { label: '标题16', value: '16' },
-        { label: '标题17', value: '17' },
-        { label: '标题18', value: '18' },
-        { label: '标题19', value: '19' },
+        { label: '首页', value: 'home' },
+        { label: '土地资源', value: 'land' },
+        { label: '投入品', value: 'inputs' },
+        { label: '生产经营主体', value: 'entities' },
+        // { label: '智慧种植监测', value: 'plant' },
+        // { label: '智慧养殖监测', value: 'breed' },
+        { label: '全流程溯源', value: 'trace' },
+        { label: '产业预警决策', value: 'early' },
       ];
     },
   },
@@ -78,6 +71,7 @@ watch(
   () => props.titles,
   (val) => {
     if (val && val.length) {
+      activeTitle.value = val[0].value;
       let l = val.length;
       if (l > 6) {
         leftTitles.value = val.slice(0, l - 3);
@@ -116,6 +110,7 @@ function handleTitleBtn(t = -1) {
 function handleTitleClick(val) {
   activeTitle.value = val;
   emit('changeTitle', val);
+  router.push({ name: val });
 }
 </script>
 
@@ -130,17 +125,27 @@ function handleTitleClick(val) {
   display: flex;
   justify-content: space-between;
   width: 100vw;
-  height: 60px;
-  //   background: url('./headerBG.png') no-repeat center/cover;
-  background-color: skyblue;
+  height: 100%;
+  background: url('../../assets/images/basic/headerBG.png') no-repeat;
+  background-size: 100% 100%;
+  .sys_name {
+    padding-bottom: 8px;
+    display: flex;
+    height: 100%;
+    align-items: center;
+    justify-content: center;
+    font-size: 32px;
+    color: #fff;
+    font-family: 'JinBuTi';
+  }
   .left_btn,
   .right_btn {
     position: absolute;
-    top: 15px;
+    top: 25px;
     padding: 6px 6px;
     width: 30px;
     height: 30px;
-    background-color: rgb(39, 172, 255);
+    background-color: rgb(6, 155, 118, 0.5);
     border-radius: 8px;
     cursor: pointer;
     z-index: 1;
@@ -158,8 +163,9 @@ function handleTitleClick(val) {
   .right_titles_container {
     position: relative;
     width: 30%;
-    height: 60px;
+    height: 100%;
     overflow: hidden;
+    line-height: 60px;
     .title_content {
       position: absolute;
       top: 10px;
@@ -168,10 +174,10 @@ function handleTitleClick(val) {
       transition: all 0.4s ease;
       font-size: 20px;
       font-weight: bold;
-      color: #f5f5f5;
       .active {
         color: #fff;
-        text-shadow: 1px 1px 2px red;
+        opacity: 1 !important;
+        text-shadow: 0px 4px 10px #fff;
       }
       .title_item {
         margin-right: var(--gap);
@@ -180,12 +186,23 @@ function handleTitleClick(val) {
         height: 40px;
         line-height: 40px;
         text-align: center;
-        // background: url('./titleBG.png') no-repeat center/cover;
-        background-color: aquamarine;
+        color: #f5fffe;
         cursor: pointer;
         user-select: none;
+        background-size: 100% 100%;
+        opacity: 0.6;
       }
     }
   }
+  .left_titles_container {
+    .title_item {
+      background: url('../../assets/images/basic/leftTitleBG.png') no-repeat;
+    }
+  }
+  .right_titles_container {
+    .title_item {
+      background: url('../../assets/images/basic/rightTitleBG.png') no-repeat;
+    }
+  }
 }
 </style>

src/layouts/index.vue

@@ -1,3 +1,23 @@
 <template>
-  <router-view />
+  <section class="_contaioner">
+    <custom-scroll-title class="header_titles" @change-title="handleChangeTitle" />
+    <section class="_content">
+      <router-view />
+    </section>
+  </section>
 </template>
+<style lang="scss" scoped>
+._contaioner {
+  box-sizing: border-box;
+  width: 100vw;
+  height: 100vh;
+  background: url('../assets/images/basic/containerBG.png') no-repeat center;
+  background-size: 100% 100%;
+  .header_titles {
+    height: 60px;
+  }
+  ._content {
+    height: calc(100vh - 60px);
+  }
+}
+</style>

src/router/index.js

@@ -20,7 +20,7 @@ export const constantRoutes = [
     path: '/',
     name: 'layout',
     component: Layout,
-    redirect: '/home',
+    // redirect: '/home',
     meta: { title: '首页', icon: 'House' },
     children: [
       {

src/views/home/index.vue

@@ -1,77 +1,56 @@
 <template>
   <div class="data-home-index">
-    <baseBg ref="homebase" :name-val="'home'" top-title=" ">
-      <!-- <template #top> </template> -->
-      <template #center>
-        <el-row style="width: 100%; height: 100%">
-          <el-col :span="6" class="left-charts">
-            <div class="left-charts-item">
-              <customBack top-title="综合数据统计" :top-postion="'left'">
-                <template #back>
-                  <comprehensive></comprehensive>
-                </template>
-              </customBack>
-            </div>
-            <div class="left-charts-item">
-              <customBack top-title="土地分布数据统计" :top-postion="'left'">
-                <template #back>
-                  <rolllist :items="rollDataList"></rolllist>
-                </template>
-              </customBack>
-            </div>
-            <div class="left-charts-item">
-              <customBack top-title="种养殖数据统计" :top-postion="'left'">
-                <template #back>
-                  <plantBreedCharts></plantBreedCharts>
-                </template>
-              </customBack>
-            </div>
-          </el-col>
-          <el-col :span="12">
-            <centerMap></centerMap>
-          </el-col>
-          <el-col :span="6" class="right-charts">
-            <div class="right-charts-item">
-              <customBack top-title="使用投入品数据统计" :top-postion="'left'">
-                <template #back>
-                  <inputs></inputs>
-                </template>
-              </customBack>
-            </div>
-            <div class="right-charts-item">
-              <customBack top-title="经营主体数据统计" :top-postion="'left'">
-                <template #back>
-                  <entitiesCharts></entitiesCharts>
-                </template>
-              </customBack>
-            </div>
-            <div class="right-charts-item">
-              <customBack top-title="溯源赋码与扫码数据统计" :top-postion="'left'">
-                <template #back>
-                  <traceCharts></traceCharts>
-                </template>
-              </customBack>
-            </div>
-          </el-col>
-        </el-row>
-      </template>
-    </baseBg>
-
-    <div class="home-index-top-warp">
-      <div class="home-index-top" :style="{ 'background-image': 'url(' + getAssetsFile('images/vsualized/home/hometopbg.png') + ')' }">
-        <div class="home-data-p">
-          <!-- <h3 class="home-title">耿马县农产品销售情况</h3> -->
-          <div class="home-data-top">￥1284.624万</div>
-          <div class="home-data-contrast">
-            <span class="tips">同比去年</span>
-            <span class="value">￥4684.629</span>
-            <el-icon style="vertical-align: middle" class="contrast-icon" color="#6beff9">
-              <TopRight />
-            </el-icon>
-          </div>
+    <el-row style="width: 100%; height: 100%">
+      <el-col :span="6" class="left-charts">
+        <div class="left-charts-item">
+          <customBack top-title="综合数据统计" :top-postion="'left'">
+            <template #back>
+              <comprehensive></comprehensive>
+            </template>
+          </customBack>
         </div>
-      </div>
-    </div>
+        <div class="left-charts-item">
+          <customBack top-title="土地分布数据统计" :top-postion="'left'">
+            <template #back>
+              <rolllist :items="rollDataList"></rolllist>
+            </template>
+          </customBack>
+        </div>
+        <div class="left-charts-item">
+          <customBack top-title="种养殖数据统计" :top-postion="'left'">
+            <template #back>
+              <plantBreedCharts></plantBreedCharts>
+            </template>
+          </customBack>
+        </div>
+      </el-col>
+      <el-col :span="12">
+        <centerMap></centerMap>
+      </el-col>
+      <el-col :span="6" class="right-charts">
+        <div class="right-charts-item">
+          <customBack top-title="使用投入品数据统计" :top-postion="'left'">
+            <template #back>
+              <inputs></inputs>
+            </template>
+          </customBack>
+        </div>
+        <div class="right-charts-item">
+          <customBack top-title="经营主体数据统计" :top-postion="'left'">
+            <template #back>
+              <entitiesCharts></entitiesCharts>
+            </template>
+          </customBack>
+        </div>
+        <div class="right-charts-item">
+          <customBack top-title="溯源赋码与扫码数据统计" :top-postion="'left'">
+            <template #back>
+              <traceCharts></traceCharts>
+            </template>
+          </customBack>
+        </div>
+      </el-col>
+    </el-row>
   </div>
 </template>
 <script setup>
@@ -95,89 +74,26 @@ let rollDataList = reactive([
   // 更多项...
 ]);
 
-// const homebase = ref(null);
-
-// onMounted(() => {
-//   homebase.value && homebase.value.startTime();
-// });
-
-// onUnmounted(() => {
-//   homebase.value && homebase.value.chearTime();
 // });
 </script>
 <style lang="scss" scoped>
 .data-home-index {
-  .home-index-top-warp {
-    position: fixed;
-    top: 48px;
-    left: 0;
-    width: 100%;
-    height: 120px;
-    text-align: center;
-    padding-top: 24px;
-    .home-index-top {
-      margin: auto;
-      width: calc(100% - 400px);
-      height: 100%;
-      background-repeat: no-repeat;
-      background-position: center bottom;
-      background-size: contain;
-      position: relative;
-      .home-data-p {
-        position: absolute;
-        left: 0;
-        top: 13px;
-        width: 100%;
-      }
-      .home-title {
-        display: inline-block;
-        font-size: 18px;
-        font-weight: bold;
-        transform: skewX(-10deg);
-        background: linear-gradient(to bottom, '#ff7e5f', '#548fff');
-        -webkit-background-clip: text;
-        color: #fff;
-        letter-spacing: 4px;
-        text-shadow: -2px 0 0 1px #add8f1;
-      }
-      .home-data-top {
-        font-size: 18px;
-        font-weight: bold;
-        color: #fff;
-        letter-spacing: 8px;
-        margin-bottom: 10px;
-      }
-      .home-data-contrast {
-        .tips {
-          font-size: 10px;
-          color: #6beff9;
-        }
-        .value {
-          padding: 0 8px;
-          font-size: 12px;
-          font-weight: bold;
-          color: #fff;
-        }
-      }
-    }
-  }
+  height: 100%;
+  width: 100%;
   .left-charts {
     display: flex;
     justify-content: space-around;
-    width: 100%;
     height: 100%;
     flex-direction: column;
   }
   .left-charts-item {
     width: 100%;
     height: calc((100% - 30px) / 3);
-    background: transparent;
   }
 
   .right-charts {
     display: flex;
     justify-content: space-around;
-    width: 100%;
     height: 100%;
     flex-direction: column;
   }