Главная Обзор Помощь
Регистрация Вход
yangqishu
/
tmzn-weihe
1
0
Ответвить 0
Файлы Задачи 0 Запросы на слияние 0 Вики
Просмотр исходного кода

feat:新增采砂监控模块页面

yangqishu 4 месяцев назад
Родитель
0377c4fc61
Сommit
7decfe3a4f
21 измененных файлов с 762 добавлено и 22 удалено
Единый вид Показать статистику Diff
  1. 1 1
      public/index.html
  2. BIN
      src/assets/image/sand-monitor/arrow-left.png
  3. BIN
      src/assets/image/sand-monitor/arrow-right.png
  4. BIN
      src/assets/image/sand-monitor/icon-bg.png
  5. BIN
      src/assets/image/sand-monitor/mid-bg.png
  6. BIN
      src/assets/image/sand-monitor/监控设备.png
  7. BIN
      src/assets/image/sand-monitor/采砂区.png
  8. BIN
      src/assets/image/sand-monitor/采砂车.png
  9. BIN
      src/assets/image/sand-monitor/采砂车2.png
  10. 4 1
      src/components/base-header/base-header.vue
  11. 1 1
      src/components/base-panel/base-panel-right.vue
  12. 10 0
      src/main.js
  13. 41 0
      src/mixins/index.js
  14. 7 0
      src/pxToRem.js
  15. 1 0
      src/views/components/menu/index.vue
  16. 5 3
      src/views/index.vue
  17. 0 16
      src/views/overview/left.vue
  18. 281 0
      src/views/sand-monitor/left.vue
  19. 56 0
      src/views/sand-monitor/line-chart/index.vue
  20. 75 0
      src/views/sand-monitor/pie-chart/index.vue
  21. 280 0
      src/views/sand-monitor/right.vue

+ 1 - 1
public/index.html
Просмотреть файл 

@@ -1,5 +1,5 @@
 
 <!DOCTYPE html>
 
 <!DOCTYPE html>
 
-<html lang="zh-cn" style="font-size: calc(9.72763vh)">
 
+<html lang="zh-cn">
 
   <head>
 
   <head>
 
     <meta charset="utf-8" />
 
     <meta charset="utf-8" />
 
     <meta http-equiv="X-UA-Compatible" content="IE=edge" />
 
     <meta http-equiv="X-UA-Compatible" content="IE=edge" />

BIN
src/assets/image/sand-monitor/arrow-left.png
Просмотреть файл


BIN
src/assets/image/sand-monitor/arrow-right.png
Просмотреть файл


BIN
src/assets/image/sand-monitor/icon-bg.png
Просмотреть файл


BIN
src/assets/image/sand-monitor/mid-bg.png
Просмотреть файл


BIN
src/assets/image/sand-monitor/监控设备.png
Просмотреть файл


BIN
src/assets/image/sand-monitor/采砂区.png
Просмотреть файл


BIN
src/assets/image/sand-monitor/采砂车.png
Просмотреть файл


BIN
src/assets/image/sand-monitor/采砂车2.png
Просмотреть файл


+ 4 - 1
src/components/base-header/base-header.vue
Просмотреть файл 

@@ -2,6 +2,7 @@
 
   <div class="base-header">
 
   <div class="base-header">
 
     <slot name="title" v-if="$slots.title"></slot>
 
     <slot name="title" v-if="$slots.title"></slot>
 
     <span v-else class="title">{{ title }}</span>
 
     <span v-else class="title">{{ title }}</span>
 
+    <slot></slot>
 
   </div>
 
   </div>
 
 </template>
 
 </template>
 
 
 
