|
@@ -3,152 +3,163 @@
|
|
<div class="task-top">
|
|
<div class="task-top">
|
|
<div class="record-filter">
|
|
<div class="record-filter">
|
|
<div
|
|
<div
|
|
- class="filter-item"
|
|
|
|
- v-for="(item, index) in filterType"
|
|
|
|
- :key="index"
|
|
|
|
- @click="handlePlanClick(index)"
|
|
|
|
- :class="{ active: activePlanIndex === index }"
|
|
|
|
- >
|
|
|
|
- {{ item }}
|
|
|
|
- </div>
|
|
|
|
|
|
+ class="filter-item"
|
|
|
|
+ v-for="(item, index) in filterType"
|
|
|
|
+ :key="index"
|
|
|
|
+ @click="handlePlanClick(index)"
|
|
|
|
+ :class="{ active: activePlanIndex === index }"
|
|
|
|
+ >
|
|
|
|
+ {{ item }}
|
|
|
|
+ </div>
|
|
</div>
|
|
</div>
|
|
<div class="select-box">
|
|
<div class="select-box">
|
|
<div class="select-item">
|
|
<div class="select-item">
|
|
<el-select v-model="typeVal" placeholder="农事类型">
|
|
<el-select v-model="typeVal" placeholder="农事类型">
|
|
- <el-option
|
|
|
|
- v-for="item in typeOptions"
|
|
|
|
- :key="item.value"
|
|
|
|
- :label="item.label"
|
|
|
|
- :value="item.value"
|
|
|
|
- />
|
|
|
|
|
|
+ <el-option
|
|
|
|
+ v-for="item in typeOptions"
|
|
|
|
+ :key="item.value"
|
|
|
|
+ :label="item.label"
|
|
|
|
+ :value="item.value"
|
|
|
|
+ />
|
|
</el-select>
|
|
</el-select>
|
|
</div>
|
|
</div>
|
|
<div class="select-item">
|
|
<div class="select-item">
|
|
<el-select v-model="regionVal" placeholder="执行区域">
|
|
<el-select v-model="regionVal" placeholder="执行区域">
|
|
- <el-option
|
|
|
|
- v-for="item in regionOptions"
|
|
|
|
- :key="item.value"
|
|
|
|
- :label="item.label"
|
|
|
|
- :value="item.value"
|
|
|
|
- />
|
|
|
|
|
|
+ <el-option
|
|
|
|
+ v-for="item in regionOptions"
|
|
|
|
+ :key="item.value"
|
|
|
|
+ :label="item.label"
|
|
|
|
+ :value="item.value"
|
|
|
|
+ />
|
|
</el-select>
|
|
</el-select>
|
|
</div>
|
|
</div>
|
|
<div class="select-item">
|
|
<div class="select-item">
|
|
<el-select v-model="levelVal" placeholder="紧急程度">
|
|
<el-select v-model="levelVal" placeholder="紧急程度">
|
|
- <el-option
|
|
|
|
- v-for="item in levelOptions"
|
|
|
|
- :key="item.value"
|
|
|
|
- :label="item.label"
|
|
|
|
- :value="item.value"
|
|
|
|
- />
|
|
|
|
|
|
+ <el-option
|
|
|
|
+ v-for="item in levelOptions"
|
|
|
|
+ :key="item.value"
|
|
|
|
+ :label="item.label"
|
|
|
|
+ :value="item.value"
|
|
|
|
+ />
|
|
</el-select>
|
|
</el-select>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
- <div class="task-content">
|
|
|
|
|
|
+ <div class="task-content" :style="cardContentHeight ? `height: ${cardContentHeight + (curRole == 0 ? 0 : 40)}px` : ''">
|
|
<div class="plan-menu">
|
|
<div class="plan-menu">
|
|
- <el-anchor :container="containerRef" direction="vertical" type="default" @click="handleClick">
|
|
|
|
- <el-menu :default-active="defaultActive" class="el-menu-vertical-demo">
|
|
|
|
- <el-sub-menu v-for="(menu, index) in menuData" :key="index" :index="String(menu.id)">
|
|
|
|
- <template #title>
|
|
|
|
- <img class="menu-icon" :src="require(`@/assets/img/gallery/icon-${index}.png`)" />
|
|
|
|
- <span class="menu-text">{{ menu.title }}</span>
|
|
|
|
- </template>
|
|
|
|
- <el-menu-item
|
|
|
|
- v-for="item in menu.children"
|
|
|
|
- :key="item.id"
|
|
|
|
- :index="`${menu.id}-${item.id}`"
|
|
|
|
- >
|
|
|
|
- <el-anchor-link :href="item.href" :title="item.title" />
|
|
|
|
- </el-menu-item>
|
|
|
|
- </el-sub-menu>
|
|
|
|
- </el-menu>
|
|
|
|
- </el-anchor>
|
|
|
|
- </div>
|
|
|
|
- <div class="expert-content" ref="containerRef">
|
|
|
|
- <div v-for="(section, index) in contentData" :key="index" class="content-section">
|
|
|
|
- <div class="section-id" :id="section.targetId"></div>
|
|
|
|
- <record-item :record-item-data="section" :onlyRecipeName="true" class="recipe-item">
|
|
|
|
|
|
+ <el-anchor :container="containerRef" direction="vertical" type="default" @click="handleClick">
|
|
|
|
+ <el-menu :default-active="defaultActive" class="el-menu-vertical-demo">
|
|
|
|
+ <el-sub-menu v-for="(menu, index) in menuData" :key="index" :index="String(menu.id)">
|
|
<template #title>
|
|
<template #title>
|
|
- <div class="box-title">
|
|
|
|
- <div class="title-l">
|
|
|
|
- {{ section.title }}
|
|
|
|
- <span class="parent-text">{{ section.parentTitle || "秋梢期" }}</span>
|
|
|
|
- </div>
|
|
|
|
- <div class="title-r">
|
|
|
|
- <span class="r-dot"></span>
|
|
|
|
- 2区
|
|
|
|
- </div>
|
|
|
|
- </div>
|
|
|
|
|
|
+ <img class="menu-icon" :src="require(`@/assets/img/gallery/icon-${index}.png`)" />
|
|
|
|
+ <span class="menu-text">{{ menu.title }}</span>
|
|
</template>
|
|
</template>
|
|
- <template #footer>
|
|
|
|
- <div class="action-group">
|
|
|
|
- <div class="action-l">查看详情</div>
|
|
|
|
- <div class="action-r" v-if="section.orderStatus === 0">
|
|
|
|
- <div class="action-item second-item">拍照识别</div>
|
|
|
|
- <div class="action-item primary-item">去确认</div>
|
|
|
|
- </div>
|
|
|
|
- <div class="action-r" v-if="section.orderStatus === 1">
|
|
|
|
- <div class="action-item warning-item">发起需求</div>
|
|
|
|
- <div class="action-item primary-item">确认完成</div>
|
|
|
|
- </div>
|
|
|
|
- <div class="action-r" v-if="section.orderStatus === 2">
|
|
|
|
- <div class="action-item warning-item">发起需求</div>
|
|
|
|
- <div class="action-item primary-item">去复核</div>
|
|
|
|
- </div>
|
|
|
|
|
|
+ <el-menu-item v-for="item in menu.children" :key="item.id" :index="`${menu.id}-${item.id}`">
|
|
|
|
+ <el-anchor-link :href="item.href" :title="item.title" />
|
|
|
|
+ </el-menu-item>
|
|
|
|
+ </el-sub-menu>
|
|
|
|
+ </el-menu>
|
|
|
|
+ </el-anchor>
|
|
|
|
+ </div>
|
|
|
|
+ <div class="expert-content" ref="containerRef">
|
|
|
|
+ <div v-for="(section, index) in contentData" :key="index" class="content-section">
|
|
|
|
+ <div class="section-id" :id="section.targetId"></div>
|
|
|
|
+ <record-item :record-item-data="section" :onlyRecipeName="true" class="recipe-item">
|
|
|
|
+ <template #title>
|
|
|
|
+ <div class="box-title">
|
|
|
|
+ <div class="title-l">
|
|
|
|
+ {{ section.title }}
|
|
|
|
+ <span class="parent-text">{{ section.parentTitle || "秋梢期" }}</span>
|
|
</div>
|
|
</div>
|
|
- </template>
|
|
|
|
- </record-item>
|
|
|
|
- </div>
|
|
|
|
|
|
+ <div class="title-r">
|
|
|
|
+ <span class="r-dot"></span>
|
|
|
|
+ 2区
|
|
|
|
+ </div>
|
|
|
|
+ </div>
|
|
|
|
+ </template>
|
|
|
|
+ <template #footer>
|
|
|
|
+ <div class="action-group">
|
|
|
|
+ <div class="action-l">查看详情</div>
|
|
|
|
+ <div class="action-r" v-if="section.orderStatus === 0">
|
|
|
|
+ <div class="action-item second-item">拍照识别</div>
|
|
|
|
+ <div class="action-item primary-item">去确认</div>
|
|
|
|
+ </div>
|
|
|
|
+ <div class="action-r" v-if="section.orderStatus === 1">
|
|
|
|
+ <div class="action-item warning-item">发起需求</div>
|
|
|
|
+ <div class="action-item primary-item">确认完成</div>
|
|
|
|
+ </div>
|
|
|
|
+ <div class="action-r" v-if="section.orderStatus === 2">
|
|
|
|
+ <div class="action-item warning-item">发起需求</div>
|
|
|
|
+ <div class="action-item primary-item">去复核</div>
|
|
|
|
+ </div>
|
|
|
|
+ </div>
|
|
|
|
+ </template>
|
|
|
|
+ </record-item>
|
|
</div>
|
|
</div>
|
|
|
|
+ </div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</template>
|
|
</template>
|
|
|
|
|
|
<script setup>
|
|
<script setup>
|
|
-import { ref } from 'vue';
|
|
|
|
|
|
+import { ref, watch } from "vue";
|
|
import recordItem from "@/components/recordItem.vue";
|
|
import recordItem from "@/components/recordItem.vue";
|
|
|
|
|
|
-const filterType = ref(["待触发", "待执行", "已完成", "发起的需求"])
|
|
|
|
|
|
+const props = defineProps({
|
|
|
|
+ cardContentHeight: {
|
|
|
|
+ type: Number,
|
|
|
|
+ default: null,
|
|
|
|
+ },
|
|
|
|
+});
|
|
|
|
+
|
|
|
|
+// 角色
|
|
|
|
+// const curRole = store.state.app.curRole
|
|
|
|
+const curRole = 0
|
|
|
|
|
|
-const typeVal = ref(null)
|
|
|
|
-const regionVal = ref(null)
|
|
|
|
-const levelVal = ref(null)
|
|
|
|
|
|
+const filterType = ref(["待触发", "待执行", "已完成", "发起的需求"]);
|
|
|
|
+
|
|
|
|
+const typeVal = ref(null);
|
|
|
|
+const regionVal = ref(null);
|
|
|
|
+const levelVal = ref(null);
|
|
const typeOptions = ref([
|
|
const typeOptions = ref([
|
|
{ label: "全部", value: "all" },
|
|
{ label: "全部", value: "all" },
|
|
{ label: "施肥", value: "1" },
|
|
{ label: "施肥", value: "1" },
|
|
{ label: "用药", value: "2" },
|
|
{ label: "用药", value: "2" },
|
|
{ label: "修剪", value: "3" },
|
|
{ label: "修剪", value: "3" },
|
|
{ label: "其他", value: "4" },
|
|
{ label: "其他", value: "4" },
|
|
-])
|
|
|
|
|
|
+]);
|
|
|
|
|
|
-const regionOptions = ref([{
|
|
|
|
- label: "全部",
|
|
|
|
- value: "all"
|
|
|
|
-}, {
|
|
|
|
- label: "区域1",
|
|
|
|
- value: "1"
|
|
|
|
-}, {
|
|
|
|
- label: "区域2",
|
|
|
|
- value: "2"
|
|
|
|
-}, {
|
|
|
|
- label: "区域3",
|
|
|
|
- value: "3"
|
|
|
|
-}])
|
|
|
|
|
|
+const regionOptions = ref([
|
|
|
|
+ {
|
|
|
|
+ label: "全部",
|
|
|
|
+ value: "all",
|
|
|
|
+ },
|
|
|
|
+ {
|
|
|
|
+ label: "区域1",
|
|
|
|
+ value: "1",
|
|
|
|
+ },
|
|
|
|
+ {
|
|
|
|
+ label: "区域2",
|
|
|
|
+ value: "2",
|
|
|
|
+ },
|
|
|
|
+ {
|
|
|
|
+ label: "区域3",
|
|
|
|
+ value: "3",
|
|
|
|
+ },
|
|
|
|
+]);
|
|
|
|
|
|
const levelOptions = ref([
|
|
const levelOptions = ref([
|
|
{ label: "全部", value: "all" },
|
|
{ label: "全部", value: "all" },
|
|
{ label: "紧急", value: "1" },
|
|
{ label: "紧急", value: "1" },
|
|
{ label: "一般", value: "2" },
|
|
{ label: "一般", value: "2" },
|
|
{ label: "不紧急", value: "3" },
|
|
{ label: "不紧急", value: "3" },
|
|
-])
|
|
|
|
|
|
+]);
|
|
|
|
|
|
const activePlanIndex = ref(0);
|
|
const activePlanIndex = ref(0);
|
|
const handlePlanClick = (index) => {
|
|
const handlePlanClick = (index) => {
|
|
activePlanIndex.value = index;
|
|
activePlanIndex.value = index;
|
|
};
|
|
};
|
|
|
|
|
|
-
|
|
|
|
const containerRef = ref(null);
|
|
const containerRef = ref(null);
|
|
const handleClick = (e) => {
|
|
const handleClick = (e) => {
|
|
e.preventDefault();
|
|
e.preventDefault();
|
|
@@ -1133,6 +1144,14 @@ const contentData = ref([
|
|
},
|
|
},
|
|
]);
|
|
]);
|
|
|
|
|
|
|
|
+watch(
|
|
|
|
+ () => props.cardContentHeight,
|
|
|
|
+ (newValue) => {
|
|
|
|
+ if (newValue) {
|
|
|
|
+ // console.log('new', newValue);
|
|
|
|
+ }
|
|
|
|
+ }
|
|
|
|
+);
|
|
</script>
|
|
</script>
|
|
|
|
|
|
<style lang="scss" scoped>
|
|
<style lang="scss" scoped>
|
|
@@ -1148,19 +1167,19 @@ const contentData = ref([
|
|
justify-content: space-between;
|
|
justify-content: space-between;
|
|
align-items: center;
|
|
align-items: center;
|
|
.filter-item {
|
|
.filter-item {
|
|
- color: rgba(0, 0, 0, 0.5);
|
|
|
|
- padding: 0 12px;
|
|
|
|
- height: 28px;
|
|
|
|
- line-height: 28px;
|
|
|
|
- border-radius: 20px;
|
|
|
|
- &.active {
|
|
|
|
- background: rgba(33, 153, 248, 0.2);
|
|
|
|
- color: #2199F8;
|
|
|
|
- }
|
|
|
|
- }
|
|
|
|
- .filter-item + .filter-item {
|
|
|
|
- margin-left: 10px;
|
|
|
|
|
|
+ color: rgba(0, 0, 0, 0.5);
|
|
|
|
+ padding: 0 12px;
|
|
|
|
+ height: 28px;
|
|
|
|
+ line-height: 28px;
|
|
|
|
+ border-radius: 20px;
|
|
|
|
+ &.active {
|
|
|
|
+ background: rgba(33, 153, 248, 0.2);
|
|
|
|
+ color: #2199f8;
|
|
}
|
|
}
|
|
|
|
+ }
|
|
|
|
+ .filter-item + .filter-item {
|
|
|
|
+ margin-left: 10px;
|
|
|
|
+ }
|
|
}
|
|
}
|
|
.select-box {
|
|
.select-box {
|
|
padding-top: 5px;
|
|
padding-top: 5px;
|
|
@@ -1206,6 +1225,7 @@ const contentData = ref([
|
|
.plan-menu {
|
|
.plan-menu {
|
|
width: 90px;
|
|
width: 90px;
|
|
height: 100%;
|
|
height: 100%;
|
|
|
|
+ overflow: auto;
|
|
padding: 10px 0;
|
|
padding: 10px 0;
|
|
box-sizing: border-box;
|
|
box-sizing: border-box;
|
|
background: #fff;
|
|
background: #fff;
|
|
@@ -1327,13 +1347,13 @@ const contentData = ref([
|
|
.title-r {
|
|
.title-r {
|
|
display: flex;
|
|
display: flex;
|
|
align-items: center;
|
|
align-items: center;
|
|
- color: #FF8A2A;
|
|
|
|
|
|
+ color: #ff8a2a;
|
|
font-size: 12px;
|
|
font-size: 12px;
|
|
.r-dot {
|
|
.r-dot {
|
|
width: 6px;
|
|
width: 6px;
|
|
height: 6px;
|
|
height: 6px;
|
|
border-radius: 50%;
|
|
border-radius: 50%;
|
|
- background: #FF8A2A;
|
|
|
|
|
|
+ background: #ff8a2a;
|
|
margin-right: 5px;
|
|
margin-right: 5px;
|
|
}
|
|
}
|
|
}
|
|
}
|
|
@@ -1345,7 +1365,7 @@ const contentData = ref([
|
|
justify-content: space-between;
|
|
justify-content: space-between;
|
|
padding-top: 8px;
|
|
padding-top: 8px;
|
|
margin-top: 8px;
|
|
margin-top: 8px;
|
|
- border-top: 1px solid #F5F5F5;
|
|
|
|
|
|
+ border-top: 1px solid #f5f5f5;
|
|
.action-l {
|
|
.action-l {
|
|
font-size: 12px;
|
|
font-size: 12px;
|
|
}
|
|
}
|
|
@@ -1359,16 +1379,16 @@ const contentData = ref([
|
|
border-radius: 14px;
|
|
border-radius: 14px;
|
|
font-size: 12px;
|
|
font-size: 12px;
|
|
&.second-item {
|
|
&.second-item {
|
|
- border: 1px solid #2199F8;
|
|
|
|
- color: #2199F8;
|
|
|
|
|
|
+ border: 1px solid #2199f8;
|
|
|
|
+ color: #2199f8;
|
|
}
|
|
}
|
|
&.primary-item {
|
|
&.primary-item {
|
|
- background: #2199F8;
|
|
|
|
|
|
+ background: #2199f8;
|
|
color: #fff;
|
|
color: #fff;
|
|
}
|
|
}
|
|
&.warning-item {
|
|
&.warning-item {
|
|
background: rgba(255, 131, 29, 0.1);
|
|
background: rgba(255, 131, 29, 0.1);
|
|
- color: #FF831D;
|
|
|
|
|
|
+ color: #ff831d;
|
|
}
|
|
}
|
|
}
|
|
}
|
|
.action-item + .action-item {
|
|
.action-item + .action-item {
|
|
@@ -1379,4 +1399,4 @@ const contentData = ref([
|
|
}
|
|
}
|
|
}
|
|
}
|
|
}
|
|
}
|
|
-</style>
|
|
|
|
|
|
+</style>
|