|
|
@@ -1,188 +1,305 @@
|
|
|
<template>
|
|
|
- <div style="margin-left: 1%;width: 98%;display: flex;margin-top: 1%;" :style="{'height':heightAll*0.15+'px'}">
|
|
|
- <div shadow="always" style="width: 33%;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%">
|
|
|
- 358
|
|
|
- </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 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%">
|
|
|
- 1532
|
|
|
- </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%;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: #2DBEA2;;height: 70%">
|
|
|
- 9523
|
|
|
+ <div style="overflow-y: auto;">
|
|
|
+ <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;" 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 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 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>
|
|
|
- </div>
|
|
|
- <div style="background-color: #F7F7F7;padding-top:1% ;">
|
|
|
- <div style="margin-left: 1%;width: 98%;display: flex;" :style="{'height':heightAll*0.35+'px'}">
|
|
|
- <div style="width: 100%;height: 100%;">
|
|
|
- <el-card shadow="always" class="box-card" style="width:100%;height: 100%;">
|
|
|
- <div style="display: flex;align-items: center;font-weight: bold;">
|
|
|
- <div style="">今日模型服务调度次数</div>
|
|
|
- <div style="color: #79bbff;margin-left: 1%;"> 356 </div>
|
|
|
- <div style="margin-left: 1%;"> 次 </div>
|
|
|
- <el-select
|
|
|
- v-model="value"
|
|
|
- class="m-2"
|
|
|
- placeholder="本月"
|
|
|
- style="width: 10%;margin-left: 1%;"
|
|
|
- >
|
|
|
- <el-option
|
|
|
- v-for="item in options"
|
|
|
- :key="item.value"
|
|
|
- :label="item.label"
|
|
|
- :value="item.value"
|
|
|
- />
|
|
|
- </el-select>
|
|
|
- <el-select
|
|
|
- v-model="value"
|
|
|
- class="m-2"
|
|
|
- placeholder="上海市城区洪涝仿真模型"
|
|
|
- style="width: 10%;margin-left: 1%;"
|
|
|
- >
|
|
|
- <el-option
|
|
|
- v-for="item in options"
|
|
|
- :key="item.value"
|
|
|
- :label="item.label"
|
|
|
- :value="item.value"
|
|
|
- />
|
|
|
- </el-select>
|
|
|
+ <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: #2DBEA2;;height: 70%">
|
|
|
+ {{yearAll}}
|
|
|
</div>
|
|
|
- <div id="top1" style="width: 98%;margin-left: 1%;margin-top: 1%;" :style="{'height':heightAll*0.23+'px'}">
|
|
|
-
|
|
|
+ <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>
|
|
|
- </el-card>
|
|
|
+ </div>
|
|
|
</div>
|
|
|
- <!-- <div style="width: 30%;height: 100%;margin-left: 1%;">
|
|
|
- <el-card shadow="always" class="box-card" style="width:100%;height: 100%;">
|
|
|
- <div style="display: flex;align-items: center;font-weight: bold;width: 100%;">
|
|
|
- <div style="">模型服务调用次数</div>
|
|
|
- <div style="width: 50%;margin-left: 20%;">
|
|
|
- <el-select
|
|
|
- v-model="value"
|
|
|
- class="m-2"
|
|
|
- placeholder="长江水利委员会"
|
|
|
- style="width: 100%;;"
|
|
|
- >
|
|
|
- <el-option
|
|
|
- v-for="item in options"
|
|
|
- :key="item.value"
|
|
|
- :label="item.label"
|
|
|
- :value="item.value"
|
|
|
+ <div style="background-color: #F7F7F7;padding-top:1%;">
|
|
|
+ <div style="margin-left: 1%;width: 98%;display: flex;height: 35vh;">
|
|
|
+ <div style="width: 100%;height: 100%;">
|
|
|
+ <el-card shadow="always" class="box-card" style="width:100%;height: 100%;">
|
|
|
+ <div style="display: flex;align-items: center;font-weight: bold;line-height: 1;">
|
|
|
+ <div style="">今日模型服务调度次数</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>
|
|
|
- </div>
|
|
|
- </div>
|
|
|
- <div id="top2" style="width: 98%;margin-left: 1%;margin-top: 1%;" :style="{'height':heightAll*0.23+'px'}">
|
|
|
+ <el-select
|
|
|
+ v-model="valueMod"
|
|
|
+ @change="getDay"
|
|
|
+ class="m-2"
|
|
|
+ placeholder="上海市城区洪涝仿真模型"
|
|
|
+ style="width: 10%;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>
|
|
|
- </el-card>
|
|
|
- </div>
|
|
|
- <div style="width: 30%;height: 100%;;margin-left: 1%">
|
|
|
- <el-card shadow="always" class="box-card" style="width:100%;height: 100%;">
|
|
|
- <div style="display: flex;align-items: center;font-weight: bold;width: 100%;">
|
|
|
- <div style="">模型服务类型总数 </div>
|
|
|
- <div style="color: #79bbff;margin-left: 1%;"> 123 </div>
|
|
|
- <div style="margin-left: 1%;"> 次 </div>
|
|
|
- </div>
|
|
|
- <div id="top3" style="width: 98%;margin-left: 1%;margin-top: 1%;" :style="{'height':heightAll*0.25+'px'}">
|
|
|
+ <!-- <div style="width: 30%;height: 100%;margin-left: 1%;">
|
|
|
+ <el-card shadow="always" class="box-card" style="width:100%;height: 100%;">
|
|
|
+ <div style="display: flex;align-items: center;font-weight: bold;width: 100%;">
|
|
|
+ <div style="">模型服务调用次数</div>
|
|
|
+ <div style="width: 50%;margin-left: 20%;">
|
|
|
+ <el-select
|
|
|
+ v-model="value"
|
|
|
+ class="m-2"
|
|
|
+ placeholder="长江水利委员会"
|
|
|
+ style="width: 100%;;"
|
|
|
+ >
|
|
|
+ <el-option
|
|
|
+ v-for="item in options"
|
|
|
+ :key="item.value"
|
|
|
+ :label="item.label"
|
|
|
+ :value="item.value"
|
|
|
+ />
|
|
|
+ </el-select>
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+ <div id="top2" style="width: 98%;margin-left: 1%;margin-top: 1%;" :style="{'height':heightAll*0.23+'px'}">
|
|
|
|
|
|
+ </div>
|
|
|
+ </el-card>
|
|
|
</div>
|
|
|
- </el-card>
|
|
|
- </div> -->
|
|
|
- </div>
|
|
|
-
|
|
|
- <div style="margin-left: 1%;width: 98%;display: flex;margin-top: 1%" :style="{'height':heightAll*0.38+'px'}">
|
|
|
- <el-card shadow="always" class="box-card" style="width:50%;height: 100%;">
|
|
|
- <div style="width: 100%;display: flex;">
|
|
|
- <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>
|
|
|
- <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="bt1" style="width: 100%;margin-left: 0%;margin-top: 1%;;" :style="{'height':heightAll*0.3+'px'}">
|
|
|
+ <div style="width: 30%;height: 100%;;margin-left: 1%">
|
|
|
+ <el-card shadow="always" class="box-card" style="width:100%;height: 100%;">
|
|
|
+ <div style="display: flex;align-items: center;font-weight: bold;width: 100%;">
|
|
|
+ <div style="">模型服务类型总数 </div>
|
|
|
+ <div style="color: #79bbff;margin-left: 1%;"> 123 </div>
|
|
|
+ <div style="margin-left: 1%;"> 次 </div>
|
|
|
+ </div>
|
|
|
+ <div id="top3" style="width: 98%;margin-left: 1%;margin-top: 1%;" :style="{'height':heightAll*0.25+'px'}">
|
|
|
|
|
|
+ </div>
|
|
|
+ </el-card>
|
|
|
+ </div> -->
|
|
|
</div>
|
|
|
- </el-card>
|
|
|
- <el-card shadow="always" class="box-card" style="width:50%;height: 100%;margin-left: 1%;">
|
|
|
- <div style="width: 100%;display: flex;">
|
|
|
- <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"
|
|
|
+ <div style="margin-left: 1%;width: 98%;display: flex;margin-top: 1%;height: 38vh;">
|
|
|
+ <el-card shadow="always" class="box-card" style="width:50%;height: 100%;">
|
|
|
+ <div style="width: 100%;display: flex;">
|
|
|
+ <el-date-picker
|
|
|
+ v-model="valueMon"
|
|
|
+ type="year"
|
|
|
+ style="margin-left: 1%;"
|
|
|
+ @change="getMon"
|
|
|
+ placeholder="本年"
|
|
|
+ value-format="YYYY-MM-DD"
|
|
|
/>
|
|
|
- </el-select>
|
|
|
- <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
|
|
|
+ v-model="valueModMon"
|
|
|
+ @change="getMon"
|
|
|
+ class="m-2"
|
|
|
+ placeholder=""
|
|
|
+ style="width: 20%;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="width: 100%;display: flex;">
|
|
|
+ <el-date-picker
|
|
|
+ v-model="valuePai"
|
|
|
+ type="year"
|
|
|
+ style="margin-left: 1%;"
|
|
|
+ @change="getPai"
|
|
|
+ placeholder="本年"
|
|
|
+ value-format="YYYY-MM-DD"
|
|
|
/>
|
|
|
- </el-select>
|
|
|
- </div>
|
|
|
- <div id="bt2" style="width: 100%;margin-left: 1%;margin-top: 1%;" :style="{'height':heightAll*0.3+'px'}">
|
|
|
+ <!-- <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: 30vh;">
|
|
|
|
|
|
+ </div>
|
|
|
+ </el-card>
|
|
|
</div>
|
|
|
- </el-card>
|
|
|
- </div>
|
|
|
- </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']
|
|
|
-
|
|
|
-function inintChartTop1(){
|
|
|
+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 = [1,2,3,4,5,6,7,8,9,10,11,12]
|
|
|
+ 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 getDay(){
|
|
|
+ var mdName
|
|
|
+ for(var i = 0;i<optionsModel.value.length;i++){
|
|
|
+ if(valueMod.value===optionsModel.value[i].id){
|
|
|
+ mdName = optionsModel.value[i].label
|
|
|
+ }
|
|
|
+ }
|
|
|
+ console.log(mdName)
|
|
|
+ var par = {
|
|
|
+ params:{
|
|
|
+ beginTime:valueYue.value,
|
|
|
+ endTime:getLastDayOfMonth(valueYue.value)
|
|
|
+ },
|
|
|
+ mdId:valueMod.value
|
|
|
+ }
|
|
|
+ console.log(Number('01'))
|
|
|
+ var x = getAllDaysInMonth(valueYue.value)
|
|
|
+ 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;
|
|
|
@@ -192,14 +309,12 @@ function inintChartTop1(){
|
|
|
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,13,14,15,16,17,18,19,20,21,22,23,24,25,26,27,28,29,30]
|
|
|
+ data: x
|
|
|
},
|
|
|
yAxis: {
|
|
|
type: 'value',
|
|
|
@@ -207,10 +322,10 @@ function inintChartTop1(){
|
|
|
},
|
|
|
series: [
|
|
|
{
|
|
|
- name: '上海市城区洪涝仿真模型',
|
|
|
+ name: mdName,
|
|
|
type: 'line',
|
|
|
color:'#409EFF',
|
|
|
- data: [29, 21, 10, 40, 30, 26, 31, 7, 28, 20, 3, 6, 20, 4, 10, 32, 37, 13, 21, 39, 8, 39, 31, 18, 4, 9, 33, 38, 37, 4],
|
|
|
+ data: y,
|
|
|
smooth: true
|
|
|
},
|
|
|
// {
|
|
|
@@ -260,7 +375,7 @@ function inintChartTop1(){
|
|
|
option && myChart.setOption(option);
|
|
|
|
|
|
}
|
|
|
-function initChartbt1(){
|
|
|
+function initChartbt1(y,mdName){
|
|
|
var chartDom = document.getElementById('bt1');
|
|
|
var myChart = echarts.init(chartDom);
|
|
|
var option;
|
|
|
@@ -284,60 +399,19 @@ function initChartbt1(){
|
|
|
},
|
|
|
series: [
|
|
|
{
|
|
|
- name: '上海市城区洪涝仿真模型',
|
|
|
+ name: mdName,
|
|
|
type: 'line',
|
|
|
color:'#409EFF',
|
|
|
- data: [29, 21, 10, 40, 30, 26, 31, 7, 28, 20, 3, 6, 20, 4, 10, 32, 37, 13, 21, 39, 8, 39, 31, 18, 4, 9, 33, 38, 37, 4],
|
|
|
+ data: y,
|
|
|
smooth: true
|
|
|
},
|
|
|
- // {
|
|
|
- // name: '上海沿海风暴潮预报模型',
|
|
|
- // type: 'line',
|
|
|
- // color:'rgb(51, 126, 204)',
|
|
|
- // data: [39, 37, 37, 1, 18, 19, 16, 15, 18, 16, 19, 35, 12, 10, 5, 12, 25, 2, 16, 13, 27, 14, 4, 9, 18, 27, 29, 14, 35, 22], smooth: true
|
|
|
- // },
|
|
|
- // {
|
|
|
- // name: '黄浦江水系水文分析预报数值模拟模型',
|
|
|
- // type: 'line',
|
|
|
- // smooth: true,
|
|
|
- // color:'rgb(121, 187, 255)',
|
|
|
- // data: [28, 8, 12, 34, 33, 20, 10, 3, 24, 38, 35, 20, 28, 33, 23, 10, 13, 14, 33, 3, 32, 18, 9, 3, 6, 37, 24, 5, 33, 20],
|
|
|
- // },
|
|
|
- // {
|
|
|
- // name: '苏州河水系水情预报模型',
|
|
|
- // type: 'line',
|
|
|
- // color:'rgb(121, 187, 255)',
|
|
|
- // smooth: true,
|
|
|
- // data: [19, 12, 38, 13, 9, 20, 35, 10, 32, 7, 26, 17, 23, 15, 33, 10, 27, 39, 2, 37, 19, 39, 28, 11, 33, 30, 37, 31, 13, 36],
|
|
|
- // },
|
|
|
- // {
|
|
|
- // name: '内涝风险实时预警与预报模型',
|
|
|
- // type: 'line',
|
|
|
- // smooth: true,
|
|
|
- // color:"rgb(198, 226, 255)",
|
|
|
- // data: [15, 15, 37, 35, 24, 14, 23, 13, 12, 36, 17, 20, 10, 17, 24, 39, 10, 15, 32, 23, 31, 8, 28, 3, 25, 30, 3, 25, 8, 2],
|
|
|
- // },
|
|
|
- // {
|
|
|
- // name: '上海市中心城区排水系统模型',
|
|
|
- // smooth: true,
|
|
|
- // type: 'line',
|
|
|
- // color:'#67C23A',
|
|
|
- // data: [37, 25, 18, 35, 15, 28, 8, 24, 34, 8, 20, 8, 10, 16, 18, 23, 7, 14, 17, 13, 18, 28, 8, 37, 32, 18, 37, 8, 16, 40],
|
|
|
- // },
|
|
|
- // {
|
|
|
- // name: '温带风暴潮预报模型',
|
|
|
- // smooth: true,
|
|
|
- // type: 'line',
|
|
|
- // color:'rgb(149, 212, 117)',
|
|
|
- // data: [35, 23, 35, 18, 32, 13, 34, 8, 5, 7, 21, 4, 19, 14, 10, 5, 1, 2, 26, 2, 27, 31, 18, 17, 28, 7, 26, 25, 21, 37],
|
|
|
- // }
|
|
|
]
|
|
|
};
|
|
|
|
|
|
option && myChart.setOption(option);
|
|
|
|
|
|
}
|
|
|
-function initChartbt2(){
|
|
|
+function initChartbt2(y){
|
|
|
var chartDom = document.getElementById('bt2');
|
|
|
var myChart = echarts.init(chartDom);
|
|
|
var option;
|
|
|
@@ -345,15 +419,19 @@ function initChartbt2(){
|
|
|
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]
|
|
|
+ type: 'category',
|
|
|
+ data: modelList.value,
|
|
|
+ axisLabel: {
|
|
|
+ interval: 0, // 强制显示所有标签
|
|
|
+ rotate: -25, // 旋转角度,正值表示顺时针旋转,负值表示逆时针旋转
|
|
|
+ // 可以设置文字样式,如字体大小、颜色等
|
|
|
+ textStyle: {
|
|
|
+ fontSize: 8,
|
|
|
+ color: '#333'
|
|
|
+ }
|
|
|
+ }
|
|
|
},
|
|
|
yAxis: {
|
|
|
type: 'value',
|
|
|
@@ -361,205 +439,116 @@ function initChartbt2(){
|
|
|
},
|
|
|
series: [
|
|
|
{
|
|
|
- name: '上海市城区洪涝仿真模型',
|
|
|
type: 'bar',
|
|
|
color:'#409EFF',
|
|
|
- data: [29, 21, 10, 40, 30, 26, 31, 7, 28, 20, 3,],
|
|
|
+ data: y,
|
|
|
smooth: true
|
|
|
},
|
|
|
- // {
|
|
|
- // name: '上海沿海风暴潮预报模型',
|
|
|
- // type: 'line',
|
|
|
- // color:'rgb(51, 126, 204)',
|
|
|
- // data: [39, 37, 37, 1, 18, 19, 16, 15, 18, 16, 19, 35, 12, 10, 5, 12, 25, 2, 16, 13, 27, 14, 4, 9, 18, 27, 29, 14, 35, 22], smooth: true
|
|
|
- // },
|
|
|
- // {
|
|
|
- // name: '黄浦江水系水文分析预报数值模拟模型',
|
|
|
- // type: 'line',
|
|
|
- // smooth: true,
|
|
|
- // color:'rgb(121, 187, 255)',
|
|
|
- // data: [28, 8, 12, 34, 33, 20, 10, 3, 24, 38, 35, 20, 28, 33, 23, 10, 13, 14, 33, 3, 32, 18, 9, 3, 6, 37, 24, 5, 33, 20],
|
|
|
- // },
|
|
|
- // {
|
|
|
- // name: '苏州河水系水情预报模型',
|
|
|
- // type: 'line',
|
|
|
- // color:'rgb(121, 187, 255)',
|
|
|
- // smooth: true,
|
|
|
- // data: [19, 12, 38, 13, 9, 20, 35, 10, 32, 7, 26, 17, 23, 15, 33, 10, 27, 39, 2, 37, 19, 39, 28, 11, 33, 30, 37, 31, 13, 36],
|
|
|
- // },
|
|
|
- // {
|
|
|
- // name: '内涝风险实时预警与预报模型',
|
|
|
- // type: 'line',
|
|
|
- // smooth: true,
|
|
|
- // color:"rgb(198, 226, 255)",
|
|
|
- // data: [15, 15, 37, 35, 24, 14, 23, 13, 12, 36, 17, 20, 10, 17, 24, 39, 10, 15, 32, 23, 31, 8, 28, 3, 25, 30, 3, 25, 8, 2],
|
|
|
- // },
|
|
|
- // {
|
|
|
- // name: '上海市中心城区排水系统模型',
|
|
|
- // smooth: true,
|
|
|
- // type: 'line',
|
|
|
- // color:'#67C23A',
|
|
|
- // data: [37, 25, 18, 35, 15, 28, 8, 24, 34, 8, 20, 8, 10, 16, 18, 23, 7, 14, 17, 13, 18, 28, 8, 37, 32, 18, 37, 8, 16, 40],
|
|
|
- // },
|
|
|
- // {
|
|
|
- // name: '温带风暴潮预报模型',
|
|
|
- // smooth: true,
|
|
|
- // type: 'line',
|
|
|
- // color:'rgb(149, 212, 117)',
|
|
|
- // data: [35, 23, 35, 18, 32, 13, 34, 8, 5, 7, 21, 4, 19, 14, 10, 5, 1, 2, 26, 2, 27, 31, 18, 17, 28, 7, 26, 25, 21, 37],
|
|
|
- // }
|
|
|
]
|
|
|
};
|
|
|
|
|
|
option && myChart.setOption(option);
|
|
|
|
|
|
}
|
|
|
-function initChartTop2(){
|
|
|
- var chartDom = document.getElementById('top2');
|
|
|
- var myChart = echarts.init(chartDom);
|
|
|
- var option;
|
|
|
-
|
|
|
- option = {
|
|
|
- tooltip: {
|
|
|
- trigger: 'item'
|
|
|
- },
|
|
|
- legend: {
|
|
|
- top: '90%',
|
|
|
- left: 'center'
|
|
|
+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)
|
|
|
},
|
|
|
- series: [
|
|
|
- {
|
|
|
- type: 'pie',
|
|
|
- radius: ['50%', '70%'],
|
|
|
- avoidLabelOverlap: false,
|
|
|
- label: {
|
|
|
- show: true,
|
|
|
- position: 'outside',
|
|
|
- formatter: '{c}',
|
|
|
- },
|
|
|
- labelLine: {
|
|
|
- show: true
|
|
|
- },
|
|
|
- color:['#80D0F8','#3384C2','#14D3D4','#69F3C0'],
|
|
|
- data: [
|
|
|
- { value: 200, name: '新安江' },
|
|
|
- { value: 250, name: '陕北模型' },
|
|
|
- { value: 30, name: '需水模型' },
|
|
|
- { value: 300, name: '一维水动力' },
|
|
|
- ]
|
|
|
- }
|
|
|
- ]
|
|
|
- };
|
|
|
- option && myChart.setOption(option);
|
|
|
+ }
|
|
|
+ modelList.value = []
|
|
|
+ var y = []
|
|
|
+ getPaihang(par).then(res=>{
|
|
|
+ res.data.forEach(item=>{
|
|
|
+ modelList.value.push(item.mdName)
|
|
|
+ y.push(item.statisNum)
|
|
|
+ })
|
|
|
+ initChartbt2(y)
|
|
|
+ })
|
|
|
}
|
|
|
-function initChartTop3(){
|
|
|
- var chartDom = document.getElementById('top3');
|
|
|
- var myChart = echarts.init(chartDom);
|
|
|
- var option;
|
|
|
-
|
|
|
- option = {
|
|
|
- tooltip: {
|
|
|
- trigger: 'item'
|
|
|
+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)
|
|
|
},
|
|
|
- legend: {
|
|
|
- top: '90%',
|
|
|
- left: 'center'
|
|
|
+ }
|
|
|
+ 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')}`
|
|
|
},
|
|
|
- series: [
|
|
|
- {
|
|
|
- type: 'pie',
|
|
|
- radius: ['50%', '70%'],
|
|
|
- avoidLabelOverlap: false,
|
|
|
- label: {
|
|
|
- show: true,
|
|
|
- position: 'outside',
|
|
|
- formatter: '{c}',
|
|
|
- },
|
|
|
- labelLine: {
|
|
|
- show: true
|
|
|
- },
|
|
|
- color:['#529b2e','#95d475','#b3e19d','#d1edc4'],
|
|
|
- data: [
|
|
|
- { value: 200, name: '洪水演进' },
|
|
|
- { value: 250, name: '工程' },
|
|
|
- { value: 30, name: '需水模型' },
|
|
|
- { value: 300, name: '一维水动力' },
|
|
|
- ]
|
|
|
- }
|
|
|
- ]
|
|
|
- };
|
|
|
- option && myChart.setOption(option);
|
|
|
-}
|
|
|
-function initChartBottom1(){
|
|
|
- var chartDom = document.getElementById('bt1');
|
|
|
- var myChart = echarts.init(chartDom);
|
|
|
- var option;
|
|
|
-
|
|
|
- option = {
|
|
|
- xAxis: {
|
|
|
- type: 'category',
|
|
|
- splitLine: { show: false },
|
|
|
- data: ['新安江模型', '一维水动力模型', '二维水动力模型', '降雨预报模型', 'API模型', '大数据洪涝预报模型']
|
|
|
+ }
|
|
|
+ var parMon = {
|
|
|
+ params:{
|
|
|
+ beginTime:getFirstDayOfMonthShort(),
|
|
|
+ endTime:getLastDayOfMonth(valueYue.value)
|
|
|
},
|
|
|
- yAxis: {
|
|
|
- type: 'value',
|
|
|
- splitLine: { show: false }
|
|
|
+ }
|
|
|
+ var parYear = {
|
|
|
+ params:{
|
|
|
+ beginTime:getFirstDayOfYear(),
|
|
|
+ endTime:getLastDayOfYear(valueMon.value)
|
|
|
},
|
|
|
- series: [
|
|
|
- {
|
|
|
- data: [123, 103, 89, 89, 56, 46],
|
|
|
- type: 'bar',
|
|
|
- label: {
|
|
|
- show: true, // 启用标签
|
|
|
- position: 'top' // 位置:顶部(可选 'inside'、'bottom' 等)
|
|
|
- }
|
|
|
- }
|
|
|
- ]
|
|
|
- };
|
|
|
-
|
|
|
- option && myChart.setOption(option);
|
|
|
-}
|
|
|
-function initChartBottom2(){
|
|
|
- var chartDom = document.getElementById('bt2');
|
|
|
-var myChart = echarts.init(chartDom);
|
|
|
-var option;
|
|
|
-
|
|
|
-option = {
|
|
|
- radar: {
|
|
|
- // shape: 'circle',
|
|
|
- indicator: [
|
|
|
- { name: 'Sales', max: 6500 },
|
|
|
- { name: 'Administration', max: 16000 },
|
|
|
- { name: 'Information Technology', max: 30000 },
|
|
|
- { name: 'Customer Support', max: 38000 },
|
|
|
- { name: 'Development', max: 52000 },
|
|
|
- { name: 'Marketing', max: 25000 }
|
|
|
- ]
|
|
|
- },
|
|
|
- series: [
|
|
|
- {
|
|
|
- name: 'Budget vs spending',
|
|
|
- type: 'radar',
|
|
|
- data: [
|
|
|
- {
|
|
|
- value: [4200, 3000, 20000, 35000, 50000, 18000],
|
|
|
- name: 'Allocated Budget'
|
|
|
- },
|
|
|
- {
|
|
|
- value: [5000, 14000, 28000, 26000, 42000, 21000],
|
|
|
- name: 'Actual Spending'
|
|
|
- }
|
|
|
- ]
|
|
|
- }
|
|
|
- ]
|
|
|
-};
|
|
|
-
|
|
|
-option && myChart.setOption(option);
|
|
|
+ }
|
|
|
+ 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(() => {
|
|
|
- inintChartTop1()
|
|
|
- initChartbt1()
|
|
|
- initChartbt2()
|
|
|
+ getTreeLeft()
|
|
|
+
|
|
|
+ // inintChartTop1()
|
|
|
+ // initChartbt1()
|
|
|
+
|
|
|
});
|
|
|
</script>
|
|
|
<style scoped lang="scss">
|