增加二期菜单以及综合模式评估页面

2026-04-28 15:47:19 +08:00
parent 6904f960b7
commit e5a0527861
23 changed files with 1013 additions and 46 deletions
--- a/pages/recycling/integratedModeAssessment/valueEvaluation.vue
+++ b/pages/recycling/integratedModeAssessment/valueEvaluation.vue
@@ -0,0 +1,295 @@
+<template>
+    <view style="background-color: #fff;">
+        <view class="inter-card">
+            <uv-form labelPosition="left" :model="formModel" :rules="formRules" labelWidth="130" ref="formRef">
+                <text class="title">
+                    <text class="dot"></text>
+                    基本条件
+                </text>
+                <uv-form-item label="废弃物产生量（吨/年）" prop="amount" borderBottom>
+                    <uv-input v-model="formModel.amount" border="none" placeholderStyle="text-align: right;"
+                        placeholder="请输入废弃物产生量" />
+                </uv-form-item>
+
+                <uv-form-item label="运输距离" prop="distance" borderBottom>
+                    <uv-input v-model="formModel.distance" placeholder="请选择运输距离" placeholderStyle="text-align:right"
+                        border="none" right-icon="arrow-right" @click="openRiskPopup('distance')" />
+                </uv-form-item>
+                <uv-form-item label="环境风险等级" prop="risk" borderBottom>
+                    <uv-input v-model="formModel.risk" placeholder="请选择环境风险等级" placeholderStyle="text-align:right"
+                        border="none" right-icon="arrow-right" @click="openRiskPopup('risk')" />
+                </uv-form-item>
+                <uv-form-item label="处理成本水平" prop="cost" borderBottom>
+                    <uv-input v-model="formModel.cost" placeholder="请选择处理成本水平" placeholderStyle="text-align:right"
+                        border="none" right-icon="arrow-right" @click="openRiskPopup('cost')" />
+                </uv-form-item>
+
+                <text class="title">
+                    <text class="dot"></text>
+                    多元价值权重设置
+                </text>
+                <uv-form-item borderBottom :label="i.label" v-for="i in weights" :key="i.key">
+                    <view class="slider-row">
+                        <slider class="sg-slider" :value="formModel[i.key]"
+                            @changing="formModel[i.key] = $event.detail.value" />
+                        <text class="percent">{{ formModel[i.key] }}%</text>
+                    </view>
+                </uv-form-item>
+
+            </uv-form>
+            <view class="desc-box mt-8">
+                <h4>参数说明</h4>
+                <text>· 经济价值：回收成本、收益、资源利用收益等</text><br />
+                <text>· 环境价值：污染排放、生态影响、环境修复等</text><br />
+                <text>· 社会价值：公共安全、就业带动、合规性等</text><br />
+                <text>· 资源价值：资源再生利用率、循环利用价值等</text>
+            </view>
+        </view>
+        <view class="bottom">
+            <uv-button type="primary" @tap="submitForm">
+                <uv-icon name="grid-fill" :loading="loading" class="mr-4" color="#fff" size="20" />
+                开始评估
+            </uv-button>
+        </view>
+        <uv-popup ref="popup" mode="bottom" custom-style="height: 200rpx;">
+            <view class="content">
+                <text @tap="onCheck(item)" v-for="item in selectOption" :key="item.value">{{ item.label }}</text>
+            </view>
+        </uv-popup>
+    </view>
+</template>
+
+<script setup>
+import { getTwoOneRandom } from '../..//until'
+import { ref, reactive, computed } from "vue";
+const clickName = ref('')
+const loading = ref(false)
+const popup = ref(null)
+const formRef = ref();
+// 权重
+const weights = reactive([
+    { key: 'economic', label: '经济价值权重' },
+    { key: 'environment', label: '环境价值权重' },
+    { key: 'social', label: '社会价值权重' },
+    { key: 'resource', label: '资源价值权重' }
+])
+// 结果
+const result = reactive({
+    total: 78.6,
+    economic: 81.4,
+    environment: 72.3,
+    social: 76.8,
+    resource: 83.6,
+    scoreCards: ''
+})
+// const result = reactive({
+//     total: getTwoOneRandom(),
+//     economic: getTwoOneRandom(),
+//     environment: getTwoOneRandom(),
+//     social: getTwoOneRandom(),
+//     resource: getTwoOneRandom()
+// })
+const scoreCards = computed(() => [
+    { label: '经济价值得分', value: result.economic, color: '#246fe5' },
+    { label: '环境价值得分', value: result.environment, color: '#22b85a' },
+    { label: '社会价值得分', value: result.social, color: '#8b45f7' },
+    { label: '资源价值得分', value: result.resource, color: '#f5a400' }
+])
+// const formRules = {
+//     amount: {
+//         type: "string",
+//         required: true,
+//         message: "请输入废弃物产生量",
+//         trigger: ["blur", "change"],
+//     },
+//     distance: {
+//         type: "string",
+//         required: true,
+//         message: "请选择运输距离",
+//         trigger: ['blur', 'change']
+//     },
+//     risk: {
+//         type: "string",
+//         required: true,
+//         message: "请选择环境风险等级",
+//         trigger: ['blur', 'change']
+//     },
+//     cost: {
+//         type: "string",
+//         required: true,
+//         message: "请选择处理成本水平",
+//         trigger: ['blur', 'change']
+//     },
+// }
+const selectOption = [
+    { value: 'low', label: '低等' },
+    { value: 'middle', label: '中等' },
+    { value: 'high', label: '高等' },
+]
+
+const formModel = reactive({
+    total: 78.6,
+    economic: 40,
+    environment: 30,
+    social: 20,
+    resource: 10,
+    amount: '',
+    distance: '',
+    risk: '',
+    cost: '',
+})
+
+const openRiskPopup = (val) => {
+    clickName.value = val
+    popup.value.open()
+}
+
+const onCheck = (item) => {
+    formModel[clickName.value] = item.label
+    popup.value.close()
+
+}
+
+const submitForm = () => {
+    formRef.value.validate().then(res => {
+        const totalWeight =
+            formModel.economic +
+            formModel.environment +
+            formModel.social +
+            formModel.resource
+
+        if (!formModel.amount || !formModel.cost || !formModel.distance || !formModel.risk) {
+            uni.showToast({
+                title: '请完善基本条件',
+                icon: 'none'
+            })
+            return
+        }
+        if (Math.round(totalWeight) !== 100) {
+            uni.showToast({
+                title: '权重合计必须为 100%',
+                icon: 'none'
+            })
+            return
+        }
+        result.total = (
+            result.economic * formModel.economic / 100 +
+            result.environment * formModel.environment / 100 +
+            result.social * formModel.social / 100 +
+            result.resource * formModel.resource / 100
+        ).toFixed(1)
+        result.scoreCards = scoreCards
+        console.log(result, 'result===>');
+
+        uni.setStorageSync('app_integratedModeAssessment_result', result)
+        uni.showToast({
+            title: '评估成功',
+            icon: 'success'
+        })
+        uni.navigateTo({
+            url: '/pages/recycling/integratedModeAssessment/results'
+        })
+    })
+
+}
+</script>
+
+<style scoped lang="scss">
+/* 国网绿主色 */
+$gw-green: #006569;
+$gw-light: #409E99;
+
+.inter-card {
+    padding: 20rpx;
+}
+
+/* 底部按钮 */
+.bottom {
+    position: fixed;
+    bottom: 0;
+    left: 0;
+    width: 100%;
+}
+
+:deep(.uv-button--primary) {
+    background-color: $gw-green !important;
+    border-color: $gw-green !important;
+}
+
+/* 说明面板 */
+.desc-box {
+    background: #f2f9f9;
+    border-left: 6rpx solid $gw-green;
+    border-radius: 8rpx;
+    padding: 10rpx 24rpx;
+    font-size: 14px;
+    color: #333;
+    margin-top: 20rpx;
+
+    h4 {
+        margin-bottom: 4rpx;
+    }
+
+    uni-text {
+        display: inline-block;
+        margin-bottom: 8rpx;
+    }
+}
+
+/* 标题 */
+.title {
+    font-size: 16px;
+    font-weight: 500;
+    color: $gw-green;
+    margin: 14rpx 0 0 0;
+    display: flex;
+    align-items: center;
+}
+
+/* 标题小圆点 */
+.dot {
+    width: 12rpx;
+    height: 12rpx;
+    background-color: $gw-green;
+    // border-radius: 50%;
+    display: inline-block;
+    margin-right: 12rpx;
+}
+
+/* 滑块布局 */
+.slider-row {
+    display: flex;
+    align-items: center;
+    flex: 1;
+}
+
+/* 国网绿滑块 */
+.sg-slider {
+    flex: 1;
+    --slider-track-color: #d9eaea;
+    --slider-active-color: $gw-light;
+    --slider-thumb-color: $gw-green;
+}
+
+.percent {
+    width: 80rpx;
+    text-align: right;
+    font-size: 12px;
+    color: $gw-green;
+    font-weight: 500;
+    margin-left: 10rpx;
+}
+
+.content {
+    display: flex;
+    flex-direction: column;
+    padding: 20rpx;
+
+    text {
+        text-align: center;
+        width: 100%;
+        padding: 16rpx 0;
+        border-bottom: 2rpx solid #F5F5F5;
+    }
+}
+</style>