Merge branch 'master' of http://git.zthymaoyi.com/gdc/yiliangyiyun-pc

src/main.js

@@ -1,6 +1,12 @@
 import Vue from 'vue'
 import App from './App'
 import './event-bus' // load events
+// 将自动注册所有组件为全局组件
+import dataV from '@jiaminghi/data-view'
+Vue.use(dataV)
+import ElementUI from 'element-ui';
+import 'element-ui/lib/theme-chalk/index.css';
+Vue.use(ElementUI);
 
 import './global/index'
 import notification from './notification'
@@ -20,6 +26,9 @@ Vue.config.productionTip = false
 import imgPreview from '@/components/imgPreview'
 Vue.use(imgPreview)
 import echarts from 'echarts';
+import geoJson from '@/styles/china.json'
+echarts.registerMap('china', geoJson);
+
 Vue.prototype.$echarts = echarts;
 // import Warehouse from './common.js'
 import Warehouse from './common.js'

src/views/home/drawMixin.js

@@ -0,0 +1,69 @@
+// 屏幕适配 mixin 函数
+
+// * 默认缩放值
+const scale = {
+    width: '1',
+    height: '1',
+  }
+  
+  // * 设计稿尺寸（px）
+  const baseWidth = 1920
+  const baseHeight = 1080
+  
+  // * 需保持的比例（默认1.77778）
+  const baseProportion = parseFloat((baseWidth / baseHeight).toFixed(5))
+  
+  export default {
+    data() {
+      return {
+        // * 定时函数
+        drawTiming: null
+      }
+    },
+    mounted () {
+      //进入触发
+      this.calcRate()
+      window.addEventListener('resize', this.resize)
+    },
+    beforeDestroy () {
+      window.removeEventListener('resize', this.resize)
+    },
+    methods: {
+      calcRate () {
+        //拿到整个页面元素
+        const appRef = this.$refs['appRef']
+        //如果没有值就结束
+        if (!appRef) return 
+        // 当前宽高比
+        const currentRate = parseFloat((window.innerWidth / window.innerHeight).toFixed(5))
+        //判断：如果有值代表页面变化了
+        if (appRef) {
+          //判断当前宽高比例是否大于默认比例
+          if (currentRate > baseProportion) {
+            // 如果大于代表更宽了，就是放大了
+            //那么把默认缩放的宽高改为：同比例放大
+            scale.width = ((window.innerHeight * baseProportion) / baseWidth).toFixed(5)
+            scale.height = (window.innerHeight / baseHeight).toFixed(5)
+            console.log(scale.width,scale.height,'放大');
+            //整个页面的元素样式，缩放宽高用当前同比例放大的宽高
+            appRef.style.transform = `scale(${scale.width}, ${scale.height}) translate(-50%, -50%)`
+          } else {
+            // 如果不大于默认比例代表缩小了。
+            //那么把默认缩放的宽高改为：同比例缩小
+            scale.height = ((window.innerWidth / baseProportion) / baseHeight).toFixed(5)
+            scale.width = (window.innerWidth / baseWidth).toFixed(5)
+            console.log(scale.width,scale.height,'缩小');
+            //整个页面的元素样式，缩放宽高用当前同比例放大的宽高
+            appRef.style.transform = `scale(${scale.width}, ${scale.height}) translate(-50%, -50%)`
+          }
+        }
+      },
+      resize () {
+        clearTimeout(this.drawTiming)
+        this.drawTiming = setTimeout(() => {
+          this.calcRate()
+        }, 200)
+      }
+    },
+  }
+  

src/views/home/index.js

@@ -0,0 +1,55 @@
+/**
+ * @param {Function} fn 防抖函数
+ * @param {Number} delay 延迟时间
+ */
+ export function debounce(fn, delay) {
+    var timer;
+    return function () {
+      var context = this;
+      var args = arguments;
+      clearTimeout(timer);
+      timer = setTimeout(function () {
+        fn.apply(context, args);
+      }, delay);
+    };
+  }
+  
+  /**
+   * @param {date} time 需要转换的时间
+   * @param {String} fmt 需要转换的格式 如 yyyy-MM-dd、yyyy-MM-dd HH:mm:ss
+   */
+  export function formatTime(time, fmt) {
+    if (!time) return '';//没传时间返回空
+    else {
+      const date = new Date(time);
+      const o = {
+        'M+': date.getMonth() + 1,//月
+        'd+': date.getDate(),//日
+        'H+': date.getHours(),//时
+        'm+': date.getMinutes(),//分
+        's+': date.getSeconds(),//秒
+        'q+': Math.floor((date.getMonth() + 3) / 3),//月+3/3
+        S: date.getMilliseconds(),//返回时间的毫秒
+      };
+      if (/(y+)/.test(fmt))//匹配1个到多个y
+      //这一步把年转换完毕
+      fmt = fmt.replace(
+        RegExp.$1,//拿到y+匹配到的第一个分组
+        (date.getFullYear() + '').substr(4 - RegExp.$1.length)
+        );
+        //这一步把生下的格式继续匹配转换
+      for (const k in o) {
+        if (new RegExp('(' + k + ')').test(fmt)) {
+          fmt = fmt.replace(
+            RegExp.$1,
+            RegExp.$1.length === 1
+              ? o[k]
+              : ('00' + o[k]).substr(('' + o[k]).length)
+          );
+        }
+      }
+      return fmt;
+    }
+  }
+  
+  

src/views/home/index.vue

@@ -1,2069 +1,1293 @@
 <!-- 首页模块 首页面 -->
 <template>
-  <div class="home" id='contentView'>
-    <div class="body-middle" :class="{ 'body-middle-height': blockList[0].flag }">
-      <div class="body-middle-left">
-        <!-- 任务、消息、提醒、超期 -->
-        <!-- <Panel :data-list="panelList" @click="gotoNewRw"></Panel> -->
-        <el-switch v-model="isShow" @change="changeSwitch"></el-switch>
-        <div class="header">
-          <div class="left">
-            <img src="../../../public/img/8b2c7255e9b19c71d68b33a08f20f74.png" alt="">
-
-          </div>
-          <div class="right">
-            <div class="top">
-              {{ nowDate }}
-            </div>
-            <div class="bottom">
-              {{ nowTime }}
-            </div>
-          </div>
-        </div>
-        <div v-show="false">
-          <el-input v-model="param" />
-          <el-button @click="openPort()">openPort</el-button>
-          <el-button @click="closePort()">closePort</el-button>
-          <div>{{text}}</div>
-        </div>
-        <div class="content2">
-          <el-row class="content2-aside">
-            <h3 class="title" @click="contract(0)">采购合同完成进度</h3>
-            <el-col :span="12" class="chart-card">
-              <div style="font-weight: bold;" class="">
-                <div ref="myEchart1" style="height: 288px;" class="roseChart"></div>
-                <div class="bottom-tip">统计单位：吨</div>
-              </div>
-            </el-col>
-            <el-col :span="12" class="chart-card">
-              <div style="font-weight: bold;">
-                <div ref="myEchart2" style="height: 288px;" class="roseChart"></div>
-                <div class="bottom-tip">统计单位：万</div>
-              </div>
-            </el-col>
-            <el-col :span="12" class="chart-card">
-              <div style="font-weight: bold;">
-                <div ref="myEchart3" style="height: 288px;" class="roseChart"></div>
-                <div class="bottom-tip">统计单位：万</div>
-              </div>
-            </el-col>
+  <div id="index" ref="appRef">
+     <!-- <dv-loading v-show="loading">Loading...</dv-loading> -->
+     <div class="host-body">
+        <div>
+          <!-- 顶部title部分 -->
+          <el-row>
+            <el-col :span="6"
+              ><dv-decoration-8
+                class="title_right"
+                :color="['#008CFF', '#00ADDD']"
+            /></el-col>
+            <el-col :span="12"
+              ><div class="title_text">数 据 可 视 化 系 统</div>
+              <dv-decoration-5
+                class="title_center"
+                :color="['#008CFF', '#00ADDD']"
+            /></el-col>
+            <el-col :span="6"
+              ><div class="title_time">{{ dateYear + dateWeek + dateDay }}</div>
+              <dv-decoration-8
+                :reverse="true"
+                class="title_left"
+                :color="['#008CFF', '#00ADDD']"
+            /></el-col>
           </el-row>
-          <div class="content2-middle">
-            <el-row class="left">
-              <el-col :span="12">
-                <h3>在途信息统计</h3>
-                <div class="left-card">
-                  <div class="item">
-                    <p>在途车辆</p>
-                    <p><span class="number">{{carCount1}}</span><span class="number-text">台</span></p>
-                  </div>
-                  <div class="item">
-                    <p>装货车辆</p>
-                    <p><span class="number" style="color:#ffa523">{{carCount2}}</span><span class="number-text">台</span>
+          <!-- 主体部分 -->
+          <el-row>
+            <!-- 第一列 -->
+            <el-col :span="6">
+              <!-- 饼图部分 -->
+              <div class="left_box1">
+                <dv-border-box-12>
+                  <div id="Rose_diagram"></div>
+                  <dv-active-ring-chart
+                    :config="config"
+                    class="left_box1_rose_right"
+                  />
+                  <div
+                    class="rose_text"
+                    v-for="(item, index) in numberData"
+                    :key="index"
+                  >
+                    <p>
+                      <span class="coin">￥</span>
+                      <span class="rose_text_nmb">{{
+                        item.number.number
+                      }}</span>
                     </p>
-                  </div>
-                  <div class="item">
-                    <p>卸货车辆</p>
-                    <p><span class="number" style="color:#2483ff">{{carCount3}}</span><span class="number-text">台</span>
+                    <p>
+                      <span>{{ item.text }}</span>
+                      <span class="colorYellow">(件)</span>
                     </p>
                   </div>
-                </div>
-              </el-col>
-              <el-col :span="12">
-                <h3>粮食总储量</h3>
-                <div ref="myEchart7" style="height: 208px;" @click="contract(3)"></div>
-              </el-col>
-            </el-row>
-            <el-row>
-              <h3 class="content2-map">库点流向分布</h3>
-              <div class="center-map" style="border: 2px solid #6a5f5f">
-                <map-drag :listData=' mapInfo'></map-drag>
-              </div>
-            </el-row>
-            <el-row>
-              <div style="display: flex;">
-                  <h3>头寸</h3>
-                   <h3 style="margin-left: 30px;">{{isShow?'***':position}}吨</h3>
+                </dv-border-box-12>
               </div>
-              <div class="content3">
-                <div class="left">
-                  <!-- <img src="../../../public/img/1637204557176-s4AMbBA8.png" alt=""> -->
-                  <span>实际库存</span>
-                  <span class="content3-number blue">{{isShow?'***':physicalInventory}}</span>
-                  <span style="margin-top: 10px;">吨</span>
-                </div>
-                <div class="left">
-                  <!-- <img src="../../../public/img/1637204557176-s4AMbBA8.png" alt=""> -->
-                  <span>采购待执行（吨）</span>
-                  <span class="content3-number blue">{{isShow?'***':procurementPending}}</span>
-                  <span style="margin-top: 10px;">吨</span>
-                </div>
-                <div class="right">
-                  <!-- <img src="../../../public/img/1637204768818-70JRjz0H.png" alt=""> -->
-                  <span>销售待执行（吨）</span>
-                  <span class="content3-number yellow">{{isShow?'***':salesPending}}</span>
-                  <span style="margin-top: 10px;">吨</span>
-                </div>
+              <!-- 柱状图部分 -->
+              <div class="left_box2">
+                <dv-border-box-12 style="padding-top: 10px">
+                  <p style="margin-left: 15px">数据统计图</p>
+                  <div id="columnar"></div>
+                </dv-border-box-12>
               </div>
-            </el-row>
-          </div>
-          <el-row class="content2-aside">
-            <h3 class="left-title">销售合同完成进度</h3>
-            <el-col :span="12" class="chart-card">
-              <div style="font-weight: bold;">
-                <div ref="myEchart4" style="height: 288px;" class="roseChart" @click="contract(1)"></div>
-                <div class="bottom-tip">统计单位：吨</div>
+              <!-- 轮播表格部分 -->
+              <div class="left_box3">
+                <dv-border-box-12 style="padding-top: 10px">
+                  <dv-scroll-board
+                    :config="board_info"
+                    class="carousel_list"
+                    oddRowBGC="#fff"
+                  />
+                </dv-border-box-12>
               </div>
             </el-col>
