数据分析模块

src/views/sjfx/ajbltjfx/index.vue

@@ -0,0 +1,120 @@
+<template>
+  <div>
+    <!-- 结合问题数量、案件处置率和延期率的图表 -->
+    <div ref="combinedChartRef" style="width: 800px; height: 600px;"></div>
+  </div>
+</template>
+
+<script setup>
+import { ref, onMounted } from 'vue'
+import * as echarts from 'echarts'
+import 'element-plus/dist/index.css'
+
+const combinedChartRef = ref(null)
+
+const initCombinedChart = () => {
+  const chart = echarts.init(combinedChartRef.value)
+  const option = {
+    title: [
+      { text: '问题数量统计、案件处置率、延期率', left: 'center' }
+    ],
+    tooltip: {
+      trigger: 'axis',
+      axisPointer: {
+        type: 'cross',
+        label: {
+          backgroundColor: '#6a7985'
+        }
+      },
+      formatter: function (params) {
+        let result = '';
+        params.forEach(param => {
+          if (param.seriesName === '问题数量') {
+            result += `<span style="display:inline-block;margin-right:5px;border-radius:10px;width:9px;height:9px;background-color:${param.color};"></span>${param.seriesName}: ${param.data} 个<br>`;
+          } else if (param.seriesName === '处置率') {
+            result += `<span style="display:inline-block;margin-right:5px;border-radius:10px;width:9px;height:9px;background-color:${param.color};"></span>${param.seriesName}: ${param.data}<br>`;
+          } else if (param.seriesName === '延期率') {
+            result += `<span style="display:inline-block;margin-right:5px;border-radius:10px;width:9px;height:9px;background-color:${param.color};"></span>${param.seriesName}: ${param.data}<br>`;
+          }
+        });
+        return result;
+      }
+    },
+    xAxis: {
+      type: 'category',
+      boundaryGap: false,
+      data: ['本周', '上周', '两周前']
+    },
+    yAxis: [
+      { // 第一个 y 轴
+        type: 'value',
+        name: '问题数量',
+        min: 0,
+        max: 250,
+        interval: 50,
+        axisLabel: {
+          formatter: '{value} 个'
+        }
+      },
+      { // 第二个 y 轴
+        type: 'value',
+        name: '处置率、延期率',
+        min: 0,
+        max: 1,
+        interval: 0.1,
+        axisLabel: {
+          formatter: '{value}'
+        }
+      },
+      { // 第三个 y 轴
+        type: 'value',
+        name: '',
+        min: 0,
+        max: 0.2,
+        interval: 0.05,
+        axisLabel: {
+          formatter: '{value}'
+        }
+      }
+    ],
+    series: [
+      {
+        name: '问题数量',
+        type: 'line',
+        yAxisIndex: 0,
+        data: [200, 150, 180],
+        smooth: true,
+        itemStyle: {
+          color: 'rgb(255, 70, 131)'
+        }
+      },
+      {
+        name: '处置率',
+        type: 'line',
+        yAxisIndex: 1,
+        data: [0.8, 0.7, 0.65],
+        smooth: true,
+        itemStyle: {
+          color: 'rgb(131, 255, 70)'
+        }
+      },
+      {
+        name: '延期率',
+        type: 'line',
+        yAxisIndex: 2,
+        data: [0.1, 0.15, 0.12],
+        smooth: true,
+        itemStyle: {
+          color: 'rgb(70, 131, 255)'
+        }
+      }
+    ]
+  }
+
+  chart.setOption(option)
+}
+
+onMounted(() => {
+  initCombinedChart()
+})
+</script>

src/views/sjfx/bjtj/index.vue

