lemonBeans_ui/src/views/index.vue

<template>
  <div class="app-container home">
    <ul class="block">
      <li @click="jump('/business/inStock')">
        <div>
          <i class="el-icon-download" style="font-size: 50px;text-align: center"></i>
          <p>入库</p>
        </div>
      </li>
      <li @click="jump('/business/outStock')">
        <div>
          <i class="el-icon-upload2" style="font-size: 50px;text-align: center"></i>
          <p>出库</p>
        </div>
      </li>
      <li @click="jump('/basicdata/corps')">
        <div>
          <i class="el-icon-s-custom" style="font-size: 50px;text-align: center"></i>
          <p>新增用户</p>
        </div>
      </li>
      <li @click="jump('/basicdata/goods')">
        <div>
          <i class="el-icon-s-cooperation" style="font-size: 50px;text-align: center"></i>
          <p>新增商品</p>
        </div>
      </li>
      <li @click="jump('/business/transfer')">
        <div>
          <i class="el-icon-connection" style="font-size: 50px;text-align: center"></i>
          <p>调拨</p>
        </div>
      </li>
      <li @click="jump('/finance/charge')">
        <div>
          <i class="el-icon-wallet" style="font-size: 50px;text-align: center"></i>
          <p>收款</p>
        </div>
      </li>
      <li @click="jump('/finance/payment')">
        <div>
          <i class="el-icon-money" style="font-size: 50px;text-align: center"></i>
          <p>付款</p>
        </div>
      </li>
      <li @click="jump('/finance/contrast')">
        <div>
          <i class="el-icon-s-management" style="font-size: 50px;text-align: center"></i>
          <p>对账</p>
        </div>
      </li>
      <li @click="jump('/business/goodsTransfer')">
        <div>
          <i class="el-icon-takeaway-box" style="font-size: 50px;text-align: center"></i>
          <p>货转</p>
        </div>
      </li>
      <li @click="jump('/agreement/agreementStorage')">
        <div>
          <i class="el-icon-s-order" style="font-size: 50px;text-align: center"></i>
          <p>协议</p>
        </div>
      </li>
    </ul>
    <div style="width: 30%;float: right">
      <div style="display: flex;">
        <div id="box" style="width:100%;height:350px;"></div>

        <el-select v-model="select" slot="prepend" size="mini" :select="query()" placeholder="点击切换仓库"
                   style="position:absolute; width: 8%;right: 1%;"
        >
          <div v-for="(item, index) in warehouse" :key="index">
            <el-option :label="item.fName" :value="item.fWarehouseid"></el-option>
          </div>
        </el-select>
      </div>
    </div>
    <div style="width: 100%;margin-bottom: 50px;">
      <el-table :data="tableData" :header-cell-style="{borderBottom:'1px dashed #dfe6ec'}" :cell-style="cellStyle"
                style="width: 67.5%;float: left;"
      >
        <el-table-column prop="name" label="待办事宜">
        </el-table-column>
        <el-table-column prop="date" label="时间"></el-table-column>
        <el-table-column prop="address" label="操作" width="80"></el-table-column>
      </el-table>
      <el-table :data="tableDataTwo" :header-cell-style="{borderBottom:'1px dashed #dfe6ec'}" :cell-style="cellStyle"
                style="width: 30%;float: right;margin-left: 20px;"
      >
        <el-table-column prop="noticeTitle" :show-overflow-tooltip="true" label="消息中心"/>
        <el-table-column prop="address" label="操作" width="80">
          <span @click="bug()" style="cursor:pointer">查看详情</span>
          <template slot-scope="scope">
            <span @click="bug(scope.row.noticeContent)" style="cursor:pointer">查看详情</span>
          </template>
        </el-table-column>
      </el-table>
    </div>
    <div style="width: 100%;float: left;margin-top:20px;">
      <div style="display: flex;">
        <div id="box_s" style="width:33%;height:350px;"></div>
        <div id="box_" style="width:33%;height:350px;"></div>
        <div id="box_ss" style="width:30%;height:350px;margin-left: 40px"></div>
      </div>
    </div>
    <el-dialog
      title="消息提示"
      :visible.sync="dialogVisible"
      width="80%"
      :before-close="handleClose"
      :close-on-click-modal="false"
    >
      <span v-html="text" class="text" style="max-width: 100%;height: auto;"></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>
    <el-button type="primary" @click="addOrUpdateHandle">点击我</el-button>
    <!-- 弹窗, 新增 / 修改 -->
    <add-or-update v-if="addOrUpdateVisible" ref="addOrUpdate" @refreshDataList="getDataList" :dataForm="editModel"></add-or-update>
  </div>
