295 lines
8.5 KiB
Vue
295 lines
8.5 KiB
Vue
<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> |