版本初始化

src/views/disease-resistance/disease-resistance.vue

@@ -0,0 +1,175 @@
+<template>
+  <div class="container-box">
+    <div class="search-box">
+      <el-form
+        :inline="true"
+        ref="searchForm"
+        :model="searchForm"
+        class="demo-form-inline"
+        label-width="auto"
+        size="mini"
+      >
+        <el-form-item label="养殖场">
+          <el-input
+            v-model="searchForm.farm"
+            placeholder="请输入养殖场"
+          ></el-input>
+        </el-form-item>
+
+        <el-form-item label="标记编号">
+          <el-input
+            v-model="searchForm.number"
+            placeholder="请输入标记编号"
+          ></el-input>
+        </el-form-item>
+
+        <el-form-item>
+          <el-button type="success" icon="el-icon-search" @click="searchClick"
+            >搜索</el-button
+          >
+          <el-button type="warning" icon="el-icon-refresh" @click="resetClick"
+            >重置</el-button
+          >
+        </el-form-item>
+      </el-form>
+    </div>
+    <div class="list-box">
+      <el-table
+        :data="tableData"
+        style="width: 100%"
+        size="mini"
+        border
+        :header-cell-style="{ textAlign: 'center', color: '#606266' }"
+        :cell-style="cellStyle"
+      >
+        <el-table-column prop="farm" label="养殖场"></el-table-column>
+        <el-table-column prop="number" label="标记编号"></el-table-column>
+        <el-table-column prop="age" label="月龄"></el-table-column>
+        <el-table-column prop="result" label="监测结果"></el-table-column>
+        <el-table-column label="详情">
+          <template slot-scope="scope">
+            <el-button
+              size="mini"
+              type="text"
+              @click="detailClick(scope.row)"
+              class="detail-btn"
+              >查看</el-button
+            >
+          </template>
+        </el-table-column>
+      </el-table>
+      <div class="page-box">
+        <el-pagination
+          @size-change="handleSizeChange"
+          @current-change="handleCurrentChange"
+          :page-sizes="[20, 50, 100]"
+          layout="total, sizes, prev, pager, next, jumper"
+          :current-page="form.page"
+          :page-size="form.pagesize"
+          :total="total"
+        >
+        </el-pagination>
+      </div>
+    </div>
+  </div>
+</template>
+
+<script>
+export default {
+  data() {
+    return {
+      searchForm: {
+        farm: '',
+        number: ''
+      },
+      tableData: [
+        {
+          id: 1,
+          farm: '爱农养殖场',
+          number: '82010000990',
+          age: '6',
+          result: '携带'
+        },
+        {
+          id: 2,
+          farm: '小新养殖场',
+          number: '82010000991',
+          age: '6',
+          result: '未携带'
+        }
+      ],
+      form: {
+        page: 1,
+        pagesize: 20
+      },
+      total: 2
+    }
+  },
+  methods: {
+    // 搜索
+    searchClick() {},
+    // 重置
+    resetClick() {
+      for (const key in this.searchForm) {
+        this.searchForm[key] = ''
+      }
+    },
+    // 条
+    handleSizeChange(val) {
+      this.form.pagesize = parseInt(val)
+    },
+    // 页
+    handleCurrentChange(val) {
+      this.form.page = parseInt(val)
+    },
+    // 当监测结果为 已携带 的状态，加上背景色,字体颜色
+    cellStyle({ row, column, rowIndex, columnIndex }) {
+      // 注意，这里返回的是一个对象
+      if (row.result == '携带' && column.label == '监测结果') {
+        return 'background:#d9001b;textAlign: center;color:#fff;'
+      } else {
+        return 'textAlign: center'
+      }
+    }
+  }
+}
+</script>
+
+<style lang="less" scoped>
+.container-box {
+  min-height: calc(100vh - 84px);
+  padding: 15px;
+  box-sizing: border-box;
+  display: flex;
+  flex-direction: column;
+  .search-box {
+    background: #fff;
+    border-radius: 6px;
+    padding: 10px 15px;
+    margin-bottom: 25px;
+  }
+  .list-box {
+    flex: 1;
+    background: #fff;
+    border-radius: 6px;
+    padding: 10px 15px;
+    .detail-btn {
+      color: #67c23a;
+    }
+    .page-box {
+      margin-top: 10px;
+    }
+  }
+}
+.el-form-item {
+  margin-bottom: 0px;
+  margin-right: 20px;
+}
+// table
+/deep/.el-table th.el-table__cell {
+  background-color: #f5f7fa;
+}
+/deep/ .cell {
+  font-weight: normal;
+}
+</style>

src/views/layout/index.vue