@@ -16,12 +17,13 @@ export default {
 
 
 
 <style lang="scss" scoped>
 
 <style lang="scss" scoped>
 
 .base-header {
 
 .base-header {
 
+  position: relative;
 
   padding: px-to-rem(0) px-to-rem(12) px-to-rem(0) px-to-rem(45);
 
   padding: px-to-rem(0) px-to-rem(12) px-to-rem(0) px-to-rem(45);
 
   width: px-to-rem(368);
 
   width: px-to-rem(368);
 
   height: px-to-rem(48);
 
   height: px-to-rem(48);
 
   line-height: px-to-rem(48);
 
   line-height: px-to-rem(48);
 
   color: #fff;
 
   color: #fff;
 
-  font-size: px-to-rem(16);
 
+  font-size: px-to-rem(18);
 
   font-family: PingFangSC, PingFang SC;
 
   font-family: PingFangSC, PingFang SC;
 
   font-weight: 500;
 
   font-weight: 500;
 
   background-size: cover;
 
   background-size: cover;
 
@@ -33,6 +35,7 @@ export default {
 
     width: 100%;
 
     width: 100%;
 
     height: 0.48rem;
 
     height: 0.48rem;
 
     color: #ffffff;
 
     color: #ffffff;
 
+    font-weight: bold;
 
     text-overflow: ellipsis;
 
     text-overflow: ellipsis;
 
     white-space: nowrap;
 
     white-space: nowrap;
 
     display: flex;
 
     display: flex;

+ 1 - 1
src/components/base-panel/base-panel-right.vue
Просмотреть файл 

@@ -33,7 +33,7 @@ export default {
 
     right: 0;
 
     right: 0;
 
     height: 100%;
 
     height: 100%;
 
     width: 3.94rem;
 
     width: 3.94rem;
 
-    padding-top: 0.48rem;
 
+    padding-top: 0.82rem;
 
     padding-right: 0.18rem;
 
     padding-right: 0.18rem;
 
     transition: all 0.3s;
 
     transition: all 0.3s;
 
     pointer-events: auto;
 
     pointer-events: auto;

+ 10 - 0
src/main.js
Просмотреть файл 

@@ -9,6 +9,9 @@ import sdk from '@ct/iframe-connect-sdk'
 
 import router from './router'
 
 import router from './router'
 
 import store from './store'
 
 import store from './store'
 
 
 
+import { pxToRemMixin } from './pxToRem.js'
 
+
 
+Vue.mixin(pxToRemMixin)
 
 Vue.config.productionTip = false
 
 Vue.config.productionTip = false
 
 // 挂载请求sdk
 
 // 挂载请求sdk
 
 const { iframeSDK, requestSDK, postMsgUtil } = sdk
 
 const { iframeSDK, requestSDK, postMsgUtil } = sdk
 
@@ -25,6 +28,13 @@ postMsgUtil.listen('checkCrossResult', function ({ data }) {
 
   localStorage.setItem('isCross', data !== 200)
 
   localStorage.setItem('isCross', data !== 200)
 
 })
 
 })
 
 
 
+const setRootFontSize = (direction = 'v') => {
 
+  const htmlElement = document.documentElement
 
+  const baseHeight = direction === 'v' ? 1080 : 1920
 
+  const referenceHeight = 1032
 
+  htmlElement.style.fontSize = direction === 'v' ? `calc((100vh / ${baseHeight}) * 100 * (${baseHeight} / ${referenceHeight}))` : `calc((100vw / ${baseHeight}) * 100)`
 
+}
 
+setRootFontSize('v')
 
 new Vue({
 
 new Vue({
 
   router,
 
   router,
 
   store,
 
   store,

+ 41 - 0
src/mixins/index.js
Просмотреть файл 

@@ -0,0 +1,41 @@
 
+import * as echarts from 'echarts'
 
+export const commonMixin = {
 
+  methods: {}
 
+}
 
+
 
+export const echartMixin = {
 
+  data() {
 
+    return {
 
+      chartObj: null
 
+    }
 
+  },
 
+  mounted() {
 
+    this.chartObj = echarts.init(this.$refs.chart, 'dark')
 
+    window.addEventListener('resize', this.resizeChart)
 
+    this.$nextTick(() => this.initChart())
 
+  },
 
+  beforeDestroy() {
 
+    if (this.chartObj) {
 
+      this.chartObj.dispose() // 销毁图表实例
 
+    }
 
+    window.removeEventListener('resize', this.resizeChart)
 
+  },
 
+  methods: {
 
+    resizeChart() {
 
+      if (this.chartObj) {
 
+        this.chartObj.resize() // 调整图表大小
 
+      }
 
+    }
 
+  },
 
+  watch: {
 
+    optionsData() {
 
+      if (this.chartObj) {
 
+        this.chartObj.dispose()
 
+        this.chartObj = null
 
+      }
 
+      this.chartObj = echarts.init(this.$refs.chart, 'dark')
 
+      this.initChart()
 
+      setTimeout(() => window.dispatchEvent(new Event('resize')), 200)
 
+    }
 
+  }
 
+}

+ 7 - 0
src/pxToRem.js
Просмотреть файл 

@@ -0,0 +1,7 @@
 
+export const pxToRemMixin = {
 
+  methods: {
 
+    pxToRem(px) {
 
+      return `${px / 100}rem`
 
+    }
 
+  }
 
+}

+ 1 - 0
src/views/components/menu/index.vue
Просмотреть файл 

@@ -51,6 +51,7 @@ export default {
 
         i.active = false
 
         i.active = false
 
       })
 
       })
 
       item.active = true
 
       item.active = true
 
+      console.log(item.name)
 
       this.$store.commit('setMenu', item.name)
 
       this.$store.commit('setMenu', item.name)
 
     },
 
     },
 
     /** 获取当前时间的格式化字符串
 
     /** 获取当前时间的格式化字符串

+ 5 - 3
src/views/index.vue
Просмотреть файл 

@@ -7,7 +7,8 @@
 
       <el-main>
 
       <el-main>
 
         <div class="home-view">
 
         <div class="home-view">
 
           <MainMap :mapKey="mapName" :url="configUrl" :options="mapOptions" @onload="onMapload" />
 
           <MainMap :mapKey="mapName" :url="configUrl" :options="mapOptions" @onload="onMapload" />
 
-          <OverviewLeft></OverviewLeft>
 
+          <SandMonitorLeft v-if="mainMenu === '采砂监控'"></SandMonitorLeft>
 
+          <SandMonitorRight v-if="mainMenu === '采砂监控'"></SandMonitorRight>
 
         </div>
 
         </div>
 
       </el-main>
 
       </el-main>
 
     </el-container>
 
     </el-container>
 
@@ -18,11 +19,12 @@
 
 import menuPanel from '@/views/components/menu'
 
 import menuPanel from '@/views/components/menu'
 
 import { mapState } from 'vuex'
 
 import { mapState } from 'vuex'
 
 import MainMap from '@/views/components/map'
 
 import MainMap from '@/views/components/map'
 
-import OverviewLeft from './overview/left.vue'
 
+import SandMonitorLeft from './sand-monitor/left.vue'
 
+import SandMonitorRight from './sand-monitor/right.vue'
 
 const basePathUrl = window.basePathUrl || ''
 
 const basePathUrl = window.basePathUrl || ''
 
 export default {
 
 export default {
 
   name: 'MainView',
 
   name: 'MainView',
 
-  components: { MainMap, menuPanel, OverviewLeft },
 
+  components: { MainMap, menuPanel, SandMonitorLeft, SandMonitorRight },
 
   computed: {
 
   computed: {
 
     ...mapState({
 
     ...mapState({
 
       mainMenu: (state) => state.home.mainMenu
 
       mainMenu: (state) => state.home.mainMenu

+ 0 - 16
src/views/overview/left.vue
Просмотреть файл 

@@ -1,16 +0,0 @@
 
-<template>
 
-  <BasePanelLeft></BasePanelLeft>
 
-</template>
 
-<script>
 
-import BasePanelLeft from '@/components/base-panel/base-panel-left'
 
-export default {
 
-  name: 'overviewLeft',
 
-  components: { BasePanelLeft },
 
-  data() {
 
-    return {}
 
-  },
 
-
 
-  methods: {}
 
-}
 
-</script>
 
-<style scoped lang="scss"></style>

+ 281 - 0
src/views/sand-monitor/left.vue
Просмотреть файл 

@@ -0,0 +1,281 @@
 
+<template>
 
+  <BasePanelLeft>
 
+    <div class="sand-monitor-left-container">
 
+      <base-header title="采砂区总览"></base-header>
 
+      <div class="card-item">
 
+        <div class="icon-content">
 
+          <div class="icon-item">
 
+            <div class="icon-item-content">
 
+              <img src="@/assets/image/sand-monitor/采砂区.png" style="width: 0.38rem; height: 0.32rem" />
 
+              <div class="item-content">
 
+                <span class="label">采砂区个数</span>
 
+                <span class="value" style="color: #4183d3">2个</span>
 
+              </div>
 
+            </div>
 
+            <img src="@/assets/image/sand-monitor/icon-bg.png" style="width: 1.6rem" />
 
+          </div>
 
+          <div class="icon-item">
 
+            <div class="icon-item-content">
 
+              <img src="@/assets/image/sand-monitor/监控设备.png" style="width: 0.32rem; height: 0.3rem" />
 
+              <div class="item-content">
 
+                <span class="label">监控设备</span>
 
+                <span class="value" style="color: #fcd294">2个</span>
 
+              </div>
 
+            </div>
 
+            <img src="@/assets/image/sand-monitor/icon-bg.png" style="width: 1.6rem" />
 
+          </div>
 
+        </div>
 
+        <div class="progress-content">
 
+          <div class="progress-item" v-for="(item, index) in progressList" :key="index">
 
+            <div class="progress-item-text">
 
+              <span>{{ item.name }}</span>
 
+              <span>{{ item.value }}</span>
 
+            </div>
 
+            <el-progress size="large" :percentage="item.percentage" :color="item.color" :show-text="false" define-back-color="#213F61" :stroke-width="10"></el-progress>
 
+          </div>
 
+        </div>
 
+      </div>
 
+      <base-header title="采砂预警总览"></base-header>
 
+      <div class="card-item">
 
+        <div class="warning-content">
 
+          <div class="warning-title">
 
+            <div class="title">预警总数</div>
 
+            <div class="num">30</div>
 
+            <div class="unit">条</div>
 
+          </div>
 
+          <PieChart style="height: 1.45rem" />
 
+        </div>
 
+      </div>
 
+      <base-header title="采砂区详情">
 
+        <div style="position: absolute; top: -2px; right: 0.1rem">
 
+          <el-radio-group v-model="date" size="mini">
 
+            <el-radio-button label="日"></el-radio-button>
 
+            <el-radio-button label="周"></el-radio-button>
 
+            <el-radio-button label="月"></el-radio-button>
 
+          </el-radio-group>
 
+        </div>
 
+      </base-header>
 
+      <div class="card-item">
 
+        <div class="info-content">
 
+          <div class="base-info-container">
 
+            <div class="title">基本信息</div>
 
+            <div class="base-info-card">
 
+              <div class="base-info-item">
 
+                <span>采砂区名称</span>
 
+                <span class="value">1#采砂区</span>
 
+              </div>
 
+              <div class="base-info-item">
 
+                <span>采砂区面积</span>
 
+                <span class="value">1#采砂区 <span>万㎡</span></span>
 
+              </div>
 
+              <div class="base-info-item">
 
+                <span>采砂区状态</span>
 
+                <span class="value">正常开采</span>
 
+              </div>
 
+            </div>
 
+          </div>
 
+          <div class="base-info-container">
 
+            <div class="title">采砂信息</div>
 
+            <div class="base-info-card">
 
+              <div class="base-info-item">
 
+                <span>采砂控制总量</span>
 
+                <span class="value">50<span>万吨</span></span>
 
+              </div>
 
+              <div class="base-info-item">
 
+                <span>过磅总量</span>
 
+                <span class="value">25<span>万吨</span></span>
 
+              </div>
 
+              <div class="base-info-item">
 
+                <span>监测已采总量</span>
 
+                <span class="value">24<span>万吨</span></span>
 
+              </div>
 
+            </div>
 
+          </div>
 
+          <div class="base-info-container">
 
+            <div class="title">趋势分析</div>
 
+            <LineChart style="height: 1.05rem" />
 
+          </div>
 
+        </div>
 
+      </div>
 
+    </div>
 
+  </BasePanelLeft>
 
+</template>
 
+<script>
 
+import BasePanelLeft from '@/components/base-panel/base-panel-left'
 
+import BaseHeader from '@/components/base-header/base-header'
 
+import PieChart from './pie-chart'
 
+import LineChart from './line-chart'
 
+export default {
 
+  name: 'sandMonitorLeft',
 
+  components: { BasePanelLeft, BaseHeader, PieChart, LineChart },
 
+  data() {
 
+    return {
 
+      progressList: [
 
+        { name: '允许采砂总量', value: '400吨', percentage: 50, color: '#3FEBED' },
 
+        { name: '监测已采总量', value: '400吨', percentage: 50, color: '#FCD294' },
 
+        { name: '过磅采砂总量', value: '400吨', percentage: 50, color: '#4183D3' }
 
+      ],
 
+      date: '日'
 
+    }
 
+  },
 
+
 
+  methods: {}
 
+}
 
+</script>
 
+<style scoped lang="scss">
 
+@import url('@/assets/scss/px-to-rem.scss');
 
+.sand-monitor-left-container {
 
+  position: relative;
 
+  height: 100%;
 
+  z-index: 1;
 
+  // height: calc(100vh - 100px);
 
+  // overflow: auto;
 
+  &::-webkit-scrollbar {
 
+    display: none; // 针对 webkit 内核隐藏滚动条
 
+  }
 
+  :deep(.el-radio-button__inner) {
 
+    background: transparent;
 
+    color: #4487d8;
 
+    border-color: #4487d8;
 
+  }
 
+  :deep(.el-radio-button__orig-radio:checked + .el-radio-button__inner) {
 
+    background-color: #409eff;
 
+    color: #fff;
 
+  }
 
+  .card-item {
 
+    position: relative;
 
+    width: 3.68rem;
 
+    padding: px-to-rem(10);
 
+    margin-bottom: px-to-rem(10);
 
+    background: url('@/assets/image/common/areaBg.png') no-repeat 0 0 / 100% 100%;
 
+    .icon-content {
 
+      display: flex;
 
+      align-items: center;
 
+      justify-content: space-between;
 
+      .icon-item {
 
+        display: flex;
 
+        flex-direction: column;
 
+        align-items: center;
 
+        .icon-item-content {
 
+          display: flex;
 
+          justify-content: space-between;
 
+          align-items: center;
 
+          .item-content {
 
+            display: flex;
 
+            flex-direction: column;
 
+            justify-content: center;
 
+            align-items: center;
 
+            margin-left: px-to-rem(10);
 
+            margin-bottom: px-to-rem(-6);
 
+            .label {
 
+              font-weight: 500;
 
+              font-size: px-to-rem(16);
 
+              color: #ffffff;
 
+            }
 
+            .value {
 
+              font-weight: bold;
 
+              font-size: px-to-rem(18);
 
+            }
 
+          }
 
+        }
 
+      }
 
+    }
 
+    .progress-content {
 
+      display: flex;
 
+      flex-direction: column;
 
+      margin-top: px-to-rem(10);
 
+      .progress-item {
 
+        display: flex;
 
+        flex-direction: column;
 
+        margin-bottom: px-to-rem(6);
 
+        .progress-item-text {
 
+          display: flex;
 
+          justify-content: space-between;
 
+          margin-bottom: px-to-rem(4);
 
+          span {
 
+            font-size: px-to-rem(16);
 
+            color: #fff;
 
+          }
 
+        }
 
+      }
 
+    }
 
+    .warning-content {
 
+      height: px-to-rem(200);
 
+      .warning-title {
 
+        display: flex;
 
+        justify-content: space-between;
 
+        align-items: center;
 
+        color: #fff;
 
+        font-size: px-to-rem(16);
 
+        .title {
 
+          &::before {
 
+            content: '';
 
+            display: inline-block;
 
+            background: #4487d8;
 
+            width: px-to-rem(30);
 
+            height: px-to-rem(2);
 
+            margin-bottom: px-to-rem(4);
 
+            margin-right: px-to-rem(6);
 
+          }
 
+          &::after {
 
+            content: '';
 
+            display: inline-block;
 
+            background: #4487d8;
 
+            width: px-to-rem(30);
 
+            height: px-to-rem(2);
 
+            margin-bottom: px-to-rem(4);
 
+            margin-left: px-to-rem(6);
 
+          }
 
+        }
 
+        .num {
 
+          text-align: center;
 
+          width: px-to-rem(75);
 
+          height: px-to-rem(45);
 
+          font-size: px-to-rem(30);
 
+          color: #f5f5f5;
 
+          background: url('@/assets/image/sand-monitor/mid-bg.png') no-repeat;
 
+          background-size: 100% 100%;
 
+        }
 
+        .unit {
 
+          margin-right: px-to-rem(10);
 
+        }
 
+      }
 
+    }
 
+    .info-content {
 
+      color: #fff;
 
+      .base-info-container {
 
+        .title {
 
+          font-size: px-to-rem(16);
 
+          text-align: left;
 
+          &::before {
 
+            content: '';
 
+            display: inline-block;
 
+            width: px-to-rem(8);
 
+            height: px-to-rem(10);
 
+            background: #81b1f5;
 
+            margin-right: px-to-rem(6);
 
+          }
 
+        }
 
+        .base-info-card {
 
+          display: flex;
 
+          justify-content: space-between;
 
+          .base-info-item {
 
+            display: flex;
 
+            flex-direction: column;
 
+            margin-bottom: px-to-rem(10);
 
+            span {
 
+              font-weight: bold;
 
+              font-size: px-to-rem(12);
 
+              color: #c4c6c8;
 
+            }
 
+            .value {
 
+              font-size: px-to-rem(14);
 
+              color: #81b1f5;
 
+            }
 
+          }
 
+        }
 
+      }
 
+    }
 
+  }
 
+}
 
+</style>

+ 56 - 0
src/views/sand-monitor/line-chart/index.vue
Просмотреть файл 

@@ -0,0 +1,56 @@
 
+<template>
 
+  <div ref="chart" class="line-chart-container"></div>
 
+</template>
 
+
 
+<script>
 
+import { echartMixin } from '@/mixins'
 
+import * as echarts from 'echarts'
 
+export default {
 
+  name: 'LineChart',
 
+  mixins: [echartMixin],
 
+  data() {
 
+    return {
 
+      seriesData: []
 
+    }
 
+  },
 
+  methods: {
 
+    initChart() {
 
+      const option = {
 
+        backgroundColor: 'transparent',
 
+        color: ['#4183D1'],
 
+        grid: {
 
+          left: 16,
 
+          right: 16,
 
+          top: 8,
 
+          bottom: 8,
 
+          containLabel: true
 
+        },
 
+        xAxis: [{ type: 'category', boundaryGap: false, data: ['08/21', '08/22', '08/23', '08/24', '08/25'] }],
 
+        yAxis: [{ type: 'value', splitLine: { show: false } }],
 
+        series: [
 
+          {
 
+            name: '趋势分析',
 
+            type: 'line',
 
+            smooth: true,
 
+            lineStyle: { width: 1 },
 
+            showSymbol: false,
 
+            areaStyle: {
 
+              opacity: 0.8,
 
+              color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
 
+                { offset: 1, color: 'rgba(65,130,208,0.25)' },
 
+                { offset: 0, color: 'rgba(65,130,208,1)' }
 
+              ])
 
+            },
 
+            data: [20, 15, 30, 40, 20, 30, 10]
 
+          }
 
+        ]
 
+      }
 
+      this.chartObj.setOption(option)
 
+    }
 
+  }
 
+}
 
+</script>
 
+<style lang="scss">
 
+.line-chart-container {
 
+}
 
+</style>

+ 75 - 0
src/views/sand-monitor/pie-chart/index.vue
Просмотреть файл 

@@ -0,0 +1,75 @@
 
+<template>
 
+  <div ref="chart" class="pie-chart-container"></div>
 
+</template>
 
+
 
+<script>
 
+import { echartMixin } from '@/mixins'
 
+export default {
 
+  name: 'PieChart',
 
+  mixins: [echartMixin],
 
+  data() {
 
+    return {
 
+      seriesData: [
 
+        { value: 10, name: '非采区采砂' },
 
+        { value: 10, name: '非采期采砂' },
 
+        { value: 10, name: '采砂超量' }
 
+      ]
 
+    }
 
+  },
 
+  methods: {
 
+    initChart() {
 
+      const option = {
 
+        backgroundColor: 'transparent',
 
+        color: ['#91ffab', '#90caff', '#f9dd71'],
 
+        graphic: {
 
+          elements: [
 
+            {
 
+              type: 'text',
 
+              left: '18%',
 
+              top: '35%',
 
+              style: {
 
+                text: `{a|3}{b|类}\n{c|预警类型}`,
 
+                fill: '#fff',
 
+                textAlign: 'center',
 
+                textVerticalAlign: 'middle',
 
+                rich: { a: { fontSize: this.pxToRem(28) }, b: { fontSize: this.pxToRem(12) }, c: { fontSize: this.pxToRem(14) } }
 
+              }
 
+            }
 
+          ]
 
+        },
 
+        legend: {
 
+          orient: 'vertical',
 
+          left: 'right',
 
+          top: 'bottom',
 
+          itemGap: 10,
 
+          textStyle: { color: '#fff', fontSize: this.pxToRem(14) },
 
+          formatter: (name) => {
 
+            const item = this.seriesData.find((d) => d.name === name)
 
+            return item ? `${name} ${item.value}` : name
 
+          }
 
+        },
 
+        series: [
 
+          {
 
+            name: '预警总数',
 
+            type: 'pie',
 
+            radius: ['70%', '95%'],
 
+            center: ['25%', '50%'],
 
+            avoidLabelOverlap: false,
 
+            label: { show: false },
 
+            labelLine: { show: true },
 
+            data: this.seriesData
 
+          }
 
+        ]
 
+      }
 
+      this.chartObj.setOption(option)
 
+    },
 
+    pxToRem(px) {
 
+      return `${px / 100}rem`
 
+    }
 
+  }
 
+}
 
+</script>
 
+<style lang="scss">
 
+.pie-chart-container {
 
+}
 
+</style>

+ 280 - 0
src/views/sand-monitor/right.vue
Просмотреть файл 

@@ -0,0 +1,280 @@
 
+<template>
 
+  <base-panel-right>
 
+    <div class="sand-monitor-right-container">
 
+      <base-header title="采砂地磅数据">
 
+        <div class="header-tool">
 
+          <el-select v-model="selectedVal1" size="mini">
 
+            <el-option label="全部" value=""></el-option>
 
+          </el-select>
 
+          <el-button type="text" size="mini" class="more-btn">更多</el-button>
 
+        </div>
 
+      </base-header>
 
+      <div class="card-item">
 
+        <ul class="table-list">
 
+          <li class="table-list-title">
 
+            <span>车牌号码</span>
 
+            <span>地磅数据</span>
 
+            <span>上报时间</span>
 
+          </li>
 
+          <li class="table-list-item" v-for="item in tableListData" :key="item.id">
 
+            <span>{{ item.carNum }}</span>
 
+            <span>{{ item.weight }}</span>
 
+            <span>{{ item.time }}</span>
 
+          </li>
 
+        </ul>
 
+      </div>
 
+      <base-header title="采砂过车数据">
 
+        <div class="header-tool">
 
+          <el-select v-model="selectedVal2" size="mini">
 
+            <el-option label="全部" value=""></el-option>
 
+          </el-select>
 
+          <el-button type="text" size="mini" class="more-btn">更多</el-button>
 
+        </div>
 
+      </base-header>
 
+      <div class="card-item">
 
+        <div class="info-container">
 
+          <div class="info-panel">
 
+            <img src="@/assets/image/sand-monitor/采砂车.png" />
 
+            <ul>
 
+              <li><span>采砂区</span> <span>1#采砂区</span></li>
 
+              <li><span>车型</span> <span>大型卡车</span></li>
 
+              <li><span>车牌号</span><span>陕A32658</span></li>
 
+              <li><span>载重</span><span>15吨</span></li>
 
+            </ul>
 
+          </div>
 
+          <div class="date-panel">
 
+            <div class="date-item">
 
+              <span>进场日期</span>
 
+              <span>2025-08-02 08:12:34</span>
 
+            </div>
 
+            <div class="date-item">
 
+              <span>出场日期</span>
 
+              <span>2025-08-20 15:34:45</span>
 
+            </div>
 
+          </div>
 
+          <div class="tool-panel">
 
+            <img class="tool-img" src="@/assets/image/sand-monitor/arrow-left.png" />
 
+            <img class="tool-img" src="@/assets/image/sand-monitor/arrow-right.png" />
 
+          </div>
 
+        </div>
 
+      </div>
 
+      <base-header title="采砂预警信息">
 
+        <div class="header-tool">
 
+          <el-select v-model="selectedVal3" size="mini">
 
+            <el-option label="全部" value=""></el-option>
 
+          </el-select>
 
+          <el-button type="text" size="mini" class="more-btn">更多</el-button>
 
+        </div>
 
+      </base-header>
 
+      <div class="card-item">
 
+        <div class="warning-container">
 
+          <div class="warning-list-tools">
 
+            <el-radio-group v-model="typeRadio" size="mini">
 
+              <el-radio-button label="禁采取采砂"></el-radio-button>
 
+              <el-radio-button label="超限预警"></el-radio-button>
 
+              <el-radio-button label="超量预警"></el-radio-button>
 
+            </el-radio-group>
 
+            <el-radio-group v-model="dateRadio" size="mini">
 
+              <el-radio-button label="日"></el-radio-button>
 
+              <el-radio-button label="周"></el-radio-button>
 
+              <el-radio-button label="月"></el-radio-button>
 
+            </el-radio-group>
 
+          </div>
 
+          <div class="warning-list">
 
+            <div class="warning-list-item">
 
+              <img src="@/assets/image/sand-monitor/采砂车2.png" />
 
+              <ul>
 
+                <li><span>预警信息</span> <span>3#采砂区非采砂</span></li>
 
+                <li><span>预警类型</span> <span>非采砂时间采砂</span></li>
 
+                <li><span>预警时间</span><span>01-15 14:00:00</span></li>
 
+              </ul>
 
+            </div>
 
+            <div class="warning-list-item">
 
+              <img src="@/assets/image/sand-monitor/采砂车2.png" />
 
+              <ul>
 
+                <li><span>预警信息</span> <span>3#采砂区非采砂</span></li>
 
+                <li><span>预警类型</span> <span>非采砂时间采砂</span></li>
 
+                <li><span>预警时间</span><span>01-15 14:00:00</span></li>
 
+              </ul>
 
+            </div>
 
+          </div>
 
+        </div>
 
+      </div>
 
+    </div>
 
+  </base-panel-right>
 
+</template>
 
+<script>
 
+import BasePanelRight from '@/components/base-panel/base-panel-right'
 
+import BaseHeader from '@/components/base-header/base-header'
 
+export default {
 
+  name: 'sandMonitorRight',
 
+  components: { BasePanelRight, BaseHeader },
 
+  data() {
 
+    return {
 
+      selectedVal1: '',
 
+      selectedVal2: '',
 
+      selectedVal3: '',
 
+      tableListData: [
 
+        { id: 1, carNum: '陕A32658', weight: '38.9T', time: '2025.08.04' },
 
+        { id: 2, carNum: '陕A32658', weight: '38.9T', time: '2025.08.04' },
 
+        { id: 3, carNum: '陕A32658', weight: '38.9T', time: '2025.08.04' },
 
+        { id: 4, carNum: '陕A32658', weight: '38.9T', time: '2025.08.04' },
 
+        { id: 5, carNum: '陕A32658', weight: '38.9T', time: '2025.08.04' }
 
+      ],
 
+      typeRadio: '禁采取采砂',
 
+      dateRadio: '日'
 
+    }
 
+  },
 
+
 
+  methods: {}
 
+}
 
+</script>
 
+<style scoped lang="scss">
 
+@import url('@/assets/scss/px-to-rem.scss');
 
+.sand-monitor-right-container {
 
+  position: relative;
 
+  height: 100%;
 
+  z-index: 1;
 
+  .header-tool {
 
+    display: flex;
 
+    position: absolute;
 
+    top: 0;
 
+    right: px-to-rem(10);
 
+    :deep(.el-input__inner) {
 
+      background: transparent;
 
+      border-color: #4f9fff;
 
+      width: px-to-rem(100);
 
+      color: #fff;
 
+    }
 
+    .more-btn {
 
+      font-size: px-to-rem(14);
 
+      margin-left: px-to-rem(10);
 
+    }
 
+  }
 
+  .card-item {
 
+    position: relative;
 
+    width: 3.68rem;
 
+    padding: px-to-rem(10);
 
+    margin-bottom: px-to-rem(10);
 
+    background: url('@/assets/image/common/areaBg.png') no-repeat 0 0 / 100% 100%;
 
+  }
 
+  .table-list {
 
+    &-title {
 
+      display: flex;
 
+      justify-content: space-between;
 
+      color: #f2f6ff;
 
+      font-size: px-to-rem(16);
 
+      padding: 0 px-to-rem(10);
 
+      height: px-to-rem(35);
 
+      line-height: px-to-rem(35);
 
+      background: #244e81;
 
+    }
 
+    &-item {
 
+      display: flex;
 
+      justify-content: space-between;
 
+      color: #fff;
 
+      font-size: px-to-rem(16);
 
+      padding: px-to-rem(4) px-to-rem(10);
 
+      margin-bottom: px-to-rem(1.8);
 
+      height: px-to-rem(35);
 
+      line-height: px-to-rem(35);
 
+      background: #153057;
 
+      box-sizing: border-box;
 
+    }
 
+  }
 
+  .info-container {
 
+    display: flex;
 
+    flex-direction: column;
 
+    .info-panel {
 
+      display: flex;
 
+      justify-content: space-between;
 
+      margin-bottom: px-to-rem(10);
 
+      img {
 
+        height: px-to-rem(115);
 
+      }
 
+      ul {
 
+        flex: 1;
 
+        li {
 
+          display: flex;
 
+          justify-content: space-around;
 
+          font-size: px-to-rem(14);
 
+          color: #c4c6c8;
 
+          line-height: px-to-rem(30);
 
+        }
 
+      }
 
+    }
 
+    .date-panel {
 
+      display: flex;
 
+      justify-content: space-around;
 
+      padding: px-to-rem(6) 0;
 
+      background: rgba(79, 159, 255, 0.2);
 
+      border-radius: 4px;
 
+      border: 1px solid #4f9fff;
 
+      color: #c4c6c8;
 
+      .date-item {
 
+        display: flex;
 
+        flex-direction: column;
 
+        span {
 
+          font-size: px-to-rem(14);
 
+          margin-bottom: px-to-rem(4);
 
+        }
 
+      }
 
+    }
 
+    .tool-panel {
 
+      display: flex;
 
+      justify-content: flex-end;
 
+      margin-top: px-to-rem(10);
 
+      .tool-img {
 
+        cursor: pointer;
 
+        height: px-to-rem(30);
 
+        margin-left: px-to-rem(6);
 
+      }
 
+    }
 
+  }
 
+  .warning-container {
 
+    display: flex;
 
+    flex-direction: column;
 
+    .warning-list-tools {
 
+      display: flex;
 
+      justify-content: space-between;
 
+      :deep(.el-radio-button__inner) {
 
+        background: transparent;
 
+        color: #4487d8;
 
+        border-color: #4487d8;
 
+        padding: px-to-rem(5);
 
+        font-size: px-to-rem(14);
 
+      }
 
+      :deep(.el-radio-button__orig-radio:checked + .el-radio-button__inner) {
 
+        background-color: #409eff;
 
+        color: #fff;
 
+      }
 
+    }
 
+    .warning-list {
 
+      display: flex;
 
+      flex-direction: column;
 
+      .warning-list-item {
 
+        display: flex;
 
+        justify-content: space-between;
 
+        background: rgba(79, 159, 255, 0.2);
 
+        border-radius: 4px;
 
+        border: 1px solid #4f9fff;
 
+        margin-top: px-to-rem(10);
 
+        padding: px-to-rem(6);
 
+        img {
 
+          height: px-to-rem(85);
 
+        }
 
+        ul {
 
+          flex: 1;
 
+          li {
 
+            display: flex;
 
+            justify-content: space-around;
 
+            font-size: px-to-rem(14);
 
+            color: #fff;
 
+            line-height: px-to-rem(30);
 
+          }
 
+        }
 
+      }
 
+    }
 
+  }
 
+}
 
+</style>