diff --git a/src/components/Echart/LineChart.vue b/src/components/Echart/LineChart.vue
new file mode 100644
index 0000000..835cfcf
--- /dev/null
+++ b/src/components/Echart/LineChart.vue
@@ -0,0 +1,129 @@
+<template>
+  <div class="line-chart-container" ref="chartContainer"></div>
+</template>
+
+<script>
+import echarts from 'echarts';
+
+export default {
+  name: 'LineChart',
+  props: {
+    // 图表数据
+    chartData: {
+      type: Object,
+      required: true
+    },
+    // 图表配置
+    options: {
+      type: Object,
+      default: () => ({})
+    },
+    // 图表宽度
+    width: {
+      type: String,
+      default: '100%'
+    },
+    // 图表高度
+    height: {
+      type: String,
+      default: '400px'
+    }
+  },
+  data() {
+    return {
+      chart: null
+    };
+  },
+  mounted() {
+    this.initChart();
+    this.resizeHandler = window.addEventListener('resize', this.resizeChart);
+  },
+  beforeDestroy() {
+    if (this.chart) {
+      this.chart.dispose();
+      this.chart = null;
+    }
+    if (this.resizeHandler) {
+      window.removeEventListener('resize', this.resizeHandler);
+    }
+  },
+  watch: {
+    chartData: {
+      deep: true,
+      handler() {
+        this.updateChart();
+      }
+    },
+    options: {
+      deep: true,
+      handler() {
+        this.updateChart();
+      }
+    }
+  },
+  methods: {
+    // 初始化图表
+    initChart() {
+      const container = this.$refs.chartContainer;
+      container.style.width = this.width;
+      container.style.height = this.height;
+
+      this.chart = echarts.init(container);
+      this.updateChart();
+    },
+
+    // 更新图表配置和数据
+    updateChart() {
+      if (!this.chart) return;
+
+      // 合并默认配置和用户自定义配置
+      const defaultOptions = {
+        tooltip: {
+          trigger: 'axis'
+        },
+        grid: {
+          left: '3%',
+          right: '4%',
+          bottom: '3%',
+          containLabel: true
+        },
+        xAxis: {
+          type: 'category',
+          boundaryGap: false
+        },
+        yAxis: {
+          type: 'value'
+        },
+        series: []
+      };
+
+      const mergedOptions = { ...defaultOptions, ...this.options };
+
+      // 应用数据
+      if (this.chartData.xAxis) {
+        mergedOptions.xAxis.data = this.chartData.xAxis;
+      }
+
+      if (this.chartData.series) {
+        mergedOptions.series = this.chartData.series;
+      }
+
+      this.chart.setOption(mergedOptions);
+    },
+
+    // 响应窗口大小变化
+    resizeChart() {
+      if (this.chart) {
+        this.chart.resize();
+      }
+    }
+  }
+};
+</script>
+
+<style scoped>
+.line-chart-container {
+  width: 100%;
+  height: 100%;
+}
+</style>