-            <el-col :span="12" class="chart-card">
-              <div style="font-weight: bold;">
-                <div ref="myEchart5" style="height: 288px;" class="roseChart" @click="contract(1)"></div>
-                <div class="bottom-tip">统计单位：万</div>
+            <!-- 第二列 -->
+            <el-col :span="12">
+              <!-- 中国地图 -->
+              <div id="china-map"></div>
+              <!-- 折线图 -->
+              <div class="line_center">
+                <dv-border-box-8>
+                  <div id="line_center_diagram"></div>
+                </dv-border-box-8>
               </div>
             </el-col>
-            <el-col :span="12" class="chart-card">
-              <div style="font-weight: bold;">
-                <div ref="myEchart6" style="height: 288px;" class="roseChart" @click="contract(1)"></div>
-                <div class="bottom-tip">统计单位：万</div>
+            <!-- 第三列 -->
+            <el-col :span="6">
+              <!-- 轮播排行榜部分 -->
+              <div class="right_box1">
+                <dv-border-box-12>
+                  <dv-decoration-7 style="width: 100%; height: 30px"
+                    >销 售 排 行 榜</dv-decoration-7
+                  >
+                  <dv-scroll-ranking-board
+                    :config="config"
+                    style="width: 95%; height: 87%; margin-left: 2%"
+                  />
+                </dv-border-box-12>
+              </div>
+              <!-- 虚线柱状图部分 -->
+              <div class="right_box2">
+                <dv-border-box-12 :reverse="true">
+                  <div id="dotter_bar"></div>
+                </dv-border-box-12>
+              </div>
+              <!-- 部分 -->
+              <div class="right_box3">
+                <dv-border-box-12 :reverse="true">
+                  <dv-conical-column-chart :config="cone" class="cone_box" />
+                </dv-border-box-12>
               </div>
             </el-col>
           </el-row>
         </div>
-        <!-- <el-dialog :append-to-body="true" :show-close='false' :visible.sync="dialogVisible" width="30%"
-          :before-close="handleClose">
-          <span>这是一段信息</span>
-          <span slot="footer" class="dialog-footer">
-            <el-button @click="dialogVisible = false">取 消</el-button>
-            <el-button type="primary" @click="dialogVisible = false">确 定</el-button>
-          </span>
-        </el-dialog> -->
-        <!-- <img style='width:100%;margin-top:10px;' src="../../../public/img/tmt.gif" alt=""> -->
       </div>
-    </div>
-    <div id="mapXY"></div>
-    <!-- </ws-dialog> -->
-    <!-- 第一次登陆的租户 -->
-    <successfulDialog v-if="successfulDialog" :phone="phone" :successfulDialog="successfulDialog"
-      @close="successfulDialogClose">
-    </successfulDialog>
-    <!-- 试用租户 -->
-    <trialNotExpired v-if="trialNotExpired" :day="day" :phone="phone" :trialNotExpired="trialNotExpired"
-      @close="trialNotExpiredClose">
-    </trialNotExpired>
   </div>
 </template>
 
 <script>
