yxt-supervise-gd36524-ui/src/views/mortgage/yqpb.vue

<template>
  <div class="yxt-containers">
    <div class="yxt-header">
      <h3>一起拼搏(汇融惠享项目)</h3>
    </div>
    <div class="yxt-main">
      <div class="yxt-main-ha">
        <div class="cont-vb">
          <div class="cont-box">
            <el-card class="box-card">
              <div slot="header" class="clearfix">
                <span>累计定货量</span>
              </div>
              <div>
                米类 XX吨<br />
                面类 XX吨<br />
                油类 XX吨<br />
              </div>
            </el-card>
          </div>
        </div>
        <div class="cont-va">
          <div class="cont-box">
            <el-card class="box-card">
              <div slot="header" class="clearfix">
                <span>上月总定货量</span>
              </div>
              <div>
                米类 XX吨<br />
                面类 XX吨<br />
                油类 XX吨<br />
              </div>
            </el-card>
          </div>
        </div>
        <div class="cont-va">
          <div class="cont-box">
            <el-card class="box-card">
              <div slot="header" class="clearfix">
                <span>本月总定货量</span>
              </div>
              <div>
                米类 XX吨<br />
                面类 XX吨<br />
                油类 XX吨<br />
              </div>
            </el-card>
          </div>
        </div>
      </div>
      <div class="yxt-main-hb">
        <div class="cont-vc">
          <div class="cont-box">
            <el-card class="box-card">
              <div slot="header" class="clearfix">
                <span>仓内平面图</span>
              </div>
              <div>
              </div>
            </el-card>
          </div>
        </div>
        <div class="cont-va">
          <div class="cont-box">
            <el-card class="box-card">
              <div slot="header" class="clearfix">
                <span>餐饮企业定货量</span>
              </div>
              <div>
                米类 XX吨<br />
                面类 XX吨<br />
                油类 XX吨<br />
              </div>
            </el-card>
          </div>
        </div>
      </div>
      <div class="yxt-main-ha">
        <div class="cont-vb">
          <div class="cont-box">
            <el-card class="box-card">
              <div slot="header" class="clearfix">
                <span>本月目标数</span>
              </div>
              <div>
                米类 XX吨<br />
                面类 XX吨<br />
                油类 XX吨<br />
              </div>
            </el-card>
          </div>
        </div>
        <div class="cont-va">
          <div class="cont-box">
            <el-card class="box-card">
              <div slot="header" class="clearfix">
                <span>现场视频</span>
              </div>
              <div>
              </div>
            </el-card>
          </div>
        </div>
        <div class="cont-va">
          <div class="cont-box">
            <el-card class="box-card">
              <div slot="header" class="clearfix">
                <span>支行排行</span>
              </div>
              <div>
                XX支行 XX吨<br />
                XX支行 XX吨<br />
                XX支行 XX吨<br />
              </div>
            </el-card>
          </div>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
  import req from '@/api/gd36524/store'
  import barlineEachartsVue from "../echarts/barlineEacharts.vue";
  import pieLineEachartsVue from "../echarts/pieLineEacharts.vue";
  import {
    getDateRang
  } from '@/utils/index'
  export default {
    components: {
      barlineEachartsVue,
      pieLineEachartsVue
    },
    data() {
      return {
        times: getDateRang('yesterday'),
        warehouse: [{
          value: "选项1",
          label: "常温仓",
        }],
        wareValue: "常温仓",
        day: [{
          value: "选项1",
          label: "15日",
        }],
        dayValue: "15日",
        dialogVisible: false,
        videos: true,
        lookvideo: false,
        dialogImageJK: false,
        info: {
          creditLimit: "--",
          useLimit: "--",
          accountsBalance: "--",
          accountsReceivable: "--",
          stockAmount: "--",
          transitAmount: "--",
          advancePayment: "--",
        },
        chartData: {
          pledgeRatePercent: "",
          state: "",
          bankPledgeRate: "",
          data: []
        },
        cameraList: [],
        cameraInfo: {
          name: ""
        },
        StatusCountInfo: {
          //offline离线  online在线
          offline: "0",
          online: "0"
        },
        spUrl: "",
        inventoryInfo: {
          mendian: "--",
          changwencang: "--",
        },
        chartData2: {
          date: [],
          changwencang: [],
          gongyinglian: [],
        },
        inventoryList: [

        ]
      };
    },
    created() {
      this.loadList()
      this.getOtherList();
      this.getStatusCount();
      this.getInventory()
      this.getReportInventory()
    },
    methods: {
      getReportInventory() {
        req.getReportInventory().then(res => {
          console.log('getReportInventory:', res)

          this.chartData2 = {
            date: res.data.date,
            changwencang: res.data.changwencang,
            gongyinglian: res.data.gongyinglian,
            cancipin: res.data.cancipin,
            mendian: res.data.mendian,
            ycMendian: res.data.ycMendian,

          }
        }).catch(e => {
          console.log('GdinventoryLog-loadList-ee:', e)
        })
      },
      getInventory() {
        req.getInventory(this.times).then(res => {
          console.log('getInventory:', res)

          this.inventoryList = res.data
        }).catch(e => {
          console.log('GdinventoryLog-loadList-ee:', e)
        })
      },
      handleCloseJK() {
        this.dialogImageJK = false
      },
      getStatusCount() {
        req.getStatusCount().then(res => {
          console.log('getStatusCount:', res)
          this.StatusCountInfo = res.data


        }).catch(e => {
          console.log('GdinventoryLog-loadList-ee:', e)
        })
      },
      getOtherList() {
        req.getOtherList().then(res => {
          console.log('getOtherList:', res)
          this.cameraList = res.data

          this.cameraInfo = res.data[0]
          this.getVedioPcLiveById(res.data[0].id)


        }).catch(e => {
          console.log('GdinventoryLog-loadList-ee:', e)
        })
      },

      // 实时
      getVedioPcLiveById(id) {
        req.getVedioPcLiveById(id).then(res => {
          console.log('getVedioPcLiveById:', res)
          this.spUrl = res.data


        }).catch(e => {
          console.log('GdinventoryLog-loadList-ee:', e)
        })
      },

      // 回放
      getVedioPcRecById(id) {
        req.getVedioPcRecById(id).then(res => {
          console.log('getVedioPcRecById:', res)
          this.spUrl = res.data


        }).catch(e => {
          console.log('GdinventoryLog-loadList-ee:', e)
        })
      },


      loadList() {

        var params = {
          orderDate: this.times
        }

        console.log('params:', params)

        req.getProjectDaily(params).then(res => {
          console.log('getProjectDaily:', res)
          if (res.data) {
            this.info = res.data

            this.chartData = {

              pledgeRatePercent: res.data.pledgeRatePercent,
              state: res.data.state,
              bankPledgeRate: res.data.bankPledgeRate,
              data: [{
                  value: res.data.accountsBalance,
                  legendname: '种类01',
                  name: "账户余额",
                  itemStyle: {
                    color: "#5087ec"
                  }
                },
                {
                  value: res.data.accountsReceivable,
                  legendname: '种类02',
                  name: "应收账款",
                  itemStyle: {
                    color: "#68bbc4"
                  }
                },
                {
                  value: res.data.stockAmount,
                  legendname: '种类03',
                  name: "物质库存价值",
                  itemStyle: {
                    color: "#58a55c"
                  }
                },
                {
                  value: res.data.transitAmount,
                  legendname: '种类04',
                  name: "在途货物价值",
                  itemStyle: {
                    color: "#f2bd42"
                  }
                },
                {
                  value: res.data.advancePayment,
                  legendname: '种类05',
                  name: "预付款",
                  itemStyle: {
                    color: "#ee752f"
                  }
                },
              ]
            }

          } else {
            this.info = {}

            this.chartData = {
              pledgeRatePercent: "",
              state: "",
              bankPledgeRate: "",
              data: []
            }
          }

        }).catch(e => {
          console.log('GdinventoryLog-loadList-ee:', e)
        })

      },

      selectTime(val) {
        console.log('val:', val)
        this.times = val
        this.loadList()
        this.getInventory()
        // this.getOtherList();
        // this.getStatusCount();
      },

      cameraClock(index) {
        var item = this.cameraList[index]
        this.cameraInfo = item
        this.getVedioPcLiveById(item.id)

      },

      cameraType() {
        console.log('cameraInfo:', this.cameraInfo)
        this.videos = !this.videos

        if (this.videos) {
          this.getVedioPcLiveById(this.cameraInfo.id)
        } else {
          this.getVedioPcRecById(this.cameraInfo.id)
        }


      },
      clivideo() {

        // this.lookvideo = true

        this.dialogImageJK = true
      },

    }
  };