diff --git a/src/components/Echart/LineChart.vue b/src/components/Echart/LineChart.vue
new file mode 100644
index 0000000..835cfcf
--- /dev/null
+++ b/src/components/Echart/LineChart.vue
@@ -0,0 +1,129 @@
+<template>
+  <div class="line-chart-container" ref="chartContainer"></div>
+</template>
+
+<script>
+import echarts from 'echarts';
+
+export default {
+  name: 'LineChart',
+  props: {
+    // 图表数据
+    chartData: {
+      type: Object,
+      required: true
+    },
+    // 图表配置
+    options: {
+      type: Object,
+      default: () => ({})
+    },
+    // 图表宽度
+    width: {
+      type: String,
+      default: '100%'
+    },
+    // 图表高度
+    height: {
+      type: String,
+      default: '400px'
+    }
+  },
+  data() {
+    return {
+      chart: null
+    };
+  },
+  mounted() {
+    this.initChart();
+    this.resizeHandler = window.addEventListener('resize', this.resizeChart);
+  },
+  beforeDestroy() {
+    if (this.chart) {
+      this.chart.dispose();
+      this.chart = null;
+    }
+    if (this.resizeHandler) {
+      window.removeEventListener('resize', this.resizeHandler);
+    }
+  },
+  watch: {
+    chartData: {
+      deep: true,
+      handler() {
+        this.updateChart();
+      }
+    },
+    options: {
+      deep: true,
+      handler() {
+        this.updateChart();
+      }
+    }
+  },
+  methods: {
+    // 初始化图表
+    initChart() {
+      const container = this.$refs.chartContainer;
+      container.style.width = this.width;
+      container.style.height = this.height;
+
+      this.chart = echarts.init(container);
+      this.updateChart();
+    },
+
+    // 更新图表配置和数据
+    updateChart() {
+      if (!this.chart) return;
+
+      // 合并默认配置和用户自定义配置
+      const defaultOptions = {
+        tooltip: {
+          trigger: 'axis'
+        },
+        grid: {
+          left: '3%',
+          right: '4%',
+          bottom: '3%',
+          containLabel: true
+        },
+        xAxis: {
+          type: 'category',
+          boundaryGap: false
+        },
+        yAxis: {
+          type: 'value'
+        },
+        series: []
+      };
+
+      const mergedOptions = { ...defaultOptions, ...this.options };
+
+      // 应用数据
+      if (this.chartData.xAxis) {
+        mergedOptions.xAxis.data = this.chartData.xAxis;
+      }
+
+      if (this.chartData.series) {
+        mergedOptions.series = this.chartData.series;
+      }
+
+      this.chart.setOption(mergedOptions);
+    },
+
+    // 响应窗口大小变化
+    resizeChart() {
+      if (this.chart) {
+        this.chart.resize();
+      }
+    }
+  }
+};
+</script>
+
+<style scoped>
+.line-chart-container {
+  width: 100%;
+  height: 100%;
+}
+</style>
diff --git a/src/pages/ywts/shms/tcy/components/cars.vue b/src/pages/ywts/shms/tcy/components/cars.vue
new file mode 100644
index 0000000..1ff666a
--- /dev/null
+++ b/src/pages/ywts/shms/tcy/components/cars.vue
@@ -0,0 +1,199 @@
+<template>
+  <div id="case-linebar" class="container"/>
+</template>
+
+<script>
+
+import * as echarts from 'echarts';
+export default {
+  name: 'CaseLineBar',
+  data() {
+    return {
+      isShow: true,
+      myChart: null,
+      height: '0',
+      width: '0',
+      chartSettings: {
+        labelMap: { date: '时间' },
+        metrics: [],
+        dimension: ['date']
+      },
+      extend: {
+        color: ['#0071ff88', '#00afff88', '#00fdc088'],
+        legend: {
+          textStyle: {
+            color: '#cce9ff',
+            fontWeight: 'bold'
+          },
+          lineStyle: {
+            width: 10
+          },
+          data: ['进车数', '出车数'],
+        },
+        tooltip: {
+          trigger: 'axis',
+          axisPointer: {
+            type: 'cross',
+            label: {
+              backgroundColor: '#092647',  // 修改背景颜色
+              borderColor: '#404a59',      // 修改边框颜色
+              borderWidth: 1,
+              textStyle: {
+                color: '#ffffff',          // 修改文本颜色
+                fontSize: 12
+              }
+            }
+          },
+          textStyle: {
+            align: 'left'  // 左对齐 tooltip 内容
+          }
+        },
+        grid: {
+          left: '5%',
+          right: '5%',
+          bottom: '10%',
+          top: '15%',
+          containLabel: true
+        },
+        xAxis: {
+          type: 'category',
+          axisLine: {
+            lineStyle: {
+              color: '#cce9ff'
+            }
+          },
+          axisLabel: {
+            color: '#cce9ff'
+          }
+        },
+        yAxis: [
+          {
+            name: '',
+            type: 'value',
+            axisLine: {
+              lineStyle: {
+                color: '#cce9ff'
+              }
+            },
+            axisLabel: {
+              color: '#cce9ff'
+            },
+            nameTextStyle: {
+              color: '#cce9ff',
+              fontSize: 14,
+              verticalAlign: 'middle',
+            },
+            splitLine: {
+              show: true,
+              lineStyle: {
+                color: ['#c8d0da'],
+                type: 'dashed',
+              },
+            },
+          },
+        ],
+        series: [
+          {
+            name: '进车数',
+            type: 'line',
+            symbol: 'circle',
+            symbolSize: 3,
+            color: '#0a86d9',
+            areaStyle: {
+              color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
+                {
+                  offset: 0.5,
+                  color: '#0a86d9',
+                },
+                {
+                  offset: 1,
+                  color: 'rgba(10,25,124,0.2)'
+                }
+              ])
+            },
+          },
+          {
+            name: '出车数',
+            type: 'line',
+            symbol: 'circle',
+            symbolSize: 3,
+            color: 'rgba(255,190,68,1)',
+            areaStyle: {
+              color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
+                {
+                  offset: 0.5,
+                  color: 'rgba(255,190,68,0.7)',
+                },
+                {
+                  offset: 1,
+                  color: 'rgba(10,25,124,0.2)'
+                }
+              ])
+            },
+            // emphasis: {
+            //   focus: 'series'
+            // },
+            // label: {
+            //   show: true,
+            //   position: 'insideBottom'
+            // }
+          }
+        ]
+      },
+      chartData: {
+        columns: [],
+        rows: []
+      }
+    }
+  },
+  mounted() {
+    this.myChart = echarts.init(document.getElementById('case-linebar'))
+    this.height = document.getElementById('case-linebar').clientHeight - 40 + 'px'
+    this.width = document.getElementById('case-linebar').clientWidth - 10 + 'px'
+    const that = this
+    window.addEventListener('resize', function() {
+      if(!document.getElementById('case-linebar')) {
+        return
+      }
+      that.reload()
+    })
+
+  },
+
+  methods: {
+    async reload() {
+      this.isShow = false
+      await this.$nextTick()
+      this.height = document.getElementById('case-linebar').clientHeight - 10 + 'px'
+      this.width = document.getElementById('case-linebar').clientWidth - 10 + 'px'
+      this.isShow = true
+    },
+    // 获取数据
+    fetchData(id) {
+      // getMonthCaseFinished(id).then(response => {
+      //   if (response.code === 200) {
+      //     this.extend.series[0].data = response.data.map(item => item.num)
+      //     this.extend.series[1].data = response.data.map(item => item.rate.replace('%',''))
+      //     this.extend.xAxis.data = response.data.map(item => item.date)
+      //     this.myChart.setOption(this.extend, true)
+      //   }
+      // })
+      console.log('近1月车辆进出趋势折线图初始化');
+
+          this.extend.series[0].data = [5154,4545,2455,7212,4545,2455,7212]
+          this.extend.series[1].data = [12,234,24,2342,234,33,3]
+          this.extend.xAxis.data = ['07-01','07-02','07-03','07-04','07-05','07-06','07-07']
+          this.myChart.setOption(this.extend, true)
+
+    }
+  }
+}
+</script>
+<style lang="scss" scoped>
+.container{
+  position:relative;
+  width: 100%;
+  height:100%;
+}
+</style>
+