-  // import serialport from 'serialport'
-  // 统计图start
-  import maintenance from './components/maintenance'
-  import shipCertificate from './components/shipCertificate'
-  import sparePartsMaterial from './components/sparePartsMaterial'
-  import procurement from './components/procurement'
-
-  import mapDrag from '@/components/mapdrag/indexMap'
-  // 统计图end
-  // 正式租户
-  import successfulDialog from './components/successfulDialog'
-  // 试用租户
-  import trialNotExpired from './components/trialNotExpired'
-  // 新 api
-  import {
-    noticeNumber,
-    queryCircularManagementReceiveList,
-    getStaffHomeShowList,
-    gChartsData,
-    getAdminId
-  } from '@/model/home/index'
-  import {
-    getUserVesselList,
-    findHottestRouting
-  } from '@/model/indexRx'
-  import News from './components/News'
-  import ShipMap from './components/ShipMap'
-  import {
-    getCnCity,
-    getCnWea
-  } from './city'
-  import {
-    getLanguage
-  } from '@/lang'
-  import Panel from './components/Panel'
-  import {
-    getChangeLoginFlag
-  } from '@/model/indexRx'
-  import {
-    zipDown
-  } from '@/utils/batchDown'
-  import {
-    EventBus
-  } from 'base-core-lib'
-  import {
-    mapActions,
-    mapGetters,
-    mapState
-  } from 'vuex';
-  import axios from 'axios'
+ 
+import drawMixin from './drawMixin'; //自适应缩放
+import { formatTime } from './index.js'; //日期格式转换
+import * as echarts from 'echarts';
   export default {
-    name: 'index',
+    mixins: [drawMixin],
     components: {
-      mapDrag,
-      axios,
-      News,
-      ShipMap,
-      Panel,
-      successfulDialog,
-      trialNotExpired,
-      //统计图start
-      maintenance,
-      shipCertificate,
-      sparePartsMaterial,
-      procurement
-      //统计图end
     },
 
     data() {
       return {
-        isShow:false,
-        physicalInventory :0,
-        procurementPending:0,
-        salesPending:0,
-        position:0,
-        mapInfo: [],
-        totalReserves: '',
-        carCount1: '',
-        carCount2: '',
-        carCount3: '',
-        chartsData: [],
-        nowDate: null, //存放年月日变量
-        nowTime: null, //存放时分秒变量
-        timer: '', //定义一个定时器的变量
-        currentTime: new Date(), // 获取当前时间
-        timer1: '',
-        dialogVisible: false,
-        showEchart: false,
-        phone: '', // 正式租户电话号码
-        day: '', //试用租户剩余天数
-        trialNotExpired: false, //试用租户 剩余天数
-        successfulDialog: false, //第一次登陆的弹窗
-        mapXY: undefined,
-        shipService: undefined,
-        blockList: [{
-            name: this.$t('home.shortcutEntrance'),
-            flag: true
+        //定时器
+      timing: null,
+      //loading图
+      loading: true,
+      //时分秒
+      dateDay: null,
+      //年月日
+      dateYear: null,
+      //周几
+      dateWeek: null,
+      //周几
+      weekday: ['周日', '周一', '周二', '周三', '周四', '周五', '周六'],
+      //轮播排行榜
+      config: {
+        data: [
+          {
+            name: '周口',
+            value: 55,
           },
           {
-            name: this.$t('home.shipMap'),
-            flag: true
-          }
-        ],
-        newList: [],
-        noticeList: [],
-        routeList: [],
-        showBlockList: [],
-        shipList: [],
-        setFlag: false,
-
-        todoCount: '-',
-        msgCount: '-',
-        weather: undefined,
-        ships: [],
-        selectShip: undefined,
-        isFullScreen: false,
-        number: {
-          task: 0,
-          remind: 0,
-          overdue: 0,
-          news: 0
-        },
-        vesselBankFlag: localStorage.getItem('ws-pf_vesselBankFlag'),
-        shezhiVal: '',
-        text: '数据',
-        reader: null,
-        param: 9600
-      }
-    },
-    computed: {
-      ...mapState({
-        showVesslBankFlag: state => state.commonStore.showVesslBankFlag
-      }),
-      ...mapGetters(['userSetting']),
-      /** 计算属性计算属性节点 */
-      panelList() {
-        return [{
-            type: '0',
-            task: this.$t('homeIndex.task'),
-            url: require('@/assets/newhome/rw01.png'),
-            number: this.number.task,
-            background: require('@/assets/newhome/rw.png'),
-            remark: '任务'
+            name: '南阳',
+            value: 120,
+          },
+          {
+            name: '西峡',
+            value: 78,
+          },
+          {
+            name: '驻马店',
+            value: 66,
           },
           {
-            type: 'message',
-            task: this.$t('homeIndex.message'),
-            url: require('@/assets/newhome/xx01.png'),
-            number: this.number.news,
-            background: require('@/assets/newhome/xx.png'),
-            remark: '消息'
+            name: '新乡',
+            value: 80,
           },
           {
-            type: '1',
-            task: this.$t('homeIndex.remind'),
-            url: require('@/assets/newhome/tx01.png'),
-            number: this.number.remind,
-            background: require('@/assets/newhome/tx.png'),
-            remark: '提醒'
+            name: '信阳',
+            value: 45,
           },
           {
-            type: '2',
-            task: this.$t('homeIndex.beyond'),
-            url: require('@/assets/newhome/cq01.png'),
-            number: this.number.overdue,
-            background: require('@/assets/newhome/cq.png'),
-            remark: '超期'
-          }
-        ]
+            name: '漯河',
+            value: 29,
+          },
+        ],
       },
-      optionSingleHeightTime() {
-        return {
-          openWatch: true,
-          limitMoveNum: -1, //启动无缝滚动最小数据量 this.dataList.length
-          direction: 2,
-          switchDelay: 1000
-        }
+      //左侧饼图文字
+      numberData: [
+        {
+          number: {
+            number: 15,
+          },
+          text: '今日构建总量',
+        },
+        {
+          number: {
+            number: 1144,
+          },
+          text: '总共完成数量',
+        },
+        {
+          number: {
+            number: 361,
+          },
+          text: '正在编译数量',
+        },
+      ],
+      //左侧轮播表格配置项
+      board_info: {
+        header: ['人员', '月产量', '月合格率'],
+        data: [
+          ['张三', '10830', '90%'],
+          ['张四', '13500', '92%'],
+          ['张五', '10350', '97%'],
+          ['张六', '13300', '94%'],
+          ['张七', '12500', '95%'],
+          ['张八', '11500', '96%'],
+          ['张九', '12500', '89%'],
+          ['王六', '10360', '95%'],
+          ['王二', '10567', '91%'],
+          ['李四', '15721', '99%'],
+        ],
+        evenRowBGC: '#020308',
+        oddRowBGC: '#382B47',
+        headerBGC: '#020308',
       },
-      getLanguage() {
-        return this.$store.getters.language
+      // 定义颜色
+      colorList: {
+        linearYtoG: {
+          type: 'linear',
+          x: 0,
+          y: 0,
+          x2: 1,
+          y2: 1,
+          colorStops: [
+            {
+              offset: 0,
+              color: '#f5b44d',
+            },
+            {
+              offset: 1,
+              color: '#28f8de',
+            },
+          ],
+        },
+        linearGtoB: {
+          type: 'linear',
+          x: 0,
+          y: 0,
+          x2: 1,
+          y2: 0,
+          colorStops: [
+            {
+              offset: 0,
+              color: '#43dfa2',
+            },
+            {
+              offset: 1,
+              color: '#28f8de',
+            },
+          ],
+        },
+        linearBtoG: {
+          type: 'linear',
+          x: 0,
+          y: 0,
+          x2: 1,
+          y2: 0,
+          colorStops: [
+            {
+              offset: 0,
+              color: '#1c98e8',
+            },
+            {
+              offset: 1,
+              color: '#28f8de',
+            },
+          ],
+        },
+        areaBtoG: {
+          type: 'linear',
+          x: 0,
+          y: 0,
+          x2: 0,
+          y2: 1,
+          colorStops: [
+            {
+              offset: 0,
+              color: 'rgba(35,184,210,.2)',
+            },
+            {
+              offset: 1,
+              color: 'rgba(35,184,210,0)',
+            },
+          ],
+        },
       },
-      isShowShipList() {
-        return this.userSetting['shipMap'][0].showFlag && this.vesselBankFlag !== 'V' && this.permissionIf(
-          'map.mapManagement.view')
+      //锥形柱状图
+      cone: {
+        data: [
+          {
+            name: '周口',
+            value: 55,
+          },
+          {
+            name: '南阳',
+            value: 120,
+          },
+          {
+            name: '西峡',
+            value: 71,
+          },
+          {
+            name: '驻马店',
+            value: 66,
+          },
+          {
+            name: '新乡',
+            value: 80,
+          },
+          {
+            name: '信阳',
+            value: 35,
+          },
+          {
+            name: '漯河',
+            value: 15,
+          },
+        ],
+        showValue: true,
       },
-
+      }
     },
-    activated() {
-      // var staffId=JSON.parse(localStorage.getItem('winseaview-userInfo')).content.staffId
-      //      if ('WebSocket' in window) {
-      //             if (process.env.NODE_ENV === 'production') {
-      //               this.websocket = new WebSocket('wss://www.zthymaoyi.com/wss/websocket/'+staffId )
-      //             }
-      //             else {
-      //               //  this.websocket = new WebSocket('ws://192.168.1.115:8090/commonUser/api/onOpen?adminId=84f62127b7384dcdbaeaddfe460329fc' )
-      //               this.websocket = new WebSocket('ws://192.168.1.115:8080/websocket/'+staffId )
-      //             }
-      //             this.initWebSocket()
-      //           } else {
-      //             alert('当前浏览器不支持websocket')
-      //           }
+    
+  mounted() {
+    //获取实时时间
+    this.timeFn();
+    //加载loading图
+    this.cancelLoading();
+    //中国地图
+    this.china_map();
+    //左侧玫瑰饼图
+    this.Rose_diagram();
+    //左侧柱状图
+    this.columnar();
+    //中间折线图
+    this.line_center_diagram();
+    //虚线柱状图
+    this.dotter_bar();
+  },
+  beforeDestroy() {
+    //离开时删除计时器
+    clearInterval(this.timing);
+  },
+  methods: {
+    //右上角当前日期时间显示：每一秒更新一次最新时间
+    timeFn() {
+      this.timing = setInterval(() => {
+        //获取当前时分秒
+        this.dateDay = formatTime(new Date(), 'HH: mm: ss');
+        //获取当前年月日
+        this.dateYear = formatTime(new Date(), 'yyyy-MM-dd');
+        //获取当前周几
+        this.dateWeek = this.weekday[new Date().getDay()];
+      }, 1000);
     },
-    async created() {
-      //获取快捷路口列表
-      this.getRouteList()
-      // this.checkUserInfoDialog()
-      // {
-      this.timer = setInterval(this.getTime, 1000);
-      this.timer1 = setInterval(this.flushData, 120000);
-      // }
+    //loading图
+    cancelLoading() {
+      setTimeout(() => {
+        this.loading = false;
+      }, 500);
     },
-    beforeDestroy() {
-      clearInterval(this.timer);
-      if (this.timer) {
-        clearInterval(this.timer); // 在Vue实例销毁前，清除定时器
-      }
-      clearInterval(this.timer1);
-      if (this.timer1) {
-        clearInterval(this.timer1); // 在Vue实例销毁前，清除定时器
+    //中国地图
+    china_map() {
+      let mapChart = this.$echarts.init(document.getElementById('china-map')); //图表初始化，china-map是绑定的元素
+      window.onresize = mapChart.resize; //如果容器变大小，自适应从新构图
+      let series = []; //存放循环配置项
+      let res = []; //存放射线的起始点和结束点位置
+      let province = []; //存放有射线的省的名字，以此来拿到对应省份的坐标
+      //提前存好的所有省份坐标，用于后面根据名字拿到对应的左边
+      let chinaGeoCoordMap = {
+        新疆: [86.9023, 41.148],
+        西藏: [87.8695, 31.6846],
+        内蒙古: [110.5977, 41.3408],
+        青海: [95.2402, 35.4199],
+        四川: [102.9199, 30.1904],
+        黑龙江: [128.1445, 46.7156],
+        甘肃: [102.7129, 38.166],
+        云南: [101.0652, 24.6807],
+        广西: [108.7813, 23.6426],
+        湖南: [111.5332, 27.3779],
+        陕西: [108.5996, 33.7396],
+        广东: [113.8668, 22.8076],
+        吉林: [126.1746, 43.5938],
+        河北: [115.4004, 38.1688],
+        湖北: [112.2363, 30.8572],
+        贵州: [106.6113, 26.6385],
+        山东: [118.2402, 36.2307],
+        江西: [115.7156, 27.99],
+        河南: [113.0668, 33.8818],
+        辽宁: [123.0438, 41.0889],
+        山西: [112.4121, 36.6611],
+        安徽: [117.2461, 31.0361],
+        福建: [118.3008, 25.9277],
+        浙江: [120.498, 29.0918],
+        江苏: [119.8586, 32.915],
+        重庆: [107.7539, 29.8904],
+        宁夏: [105.9961, 37.1096],
+        海南: [109.9512, 19.2041],
+        台湾: [120.8254, 23.5986],
+        北京: [116.4551, 40.2539],
+        天津: [117.4219, 39.4189],
+        上海: [121.4648, 31.2891],
+        香港: [114.6178, 22.3242],
+        澳门: [113.5547, 21.6484],
+      };
+      //后台给的数据模拟
+      let lineData = [
+        {
+          val: 32, //数据
+          blat: [86.9023, 41.148], //发射点
+          elon: [87.8695, 31.6846], //接收点
+          bcitysim: '新疆', //发射省的名字
+          ecitysim: '西藏', //接收省的名字
+        },
+        {
+          val: 31,
+          blat: [87.8695, 31.6846],
+          elon: [95.2402, 35.4199],
+          bcitysim: '西藏',
+          ecitysim: '青海',
+        },
+        {
+          val: 33,
+          blat: [86.9023, 41.148],
+          elon: [95.2402, 35.4199],
+          bcitysim: '新疆',
+          ecitysim: '青海',
+        },
+        {
+          val: 33,
+          blat: [116.4551, 40.2539],
+          elon: [119.8586, 32.915],
+          bcitysim: '北京',
+          ecitysim: '江苏',
+        },
+        {
+          val: 33,
+          blat: [120.8254, 23.5986],
+          elon: [109.9512, 19.2041],
+          bcitysim: '台湾',
+          ecitysim: '海南',
+        },
+        {
+          val: 33,
+          blat: [120.498, 29.0918],
+          elon: [115.7156, 27.99],
+          bcitysim: '浙江',
+          ecitysim: '江西',
+        },
+        {
+          val: 33,
+          blat: [117.2461, 31.0361],
+          elon: [119.8586, 32.915],
+          bcitysim: '安徽',
+          ecitysim: '江苏',
+        },
+        {
+          val: 33,
+          blat: [117.2461, 31.0361],
+          elon: [105.9961, 37.1096],
+          bcitysim: '安徽',
+          ecitysim: '宁夏',
+        },
+        {
+          val: 33,
+          blat: [117.2461, 31.0361],
+          elon: [107.7539, 29.8904],
+          bcitysim: '安徽',
+          ecitysim: '重庆',
+        },
+        {
+          val: 33,
+          blat: [117.2461, 31.0361],
+          elon: [123.0438, 41.0889],
+          bcitysim: '安徽',
+          ecitysim: '辽宁',
+        },
+        {
+          val: 33,
+          blat: [119.8586, 32.915],
+          elon: [102.7129, 38.166],
+          bcitysim: '江苏',
+          ecitysim: '甘肃',
+        },
+        {
+          val: 33,
+          blat: [119.8586, 32.915],
+          elon: [128.1445, 46.7156],
+          bcitysim: '江苏',
+          ecitysim: '黑龙江',
+        },
+        {
+          val: 33,
+          blat: [119.8586, 32.915],
+          elon: [110.5977, 41.3408],
+          bcitysim: '江苏',
+          ecitysim: '内蒙古',
+        },
+        {
+          val: 33,
+          blat: [119.8586, 32.915],
+          elon: [101.0652, 24.6807],
+          bcitysim: '江苏',
+          ecitysim: '云南',
+        },
+        {
+          val: 33,
+          blat: [119.8586, 32.915],
+          elon: [86.9023, 41.148],
+          bcitysim: '江苏',
+          ecitysim: '新疆',
+        },
+        {
+          val: 33,
+          blat: [86.9023, 41.148],
+          elon: [110.5977, 41.3408],
+          bcitysim: '新疆',
+          ecitysim: '内蒙古',
+        },
+        {
+          val: 33,
+          blat: [86.9023, 41.148],
+          elon: [102.9199, 30.1904],
+          bcitysim: '新疆',
+          ecitysim: '四川',
+        },
+      ];
+      //循环拿到处理好的数据
+      for (var i = 0; i < lineData.length; i++) {
+        province.push(lineData[i].bcitysim); //存进去每个省的名字
+        province.push(lineData[i].ecitysim); //存进去每个省的名字
+        res.push({
+          fromName: lineData[i].bcitysim, //发射的省名，保存用于弹框显示
+          toName: lineData[i].ecitysim, //接收的省名，保存用于弹框显示
+          coords: [
+            lineData[i].blat, //发射
+            lineData[i].elon, //接收
+          ],
+          count: lineData[i].val, //数据
+        });
       }
-    },
-    async mounted() {
-      var staffId = JSON.parse(localStorage.getItem('winseaview-userInfo')).content.staffId
-      // getAdminId().toPromise().then(response => {console.log(11111)})
-      this.loading = false
-      // WebSocket
-      // this.$store.dispatch('setAdminId', response.data.data)
-      if ('WebSocket' in window) {
-        if (process.env.NODE_ENV === 'production') {
-          this.websocket = new WebSocket('wss://www.zthymaoyi.com/wss/websocket/' + staffId)
-        } else {
-          //  this.websocket = new WebSocket('ws://192.168.1.115:8090/commonUser/api/onOpen?adminId=84f62127b7384dcdbaeaddfe460329fc' )
-          this.websocket = new WebSocket('ws://192.168.1.119:9100/websocket/' + staffId)
+      let index_data = new Set(province); //把省的名字去重
+      let data_res = []; //定义一个新的变量存放省的坐标
+
+      //注意这里一定要用name和value的形式。不是这个格式的散点图显示不出来
+      index_data.forEach((item) => {
+        data_res.push({
+          name: item, //每个省的名字
+          value: chinaGeoCoordMap[item], //每个省的坐标
+        });
+      });
+      //循环往series内添加配置项
+      series.push(
+        {
+          //射线效果图层
+          type: 'lines', //类型：射线
+          zlevel: 1, //类似图层效果
+          effect: {
+            show: true, //是否显示图标
+            symbol: 'arrow', //箭头图标
+            symbolSize: 5, //图标大小
+            trailLength: 0.02, //特效尾迹长度[0,1]值越大，尾迹越长重
+          },
+          label: {
+            show: true,
+          },
+          lineStyle: {
+            color: '#fff',
+            normal: {
+              color: '#00A0FF',
+              width: 1, //尾迹线条宽度
+              opacity: 0.5, //尾迹线条透明度
+              curveness: 0.1, //尾迹线条曲直度
+            },
+          },
+          //提示框信息
+          tooltip: {
+            formatter: function (param) {
+              return (
+                param.data.fromName +
+                '>' +
+                param.data.toName +
+                '<br>数量：' +
+                param.data.count
+              );
+            },
+          },
+          data: res, //拿到射线的起始点和结束点
+        },
+        //散点图
+        // {
+        //   type: "effectScatter",//散点图
+        //   coordinateSystem: "geo",//这个不能删，删了不显示
+        //   zlevel: 1,
+        //   rippleEffect: {
+        //     //涟漪特效
+        //     period: 4, //动画时间，值越小速度越快
+        //     brushType: "stroke", //波纹绘制方式 stroke, fill
+        //     scale: 4, //波纹圆环最大限制，值越大波纹越大
+        //   },
+        //   //设置文字部分
+        //   label: {
+        //     normal: {
+        //       show: true, //省份名显示隐藏
+        //       position: "right", //省份名显示位置
+        //       offset: [5, 0], //省份名偏移设置
+        //       formatter: function (params) {
+        //         //圆环显示省份名
+        //         return params.name;  //这个名字是根据data中的name来显示的
+        //       },
+        //       fontSize: 12,//文字大小
+        //     },
+        //     emphasis: {
+        //       show: true,
+        //     },
+        //   },
+        //   symbol: "circle",//散点图
+        //   symbolSize: 5,//散点大小
+        //   itemStyle: {//散点样式
+        //     normal: {
+        //       show: true,
+        //       color: "#fff",
+        //     },
+        //   },
+        //   data: data_res, //处理好后的散点图坐标数组
+        // },
+        //点击高亮
+        {
+          type: 'map',
+          mapType: 'china',
+          zlevel: 1,
+          roam: true,
+          geoIndex: 0,
+          tooltip: {
+            show: true,
+          },
+          itemStyle: {
+            areaColor: '#00196d',
+            borderColor: '#0a53e9',
+          },
+          emphasis: {
+            show: true,
+            label: {
+              normal: {
+                show: true, // 是否显示对应地名
+                textStyle: {
+                  color: '#fff',
+                },
+              },
+            },
+            itemStyle: {
+              areaColor: '#00196d',
+              borderColor: '#0a53e9',
+            },
+          },
         }
-        this.initWebSocket()
-      } else {
-        alert('当前浏览器不支持websocket')
-      }
-
-      let that = this
-      this.getChartsData()
-      // this.timer = setInterval(function(){
-      //      // that.getRouteList()
-      //            axios.get('https://live.eliangeyun.com/api/v1/device/channellist')
-      //              .then(resp =>{
-      // 图表重置 myChart.setOption
-      //                that.aa = resp.data.ChannelList
-      //                for(var i=0;i<that.dataList.length;i++){
-      //                  console.log('ssss',that.dataList[i].Status);
-      //                }
-
-      //              }).catch(err =>{
-      //                console.log(err);
-      //              });
-      //    }, 2000);
-      //获取新闻列表
-      // this.getNewList()
-      gChartsData({
-        compId: localStorage.getItem('ws-pf_compId'),
-        loadingstatus: 1,
-        seachMoth: '2022'
-      }).toPromise().then(res => {
-        console.log('··············', res)
-        this.chartsData = res
-        this.carCount1 = res[6].biViewInfoList[0].count
-        this.carCount2 = res[6].biViewInfoList[1].count
-        this.carCount3 = res[6].biViewInfoList[2].count
-        this.physicalInventory = Number(res[7].biViewInfoList[0].count).toFixed(2)
-        this.procurementPending= Number(res[7].biViewInfoList[1].count).toFixed(2)
-        this.salesPending =  Number(res[7].biViewInfoList[2].count).toFixed(2)
-        this.position = Number(Number(this.physicalInventory)+Number(this.procurementPending) - Number(this.salesPending)).toFixed(2)
-        this.totalReserves = res[8].biViewInfoList
-        this.mapInfo = res[9]
-        console.log(res)
-        this.initCharts()
-      })
-      // if (this.vesselBankFlag !== 'V') {
-      //   EventBus.$emit('addShipScript', () => {
-      //     this.initShipMap()
-      //   })
-      // }
-      // setTimeout(() => {
-      //   this.showEchart = true
-      // }, 900)
-
-      // this.showBlockList = []
-      // if (this.vesselBankFlag === 'V') {
-      //   this.$refs.noticeList.style.width = 'calc(50% - 7px)'
-      //   this.$refs.newsList.style.width = 'calc(50% - 7px)'
-      // } else {
-      //   this.showBlockList = []
-      //   this.blockList[1].flag = false
-      //   this.$refs.noticeList.style.width = 'calc(50% - 7px)'
-      //   this.$refs.newsList.style.width = 'calc(50% - 7px)'
-      //   if (this.userSetting['shipMap'] && this.userSetting['shipMap'][0].showFlag) {
-      //     this.showBlockList.push('船舶动态')
-      //     this.blockList[1].flag = true
-      //   }
-      // }
+      );
+      //配置
+      let option = {
+        //title可要可不要
+
+        // title: {
+        //   text: "查查的地图",
+        //   textStyle: {
+        //     color: "#ffffff",
+        //   },
+        // },
+        legend: {
+          show: true,
+          selected: {},
+          x: 'left',
+          orient: 'vertical',
+          textStyle: {
+            color: 'white',
+          },
+          data: [],
+        },
+        //鼠标移上去的弹框
+        tooltip: {
+          trigger: 'item',
+          show: true,
+        },
+        //geo：这是重点
+        geo: {
+          map: 'china', //中国地图
+          zoom: 1.2, //缩放倍数
+          roam: false, //是否允许缩放和拖拽地图
+          label: {
+            normal: {
+              show: true, // 是否显示省份名字，现在是隐藏的状态，因为和散点图的名字重叠了。如果需要就true
+              textStyle: {
+                //名字的样式
+                color: '#fff',
+              },
+            },
+            emphasis: {
+              show: true,
+            },
+          },
+          //地图样式
+          itemStyle: {
+            normal: {
+              borderColor: '#293171', //地图边框颜色
+              borderWidth: '2', //地图边框粗细
+              areaColor: '#0A0F33', //地图背景色
+            },
+            //省份地图阴影
+            emphasis: {
+              areaColor: null,
+              shadowOffsetX: 0,
+              shadowOffsetY: 0,
+              shadowBlur: 20,
+              borderWidth: 0,
+              shadowColor: '#fff',
+            },
+          },
+        },
+        series: series, //图表配置
+      };
+      mapChart.setOption(option); //生成图表
     },
-    watch: {
-      // getLanguage: function () {
-      //   this.getShipList()
-      // }
+    //玫瑰饼图
+    Rose_diagram() {
+      let mapChart = this.$echarts.init(
+        document.getElementById('Rose_diagram')
+      ); //图表初始化，china-map是绑定的元素
+      window.onresize = mapChart.resize; //如果容器变大小，自适应从新构图
+      let option = {
+        color: [
+          '#37a2da',
+          '#32c5e9',
+          '#9fe6b8',
+          '#ffdb5c',
+          '#ff9f7f',
+          '#fb7293',
+          '#e7bcf3',
+          '#8378ea',
+        ],
+        tooltip: {
+          trigger: 'item',
+          formatter: '{a} <br/>{b} : {c} ({d}%)',
+        },
+        toolbox: {
+          show: true,
+        },
+        calculable: true,
+        legend: {
+          orient: 'horizontal',
+          icon: 'circle',
+          bottom: 0,
+          x: 'center',
+          data: ['data1', 'data2', 'data3', 'data4', 'data5', 'data6'],
+          textStyle: {
+            color: '#fff',
+          },
+        },
+        series: [
+          {
+            name: '通过率统计',
+            type: 'pie',
+            radius: [10, 50],
+            roseType: 'area',
+            center: ['50%', '40%'],
+            data: [
+              { value: 10, name: 'data1' },
+              { value: 5, name: 'data2' },
+              { value: 15, name: 'data3' },
+              { value: 25, name: 'data4' },
+              { value: 20, name: 'data5' },
+              { value: 35, name: 'data6' },
+            ],
+          },
+        ],
+      };
+      mapChart.setOption(option); //生成图表
     },
-    methods: {
-      ...mapActions('user', ['toSetShow', 'changeVesslBank']),
-      changeSwitch(e){
-        debugger
-        console.log('eee')
-        console.log(e)
-        this.isSHow = e
-        this.initCharts()
-      },
-      flushData(){
-         gChartsData({
-          compId: localStorage.getItem('ws-pf_compId'),
-          loadingstatus: 1,
-          seachMoth: '2022'
-        }).toPromise().then(res => {
-          console.log('··············', res)
-          // this.chartsData = res
-          this.carCount1 = res[6].biViewInfoList[0].count
-          this.carCount2 = res[6].biViewInfoList[1].count
-          this.carCount3 = res[6].biViewInfoList[2].count
-          // this.physicalInventory = Number(res[7].biViewInfoList[0].count).toFixed(2)
-          // this.procurementPending= Number(res[7].biViewInfoList[1].count).toFixed(2)
-          // this.salesPending =  Number(res[7].biViewInfoList[2].count).toFixed(2)
-          // this.position = Number(Number(this.physicalInventory)+Number(this.procurementPending) - Number(this.salesPending)).toFixed(2)
-          // this.totalReserves = res[8].biViewInfoList
-          // this.mapInfo = res[9]
-          // console.log(res)
-          // this.initCharts()
-        })
-      },
-      getChartsData() {
-        noticeNumber().toPromise().then(res => {
-          const {
-            task = 0, remind = 0, overdue = 0, news = 0
-          } = res
-          this.number.task = task
-          this.number.remind = remind
-          this.number.overdue = overdue
-          this.number.news = news
-        })
-      },
-      initWebSocket() {
-        console.log(this.websocket)
-        // 连接错误
-        this.websocket.onerror = this.setErrorMessage
-        // 连接成功
-        this.websocket.onopen = this.setOnopenMessage
-
-        // 收到消息的回调
-        this.websocket.onmessage = this.setOnmessageMessage
-
-        // 连接关闭的回调
-        this.websocket.onclose = this.setOncloseMessage
-
-        // 监听窗口关闭事件，当窗口关闭时，主动去关闭websocket连接，防止连接还没断开就关闭窗口，server端会抛异常。
-        window.onbeforeunload = this.onbeforeunload
-      },
-      setErrorMessage() {
-        console.log('WebSocket连接发生错误   状态码：' + this.websocket.readyState)
-      },
-      setOnopenMessage() {
-        // console.log(this.websocket)
-        console.log('WebSocket连接成功    状态码：' + this.websocket.readyState)
-      },
-      setOnmessageMessage(event) {
-        // console.log(3333)
-        // 根据服务器推送的消息做自己的业务处理
-        console.log('服务端返回：' + event.data)
-        var msg = event.data.split('$')
-        var that = this
-        this.$notify.warning({
-          title: '新消息提醒',
-          message: msg[0],
-          duration: 0,
-          onClick() {
-            that.$router.push({
-              path: msg[1]
-            }) // 你要跳转的路由 还可以传参 当然也可以通过其他方式跳转
-          }
-        })
-        var currentPage = that.$router.history.current.path
-        that.$router.push({
-          path: '/'
-        })
-        that.$router.push({
-          path: currentPage
-        })
-      },
-      setOncloseMessage() {
-        // console.log(this.websocket)
-        console.log('WebSocket连接关闭    状态码：' + this.websocket.readyState)
-      },
-      //跳转
-      contract(index) {
-        if (index == 0) {
-          this.$router.push({
-            name: 'buyContract'
-          })
-        } else if (index == 1) {
-          this.$router.push({
-            name: 'salesContract'
-          })
-        } else if (index == 3) {
-          this.$router.push({
-            name: 'warehouseManagementList'
-          })
-        }
-      },
-      getTime() {
-        const date = new Date();
-        const year = date.getFullYear();
-        const month = date.getMonth() + 1;
-        const day = date.getDate();
-        const hour = date.getHours();
-        const minute = date.getMinutes();
-        const second = date.getSeconds();
-        this.month = check(month);
-        this.day = check(day);
-        this.hour = check(hour);
-        this.minute = check(minute);
-        this.second = check(second);
-
-        function check(i) {
-          const num = (i < 10) ? ('0' + i) : i;
-          return num;
-        }
-        this.nowDate = year + '-' + this.month + '-' + this.day;
-        this.nowTime = this.hour + ':' + this.minute + ':' + this.second;
-      },
-      initCharts() {
-        let app = this;
-        let roseCharts = document.getElementsByClassName('roseChart');
-        for (let i = 0; i < roseCharts.length; i++) {
-          let myChart = app.$echarts.init(roseCharts[i]);
-          let color = []
-          let data = []
-          let text = ''
-          let formatter = ''
-          let graphicText = ''
-          switch (i) {
-            case 0:
-              // 圆环图各环节的颜色
-              color = ['#75d1f4', '#3a3b40'];
-              // 圆环图各环节的名称和值(系列中各数据项的名称和值)
-              // if(this.isSHow){
-              //   data = [{
-              //   name: '已完成量',
-              //   value: '***',
-              //   type: '采购合同'
-              // }, {
-              //   name: '待完成量',
-              //   value: '***',
-              //   type: '采购合同'
-              // }]
-              // text = '合同总量'
-              // graphicText = ' \n\n总量合计\n\n***'
-              // }else{
-                data = [{
-                name: '已完成量',
-                value: Number(this.chartsData[i].biViewInfoList[0].count).toFixed(2),
-                type: '采购合同'
-              }, {
-                name: '待完成量',
-                value: Number(this.chartsData[i].biViewInfoList[1].count).toFixed(2),
-                type: '采购合同'
-              }]
-              text = '合同总量'
-              formatter = '{b}{c}吨 </br> 占比{d}%'
-              graphicText = ' \n\n总量合计\n\n' + Number(this.chartsData[i].total).toFixed(2)
-              // }
-           
-
-              break;
-            case 1:
-              // 圆环图各环节的颜色
-              color = ['#247ef4', '#3a3b40'];
-              // 圆环图各环节的名称和值(系列中各数据项的名称和值)
-              data = [{
-                name: '已开票',
-                value: Number((this.chartsData[i].biViewInfoList[0].count)/10000).toFixed(2),
-                type: '采购合同'
-              }, {
-                name: '待开票',
-                value: Number((this.chartsData[i].biViewInfoList[1].count)/10000).toFixed(2),
-                type: '采购合同'
-              }]
-              text = '合同总额'
-              formatter = '{b}{c}万 </br> 占比{d}%'
-              graphicText = ' \n\n开票合计\n\n' + Number((this.chartsData[i].total)/10000).toFixed(2)
-              break;
-            case 2:
-              // 圆环图各环节的颜色
-              color = ['#f49f23', '#3a3b40'];
-              // 圆环图各环节的名称和值(系列中各数据项的名称和值)
-              data = [{
-                name: '已付款',
-                value: Number((this.chartsData[i].biViewInfoList[0].count/10000)).toFixed(2),
-                type: '采购合同'
-              }, {
-                name: '待付款',
-                value: Number((this.chartsData[i].biViewInfoList[1].count)/10000).toFixed(2),
-                type: '采购合同'
-              }]
-              text = '合同总额'
-              formatter = '{b}{c}万 </br> 占比{d}%'
-              graphicText = ' \n\n付款合计\n\n' + Number((this.chartsData[i].total)/10000).toFixed(2)
-              break;
-            case 3:
-              // 圆环图各环节的颜色
-              color = ['#75d1f4', '#3a3b40'];
-              // 圆环图各环节的名称和值(系列中各数据项的名称和值)
-              data = [{
-                name: '已完成量',
-                value: Number(this.chartsData[i].biViewInfoList[0].count).toFixed(2),
-                type: '销售合同'
-              }, {
-                name: '待完成量',
-                value: Number(this.chartsData[i].biViewInfoList[1].count).toFixed(2),
-              }]
-              text = '合同总量'
-              formatter = '{b}{c}吨 </br> 占比{d}%'
-              graphicText = ' \n\n总量合计\n\n' + Number(this.chartsData[i].total).toFixed(2)
-              break;
-            case 4:
-              // 圆环图各环节的颜色
-              color = ['#247ef4', '#3a3b40'];
-              // 圆环图各环节的名称和值(系列中各数据项的名称和值)
-              data = [{
-                name: '已开票',
-                value: Number((this.chartsData[i].biViewInfoList[0].count)/10000).toFixed(2),
-              }, {
-                name: '待开票',
-                value: Number((this.chartsData[i].biViewInfoList[1].count)/10000).toFixed(2),
-              }]
-              text = '合同总额'
-              formatter = '{b}{c}万 </br> 占比{d}%'
-              graphicText = ' \n\n开票合计\n\n' + Number((this.chartsData[i].total)/10000).toFixed(2)
-              break;
-            case 5:
-              // 圆环图各环节的颜色
-              color = ['#f49f23', '#3a3b40'];
-              // 圆环图各环节的名称和值(系列中各数据项的名称和值)
-              data = [{
-                name: '已付款',
-                value: Number((this.chartsData[i].biViewInfoList[0].count)/10000).toFixed(2),
-              }, {
-                name: '待付款',
-                value: Number((this.chartsData[i].biViewInfoList[1].count)/10000).toFixed(2),
-              }]
-              text = '合同总额'
-              formatter = '{b}{c}万 </br> 占比{d}%'
-              graphicText = ' \n\n付款合计\n\n' + Number((this.chartsData[i].total)/10000).toFixed(2)
-              break;
-          }
-          myChart.setOption({
-            title: [{
-              text: text,
-              top: '2%',
-              left: '3%',
-              textStyle: {
-                color: '#f4f4f4',
-                fontSize: 18,
-              }
-            }],
-            // 图例
-            legend: [{
-              selectedMode: true, // 图例选择的模式，控制是否可以通过点击图例改变系列的显示状态。默认开启图例选择，可以设成 false 关闭。
-              top: '10%',
-              left: 'center',
-              con: 'circle',
-              itemWidth: 10, // 设置宽度
-              itemHeight: 10, // 设置高度
-              itemGap: 40, // 设置间距
-              textStyle: { // 图例的公用文本样式。
-                fontSize: 14,
-                color: '#fff'
+    //柱状图
+    columnar() {
+      let mapChart = this.$echarts.init(document.getElementById('columnar')); //图表初始化，china-map是绑定的元素
+      window.onresize = mapChart.resize; //如果容器变大小，自适应从新构图
+      let option = {
+        title: {
+          text: '',
+        },
+        tooltip: {
+          trigger: 'axis',
+          backgroundColor: 'rgba(255,255,255,0.1)',
+          axisPointer: {
+            type: 'shadow',
+            label: {
+              show: true,
+              backgroundColor: '#7B7DDC',
+            },
+          },
+        },
+        legend: {
+          data: ['已贯通', '计划贯通', '贯通率'],
+          textStyle: {
+            color: '#B4B4B4',
+          },
+          top: '0%',
+        },
+        grid: {
+          x: '8%',
+          width: '95%',
+          y: '4%',
+        },
+        xAxis: {
+          data: [
+            '市区',
+            '万州',
+            '江北',
+            '南岸',
+            '北碚',
+            '綦南',
+            '长寿',
+            '永川',
+            '璧山',
+            '江津',
+            '城口',
+            '大足',
+            '垫江',
+            '丰都',
+            '奉节',
+            '合川',
+            '江津区',
+            '开州',
+            '南川',
+            '彭水',
+            '黔江',
+            '石柱',
+            '铜梁',
+            '潼南',
+            '巫山',
+            '巫溪',
+            '武隆',
+            '秀山',
+            '酉阳',
+            '云阳',
+            '忠县',
+            '川东',
+            '检修',
+          ],
+          axisLine: {
+            lineStyle: {
+              color: '#B4B4B4',
+            },
+          },
+          axisTick: {
+            show: false,
+          },
+        },
+        yAxis: [
+          {
+            splitLine: { show: false },
+            axisLine: {
+              lineStyle: {
+                color: '#B4B4B4',
               },
-              data: data
-            }],
-
-            // 提示框
-            tooltip: {
-              show: true, // 是否显示提示框
-              formatter: formatter // 提示框显示内容,此处{b}表示各数据项名称，此项配置为默认显示项，{c}表示数据项的值，默认不显示，({d}%)表示数据项项占比，默认不显示。
             },
 
-            // graphic 是原生图形元素组件。可以支持的图形元素包括：image, text, circle, sector, ring, polygon, polyline, rect, line, bezierCurve, arc, group,
-            graphic: {
-              type: 'text', // [ default: image ]用 setOption 首次设定图形元素时必须指定。image, text, circle, sector, ring, polygon, polyline, rect, line, bezierCurve, arc, group,
-              top: 'center', // 描述怎么根据父元素进行定位。top 和 bottom 只有一个可以生效。如果指定 top 或 bottom，则 shape 里的 y、cy 等定位属性不再生效。『父元素』是指：如果是顶层元素，父元素是 echarts 图表容器。如果是 group 的子元素，父元素就是 group 元素。
-              left: 'center', // 同上
-              style: {
-                text: graphicText, // 文本块文字。可以使用 \n 来换行。[ default: '' ]
-                fill: '#fff', // 填充色。
-                fontSize: 16, // 字体大小
-                fontWeight: 'bold' // 文字字体的粗细，可选'normal'，'bold'，'bolder'，'lighter'
-              }
+            axisLabel: {
+              formatter: '{value} ',
             },
-
-            // 系列列表
-            series: [{
-              name: '', // 系列名称
-              type: 'pie', // 系列类型
-              center: ['50%', '55%'], // 饼图的中心（圆心）坐标，数组的第一项是横坐标，第二项是纵坐标。[ default: ['50%', '50%'] ]
-              radius: ['45%', '55%'], // 饼图的半径，数组的第一项是内半径，第二项是外半径。[ default: [0, '75%'] ]
-              hoverAnimation: true, // 是否开启 hover 在扇区上的放大动画效果。[ default: true ]
-              color: color, // 圆环图的颜色
-              label: { // 饼图图形上的文本标签，可用于说明图形的一些数据信息，比如值，名称等.
-                normal: {
-                  show: true, // 是否显示标签[ default: false ]
-                  position: 'outside', // 标签的位置。'outside'饼图扇区外侧，通过视觉引导线连到相应的扇区。'inside','inner' 同 'inside',饼图扇区内部。'center'在饼图中心位置。
-                  formatter: '{c}', // 标签内容
-                  color: '#d5d5d6',
-                  fontSize: 16,
-                }
+          },
+        ],
+        series: [
+          {
+            name: '已贯通',
+            type: 'bar',
+            barWidth: 10,
+            itemStyle: {
+              normal: {
+                barBorderRadius: 5,
+                color: new this.$echarts.graphic.LinearGradient(0, 0, 0, 1, [
+                  { offset: 0, color: '#956FD4' },
+                  { offset: 1, color: '#3EACE5' },
+                ]),
               },
-              labelLine: { // 标签的视觉引导线样式,在 label 位置 设置为'outside'的时候会显示视觉引导线。
-                normal: {
-                  show: true, // 是否显示视觉引导线。
-                  length: 15, // 在 label 位置 设置为'outside'的时候会显示视觉引导线。
-                  length2: 10, // 视觉引导项第二段的长度。
-                  lineStyle: { // 视觉引导线的样式
-                    //color: '#000',
-                    //width: 1
-                  }
-                }
+            },
+            data: [
+              46, 50, 55, 650, 75, 85, 99, 125, 140, 215, 232, 244, 252, 333,
+              46, 50, 55, 65, 75, 85, 99, 225, 140, 215, 85, 99, 125, 140, 215,
+              232, 244, 252, 75,
+            ],
+          },
+          {
+            name: '计划贯通',
+            type: 'bar',
+            barGap: '-100%',
+            barWidth: 10,
+            itemStyle: {
+              normal: {
+                barBorderRadius: 5,
+                color: new this.$echarts.graphic.LinearGradient(0, 0, 0, 1, [
+                  { offset: 0, color: 'rgba(156,107,211,0.8)' },
+                  { offset: 0.2, color: 'rgba(156,107,211,0.5)' },
+                  { offset: 1, color: 'rgba(156,107,211,0.2)' },
+                ]),
               },
-              data: data // 系列中的数据内容数组。
-            }]
-          })
-          myChart.off('click');
-          myChart.on('click', function(params) {
-            //  var a = params.dataIndex
-            // console.log(params, '我被点击了');
-            // app.dialogVisible = true
-            return
-          })
-        }
-        console.log(this.totalReserves)
-        let _x = []
-        let _y = []
-        for (let i = 0; i < this.totalReserves.length; i++) {
-          _x.push(this.totalReserves[i].name)
-          var a = Number(this.totalReserves[i].count).toFixed(2)
-          _y.push(a)
-        }
-
-        // 柱状图
-        let myChart7 = app.$echarts.init(this.$refs.myEchart7);
-        var zoption = {
-          grid: {
-            left: '0',
-            right: '0',
-            bottom: '0',
-            top: '30',
-            containLabel: true
+            },
+            z: -12,
+            data: [
+              180, 207, 240, 283, 328, 360, 398, 447, 484, 504, 560, 626, 595,
+              675, 180, 207, 240, 283, 328, 360, 398, 447, 484, 504, 360, 398,
+              447, 484, 504, 500, 326, 495, 328,
+            ],
           },
-          // ---  提示框 ----
-          tooltip: {
-            show: true, // 是否显示提示框，默认为true
-            trigger: 'item', // 数据项图形触发
-            axisPointer: { // 指示样式
-              type: 'shadow',
-              axis: 'auto'
+        ],
+      };
+      mapChart.setOption(option); //生成图表
+    },
+    //折线图
+    line_center_diagram() {
+      let mapChart = this.$echarts.init(
+        document.getElementById('line_center_diagram')
+      ); //图表初始化，china-map是绑定的元素
+      window.onresize = mapChart.resize; //如果容器变大小，自适应从新构图
+      let option = {
+        xAxis: {
+          type: 'category',
+          data: ['Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat', 'Sun'],
+          position: 'bottom',
+          axisLine: true,
+          axisLabel: {
+            color: 'rgba(255,255,255,.8)',
+            fontSize: 12,
+          },
+        },
+        yAxis: {
+          type: 'value',
+          name: '年度生产量',
+          nameLocation: 'end',
+          nameGap: 24,
+          nameTextStyle: {
+            color: 'rgba(255,255,255,.5)',
+            fontSize: 14,
+          },
+          splitNumber: 4,
+          axisLine: {
+            lineStyle: {
+              opacity: 0,
             },
-            padding: 5,
-            textStyle: { // 提示框内容的样式
-              color: '#fff'
-            }
           },
-
-          //  ------  X轴 ------
-          xAxis: {
-
-            axisLabel: { // 坐标轴标签
-              show: true, // 是否显示
-              inside: false, // 是否朝内
-              rotate: 0, // 旋转角度
-              margin: 10, // 刻度标签与轴线之间的距离
-              color: '#666', // 默认取轴线的颜色
-              interval: 0,
-              rotate: 40
+          splitLine: {
+            show: true,
+            lineStyle: {
+              color: '#fff',
+              opacity: 0.1,
             },
-
-            splitArea: { // 网格区域
-              show: false // 是否显示，默认为false
+          },
+          axisLabel: {
+            color: 'rgba(255,255,255,.8)',
+            fontSize: 12,
+          },
+        },
+        grid: {
+          left: 50,
+          right: 10,
+          bottom: 25,
+          top: '18%',
+        },
+        series: [
+          {
+            data: [820, 932, 901, 934, 1290, 1330, 1320],
+            type: 'line',
+            smooth: true,
+            symbol: 'emptyCircle',
+            symbolSize: 8,
+            itemStyle: {
+              normal: {
+                color: '#fff',
+              },
+            },
+            //线的颜色样式
+            lineStyle: {
+              normal: {
+                color: this.colorList.linearBtoG,
+                width: 3,
+              },
+            },
+            //填充颜色样式
+            areaStyle: {
+              normal: {
+                color: this.colorList.areaBtoG,
+              },
             },
-            data: _x
           },
-          //   ------   y轴  ----------
-          yAxis: {
-
-            axisLine: { // 坐标轴 轴线
-              show: false, // 是否显示
-
+        ],
+      };
+      mapChart.setOption(option); //生成图表
+    },
+    //右侧虚线柱状图图
+    dotter_bar() {
+      let mapChart = this.$echarts.init(document.getElementById('dotter_bar')); //图表初始化，china-map是绑定的元素
+      window.onresize = mapChart.resize; //如果容器变大小，自适应从新构图
+      // Generate data
+      let category = [];
+      let dottedBase = +new Date();
+      let lineData = [];
+      let barData = [];
+      for (let i = 0; i < 20; i++) {
+        let date = new Date((dottedBase += 3600 * 24 * 1000));
+        category.push(
+          [date.getFullYear(), date.getMonth() + 1, date.getDate()].join('-')
+        );
+        let b = Math.random() * 200;
+        let d = Math.random() * 200;
+        barData.push(b);
+        lineData.push(d + b);
+      }
+      // option
+      let option = {
+        tooltip: {
+          trigger: 'axis',
+          axisPointer: {
+            type: 'shadow',
+          },
+        },
+        grid: {
+          left: 50,
+          right: 10,
+          bottom: 25,
+          top: '18%',
+        },
+        legend: {
+          data: ['line', 'bar'],
+          textStyle: {
+            color: '#ccc',
+          },
+        },
+        xAxis: {
+          data: category,
+          axisLine: {
+            lineStyle: {
+              color: '#ccc',
             },
-
-            axisLabel: { // 坐标轴的标签
-              show: true, // 是否显示
-              inside: false, // 是否朝内
-              rotate: 0, // 旋转角度
-              margin: 8, // 刻度标签与轴线之间的距离
-              color: '#666', // 默认轴线的颜色
+          },
+        },
+        yAxis: {
+          splitLine: { show: false },
+          axisLine: {
+            lineStyle: {
+              color: '#ccc',
             },
-            splitLine: { // gird 区域中的分割线
-              show: true, // 是否显示
-              lineStyle: {
-                color: '#666',
-                width: 1,
-                type: 'dashed'
-              }
-            }
           },
-          //  -------   内容数据 -------
-          series: [{
-            name: '储量', // 序列名称
-            type: 'bar', // 类型
-            legendHoverLink: true, // 是否启用图列 hover 时的联动高亮
-            // label: {   // 图形上的文本标签
-            //   show: false,
-            //   position: 'insideTop', // 相对位置
-            //   rotate: 0,  // 旋转角度
-            //   color: '#eee'
-            // },
-            itemStyle: { // 图形的形状
-              color: '#3779fd'
-              // barBorderRadius: [18, 18, 0 ,0]
-
-
+        },
+        series: [
+          {
+            name: 'line',
+            type: 'line',
+            smooth: true,
+            showAllSymbol: true,
+            symbol: 'emptyCircle',
+            symbolSize: 15,
+            data: lineData,
+          },
+          {
+            name: 'bar',
+            type: 'bar',
+            barWidth: 10,
+            itemStyle: {
+              borderRadius: 5,
+              // color: "#14c8d4",
+              color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
+                { offset: 0, color: '#14c8d4' },
+                { offset: 1, color: '#43eec6' },
+              ]),
             },
-            barWidth: 20, // 柱形的宽度
-            barCategoryGap: '20%', // 柱形的间距
-            label: {
-              show: true,
-              position: 'top',
-              color: '#b0b1b3'
+            data: barData,
+          },
+          {
+            name: 'line',
+            type: 'bar',
+            barGap: '-100%',
+            barWidth: 10,
+            itemStyle: {
+              // color: "rgba(20,200,212,0.5)",
+              color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
+                { offset: 0, color: 'rgba(20,200,212,0.5)' },
+                { offset: 0.2, color: 'rgba(20,200,212,0.2)' },
+                { offset: 1, color: 'rgba(20,200,212,0)' },
+              ]),
             },
-            data: _y
-          }]
-        };
-        myChart7.setOption(zoption)
-      },
-      handleClose(done) {
-        this.$confirm('确认关闭？')
-          .then(_ => {
-            done();
-          })
-          .catch(_ => {});
-      },
-      // 下载通知通函
-      downloadNotification(item) {
-        zipDown({
-          appendixIds: item.attachmentPath,
-          baseUrl: this.$store.getters.baseInfo.fileUrl,
-          zipName: item.theme
-        })
-      },
-      /**
-       * 校验各种弹框问题
-       * @Desc 不是本人原意, 请不要骂我 谢谢. 请联系 "后台开发人员" 梳理逻辑
-       */
-      async checkUserInfoDialog() {
-        const {
-          statusFlag,
-          loginInfo: {
-            loginFlag = 0
+            z: -12,
+            data: lineData,
           },
-          daysRemaining,
-          customerServiceStaffPhone
-        } = JSON.parse(localStorage.getItem('ws_login_getTenantInfoByUser'))
-        if (statusFlag * 1 === 3) {
-          // 判断后台返回的是空 还是 0  是空还是 0 的时候请求后台接口 不懂啥意思 为啥要这么弄
-          if (!loginFlag && !localStorage.getItem('isShowTryUserDialog') * 1) {
-            let newId = JSON.parse(localStorage.getItem('ws_login_accountId'))
-            this.phone = customerServiceStaffPhone
-            this.successfulDialog = true
-            localStorage.setItem('isShowTryUserDialog', '1')
-            await getChangeLoginFlag({
-              accountId: newId
-            }).toPromise()
-          }
-        }
-        // 试用租户
-        const dayDialog = [30, 15, 7, 5, 3, 2, 1, 0]
-        if (statusFlag * 1 === 2 && dayDialog.indexOf(daysRemaining) > -1 && !localStorage.getItem(
-            'isShowTryUserDialog') * 1) {
-          this.day = daysRemaining
-          this.phone = customerServiceStaffPhone
-          this.trialNotExpired = true
-          localStorage.setItem('isShowTryUserDialog', '1')
-        }
-      },
-      trialNotExpiredClose() {
-        this.trialNotExpired = false
-      },
-      //第一次登陆的弹窗
-      successfulDialogClose() {
-        this.successfulDialog = false
-      },
-      initShipMap() {
-        var options = {
-          ak: 'c0ed286f357b7f4c7312476637a7ab04',
-          // 初始中心点坐标
-          centerPoint: [30.171, 121.27],
-          zoom: 3,
-          minZoom: 2,
-          maxZoom: 18,
-          defaultMapType: 'MT_SEA', //默认海图
-          // 公司版权信息( 支持html )，默认Elane Inc.
-          // attribution: {
-          //   isShow: false,
-          //   emptyString: '&copy;2019 <a class="shipxy_small"></a>&nbsp;<a>WinSea Inc.</a>'
-          // },
-          // measureCtrl: {
-          //   isShow: false
-          // },
-          // mousePostionCtrl: {
-          //   isShow: false
-          // },
-          // zoomControlElane: {
-          //   isShow: true,
-          //   position: 'bottomright'
-          // },
-          // zoomviewControl: {
-          //   isShow: false,
-          //   position: 'bottomright'
-          // },
-          // basemapsControl: {
-          //   isShow: false,
-          //   position: 'topright'
-          // },
-          // scaleCtrl: {
-          //   isShow: true,
-          //   position: 'bottomleft'
-          // }
-        }
-        // 创建地图示例
-        // eslint-disable-next-line no-undef
-        this.mapXY = new ShipxyAPI.Map('mapXY', options)
-        // eslint-disable-next-line no-undef
-        this.shipService = ShipxyAPI.ShipService(this.mapXY, {
-          enableAreaShip: false,
-          enableFleetShip: false,
-          isAutoUpdateSrvtime: false,
-          // delayTime: 5000,
-          lableFont: ['500 12px Arial', '500 12px 宋体'], // 船舶名称，文字字体，默认值：["600 12px Arial", "500 12px Arial"]
-          lableTxtColor: ['#fff', '#fff'], // 船舶名称，文字颜色，默认值：["#000","#fff"]
-          // lableLineColor: ['rgba(1, 30, 62, 0)', 'rgba(1, 30, 62, 0)'], //  边框颜色，默认值：["#000","#000"]
-          // lableLinefillColor: ['rgba(0, 0, 0, 0.6)', 'rgba(0, 0, 0, 0.6)'], // 框内填充颜色，默认值：[null,null]
-          // obliqueLineColor: ['#000', '#000'], // 船舶名称，斜线颜色，默认值：[null,null]
-          // dShipColor: '#FF6437', // D+船颜色，默认：#ff6347
-          zoomLevel_data: 1,
-          zoomLevel_base: 1,
-          getAreaShipsCallBack: (call) => {
-            // console.info(call, 'getAreaShipsCallBack')
+          {
+            name: 'dotted',
+            type: 'pictorialBar',
+            symbol: 'rect',
+            itemStyle: {
+              color: '#0f375f',
+            },
+            symbolRepeat: true,
+            symbolSize: [12, 4],
+            symbolMargin: 1,
+            z: -10,
+            data: lineData,
           },
-          drawShipsEndCallBack: (call) => {
-            // console.info(call, 'drawShipsEndCallBack')
-          }
-        })
-        this.shipService.setPointerEvents(true)
-        window.shipService = this.shipService
-        //获取船舶列表
-        this.getShipList()
-      },
-      toRoute(url) {
-        this.$router.push(url)
-      },
-      toSetShow() {
-        this.showBlockList = []
-        this.setFlag = true
-        // getStaffHomeShowList({
-        //   staffId: localStorage.getItem('ws-pf_userId')
-        // }).toPromise().then(data => {
-        //   for (let i = 0; i < data.length; i++) {
-        //     if (data[i].typeId === 'shipMap' && data[i].showFlag) {
-        //       this.showBlockList.push('船舶动态')
-        //     } else {
-        //       this.showBlockList = []
-        //     }
-        //   }
-        // })
-      },
-
-      toMap() {
-        this.$router.push('/map/trajectory_child')
-      },
-      goNews() {
-        this.$router.push('/news/noticeType')
-      },
-      goNewsDetail(id) {
-        this.$router.push('/news/noticeDetails?id=' + id)
-      },
-      goNotice(data) {
-        this.$router.push({
-          name: 'notificationItDetail',
-          query: {
-            id: data.id
-          }
-        })
-      },
-      goNoticeMore() {
-        this.$router.push('/notice/notificationCircularReleasedIt_child')
-      },
-      toHide(index) {
-        this.changeVesslBank([{
-          id: this.userSetting['shipMap'][0].id,
-          staffId: localStorage.getItem('ws-pf_userId'),
-          typeId: 'shipMap',
-          showFlag: false
-        }])
-      },
-      getRouteList() {
-        let data = {
-          accountId: localStorage.getItem('ws-pf_userId'),
-          pageSize: 30
-        }
-        findHottestRouting(data).toPromise().then(res => {
-          this.routeList = res
-          if (res.length == 0) {
-            this.blockList[0].flag = false
-          }
-        })
-      },
-      //获取新闻
-      getNewList() {
-        let data = {
-          currentPage: 1,
-          pageSize: 2,
-          loginUserId: localStorage.getItem('ws-pf_userId'),
-          compId: localStorage.getItem('ws-pf_compId'),
-          releaseFlag: 0
-        }
-        // queryHomePage(data).toPromise().then(resNewList => {
-        //   for (let i of resNewList) {
-        //     i.content = '<p>' + i.content.replace(/<[^>]+>/g, '') + '</p>'
-        //   }
-        //   this.newList = resNewList
-        //   for (let i of this.newList) {
-        //     if (i.ossCoverUrl && i.ossCoverUrl.length > 0) {
-        //     } else {
-        //       this.$set(
-        //         i,
-        //         'imgUrl',
-        //         require('@/assets/images/page/home/noImg.png')
-        //       )
-        //     }
-        //   }
-        // })
-      },
-      //获取通知通函
-      // getNoticeList () {
-      //   let pagesize = Math.floor((this.$refs.noticeList.clientHeight - 44) / 80)
-      //   let data = {
-      //     currentPage: 1,
-      //     pageSize: pagesize || 3,
-      //     vesselDeptId:
-      //       localStorage.getItem('ws-pf_vesselBankFlag') === 'V'
-      //         ? localStorage.getItem('ws-pf_vesselId')
-      //         : localStorage.getItem('ws-pf_deptId'),
-      //     compId: localStorage.getItem('ws-pf_compId')
-      //   }
-      //   // TODO: 【此处有问题】接口变更的不对
-      //   queryCircularManagementReceiveList(data)
-      //     .toPromise()
-      //     .then(response => {
-      //       this.noticeList = response.records
-      //     })
-      // },
-      // 获取船舶状态
-      getNaviStatusStr(t) {
-        var array = [
-          this.$t('home.navistatus0'),
-          this.$t('home.navistatus1'),
-          this.$t('home.navistatus2'),
-          this.$t('home.navistatus3'),
-          this.$t('home.navistatus4'),
-          this.$t('home.navistatus5'),
-          this.$t('home.navistatus6'),
-          this.$t('home.navistatus7'),
-          this.$t('home.navistatus8')
-        ]
-
-        if (t >= 0 && t <= 8) {
-          return array[t]
-        }
-        return ''
-      },
-      // 获取船舶状态
-      getNaviStatusBg(t) {
-        var array = [
-          'bg0',
-          'bg1',
-          'bg2',
-          'bg3',
-          'bg4',
-          'bg5',
-          'bg6',
-          'bg7',
-          'bg8'
-        ]
-
-        if (t >= 0 && t <= 8) {
-          return array[t]
-        }
-        return ''
-      },
-      getShipList() {
-        getUserVesselList({
-          vesselStatus: 'UNDER_CONTROL'
-        }).toPromise().then(res => {
-          this.shipList = []
-          let num = res.length > 10 ? 10 : res.length
-          let obj = {}
-          for (let i = 0; i < num; i++) {
-            if (res[i].mmsiCode && res[i].mmsiCode.length > 0) {
-              obj = this.shipService.getShipByMmsi(res[i].mmsiCode) ?
-                this.shipService.getShipByMmsi(res[i].mmsiCode) : {}
-              obj.vesselName = res[i].vesselName
-
-              this.shipList.push(obj)
-            }
-          }
-          //我想不出还有什么招了:临时解决办法
-          const oldList = this.shipList
-          for (let i = 1; i < 5; i++) {
-            oldList.forEach(item => {
-              this.shipList.push(item)
-            })
-          }
-        })
-      },
-
-      onTodoClick() {
-        this.$router.push({
-          name: 'workNotification'
-        })
-      },
-      onMsgClick() {
-        this.$router.push({
-          name: 'message'
-        })
-      },
-      onChange(list) {},
-      onShipMenuItemClick(ship) {
-        this.selectShip = ship
-        if (ship) {
-          this.$refs.shipMap.selectShip(ship.id)
-        } else {
-          this.$refs.shipMap.unSelectShip()
-        }
-      },
-      onFullScreen() {
-        this.isFullScreen = !this.isFullScreen
-      },
-      onNoticeMoreBtnClick() {
-        this.$router.push({
-          name: 'notice'
-        })
-      },
-      onShipSelectEvent(shipid) {
-        this.selectShip = this.ships.find(item => {
-          return item.id == shipid
-        })
-      },
-      getCityName(encity) {
-        if (getLanguage() === 'zh') {
-          return getCnCity(encity)
-        }
-        return encity
-      },
-      getWeaName(enwea) {
-        if (getLanguage() === 'zh') {
-          return getCnWea(enwea)
-        }
-        return enwea
-      },
-      gotoNewRw(data) {
-        if (data === 'message') {
-          this.$router.push({
-            name: 'message',
-            query: {
-              types: data
-            }
-          })
-        } else {
-          this.$router.push({
-            name: 'workNotification',
-            query: {
-              types: data
-            }
-          })
-        }
-      },
-      test() {
-        console.log('testtesttesttest');
-      },
-      async test1() {
-        console.log('testtesttesttest111111');
-      },
-      async openPort() {
-        console.log('openPort', navigator);
-        if ('serial' in navigator) {
-          // The Web Serial API is supported.
-          console.log('the Web Serial API is supported.');
-          console.log(this.param);
-          const port = await navigator.serial.requestPort();
-          await port.open({
-            baudRate: this.param
-          }); // set baud rate
-          this.reader = port.readable.getReader();
-          // 监听来自串行设备的数据
-          while (true) {
-            const {
-              value,
-              done
-            } = await this.reader.read();
-            if (done) {
-              // 允许稍后关闭串口。
-              this.reader.releaseLock();
-              break;
-            }
-            console.log('value:', value);
-
-            var result = '';
-            var flag = false;
-            for (var i = value.length - 1; i >= 0; i--) {
-              var tmp = String.fromCharCode(value[i])
-              if (tmp == '=') {
-                flag = true
-              }
-              if (flag && result.length < 9 && tmp != '=') {
-                result += tmp
-              }
-            }
-
-            // setTimeout(1000)
-            if (parseInt(result)) {
-              console.log('result:', result);
-              this.text = parseInt(result)
-            }
-            console.log('this.text:', this.text);
-
-            // value 是一个 Uint8Array
-          }
-          await port.close();
-        } else {
-          console.log('the Web Serial API is not supported.', navigator);
-        }
-      },
-      async closePort() {
-        console.log('closePort');
-        this.reader.cancel()
-      }
-    }
+        ],
+      };
+      mapChart.setOption(option); //生成图表
+    },
+  },
+    
   }
 </script>
 
 <style lang="scss" scoped>
-  .home {
-    padding: 10px;
-    overflow-y: auto;
-    // background-color: #eee;
+* {
+  margin: 0;
+  padding: 0;
+  list-style-type: none;
+  outline: none;
+  box-sizing: border-box;
+}
+html {
+  margin: 0;
+  padding: 0;
+}
+body {
+  font-family: Arial, Helvetica, sans-serif;
+  line-height: 1.2em;
+  background-color: #f1f1f1;
+  margin: 0;
+  padding: 0;
+}
+a {
+  color: #343440;
+  text-decoration: none;
+}
+//页面样式部分！！！！
+#index {
+  color: #d3d6dd;
+  // width: 100%;
+  // height: calc(100% - 60px);
+   width: 1920px;
+  height: 1080px;
+  position: absolute;
+  top: 50%;
+  left: 50%;
+  transform: translate(-50%, -50%);
+  transform-origin: left top;
+  overflow: hidden;
+    background: #2a2a2a;
+  .bg {
+    //整体页面背景
     width: 100%;
-    height: calc(100vh - 60px);
-
-    .set-img {
-      width: 25px;
-      height: 25px;
-      position: fixed;
-      right: 0;
-      bottom: 99px;
-      z-index: 1000;
-    }
-
-    .shortcut-entrance {
-      width: 100%;
-      height: 60px;
-      background: #fff;
-      margin-bottom: 10px;
-      padding: 0 20px;
-      line-height: 60px;
-      display: flex;
-      justify-content: space-between;
-      align-items: center;
-
-      .shortcut-entrance-left {
-        font-size: 16px;
-        font-weight: bold;
-        color: #333333;
-        width: 50%;
-        overflow: hidden;
-        height: 100%;
-      }
-
-      .shortcut-entrance-right {
-        width: 14px;
-        height: 14px;
-      }
-    }
-
-    .body-middle {
-      display: flex;
-      width: 100%;
-      height: calc(100vh - 60px);
-
-      .body-middle-left {
-        width: 100%;
-
-        // margin-right: 10px;
-        .panel-list {
-          display: flex;
-          color: #ffffff;
-          text-shadow: 0px 1px 1px rgba(111, 52, 0, 0.55);
-        }
-
-        .ship-list-body {
-          position: relative;
-          width: 300px;
-          margin-top: 10px;
-
-          .shipList-box {
-            width: 85%;
-            margin: 0 auto;
-
-            .shipList-icon {
-              position: absolute;
-              top: 6px;
-              left: 0px;
-            }
-
-            .shipList-name {
-              cursor: context-menu;
-              font-size: 16px;
-              font-weight: bold;
-              line-height: 26px;
-              color: #333333;
-              max-width: 100px;
-              white-space: nowrap;
-              overflow: hidden;
-              text-overflow: ellipsis;
-            }
-
-            .shipList-address {
-              cursor: context-menu;
-              font-size: 14px;
-              color: #666666;
-              line-height: 35px;
-            }
-
-            .shipList-time {
-              cursor: context-menu;
-              font-size: 14px;
-              color: #666666;
-              line-height: 20px;
-            }
-
-            .ship-list-status {
-              cursor: context-menu;
-              margin-left: 20px;
-              padding: 5px 10px;
-              border-radius: 20px;
-              color: #fff;
-              max-width: 90px;
-              white-space: nowrap;
-              overflow: hidden;
-              text-overflow: ellipsis;
-            }
-
-            .bg0 {
-              background: #7ed321;
-            }
-
-            .bg1 {
-              background: #ff8f00;
-            }
-
-            .bg2 {
-              background: #495b61;
-            }
-
-            .bg3 {
-              background: #4fc3f7;
-            }
-
-            .bg4 {
-              background: #26a69a;
-            }
-
-            .bg5 {
-              background: #9c7fee;
-            }
-
-            .bg6 {
-              background: #ff5722;
-            }
-
-            .bg7 {
-              background: #8d6e63;
-            }
-
-            .bg8 {
-              background: #fadd60;
-            }
-          }
-        }
-
-        .notice-list {
-          width: calc(50% - 7px);
-          background: #fff;
-          margin-top: 10px;
-          // height: calc(100% - 180px);
-          // min-height: 460px;
-          border-radius: 4px;
-          // float: left;
-        }
-
-        .news-list {
-          width: calc(50% - 7px);
-          // float: left;
-          background: #fff;
-          margin-top: 10px;
-          // height: calc(100% - 180px);
-          height: 285px;
-          overflow: hidden;
-          // min-height: 460px;
-          border-radius: 4px;
-
-          // margin-right: 10px;
-          .new-list-box {
-            padding: 0 10px;
-
-            .new-list-body:first-child {
-              padding-bottom: 20px;
-              border-bottom: 1px solid #eeeeee;
-            }
-
-            .new-list-body:last-child {
-              padding-top: 20px;
-            }
-          }
-
-          .new-list-body {
-            width: 100%;
-            padding: 10px 0;
-            display: flex;
-            border-bottom: 1px solid #eeeeee;
-            // height: 50%;
-            overflow: hidden;
-
-            // padding: 10px;
-            // display: flex;
-            .new-list-img {
-              // height: 100%;
-              width: 160px;
-              height: 100px;
-              position: relative;
-
-              // margin-right: 20px;
-              .newsTJ {
-                position: absolute;
-                width: 54px;
-                height: 50px;
-                left: 0;
-                top: 0;
-              }
-
-              img {
-                width: 100%;
-                height: 100%;
-                display: block;
-              }
-            }
-
-            .new-list-title {
-              color: #343434;
-              line-height: 30px;
-              font-size: 14px;
-              font-weight: bold;
-              overflow: hidden;
-              text-overflow: ellipsis;
-              white-space: nowrap;
-
-              span {
-                cursor: pointer;
-                display: block;
-              }
-            }
-
-            .new-list-content {
-              color: #666666;
-              font-size: 12px;
-              line-height: 16px;
-              display: -webkit-box;
-              -webkit-box-orient: vertical;
-              -webkit-line-clamp: 3;
-              overflow: hidden;
-              height: 48px;
-
-              span {
-                cursor: pointer;
-                display: block;
-              }
-            }
-
-            .new-list-date {
-              color: #999999;
-              font-size: 12px;
-              text-align: right;
-              line-height: 22px;
-
-              span {
-                cursor: pointer;
-                display: block;
-              }
-            }
-          }
-
-          // .new-list-body:hover {
-          //   background: #e2edfa;
-          //   cursor: pointer;
-          // }
-          .no-line {
-            border-bottom: 0px solid #eeeeee;
-          }
-        }
-
-        .v-width {
-          width: calc(50% - 7px);
-        }
-      }
-
-      .body-middle-right {
-        width: calc(30% - 10px);
-
-        .notice-list {
-          height: 50%;
-          background: #fff;
-          width: 100%;
-          min-height: 300px;
-          border-radius: 4px;
-
-          .notice-list-body {
-            border-bottom: 1px solid #eeeeee;
-            padding: 20px 10px;
-
-            .notice-list-title {
-              color: #333333;
-              font-size: 14px;
-              font-weight: bold;
-              line-height: 18px;
-              overflow: hidden;
-              text-overflow: ellipsis;
-              white-space: nowrap;
-            }
-
-            .notice-list-type {
-              margin: 9px 0 12px 0;
-              color: #666666;
-            }
-
-            .notice-list-person {
-              color: #666666;
-              font-size: 12px;
-            }
-
-            .notice-list-date {
-              color: #666666;
-              font-size: 12px;
-              margin-top: 10px;
-            }
-          }
-
-          .notice-list-body:hover {
-            background: #e2edfa;
-            cursor: pointer;
-          }
-
-          .notice-body-height {
-            height: 50%;
-          }
-
-          .notice-body-height1 {
-            height: 20%;
-          }
-        }
-
-        .notice-list-height {
-          height: 100%;
-          min-height: 638px;
-        }
-
-        .ship-list {
-          height: calc(50% - 10px);
-          margin-top: 10px;
-          background: #fff;
-          width: 100%;
-          min-height: 327px;
-          border-radius: 4px;
-
-          .ship-list-body {
-            padding: 20px 0;
-            border-bottom: 1px solid #eeeeee;
-
-            .ship-list-head {
-              display: flex;
-
-              img {
-                width: 14px;
-                height: 14px;
-              }
-
-              .ship-list-name {
-                margin: 0 20px;
-                font-weight: bold;
-              }
-
-              .ship-list-status {
-                border-radius: 10px;
-                padding: 4px 8px;
-                color: #ffffff;
-              }
-
-              .bg0 {
-                background: #7ed321;
-              }
-
-              .bg1 {
-                background: #ff8f00;
-              }
-
-              .bg2 {
-                background: #495b61;
-              }
-
-              .bg3 {
-                background: #4fc3f7;
-              }
-
-              .bg4 {
-                background: #26a69a;
-              }
-
-              .bg5 {
-                background: #9c7fee;
-              }
-
-              .bg6 {
-                background: #ff5722;
-              }
-
-              .bg7 {
-                background: #8d6e63;
-              }
-
-              .bg8 {
-                background: #fadd60;
-              }
-            }
-
-            .ship-list-address {
-              margin: 10px 0 10px 34px;
-              color: #666666;
-            }
-
-            .ship-list-date {
-              color: #666666;
-              margin-left: 34px;
-            }
-          }
-
-          /*.ship-list-body:hover{*/
-          /*  background: #e2edfa;*/
-          /*}*/
-        }
-      }
-    }
-
-    .body-middle-height {
-      height: calc(100vh - 80px);
-    }
-
-    .list-title {
-      width: 100%;
-      // background: #f3f9fe;
-      background: url('~@/assets/newhome/titilebg.png') no-repeat;
-      background-size: 100% 100%;
-      height: 44px;
-      padding: 0 20px;
-      display: flex;
-      line-height: 44px;
-      justify-content: space-between;
-      border-radius: 4px 4px 0 0;
-
-      .list-title-name {
-        font-size: 16px;
-        font-weight: bold;
-        color: #333333;
-      }
-
-      .list-title-more {
-        font-size: 14px;
-        color: #666666;
-        cursor: pointer;
-        display: flex;
-      }
-    }
+    height: 100%;
+    padding: 16px 16px 0 16px;
+    // background-image: url("../assets/pageBg.png"); //背景图
+    background-size: cover; //背景尺寸
+    background-position: center center; //背景位置
   }
-
-  .el-dropdown-menu {
-    margin-top: -20px !important;
-    /*left: 1872px !important;*/
+  //顶部右边装饰效果
+  .title_left {
+    width: 100%;
+    height: 50px;
   }
-
-  .seamless-warp {
-    // width: 100%;
+  //顶部左边装饰效果
+  .title_right {
     width: 100%;
-    overflow: hidden;
-    margin-top: 10px;
+    height: 50px;
+    margin-top: 18px;
   }
-
-  .home-tzthList:nth-of-type(3) {
-    border: none;
+  //顶部中间装饰效果
+  .title_center {
+    width: 100%;
+    height: 50px;
   }
-
-  .home-tzthList {
-    display: flex;
-    padding: 10px;
-    border-bottom: 1px solid #eeeeee;
-
-    .home-tzthList-type {
-      width: 100%;
-      display: flex;
-      font-size: 14px;
-      line-height: 28px;
-      font-weight: bold;
-
-      .home-tzthList-type-title {
-        color: #343434;
-        margin: 0;
-
-        span {
-          cursor: pointer;
-        }
-      }
-
-      .home-tzthList-type-theme {
-        color: #666666;
-        margin: 0;
-        width: 80%;
-        overflow: hidden;
-        white-space: nowrap;
-        text-overflow: ellipsis;
-
-        span {
-          cursor: pointer;
-        }
-      }
-    }
-
-    .home-tzthList-people {
-      display: flex;
-      justify-content: space-between;
-      line-height: 22px;
-
-      .home-tzthList-Personnel,
-      .home-tzthList-timer {
-        font-size: 12px;
-        color: #666666;
-
-        span {
-          cursor: pointer;
-        }
-      }
-    }
+  //顶部中间文字数据可视化系统
+  .title_text {
+    text-align: center;
+    font-size: 24px;
+    font-weight: bold;
+    margin-top: 14px;
+    color: #008cff;
   }
-
-  .noMore {
-    position: absolute;
-    margin: auto;
-    top: 0;
-    bottom: 0;
-    left: 0;
-    right: 0;
+  //时间日期
+  .title_time {
+    text-align: center;
   }
-
-  .ship-list {
+  //中国地图
+  #china-map {
+    height: 660px;
     width: 100%;
-    border-radius: 4px;
-    background-color: #fff;
   }
-
-  //新增的图表的样式
-  .chart {
-    display: flex;
-    flex-wrap: wrap;
-    justify-content: space-between;
+  //中间折线图
+  .line_center {
+    width: 100%;
+    height: 288px;
+  }
+  //左1模块
+  .left_box1 {
+    height: 310px;
+    width: 100%;
     margin-bottom: 10px;
+    position: relative;
   }
-
-  .home-tzthList-timer-left {
-    width: 10%;
-    display: flex;
-    align-items: center;
-
-    img {
-      cursor: pointer;
-      width: 24px;
-      height: 24px;
-      display: block;
-      align-items: center;
-      margin: 0 auto;
-    }
+  //左2模块
+  .left_box2 {
+    height: 310px;
+    width: 100%;
+    margin-bottom: 10px;
   }
-
-  .header {
-    // background: rgb(36, 38, 45);
-    background: #2a2a2a;
-    padding: 20px;
-    box-sizing: border-box;
-    display: flex;
-    justify-content: space-between;
-    align-items: center;
-
-    .right {
-      color: white;
-      font-weight: 700;
-      text-align: center;
-
-      .top {
-        font-size: 14px;
-      }
-
-      .bottom {
-        font-size: 26px;
-      }
-    }
+  //左3模块
+  .left_box3 {
+    height: 310px;
+    width: 100%;
   }
-
-  .chart-card {
-    // background: rgb(36, 38, 45);
-    position: relative;
-    background: #2a2a2a;
-    width: 350px;
-    margin-top: 10px;
-    height: 288px;
-    // height: 288px;
+  //右1模块
+  .right_box1 {
+    height: 310px;
+    width: 100%;
+    margin-bottom: 10px;
   }
-
-  .title2 {
-    pointer-events: auto;
-    display: flex;
-    align-items: center;
-    justify-content: flex-start;
-    color: rgb(255, 255, 255);
-    font-weight: bold;
-    font-family: "Microsoft Yahei", Arial, "sans-serif";
-    font-size: 15px;
-    writing-mode: horizontal-tb;
-    letter-spacing: 0px;
-    text-overflow: ellipsis;
-    white-space: nowrap;
-    overflow: hidden;
-    padding: 10px;
-    box-sizing: border-box;
-
+  //右2模块
+  .right_box2 {
+    height: 310px;
+    width: 100%;
+    margin-bottom: 10px;
   }
-
-  .content2 {
-    // background-color: rgb(27, 28, 30);
-    display: flex;
-    margin-top: 10px;
-    height: calc(100% - 170px);
-
-    h3 {
-      pointer-events: auto;
-      display: flex;
-      align-items: center;
-      justify-content: flex-start;
-      color: rgb(204, 204, 204);
-      font-weight: bold;
-      font-family: "Microsoft Yahei", Arial, "sans-serif";
-      font-size: 24px;
-      writing-mode: horizontal-tb;
-      letter-spacing: 0px;
-      text-overflow: ellipsis;
-      white-space: nowrap;
-      overflow: hidden;
-    }
-
-    .center-map {
-      // background: yellow;
-    }
-
-    .content2-aside {
-      width: 360px;
-      // height: 288px;
-      // background: red;
-    }
-
-    .content2-middle {
-      width: calc(100% - 720px);
-      margin: 0 20px 0 15px;
-      min-width: 910px;
-
-      .left-card {
-        display: flex;
-        // background: green;
-        justify-content: space-evenly;
-
-        .item {
-          background: #2a2a2a;
-          width: 28%;
-          height: 208px;
-          position: relative;
-          padding-left: 20px;
-
-          p:nth-of-type(1) {
-            color: #d5d5d5;
-            position: absolute;
-            bottom: 70px;
-            font-size: 16px;
-          }
-
-          p:nth-of-type(2) {
-            position: absolute;
-            bottom: 0px;
-
-            .number {
-              color: #50cad4;
-              font-size: 53px;
-              font-weight: 700;
-            }
-
-            .number-text {
-              color: #d5d5d5;
-            }
-          }
-        }
-      }
-
-    }
+  //右3模块
+  .right_box3 {
+    height: 310px;
+    width: 100%;
   }
-
-  .home {
-    background: #2a2a2a;
-    padding-bottom: 20px
+  //左1模块-玫瑰饼图
+  #Rose_diagram {
+    height: 70%;
+    width: 55%;
   }
-
-  .home .body-middle-height {
-    height: auto;
+  //左1模块-圆环图
+  .left_box1_rose_right {
+    height: 85%;
+    width: 55%;
+    position: absolute;
+    right: 0;
+    top: 0;
   }
-
-  .content2-map {
-    margin: 0;
+  //左1模块-文字部分
+  .rose_text {
+    display: inline-block;
+    margin-top: 4%;
+    margin-left: 4%;
   }
-
-  .content3 {
-    display: flex;
-    justify-content: space-between;
-    align-items: center;
-    background: #2a2a2a;
-    padding: 10px;
-
-    .content3-number {
-      margin-left: 40px;
-    }
-
-    .blue {
-      font-size: 30px;
-      color: #50cad4;
-      font-weight: 600;
-    }
-
-    .yellow {
-      font-size: 30px;
-      color: #ffa523;
-      font-weight: 600;
-    }
-
-    .left,
-    .right {
-      display: flex;
-      align-items: center;
-      color: #d5d5d5;
-    }
-
-    img {
-      display: inline-block;
-      width: 35px;
-      height: 35px;
-    }
-
+  // 左1模块-￥符号样式
+  .coin {
+    font-size: 20px;
+    color: #ffc107;
   }
-
-  .bottom-tip {
-    position: absolute;
-    z-index: 11;
-    color: #8c8c8d;
-    right: 10px;
-    bottom: 10px;
+  //左1模块-（件）样式
+  .colorYellow {
+    color: yellowgreen;
+  }
+  //左1模块-数字样式
+  .rose_text_nmb {
+    font-size: 20px;
+    color: #00b891;
+  }
+  //左2模块 柱状图
+  #columnar {
+    height: 97%;
+    width: 95%;
+    margin-left: 3%;
+    margin-top: 5px;
+  }
+  //折线图
+  #line_center_diagram {
+    height: 100%;
+    width: 100%;
+  }
+  //轮播表格
+  .carousel_list {
+    width: 96%;
+    height: 98%;
+    margin-left: 10px;
+  }
+  //虚线柱状图
+  #dotter_bar {
+    width: 100%;
+    height: 100%;
   }
-  .el-switch{
-    position: fixed;
-    top: 10px;
-    left: 50%;
+  //锥形图
+  .cone_box {
+    width: 95%;
+    height: 97%;
+    margin-left: 3%;
   }
+}
 </style>

src/views/profitable/receipt.vue

@@ -24,9 +24,9 @@
           </el-form-item>
           <el-form-item label-width='100px' v-if='deptBudgetList.purpose=="合同费用"' label="类型" span="1" prop="contractNo" class="readonly">
             <ws-select v-model="deptBudgetList.type" placeholder="" class="typeselect" >
-                <ws-option label="粮款" value="1" style="color: #8890b1" />
-                <ws-option label="非粮款" value="2" style="color: #8890b1" />
-                <ws-option label="保证金" value="3" style="color: #8890b1" />
+                <ws-option label="粮款" value="粮款" style="color: #8890b1" />
+                <ws-option label="非粮款" value="非粮款" style="color: #8890b1" />
+                <ws-option label="保证金" value="保证金" style="color: #8890b1" />
             </ws-select>
           </el-form-item>
            <el-form-item label-width='100px' v-if='deptBudgetList.purpose=="合同费用"' label="合同编号" span="1" prop="contractNo" class="readonly">