@@ -0,0 +1,114 @@
+<template>
+  <el-card>
+    <el-form :inline="true">
+      <el-form-item label="行政区域">
+        <el-select v-model="region" placeholder="请选择">
+          <el-option
+              v-for="item in regionOptions"
+              :key="item.value"
+              :label="item.label"
+              :value="item.value"
+          />
+        </el-select>
+      </el-form-item>
+      <el-form-item label="设备类型">
+        <el-select v-model="deviceType" placeholder="请选择">
+          <el-option
+              v-for="item in deviceTypeOptions"
+              :key="item.value"
+              :label="item.label"
+              :value="item.value"
+          />
+        </el-select>
+      </el-form-item>
+      <el-form-item label="报警类型">
+        <el-select v-model="alarmType" placeholder="请选择">
+          <el-option
+              v-for="item in alarmTypeOptions"
+              :key="item.value"
+              :label="item.label"
+              :value="item.value"
+          />
+        </el-select>
+      </el-form-item>
+      <el-form-item>
+        <el-button type="primary" @click="fetchData">查询</el-button>
+      </el-form-item>
+    </el-form>
+
+    <div ref="chart" style="width: 100%; height: 400px;"></div>
+  </el-card>
+</template>
+
+<script setup>
+import { ref, onMounted } from 'vue'
+import * as echarts from 'echarts'
+
+// 初始化选项
+const region = ref('区域A')
+const deviceType = ref('类型A')
+const alarmType = ref('类型1')
+
+const regionOptions = [
+  { value: '区域A', label: '区域A' },
+  { value: '区域B', label: '区域B' },
+  // 添加更多选项
+]
+const deviceTypeOptions = [
+  { value: '类型A', label: '类型A' },
+  { value: '类型B', label: '类型B' },
+  // 添加更多选项
+]
+const alarmTypeOptions = [
+  { value: '类型1', label: '类型1' },
+  { value: '类型2', label: '类型2' },
+  // 添加更多选项
+]
+
+const chart = ref(null)
+
+function fetchData() {
+  // 这里应该调用后端API获取数据
+  // 模拟数据
+  const data = generateData()
+  initChart(data)
+}
+
+function initChart(data) {
+  const myChart = echarts.init(chart.value)
+  const option = {
+    title: {
+      text: '告警趋势',
+    },
+    tooltip: {},
+    xAxis: {
+      data: data.days,
+    },
+    yAxis: {},
+    series: [
+      {
+        name: '告警数量',
+        type: 'line',
+        data: data.counts,
+      },
+    ],
+  }
+  myChart.setOption(option)
+}
+
+function generateData() {
+  const days = ['今天', '昨天', '前天', ...Array(28).fill('').map((_, i) => `-${i - 2}天前`)]
+  const counts = days.map(() => Math.floor(Math.random() * 100))
+  return { days, counts }
+}
+
+onMounted(() => {
+  fetchData()
+})
+</script>
+
+<style scoped>
+.el-card {
+  margin: 20px;
+}
+</style>

src/views/sjfx/khpj/index.vue

@@ -0,0 +1,120 @@
+<template>
+  <el-card>
+    <el-form :inline="true">
+      <el-form-item label="时间范围">
+        <el-select v-model="timeRange" placeholder="请选择">
+          <el-option
+              v-for="item in timeRangeOptions"
+              :key="item.value"
+              :label="item.label"
+              :value="item.value"
+          />
+        </el-select>
+      </el-form-item>
+      <el-form-item>
+        <el-button type="primary" @click="fetchData">查询</el-button>
+      </el-form-item>
+      <el-form-item>
+        <el-button type="success" @click="exportReport">导出报告</el-button>
+      </el-form-item>
+    </el-form>
+
+    <div ref="chart" style="width: 100%; height: 400px;"></div>
+  </el-card>
+</template>
+
+<script setup>
+import { ref, onMounted } from 'vue'
+import * as echarts from 'echarts'
+import { ElMessage } from 'element-plus'
+
+// 初始化选项
+const timeRange = ref('month')
+const timeRangeOptions = [
+  { value: 'month', label: '月度' },
+  { value: 'quarter', label: '季度' },
+  { value: 'year', label: '年度' },
+]
+
+const chart = ref(null)
+
+function fetchData() {
+  // 这里应该调用后端API获取数据
+  // 模拟数据
+  const data = generateData()
+  initChart(data)
+}
+
+function initChart(data) {
+  const myChart = echarts.init(chart.value)
+  const option = {
+    title: {
+      text: '考核结果',
+    },
+    tooltip: {},
+    xAxis: {
+      data: data.units,
+    },
+    yAxis: {},
+    series: [
+      {
+        name: '得分',
+        type: 'bar',
+        data: data.scores,
+      },
+    ],
+  }
+  myChart.setOption(option)
+}
+
+function generateData() {
+  const units = ['单位A', '单位B', '单位C', '单位D', '单位E']
+  const scores = units.map(() => Math.floor(Math.random() * 100))
+  return { units, scores }
+}
+
+function exportReport() {
+  if (!chartInstance) {
+    ElMessage.error('请先加载图表数据')
+    return
+  }
+  // 导出图表为图片
+  chartInstance.exportImage({
+    type: 'png',
+    pixelRatio: 2,
+    backgroundColor: '#fff',
+    callback: function (dataUrl) {
+      // 下载图片
+      downloadImage(dataUrl)
+    },
+  })
+}
+
+function downloadImage(dataUrl) {
+  const link = document.createElement('a')
+  link.href = dataUrl
+  link.download = 'evaluation-report.png'
+  link.click()
+}
+
+let chartInstance = null
+
+onMounted(() => {
+  fetchData()
+  chartInstance = echarts.init(chart.value)
+})
+
+// 监听图表更新
+watch(() => chart.value, () => {
+  if (chartInstance) {
+    chartInstance.dispose()
+  }
+  chartInstance = echarts.init(chart.value)
+})
+</script>
+
+<style scoped>
+.el-card {
+  margin: 20px;
+}
+</style>

