PM2023XiAnShuBoHui_Web.git

<template>
  <div class="appbox">
    <el-container>
      <el-main>
        <el-card class="box-card scrollbar">
          <div class="toolbar">
            <el-input
              size="small"
              placeholder="请输入关键字查询"
              clearable
              v-model="filterString"
              @keyup.enter="handleQuery"
            >
              <el-button
                slot="append"
                icon="el-icon-search"
                @click="handleQuery"
              ></el-button>
            </el-input>
          </div>
          <el-tabs
            style="margin: 10px"
            v-model="activeName"
            @tab-click="handleClick"
          >
            <el-tab-pane label="全部应用" name="allapp"
              ><div class="apptypes">
                <div
                  style="
                    margin: 15px 10px;
                    display: inline-block;
                    display: inline-block;
                    line-height: 19px;
                    font-size: 14px;
                  "
                >
                  应用场景类型：
                </div>
                <el-checkbox
                  style="margin: 15px; display: inline-block"
                  :indeterminate="isIndeterminate"
                  v-model="checkAll"
                  @change="handleCheckAllChange"
                  >全选</el-checkbox
                >
 
                <el-checkbox-group
                  style="margin: 15px; display: inline-block"
                  v-model="checkedTypes"
                  @change="handleCheckedTypesChange"
                >
                  <el-checkbox
                    v-for="apptype in apptypes"
                    :label="apptype.id"
                    :key="apptype.id"
                    >{{ apptype.typename }}</el-checkbox
                  >
                </el-checkbox-group>
              </div>
              <card-list-table :data="appTableData" :activetag="1"
            /></el-tab-pane>
            <el-tab-pane label="我的应用" name="myapp"
              ><div class="apptypes">
                <el-checkbox
                  style="margin: 15px; display: inline-block"
                  :indeterminate="isPublicIndeterminate"
                  v-model="checkPublicAll"
                  @change="handleCheckPublicAllChange"
                  >全选</el-checkbox
                >
 
                <el-checkbox-group
                  style="margin: 15px; display: inline-block"
                  v-model="checkedPublic"
                  @change="handleCheckedPublicChange"
                >
                  <el-checkbox
                    v-for="p in arrpublic"
                    :label="p.id"
                    :key="p.id"
                    >{{ p.pub }}</el-checkbox
                  >
                </el-checkbox-group>
              </div>
              <card-list-table :data="myappTableData" :activetag="2"
            /></el-tab-pane>
          </el-tabs>
          <div style="width: 100%; margin-top: 50px; text-align: center">
            <el-pagination
              @size-change="handleSizeChange"
              @current-change="handleCurrentChange"
              :current-page="cardData.pageNo"
              :page-sizes="[4, 8, 12]"
              :page-size="cardData.pageSize"
              layout="total, sizes, prev, pager, next"
              :total="total"
            >
            </el-pagination>
          </div>
        </el-card>
      </el-main>
    </el-container>
  </div>
