vis389/src/views/bigScreen/drivingCabin/center2.vue

<template>
  <div>
    <container4 title="动态信息">
      <vue-seamless-scroll
        ref="seamlessScroll"
        :data="listData"
        class="warp"
        :class-option="{
          openWatch: true,
          singleHeight: 35,
        }"
      >
        <ul class="item">
          <li>
            <el-row>
              <el-col :span="10"
                ><img src="./img/center2/1.png" />本月收入</el-col
              >
              <el-col :span="5">{{ month.income }}万</el-col>
              <el-col :span="7"></el-col>
            </el-row>
          </li>
          <li>
            <el-row>
              <el-col :span="10"
                ><img src="./img/center2/2.png" />本月支出</el-col
              >
              <el-col :span="5">{{ month.expenditure }}万</el-col>
              <el-col :span="7"></el-col>
            </el-row>
          </li>
          <li>
            <el-row>
              <el-col :span="10"
                ><img src="./img/center2/3.png" />本月新签合同</el-col
              >
              <el-col :span="5">{{ month.newContract }}份</el-col>
              <el-col :span="7"></el-col>
            </el-row>
          </li>
          <li>
            <el-row>
              <el-col :span="10"
                ><img src="./img/center2/4.png" />本月安全问题</el-col
              >
              <el-col :span="5">{{ month.safetyProblem }}个</el-col>
              <el-col :span="7"></el-col>
            </el-row>
          </li>
          <li>
            <el-row>
              <el-col :span="10"
                ><img src="./img/center2/5.png" />本月质量问题</el-col
              >
              <el-col :span="5">{{ month.qualityProblem }}个</el-col>
              <el-col :span="7"></el-col>
            </el-row>
          </li>
          <li>
            <el-row>
              <el-col :span="10"
                ><img src="./img/center2/6.png" />今日设备数</el-col
              >
              <el-col :span="5">{{ today.operatingEquipment }}台</el-col>
              <el-col :span="7">运行率：{{ today.equipmentRate }}%</el-col>
            </el-row>
          </li>
          <li>
            <el-row>
              <el-col :span="10"
                ><img src="./img/center2/7.png" />今日职工数</el-col
              >
              <el-col :span="5">{{ today.totalWorker }}人</el-col>
              <el-col :span="7">出勤率：{{ today.workerRate }}%</el-col>
            </el-row>
          </li>
          <li>
            <el-row>
              <el-col :span="10"
                ><img src="./img/center2/8.png" />今日生产任务</el-col
              >
              <el-col :span="5">{{ today.totalTask }}个</el-col>
              <el-col :span="7">完成率：{{ today.taskRate }}%</el-col>
            </el-row>
          </li>
        </ul>
      </vue-seamless-scroll>
    </container4>
  </div>
</template>

<script>
import container4 from "./components/container4/index.vue";
import rocketTit from "../components/rocketTit/index.vue";
import vueSeamlessScroll from "vue-seamless-scroll";
import echarts from "echarts";
require("echarts/theme/macarons"); // echarts theme
import resize from "../../dashboard/mixins/resize";

import request from "@/utils/request";
export default {
  mixins: [resize],
  name: "left1",
  components: {
    container4,
    rocketTit,
    vueSeamlessScroll,
  },
  data() {
    return {
      listData: [1, 2, 3, 4, 5, 6, 7, 8],
      month: {
        expenditure: "0",
        income: "0",
        newContract: "0",
        qualityProblem: "0",
        safetyProblem: "0",
      },
      today: {
        equipmentRate: "0",
        operatingEquipment: "0",
        taskRate: "0",
        totalTask: "0",
        totalWorker: "0",
        workerRate: "0",
      },
    };
  },
  mounted() {
    this.$nextTick(() => {
      this.getData();
    });
  },
  beforeDestroy() {},
  methods: {
    getData() {
      request({
        url: "/hx/cockpitOverview/todayDynamics",
        method: "get",
      }).then((res) => {
        console.log(res);
        if (200 == res.code) {
          this.month = res.data.month;
          this.today = res.data.today;
          this.$refs.seamlessScroll.reset();
        } else {
          this.$message.error(res.msg);
        }
      });
    },
  },
};
</script>

<style lang="scss" scoped>
.tit {
  padding: 16px 24px;
}
.img {
  position: absolute;
  top: 0;
  left: 0;
  z-index: -1;
}
.data {
  display: flex;
  margin: 0 15px;
  background: rgba(2, 18, 63, 0.4);
  color: #ffffff;
  font-size: 18px;
  .data-item {
    flex: 1;
    > div {
      margin: 5px 0;
      text-align: center;
    }
    .num {
      font-size: 28px;
      font-family: Roboto-BlackItalic, Roboto;
      font-weight: 600;
      color: #55c5a2;
      vertical-align: sub;
      padding-right: 3px;
    }
  }
}

.warp {
  height: 280px;
  width: 440px;
  margin: 0 auto;
  overflow: hidden;
  ul {
    list-style: none;
    padding: 0;
    margin: 0 auto;
    li,
    a {
      display: block;
      display: flex;
      justify-content: space-between;
      font-size: 15px;
    }
    li {
      display: block;
      height: 30px;
      line-height: 30px;
      background: rgba(2, 18, 63, 0.33);
      padding-left: 20px;
      margin: 5px 0;
      img {
        vertical-align: sub;
        margin-right: 5px;
      }
    }
  }
}
</style>