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

<template>
  <div>
    <container4 title="危险作业预报/月度重点安全工作提示">
      <div style="text-align: right; margin-right: 30px; margin-bottom: 5px">
        <bigScreenTabs
          v-model="index"
          :titleArr="['周危险', '月重点']"
        ></bigScreenTabs>
      </div>
      <el-row style="padding: 0 30px" v-if="index == 0">
        <el-col :span="24" style="margin-bottom: 1px">
          <el-row
            style="
              font-size: 14px;
              height: 42px;
              line-height: 42px;
              background: rgba(0, 255, 255, 0.3);
            "
          >
            <el-col style="text-align: center" :span="4">序号</el-col>
            <el-col style="text-align: center" :span="8">部门</el-col>
            <el-col style="text-align: center" :span="12"
              >作业内容(周危险)</el-col
            >
          </el-row>
        </el-col>
        <vue-seamless-scroll
          ref="seamlessScroll1"
          :data="listData1"
          class="warp-scroll"
          :class-option="{
            singleHeight: 43,
          }"
        >
          <ul class="item">
            <li v-for="(item, index) in scrollList1" :key="index">
              <el-row style="font-size: 14px">
                <el-col style="text-align: center" :span="4">{{
                  index + 1
                }}</el-col>
                <el-col
                  style="text-align: center"
                  :title="item.deptName"
                  :span="8"
                  >{{ item.deptName }}</el-col
                >
                <el-col
                  style="text-align: center"
                  :title="item.workContent"
                  :span="12"
                  >{{ item.workContent }}</el-col
                >
              </el-row>
            </li>
          </ul>
        </vue-seamless-scroll>
      </el-row>
      <el-row style="padding: 0 30px" v-if="index == 1">
        <el-col :span="24" style="margin-bottom: 1px">
          <el-row
            style="
              font-size: 14px;
              height: 42px;
              line-height: 42px;
              background: rgba(0, 255, 255, 0.3);
            "
          >
            <el-col style="text-align: center" :span="4">序号</el-col>
            <el-col style="text-align: center" :span="8">部门</el-col>
            <el-col style="text-align: center" :span="12"
              >作业内容(月重点)</el-col
            >
          </el-row>
        </el-col>
        <vue-seamless-scroll
          ref="seamlessScroll2"
          :data="listData2"
          class="warp-scroll"
          :class-option="{
            singleHeight: 43,
          }"
        >
          <ul class="item">
            <li v-for="(item, index) in scrollList2" :key="index">
              <el-row style="font-size: 14px">
                <el-col style="text-align: center" :span="4">{{
                  index + 1
                }}</el-col>
                <el-col
                  style="text-align: center"
                  :title="item.deptName"
                  :span="8"
                  >{{ item.deptName }}</el-col
                >
                <el-col
                  style="text-align: center"
                  :title="item.workContent"
                  :span="12"
                  >{{ item.workContent }}</el-col
                >
              </el-row>
            </li>
          </ul>
        </vue-seamless-scroll>
      </el-row>
    </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 bigScreenTabs from "../components/bigScreenTabs/index.vue";
import echarts from "echarts";
require("echarts/theme/macarons"); // echarts theme
import resize from "../../dashboard/mixins/resize";
export default {
  mixins: [resize],
  name: "left1",
  components: {
    container4,
    rocketTit,
    vueSeamlessScroll,
    bigScreenTabs,
  },
  data() {
    return {
      index: 0,

      listData1: [1, 2, 3, 4, 5, 6, 7, 8],
      listData2: [1, 2, 3, 4, 5, 6, 7, 8],
      scrollList1: Array(8).fill({
        createTime: "",
        deptName: "",
        id: 0,
        remark: "",
        todayDate: "",
        workContent: "",
      }),
      scrollList2: Array(8).fill({
        createTime: "",
        deptName: "",
        id: 0,
        remark: "",
        todayDate: "",
        workContent: "",
      }),
    };
  },
  watch: {
    index(newOld, oldVal) {
      if (newOld == 0) {
        if (this.$refs.seamlessScroll1) {
          this.$refs.seamlessScroll1.reset();
        }
      } else {
        if (this.$refs.seamlessScroll2) {
          this.$refs.seamlessScroll2.reset();
        }
      }
    },
  },
  mounted() {
    this.$nextTick(() => {
      this.getData();
    });
  },
  beforeDestroy() {},
  methods: {
    getData() {
      this.request({
        url: "/hx/securityManagement/dangerousWork",
        method: "get",
        params: { type: 1 },
      }).then((res) => {
        if (200 == res.code) {
          this.scrollList1 = res.data;
          this.listData1 = Array(this.scrollList1.length).fill(0);
          if (this.$refs.seamlessScroll1) {
            this.$refs.seamlessScroll1.reset();
          }
        } else {
          this.$message.error(res.msg);
        }
      });
      this.request({
        url: "/hx/securityManagement/dangerousWork",
        method: "get",
        params: { type: 2 },
      }).then((res) => {
        if (200 == res.code) {
          this.scrollList2 = res.data;
          this.listData2 = Array(this.scrollList2.length).fill(0);
          if (this.$refs.seamlessScroll2) {
            this.$refs.seamlessScroll2.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;
}
.warp-scroll {
  height: 215px;
  width: 100%;
  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: 42px;
      line-height: 42px;
      background: #2a437d;
      opacity: 0.6;
      // box-shadow: 0px 1px 0px 0px rgba(139, 177, 237, 0.5);
      margin-bottom: 1px;
      img {
        vertical-align: sub;
        margin-right: 5px;
      }
    }
  }
}
.box {
  display: flex;
  justify-content: center;
  align-items: center;
}

.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>