</script>
<style lang="scss" scoped>
  .yxt-containers {
    display: flex;
    background-color: #040C2B;
    color: #39D6FE;
    flex-direction: column;
    width: 100%;
    height: 100%;
    margin: 0px;
    padding: 0px;
  }

  .yxt-header {
    display: flex;
    width: 100%;
    height: 60px;
    margin: 0px;
    padding: 5px;
  }

  .yxt-main {
    display: flex;
    flex-direction: row;
    width: 100%;
    height: 100%;
    margin: 0px;
    padding: 0px;
  }

  .yxt-main-ha {
    display: flex;
    flex-direction: column;
    width: 30%;
    height: 100%;
    margin: 0px;
    padding: 10px;
  }

  .yxt-main-hb {
    display: flex;
    flex-direction: column;
    width: 40%;
    height: 100%;
    margin: 0px;
    padding: 10px;
  }

  .cont-va {
    display: flex;
    flex-direction: column;
    width: 100%;
    height: 33%;
    margin: 0px;
    padding: 10px;
  }

  .cont-vb {
    display: flex;
    flex-direction: column;
    width: 100%;
    height: 34%;
    margin: 0px;
    padding: 10px;
  }

  .cont-vc {
    display: flex;
    flex-direction: column;
    width: 100%;
    height: 67%;
    margin: 0px;
    padding: 10px;
  }

  .cont-box {
    display: flex;
    flex-direction: column;
    width: 100%;
    height: 100%;
    padding: 10px;
    background-color: #6082fc;
  }

  .cont-v {
    display: flex;
    flex-direction: column;
    width: 100%;
    height: 100%;
  }

  .cont-box {
    width: 100%;
    height: 100%;
    background-color: #6082fc;
    margin-bottom: 5px;
  }

  .mortgage {
    background-color: #040C2B;
    width: 100%;
    height: 100%;
    box-sizing: border-box;
    padding: 0px 20px 20px 20px;
    display: flex;
    flex-direction: column;
    position: relative;

    .mortgage_tit {
      line-height: 50px;
      font-size: 24px;
      font-weight: bold;
      color: #39D6FE;
    }

    .mortgage_top {
      width: 100%;
      height: 60%;
      position: relative;
      display: flex;
      justify-content: space-between;
      margin-bottom: 40px;

      .mortgage_top_item {
        height: 100%;
        position: relative;
        background-color: #031249;
        padding: 15px;


        &:nth-of-type(1) {
          width: 26%;
          box-sizing: border-box;
          padding-right: 30px;

          ::v-deep .el-select {
            width: 150px;
            color: #fff;

            .el-input {
              .el-input__inner {
                color: #fff;
                background: transparent;
                border: none;
              }
            }
          }

          .mortgage_top_item_tit_right {
            flex: 1;
            position: relative;
            justify-content: right;

            .el-select {
              color: #fff;
            }

            ::v-deep .el-date-editor {
              width: 150px;

              .el-input__inner {
                color: #fff;
                background: transparent;
                border: none;
              }

              .el-input__prefix {
                display: none;
              }
            }

            &::before {
              content: "";
              position: absolute;
              width: 100%;
              height: 100%;
              bottom: 5px;
              border-bottom: solid 4px #fff;
            }
          }
        }

        &:nth-of-type(2) {
          width: 73%;
          box-sizing: border-box;
          padding-right: 50px;

          .mortgage_top_item_tit {
            .mortgage_top_item_tit_left {
              width: auto;
              margin-right: 10px;
              color: #fff;
            }
          }

          ::v-deep .el-select {
            width: 150px;

            .el-input {
              .el-input__inner {
                color: #fff;
                background: transparent;
                border: none;
              }
            }
          }
        }

        .mortgage_top_item_tit_right {
          flex: 1;
          position: relative;
          justify-content: right;
          color: #fff;

          .el-select {
            color: #fff;
          }

          &::before {
            content: "";
            position: absolute;
            width: 100%;
            height: 100%;
            bottom: 5px;
            border-bottom: solid 4px #fff;
            ;
          }
        }

        .mortgage_top_item_tit {
          height: 40px;
          display: flex;
          position: relative;
          justify-content: space-between;

          .mortgage_top_item_tit_left {
            width: auto;
            height: 100%;
            display: flex;
            align-items: center;
            margin-right: 10px;
            font-size: 20px;

            span {
              margin-right: 10px;
            }

            ::v-deep .svg-icon {
              cursor: pointer;
              width: 24px !important;
              height: 24px !important;
            }
          }

          .mortgage_top_item_tit_right {
            width: 50%;
            height: 100%;
            display: flex;
            justify-content: right;
            align-items: center;

            .el-select {
              color: #fff;
            }

            span {
              color: #fff;
              margin-right: 20px;
            }
          }
        }

        .mortgage_top_item_coner {
          width: 100%;
          height: calc(100% - 40px);
          position: relative;

          .mortgage_top_item_coner_eat {
            width: 100%;
            height: 90%;
          }

          .mortgage_top_item_coner_con {
            width: 100%;
            height: 8%;
            display: flex;
            margin-top: -10px;
            margin-bottom: 10px;
            align-items: center;
            box-sizing: border-box;
            padding-left: 30px;
            padding-right: 30px;
            justify-content: space-between;

            span {
              color: #49a6e2;
              font-weight: bold;
              font-size: 18px;
            }
          }
        }

        .mortgage_top_item_top {
          width: 100%;
          height: 85%;
          position: relative;

          img {
            width: 100%;
            height: 100%;
          }

          .mortgage_top_item_top_btn1 {
            //二通道
            // z-index: 100;
            position: absolute;
            top: 83%;
            left: 71%;
            width: 7.5%;
            height: 9%;
            background-color: #f0f;
            /*设置透明度，0为完全透明，1为不透明*/
            // opacity: 0;
          }

          .mortgage_top_item_top_btn2 {
            //  三通道
            // z-index: 100;
            position: absolute;
            top: 83.5%;
            left: 58.5%;
            width: 8%;
            height: 8%;
            background-color: #ff0;
            /*设置透明度，0为完全透明，1为不透明*/
            // opacity: 0;
          }

          .mortgage_top_item_top_btn3 {
            //  四通道
            // z-index: 100;
            position: absolute;
            top: 83%;
            left: 47%;
            width: 7%;
            height: 9%;
            background-color: #00f;
            /*设置透明度，0为完全透明，1为不透明*/
            // opacity: 0;
          }

          .mortgage_top_item_top_btn4 {
            //  一通道
            // z-index: 100;
            position: absolute;
            top: 83.5%;
            left: 82.5%;
            width: 7.5%;
            height: 8%;
            background-color: #0ff;
            /*设置透明度，0为完全透明，1为不透明*/
            // opacity: 0;
          }
        }

        .mortgage_top_item_cons {
          width: 100%;
          height: calc(100% - 50px);
          position: relative;
          display: flex;
          justify-content: space-between;

          .mortgage_top_item_cons_left {
            width: 58%;
            height: 100%;
            position: relative;
          }

          .mortgage_top_item_cons_right {
            width: 40%;
            height: 100%;
            box-sizing: border-box;
            padding-left: 30px;
            position: relative;

            .mortgage_top_item_cons_right_top {
              height: 50%;
              width: 100%;
              margin-bottom: 10px;
              position: relative;

              .mortgage_top_item_cons_right_top_video {
                width: 100%;
                height: 90%;
                position: relative;

                img {
                  width: 100%;
                  height: 100%;
                }
              }

              .mortgage_top_item_cons_right_top_foor {
                margin-top: 35px;
                width: 100%;
                height: 10%;
                display: flex;
                position: relative;

                .invie {
                  width: auto;
                  height: 100%;
                  color: #fff;
                  display: flex;
                  align-items: center;
                }

                .huishie {
                  flex: 1;
                  z-index: 100;
                  height: 100%;
                  display: flex;
                  color: #fff;
                  align-items: center;
                  justify-content: right;

                  span {
                    margin-left: 10px;
                  }
                }
              }
            }

            .mortgage_top_item_cons_right_bom {
              height: calc(50% - 10px);
              width: 100%;
              position: relative;
              margin-top: 50px;

              .titele {
                width: 100%;
                height: 40px;
                display: flex;
                align-items: center;

                .titele_left {
                  color: #fff;
                  width: auto;
                  height: 100%;
                  line-height: 40px;
                  margin-right: 5px;
                }

                .titele_right {
                  flex: 1;
                  position: relative;
                  height: 100%;

                  &::after {
                    content: "";
                    position: absolute;
                    bottom: 13px;
                    left: 0px;
                    width: 100%;
                    height: 100%;
                    border-bottom: solid 4px #dadada;
                  }
                }
              }

              .containers {
                width: 100%;
                height: calc(100% - 80px);
                position: relative;
                display: flex;
                background: transparent;
                justify-content: center;
                flex-wrap: wrap;
                margin-top: 10px;

                .container_item1 {
                  width: 100%;
                  height: 30px;
                  line-height: 30px;
                  color: #E43961;
                  font-size: 16px;
                  font-family: '微软雅黑';
                  box-sizing: border-box;
                  padding-left: 20px;

                  span {
                    margin-left: 10px;
                  }
                }

                .container_item2 {
                  width: 100%;
                  height: 30px;
                  line-height: 30px;
                  color: #A0D090;
                  font-size: 16px;
                  font-family: '微软雅黑';
                  box-sizing: border-box;
                  padding-left: 20px;

                  span {
                    margin-left: 10px;
                  }
                }
              }
            }
          }
        }

        .mortgage_top_item_bom {

          height: 15%;
          width: 100%;
          display: flex;
          position: relative;

          .mortgage_top_item_bom_left {
            display: flex;
            width: auto;
            height: 100%;
            margin-top: -25px;
            align-items: flex-end;

            .mortgage_top_item_bom_left_item {
              width: 130px;
              display: flex;
              height: 45px;
              cursor: pointer;
              background: #018ad2;
              color: #fff;
              justify-content: center;
              align-items: center;
              border-right: solid 1px #dadada;

              ::v-deep .svg-icon {
                cursor: pointer;
                width: 16px !important;
                height: 16px !important;
              }

              &:nth-of-type(1) {
                span {
                  width: 30px;
                  height: 30px;
                  display: flex;
                  align-items: center;
                  justify-content: center;
                  border-radius: 50%;
                  background: #11c155;
                  margin-right: 5px;
                }
              }

              &:nth-of-type(2) {
                span {
                  width: 30px;
                  height: 30px;
                  border-radius: 50%;
                  background: #f57f19;
                  margin-right: 5px;
                }
              }

              &:nth-of-type(3) {
                span {
                  width: 30px;
                  height: 30px;
                  border-radius: 50%;
                  background: #5b9cf7;
                  margin-right: 5px;
                }
              }
            }
          }

          .mortgage_top_item_bom_right {
            flex: 1;
            margin-top: -25px;
            height: 100%;
            display: flex;
            align-items: flex-end;
            justify-content: right;

            .mortgage_top_item_bom_right_item {
              width: 130px;
              height: 45px;
              display: flex;
              align-items: center;
              justify-content: center;
              background: #e9f7fa;
              border: solid #71b9f1 1px;

              ::v-deep .svg-icon {
                cursor: pointer;
                width: 24px !important;
                height: 24px !important;
              }

              &:nth-of-type(1) {
                color: #6082fc;

                span {
                  background: #1d62e2;
                  width: 30px;
                  height: 30px;
                  border-radius: 50%;
                  display: flex;
                  align-items: center;
                  justify-content: center;
                  margin: 0px 3px;
                }

                p {
                  color: #6082fc;
                  font-weight: bold;
                }
              }

              &:nth-of-type(2) {
                color: #6e7173;

                span {
                  background: #4b4b4b;
                  width: 30px;
                  height: 30px;
                  display: flex;
                  align-items: center;
                  justify-content: center;
                  border-radius: 50%;
                  margin: 0px 3px;
                }

                p {
                  color: #4d4d4e;
                  font-weight: bold;
                }
              }
            }
          }
        }
      }
    }

    .mortgage_bom {
      width: 100%;
      height: calc((100% - 75px) / 2);
      display: flex;
      align-items: center;
      position: relative;

      .mortgage_bom_item {
        height: 100%;
        background-color: #031249;

        &:nth-of-type(1) {
          width: 26%;
          box-sizing: border-box;
          padding: 15px;

          .mortgage_bom_item_cont {

            box-sizing: border-box;
            padding: 20px;

            .mortgage_bom_item_cont_item {
              padding-left: 10px;
              padding-right: 10px;
              margin-top: 5px;

              &:last-child {
                border-bottom: none;
              }
            }


          }
        }

        &:nth-of-type(2) {
          width: 43%;
          box-sizing: border-box;
          padding: 15px;
          margin-left: 30px;
        }

        &:nth-of-type(3) {
          width: 28%;
          padding: 15px;

          .mortgage_bom_item_cont {
            box-sizing: border-box;
            padding-left: 45px;

            .mortgage_bom_item_cont_item {
              &:last-child {
                border-bottom: none;
              }
            }
          }
        }

        .mortgage_bom_item_tit {
          height: 40px;
          width: 100%;
          position: relative;
          margin-bottom: 10px;
          display: flex;

          .mortgage_bom_item_tit_left {
            width: auto;
            display: flex;
            align-items: center;
            margin-right: 5px;
            height: 100%;
            font-size: 20px;
            color: #fff;

            span {
              margin-right: 10px;
            }
          }

          .mortgage_bom_item_tit_right {
            flex: 1;
            position: relative;
            display: flex;
            justify-content: right;
            height: 100%;

            ::v-deep .el-select {
              width: 150px;

              .el-input {
                .el-input__inner {
                  color: #fff;
                  background: transparent;
                  border: none;
                }
              }
            }
          }

          .mortgage_bom_item_tit_right::before {
            content: "";
            position: absolute;
            width: 100%;
            height: 100%;
            border-bottom: solid 4px #dadada;
            bottom: 5px;
            left: 0px;
          }
        }

        .mortgage_bom_item_cont {
          width: 100%;
          height: calc(100% - 100px);
          position: relative;

          .mortgage_bom_item_cont_list {
            width: 100%;
            height: calc(100% / 6);
            padding-top: 15px;

            .mortgage_bom_item_cont_list_item {
              width: 100%;
              margin-top: 15px;
              height: calc(100% / 5);
              position: relative;
              display: flex;
              padding-bottom: 20px;
              border-bottom: solid 1px #dadada;

              .mortgage_bom_item_cont_list_item_left {
                width: 50%;
                height: 100%;
                display: flex;
                align-items: center;
                color: #0EC0B4;
                margin-left: 10px;
              }

              .mortgage_bom_item_cont_list_item_right {
                margin-right: 10px;
                width: 50%;
                height: 100%;
                display: flex;
                align-items: center;
                justify-content: right;
                color: #FF7E3F;
              }
            }
          }

          .mortgage_bom_item_cont_item {
            width: 100%;
            height: calc(100% / 5);
            position: relative;
            display: flex;
            border-bottom: solid 1px #dadada;

            .mortgage_bom_item_cont_item_left {
              width: 50%;
              height: 100%;
              display: flex;
              align-items: center;
              color: #0EC0B4;
            }

            .mortgage_bom_item_cont_item_right {
              width: 50%;
              height: 100%;
              display: flex;
              align-items: center;
              justify-content: right;
              color: #FF7E3F;
            }
          }
        }

        .ditus {
          height: 160px;
          width: 100%;
          position: relative;
          cursor: pointer;

          img {
            width: 100%;
            height: 100%;
          }
        }
      }
    }

    ::v-deep .svg-icon {
      cursor: pointer;
      width: 30px !important;
      height: 30px !important;

    }

    .iframemap {
      width: 100%;
      height: 1000px;

      iframe {
        width: 100%;
        height: 100%;
      }
    }

    .loockvideo {
      width: 100%;
      height: 300px;

      video {
        width: 100%;
        height: 100%;
      }
    }
  }
</style>