src/views/sjfx/sjdc/index.vue

@@ -0,0 +1,153 @@
+<template>
+  <el-card>
+    <el-form :inline="true">
+      <el-form-item label="行政区域">
+        <el-select v-model="region" placeholder="请选择">
+          <el-option
+              v-for="item in regionOptions"
+              :key="item.value"
+              :label="item.label"
+              :value="item.value"
+          />
+        </el-select>
+      </el-form-item>
+      <el-form-item label="设备类型">
+        <el-select v-model="deviceType" placeholder="请选择">
+          <el-option
+              v-for="item in deviceTypeOptions"
+              :key="item.value"
+              :label="item.label"
+              :value="item.value"
+          />
+        </el-select>
+      </el-form-item>
+      <el-form-item label="报警类型">
+        <el-select v-model="alarmType" placeholder="请选择">
+          <el-option
+              :key="item.value"
+              v-for="item in alarmTypeOptions"
+              :label="item.label"
+              :value="item.value"
+          />
+        </el-select>
+      </el-form-item>
+      <el-form-item>
+        <el-button type="primary" @click="fetchData">查询</el-button>
+      </el-form-item>
+      <el-form-item>
+        <el-button type="success" @click="exportData">导出</el-button>
+      </el-form-item>
+    </el-form>
+
+    <div ref="chart" style="width: 100%; height: 400px;"></div>
+  </el-card>
+</template>
+
+<script setup>
+import { ref, onMounted } from 'vue'
+import * as echarts from 'echarts'
+import { ElMessage } from 'element-plus'
+
+// 初始化选项
+const region = ref('区域A')
+const deviceType = ref('类型A')
+const alarmType = ref('类型1')
+
+const regionOptions = [
+  { value: '区域A', label: '区域A' },
+  { value: '区域B', label: '区域B' },
+  // 添加更多选项
+]
+const deviceTypeOptions = [
+  { value: '类型A', label: '类型A' },
+  { value: '类型B', label: '类型B' },
+  // 添加更多选项
+]
+const alarmTypeOptions = [
+  { value: '类型1', label: '类型1' },
+  { value: '类型2', label: '类型2' },
+  // 添加更多选项
+]
+
+const chart = ref(null)
+
+function fetchData() {
+  // 这里应该调用后端API获取数据
+  // 模拟数据
+  const data = generateData()
+  initChart(data)
+}
+
+function initChart(data) {
+  const myChart = echarts.init(chart.value)
+  const option = {
+    title: {
+      text: '告警趋势',
+    },
+    tooltip: {},
+    xAxis: {
+      data: data.days,
+    },
+    yAxis: {},
+    series: [
+      {
+        name: '告警数量',
+        type: 'line',
+        data: data.counts,
+      },
+    ],
+  }
+  myChart.setOption(option)
+}
+
+function generateData() {
+  const days = ['今天', '昨天', '前天', ...Array(28).fill('').map((_, i) => `-${i - 2}天前`)]
+  const counts = days.map(() => Math.floor(Math.random() * 100))
+  return { days, counts }
+}
+
+function exportData() {
+  if (!chartInstance) {
+    ElMessage.error('请先加载图表数据')
+    return
+  }
+  // 导出图表为图片
+  chartInstance.exportImage({
+    type: 'png',
+    pixelRatio: 2,
+    backgroundColor: '#fff',
+    callback: function (dataUrl) {
+      // 下载图片
+      downloadImage(dataUrl)
+    },
+  })
+}
+
+function downloadImage(dataUrl) {
+  const link = document.createElement('a')
+  link.href = dataUrl
+  link.download = 'alarm-trend.png'
+  link.click()
+}
+
+let chartInstance = null
+
+onMounted(() => {
+  fetchData()
+  chartInstance = echarts.init(chart.value)
+})
+
+// 监听图表更新
+watch(() => chart.value, () => {
+  if (chartInstance) {
+    chartInstance.dispose()
+  }
+  chartInstance = echarts.init(chart.value)
+})
+</script>
+
+<style scoped>
+.el-card {
+  margin: 20px;
+}
+</style>

src/views/sjfx/sjkb/index.vue