</template>

<script>
import { listCorps, information, warehouse } from '../../src/api/index'
import AddOrUpdate from '@/views/viewApproval'
// import AddOrUpdate from '@/views/system/toConfigure/auditPaths-add-or-update'
export default {
  name: 'index',
  data() {
    return {
      editModel: {},
      // 版本号
      version: '3.2.1',
      select: '',
      text: '',
      dialogVisible: false,
      addOrUpdateVisible: false,
      tableData: [{
        date: '2020-11-20 12:00',
        name: '某客户账单审核',
        address: '查看详情'
      }, {
        date: '2020-11-20 12:00',
        name: '某客户账单审核',
        address: '查看详情'
      }, {
        date: '2020-11-20 12:00',
        name: '仓储费审核结算审核',
        address: '查看详情'
      }],
      chart: [],
      warehouse: [],
      master: [],
      commodity: [],
      commoditytwo: [],
      name: [],
      tableDataTwo: []
    }
  },
  components: {
    AddOrUpdate
  },
  mounted() {

  },
  created() {
    this.getList()
    this.warehouses()
    this.firstinventory()
  },
  methods: {
    addOrUpdateHandle(){
      this.addOrUpdateVisible = true
      let id = '448'
      let actId = '110'
      this.$nextTick(() => {
        this.$refs.addOrUpdate.init(id,actId)
      })
    },
    getDataList(){
      this.dataListLoading = true
    },
    bug(res) {
      this.dialogVisible = true
      this.text = res
    },
    handleClose(done) {
      // console.log(done)
      this.dialogVisible = false
    },
    firstinventory() {
      information(0).then(response => {
        console.log(response)
        this.chart = response.data
        for (let index of this.chart.corpsListWhouse) {
          this.master.push({
            name: index.fName,
            value: index.fGrossweightD
          })
          this.name.push(index.fName)
        }
        for (let index of this.chart.goodslistWhouse) {
          this.commodity.push(index.fName)
          this.commoditytwo.push(index.fGrossweightD)
        }

        this.drawLine()
        this.drawLinetwo()
        this.drawLine_ss()
        this.drawLinetwos()
      })
    },
    query() {
      this.master = []
      this.commodity = []
      this.commoditytwo = []
      this.name = []
      if (this.select === '') {
        return this.select
      } else {
        information(this.select).then(response => {
          console.log(response)
          this.chart = response.data
          for (let index of this.chart.corpsListWhouse) {
            this.master.push({
              name: index.fName,
              value: index.fGrossweightD
            })
            this.name.push(index.fName)
          }
          for (let index of this.chart.goodslistWhouse) {
            this.commodity.push(index.fName)
            this.commoditytwo.push(index.fGrossweightD)
          }
          this.drawLine()
          this.drawLinetwo()
          this.drawLine_ss()
        })
      }
    },
    jump(res) {
      this.$router.push({ path: res })
    },
    //设置单元格边框
    cellStyle({ row, column, rowIndex, columnIndex }) {
      return 'border-bottom: 1px dashed rgb(223, 230, 236)'
    },
    //查询消息中心
    getList() {
      this.loading = true
      listCorps(this.queryParams).then(response => {
        this.tableDataTwo = response.rows
      })
    },
    //查询仓库
    warehouses() {
      warehouse().then(response => {
        this.warehouse = []
        for (let index of response.rows) {
          this.warehouse.push({
            fName: index.fName,
            fWarehouseid: index.fWarehouseid
          })
        }
      })
    },
    goTarget(href) {
      window.open(href, '_blank')
    },
    //仓库图表
    drawLine() {
      // 基于准备好的dom，初始化echarts实例，所以只能在mounted中调用
      let myChart = this.$echarts.init(document.getElementById('box'))
      // 绘制图表
      myChart.setOption({
        title: {
          text: this.chart.whouseList[0].fName + '统计',
          subtext: '实时数据',
          left: 'center'
        },
        tooltip: {
          trigger: 'item',
          formatter: '{a} <br/>{b} : {c} ({d}%)'
        },
        legend: {
          bottom: 10,
          left: 'center',
          data: ['空闲库容', '占用库容']
        },
        series: [
          {
            type: 'pie',
            name: '实时数据',
            radius: '65%',
            center: ['50%', '50%'],
            selectedMode: 'single',
            data: [
              {
                label: {
                  backgroundColor: '#eee',
                  borderColor: '#777',
                  borderWidth: 1,
                  borderRadius: 4,
                  rich: {
                    title: {
                      color: '#eee',
                      align: 'center'
                    },
                    abg: {
                      backgroundColor: '#333',
                      width: '100%',
                      align: 'right',
                      height: 25,
                      borderRadius: [4, 4, 0, 0]
                    },
                    Sunny: {
                      height: 30,
                      align: 'left'
                    },
                    Cloudy: {
                      height: 30,
                      align: 'left'
                    },
                    Showers: {
                      height: 30,
                      align: 'left'
                    },
                    weatherHead: {
                      color: '#333',
                      height: 24,
                      align: 'left'
                    },
                    hr: {
                      borderColor: '#777',
                      width: '100%',
                      borderWidth: 0.5,
                      height: 0
                    },
                    value: {
                      width: 20,
                      padding: [0, 20, 0, 30],
                      align: 'left'
                    },
                    valueHead: {
                      color: '#333',
                      width: 20,
                      padding: [0, 20, 0, 30],
                      align: 'center'
                    },
                    rate: {
                      width: 40,
                      align: 'right',
                      padding: [0, 10, 0, 0]
                    },
                    rateHead: {
                      color: '#333',
                      width: 40,
                      align: 'center',
                      padding: [0, 10, 0, 0]
                    }
                  }
                }
              },
              { value: this.chart.whouseList[0].fGrossweightD, name: '占用库容' },
              { value: parseFloat(this.chart.whouseList[0].fTotalgross - this.chart.whouseList[0].fGrossweightD).toFixed(1), name: '空闲库容' }
            ],
            emphasis: {
              itemStyle: {
                shadowBlur: 10,
                shadowOffsetX: 0,
                shadowColor: 'rgba(0, 0, 0, 0.5)'
              }
            }
          }
        ]
      })
    },
    drawLinetwos() {
      // 基于准备好的dom，初始化echarts实例，所以只能在mounted中调用
      let myChart = this.$echarts.init(document.getElementById('box_'))
      // 绘制图表
      myChart.setOption({
        title: {
          text: '数据统计',
          subtext: '实时数据',
          left: 'center'
        },
        tooltip: {
          trigger: 'item',
          formatter: '{a} <br/>{b}: {c} ({d}%)'
        },
        legend: {
          bottom: 10,
          left: 'center',
          data: this.name
        },
        series: [
          {
            name: '访问来源',
            type: 'pie',
            radius: ['40%', '60%'],
            avoidLabelOverlap: false,
            label: {
              show: false,
              position: 'center'
            },
            emphasis: {
              label: {
                // show: true,
                fontSize: '30',
                fontWeight: 'bold'
              }
            },
            labelLine: {
              show: false
            },
            data:
            this.master
          }
        ]
      })
    },
    drawLinetwo() {
      // 基于准备好的dom，初始化echarts实例，所以只能在mounted中调用
      let myChart = this.$echarts.init(document.getElementById('box_s'))
      // 绘制图表
      myChart.setOption({
        title: {
          text: this.chart.whouseList[0].fName + '货权方统计',
          subtext: '实时数据',
          left: 'center'
        },
        tooltip: {
          trigger: 'item',
          formatter: '{a} <br/>{b}: {c} ({d}%)'
        },
        legend: {
          bottom: 10,
          left: 'center',
          data: this.name
        },
        series: [
          {
            name: '访问来源',
            type: 'pie',
            radius: ['40%', '60%'],
            avoidLabelOverlap: false,
            label: {
              show: false,
              position: 'center'
            },
            emphasis: {
              label: {
                // show: true,
                fontSize: '30',
                fontWeight: 'bold'
              }
            },
            labelLine: {
              show: false
            },
            data:
            this.master
          }
        ]
      })
    },
    drawLine_ss() {
      // 基于准备好的dom，初始化echarts实例，所以只能在mounted中调用
      let myChart = this.$echarts.init(document.getElementById('box_ss'))
      // 绘制图表
      myChart.setOption({
        title: {
          text:this.chart.whouseList[0].fName + '商品统计',
          subtext: '实时数据',
          left: 'center'
        },
        color: ['#3398DB'],
        tooltip: {
          trigger: 'axis',
          axisPointer: {            // 坐标轴指示器，坐标轴触发有效
            type: 'shadow'        // 默认为直线，可选为：'line' | 'shadow'
          }
        },
        grid: {
          left: '3%',
          right: '4%',
          bottom: '3%',
          containLabel: true
        },
        xAxis: [
          {
            type: 'category',
            data: this.commodity,
            axisTick: {
              alignWithLabel: true
            }
          }
        ],
        yAxis: [
          {
            type: 'value'
          }
        ],
        series: [
          {
            name: '实时状态',
            type: 'bar',
            barWidth: '60%',
            data: this.commoditytwo
          }
        ]
      })
    }
  }
}
</script>