diff --git a/src/components/Echart/LineChart.vue b/src/components/Echart/LineChart.vue
new file mode 100644
index 0000000..835cfcf
--- /dev/null
+++ b/src/components/Echart/LineChart.vue
@@ -0,0 +1,129 @@
+<template>
+  <div class="line-chart-container" ref="chartContainer"></div>
+</template>
+
+<script>
+import echarts from 'echarts';
+
+export default {
+  name: 'LineChart',
+  props: {
+    // 图表数据
+    chartData: {
+      type: Object,
+      required: true
+    },
+    // 图表配置
+    options: {
+      type: Object,
+      default: () => ({})
+    },
+    // 图表宽度
+    width: {
+      type: String,
+      default: '100%'
+    },
+    // 图表高度
+    height: {
+      type: String,
+      default: '400px'
+    }
+  },
+  data() {
+    return {
+      chart: null
+    };
+  },
+  mounted() {
+    this.initChart();
+    this.resizeHandler = window.addEventListener('resize', this.resizeChart);
+  },
+  beforeDestroy() {
+    if (this.chart) {
+      this.chart.dispose();
+      this.chart = null;
+    }
+    if (this.resizeHandler) {
+      window.removeEventListener('resize', this.resizeHandler);
+    }
+  },
+  watch: {
+    chartData: {
+      deep: true,
+      handler() {
+        this.updateChart();
+      }
+    },
+    options: {
+      deep: true,
+      handler() {
+        this.updateChart();
+      }
+    }
+  },
+  methods: {
+    // 初始化图表
+    initChart() {
+      const container = this.$refs.chartContainer;
+      container.style.width = this.width;
+      container.style.height = this.height;
+
+      this.chart = echarts.init(container);
+      this.updateChart();
+    },
+
+    // 更新图表配置和数据
+    updateChart() {
+      if (!this.chart) return;
+
+      // 合并默认配置和用户自定义配置
+      const defaultOptions = {
+        tooltip: {
+          trigger: 'axis'
+        },
+        grid: {
+          left: '3%',
+          right: '4%',
+          bottom: '3%',
+          containLabel: true
+        },
+        xAxis: {
+          type: 'category',
+          boundaryGap: false
+        },
+        yAxis: {
+          type: 'value'
+        },
+        series: []
+      };
+
+      const mergedOptions = { ...defaultOptions, ...this.options };
+
+      // 应用数据
+      if (this.chartData.xAxis) {
+        mergedOptions.xAxis.data = this.chartData.xAxis;
+      }
+
+      if (this.chartData.series) {
+        mergedOptions.series = this.chartData.series;
+      }
+
+      this.chart.setOption(mergedOptions);
+    },
+
+    // 响应窗口大小变化
+    resizeChart() {
+      if (this.chart) {
+        this.chart.resize();
+      }
+    }
+  }
+};
+</script>
+
+<style scoped>
+.line-chart-container {
+  width: 100%;
+  height: 100%;
+}
+</style>
diff --git a/src/pages/ywts/shms/tcy/components/cars.vue b/src/pages/ywts/shms/tcy/components/cars.vue
new file mode 100644
index 0000000..1ff666a
--- /dev/null
+++ b/src/pages/ywts/shms/tcy/components/cars.vue
@@ -0,0 +1,199 @@
+<template>
+  <div id="case-linebar" class="container"/>
+</template>
+
+<script>
+
+import * as echarts from 'echarts';
+export default {
+  name: 'CaseLineBar',
+  data() {
+    return {
+      isShow: true,
+      myChart: null,
+      height: '0',
+      width: '0',
+      chartSettings: {
+        labelMap: { date: '时间' },
+        metrics: [],
+        dimension: ['date']
+      },
+      extend: {
+        color: ['#0071ff88', '#00afff88', '#00fdc088'],
+        legend: {
+          textStyle: {
+            color: '#cce9ff',
+            fontWeight: 'bold'
+          },
+          lineStyle: {
+            width: 10
+          },
+          data: ['进车数', '出车数'],
+        },
+        tooltip: {
+          trigger: 'axis',
+          axisPointer: {
+            type: 'cross',
+            label: {
+              backgroundColor: '#092647',  // 修改背景颜色
+              borderColor: '#404a59',      // 修改边框颜色
+              borderWidth: 1,
+              textStyle: {
+                color: '#ffffff',          // 修改文本颜色
+                fontSize: 12
+              }
+            }
+          },
+          textStyle: {
+            align: 'left'  // 左对齐 tooltip 内容
+          }
+        },
+        grid: {
+          left: '5%',
+          right: '5%',
+          bottom: '10%',
+          top: '15%',
+          containLabel: true
+        },
+        xAxis: {
+          type: 'category',
+          axisLine: {
+            lineStyle: {
+              color: '#cce9ff'
+            }
+          },
+          axisLabel: {
+            color: '#cce9ff'
+          }
+        },
+        yAxis: [
+          {
+            name: '',
+            type: 'value',
+            axisLine: {
+              lineStyle: {
+                color: '#cce9ff'
+              }
+            },
+            axisLabel: {
+              color: '#cce9ff'
+            },
+            nameTextStyle: {
+              color: '#cce9ff',
+              fontSize: 14,
+              verticalAlign: 'middle',
+            },
+            splitLine: {
+              show: true,
+              lineStyle: {
+                color: ['#c8d0da'],
+                type: 'dashed',
+              },
+            },
+          },
+        ],
+        series: [
+          {
+            name: '进车数',
+            type: 'line',
+            symbol: 'circle',
+            symbolSize: 3,
+            color: '#0a86d9',
+            areaStyle: {
+              color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
+                {
+                  offset: 0.5,
+                  color: '#0a86d9',
+                },
+                {
+                  offset: 1,
+                  color: 'rgba(10,25,124,0.2)'
+                }
+              ])
+            },
+          },
+          {
+            name: '出车数',
+            type: 'line',
+            symbol: 'circle',
+            symbolSize: 3,
+            color: 'rgba(255,190,68,1)',
+            areaStyle: {
+              color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
+                {
+                  offset: 0.5,
+                  color: 'rgba(255,190,68,0.7)',
+                },
+                {
+                  offset: 1,
+                  color: 'rgba(10,25,124,0.2)'
+                }
+              ])
+            },
+            // emphasis: {
+            //   focus: 'series'
+            // },
+            // label: {
+            //   show: true,
+            //   position: 'insideBottom'
+            // }
+          }
+        ]
+      },
+      chartData: {
+        columns: [],
+        rows: []
+      }
+    }
+  },
+  mounted() {
+    this.myChart = echarts.init(document.getElementById('case-linebar'))
+    this.height = document.getElementById('case-linebar').clientHeight - 40 + 'px'
+    this.width = document.getElementById('case-linebar').clientWidth - 10 + 'px'
+    const that = this
+    window.addEventListener('resize', function() {
+      if(!document.getElementById('case-linebar')) {
+        return
+      }
+      that.reload()
+    })
+
+  },
+
+  methods: {
+    async reload() {
+      this.isShow = false
+      await this.$nextTick()
+      this.height = document.getElementById('case-linebar').clientHeight - 10 + 'px'
+      this.width = document.getElementById('case-linebar').clientWidth - 10 + 'px'
+      this.isShow = true
+    },
+    // 获取数据
+    fetchData(id) {
+      // getMonthCaseFinished(id).then(response => {
+      //   if (response.code === 200) {
+      //     this.extend.series[0].data = response.data.map(item => item.num)
+      //     this.extend.series[1].data = response.data.map(item => item.rate.replace('%',''))
+      //     this.extend.xAxis.data = response.data.map(item => item.date)
+      //     this.myChart.setOption(this.extend, true)
+      //   }
+      // })
+      console.log('近1月车辆进出趋势折线图初始化');
+
+          this.extend.series[0].data = [5154,4545,2455,7212,4545,2455,7212]
+          this.extend.series[1].data = [12,234,24,2342,234,33,3]
+          this.extend.xAxis.data = ['07-01','07-02','07-03','07-04','07-05','07-06','07-07']
+          this.myChart.setOption(this.extend, true)
+
+    }
+  }
+}
+</script>
+<style lang="scss" scoped>
+.container{
+  position:relative;
+  width: 100%;
+  height:100%;
+}
+</style>
+
diff --git a/src/pages/ywts/shms/tcy/popup.vue b/src/pages/ywts/shms/tcy/popup.vue
index f4c3a2a..073a6c7 100644
--- a/src/pages/ywts/shms/tcy/popup.vue
+++ b/src/pages/ywts/shms/tcy/popup.vue
@@ -1,35 +1,103 @@
 <template>
   <div>
