|
|
@@ -1,617 +0,0 @@
|
|
|
-<template>
|
|
|
- <div style="overflow-y: auto;background-color: #F7F7F7;height: 100%;">
|
|
|
- <div style="margin-left: 1%;width: 98%;display: flex;margin-top: 1%;height: 15vh;">
|
|
|
- <div shadow="always" style="width: 33%;height: 100%;;border-radius: 10px;background-color: white;margin-left: 0%;" class="boxShadow">
|
|
|
- <div style="width: 100%;display: flex;align-items: center;justify-content: center;font-size: 35px;font-weight: bold;color: #2DBEA2;;height: 70%">
|
|
|
- {{yearAll}}
|
|
|
- </div>
|
|
|
- <div style="display: flex;align-items: center;justify-content: center;background-color: #2DBEA2;font-size: 20px;width: 100%;color: white;text-align: center;border-radius: 0 0 10px 10px;height: 30%;">
|
|
|
- 年调用次数
|
|
|
- </div>
|
|
|
- </div>
|
|
|
- <div shadow="always" style="width: 33%;height: 100%;;border-radius: 10px;background-color: white;margin-left: 1%;" class="boxShadow">
|
|
|
- <div style="width: 100%;display: flex;align-items: center;justify-content: center;font-size: 35px;font-weight: bold;color: #40B0D7;;height: 70%">
|
|
|
- {{monAll}}
|
|
|
- </div>
|
|
|
- <div style="display: flex;align-items: center;justify-content: center;background-color: #40B0D7;font-size: 20px;width: 100%;color: white;text-align: center;border-radius: 0 0 10px 10px;height: 30%;">
|
|
|
- 月调用次数
|
|
|
- </div>
|
|
|
- </div>
|
|
|
- <div shadow="always" style="width: 33%;margin-left: 1%;height: 100%;;border-radius: 10px;background-color: white;" class="boxShadow">
|
|
|
- <div style="width: 100%;display: flex;align-items: center;justify-content: center;font-size: 35px;font-weight: bold;color: #477ACF;;height: 70%">
|
|
|
- {{dayAll}}
|
|
|
- </div>
|
|
|
- <div style="display: flex;align-items: center;justify-content: center;background-color: #477ACF;font-size: 20px;width: 100%;color: white;text-align: center;border-radius: 0 0 10px 10px;height: 30%;">
|
|
|
- 日调用次数
|
|
|
- </div>
|
|
|
- </div>
|
|
|
- </div>
|
|
|
- <div style="background-color: #F7F7F7;padding-top:1%;">
|
|
|
- <div style="margin-left: 1%;width: 98%;display: flex;height: 32vh;">
|
|
|
- <div style="width: 100%;height: 100%;">
|
|
|
- <el-card shadow="always" class="box-card" style="width:100%;height: 100%;">
|
|
|
- <div style="font-weight: bold;font-size: 18px;">
|
|
|
- 模型每日服务调度次数统计
|
|
|
- </div>
|
|
|
- <div style="display: flex;align-items: center;line-height: 1;margin-top: 1%;">
|
|
|
- <div style="font-size: 17px;">今日模型服务调度次数</div>
|
|
|
- <div style="color: #79bbff;margin-left: 1%;"> {{daySum}} </div>
|
|
|
- <div style="margin-left: 1%;"> 次 </div>
|
|
|
- <el-date-picker
|
|
|
- v-model="valueYue"
|
|
|
- type="month"
|
|
|
- style="margin-left: 1%;"
|
|
|
- @change="getDay"
|
|
|
- placeholder="本月"
|
|
|
- value-format="YYYY-MM-DD"
|
|
|
- />
|
|
|
- <el-select
|
|
|
- v-model="valueMod"
|
|
|
- @change="getDay"
|
|
|
- class="m-2"
|
|
|
- placeholder="上海市城区洪涝仿真模型"
|
|
|
- style="width: 15%;margin-left: 1%;"
|
|
|
- >
|
|
|
- <el-option
|
|
|
- v-for="item in optionsModel"
|
|
|
- :key="item.value"
|
|
|
- :label="item.label"
|
|
|
- :value="item.id"
|
|
|
- />
|
|
|
- </el-select>
|
|
|
- </div>
|
|
|
- <div id="top1" style="width: 98%;margin-left: 1%;margin-top: -1%;height:23vh">
|
|
|
-
|
|
|
- </div>
|
|
|
- </el-card>
|
|
|
- </div>
|
|
|
- </div>
|
|
|
- <div style="margin-left: 1%;width: 98%;display: flex;margin-top: 1%;height: 45vh;">
|
|
|
- <el-card shadow="always" class="box-card" style="width:50%;height: 100%;">
|
|
|
- <div style="margin-left: 1%;font-weight: bold;">
|
|
|
- 模型每月服务调度次数统计
|
|
|
- </div>
|
|
|
- <div style="width: 100%;display: flex;margin-top: 2%;">
|
|
|
- <el-date-picker
|
|
|
- v-model="valueMon"
|
|
|
- type="year"
|
|
|
- style="margin-left: 1%;"
|
|
|
- @change="getMon"
|
|
|
- placeholder="本年"
|
|
|
- value-format="YYYY-MM-DD"
|
|
|
- />
|
|
|
- <el-select
|
|
|
- v-model="valueModMon"
|
|
|
- @change="getMon"
|
|
|
- class="m-2"
|
|
|
- placeholder=""
|
|
|
- style="width: 25%;margin-left: 1%;"
|
|
|
- >
|
|
|
- <el-option
|
|
|
- v-for="item in optionsModel"
|
|
|
- :key="item.value"
|
|
|
- :label="item.label"
|
|
|
- :value="item.id"
|
|
|
- />
|
|
|
- </el-select>
|
|
|
- </div>
|
|
|
- <div id="bt1" style="width: 100%;margin-left: 0%;margin-top: -1%;height: 30vh;">
|
|
|
-
|
|
|
- </div>
|
|
|
- </el-card>
|
|
|
- <el-card shadow="always" class="box-card" style="width:50%;height: 100%;margin-left: 1%;">
|
|
|
- <div style="margin-left: 1%;font-weight: bold;">
|
|
|
- 模型调用次数年度排名
|
|
|
- </div>
|
|
|
- <div style="width: 100%;display: flex;margin-top: 2%;">
|
|
|
- <el-date-picker
|
|
|
- v-model="valuePai"
|
|
|
- type="year"
|
|
|
- style="margin-left: 1%;"
|
|
|
- @change="getPai"
|
|
|
- placeholder="本年"
|
|
|
- value-format="YYYY-MM-DD"
|
|
|
- />
|
|
|
- <!-- <el-select
|
|
|
- v-model="value"
|
|
|
- class="m-2"
|
|
|
- placeholder="上海市城区洪涝仿真模型"
|
|
|
- style="width:20%;margin-left: 1%;"
|
|
|
- >
|
|
|
- <el-option
|
|
|
- v-for="item in options"
|
|
|
- :key="item.value"
|
|
|
- :label="item.label"
|
|
|
- :value="item.value"
|
|
|
- />
|
|
|
- </el-select> -->
|
|
|
- </div>
|
|
|
- <div id="bt2" style="width: 100%;margin-left: 1%;margin-top: -1%;height: 35vh;">
|
|
|
-
|
|
|
- </div>
|
|
|
- </el-card>
|
|
|
- </div>
|
|
|
- </div>
|
|
|
- </div>
|
|
|
-</template>
|
|
|
-<script setup>
|
|
|
-import { ref, onMounted } from 'vue';
|
|
|
-import * as echarts from 'echarts';
|
|
|
-import { modelTreeSelect,getDayChart,getDaySum,getYueChart,getSumAll,getPaihang } from "@/api/service/info";
|
|
|
-const listHelp = [
|
|
|
-]
|
|
|
-const valuePai = ref()
|
|
|
-const modelList = ref([])
|
|
|
-const daySum = ref('')
|
|
|
-const valueYue = ref('')
|
|
|
-const dayAll = ref()
|
|
|
-const monAll = ref()
|
|
|
-const yearAll = ref()
|
|
|
-const valueModMon = ref('')
|
|
|
-const valueMon = ref('')
|
|
|
-const valueMod = ref('')
|
|
|
-const heightAll = window.innerHeight
|
|
|
-const seledMo = ['primary','plain','plain','plain','plain','plain','plain']
|
|
|
-const optionsModel = ref({})
|
|
|
-function getLastDayOfMonth(firstDay) {
|
|
|
- // 从第一天字符串解析年月
|
|
|
- const [year, month] = firstDay.split('-').map(Number);
|
|
|
-
|
|
|
- // 创建下个月第一天的日期对象
|
|
|
- const nextMonthFirstDay = new Date(year, month, 1); // month是1-12,JS会自动处理跨年
|
|
|
-
|
|
|
- // 获取当月最后一天(下个月第一天减1毫秒)
|
|
|
- const lastDay = new Date(nextMonthFirstDay - 1);
|
|
|
-
|
|
|
- // 格式化输出
|
|
|
- const lastDayYear = lastDay.getFullYear();
|
|
|
- const lastDayMonth = (lastDay.getMonth() + 1).toString().padStart(2, '0');
|
|
|
- const lastDayDate = lastDay.getDate().toString().padStart(2, '0');
|
|
|
-
|
|
|
- return `${lastDayYear}-${lastDayMonth}-${lastDayDate}`;
|
|
|
-}
|
|
|
-function getAllDaysInMonth(firstDayOfMonth) {
|
|
|
- // 解析输入字符串获取年月
|
|
|
- const [year, month] = firstDayOfMonth.split('-').map(Number);
|
|
|
-
|
|
|
- // 创建当月最后一天的日期对象
|
|
|
- const lastDay = new Date(year, month, 0); // 月份从0开始,所以month即下个月
|
|
|
-
|
|
|
- // 获取当月天数
|
|
|
- const daysCount = lastDay.getDate();
|
|
|
-
|
|
|
- // 生成所有天数的数组
|
|
|
- return Array.from({length: daysCount}, (_, i) =>
|
|
|
- (i + 1).toString().padStart(2, '0')
|
|
|
- );
|
|
|
-}
|
|
|
-function getLastDayOfYear(firstDay) {
|
|
|
- // 从输入字符串中提取年份
|
|
|
- const year = parseInt(firstDay.split('-')[0]);
|
|
|
-
|
|
|
- // 计算下一年度的第一天
|
|
|
- const nextYearFirstDay = new Date(year + 1, 0, 1); // 月份0代表1月
|
|
|
-
|
|
|
- // 计算本年度的最后一天(下一年第一天减去1毫秒)
|
|
|
- const lastDay = new Date(nextYearFirstDay.getTime() - 1);
|
|
|
-
|
|
|
- // 格式化为 YYYY-MM-DD
|
|
|
- const lastDayYear = lastDay.getFullYear();
|
|
|
- const lastDayMonth = String(lastDay.getMonth() + 1).padStart(2, '0'); // 月份从0开始,需+1
|
|
|
- const lastDayDate = String(lastDay.getDate()).padStart(2, '0');
|
|
|
-
|
|
|
- return `${lastDayYear}-${lastDayMonth}-${lastDayDate}`;
|
|
|
-}
|
|
|
-function getMon(){
|
|
|
- var mdName
|
|
|
- for(var i = 0;i<optionsModel.value.length;i++){
|
|
|
- if(valueModMon.value===optionsModel.value[i].id){
|
|
|
- mdName = optionsModel.value[i].label
|
|
|
- }
|
|
|
- }
|
|
|
- console.log(mdName.value)
|
|
|
- var par = {
|
|
|
- params:{
|
|
|
- beginTime:valueMon.value,
|
|
|
- endTime:getLastDayOfYear(valueMon.value)
|
|
|
- },
|
|
|
- mdId:valueModMon.value
|
|
|
- }
|
|
|
- var x = getMonthsFromJanuaryToCurrent()
|
|
|
- var y = []
|
|
|
- x.forEach(item=>{
|
|
|
- y.push(0)
|
|
|
- })
|
|
|
- getYueChart(par).then(res=>{
|
|
|
- for(var i = 0;i<res.data.length;i++){
|
|
|
- for(var i1 = 0;i1<y.length;i1++){
|
|
|
- if(Number(res.data[i].statisTm.slice(-5,-3))===i1+1){
|
|
|
- y[i1] = res.data[i].statisNum
|
|
|
- }
|
|
|
- }
|
|
|
- }
|
|
|
- initChartbt1(y,mdName)
|
|
|
- })
|
|
|
-}
|
|
|
-function getMonthsFromJanuaryToCurrent() {
|
|
|
- const today = new Date();
|
|
|
- const currentYear = today.getFullYear();
|
|
|
- const currentMonth = today.getMonth() + 1; // 获取当前月份 (1-12)
|
|
|
-
|
|
|
- const monthsArray = [];
|
|
|
-
|
|
|
- // 从1月循环到当前月份
|
|
|
- for (let month = 1; month <= currentMonth; month++) {
|
|
|
- monthsArray.push(month);
|
|
|
- }
|
|
|
-
|
|
|
- return monthsArray;
|
|
|
-}
|
|
|
-function getDaysFromFirstToToday() {
|
|
|
- const today = new Date();
|
|
|
- const currentYear = today.getFullYear();
|
|
|
- const currentMonth = today.getMonth();
|
|
|
- const currentDay = today.getDate(); // 获取今天是几号
|
|
|
-
|
|
|
- const daysArray = [];
|
|
|
-
|
|
|
- // 从1号循环到今天
|
|
|
- for (let day = 1; day <= currentDay; day++) {
|
|
|
- daysArray.push(day);
|
|
|
- }
|
|
|
-
|
|
|
- return daysArray;
|
|
|
-}
|
|
|
-function getDateRangeArray(dateStr) {
|
|
|
- const inputDate = new Date(dateStr);
|
|
|
- const inputYear = inputDate.getFullYear();
|
|
|
- const inputMonth = inputDate.getMonth(); // 0-based
|
|
|
- const inputDay = inputDate.getDate();
|
|
|
-
|
|
|
- const currentDate = new Date();
|
|
|
- const currentYear = currentDate.getFullYear();
|
|
|
- const currentMonth = currentDate.getMonth();
|
|
|
- const currentDay = currentDate.getDate();
|
|
|
-
|
|
|
- const daysArray = [];
|
|
|
-
|
|
|
- // 判断是否属于当前月
|
|
|
- if (inputYear === currentYear && inputMonth === currentMonth) {
|
|
|
- // 若输入日期晚于当前日期,返回空数组
|
|
|
- if (inputDay > currentDay) return daysArray;
|
|
|
-
|
|
|
- for (let day = inputDay; day <= currentDay; day++) {
|
|
|
- daysArray.push(day);
|
|
|
- }
|
|
|
- } else {
|
|
|
- // 生成传入月份的全部天数
|
|
|
- const daysInMonth = new Date(inputYear, inputMonth + 1, 0).getDate();
|
|
|
- for (let day = 1; day <= daysInMonth; day++) {
|
|
|
- daysArray.push(day);
|
|
|
- }
|
|
|
- }
|
|
|
-
|
|
|
- return daysArray;
|
|
|
-}
|
|
|
-function getDay(){
|
|
|
- var mdName
|
|
|
- for(var i = 0;i<optionsModel.value.length;i++){
|
|
|
- if(valueMod.value===optionsModel.value[i].id){
|
|
|
- mdName = optionsModel.value[i].label
|
|
|
- }
|
|
|
- }
|
|
|
- var par = {
|
|
|
- params:{
|
|
|
- beginTime:valueYue.value,
|
|
|
- endTime:getLastDayOfMonth(valueYue.value)
|
|
|
- },
|
|
|
- mdId:valueMod.value
|
|
|
- }
|
|
|
-
|
|
|
- var x = getDateRangeArray(valueYue.value)
|
|
|
- console.log(x)
|
|
|
- var y = []
|
|
|
- x.forEach(item=>{
|
|
|
- y.push(0)
|
|
|
- })
|
|
|
- var par1 = {
|
|
|
- mdId:valueMod.value
|
|
|
- }
|
|
|
- getDaySum(par1).then(res=>{
|
|
|
- daySum.value = res.data
|
|
|
- })
|
|
|
- getDayChart(par).then(res=>{
|
|
|
- for(var i = 0;i<res.data.length;i++){
|
|
|
- for(var i1 = 0;i1<y.length;i1++){
|
|
|
- if(Number(res.data[i].statisTm.slice(-2))===i1+1){
|
|
|
- y[i1] = res.data[i].statisNum
|
|
|
- }
|
|
|
- }
|
|
|
- }
|
|
|
- inintChartTop1(x,y,mdName)
|
|
|
- })
|
|
|
-}
|
|
|
-function inintChartTop1(x,y,mdName){
|
|
|
- var chartDom = document.getElementById('top1');
|
|
|
- var myChart = echarts.init(chartDom);
|
|
|
- var option;
|
|
|
-
|
|
|
- option = {
|
|
|
- tooltip: {
|
|
|
- trigger: 'axis'
|
|
|
- },
|
|
|
- legend: {
|
|
|
- top:'90%'
|
|
|
- },
|
|
|
- xAxis: {
|
|
|
- splitLine: { show: false },
|
|
|
- // type: 'category',
|
|
|
- data: x,
|
|
|
- axisLabel: {
|
|
|
- fontSize: 14, // y轴标签字体大小
|
|
|
- color: '#666'
|
|
|
- },
|
|
|
- },
|
|
|
- yAxis: {
|
|
|
- type: 'value',
|
|
|
- show: true,
|
|
|
- axisLabel: {
|
|
|
- fontSize: 14, // y轴标签字体大小
|
|
|
- color: '#666'
|
|
|
- },
|
|
|
- splitLine: { show: false },
|
|
|
- name: '单位:次',
|
|
|
- minInterval: 1,
|
|
|
- axisTick: {
|
|
|
- show: true // 确保显示刻度线
|
|
|
- },
|
|
|
- axisLine: {
|
|
|
- show: true, // 确保显示轴线
|
|
|
- lineStyle: {
|
|
|
- color: '#333', // 可以设置轴线的颜色,例如与文字颜色一致
|
|
|
- // width: 1 // 可以设置轴线宽度,可选
|
|
|
- }
|
|
|
- },
|
|
|
- },
|
|
|
- series: [
|
|
|
- {
|
|
|
- name: mdName,
|
|
|
- type: 'line',
|
|
|
- color:'#409EFF',
|
|
|
- data: y,
|
|
|
- smooth: true
|
|
|
- },
|
|
|
- ]
|
|
|
- };
|
|
|
-
|
|
|
- option && myChart.setOption(option);
|
|
|
-
|
|
|
-}
|
|
|
-function initChartbt1(y,mdName){
|
|
|
- var chartDom = document.getElementById('bt1');
|
|
|
- var myChart = echarts.init(chartDom);
|
|
|
- var option;
|
|
|
- option = {
|
|
|
- tooltip: {
|
|
|
- trigger: 'axis'
|
|
|
- },
|
|
|
- legend: {
|
|
|
- data: ['上海市城区洪涝仿真模型', '上海沿海风暴潮预报模型', '黄浦江水系水文分析预报数值模拟模型', '苏州河水系水情预报模型',
|
|
|
- '内涝风险实时预警与预报模型','上海市中心城区排水系统模型', '温带风暴潮预报模型',],
|
|
|
- top:'90%'
|
|
|
- },
|
|
|
- xAxis: {
|
|
|
- splitLine: { show: false },
|
|
|
- // type: 'category',
|
|
|
- data: [1,2,3,4,5,6,7,8,9,10,11,12],
|
|
|
- axisLabel: {
|
|
|
- fontSize: 14, // y轴标签字体大小
|
|
|
- color: '#666'
|
|
|
- },
|
|
|
- },
|
|
|
- yAxis: {
|
|
|
- type: 'value',
|
|
|
- show: true,
|
|
|
- name: '单位:次',
|
|
|
- axisLabel: {
|
|
|
- fontSize: 14, // y轴标签字体大小
|
|
|
- color: '#666'
|
|
|
- },
|
|
|
- minInterval: 1,
|
|
|
- splitLine: { show: false },
|
|
|
- axisTick: {
|
|
|
- show: true // 确保显示刻度线
|
|
|
- },
|
|
|
- axisLine: {
|
|
|
- show: true, // 确保显示轴线
|
|
|
- lineStyle: {
|
|
|
- color: '#333', // 可以设置轴线的颜色,例如与文字颜色一致
|
|
|
- // width: 1 // 可以设置轴线宽度,可选
|
|
|
- }
|
|
|
- },
|
|
|
- },
|
|
|
- series: [
|
|
|
- {
|
|
|
- name: mdName,
|
|
|
- type: 'line',
|
|
|
- color:'#409EFF',
|
|
|
- data: y,
|
|
|
- smooth: true
|
|
|
- },
|
|
|
- ]
|
|
|
- };
|
|
|
-
|
|
|
- option && myChart.setOption(option);
|
|
|
-
|
|
|
-}
|
|
|
-function initChartbt2(y){
|
|
|
- var chartDom = document.getElementById('bt2');
|
|
|
- var myChart = echarts.init(chartDom);
|
|
|
- var option;
|
|
|
- option = {
|
|
|
- tooltip: {
|
|
|
- trigger: 'axis'
|
|
|
- },
|
|
|
- xAxis: {
|
|
|
- axisLabel: {
|
|
|
- fontSize: 14, // y轴标签字体大小
|
|
|
- color: '#666'
|
|
|
- },
|
|
|
- splitLine: { show: false },
|
|
|
- type: 'category',
|
|
|
- data: modelList.value,
|
|
|
- axisLabel: {
|
|
|
- interval: 0, // 强制显示所有标签
|
|
|
- rotate: -25, // 旋转角度,正值表示顺时针旋转,负值表示逆时针旋转
|
|
|
- // 可以设置文字样式,如字体大小、颜色等
|
|
|
- textStyle: {
|
|
|
- fontSize: 10,
|
|
|
- color: '#333'
|
|
|
- }
|
|
|
- }
|
|
|
- },
|
|
|
- yAxis: {
|
|
|
- type: 'value',
|
|
|
- name: '单位:次',
|
|
|
- minInterval: 1,
|
|
|
- show: true,
|
|
|
- nameLocation: 'end',
|
|
|
- axisLabel: {
|
|
|
- fontSize: 14, // y轴标签字体大小
|
|
|
- color: '#666'
|
|
|
- },
|
|
|
- splitLine: { show: false },
|
|
|
- axisTick: {
|
|
|
- show: true // 确保显示刻度线
|
|
|
- },
|
|
|
- axisLine: {
|
|
|
- show: true, // 确保显示轴线
|
|
|
- lineStyle: {
|
|
|
- color: '#333', // 可以设置轴线的颜色,例如与文字颜色一致
|
|
|
- // width: 1 // 可以设置轴线宽度,可选
|
|
|
- }
|
|
|
- },
|
|
|
- },
|
|
|
- series: [
|
|
|
- {
|
|
|
- type: 'bar',
|
|
|
- color:'#409EFF',
|
|
|
- data: y,
|
|
|
- smooth: true
|
|
|
- },
|
|
|
- ]
|
|
|
- };
|
|
|
-
|
|
|
- option && myChart.setOption(option);
|
|
|
-
|
|
|
-}
|
|
|
-const getFirstDayOfMonthShort = () => {
|
|
|
- const now = new Date();
|
|
|
- return `${now.getFullYear()}-${(now.getMonth() + 1).toString().padStart(2, '0')}-01`;
|
|
|
-};
|
|
|
-function getFirstDayOfYear() {
|
|
|
- const currentYear = new Date().getFullYear();
|
|
|
- const firstDay = new Date(currentYear, 0, 1);
|
|
|
-
|
|
|
- // 格式化为 YYYY-MM-DD
|
|
|
- const year = firstDay.getFullYear();
|
|
|
- const month = String(firstDay.getMonth() + 1).padStart(2, '0');
|
|
|
- const day = String(firstDay.getDate()).padStart(2, '0');
|
|
|
-
|
|
|
- return `${year}-${month}-${day}`;
|
|
|
-}
|
|
|
-function getPai(){
|
|
|
- var par = {
|
|
|
- params:{
|
|
|
- beginTime:valuePai.value,
|
|
|
- endTime:getLastDayOfYear(valueMon.value)
|
|
|
- },
|
|
|
- }
|
|
|
- modelList.value = []
|
|
|
- var y = []
|
|
|
- getPaihang(par).then(res=>{
|
|
|
- res.data.forEach(item=>{
|
|
|
- modelList.value.push(item.mdName)
|
|
|
- y.push(item.statisNum)
|
|
|
- })
|
|
|
- initChartbt2(y)
|
|
|
- })
|
|
|
-}
|
|
|
-async function getTreeLeft(){
|
|
|
- var par = {
|
|
|
- params:{
|
|
|
- level:'2',
|
|
|
- devkind:'APP'
|
|
|
- }
|
|
|
- }
|
|
|
- await modelTreeSelect(par).then(res=>{
|
|
|
- optionsModel.value = res.data[0].children
|
|
|
- valueMod.value = optionsModel.value[0].id
|
|
|
- valueModMon.value = optionsModel.value[0].id
|
|
|
- valueMon.value = getFirstDayOfYear()
|
|
|
- valueYue.value = getFirstDayOfMonthShort()
|
|
|
- valuePai.value = getFirstDayOfYear()
|
|
|
- getDay()
|
|
|
- getMon()
|
|
|
- // getPai()
|
|
|
- })
|
|
|
- var par1 = {
|
|
|
- params:{
|
|
|
- beginTime:valuePai.value,
|
|
|
- endTime:getLastDayOfYear(valueMon.value)
|
|
|
- },
|
|
|
- }
|
|
|
- modelList.value = []
|
|
|
- var y = []
|
|
|
- await getPaihang(par1).then(res=>{
|
|
|
- res.data.forEach(item=>{
|
|
|
- modelList.value.push(item.mdName)
|
|
|
- y.push(item.statisNum)
|
|
|
- })
|
|
|
- initChartbt2(y)
|
|
|
- })
|
|
|
- var parDay = {
|
|
|
- params:{
|
|
|
- beginTime:`${new Date().getFullYear()}-${String(new Date().getMonth() + 1).padStart(2, '0')}-${String(new Date().getDate()).padStart(2, '0')}`,
|
|
|
- endTime:`${new Date().getFullYear()}-${String(new Date().getMonth() + 1).padStart(2, '0')}-${String(new Date().getDate()).padStart(2, '0')}`
|
|
|
- },
|
|
|
- }
|
|
|
- var parMon = {
|
|
|
- params:{
|
|
|
- beginTime:getFirstDayOfMonthShort(),
|
|
|
- endTime:getLastDayOfMonth(valueYue.value)
|
|
|
- },
|
|
|
- }
|
|
|
- var parYear = {
|
|
|
- params:{
|
|
|
- beginTime:getFirstDayOfYear(),
|
|
|
- endTime:getLastDayOfYear(valueMon.value)
|
|
|
- },
|
|
|
- }
|
|
|
- getSumAll(parDay).then(res=>{
|
|
|
- dayAll.value = res.data
|
|
|
- })
|
|
|
- getSumAll(parMon).then(res=>{
|
|
|
- monAll.value = res.data
|
|
|
- })
|
|
|
- getSumAll(parYear).then(res=>{
|
|
|
- yearAll.value = res.data
|
|
|
- })
|
|
|
-}
|
|
|
-onMounted(() => {
|
|
|
- getTreeLeft()
|
|
|
-
|
|
|
- // inintChartTop1()
|
|
|
- // initChartbt1()
|
|
|
-
|
|
|
-});
|
|
|
-</script>
|
|
|
-<style scoped lang="scss">
|
|
|
-.boxShadow{
|
|
|
- box-shadow:
|
|
|
- -8px 0 15px -10px rgba(0, 0, 0, 0.1), /* 左侧阴影 */
|
|
|
- 8px 0 15px -10px rgba(0, 0, 0, 0.1); /* 右侧阴影 */
|
|
|
- transition: box-shadow 0.3s ease;
|
|
|
-
|
|
|
-}
|
|
|
-</style>
|