cyber/src/pages/Tools_home.vue

<script setup>
import { ref } from 'vue';
import ToolsBox from "../components/Tools_box.vue";

const categories = ref([
  { name: '家猪饲养', active: false },
  { name: '猪舍管理', active: false },
  { name: '猪种选择', active: false },
  { name: '健康管理', active: false },
  { name: '市场分析', active: false },
  { name: '饲料管理', active: false },
  { name: '生产管理', active: false },
  { name: '智能农业', active: false },
  { name: '繁殖管理', active: false }
]);


const searchQuery = ref('');

const imageURL = (r1, r2) => {
  return `https://picsum.photos/${220 + Math.floor(r1 * 500)}/${220 + Math.floor(r2 * 500)}`;
};

const tools = ref([
  { title: '猪饲料配方推荐', description: '根据不同阶段推荐饲料配方', image: imageURL(Math.random(), Math.random()), category: '家猪饲养' },
  { title: '猪舍监测工具', description: '帮助管理猪舍环境参数的工具', image: imageURL(Math.random(), Math.random()), category: '猪舍管理' },
  { title: '优质猪种推荐', description: '提供猪种选择与建议', image: imageURL(Math.random(), Math.random()), category: '猪种选择' },
  { title: '猪群健康监测', description: '实时监控猪群健康状态', image: imageURL(Math.random(), Math.random()), category: '健康管理' },
  { title: '猪肉价格分析', description: '提供最新猪肉市场价格数据', image: imageURL(Math.random(), Math.random()), category: '市场分析' },
  { title: '饲料成本优化', description: '根据不同饲料成本进行优化建议', image: imageURL(Math.random(), Math.random()), category: '饲料管理' },
  { title: '猪舍通风系统', description: '推荐最佳猪舍通风方案', image: imageURL(Math.random(), Math.random()), category: '猪舍管理' },
  { title: '疾病预防与疫苗', description: '帮助制定猪群疫苗接种计划', image: imageURL(Math.random(), Math.random()), category: '健康管理' },
  { title: '生猪生长监控', description: '追踪生猪的生长情况与速度', image: imageURL(Math.random(), Math.random()), category: '生产管理' },
  { title: '猪只体重跟踪', description: '监控猪只体重的变化情况', image: imageURL(Math.random(), Math.random()), category: '生产管理' },
  { title: '清洁与消毒工具', description: '提供猪舍清洁和消毒方法建议', image: imageURL(Math.random(), Math.random()), category: '猪舍管理' },
  { title: '温湿度调控系统', description: '帮助调控猪舍内温湿度的系统', image: imageURL(Math.random(), Math.random()), category: '猪舍管理' },
  { title: '猪只运动量跟踪', description: '监控猪只的运动量与活动情况', image: imageURL(Math.random(), Math.random()), category: '健康管理' },
  { title: '猪舍智能喂养', description: '智能化猪舍喂养系统，减少人工干预', image: imageURL(Math.random(), Math.random()), category: '智能农业' },
  { title: '生猪屠宰信息', description: '实时追踪生猪屠宰信息和数据', image: imageURL(Math.random(), Math.random()), category: '生产管理' },
  { title: '饲料成分分析', description: '分析饲料中的各种营养成分', image: imageURL(Math.random(), Math.random()), category: '饲料管理' },
  { title: '猪只健康评估', description: '帮助评估猪只健康状况的工具', image: imageURL(Math.random(), Math.random()), category: '健康管理' },
  { title: '猪舍自动清理', description: '自动清理猪舍的工具', image: imageURL(Math.random(), Math.random()), category: '猪舍管理' },
  { title: '猪群繁殖优化', description: '优化猪群繁殖效率的工具', image: imageURL(Math.random(), Math.random()), category: '繁殖管理' },
  { title: '空气质量监测', description: '监测猪舍空气质量，提供改善建议', image: imageURL(Math.random(), Math.random()), category: '猪舍管理' },
]);


// Toggle function for categories, only one category can be active at a time
const toggleCategory = (category) => {
  if (category.active) {
    category.active = false; // Deselect if already selected
  } else {
    categories.value.forEach(cat => cat.active = false); // Deselect all other categories
    category.active = true; // Select the clicked category
  }
};

const filterTools = () => {
  return tools.value.filter(tool => {
    const matchesCategory = categories.value.some(cat => cat.active && cat.name === tool.category);
    const matchesSearch = tool.title.toLowerCase().includes(searchQuery.value.toLowerCase());
    return (!categories.value.some(cat => cat.active) || matchesCategory) && matchesSearch;
  });
};
</script>

<template>
  <div class="container">
    <div class="filters">
      <div class="categories">
        <span
            v-for="category in categories"
            :key="category.name"
            :class="{ active: category.active }"
            @click="toggleCategory(category)"
        >
          {{ category.name }}
        </span>
      </div>
      <input type="text" v-model="searchQuery" placeholder="搜索工具..." class="search-bar" />
    </div>

    <div class="tools">
      <ToolsBox
          v-for="tool in filterTools()"
          :key="tool.title"
          :tool="tool"
      />
    </div>
  </div>
</template>

<style scoped>
.container {
  height: calc(100vh - 100px);
  width: 100%;
  overflow-y: auto;
  overflow-x: hidden;
  display: flex;
  flex-direction: column;
  align-items: center;
  padding: 20px 0;
}

.filters {
  display: flex;
  flex-direction: column;
  align-items: center;
  width: 100%;
  margin-bottom: 20px;
}

.categories {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  justify-content: center;
}

.categories span {
  cursor: pointer;
  padding: 5px 10px;
  border: 1px solid #ccc;
  border-radius: 3px;
}

.categories span.active {
  background-color: #007bff;
  color: white;
}

.search-bar {
  padding: 10px;
  margin: 20px 0;
  width: 50%;
  border-radius: 10px;
  border: 1px solid #ccc;
}

.tools {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 20px;
  width: 100%;
}

.theme-light .categories span.active {
  background-color: #ffb74d;
  color: black;
}

.theme-light .search-bar {
  border: 1px solid #ffb74d;
}

::-webkit-scrollbar {
  display: none;
}
</style>