-    <div class="bottom" :style="{ left: `${windowPostion.x}px`, top: `${windowPostion.y}px`  }">
+    <div class="top" :style="{ left: `${windowPostion.x}px`, top: `${windowPostion.y}px`  }">
       <i class="el-icon-close close-pop" @click="$emit('close')" />
       <div class="list-down" style="width: 100%;margin: 0 auto;">
         <div class="list-item">
           <div style="width:100%;">
             <div style="width: 100%">
-              <i class="el-icon-office-building item-line one-line" style="width: 100%;" :title="gwAlarmInfo.name"><span style="margin-left: 5px">名称: {{ gwAlarmInfo.name }}</span></i>
-              <i class="el-icon-film item-line one-line" style="width: 100%;"><span style="margin-left: 5px">占用车位/全部车位: {{ gwAlarmInfo.in }} / {{ gwAlarmInfo.total }}</span></i>
-              <i class="el-icon-location item-line one-line" style="width: 100%;" ><span style="margin-left: 5px">利用率: {{ gwAlarmInfo.rate }}</span></i>
-              <i class="el-icon-news item-line one-line" style="width: 100%;"><span style="margin-left: 5px">车场总收入: {{ gwAlarmInfo.income }}</span></i>
-              <i class="el-icon-news item-line one-line" style="width: 100%;" :title="gwAlarmInfo.location"><span style="margin-left: 5px">位置: {{ gwAlarmInfo.location }}</span></i>
+              <i class="el-icon-office-building item-line one-line" style="width: 100%;" :title="tcyInfo.name"><span style="margin-left: 5px">名称: {{ tcyInfo.name }}</span></i>
+              <!-- <i class="el-icon-film item-line one-line" style="width: 100%;"><span style="margin-left: 5px">占用车位/全部车位: {{ tcyInfo.in }} / {{ tcyInfo.total }}</span></i> -->
+              <!-- <i class="el-icon-location item-line one-line" style="width: 100%;" ><span style="margin-left: 5px">利用率: {{ tcyInfo.rate }}</span></i> -->
+              <!-- <i class="el-icon-news item-line one-line" style="width: 100%;"><span style="margin-left: 5px">车场总收入: {{ tcyInfo.income }}</span></i> -->
+              <i class="el-icon-news item-line one-line" style="width: 100%;" :title="tcyInfo.location"><span style="margin-left: 5px">位置: {{ tcyInfo.location }}</span></i>
             </div>
           </div>
         </div>
       </div>
     </div>