</template>
<script>
import CardListTable from "../../components/appusecenter/CardListTable.vue";
const typeOptions = [
  { id: 0, typename: "交通应用" },
  { id: 1, typename: "城管城市安全" },
  { id: 2, typename: "规建审批" },
  { id: 3, typename: "园区应用" },
  { id: 4, typename: "应急城市消防" },
  { id: 5, typename: "智慧工地" },
  { id: 6, typename: "智慧房管" },
  { id: 7, typename: "文物保护文旅应用" },
  { id: 8, typename: "能源应用" },
  { id: 9, typename: "水利水务应用" },
];
const testData = [
  {
    id: 0,
    typeid: 0,
    typename: "交通应用",
    appname: "城市道路交通二期建设工程",
    createtime: "2022-01-01",
    creator: "admin",
    ispublic: true,
    imagefile: "交通.png",
  },
  {
    id: 1,
    typeid: 1,
    typename: "城管城市安全",
    appname: "公安岗亭应急响应分析决策辅助系统",
    createtime: "2022-01-01",
    creator: "admin",
    ispublic: false,
    imagefile: "应急.png",
  },
  {
    id: 2,
    typeid: 2,
    typename: "规建审批",
    appname: "CIM 建设项目规划审批系统",
    createtime: "2022-01-01",
    creator: "test",
    ispublic: false,
    imagefile: "管线.png",
  },
  {
    id: 3,
    typeid: 3,
    typename: "园区应用",
    appname: "智慧科技园项目",
    createtime: "2022-01-01",
    creator: "glc",
    ispublic: false,
    imagefile: "园区.png",
  },
  {
    id: 4,
    typeid: 4,
    typename: "应急城市消防",
    appname: "智慧消防智慧系统",
    createtime: "2022-01-01",
    creator: "wwl",
    ispublic: false,
    imagefile: "消防.png",
  },
  {
    id: 5,
    typeid: 5,
    typename: "智慧工地",
    appname: "智慧工地监管平台",
    createtime: "2022-01-01",
    creator: "wwl",
    ispublic: false,
    imagefile: "工地.png",
  },
  {
    id: 6,
    typeid: 6,
    typename: "智慧房管",
    appname: "智慧房屋管理系统",
    createtime: "2022-01-01",
    creator: "admin",
    ispublic: false,
    imagefile: "建筑.png",
  },
  {
    id: 8,
    typeid: 8,
    typename: "能源应用",
    appname: "智慧燃气监控系统",
    createtime: "2022-01-01",
    creator: "www",
    ispublic: false,
    imagefile: "能源.png",
  },
  {
    id: 9,
    typeid: 9,
    typename: "水利水务",
    appname: "河长制",
    createtime: "2022-01-01",
    creator: "wwl",
    ispublic: false,
    imagefile: "桥梁.png",
  },
];
export default {
  components: { CardListTable },
  data() {
    return {
      filterString: "",
      activeName: "allapp",
      checkedTypes: [0, 1, 2, 3, 4, 5, 6, 7, 8, 9],
      checkedPublic: [0, 1],
      apptypes: typeOptions,
      arrpublic: [
        { id: 1, pub: "公开" },
        { id: 0, pub: "私有" },
      ],
      checkAll: true,
      isIndeterminate: false,
      checkPublicAll: true,
      isPublicIndeterminate: false,
      //全部
      appTableData: [],
      //我的
      myappTableData: [],
      //矩阵卡片的数据分页
      cardData: {
        pageNo: 1,
        pageSize: 8,
      },
      total: 0,
    };
  },
  methods: {
    handleQuery() {
      let tempData = [];
      let that = this;
      if (this.activeName === "allapp") {
        tempData = this.checkAll
          ? testData
          : testData.filter((d) => {
              return that.checkedTypes.indexOf(d.typeid) > -1;
            });
        tempData =
          that.filterString === ""
            ? tempData
            : tempData.filter((item) => {
                return (
                  item.appname
                    .toLowerCase()
                    .indexOf(that.filterString.toLowerCase()) > -1
                );
              });
        let responseData = { rows: tempData, total: 10 };
        this.appTableData = responseData.rows;
        this.total = responseData.total;
      } else {
        tempData = this.checkPublicAll
          ? testData.filter((d) => {
              return d.creator === "admin";
            })
          : testData.filter((d) => {
              d.ispublictag = d.ispublic ? 1 : 0;
              return (
                d.creator === "admin" &&
                that.checkedPublic.indexOf(d.ispublictag) > -1
              );
            });
        tempData =
          that.filterString === ""
            ? tempData
            : tempData.filter((item) => {
                return (
                  item.appname
                    .toLowerCase()
                    .indexOf(that.filterString.toLowerCase()) > -1
                );
              });
        let responseData = { rows: tempData, total: 10 };
        this.myappTableData = responseData.rows;
        this.total = responseData.total;
      }
    },
    handleClick(tab, event) {
      this.handleQuery();
    },
    handleCheckAllChange(val) {
      this.checkedTypes = val
        ? typeOptions.map((el) => {
            return el.id;
          })
        : [];
      this.isIndeterminate = false;
      this.handleQuery();
    },
    handleCheckedTypesChange(value) {
      let checkedCount = value.length;
      this.checkAll = checkedCount === this.apptypes.length;
      this.isIndeterminate =
        checkedCount > 0 && checkedCount < this.apptypes.length;
      this.handleQuery();
    },
    handleCheckPublicAllChange(val) {
      this.checkedPublic = val
        ? typeOptions.map((el) => {
            return el.id;
          })
        : [];
      this.isPublicIndeterminate = false;
      this.handleQuery();
    },
    handleCheckedPublicChange(value) {
      let a = value.length;
      this.checkPublicAll = a === this.arrpublic.length;
      this.isPublicIndeterminate = a > 0 && a < this.arrpublic.length;
      this.handleQuery();
    },
    handleSizeChange(size) {
      this.cardData.pageSize = size;
      this.handleQuery();
    },
    handleCurrentChange(currentPage) {
      this.cardData.pageNo = currentPage;
      this.handleQuery();
    },
  },
  watch: {
    // checkedTypes: {
    //   handler(newVal, oldVal) {
    //     this.handleQuery();
    //   },
    //   deep: true,
    // },
    // checkedPublic: {
    //   handler(newVal, oldVal) {
    //     this.handleQuery();
    //   },
    //   deep: true,
    // },
  },
  mounted() {
    this.handleQuery();
  },
};
</script>
 
<style lang="less" scoped>
.appbox {
  height: calc(100% - 56px);
  .el-container {
    height: 100%;
    .el-main {
      margin: 0px;
      padding: 10px;
    }
  }
  .box-card {
    border: 0 !important;
    overflow: auto;
    height: 98%;
    border-radius: 5px !important;
    background: rgb(241, 247, 255);
    /deep/ .el-tabs__item {
      font-size: 18px;
      font-weight: bold;
    }
  }
  .toolbar {
    margin: 10px;
    width: 300px;
  }
  .apptypes {
    display: flex;
    background-color: rgb(210, 242, 255);
    border-radius: 5px !important;
    border: 0 !important;
  }
}
</style>