@@ -0,0 +1,66 @@
+<template>
+  <div class="layouts">
+    <el-container style="height: 100%">
+        <el-aside width="" style="background-color: #fff">
+          <!-- 左侧 - 栏 -->
+          <left-menu></left-menu>
+        </el-aside>
+      <el-container>
+        <el-header style="text-align: right; font-size: 12px">
+          <right-main-top></right-main-top>
+        </el-header>
+        <el-main style="background-color: #f2f2f2">
+          <div class="main-box">
+            <right-main></right-main>
+          </div>
+        </el-main>
+      </el-container>
+    </el-container>
+  </div>
+</template>
+
+<script>
+import LeftMenu from './left-menu.vue'
+import rightMainTop from './right-main-top.vue'
+import rightMain from './right-main.vue'
+export default {
+  components: {
+    LeftMenu,
+    rightMainTop,
+    rightMain
+  }
+}
+</script>
+
+<style lang="less" scoped>
+.layouts {
+  width: 100%;
+  height: 100%;
+}
+.el-main {
+  display: flex;
+  flex-direction: column;
+  padding: 0px;
+  box-sizing: border-box;
+  .main-box {
+    flex: 1;
+    margin: 10px;
+    border-radius: 6px !important;
+  }
+}
+/* 影藏滚动条的样式  */
+body::-webkit-scrollbar {
+  width: 0px;
+  height: 0px;
+}
+.el-aside {
+  height: 100vh;
+  background-color: #ffffff;
+  overflow-y: auto;
+  -ms-overflow-style: none; /* Edge */
+  scrollbar-width: none; /* Firefox */
+  &::-webkit-scrollbar {
+    display: none; /* WebKit */
+  }
+}
+</style>

src/views/layout/left-menu.vue

@@ -0,0 +1,131 @@
+<template>
+  <div id="left-menu">
+    <div class="logo">
+      <div
+        v-if="!isCollapse"
+        class="logo-box01"
+        :style="{ width: !isCollapse ? '220px' : 'auto' }"
+      >
+        <span :title="system_name">{{ system_name || '' }}</span>
+      </div>
+      <el-image
+        class="el-img-box"
+        v-else
+        style="height: 72px; width: 80px"
+        src="https://smart-1251449951.cos.ap-guangzhou.myqcloud.com/youpin/20240724/xl34jq31yvdzd73b5im9.png"
+        fit="cover"
+      ></el-image>
+    </div>
+    <el-menu
+      class="el-menu-vertical-demo"
+      :collapse="isCollapse"
+      :router="true"
+      :default-active="activeIndex"
+      :unique-opened="true"
+    >
+      <el-menu-item index="/disease-resistance/disease-resistance">
+        <i class="el-icon-orange"></i>
+        <span slot="title">遗传病风险</span>
+      </el-menu-item>
+    </el-menu>
+  </div>
+</template>
+
+<script>
+export default {
+  data() {
+    return {
+      activeIndex: '/',
+      isCollapse: false,
+      system_name: '肉牛溯源系统',
+      logo: '',
+      index: 0,
+      menuList: [], // 菜单权限列表
+      type: '', // 1 交流社区， 2线上问诊
+      zhanghao: '',
+      token_xs: '',
+      othersData: {},
+      activeStatus: ''
+    }
+  },
+  watch: {
+    // 监听路由
+    '$route.path': {
+      handler(routePath) {
+        this.initMenuActive(routePath)
+      },
+      immediate: true
+    }
+  },
+  created() {
+    this.$bus.$on('show', (e) => {
+      this.getShow(e)
+    })
+  },
+  methods: {
+    initMenuActive(routePath) {
+      this.activeIndex = routePath
+    },
+    getShow(e) {
+      this.isCollapse = e
+    }
+  },
+  destroyed() {
+    this.bus.$off('show')
+  }
+}
+</script>
+
+<style lang="less" scoped>
+#left-menu {
+  height: 100%;
+
+  .logo {
+    max-width: 220px;
+    height: 80px;
+    color: #fff;
+    font-size: 25px;
+    font-weight: bold;
+    letter-spacing: 3px;
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    background-color: #5aad00;
+
+    .logo-box01 {
+      cursor: pointer;
+      white-space: nowrap;
+      overflow: hidden;
+      text-overflow: ellipsis;
+      text-align: center;
+    }
+
+    .el-img-box {
+      padding: 5px;
+      box-sizing: border-box;
+    }
+  }
+}
+
+/deep/ .el-menu {
+  border-right: 0;
+}
+
+/deep/.el-menu-item-group__title {
+  padding: 0;
+}
+
+.icon {
+  vertical-align: middle;
+  font-size: 23px;
+  margin-right: 5px;
+}
+
+.home-icons {
+  margin-right: 5px;
+}
+
+.active {
+  color: #409eff;
+}
+</style>

src/views/layout/right-main-top.vue