@@ -0,0 +1,111 @@
+<template>
+  <el-card>
+    <el-form :inline="true">
+      <el-form-item label="区域">
+        <el-select v-model="selectedRegion" placeholder="请选择">
+          <el-option
+              v-for="region in regions"
+              :key="region.value"
+              :label="region.label"
+              :value="region.value"
+          />
+        </el-select>
+      </el-form-item>
+    </el-form>
+
+    <div class="charts-container">
+      <div ref="deploymentsChart" class="chart" style="height: 300px;"></div>
+      <div ref="alertsChart" class="chart" style="height: 300px;"></div>
+      <div ref="operationsChart" class="chart" style="height: 300px;"></div>
+      <div ref="casesChart" class="chart" style="height: 300px;"></div>
+    </div>
+  </el-card>
+</template>
+
+<script setup>
+import { ref, onMounted, watch } from 'vue'
+import * as echarts from 'echarts'
+import { ElMessage } from 'element-plus'
+
+// 初始化选项
+const selectedRegion = ref('city')
+const regions = [
+  { value: 'city', label: '全市' },
+  { value: 'district1', label: '区县1' },
+  { value: 'district2', label: '区县2' },
+  { value: 'district3', label: '区县3' },
+]
+
+const deploymentsChart = ref(null)
+const alertsChart = ref(null)
+const operationsChart = ref(null)
+const casesChart = ref(null)
+
+function fetchData(region) {
+  // 这里应该调用后端API获取数据
+  // 模拟数据
+  return generateData(region)
+}
+
+function generateData(region) {
+  const deployments = { labels: ['1月', '2月', '3月'], values: [100, 200, 150] }
+  const alerts = { labels: ['1月', '2月', '3月'], values: [10, 5, 20] }
+  const operations = { labels: ['1月', '2月', '3月'], values: [50, 60, 40] }
+  const cases = { labels: ['1月', '2月', '3月'], values: [20, 15, 25] }
+  return { deployments, alerts, operations, cases }
+}
+
+function initChart(chartRef, data, title) {
+  const myChart = echarts.init(chartRef.value)
+  const option = {
+    title: {
+      text: title,
+    },
+    tooltip: {},
+    xAxis: {
+      data: data.labels,
+    },
+    yAxis: {},
+    series: [
+      {
+        name: '数量',
+        type: 'bar',
+        data: data.values,
+      },
+    ],
+  }
+  myChart.setOption(option)
+  return myChart
+}
+
+function updateCharts() {
+  const data = fetchData(selectedRegion.value)
+  const deploymentsChartInstance = initChart(deploymentsChart, data.deployments, '设备部署情况')
+  const alertsChartInstance = initChart(alertsChart, data.alerts, '告警情况')
+  const operationsChartInstance = initChart(operationsChart, data.operations, '运维情况')
+  const casesChartInstance = initChart(casesChart, data.cases, '案件处置情况')
+}
+
+onMounted(() => {
+  updateCharts()
+})
+
+watch(selectedRegion, () => {
+  updateCharts()
+})
+</script>
+
+<style scoped>
+.el-card {
+  margin: 20px;
+}
+.charts-container {
+  display: flex;
+  flex-wrap: wrap;
+  justify-content: space-around;
+}
+.chart {
+  width: calc(50% - 10px);
+  margin-bottom: 20px;
+}
+</style>

src/views/sjfx/tjfx/index.vue

@@ -0,0 +1,66 @@
+<template>
+  <div>
+    <!-- 行政区域分布图表 -->
+    <div ref="regionChartRef" style="width: 600px; height: 400px;"></div>
+
+    <!-- 权属单位分布图表 -->
+    <div ref="ownerChartRef" style="width: 600px; height: 400px;"></div>
+  </div>
+</template>
+
+<script setup>
+import { ref, onMounted } from 'vue'
+import { ElMessage } from 'element-plus'
+import * as echarts from 'echarts'
+
+// 导入 Element Plus 的全局样式
+import 'element-plus/dist/index.css'
+
+const regionChartRef = ref(null)
+const ownerChartRef = ref(null)
+
+const initRegionChart = () => {
+  const chart = echarts.init(regionChartRef.value)
+  const option = {
+    title: { text: '设备行政区域分布' },
+    tooltip: {},
+    xAxis: {
+      data: ['区域A', '区域B', '区域C', '区域D'],
+    },
+    yAxis: {},
+    series: [{
+      name: '设备数量',
+      type: 'bar',
+      data: [120, 200, 150, 80]
+    }]
+  }
+  chart.setOption(option)
+}
+
+const initOwnerChart = () => {
+  const chart = echarts.init(ownerChartRef.value)
+  const option = {
+    title: { text: '设备权属单位分布' },
+    tooltip: {},
+    xAxis: {
+      data: ['单位A', '单位B', '单位C', '单位D'],
+    },
+    yAxis: {},
+    series: [{
+      name: '设备数量',
+      type: 'bar',
+      data: [100, 180, 120, 90]
+    }]
+  }
+  chart.setOption(option)
+}
+
+onMounted(() => {
+  initRegionChart()
+  initOwnerChart()
+})
+</script>
+
+<style scoped>
+
+</style>