| | |
| | | url: '/minio/file/view?obj='+fileName, |
| | | method: 'get', |
| | | }) |
| | | }, |
| | | // 应急统计 |
| | | emergencyStat(params:object){ |
| | | return request({ |
| | | url:`/emergencyCount/emergencyDrillExecute/count`, |
| | | method: 'post', |
| | | data:params |
| | | }) |
| | | } |
| | | } |
| | | } |
对比新文件 |
| | |
| | | <template> |
| | | <div> |
| | | <div class="echart"> |
| | | <h2 class="title">距上次应急演练结束{{day}}天</h2> |
| | | <el-form :model="form" label-width="20px"> |
| | | <el-row> |
| | | <!-- <el-col :span="5" :offset="1"> |
| | | <el-form-item> |
| | | <el-date-picker v-model="form.date" format="YYYY-MM-DD" type="date" placeholder="应急演练时间" style="width: 100%" /> |
| | | </el-form-item> |
| | | </el-col> --> |
| | | <el-col :span="4" :offset="15"> |
| | | <el-form-item size="default"> |
| | | <el-tree-select v-model="form.deptId" :data="data" @change="eaclick" placeholder="选择部门" :props="propse" style="width: 100%" /> |
| | | </el-form-item> |
| | | </el-col> |
| | | <el-col :span="4"> |
| | | <el-form-item size="default"> |
| | | <el-select v-model="form.type" placeholder="年/月" @change="eaclick" style="width:100%"> |
| | | <el-option label="年" :value="1" /> |
| | | <el-option label="月" :value="2" /> |
| | | </el-select> |
| | | </el-form-item> |
| | | </el-col> |
| | | </el-row> |
| | | </el-form> |
| | | <div ref="main" style="width: 100%; height: 400px"></div> |
| | | </div> |
| | | </div> |
| | | </template> |
| | | <script lang="ts"> |
| | | import { defineComponent, onMounted, ref } from 'vue'; |
| | | import * as echarts from 'echarts'; |
| | | import { ElMessage } from 'element-plus'; |
| | | import { goalManagementApi } from '/@/api/goalManagement'; |
| | | import { toNamespacedPath } from 'path/posix'; |
| | | export default defineComponent({ |
| | | setup() { |
| | | const form = ref({ |
| | | type:1, |
| | | deptId:1 |
| | | }); |
| | | //部门 |
| | | const department = () => { |
| | | goalManagementApi() |
| | | .getTreedepartment() |
| | | .then((res) => { |
| | | if (res.data.code == 200) { |
| | | data.value = res.data.data; |
| | | } else { |
| | | ElMessage.error(res.data.msg); |
| | | } |
| | | }); |
| | | }; |
| | | const propse = { |
| | | label: 'depName', |
| | | children: 'children', |
| | | value: 'depId', |
| | | }; |
| | | const eaclick=()=>{ |
| | | listApi() |
| | | } |
| | | onMounted(() => { |
| | | listApi() |
| | | department(); |
| | | }); |
| | | const day=ref(0) |
| | | const listApi=()=>{ |
| | | goalManagementApi().emergencyStat(form.value).then(res=>{ |
| | | if(res.data.code==200){ |
| | | day.value=res.data.data.days |
| | | let date=[] |
| | | let names=[] |
| | | res.data.data.dataList.forEach(item => { |
| | | date.push(item.num) |
| | | names.push(item.name) |
| | | }); |
| | | init(date,names) |
| | | } |
| | | }) |
| | | } |
| | | const main = ref(); |
| | | const init = (data: any,names:any) => { |
| | | var myChart = echarts.init(main.value); |
| | | var option = { |
| | | tooltip: {}, |
| | | grid: { |
| | | left: '3%', |
| | | right: '4%', |
| | | bottom: '5%', |
| | | containLabel: true, |
| | | }, |
| | | xAxis: { |
| | | type: 'category', |
| | | data: names, |
| | | }, |
| | | yAxis: { |
| | | type: 'value', |
| | | name: '次数', |
| | | nameTextStyle: { |
| | | color: '#aaa', |
| | | nameLocation: 'start', |
| | | }, |
| | | }, |
| | | color: ['#6394f9'], |
| | | series: [ |
| | | { |
| | | data: data, |
| | | barWidth : 40, |
| | | type: 'bar', |
| | | }, |
| | | ], |
| | | }; |
| | | |
| | | myChart.setOption(option); |
| | | }; |
| | | const data = ref([]) |
| | | return { |
| | | form, |
| | | main, |
| | | init, |
| | | data, |
| | | department, |
| | | propse, |
| | | listApi, |
| | | eaclick, |
| | | day |
| | | }; |
| | | }, |
| | | }); |
| | | </script> |
| | | <style scoped> |
| | | .title{ |
| | | text-align: center; |
| | | padding: 20px 0; |
| | | } |
| | | .echart { |
| | | background-color: #fff; |
| | | border-radius: 5px; |
| | | } |
| | | .el-form { |
| | | padding: 20px 0; |
| | | } |
| | | </style> |
对比新文件 |
| | |
| | | <template> |
| | | <div> |
| | | <div ref="main" style="width: 100%; height: 400px"></div> |
| | | </div> |
| | | </template> |
| | | <script lang="ts"> |
| | | import { defineComponent, onMounted, ref } from 'vue'; |
| | | import * as echarts from 'echarts'; |
| | | import { ElMessage } from 'element-plus'; |
| | | export default defineComponent({ |
| | | setup() { |
| | | onMounted(() => { |
| | | init(); |
| | | }); |
| | | const main = ref(); |
| | | const init = () => { |
| | | var myChart = echarts.init(main.value); |
| | | var option = { |
| | | // title: { |
| | | // text: 'Referer of a Website', |
| | | // subtext: 'Fake Data', |
| | | // left: 'center', |
| | | // }, |
| | | tooltip: { |
| | | trigger: 'item', |
| | | }, |
| | | legend: { |
| | | orient: 'vertical', |
| | | left: 'left', |
| | | }, |
| | | series: [ |
| | | { |
| | | name: 'Access From', |
| | | type: 'pie', |
| | | radius: '100%', |
| | | data: [ |
| | | { value: 1048, name: 'Search Engine' }, |
| | | { value: 735, name: 'Direct' }, |
| | | { value: 580, name: 'Email' }, |
| | | { value: 484, name: 'Union Ads' }, |
| | | { value: 300, name: 'Video Ads' }, |
| | | ], |
| | | emphasis: { |
| | | itemStyle: { |
| | | shadowBlur: 10, |
| | | shadowOffsetX: 0, |
| | | shadowColor: 'rgba(0, 0, 0, 0.5)', |
| | | }, |
| | | }, |
| | | }, |
| | | ], |
| | | }; |
| | | |
| | | myChart.setOption(option); |
| | | }; |
| | | return { |
| | | main, |
| | | init, |
| | | }; |
| | | }, |
| | | }); |
| | | </script> |
| | |
| | | <template #footer> |
| | | <span class="dialog-footer"> |
| | | <el-button @click="onCancel" size="default">取 消</el-button> |
| | | <el-button type="primary" v-throttle @click="onSubmit" size="default">{{ buttonName }}</el-button> |
| | | <el-button type="primary" @click="onSubmit" size="default">{{ buttonName }}</el-button> |
| | | </span> |
| | | </template> |
| | | </el-dialog> |