@@ -0,0 +1,187 @@
+<template>
+  <div id="nav-box">
+    <div class="nav-left">
+      <i class="icon el-icon-s-fold" @click="show(true)" v-if="!flag"></i>
+      <i class="icon el-icon-s-unfold" @click="show(false)" v-else></i>
+    </div>
+    <div class="nav-right">
+      <p class="mrr10px p-top fz16px mrl10px">
+        <span
+          style="color: #606266; vertical-align: middle"
+          class="el-icon-user fz18px mrr5px"
+        ></span>
+        <span style="color: #333">admin</span>
+      </p>
+      <p class="fz14px out" @click="out">
+        <el-tag type="info" size="mini" effect="plain">退出平台</el-tag>
+      </p>
+    </div>
+  </div>
+</template>
+
+<script>
+import local from '../../utils/local'
+import { LoginOut, LoginEnter } from '../../api/consumer'
+// import { farmswitch } from '../../api/systemSet'
+export default {
+  data() {
+    return {
+      value: '',
+      flag: false,
+      zhanghao: '',
+      options: [],
+      farm_name: '', // 养殖场
+      object: {}
+    }
+  },
+  created() {
+    this.getUserInfo()
+    this.farm_name = local.get('farm_name')
+  },
+  methods: {
+    // 大屏按钮
+    screenClick() {
+      window.open(
+        'https://datav.aliyuncs.com/share/page/3c006051da485e266d41ca59e4ec36bb',
+        '_blank'
+      )
+    },
+    shopClick() {
+      window.open(
+        'https://datav.aliyuncs.com/share/page/d8ff7d8044e930c7a12cdaa0591c04db',
+        '_blank'
+      )
+    },
+    // 显示 - 账号
+    getUserInfo() {
+      this.zhanghao = local.get('account_sds')
+    },
+    show(flag) {
+      this.flag = flag
+      this.$bus.$emit('show', flag)
+    },
+    // 退出
+    out() {
+      this.$confirm('退出登录, 是否继续?', '提示', {
+        title: '退出登录',
+        confirmButtonText: '确定',
+        cancelButtonText: '取消',
+        type: 'info'
+      })
+        .then(async () => {
+          this.$message({
+            message: '退出成功!',
+            type: 'success'
+          })
+          local.set('farm_name', '')
+          local.set('token_sd', '')
+          local.set('account_sds', '')
+          setTimeout(() => {
+            this.$router.push('/login')
+          }, 500)
+          // const res = await LoginOut({
+          //   token: local.get('token_sd')
+          // })
+          // if (res.status === 1) {
+          //   this.$message({
+          //     message: '退出成功!',
+          //     type: 'success'
+          //   })
+          //   local.set('farm_name', '')
+          //   local.set('token_sd', '')
+          //   local.set('account_sds', '')
+          //   setTimeout(() => {
+          //     this.$router.push('/login')
+          //   }, 500)
+          // } else {
+          //   this.$message.error(res.msg)
+          // }
+        })
+        .catch(() => {
+          this.$message({
+            type: 'info',
+            message: '已取消'
+          })
+        })
+    },
+    // true - 出现
+    visiblechange(e) {
+      if (e === true) {
+        this.getfarmswitch()
+      }
+    },
+    // 切换养殖场 - 列表
+    async getfarmswitch() {
+      const res = await farmswitch({
+        token: local.get('token_sd')
+      })
+      if (res.status === 1) {
+        this.options = res.data
+      } else {
+        this.$message.error(res.msg)
+      }
+    },
+    change(e) {
+      this.options.forEach((item) => {
+        if (e === item.org_name) {
+          this.object = item
+        }
+      })
+      this.getLoginEnter()
+    },
+    // 养殖 - 切换
+    async getLoginEnter() {
+      const res = await LoginEnter({
+        id: this.object.id,
+        uid: this.object.uid,
+        cate: this.object.cate,
+        org_id: this.object.org_id
+      })
+      if (res.status === 1) {
+        this.$message({
+          type: 'success',
+          message: '已切换'
+        })
+        var token = res.data.token // 暂时
+        // 存储
+        local.set('token_sd', token)
+        local.set('farm_name', this.farm_name)
+        location.reload()
+      } else {
+        this.$message.error(res.msg)
+      }
+    }
+  }
+}
+</script>
+
+<style lang="less" scoped>
+#nav-box {
+  height: 100%;
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  .nav-left {
+    .icon {
+      font-size: 26px;
+      color: #606060;
+    }
+  }
+  .nav-right {
+    display: flex;
+    align-items: center;
+    .p-top {
+      color: #606060;
+      display: flex;
+      align-items: center;
+    }
+    .out {
+      cursor: pointer;
+    }
+  }
+}
+// 按钮 - 可视化
+.el-tag {
+  cursor: pointer;
+}
+</style>

src/views/layout/right-main.vue

@@ -0,0 +1,15 @@
+<template>
+  <div id="right-main">
+    <router-view></router-view>
+  </div>
+</template>
+
+<script>
+export default {}
+</script>
+
+<style lang="less" scoped>
+#right-main {
+  height: 100%;
+}
+</style>

src/views/link/community.vue

@@ -0,0 +1,15 @@
+<template>
+  <div>
+<iframe src="" frameborder="0"></iframe>
+  </div>
+</template>
+
+<script>
+  export default {
+    
+  }
+</script>
+
+<style lang="less" scoped>
+
+</style>