<style scoped lang="scss">
.block {
  width: 68%;
  float: left;
  display: flex;
  flex-wrap: wrap;
  justify-content: space-around;
  height: 350px;
  li:hover{
    background-color: #025184;
  }
  li:nth-child(6),li:nth-child(7),li:nth-child(8),li:nth-child(9),li:nth-child(10){
    background-color: #2f4554;
  }
  li:nth-child(6):hover,li:nth-child(7):hover,li:nth-child(8):hover,li:nth-child(9):hover,li:nth-child(10):hover{
    background-color: #2f4454d1;
  }
  li {
    width: 18%;
    height: 150px;
    background-color: #1c84c6;
    margin-left: 10px;
    text-align: center;
    color: #FFFFFF;
    border-radius: 10px;
    cursor:pointer;
    div {
      margin-top: 40px;

      p {
        font-size: 20px;
      }
    }
  }
}

.home {
  blockquote {
    padding: 10px 20px;
    margin: 0 0 20px;
    font-size: 17.5px;
    border-left: 5px solid #eee;
  }

  hr {
    margin-top: 20px;
    margin-bottom: 20px;
    border: 0;
    border-top: 1px solid #eee;
  }

  .col-item {
    margin-bottom: 20px;
  }

  ul {
    padding: 0;
    margin: 0;
  }

  font-family: "open sans", "Helvetica Neue", Helvetica, Arial, sans-serif;
  font-size: 13px;
  color: #676a6c;
  overflow-x: hidden;

  ul {
    list-style-type: none;
  }

  h4 {
    margin-top: 0px;
  }

  h2 {
    margin-top: 10px;
    font-size: 26px;
    font-weight: 100;
  }

  p {
    margin-top: 10px;

    b {
      font-weight: 700;
    }
  }

  .update-log {
    ol {
      display: block;
      list-style-type: decimal;
      margin-block-start: 1em;
      margin-block-end: 1em;
      margin-inline-start: 0;
      margin-inline-end: 0;
      padding-inline-start: 40px;
    }
  }
}
</style>
<style>
.text img {
  max-width: 100%;
  height: auto;
}
</style>