+    <div class="bottom" >
+      <i class="el-icon-close close-pop" @click="$emit('close')" />
+      <div class="block block-base" style="width: 220px;">
+        <div :style="{backgroundImage:'url('+titleImg+')'}" class="title ellipsis" :title="tcyInfo.name">{{ tcyInfo.name }}</div>
+        <!-- 占用车位/全部车位 -->
+        <div class="info-item">
+          <div class="info-icon">
+            <i class="el-icon-film"></i>
+            <span class="info-text">占用车位/全部车位:</span>
+          </div>
+          <div class="info-value">{{ tcyInfo.in }} / {{ tcyInfo.total }}</div>
+        </div>
+
+        <!-- 利用率 -->
+        <div class="info-item">
+          <div class="info-icon">
+            <i class="el-icon-pie-chart"></i>
+            <span class="info-text">利用率:</span>
+          </div>
+          <div class="info-value">{{ tcyInfo.rate }}</div>
+        </div>
+
+        <!-- 车场总收入 -->
+        <div class="info-item">
+          <div class="info-icon">
+            <i class="el-icon-money"></i>
+            <span class="info-text">车场总收入:</span>
+          </div>
+          <div class="info-value"> {{ tcyInfo.income }}</div>
+        </div>
+
+        <!-- 位置 -->
+        <div class="info-item" style="padding-bottom: 0;">
+          <div class="info-icon">
+            <i class="el-icon-location"></i>
+            <span>位置:</span>
+          </div>
+          <div class="info-value ellipsis-multiline" :title="tcyInfo.location">{{ tcyInfo.location }}</div>
+        </div>
+      </div>
+      <div class="block">
+        <div :style="{backgroundImage:'url('+titleImg+')'}" class="title">近1月车辆进出趋势</div>
+        <cars style="flex:1;" ref="carsRef"/>
+      </div>
+      <div class="block">
+        <div :style="{backgroundImage:'url('+titleImg+')'}" class="title">近1年教育培训得分排行</div>
+        <edu-line-bar style="flex:1;" ref="eduLineBar"/>
+      </div>
+      <div class="block">
+        <div :style="{backgroundImage:'url('+titleImg+')'}" class="title">近1年工地综合得分排行</div>
+        <score-line-bar style="flex:1;" ref="scoreLineBar"/>
+      </div>
+      <div class="block">
+        <div :style="{backgroundImage:'url('+titleImg+')'}" class="title">近1年工地综合得分排行</div>
+        <score-line-bar style="flex:1;" ref="scoreLineBar"/>
+      </div>
+      <div class="block">
+        <div :style="{backgroundImage:'url('+titleImg+')'}" class="title">近1年工地综合得分排行</div>
+        <score-line-bar style="flex:1;" ref="scoreLineBar"/>
+      </div>
+    </div>
   </div>
 </template>
 
 <script>
 import { showPositin } from '@/utils/freedo/index'
