|
|
@ -26,18 +26,13 @@
|
|
|
|
<el-form-item label=" ">
|
|
|
|
<el-form-item label=" ">
|
|
|
|
<el-button type="primary" icon="Search" @click="handleQuery">{{ t('option.search') }}</el-button>
|
|
|
|
<el-button type="primary" icon="Search" @click="handleQuery">{{ t('option.search') }}</el-button>
|
|
|
|
<el-button icon="Refresh" @click="resetQuery">{{ t('option.reset') }}</el-button>
|
|
|
|
<el-button icon="Refresh" @click="resetQuery">{{ t('option.reset') }}</el-button>
|
|
|
|
<el-form-item label="轮位" prop="outerTireNumber">
|
|
|
|
|
|
|
|
<el-input
|
|
|
|
|
|
|
|
v-model="position"
|
|
|
|
|
|
|
|
:disabled="true">
|
|
|
|
|
|
|
|
</el-input>
|
|
|
|
|
|
|
|
</el-form-item>
|
|
|
|
|
|
|
|
</el-form-item>
|
|
|
|
</el-form-item>
|
|
|
|
|
|
|
|
|
|
|
|
</el-form>
|
|
|
|
</el-form>
|
|
|
|
|
|
|
|
|
|
|
|
<el-row style="background:#fff;padding:16px 16px 0;margin-bottom:32px;">
|
|
|
|
<el-row style="background:#fff;padding:16px 16px 0;margin-bottom:32px;">
|
|
|
|
<temp />
|
|
|
|
<temp ref="tempRef"/>
|
|
|
|
</el-row>
|
|
|
|
</el-row>
|
|
|
|
<el-row :gutter="32">
|
|
|
|
<el-row :gutter="32">
|
|
|
|
<el-col :xs="24" :sm="24" :lg="8" @click="handleTyreMileage">
|
|
|
|
<el-col :xs="24" :sm="24" :lg="8" @click="handleTyreMileage">
|
|
|
@ -47,12 +42,12 @@
|
|
|
|
</el-col>
|
|
|
|
</el-col>
|
|
|
|
<el-col :xs="24" :sm="24" :lg="8">
|
|
|
|
<el-col :xs="24" :sm="24" :lg="8">
|
|
|
|
<div class="chart-wrapper">
|
|
|
|
<div class="chart-wrapper">
|
|
|
|
<pie-chart />
|
|
|
|
<pie-chart ref="pieRef"/>
|
|
|
|
</div>
|
|
|
|
</div>
|
|
|
|
</el-col>
|
|
|
|
</el-col>
|
|
|
|
<el-col :xs="24" :sm="24" :lg="8">
|
|
|
|
<el-col :xs="24" :sm="24" :lg="8">
|
|
|
|
<div class="chart-wrapper">
|
|
|
|
<div class="chart-wrapper">
|
|
|
|
<bar-chart />
|
|
|
|
<bar-chart ref="barRef"/>
|
|
|
|
</div>
|
|
|
|
</div>
|
|
|
|
</el-col>
|
|
|
|
</el-col>
|
|
|
|
</el-row>
|
|
|
|
</el-row>
|
|
|
@ -60,63 +55,68 @@
|
|
|
|
</template>
|
|
|
|
</template>
|
|
|
|
|
|
|
|
|
|
|
|
<script setup name="basetyre">
|
|
|
|
<script setup name="basetyre">
|
|
|
|
import {useI18n} from 'vue-i18n';
|
|
|
|
import {useI18n} from 'vue-i18n';
|
|
|
|
import Cookies from "js-cookie";
|
|
|
|
import Cookies from "js-cookie";
|
|
|
|
import Temp from '@/views/dashboard/Temp'
|
|
|
|
import Temp from '@/views/dashboard/Temp'
|
|
|
|
import RaddarChart from '@/views/dashboard/RaddarChart'
|
|
|
|
import RaddarChart from '@/views/dashboard/RaddarChart'
|
|
|
|
import PieChart from '@/views/dashboard/PieChart'
|
|
|
|
import PieChart from '@/views/dashboard/PieChart'
|
|
|
|
import BarChart from '@/views/dashboard/BarChart'
|
|
|
|
import BarChart from '@/views/dashboard/BarChart'
|
|
|
|
import {getTempdata} from "@/api/report/report";
|
|
|
|
import {getTempdata} from "@/api/report/report";
|
|
|
|
import * as echarts from 'echarts'
|
|
|
|
import * as echarts from 'echarts'
|
|
|
|
provide('echart', echarts)
|
|
|
|
provide('echart', echarts)
|
|
|
|
const {t} = useI18n();
|
|
|
|
const {t} = useI18n();
|
|
|
|
const locale = (Cookies.get('language') || 'zhCn') === 'zhCn'
|
|
|
|
const locale = (Cookies.get('language') || 'zhCn') === 'zhCn'
|
|
|
|
const {proxy} = getCurrentInstance();
|
|
|
|
const {proxy} = getCurrentInstance();
|
|
|
|
// 搜索区域开关标识
|
|
|
|
// 搜索区域开关标识
|
|
|
|
const showSearch = ref(true);
|
|
|
|
const showSearch = ref(true);
|
|
|
|
|
|
|
|
const dateRange = ref([]);
|
|
|
|
|
|
|
|
const tempRef = ref();
|
|
|
|
|
|
|
|
const pieRef = ref();
|
|
|
|
|
|
|
|
const barRef = ref()
|
|
|
|
|
|
|
|
|
|
|
|
// 搜索参数
|
|
|
|
// 搜索参数
|
|
|
|
const queryParams = ref({
|
|
|
|
const queryParams = ref({
|
|
|
|
outerTireNumber: null,
|
|
|
|
outerTireNumber: null,
|
|
|
|
})
|
|
|
|
})
|
|
|
|
|
|
|
|
|
|
|
|
// 表单验证规则
|
|
|
|
// 表单验证规则
|
|
|
|
const rules = {
|
|
|
|
const rules = {
|
|
|
|
outerTireNumber: [{required: true, message: "胎号不能为空", trigger: "blur"}],
|
|
|
|
outerTireNumber: [{required: true, message: "胎号不能为空", trigger: "blur"}],
|
|
|
|
}
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
// 表单数据
|
|
|
|
// 表单数据
|
|
|
|
const form = ref({});
|
|
|
|
const form = ref({});
|
|
|
|
/** 表单重置 */
|
|
|
|
/** 表单重置 */
|
|
|
|
function reset() {
|
|
|
|
function reset() {
|
|
|
|
form.value = {
|
|
|
|
form.value = {
|
|
|
|
outerTireNumber: null,
|
|
|
|
outerTireNumber: null,
|
|
|
|
};
|
|
|
|
};
|
|
|
|
proxy.resetForm("postRef");
|
|
|
|
proxy.resetForm("postRef");
|
|
|
|
}
|
|
|
|
}
|
|
|
|
/** 搜索按钮操作 */
|
|
|
|
/** 搜索按钮操作 */
|
|
|
|
function handleQuery() {
|
|
|
|
function handleQuery() {
|
|
|
|
getTempdata(queryParams.value).then(response => {
|
|
|
|
getTempdata(proxy.addDateRange(queryParams.value, dateRange.value)).then(response => {
|
|
|
|
console.log(response)
|
|
|
|
tempRef.value.setData(response.data);
|
|
|
|
|
|
|
|
pieRef.value.setData(response?.data?.WarnData);
|
|
|
|
|
|
|
|
barRef.value.setData(response?.data?.patternTextureList)
|
|
|
|
}).finally(() => {
|
|
|
|
}).finally(() => {
|
|
|
|
loading.value = false;
|
|
|
|
//loading.value = false;
|
|
|
|
});
|
|
|
|
});
|
|
|
|
//getList();
|
|
|
|
//getList();
|
|
|
|
}
|
|
|
|
}
|
|
|
|
/** 搜索按钮操作 */
|
|
|
|
/** 搜索按钮操作 */
|
|
|
|
function handleTyreMileage() {
|
|
|
|
function handleTyreMileage() {
|
|
|
|
|
|
|
|
|
|
|
|
// this.$tab.openPage("用户管理", "/system/user");
|
|
|
|
}
|
|
|
|
}
|
|
|
|
/** 重置按钮操作 */
|
|
|
|
/** 重置按钮操作 */
|
|
|
|
const resetQuery = () => {
|
|
|
|
const resetQuery = () => {
|
|
|
|
|
|
|
|
proxy.resetForm("queryRef");
|
|
|
|
proxy.resetForm("queryRef");
|
|
|
|
handleQuery();
|
|
|
|
handleQuery();
|
|
|
|
}
|
|
|
|
}
|
|
|
|
</script>
|
|
|
|
</script>
|
|
|
|
<style lang="scss" scoped>
|
|
|
|
<style lang="scss" scoped>
|
|
|
|
.dashboard-editor-container {
|
|
|
|
.dashboard-editor-container {
|
|
|
|
padding: 32px;
|
|
|
|
padding: 32px;
|
|
|
|
background-color: rgb(240, 242, 245);
|
|
|
|
background-color: rgb(240, 242, 245);
|
|
|
|
position: relative;
|
|
|
|
position: relative;
|
|
|
@ -126,11 +126,11 @@
|
|
|
|
padding: 16px 16px 0;
|
|
|
|
padding: 16px 16px 0;
|
|
|
|
margin-bottom: 32px;
|
|
|
|
margin-bottom: 32px;
|
|
|
|
}
|
|
|
|
}
|
|
|
|
}
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
|
|
@media (max-width:1024px) {
|
|
|
|
@media (max-width:1024px) {
|
|
|
|
.chart-wrapper {
|
|
|
|
.chart-wrapper {
|
|
|
|
padding: 8px;
|
|
|
|
padding: 8px;
|
|
|
|
}
|
|
|
|
}
|
|
|
|
}
|
|
|
|
}
|
|
|
|
</style>
|
|
|
|
</style>
|
|
|
|