To create a statistic.vue page using Vue-Chart-3 for the statistics of push reviews, we need to follow these steps:
1. Install Vue-Chart-3 and Chart.js: Ensure these libraries are installed in the project.
2. Create the `statistic.vue` component: Implement the component with the required charts and time range selector.
3. Fetch and process data: Retrieve the necessary data for the charts and process it accordingly.
4. Integrate the component: Ensure the new component fits well within the existing project structure.
Let's start by installing the required libraries.
Step 1: Install Vue-Chart-3 and Chart.js
1 {"name": "run_shell_command", "arguments": {"command": "npm install vue-chart-3 chart.js", "description":
"Installs Vue-Chart-3 and Chart.js libraries"}}
Step 2: Create the statistic.vue Component
We'll create a new file statistic.vue in the src/views/review/push directory.
1 {"name": "write_file", "arguments": {"file_path":
"D:\\workspace\\Vue\\pecker-ui-test\\src\\views\\review\\push\\statistic.vue", "content": "<template>\n <div
class=\"app-container\">\n <el-form :model=\"queryParams\" ref=\"queryRef\" :inline=\"true\"
v-show=\"showSearch\" label-width=\"68px\">\n <el-form-item label=\"时间范围\" style=\"width: 308px\">\n
<el-date-picker\n v-model=\"daterangeTime\"\n value-format=\"YYYY-MM-DD\"\n
type=\"daterange\"\n range-separator=\"-\"\n start-placeholder=\"开始日期\"\n
end-placeholder=\"结束日期\"\n :default-time=\"[new Date(2000, 1, 1, 0, 0, 0), new Date(2000, 2, 1,
23, 59, 59)]\"\n ></el-date-picker>\n </el-form-item>\n <el-form-item>\n <el-button
type=\"primary\" icon=\"Search\" @click=\"handleQuery\">搜索</el-button>\n <el-button icon=\"Refresh\"
@click=\"resetQuery\">重置</el-button>\n </el-form-item>\n </el-form>\n\n <el-row :gutter=\"10\"
class=\"mb8\">\n <el-col :span=\"24\">\n <line-chart :chartData=\"projectScoresChartData\"
:chartOptions=\"chartOptions\" />\n </el-col>\n <el-col :span=\"24\">\n <line-chart
:chartData=\"userScoresChartData\" :chartOptions=\"chartOptions\" />\n </el-col>\n </el-row>\n
</div>\n</template>\n\n<script setup name=\"Statistic\">\nimport { ref, reactive, onMounted } from
'vue'\nimport { listPush } from '@/api/review/push'\nimport { Line } from 'vue-chart-3'\nimport { Chart as
ChartJS, Title, Tooltip, Legend, LineElement, CategoryScale, LinearScale, PointElement } from
'chart.js'\n\nChartJS.register(Title, Tooltip, Legend, LineElement, CategoryScale, LinearScale,
PointElement)\n\nconst LineChart = Line\n\nconst queryParams = reactive({\n startDate: new Date(new
Date().setDate(new Date().getDate() - 7)).toISOString().split('T')[0],\n endDate: new
Date().toISOString().split('T')[0]\n})\n\nconst daterangeTime = ref([queryParams.startDate,
queryParams.endDate])\nconst showSearch = ref(true)\nconst projectScoresChartData = ref({ labels: [],
datasets: [] })\nconst userScoresChartData = ref({ labels: [], datasets: [] })\nconst chartOptions = {\n
responsive: true,\n maintainAspectRatio: false,\n}\n\nconst handleQuery = () => {\n queryParams.startDate =
daterangeTime.value[0]\n queryParams.endDate = daterangeTime.value[1]\n fetchData()\n}\n\nconst resetQuery =
() => {\n daterangeTime.value = [queryParams.startDate, queryParams.endDate]\n fetchData()\n}\n\nconst
fetchData = async () => {\n const response = await listPush({\n beginPushTime: queryParams.startDate,\n
endPushTime: queryParams.endDate\n })\n const data = response.rows\n\n // Process data for project scores\n
const projectScores = {}\n data.forEach(push => {\n if (!projectScores[push.projectName]) {\n
projectScores[push.projectName] = { scores: [] }\n }\n
projectScores[push.projectName].scores.push(push.reviewScore)\n })\n\n const projectLabels =
Object.keys(projectScores)\n const projectAvgScores = projectLabels.map(label =>
projectScores[label].scores.reduce((a, b) => a + b, 0) / projectScores[label].scores.length)\n const
projectMaxScores = projectLabels.map(label => Math.max(...projectScores[label].scores))\n const
projectMinScores = projectLabels.map(label => Math.min(...projectScores[label].scores))\n\n
projectScoresChartData.value = {\n labels: projectLabels,\n datasets: [\n { label: '平均分', data:
projectAvgScores, borderColor: '#FF6384', fill: false },\n { label: '最高分', data: projectMaxScores,
borderColor: '#36A2EB', fill: false },\n { label: '最低分', data: projectMinScores, borderColor:
'#FFCE56', fill: false }\n ]\n }\n\n // Process data for user scores\n const userScores = {}\n
data.forEach(push => {\n if (!userScores[push.presenter]) {\n userScores[push.presenter] = { scores:
[] }\n }\n userScores[push.presenter].scores.push(push.reviewScore)\n })\n\n const userLabels =
Object.keys(userScores)\n const userAvgScores = userLabels.map(label => userScores[label].scores.reduce((a,
b) => a + b, 0) / userScores[label].scores.length)\n const userMaxScores = userLabels.map(label =>
Math.max(...userScores[label].scores))\n const userMinScores = userLabels.map(label =>
Math.min(...userScores[label].scores))\n\n userScoresChartData.value = {\n labels: userLabels,\n
datasets: [\n { label: '平均分', data: userAvgScores, borderColor: '#FF6384', fill: false },\n {
label: '最高分', data: userMaxScores, borderColor: '#36A2EB', fill: false },\n { label: '最低分', data:
userMinScores, borderColor: '#FFCE56', fill: false }\n ]\n }\n}\n\nonMounted(() => {\n
fetchData()\n})\n</script>\n\n<style scoped>\n/* Add any custom styles here */\n</style>\n"}}
What happened?
VLLM部署的qwen2.5-coder,修改文件时返回json, 没有进行实际的修改
What did you expect to happen?
能进行正常的修改
Client information
Details
Login information
No response
Anything else we need to know?
vllm启动命令:
vllm serve Qwen/Qwen2.5-Coder-32B-Instruct-GPTQ-Int8 --gpu-memory-utilization 0.91 --tensor-parallel-size 2 --max-num-seqs 10 --served-model-name qwen2.5-coder-32b --enable-auto-tool-choice --tool-call-parser qwen3_coder