-import { getPopularAttractionsDetail } from "../../../../api/ywts/cszl/gw";
+
+import PersonBar from "../../cszl/gd/components/personBar.vue";
+import CasePie from "../../cszl/gd/components/casePie";
+import CaseLineBar from "../../cszl/gd/components/caseLineBar";
+import EduLineBar from "../../cszl/gd/components/eduLineBar";
+import ScoreLineBar from "../../cszl/gd/components/scoreLineBar";
+import Cars from './components/cars.vue'
 export default {
-  name: 'alarmPop',
+  name: 'tcyPopup',
+  components: {Cars, ScoreLineBar, EduLineBar, CaseLineBar, CasePie, PersonBar},
   data() {
     return {
       titleImg: require('@/assets/images/popup/title.png'),  // 背景图片
       titleAll: require('@/assets/images/popup/title-all.png'), // 背景图片
       list: ['', '', '', ''],
-      gwAlarmInfo: {},
+      tcyInfo: {},
       windowPostion: { x: window.innerWidth - 165, y: window.innerHeight }, // 弹窗的位置
       defaultPhoto: require('@/assets/images/global_images/photo_error.png'),
       statusColor: {
@@ -70,7 +138,9 @@
           y: window.innerHeight / 2
         }
       }
-      this.gwAlarmInfo = item
+      this.tcyInfo = item
+
+      this.$refs.carsRef.fetchData(item.id)
     },
   },
 }
@@ -95,11 +165,10 @@
   background-size: 100% 100% !important;
   overflow: hidden;
 }
-
-.bottom {
+.top {
   z-index: 111111111111;
   width: 100%;
-  height: 140px;
+  height: 80px;
   width: 27rem;
   position: absolute;
   bottom: 10px;
@@ -111,6 +180,19 @@
   background: url("../../../../assets/images/popup/case/事件看板背景.png") !important;
   background-size: 100% 100% !important;
   overflow: hidden;
+}
+
+.bottom {
+
+  z-index: 111111111111;
+  width: 100%;
+  height: 250px;
+  position: absolute;
+  bottom: 10px;
+  left: 0px;
+  display: flex;
+  overflow: hidden;
+  padding: 0px 0px;
 
   .block {
     flex: 1;
@@ -141,6 +223,7 @@
   .title {
     text-shadow: 0 0 5px #d1ffff;
     height: 35px;
+    width: 80%;
     float: left;
     text-align: left;
     background-repeat: no-repeat;
@@ -272,4 +355,97 @@
   text-overflow: ellipsis;
   /* 文本显示为省略号 */
 }
+
+
+.block {
+  flex: 1;
+  height: 100%;
+  display: flex;
+  flex-wrap: wrap;
+  background: linear-gradient(to top left, rgba(5, 30, 61, 0.62), #0D3F7E9D);
+  border-radius: 5px;
+  box-shadow: 4px 4px 40px rgba(0, 0, 0, .05);
+  border-color: rgba(0, 0, 0, .05);
+  margin: 0px 5px;
+  flex-direction: column;
+  color: white;
+  padding: 15px;
+  max-width: 400px;
+  margin: 0 auto;
+
+    .info-item {
+      display: flex;
+      justify-content: space-between;
+      align-items: center;
+      padding: 8px 0;
+      border-bottom: 1px solid rgba(255, 255, 255, 0.1);
+    }
+
+    .info-item:last-child {
+      border-bottom: none;
+    }
+
+    .info-icon {
+      display: flex;
+      align-items: center;
+      opacity: 0.8;
+      white-space: nowrap;
+      margin-right: 6px;
+    }
+
+    .info-text {
+      flex: 1;
+      font-size: 14px;
+      text-align: left;
+      white-space: nowrap;
+    }
+
+    .info-value {
+      font-weight: 600;
+      font-size: 15px;
+    }
+
+    .name {
+      font-size: 16px;
+      font-weight: 600;
+    }
+
+    .location {
+      font-size: 13px;
+      opacity: 0.8;
+    }
+
+    .rate-bar {
+      height: 6px;
+      background-color: rgba(255, 255, 255, 0.2);
+      border-radius: 3px;
+      margin-top: 5px;
+    }
+
+    .rate-fill {
+      height: 100%;
+      background-color: #409EFF;
+      border-radius: 3px;
+    }
+}
+
+.block-base {
+  background: linear-gradient(to top left, rgba(5, 30, 61, 0.62), #0D3F7E9D);
+  border-radius: 5px;
+  box-shadow: 4px 4px 40px rgba(0, 0, 0, .05);
+  // border-color: rgba(0, 0, 0, .05);
+}
+
+.ellipsis {
+  white-space: nowrap;      /* 防止文本换行 */
+  overflow: hidden;         /* 隐藏溢出的文本 */
+  text-overflow: ellipsis;  /* 用省略号表示溢出的文本 */
+}
+.ellipsis-multiline {
+  display: -webkit-box;
+  -webkit-box-orient: vertical;
+  -webkit-line-clamp: 2; /* 限制显示的行数 */
+  overflow: hidden;
+  text-overflow: ellipsis;
+}
 </style>